jQuery中宽、高、位置和滚动条总结

js中各种宽高令人头疼，相反，jQuery中则精简了不少。

宽、高

jQuery中获取宽高，最经典的就是width()和height()。因为CSS盒子模型的缘故，元素的宽高分为很多。以下以获取元素的宽为例：

$("div").width(); //内容的宽

$("div").innerWidth(); //内容的宽 + 左内边距 + 右内边距

$("div").outerWidth(); //内容的宽 + 左内边距 + 右内边距 + 左边框 + 右边框

$("div").outerWidth(true); //内容的宽 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

对于元素的高是同样的道理。

同时需要注意的是，$(window)代表浏览器窗口，通过$(window).height()获取的是浏览器窗口的高，如果调整浏览器的高度，则其值会变。

$(document)代表HTML文档，通过$(document).height()获取的是整个文档的高，如果调整浏览器的高度，则其值不会变。

1.对于$(window)和$(document)来说，他们的width()、innerWidth()和outerWidth()的值都是一样的。
2.width()和css("width")的区别在于，后者获取的值带有单位

位置

jQuery中，与元素位置相关的有两个函数：offset()和position()。
这两个函数都返回一个对象，这个对象中含有两个属性：left和top。

这两个函数不同点在于，offset是元素相对于文档的位置，而position是元素相对于其含有position属性的最近祖先元素的位置。

$("div").offset().left; //元素相对于HTML文档左边的距离
$("div").position().left; //元素相对于其含有position属性的最近祖先元素左边的距离

jQuery中offset和position

滚动条

主要有两个函数scrollTop()和scrollLeft()。
对于普通元素来说，scrollTop()就是该元素滚动上去的距离，对于$(window)来说，就是整个网页滚动上去的距离。

$("div").scrollTop(); 
$(window).scrollTop();

举例1 可视区域加载

当页面滚动到元素所在位置时，再进行一些动作，比如执行动画，加载图片。这是怎么实现的呢？

其实很简单，只要$(window).scrollTop() + $(window).height()的和大于$("div").offset().top就行了。

$(window).scroll(function(){
    var flag = ($(window).scrollTop() + $(window).height()) > $("div").offset().top;
    if(flag){
        //do something
    }
});

举例2 滚动到底部自动加载

经常在网页中看到，当页面滚动到底部时，页面自动加载，这是怎么实现的呢？

其实判断页面是否滚动到底部，很简单，只要$(window).height() + $(window).scrollTop() 的和大于等于 $(document).height()就行了。

前面已经说了，window和document是不同的，window指的是浏览器窗口，而document指的是HTML文档。

$(window).scroll(function(){
    var flag = ($(window).height() + $(window).scrollTop()) >=$(document).height();
    if(flag){
        //加载新数据
    }
});