先給大家展示謝

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è)整體距離被定為祖輩元素頂部內(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)條位置比較簡單，以scrollTop為獲取無非就只有兩個(gè)函數(shù)window[ pageYOffset]或elem [scrollTop]。而設(shè)置直接使用window[scrollTo]或elem[scrollTop]

以上內(nèi)容是小編給大家介紹的關(guān)于jQuery 1.9.1源碼分析系列（十三）之位置大小操作，希望大家喜歡。

最新評(píng)論