在前端開發中，我們經常需要獲取頁面元素的高度。常用的方法是使用CSS的height屬性，但是這只能獲取到元素的固定高度，無法獲取到動態變化的高度。而在jQuery中，我們可以使用"$()"來獲取元素的高度。
使用"$()"獲取元素的高度非常簡單，只需要在"$()"中傳入需要獲取高度的元素的選擇器即可。例如，如果我們需要獲取id為"demo"的div的高度，可以使用如下代碼：
<code>\$('#demo').height();</code>以上代碼會返回div的高度值。這里需要注意的是，返回的高度值是一個數字，表示像素值。如果需要獲取其他單位的高度，可以使用其他相關的方法來進行轉換。
除了可以獲取固定高度的元素，"$()"還能夠獲取動態變化的高度，例如當元素的內容發生改變時，元素的高度也會相應改變。下面是一個例子：
<code>\<!DOCTYPE html>
\<html>
\<head>
<meta charset="UTF-8">
<title>獲取元素高度</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.demo {
height: 100px;
background-color: #f5f5f5;
overflow: hidden;
}
</style>
\</head>
\<body>
<div class="demo" id="demo">這是一個示例文本</div>
<button onclick="changeText()">改變文本內容</button>
<script>
function changeText() {
\$('#demo').text('這是改變后的文本');
console.log(\$('#demo').height());
}
</script>
\</body>
\</html></code>在以上代碼中，點擊按鈕后會將div的文本內容改變為"這是改變后的文本"。在改變文本內容后，我們使用"$()"來獲取div的高度，并輸出到控制臺中。你可以在控制臺中看到，div的高度確實發生了改變。
除了使用"$()"來直接獲取元素的高度，我們還可以使用其他相關的方法來獲取元素的高度。例如，可以使用"$().innerHeight()"來獲取元素的內部高度，即包括padding和border的高度。也可以使用"$().outerHeight()"來獲取元素的外部高度，即包括padding、border和margin的高度。下面是一個示例：
<code>\<!DOCTYPE html>
\<html>
\<head>
<meta charset="UTF-8">
<title>獲取元素高度</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.demo {
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 20px;
background-color: #f5f5f5;
}
</style>
\</head>
\<body>
<div class="demo" id="demo">這是一個示例文本</div>
<script>
console.log(\$('#demo').innerHeight());
console.log(\$('#demo').outerHeight());
</script>
\</body>
\</html></code>在以上代碼中，我們分別輸出了div的內部高度和外部高度到控制臺中。你可以在控制臺中看到，內部高度包括了padding的高度，外部高度還包括了border和margin的高度。
綜上所述，使用"$()"是獲取頁面元素高度的一種簡便方法。無論是獲取固定高度的元素還是獲取動態變化的高度，都可以通過"$()"來實現。另外，還可以結合其他相關的方法來獲取元素的內部高度和外部高度。