PHP new static 和 new self詳解
688
2024-01-10
先給大家展示謝
jQuery.fn.css (propertyName [, value ]| object )（函數(shù)用于設(shè)置或返回當(dāng)前jQuery對(duì)象所匹配的元素的css樣式屬性值。如果需要?jiǎng)h除指定的css屬性，請(qǐng)使用該函數(shù)將其值設(shè)為空字符串("")
注意：1、如果省略了value參數(shù)，則表示獲取屬性值；如果指定了該參數(shù)，則表示設(shè)置屬性值。2、css()函數(shù)的所有"設(shè)置"操作針對(duì)的是當(dāng)前jQuery對(duì)象所匹配的每一個(gè)元素；所有"讀取"操作只針對(duì)第一個(gè)匹配的元素。）
jQuery.fn.offset([coordinatesObj])（設(shè)置或返回當(dāng)前匹配元素（將content+padding+border看成一個(gè)整體）相對(duì)于當(dāng)前文檔的偏移，也就是相對(duì)于當(dāng)前文檔的坐標(biāo)。該函數(shù)只對(duì)可見元素有效。該函數(shù)返回一個(gè)坐標(biāo)對(duì)象(Object)，該對(duì)象有一個(gè)left屬性和top屬性。屬性值均為數(shù)字，它們都以像素(px)為單位。與position()不同的是：offset()返回的是相對(duì)于當(dāng)前文檔的坐標(biāo)，position()返回的是相對(duì)于其定位的祖輩元素的坐標(biāo)。）
jQuery.fn.position()（返回當(dāng)前匹配元素（將content+padding+border+margin看成一個(gè)整體）相對(duì)于其被定位的祖輩元素的偏移，也就是相對(duì)于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對(duì)可見元素有效。所謂"被定位的元素"，就是元素的CSS position屬性值為absolute、relative或fixed(只要不是默認(rèn)的static即可)。該函數(shù)返回一個(gè)坐標(biāo)對(duì)象，該對(duì)象有一個(gè)left屬性和top屬性。屬性值均為數(shù)字，它們都以像素(px)為單位。與offset()不同的區(qū)別詳見offset。此外，position()函數(shù)無法用于設(shè)置操作。如果當(dāng)前元素的祖輩元素全部都是默認(rèn)定位(static)，那么該函數(shù)返回的偏移位置與offset()函數(shù)相同）
jQuery.fn.scrollLeft([ value ])（設(shè)置或返回當(dāng)前匹配元素相對(duì)于水平滾動(dòng)條左側(cè)的偏移。當(dāng)一個(gè)元素的實(shí)際寬度超過其顯示區(qū)域的寬度時(shí)，在一定的設(shè)置下，瀏覽器會(huì)為該元素顯示相應(yīng)的水平滾動(dòng)條。此時(shí)，scrollLeft()返回的就是該元素在可見的滾動(dòng)區(qū)域左側(cè)被隱藏部分的寬度(單位：像素)。
如果水平滾動(dòng)條在最左側(cè)(也就是可見區(qū)域左側(cè)沒有被隱藏的內(nèi)容)，或者當(dāng)前元素是不可水平滾動(dòng)的，那么scrollLeft()將返回0。對(duì)可見的和隱藏的元素均有效。）
jQuery.fn.scrollTop([ value ])（設(shè)置或返回當(dāng)前匹配元素相對(duì)于垂直滾動(dòng)條頂部的偏移。當(dāng)一個(gè)元素的實(shí)際高度超過其顯示區(qū)域的高度時(shí)，在一定的設(shè)置下，瀏覽器會(huì)為該元素顯示相應(yīng)的垂直滾動(dòng)條。此時(shí)，scrollTop()返回的就是該元素在可見區(qū)域之上被隱藏部分的高度(單位：像素)。如果垂直滾動(dòng)條在最上面(也就是可見區(qū)域之上沒有被隱藏的內(nèi)容)，或者當(dāng)前元素是不可垂直滾動(dòng)的，那么scrollTop()將返回0。對(duì)可見的和隱藏的元素均有效）
jQuery.fn.height([ value ])（設(shè)置或返回當(dāng)前匹配元素的高度。該高度值不包括元素的外邊距(margin)、內(nèi)邊距(padding)、邊框(border)等部分的高度。如下圖
如果你要獲取包括上述某部分在內(nèi)的高度，請(qǐng)使用innerHeight()和outerHeight()。該函數(shù)屬于jQuery對(duì)象(實(shí)例)，并且對(duì)不可見的元素依然有效）
jQuery.fn.innerHeight([ value ])（設(shè)置或返回當(dāng)前匹配元素的內(nèi)高度。該高度值包括內(nèi)邊距(padding)，但不包括元素的外邊距(margin)、邊框(border)等部分的高度。如下圖：
該函數(shù)屬于jQuery對(duì)象(實(shí)例)，并且對(duì)不可見的元素依然有效）
jQuery.fn.outerHeight([includeMargin])（設(shè)置或返回當(dāng)前匹配元素的外高度。該高度值包括內(nèi)邊距(padding) 、邊框(border)，但不包括元素的外邊距(margin)部分的高度。你也可以指定參數(shù)為true，以包括外邊距(margin)部分的高度如下圖：
該函數(shù)屬于jQuery對(duì)象(實(shí)例)，并且對(duì)不可見的元素依然有效）
jQuery.fn.width([ value ])(描述：略)
jQuery.fn.innerWidth ([ value ])(描述：略)
jQuery.fn.outerWidth ([includeMargin])(描述：略)
借用孤月藍(lán)風(fēng)上色的詳解圖
接下來分析部分函數(shù)。
a.jQuery.fn.offset分析
offset獲取的方法如下（以top為例）：
offset.top = elem距瀏覽器視窗頂部的位置 + 文檔頂部被卷起來的部分 ? elem距離父元素上邊框高度top。
jQuery處理就變成了：
box = elem.getBoundingClientRect()； offset.top = box.top + ( win.pageYOffset || docElem.scrollTop ) - ( docElem.clientTop || 0 )；
這里面IE8-和IE9+等現(xiàn)代瀏覽器有個(gè)差別，使用document.documentElement.getBoundingClientRect();IE8-的top/left值為-2px；其他現(xiàn)代瀏覽器top/left值為0px；可以看出IE8-瀏覽器是以窗口的（2,2）坐標(biāo)為原點(diǎn)坐標(biāo)的。
瀏覽器會(huì)默認(rèn)body和窗口之間有8px的間隙，所以使用document.body.getBoundingClientRect(); 得到的top/left值為8px。
offset的設(shè)置方法如下（以top為例）：
需要注意在設(shè)置之前，如果當(dāng)前elem的position為static則要設(shè)置為relative才能處理
先得到要設(shè)置給elem的css特征top的值計(jì)算方法為
setTop = （要設(shè)置的offset top值 ? 當(dāng)前元素的offset top值）+ elem的css top特征值
然后將setTop設(shè)置給elem的css top特征。
jQuery的處理就變成了：
var curElem = jQuery( elem ),
curOffset = curElem.offset(),
curCSSTop = jQuery.css( elem, "top" ),
props = {}, curPosition = {}, curTop;
//如果top值為auto且position為absolute或fixed則需要計(jì)算當(dāng)前elem的css特征top的值
if ( calculatePosition ) {
curPosition = curElem.position();
curTop = curPosition.top;
} else {
curTop = parseFloat( curCSSTop ) || ;
}
if ( options.top != null ) {
props.top = ( options.top - curOffset.top ) + curTop;
}
curElem.css( props );
b.jQuery.fn.position
position只能獲取不能設(shè)置，獲取方法如下（以top為例）：
position.top = elem的offsetTop - elem被定位的祖輩元素的offsetTop ? elem的marginTop值
這里面這個(gè)top就真的是elem的css屬性top的值了。對(duì)于jQuery來說這個(gè)elem把width+padding+border+margin看成了一個(gè)整體，所以最終得到的top是elem這個(gè)整體距離被定為祖輩元素頂部?jī)?nèi)邊的距離。
jQuery的處理變成了：
var offsetParent, offset,
parentOffset = { top: 0, left: 0 },
elem = this[ 0 ];
//當(dāng)元素為fixed定位是他的被定位的祖輩元素是window視窗(parentOffset = {top:0, left: 0}
if ( jQuery.css( elem, "position" ) === "fixed" ) {
//假設(shè)getBoundingClientRect可用
offset = elem.getBoundingClientRect();
} else {
//獲取offsetParent
offsetParent = this.offsetParent();
// Get correct offsets
offset = this.offset();
if ( !jQuery.nodeName( offsetParent[ 0 ], "html" ) ) {
parentOffset = offsetParent.offset();
}
//增加邊框
parentOffset.top += jQuery.css( offsetParent[ 0 ], "borderTopWidth", true );
}
return {
top: offset.top - parentOffset.top - jQuery.css( elem, "marginTop", true )
};
里面jQuery.fn.offsetParent()函數(shù)獲取最近的祖先定位元素。
offsetParent: function() {
return this.map(function() {
var offsetParent = this.offsetParent || document.documentElement;
while ( offsetParent && ( !jQuery.nodeName( offsetParent, "html" ) && jQuery.css( offsetParent, "position") === "static" ) ) {
offsetParent = offsetParent.offsetParent;
}
return offsetParent || document.documentElement;
}); }
c.jQuery.fn.scrollLeft和jQuery.fn.scrollTop
這兩個(gè)函數(shù)的獲取和設(shè)置滾動(dòng)條位置比較簡(jiǎn)單，以scrollTop為獲取無非就只有兩個(gè)函數(shù)window[ pageYOffset]或elem [scrollTop]。而設(shè)置直接使用window[scrollTo]或elem[scrollTop]
以上內(nèi)容是小編給大家介紹的關(guān)于jQuery 1.9.1源碼分析系列（十三）之位置大小操作，希望大家喜歡。
