jQuery 1.9.1 소스코드 분석 시리즈 (13) 위치 크기 Operation_jquery

먼저 보여주셔서 감사합니다

jQuery.fn.css (propertyName [, value ]| object ) (함수는 현재 jQuery 객체와 일치하는 요소의 CSS 스타일 속성 값을 설정하거나 반환하는 데 사용됩니다. 지정된 CSS 속성을 삭제해야 하는 경우, 이 함수를 사용하세요. 해당 값은 빈 문자열("")로 설정됩니다.

　참고: 1. 값 매개변수가 생략되면 속성 값을 가져오는 것을 의미하고, 이 매개변수를 지정하면 속성 값을 설정한다는 의미입니다. 2. css() 함수의 모든 "설정" 작업은 현재 jQuery 객체와 일치하는 각 요소를 대상으로 합니다. 모든 "읽기" 작업은 첫 번째 일치 요소만 대상으로 합니다. )

jQuery.fn.offset([coordinatesObj]) (현재 문서를 기준으로 현재 일치하는 요소(콘텐츠 패딩 테두리 전체를 고려)의 오프셋, 즉 현재 문서를 기준으로 한 좌표를 설정하거나 반환합니다. 이 함수는 표시 요소에만 유효합니다. 이 함수는 값이 모두 픽셀(px)인 좌표 객체(객체)를 반환합니다. 현재 문서를 기준으로 한 좌표를 반환하고 position()은 위치가 지정된 상위 요소 )

를 기준으로 좌표를 반환합니다.

jQuery.fn.position()은 위치가 지정된 상위 요소, 즉 위치가 지정된 상위 요소의 좌표를 기준으로 현재 일치하는 요소(전체적으로 콘텐츠 패딩 테두리 여백 고려)의 오프셋을 반환합니다. 함수는 보이는 요소에만 유효합니다. 소위 "위치 지정 요소"는 요소의 CSS 위치 속성 값이 절대, 상대 또는 고정(기본 정적이 아닌 경우)임을 의미합니다. , left 속성과 top 속성은 모두 숫자이며, 자세한 내용은 offset을 참조하세요. 또한 position() 함수는 의 조상을 설정하는 데 사용할 수 없습니다. 현재 요소는 기본적으로(정적) 배치되며, 이 함수가 반환하는 오프셋 위치는 offset() 함수와 동일합니다.

jQuery.fn.scrollLeft([ value ]) (가로 스크롤 막대의 왼쪽을 기준으로 현재 일치하는 요소의 오프셋을 설정하거나 반환합니다. 요소의 실제 너비가 표시 영역의 너비를 초과하는 경우, 특정 설정에서 브라우저는 요소에 해당하는 수평 스크롤 막대를 표시합니다. 이때 scrollLeft()는 보이는 스크롤 영역의 왼쪽에 있는 요소의 숨겨진 부분의 너비를 반환합니다(단위: 픽셀).

가로 스크롤 막대가 가장 왼쪽에 있거나(즉, 표시 영역 왼쪽에 숨겨진 콘텐츠가 없는 경우) 현재 요소가 가로로 스크롤 가능하지 않은 경우 scrollLeft()는 0을 반환합니다. 보이는 요소와 숨겨진 요소 모두에 유효합니다. )

jQuery.fn.scrollTop([ value ]) (세로 스크롤 막대의 상단을 기준으로 현재 일치하는 요소의 오프셋을 설정하거나 반환합니다. 요소의 실제 높이가 표시 영역의 높이를 초과하는 경우 특정 설정에 따라 브라우저는 요소에 해당하는 수직 스크롤 막대를 표시합니다. 이때, scrollTop()은 수직 스크롤 막대가 표시 영역 위에 있는 경우 요소의 숨겨진 부분의 높이(단위: 픽셀)를 반환합니다. 표시 영역 위에 숨겨진 콘텐츠가 없거나) 현재 요소가 세로로 스크롤 가능하지 않은 경우 scrollTop()은 0을 반환합니다. 표시 요소와 숨겨진 요소 모두에 유효합니다.

jQuery.fn.height([ value ]) (현재 일치하는 요소의 높이를 설정하거나 반환합니다. 높이 값에는 요소의 여백, 패딩, 테두리 등이 포함되지 않습니다. 높이는 아래와 같습니다.

　

위 내용 중 일부를 포함하여 높이를 구하고 싶다면 innerHeight(), externalHeight()를 사용하세요. 이 함수는 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 분석

オフセットを取得する方法は次のとおりです (top を例にします):

Offset.top = ブラウザ ウィンドウの上部からの要素の位置 - 要素の上部のロールアップ部分は、親要素の上端からの位置です。

jQuery の処理は次のようになります:

  box = elem.getBoundingClientRect()；
  offset.top = box.top + ( win.pageYOffset || docElem.scrollTop ) - ( docElem.clientTop || 0 )；

IE8- と IE9 などの最新のブラウザーには違いがあります。 document.documentElement.getBoundingClientRect() を使用します。IE8- の上部/左の値は -2px、他の最新のブラウザーの上部/左の値は 0px です。 IE8 ブラウザ以外では、ウィンドウの (2,2) 座標が原点座標として使用されていることがわかります。

ブラウザはデフォルトで本文とウィンドウ間のギャップを 8 ピクセルにするため、document.body.getBoundingClientRect(); を使用して取得される上/左の値は 8 ピクセルになります。

オフセットの設定方法は以下のとおりです(上を例にします)。

現在の要素の位置が静的である場合、設定する前に、プロセス

を基準にして相対的に設定する必要があることに注意してください。

まずelemに設定するCSSフィーチャーtopの値を取得します。 計算方法は

です。

SetTop = (設定するオフセット上部値 – 現在の要素のオフセット上部値) 要素の CSS 上部特徴値

次に、setTop を elem の CSS トップ機能に設定します。

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

位置は取得のみで設定はできません。取得方法は以下のとおりです(topを例にします)。

Position.top = 要素の offsetTop – 配置された祖先要素の要素の offsetTop – 要素の marginTop 値

ここでの「top」は、実際にはelemのcss属性「top」の値です。 jQuery の場合、この要素は幅のパディング境界マージンを全体として考慮するため、最終的な上部は要素になります。全体の距離は、祖先要素の上端と内端の間の距離として決定されます。

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

この 2 つの関数でスクロールバーの位置を取得・設定するのは比較的簡単です。scrollTop を取得するには、window[pageYOffset] または elem[scrollTop] の 2 つの関数だけです。直接設定するには、window[scrollTo] または elem[scrollTop]

を使用します。

上記の内容は、編集者が紹介したjQuery 1.9.1のソースコード解析シリーズ(その13)の位置とサイズの操作です。