Was ist der Unterschied zwischen find() und children() in jquery?

Unterschied: Die Methode „children(selector)“ gibt alle untergeordneten Elemente (nur untergeordnete Elemente) jedes Elements im passenden Elementsatz zurück, und die Parameter sind optional; die Methode „find(selector)“ gibt die Nachkommen jedes Elements im passenden Element zurück (Solange es die Anforderungen erfüllt, spielt es keine Rolle, ob es sich um einen Sohn oder einen Enkel handelt.)

Verwandte Empfehlungen: „jQuery Video Tutorial“

.children(selector)-Methode besteht darin, alle untergeordneten Elemente jedes Elements in der passenden Elementsammlung zurückzugeben (nur Kinder) . Parameter sind optional. Das Hinzufügen von Parametern bedeutet das Filtern durch die Selektor- und Filterelemente. Die Methode

.find(selector) gibt die Nachkommen jedes Elements im Satz übereinstimmender Elemente zurück. Parameter sind erforderlich und können als Selektoren, JQuery-Objekte oder Elemente zum Filtern von Elementen verwendet werden.

.find() ähnelt der Methode .children(), außer dass sie nur eine einzige Ebene im DOM-Baum durchläuft. Kinder, die ich hier als Söhne verstehe, werden nur auf der Sohnebene durchlaufen. Sehen Sie sich das Beispiel an:

<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');

Das Ergebnis dieser Codezeile ist, dass die Elemente A, B, C einen roten Hintergrund bekommen. Da wir keinen Selektorausdruck angewendet haben, enthält das zurückgegebene jQuery-Objekt alle untergeordneten Elemente. Wenn ein Selektor angewendet wird, werden nur passende Elemente einbezogen.

Sehen Sie sich ein Beispiel an:

<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>

Das Ergebnis ist wie folgt:

Dies ist das erwartete Ergebnis, aber wenn Sie das obige

durch

ersetzen, sehen Sie sich die Codekommentare an oben, Das Ergebnis ist:

Wissenspunkte, auf die bei der Methode find() geachtet werden muss:

1 Durchsuchen Sie die Nachkommen jedes Elements in der aktuellen Elementsammlung. Solange sie die Voraussetzungen erfüllen, spielt es keine Rolle, ob es sich um Söhne oder Enkel handelt.

2. Im Gegensatz zu anderen Baumdurchquerungsmethoden sind Selektorausdrücke erforderliche Parameter für .find(). Wenn wir alle untergeordneten Elemente abrufen müssen, können wir den Platzhalter-Selektor „*“ übergeben.

3. find durchläuft nur die Nachkommen und schließt sich selbst aus.

4. Der Selektorkontext wird durch die .find()-Methode implementiert, daher ist $('li.item-ii').find('li') äquivalent zu $('li', 'li.item- ii').

Die Syntax des Selektors lautet: jQuery(selector, [context])

Im Allgemeinen erfolgt die Verwendung des jQuery-Selektors als erster Parameter. Tatsächlich kann diese Verwendung der Funktion jquery() auch einen zweiten Parameter übergeben. Der Zweck der Übergabe dieses Parameters besteht darin, den vorherigen Selektor auf die Kontextumgebung zu beschränken. Standardmäßig, das heißt, wenn der zweite Parameter nicht übergeben wird, durchsucht der Selektor das DOM im Stammverzeichnis des Dokuments ($() sucht nach DOM-Elementen im aktuellen HTML-Dokument); B. ein DOM-Element-Set oder ein JQuery-Objekt, wird in diesem Kontext gesucht.

Schauen wir uns ein Beispiel an

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

Da wir den Span-Selektor auf diese Umgebung beschränkt haben, erhält nur der Span im angeklickten Element die zusätzliche Klasse.

Intern wird der Auswahlkontext durch die .find()-Methode implementiert, sodass $("span", this) äquivalent zu $(this).find("span"), $('li . item-ii').find('li') entspricht $('li', 'li.item-ii')

find() Weitere Informationen finden Sie unter: https://www.php .cn/dic/jquery/find.html

children()Weitere Informationen finden Sie unter: https://www.php.cn/dic/jquery/children.html

Für weitere programmierbezogene Kenntnisse bitte Besuchen Sie: Programmiervideokurs! !

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen find() und children() in jquery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!