1、offset()獲取匹配元素在相對瀏覽器窗口的偏移量 返回一個對象，包括兩個屬性。left:相對瀏覽器窗口左邊的距離。top:相對瀏覽器頂部的距離。
$("#div1").offset().left; //返回id為div1相對於瀏覽器窗口最左邊的距離
$("#div1").offset().top; //返回id為div1相對於瀏覽器窗口最頂部的距離
以下例子展示了，當點擊文本框時，在下方顯示一個日期div。緊緊貼住上面的文本框。並且不需要調div的css位置，無論上面的文本框位置如果變化，都能夠緊緊且住上面的文本框，記得在前幾天搞愛的車輪戰報名系統的js模擬下拉列表的時候是調CSS貼住上面的文本框的，這樣一旦改變了文本框的位置，模擬的下拉列表的div的css也要跟住調，其實這是很SB的。下面這個方法好。
function showDiv(obj) {
jQuery("#divShow").css("left", jQuery(obj).offset().left); //設置#divShow與瀏覽器的左距離為文本框距離瀏覽器左邊的距離。
jQuery("#divShow").css("top", jQuery(obj).offset().top + jQuery(obj).outerHeight()); //設置#divShow距離頂部的距離為文本框距離頂部的距離加上自 身高度。
jQuery("#divShow").show();
}
<input type="text" value="ok" onclick="showDiv(this);" style="margin-left:100px;" />
<div id="divShow" style="display:none;position:absolute;">2010-03-22</div>
2、position()獲取匹配元素在相對父元素的偏移量 返回一個對象，包括兩個屬性。left:相對父元素最左邊的距離。top:相對父元素最右邊的距離。只對可見元素有效。
<head>
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
var left = $("#div2").position().left; //21.11111
var top = $("#div2").position().top; //33.33333
alert("距離父元素頂部的距離是：" + left + "; 距離父元素左邊的距離是:" + top);
})
})
</script>
</head>
<body>
<div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px; position:relative;">
<div id="div2" style="width:100px;height:200px; background-color:Green; position:absolute; left:22px; top:34px;">我是一個div元素</div>
<input id="btn1" type="button" value="查看" />
</div>
</body>
以上代碼相當於javascript中的:
function fun1() { var left = document.getElementById("div2").offsetLeft; //21 var top = document.getElementById("div2").offsetTop; //33 alert("距離父元素頂部的距離是：" + left + "; 距離父元素左邊的距離是:" + top); }
javascript比jQuery不同一點的地方就是它輸出的是整數21,33，但是跟CSS設置的卻差了一個像素，jQuery還能夠用Math里的方法來還原，但是javascript就不知道怎么搞了。
3、scrollTop() 獲取匹配元素距離滾動條頂部的距離，說白了就是邊框的最頂部與當前顯示出來的最頂部的距離。
scrollTop(val) 設置匹配元素距離滾動條頂部的距離
該屬性常常配合scroll()事件一起使用，能夠實現元素隨滾動條的滾動而滾動，類似於漂浮廣告效果。
$(this).scroll(function(){
$("#div1").css("top", $(document).scrollTop()); //注意id為div1的div要設置為絕對定位。如果是底部漂浮，只需要$(document).scrollTop()加上相應的垂直距離就可以了。
})
4、scrollLeft() 獲取匹配元素距離滾動條頂部的距離,說白了就是邊框的最左邊與當前顯示出來的最左邊的距離。
scrollLeft(val) 設置匹配元素距離滾動條頂部的距離
<head>
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
var scrollTop = $("#div1").scrollTop();
var scrollLeft = $("#div1").scrollLeft();
alert("顯示的最頂部距離真正的頂部的距離是：" + scrollTop + "; 顯示的最左邊距離真正的左邊的距離是:" + scrollLeft);
})
})
</script>
</head>
<body>
<div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px; overflow:scroll;">
<div style="width:400px;height:800px;/*撐出滾動條*/">我是一個div元素</div>
<input id="btn1" type="button" value="查看" />
</div>
</body>
5、height() 獲取匹配元素的高度值 //不包括padding,不包括邊框 val可以是字符串"300px"、也可以是數字300，還可以是一個函數，返回值作為參數
height(val) 設置匹配元素的高度值
6、 width() 獲取匹配元素的寬度值 //不包括padding,不包括邊框
width(val) 設置匹配元素的寬度值
<head>
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
var Width = $("#div1").width(); //200 css的width屬性，不包括內邊距、邊框和外邊距
var Height = $("#div1").height(); //400 css的height屬性，不包括內邊距、邊框和外邊距
alert("div1的寬度是：" + Width + "; div1的高度是：" + Height);
})
})
</script>
</head>
<body>
<div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;">
我是一個div元素
<input id="btn1" type="button" value="查看" />
</div>
</body>
7、innerHeight() 獲取匹配元素的高度值 //包括padding但不包括border
innerHenght(val) 設置匹配元素的高度值
8、innerWidth() 獲取匹配元素的寬度值 //包括padding但不包括border
innerWidth(val) 設置匹配元素的寬度值
<head>
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
var innerWidth = $("#div1").innerWidth(); //240 包括邊框和內邊距
var innerHeight = $("#div1").innerHeight(); //440 包括邊框和內邊距
alert("div1的寬度是：" + innerWidth + "; div1的高度是：" + innerHeight);
})
})
</script>
</head>
<body>
<div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;">
我是一個div元素
<input id="btn1" type="button" value="查看" />
</div>
</body>
以上的主jQuery相當於代碼(javascript版)：
function fun1() {
var innerWidth = document.getElementById("div1").clientWidth;
var innerHeight = document.getElementById("div1").clientHeight;
alert("div1的寬度是：" + innerWidth + "div1的高度是:" + innerHeight);
}
9、 outerHeight() 獲取元素的高度值 //包括padding和border
outerHeight(val) 設置元素的高度值
還可以接受一個參數，該參數代表是否計算外邊距，如果為true則表示計算外邊距。
10、outerWidth() 獲取匹配元素的寬度值 //(包括padding和border)
outerWidth() 設置匹配元素的寬度值
還可以接受一個參數，該參數代表是否計算外邊距，如果為true則表示計算外邊距。
<head>
<title></title>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn1").click(function () {
var outerWidth = $("#div1").outerWidth(); //260包括邊框和內邊距
var outerHeight = $("#div1").outerHeight(); //460 包括邊框和內邊距
alert("div1的寬度是：" + outerWidth + "; div1的高度是：" + outerHeight);
var outerWidth1 = $("#div1").outerWidth(true); //320 包括邊框、外邊距和內邊距(也就是元素實際占用的大小)
var outerHeight1 = $("#div1").outerHeight(true); //520 包括邊框、外邊距和內邊距(也就是元素實際占用的大小)
alert("div1的寬度是：" + outerWidth1 + "; div1的高度是：" + outerHeight1);
})
})
</script>
</head>
<body>
<div id="div1" style="width:200px;height:400px;border:10px solid #000; padding:20px 20px; margin:30px 30px;">
我是一個div元素
<input id="btn1" type="button" value="查看" />
</div>
</body>
在jQuery的參數不為真的情況下，以上jQuery的主代碼相當於：
function fun1() {
var outerWidth = document.getElementById("div1").offsetWidth;
var outerHeight = document.getElementById("div1").offsetHeight;
alert("div1的寬度是：" + outerWidth + "; div1的高度是：" + outerHeight);
}
如果參數為真的情況下，就相當於javascript:
function fun1() {
var div1 = document.getElementById("div1");
var outerWidth1 = div1.offsetWidth + parseInt(div1.style.marginLeft) + parseInt(div1.style.marginRight);
var outerHeight1 = div1.offsetHeight + parseInt(div1.style.marginTop) + parseInt(div1.style.marginBottom);
alert("div1的寬度是：" + outerWidth1 + "; div1的高度是：" + outerHeight1);
}
此處可能寫的不是很好，應該有更好的辦法，本人javascript還在初學當中。