jQuery 1.9.1 ソースコード解析シリーズ(13) 位置サイズoperation

最初に見せてくれてありがとう

jQuery.fn.css (propertyName [, value ]| object ) (関数は、現在の jQuery オブジェクトと一致する要素の CSS スタイル属性値を設定または返すために使用されます。指定された CSS 属性を削除する必要がある場合は、この関数を使用してください。値は空の文字列 ("") に設定されます

注: 1. value パラメーターが省略された場合は属性値の取得を意味し、このパラメーターが指定された場合は属性値の設定を意味します。 2. css() 関数のすべての「設定」操作は、現在の jQuery オブジェクトと一致する各要素を対象とし、すべての「読み取り」操作は、最初に一致した要素のみを対象とします。 )

jQuery.fn.offset([coownedObj]) (現在のドキュメントを基準とした現在の一致要素のオフセット (全体としてコンテンツパディング境界を考慮)、つまり現在のドキュメントを基準とした座標を設定または返しますこの関数は、可視要素に対してのみ有効です。この関数は、値が両方ともピクセル (px) 単位である left 属性と top 属性を持つ座標オブジェクト (Object) を返します。は現在のドキュメントを基準とした相対座標を返し、position() は位置決めされた祖先要素 )

を基準とした座標を返します。

jQuery.fn.position() (配置された祖先要素を基準とした、つまり配置された祖先要素の座標を基準とした、現在の一致する要素のオフセット (コンテンツのパディング境界マージンを全体として考慮) を返します。これはこの関数は、可視要素に対してのみ有効です。いわゆる「位置要素」は、要素の CSS 位置属性値が絶対値、相対値、または固定値であることを意味します (デフォルトの静的値でない限り)。 left 属性と top 属性はどちらも数値であり、単位はピクセル (px) です。さらに、position() 関数を使用しての祖先を設定することはできません。現在の要素。すべての要素はデフォルト (静的) で配置され、この関数によって返されるオフセット位置は offset() 関数と同じです)

jQuery.fn.scrollLeft([ value ]) (水平スクロールバーの左側を基準とした、現在一致する要素のオフセットを設定または返します。要素の実際の幅が表示領域の幅を超える場合、特定の設定では、ブラウザーは要素に対応する水平スクロールバーを表示します。このとき、scrollLeft() は、表示されているスクロール領域の左側にある要素の非表示部分の幅 (単位: ピクセル) を返します。

水平スクロールバーが左端にある場合 (つまり、表示領域の左側に非表示のコンテンツがない場合)、または現在の要素が水平方向にスクロールできない場合、scrollLeft() は 0 を返します。表示要素と非表示要素の両方に有効です。 )

jQuery.fn.scrollTop([ value ]) (垂直スクロールバーの上部を基準とした現在の一致要素のオフセットを設定または返します。要素の実際の高さがその表示領域の高さを超える場合、特定の設定では、ブラウザーは要素に対応する垂直スクロールバーを表示します。このとき、垂直スクロールバーが表示領域の上にある要素の非表示部分の高さ (単位: ピクセル) を返します。表示領域の上に非表示のコンテンツがない場合)、または現在の要素が垂直方向にスクロールできない場合、scrollTop() は 0 を返します。表示要素と非表示要素の両方に有効です)

jQuery.fn.height([ value ]) (現在一致する要素の高さを設定または返します。高さの値には、要素のマージン、パディング、ボーダーなどの高さは含まれません。以下に示すように

上記の一部を含めた高さを取得したい場合は、innerHeight()とouterHeight()を使用してください。この関数は jQuery オブジェクト (インスタンス) に属しており、非表示の要素に対しても有効です)

jQuery.fn.innerHeight([ value ]) (現在一致している要素の内側の高さを設定または返します。高さの値には内側のマージン (パディング) が含まれますが、要素の外側のマージン (マージン) と境界線は含まれません。 (枠線) 等しい部分の高さは以下の通りです:

この関数は jQuery オブジェクト (インスタンス) に属しており、非表示の要素に対しても有効です)

jQuery.fn.outerHeight([includeMargin]) (現在一致する要素の外側の高さを設定または返します。高さの値にはパディングとボーダーが含まれますが、要素の外側のマージンは含まれません) パーツの高さ。以下に示すように、パラメーターを true に指定してマージン部分の高さを含めることもできます:

この関数は jQuery オブジェクト (インスタンス) に属しており、非表示の要素に対しても有効です)

jQuery.fn.width([ value ])(説明:省略)

jQuery.fn.innerWidth ([ value ])(説明:省略)

jQuery.fn.outerWidth([includeMargin])(説明:省略)

詳細イラストはLone Moon Blue Windよりカラーをお借りしました

次に、いくつかの関数を分析します。

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 等現代瀏覽器有個差別，使用document.documentElement.getBoundingClientRect();IE8-的top/left值為-2px；其他現代瀏覽器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這個整體距離被定為祖輩元素頂部內邊的距離。

　　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()函數取得最近的祖先定位元素。

 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

　　這兩個函數的取得和設定捲軸位置比較簡單，以scrollTop為取得無非就只有兩個函數window[ pageYOffset]或elem [scrollTop]。而設定直接使用window[scrollTo]或elem[scrollTop]

以上內容是小編跟大家介紹的jQuery 1.9.1源碼分析系列（十三）之位置大小操作，希望大家喜歡。