如何使用 jQuery 获取页面宽高

在网页开发中，获取页面的宽度和高度是一个常见需求，jQuery 为此提供了简便的方法。掌握这些方法，能让开发者更好地实现页面的自适应布局、元素定位等功能。

使用 jQuery 获取页面宽度，主要有两种方式。一种是通过 $(document).width() 方法。$(document) 指代整个文档对象，width() 函数则用于获取其宽度值。这个宽度包含了文档内容区域的宽度，在页面布局和样式调整中非常有用。比如，当我们需要根据页面宽度来动态调整导航栏的样式时，就可以利用这个方法获取宽度值，然后编写相应的逻辑。例如：

$(document).ready(function() {
    var docWidth = $(document).width();
    if (docWidth < 768) {
        // 页面宽度小于 768px 时执行某些操作，如将导航栏设置为响应式布局
        $('.navbar').addClass('responsive');
    }
});

另一种获取页面宽度的方式是 $(window).width()。$(window) 代表浏览器窗口对象，width() 函数获取的是浏览器窗口的可视宽度。这个值会随着浏览器窗口大小的改变而实时变化。例如在实现图片轮播效果时，如果希望图片宽度根据浏览器窗口宽度自适应，可以这样做：

$(window).resize(function() {
    var winWidth = $(window).width();
    $('.slider img').width(winWidth);
});

获取页面高度也有类似方法。$(document).height() 可获取整个文档的高度，包括滚动条下方不可见的部分。在处理页面加载完成后，想根据文档总高度来调整某些元素位置时，这个方法就很实用。比如：

$(document).ready(function() {
    var docHeight = $(document).height();
    $('.footer').css('top', docHeight - $('.footer').height());
});

而 $(window).height() 则返回浏览器窗口的可视高度。常用于实现页面滚动加载更多内容的功能，当滚动到窗口底部一定距离时，触发加载更多数据的操作。

$(window).scroll(function() {
    var winHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var docHeight = $(document).height();
    if (scrollTop + winHeight >= docHeight - 100) {
        // 距离底部 100px 时加载更多内容
        loadMoreContent();
    }
});

通过这些 jQuery 方法，开发者能轻松获取页面宽高，为打造更加灵活、高效的网页应用奠定基础。