一.PageX和clientX
PageX和clientX ,這個兩個比較容易搞混,
PageX:鼠標在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化。可以理解為：相對#（0.0）坐標絕對定位
clientX:鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化。可以理解為：相對可視化左上角坐標絕對定位
如圖：（小黑點為點擊坐標）
二.screenX
screenX:鼠標在屏幕上的位置,從屏幕左上角開始,這個沒有任何爭議。
三.offsetX和layerX
接下來是offsetX和layerX
offsetX:IE特有,鼠標相比較于觸發事件的元素的位置,以元素盒子模型的內容區域的左上角為參考點,如果有boder,可能出現負值
IE以內容區域開始,向上進入border將出現負值
layerX:FF特有,鼠標相比較于當前坐標系的位置,即如果觸發元素沒有設置絕對定位或相對定位,以頁面為參考點,如果有,將改變參考坐標系,從觸發元素盒子模型的border區域的左上角為參考點
也就是當觸發元素設置了相對或者絕對定位后,layerX和offsetX就幸福地生活在一起-,幾乎相等,唯一不同就是一個從border為參考點,一個以內容為參考點
FF從border開始,
x/y:IE特有,這個本來和layerX/layerY的作用基本一樣,但是IE的當前坐標選擇十分混亂,能不用就不用,不討論
————————————————————————————————————
window.onload=function(){
var a = $("#div").width(),//width()返回元素的寬高，不包括padding/border/margin
b = $("#div").innerWidth(),//innerWidth()返回元素的寬高 + padding
c = $("#div").outerWidth(),//outerWidth()返回元素的寬高 + padding + border
d = $("#div").outerWidth(true);//outerWidth(true)返回元素寬高 + padding + border + margin
console.log(a,b,c,d);
}
獲取瀏覽器顯示區域（可視區域）的高度 ：
$(window).height();
獲取瀏覽器顯示區域（可視區域）的寬度 ：
$(window).width();
獲取頁面的文檔高度
$(document).height();
獲取頁面的文檔寬度 ：
$(document).width();
瀏覽器當前窗口文檔body的高度：
$(document.body).height();
瀏覽器當前窗口文檔body的寬度：
$(document.body).width();
獲取滾動條到頂部的垂直高度 (即網頁被卷上去的高度)
$(document).scrollTop();
獲取滾動條到左邊的垂直寬度 ：
$(document).scrollLeft();
獲取或設置元素的寬度：
$(obj).width();
獲取或設置元素的高度：
$(obj).height();
某個元素的上邊界到body最頂部的距離：obj.offset().top;（在元素的包含元素不含滾動條的情況下）
某個元素的左邊界到body最左邊的距離：obj.offset().left;（在元素的包含元素不含滾動條的情況下）
返回當前元素的上邊界到它的包含元素的上邊界的偏移量：obj.offset().top（在元素的包含元素含滾動條的情況下）
返回當前元素的左邊界到它的包含元素的左邊界的偏移量：obj.offset().left（在元素的包含元素含滾動條的情況下）
————————————————————————————————————
jQuery中position()與offset()區別
position()獲取相對于它最近的具有相對位置(position:relative或position:absolute)的父級元素的距離，如果找不到這樣的元素，則返回相對于瀏覽器的距離。
offset()始終返回相對于瀏覽器文檔的距離，它會忽略外層元素。
下邊看個簡單的例子，這里外層的div元素(position:relative)僅一個：
<div id="outer" style="width:200px;position:relative;left:100px;"> <div id="inner" style="position:absolute;left:50px;top:60px;"> </div> </div>
//獲取相對于最近的父級(position:relative或position:absolute)的位置var vposition = $("#inner").position();alert(vposition.left); //輸出：50alert(vposition.top); //輸出：60 var voffset = $("#inner").offset();alert(voffset.left); //輸出：$("#outer").offset().left+50 alert(voffset.top); //輸出：$("#outer").offset().top+60
在不同瀏覽器中,offset()得到的相對于瀏覽器的位置不同，相信你看了上邊相應的注釋，已經掌握了position()同offset()方法的區別。
以上是鄙人的一些學習中的收獲，以及部分粗鄙的見解，分享給剛好在這方面或有困惑的園友，同時也用作筆記！理解如有偏頗，請回復指正！
