先給大家展示謝

jQuery.fn.css (propertyName [, value ]| object )（函數(shù)用于設置或返回當前jQuery對象所匹配的元素的css樣式屬性值。如果需要刪除指定的css屬性，請使用該函數(shù)將其值設為空字符串("")

　　注意：1、如果省略了value參數(shù)，則表示獲取屬性值；如果指定了該參數(shù)，則表示設置屬性值。2、css()函數(shù)的所有"設置"操作針對的是當前jQuery對象所匹配的每一個元素；所有"讀取"操作只針對第一個匹配的元素。）

jQuery.fn.offset([coordinatesObj])（設置或返回當前匹配元素（將content+padding+border看成一個整體）相對于當前文檔的偏移，也就是相對于當前文檔的坐標。該函數(shù)只對可見元素有效。該函數(shù)返回一個坐標對象(Object)，該對象有一個left屬性和top屬性。屬性值均為數(shù)字，它們都以像素(px)為單位。與position()不同的是：offset()返回的是相對于當前文檔的坐標，position()返回的是相對于其定位的祖輩元素的坐標。）

jQuery.fn.position()（返回當前匹配元素（將content+padding+border+margin看成一個整體）相對于其被定位的祖輩元素的偏移，也就是相對于被定位的祖輩元素的坐標。該函數(shù)只對可見元素有效。所謂"被定位的元素"，就是元素的CSS position屬性值為absolute、relative或fixed(只要不是默認的static即可)。該函數(shù)返回一個坐標對象，該對象有一個left屬性和top屬性。屬性值均為數(shù)字，它們都以像素(px)為單位。與offset()不同的區(qū)別詳見offset。此外，position()函數(shù)無法用于設置操作。如果當前元素的祖輩元素全部都是默認定位(static)，那么該函數(shù)返回的偏移位置與offset()函數(shù)相同）

jQuery.fn.scrollLeft([ value ])（設置或返回當前匹配元素相對于水平滾動條左側(cè)的偏移。當一個元素的實際寬度超過其顯示區(qū)域的寬度時，在一定的設置下，瀏覽器會為該元素顯示相應的水平滾動條。此時，scrollLeft()返回的就是該元素在可見的滾動區(qū)域左側(cè)被隱藏部分的寬度(單位：像素)。

　　如果水平滾動條在最左側(cè)(也就是可見區(qū)域左側(cè)沒有被隱藏的內(nèi)容)，或者當前元素是不可水平滾動的，那么scrollLeft()將返回0。對可見的和隱藏的元素均有效。）

jQuery.fn.scrollTop([ value ])（設置或返回當前匹配元素相對于垂直滾動條頂部的偏移。當一個元素的實際高度超過其顯示區(qū)域的高度時，在一定的設置下，瀏覽器會為該元素顯示相應的垂直滾動條。此時，scrollTop()返回的就是該元素在可見區(qū)域之上被隱藏部分的高度(單位：像素)。如果垂直滾動條在最上面(也就是可見區(qū)域之上沒有被隱藏的內(nèi)容)，或者當前元素是不可垂直滾動的，那么scrollTop()將返回0。對可見的和隱藏的元素均有效）

jQuery.fn.height([ value ])（設置或返回當前匹配元素的高度。該高度值不包括元素的外邊距(margin)、內(nèi)邊距(padding)、邊框(border)等部分的高度。如下圖

　　如果你要獲取包括上述某部分在內(nèi)的高度，請使用innerHeight()和outerHeight()。該函數(shù)屬于jQuery對象(實例)，并且對不可見的元素依然有效）

jQuery.fn.innerHeight([ value ])（設置或返回當前匹配元素的內(nèi)高度。該高度值包括內(nèi)邊距(padding)，但不包括元素的外邊距(margin)、邊框(border)等部分的高度。如下圖：

　　該函數(shù)屬于jQuery對象(實例)，并且對不可見的元素依然有效）

jQuery.fn.outerHeight([includeMargin])（設置或返回當前匹配元素的外高度。該高度值包括內(nèi)邊距(padding) 、邊框(border)，但不包括元素的外邊距(margin)部分的高度。你也可以指定參數(shù)為true，以包括外邊距(margin)部分的高度如下圖：

　　該函數(shù)屬于jQuery對象(實例)，并且對不可見的元素依然有效）

jQuery.fn.width([ value ])(描述：略)

jQuery.fn.innerWidth ([ value ])(描述：略)

jQuery.fn.outerWidth ([includeMargin])(描述：略)

　　借用孤月藍風上色的詳解圖

　　接下來分析部分函數(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)代瀏覽器有個差別，使用document.documentElement.getBoundingClientRect();IE8-的top/left值為-2px；其他現(xiàn)代瀏覽器top/left值為0px；可以看出IE8-瀏覽器是以窗口的（2,2）坐標為原點坐標的。

　　瀏覽器會默認body和窗口之間有8px的間隙，所以使用document.body.getBoundingClientRect(); 得到的top/left值為8px。

　　offset的設置方法如下（以top為例）：

　　需要注意在設置之前，如果當前elem的position為static則要設置為relative才能處理

　　先得到要設置給elem的css特征top的值計算方法為

　　setTop = （要設置的offset top值 – 當前元素的offset top值）+ elem的css top特征值

　　然后將setTop設置給elem的css top特征。

　　jQuery的處理就變成了：

 var curElem = jQuery( elem ),
    curOffset = curElem.offset(),
    curCSSTop = jQuery.css( elem, "top" ),
    props = {}, curPosition = {}, curTop;
  //如果top值為auto且position為absolute或fixed則需要計算當前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只能獲取不能設置，獲取方法如下（以top為例）：

　　position.top = elem的offsetTop - elem被定位的祖輩元素的offsetTop – elem的marginTop值

　　這里面這個top就真的是elem的css屬性top的值了。對于jQuery來說這個elem把width+padding+border+margin看成了一個整體，所以最終得到的top是elem這個整體距離被定為祖輩元素頂部內(nèi)邊的距離。

　　jQuery的處理變成了：

var offsetParent, offset,
    parentOffset = { top: 0, left: 0 },
    elem = this[ 0 ];
  //當元素為fixed定位是他的被定位的祖輩元素是window視窗(parentOffset = {top:0, left: 0}
  if ( jQuery.css( elem, "position" ) === "fixed" ) {
    //假設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

　　這兩個函數(shù)的獲取和設置滾動條位置比較簡單，以scrollTop為獲取無非就只有兩個函數(shù)window[ pageYOffset]或elem [scrollTop]。而設置直接使用window[scrollTo]或elem[scrollTop]

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

最新評論