DOM要素とノードのjQueryトラバーサルの詳細な説明methods_jquery

この記事の例では、DOM 要素とノードを走査する jQuery メソッドについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. 上方向にトラバース - 祖先要素

① $(selector).parent([filter]): セレクターに一致する要素の直接の親要素を返します。このメソッドは、返された親要素をフィルターするフィルター セレクターを受け入れることができます。

② $(selector).parents([filter]): ドキュメントのルート要素 html に至るまで、一致する要素のすべての祖先ノードを返します。このメソッドは、返された祖先ノードをフィルタリングするフィルター セレクターを受け入れることができます。

注: 親と親の違いは、親は直接の親ノードを返し、親はすべての祖先ノードを返し、$("html").parent() はドキュメント ノードを返すのに対し、$("html") はドキュメント ノードを返すことです。 parents() 空を返します。

③ $(selector).parentUntil([ancestorSelector][,filter]): 一致するノードと ancestorSelector の間のすべての祖先ノードを返します。このメソッドには、ancestorSelector の一致する点は含まれないことに注意してください。返された Ancestor ノードをフィルタリングします。ancestorSelector が空であるか、ancestorSelector に一致する要素がその祖先ノード内に見つからない場合、すべての祖先ノードが返されます。これはparents() メソッドと同等です。

$(selector).parentUtil(element[,ancestorSelector]): 使い方と意味は上記と同じです。

④ $(selector).offsetParent(): 一致する要素の最新の位置指定された祖先要素を返します。いわゆる位置指定された祖先要素とは、CSS の位​​置属性が相対、絶対、固定に設定されていることを意味します。アニメーション デモンストレーション プロセス中に計算される要素のオフセットと位置が大きな役割を果たします。

⑤ $(selector).closest(ancestorSelector[,context]): ancestorSelector に一致する最も近い祖先要素を取得します。このメソッドは、検索範囲を制御するパラメーター コンテキストを受け取ることができます。親メソッドとの違いは次のとおりです。

a.closest は、現在の要素自体から上向きに検索します
parents は親ノード要素から始まります。

b.closest は、ancestorSelector に一致する要素の位置が見つかるまで DOM ツリーを上にたどります
親はドキュメントのルート要素まで DOM ツリーをたどり、各祖先要素を一時コレクションに追加します。セレクターが適用される場合、このコレクションはセレクター

に基づいてフィルターされます。

c.closest は、0 または 1 つの要素を含む jQuery オブジェクトを返します
親は 0、1 つ以上の要素を含む jQuery オブジェクトを返します

その他の変換の使用法:

$(selector).closest(ancestorSelectors[,context]);
$(selector).closest(jQuery object);
$(selector).closest(element)

2. 下方走査 - 子孫要素

① .children([childrenSelector]): 要素の直接の子要素を返します。このメソッドは、返された子要素をフィルタリングするためのパラメータを受け取ることができます。

② .find(descendantSelector):descendantSelector に一致する要素の最後の子孫までのすべての子孫要素を返します。

その他の変換の使用法:

.find(jQuery object);
.find(element);

③ .contents(): 要素のすべての子要素を返します。子要素との違いは、コンテンツにテキスト ノードとコメント ノードが含まれることです。

3. 兄弟の横断 - 兄弟要素

① .siblings([selector]): 現在の要素のすべての兄弟要素を返します。このメソッドは、返された兄弟要素をフィルターするためのオプションのパラメーターを受け取ることができます。

② .next([selector]): 現在の要素の次の兄弟要素を返します。このメソッドは、返された兄弟要素をフィルターするためのオプションのパラメーターを受け入れることができます。

③ .nextAll([selector]): 現在の要素の後のすべての兄弟要素を返します。このメソッドは、返された兄弟要素をフィルターするためのオプションのパラメーターを受け入れることができます。

④ .nextUntil([selector][,filter]): セレクター条件に一致する兄弟要素が見つかるまで、現在の要素のすべての兄弟要素を返します。このメソッドは、返された兄弟要素をフィルターするためのオプションのパラメーター フィルターを受け入れることができます。

⑤ .prev/prevAll/prevUntil は next/nextAll/nextUntil と使い方や機能は同じですが、検索方向が逆です。

4. フィルタリング

① .f​​ilter(selector): 現在の一致要素セットからセレクターの条件を満たす部分集合をフィルタリングし、一致範囲を絞り込みます。

.filter(function(index)): コールバック関数に従って、現在一致している要素のセットをフィルターします。コールバック関数に渡されるパラメーター インデックスは、セット内の要素のインデックスを参照します。は関数本体内の要素を表し、関数は true /false を返します。true が返された場合、子要素は保持され、それ以外の場合、子要素は除外されます。

その他の変換の使用法:

.filter(element|jQueryObject)

② .first(): 現在一致する要素セットの最初の要素を返します。

③ .last(): 現在一致する要素セット内の最後の要素を返します。

④ .eq(index/-index): 現在一致する要素セット内の指定された位置にある要素を返します。インデックスは 0 から始まり、負の数値は末尾から先頭へのソートを意味します。

⑤ .has(selector/element): 現在の要素セットから、対応するサブ要素を持たない要素を除いた、特定のサブ要素を持つ要素セットを返します。子要素は、パラメータ セレクターまたは要素オブジェクトを使用して照合できます。

⑥ .is(selector|function(index)|element|jQueryObject): セレクターまたはコールバック関数、要素、または jQuery オブジェクトに基づいて要素コレクションを確認し、指定された式に一致する要素が少なくとも 1 つ含まれているかどうかを返します。 true、それ以外の場合は false が返されます。また、現在の要素コレクションが空であるか、式が空の場合は false が返されます。このメソッドは通常、イベント ハンドラーなどのコールバック関数で、これが特定の要素であるかどうかを判断するために使用されます

⑦ .map(callback(index,domElement)): 通常の jQueryObject に変換したい場合は、コールバック関数の戻り値を介して、現在一致している要素配列を別のオブジェクト配列 (dom 要素であるかどうかに関係なく) に変換します。配列を実現するには、jQuery.map(array,callback(objectOfArray,indexOfArray)) メソッドを使用します。

⑧ .not(selector|elements|function(index)|jQuery object): 現在一致している要素配列からパラメータ調整を満たす要素を削除します。パラメータには、セレクタ、DOM 要素、通常の jQuery オブジェクト、および戻り値のブール値を指定できます。変数のコールバック関数。

⑨ .slice(start[,end]): 現在一致している要素セットから指定範囲のサブセットを取得します。 start と end が負の数の場合、要素の末尾から先頭までの方向を取得します。

さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「JQuery トラバーサル アルゴリズムとスキルの概要」、「jQuery テーブル (テーブル) 操作のスキルの概要」を参照してください。 " 、"jQuery のドラッグ効果とテクニックのまとめ"、"jQuery 拡張テクニックのまとめ"、"jQuery の一般的な古典的な特殊効果のまとめ" 、「jQuery アニメーションと特殊効果の使い方まとめ」、「jQuery セレクターの使い方まとめ」、「jQuery の共通プラグインと使い方まとめ」

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