jQuery_jqueryのposition()メソッドの使用例

この記事の例では、jQuery でのposition() メソッドの使用法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

このメソッドは、ある要素を基準とした、一致した要素のオフセットを取得します。
返されるオブジェクトには、2 つの整数プロパティ (上と左) を持つオブジェクトが含まれます。
このメソッドは、表示されている要素に対してのみ機能します。
文法構造:

コードをコピー コードは次のとおりです:

$(selector).position()

チュートリアルの冒頭で、これを行う理由は、一部の要素を基準とした一致する要素のオフセットを取得するためです。多くのチュートリアルでは、メソッドによって返されるオフセットは親要素に対して相対的であると説明されていますが、これは完全に真実ではありません。もちろん、これは、一致する要素が実際に設定されることを意味するわけではありません。絶対的な位置決め。このメソッドのオフセット参照原理は次のとおりです:

1. 親要素が位置決めを使用しない場合 (位置属性値が相対、絶対、または固定)、オフセット参照オブジェクトはウィンドウになります。
2. 親要素のいずれかが配置されている場合、オフセットの参照オブジェクトは、最も近くに配置されている要素です。

コード例:

コードをコピーします コードは次のとおりです:

<頭>





<スクリプトタイプ="text/javascript">
$(document).ready(function(){
$(".children").each(function(){
var text;
text="left:" $(this).position().left;
text ="top:" $(this).position().top;
$(this).text(text);
})
})

上記のコードの一番上の組み合わせでは、親要素が相対位置を使用しているため、取得されるオフセットは親要素に対して相対的なものになります。一番下の組み合わせでは、親要素は位置決めを使用しないため、オフセット参照オブジェクトはウィンドウになります。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。

この記事は Ant Tribe http://www.softwhy.com/

から転載されました。