jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，
height()
方法是一个非常有用的功能，它允许开发者轻松地获取或设置元素的内部高度。本文将深入探讨 jQuery
height()
方法的奥秘，包括其与原生 CSS 的关系以及如何巧妙地使用它。
原生 CSS 与 jQuery 的基础
在深入探讨 jQuery
height()
之前，我们需要了解一些基础知识。
原生 CSS
CSS（层叠样式表）是用于描述 HTML 文档样式的语言。在 CSS 中，
height
属性用于设置元素的垂直高度。以下是一个简单的 CSS 例子：
#example {
height: 100px;
}
在这个例子中，ID 为
example
的元素的高度被设置为 100 像素。
jQuery
jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它提供了一个易于使用的 API，用于操作 HTML DOM、事件处理、动画和 Ajax 请求。以下是如何使用 jQuery 设置元素高度的例子：
$(‘#example’).height(100);
在这个例子中，ID 为
example
的元素的高度被设置为 100 像素。
jQuery height() 方法详解
jQuery
height()
方法可以用于获取或设置元素的内部高度。下面是
height()
方法的两种基本用法：
获取高度
var height = $(‘#example’).height();
console.log(height); // 输出元素的高度
在这个例子中，
height()
方法被用来获取 ID 为
example
的元素的高度。
设置高度
$(‘#example’).height(150);
在这个例子中，
height()
方法被用来将 ID 为
example
的元素的高度设置为 150 像素。
原生 CSS 与 jQuery 的融合
jQuery
height()
方法与原生 CSS 的
height
属性紧密相关。以下是一些关于如何将两者融合使用的重要点：
1. 初始设置
在页面加载时，通常使用原生 CSS 设置元素的初始高度。然后，可以使用 jQuery 根据需要动态调整高度。
#example {
height: 100px;
}
$(document).ready(function() {
$(‘#example’).height(150);
});
2. 动画效果
jQuery 允许你使用
animate()
方法创建平滑的动画效果，包括高度变化。以下是一个使用
animate()
方法改变元素高度的例子：
$(‘#example’).animate({
height: ‘200px’
}, 1000);
在这个例子中，元素的高度将在 1000 毫秒内从当前值平滑地过渡到 200 像素。
3. 响应式设计
在响应式设计中，你可能需要根据屏幕尺寸调整元素的高度。jQuery 可以帮助你轻松地实现这一点：
$(window).resize(function() {
$(‘#example’).height($(window).height() / 2);
});
在这个例子中，当窗口大小改变时，元素的高度将被设置为窗口高度的一半。
总结
jQuery
height()
方法是一个强大的工具，它允许开发者轻松地获取和设置元素的内部高度。通过理解原生 CSS 与 jQuery 的关系，你可以更有效地使用
height()
方法，实现各种复杂的布局和动画效果。希望本文能帮助你更好地掌握 jQuery
height()
方法的奥秘。