jquery_jqueryのchildren()とfind()の違いに基づく紹介

.children(selector) メソッドは、一致する要素のセット内の各要素の すべての子 (のみの子 ) を返します。パラメーターの追加は、セレクターとフィルター要素によるフィルター処理を意味します。

.find(selector) メソッドは、一致する要素セット内の各要素の 子孫 を返します。 パラメータは必須です 。要素をフィルタリングするセレクター、jquery オブジェクト、または要素にすることができます。

.find() は .children() メソッドに似ていますが、DOM ツリーの下の単一レベルのみをトラバースする点が異なります。ここの子供たちは、息子であると理解していますが、息子レベルでのみ検索されます。 例を見てください:

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

.children (selector) メソッドは、一致する要素のセット内の各要素のすべての子 (子のみ) を返します。パラメーターの追加は、セレクターとフィルター要素によるフィルター処理を意味します。

.find(selector) メソッドは、一致する要素のセット内の各要素の子孫を返します。パラメーターは必須であり、セレクター、jquery オブジェクト、または要素をフィルターするための要素にすることができます。

.find() は .children() メソッドに似ていますが、DOM ツリーの下の単一レベルのみをトラバースする点が異なります。ここの子供たちは、息子であると理解していますが、息子レベルでのみ検索されます。例を見てみましょう:

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

$( 'ul.level-2').children().css('background-color', 'red');

このコード行の結果は次のようになります。項目 A、B、C の背景が赤になります。セレクター式を適用しなかったため、返される jQuery オブジェクトにはすべての子要素が含まれます。セレクターが適用される場合、一致する項目のみが含まれます。

例を見てみましょう:

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

< ;script>
$(document).ready(function(){
$("#abc").children(".selected").css("color", "blue");
});


;aaAnd Again> ;
🎜>

得られた結果は次のとおりです:

これは予想される結果ですが、上記の

を

に置き換えると、結果は次のようになります。

.find() メソッドに関する注意事項:

1. 検索とは、現在の要素コレクション内の各要素の子孫を走査することです。条件を満たしていれば息子でも孫でも関係ありません。

2. 他のツリー走査メソッドとは異なり、セレクター式は .find() の必須パラメーターです。すべての子孫要素を取得する必要がある場合は、ワイルドカード セレクター '*' を渡すことができます。

3. find は、それ自体を除き、子孫のみを検索します。

4. セレクター コンテキストは .find() メソッドによって実装されるため、$('li.item-ii').find('li') は $('li', 'li.item) と同等です。 -ii')。

セレクターの構文は次のとおりです: jQuery(selector, [context])

通常、jquery セレクターは最初のパラメーターとして使用されます。実際、この jquery() 関数の使用法では 2 番目のパラメーターを渡すこともできます。このパラメーターを渡す目的は、前のセレクターをコンテキスト環境に制限することです。デフォルトでは、つまり 2 番目のパラメーターが渡されない場合、セレクターはドキュメントのルートから DOM を検索します (次のように 2 番目のパラメーターが指定されている場合、$() は現在の HTML ドキュメント内の DOM 要素を検索します)。 DOM 要素 Set または jquery オブジェクトの場合、このコンテキストで検索されます。

以下の例を見てください

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

$( "div.foo").click(function() {
$("span", this).addClass("bar");
}); 🎜>スパンセレクターをこの環境に制限しているため、クリックされた要素内のスパンのみが追加のクラスを取得します。
内部では、

セレクター コンテキスト
は .find() メソッドを通じて実装されるため、$("span", this) は $(this).find("span"),$('li.item-ii').find('li') は $('li', 'li.item-ii') と同等です
find() の詳細については、以下を参照してください: http://www.w3school.com.cn/jquery/traversing_find.asp

children() 詳細については、次のサイトをご覧ください: http://www.w3school.com.cn/jquery/traversing_children.asp