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")的區(qū)別在于，后者獲取的值帶有單位

位置

jQuery中，與元素位置相關的有兩個函數(shù)：offset()和position()。
這兩個函數(shù)都返回一個對象，這個對象中含有兩個屬性：left和top。

這兩個函數(shù)不同點在于，offset是元素相對于文檔的位置，而position是元素相對于其含有position屬性的最近祖先元素的位置。

$("div").offset().left; //元素相對于HTML文檔左邊的距離
$("div").position().left; //元素相對于其含有position屬性的最近祖先元素左邊的距離

jQuery中offset和position

滾動條

主要有兩個函數(shù)scrollTop()和scrollLeft()。
對于普通元素來說，scrollTop()就是該元素滾動上去的距離，對于$(window)來說，就是整個網(wǎng)頁滾動上去的距離。

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

舉例1 可視區(qū)域加載

當頁面滾動到元素所在位置時，再進行一些動作，比如執(zhí)行動畫，加載圖片。這是怎么實現(xiàn)的呢？

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

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

舉例2 滾動到底部自動加載

經常在網(wǎng)頁中看到，當頁面滾動到底部時，頁面自動加載，這是怎么實現(xiàn)的呢？

其實判斷頁面是否滾動到底部，很簡單，只要$(window).height() + $(window).scrollTop() 的和大于等于 $(document).height()就行了。

前面已經說了，window和document是不同的，window指的是瀏覽器窗口，而document指的是HTML文檔。

$(window).scroll(function(){
    var flag = ($(window).height() + $(window).scrollTop()) >=$(document).height();
    if(flag){
        //加載新數(shù)據(jù)
    }
});