jqueryのfind()とchildren()の違いは何ですか?

違い: Children(selector) メソッドは、一致する要素セット内の各要素のすべての子要素 ​​(子のみ) を返します。パラメータはオプションです。find(selector) メソッドは、一致する要素セット内の各要素を返します。要素の子孫 (一致する限り、息子または孫のいずれでも構いません)、パラメータは必須です。

関連する推奨事項: 「jQuery ビデオ チュートリアル 」

.children(selector) メソッド一致する要素セット内の各要素の すべての子要素 ​​ を返します (子要素のみ )。パラメーターはオプションです。パラメーターを追加すると、セレクターとフィルター要素でフィルター処理することになります。

.find(selector) メソッドは、一致する要素コレクション内の各要素の descendants を返します。 パラメータは必須です 。セレクタ、jquery オブジェクト、または要素を使用して要素をフィルタリングするために使用できます。

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

<ul class="level-1">
	<li class="item-i">I</li>
	<li class="item-ii">II
		<ul class="level-2">不包括自己
			<li class="item-a">A</li>
			<li class="item-b">B
				<ul class="level-3">
					<li class="item-1">1</li>
					<li class="item-2">2</li>
					<li class="item-3">3</li>
				</ul>
			</li>
			<li class="item-c">C</li>
		</ul>
	</li>
	<li class="item-iii">III</li>
</ul>

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

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

例を見てみましょう:

<script>
$(document).ready(function(){
    $("#abc").children(".selected").css("color", "blue");
});
</script>
<p id="abc">
	<span>Hello</span>
	<p class="selected">Hello Again</p>
	<p><--换成<p>
		<p class="selected">And Again</p>
		<span class="selected">aaAnd Again</span>
	</p><--换成</p>
	<p>And One Last Time</p>
</p>

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

This結果は期待されますが、上記の e388a4556c0f65e1904146cc1a846bee を e388a4556c0f65e1904146cc1a846bee に置き換えると、上記のコード コメントを参照すると、結果は次のようになります:

find() メソッドで注意すべき知識ポイント:

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

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

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

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

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

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

例を見てみましょう

$("p.foo").click(function() {
    $("span", this).addClass("bar");
});

スパン セレクターをこの環境に限定しているため、クリックされた要素内のスパンのみが追加のクラスを取得します。

内部的には、 セレクター コンテキスト は .find() メソッドを通じて実装されるため、 $("span", this) は $(this).find( " と同等です。 scan"), $('li.item-ii').find('li') は $('li', 'li.item-ii')

と同等です

find()詳細については、https://www.php.cn/dic/jquery/find.html

children()詳細については、https://www.php.cn/dic/jquery/find.htmlを参照してください。 : //www.php.cn/dic/jquery/children.html

プログラミング関連の知識については、

プログラミング ビデオ コースをご覧ください。 ！

以上がjqueryのfind()とchildren()の違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。