jQuery est un objet de collection. Si vous souhaitez retrouver rapidement les éléments descendants de ces éléments dans l'arborescence DOM, vous pouvez utiliser la méthode find(). C'est aussi une méthode fréquemment utilisée en développement. Ici, nous devons faire attention à la différence entre les méthodes children et find. children est une recherche de relation parent-enfant, et find est une relation descendante (y compris la relation parent-enfant)
Comprendre la relation de recherche de nœud :
<div class="div" >
<ul class="son">
<li class="grandson">1</li>
< /ul>
</div>
Si le code est $("div").find("li"), à ce moment, li et div sont des ancêtres, et vous peut les trouver rapidement grâce à la méthode de recherche.
Points de connaissances à noter avec la méthode find() :
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.
Contrairement aux autres méthodes de parcours d'arborescence, 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 '*'.
find ne traverse que les descendants, à l'exclusion de lui-même.
Le contexte du sélecteur est implémenté par la méthode .find() donc $('.item-ii').find('li') est équivalent à $('li', '.item- ; ii') (recherchez la balise li sous la balise portant le nom de classe item-ii).
Points clés à noter :
Les méthodes find() et .children() sont similaires
1. Les enfants recherchent uniquement les nœuds enfants de premier niveau
2. La recherche la portée de la recherche inclut tous les nœuds descendants des nœuds enfants
Écrivons un exemple ci-dessous
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div>
<p>php.cn</p>
<ul>
<li>php<span> 中文网</span></li>
</ul>
</div>
<script>
$("div").find("span").css("color",'red');
</script>
</body>
</html>
section suivante