Quelle est la différence entre find() et children() dans jquery ?

Différence : la méthode children(selector) renvoie tous les éléments enfants (uniquement les enfants) de chaque élément de l'ensemble d'éléments correspondant, et les paramètres sont facultatifs ; la méthode find(selector) renvoie chaque élément de l'élément correspondant ; set. Descendants d'éléments (tant qu'ils correspondent, il peut s'agir soit de fils, soit de petits-fils), le paramètre est obligatoire.

Recommandations associées : "Tutoriel vidéo jQuery"

Méthode .children(sélecteur) Renvoie tous les éléments enfants (uniquement les enfants) de chaque élément de l'ensemble d'éléments correspondant. Les paramètres sont facultatifs. L'ajout de paramètres signifie filtrer via le sélecteur et les éléments de filtrage. La méthode

.find(selector) renvoie les descendants de chaque élément de l'ensemble des éléments correspondants. Le paramètre est obligatoire et peut être un sélecteur, un objet jquery ou un élément pour filtrer les éléments.

.find() est similaire à la méthode .children(), sauf qu'elle ne parcourt qu'un seul niveau dans l'arborescence DOM. Les enfants ici, je comprends en tant que fils, ne sont traversés qu'au niveau des fils. Regardez l'exemple :

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

Le résultat de cette ligne de code est que les éléments A, B, C obtiennent un fond rouge. Puisque nous n'avons pas appliqué d'expression de sélecteur, l'objet jQuery renvoyé contient tous les éléments enfants. Si un sélecteur est appliqué, seuls les éléments correspondants seront inclus.

Regardons un exemple :

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

Le résultat obtenu est le suivant :

Ceci est attendu Le résultat, mais si vous remplacez le

ci-dessus par

, voir les commentaires de code ci-dessus, le résultat est :

Points de connaissance à prendre en compte dans la méthode find(). :

1. Find consiste à parcourir les descendants de chaque élément de la collection d'éléments actuelle. Tant qu'ils remplissent les conditions, peu importe qu'ils soient fils ou petits-fils.

2. Contrairement aux autres méthodes de parcours d'arbre, les expressions de sélection sont des paramètres obligatoires pour .find(). Si nous devons récupérer tous les éléments descendants, nous pouvons passer le sélecteur générique '*'.

3. find ne traverse que les descendants, à l'exclusion de lui-même.

4. Le contexte du sélecteur est implémenté par la méthode .find() donc $('li.item-ii').find('li') est équivalent à $('li', ' ; li.item-ii').

La syntaxe du sélecteur est : jQuery(selector, [context])

Généralement, l'utilisation du sélecteur jquery est le premier paramètre. En fait, cette utilisation de la fonction jquery() peut également transmettre un deuxième paramètre. Le but de passer ce paramètre est de limiter le sélecteur précédent à l'environnement contextuel. Par défaut, c'est-à-dire que si le deuxième paramètre n'est pas passé, le sélecteur recherche le DOM à partir de la racine du document ($() recherchera les éléments DOM dans le document HTML actuel si le deuxième paramètre est spécifié, comme par exemple) ; un élément DOM Set ou un objet jquery, il sera recherché dans ce contexte.

Regardons un exemple ci-dessous

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

Puisque nous avons limité le sélecteur de span à cet environnement, seul le span dans l'élément cliqué obtiendra la classe supplémentaire.

En interne, le contexte du sélecteur est implémenté via la méthode .find(), donc $("span", this) est équivalent à $(this).find( " span"), $('li.item-ii').find('li') est équivalent à $('li', 'li.item-ii')

find() Pour plus d'informations, veuillez visiter : https://www.php.cn/dic/jquery/find.html

children() Pour plus d'informations, veuillez visiter : https : //www.php.cn/dic/jquery/children.html

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours vidéo de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!