jQuery est un objet de collection. Si vous souhaitez trouver rapidement les éléments enfants de premier niveau de la collection, vous pouvez utiliser la méthode children().
Remarque ici : la méthode .children(selector) renvoie tous les éléments enfants de chaque élément dans l'ensemble d'éléments correspondant (uniquement la génération fils, qui peut être comprise comme une relation père-fils)
Comprendre la relation de recherche de nœud :
/li>
div et ul ont une relation parent-enfant, et li et div ont une relation d'ancêtre, ils sont donc introuvables.
children() n'a pas de paramètres
nous permet de rechercher les enfants directs de ces éléments dans l'arborescence DOM et de construire un nouvel objet jQuery de l'élément correspondant
Remarque : jQuery est un objet de collection, donc children est l'élément enfant de premier niveau qui correspond à chaque élément donné de la collection
La méthode children() accepte sélectivement le même type d'expression de sélecteur
$("div").children(".selected")
De même, étant donné que jQuery est un objet de collection, vous devrez peut-être filtrer cet objet de collection pour trouver l'élément cible, donc permet de passer une expression de sélection
Écrivons un exemple ci-dessous :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>childred()</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div>
<ul>
<li>php.cn</li>
<li>php 中文网</li>
</ul>
<p> php </p>
</div>
<script>
$("div").children().css("color", "red");
</script>
</body>
</html>Comme le montre le code ci-dessus, lorsque nous écrivons $("div").children().css("color ", "red"); Il cherchera les éléments enfants sous le div, donc les éléments du div deviendront rouges. Regardons un autre code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>childred()</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div>
<ul>
<li>php.cn</li>
<li>php 中文网</li>
</ul>
<p> php </p>
</div>
<script>
$("div").children(':first').css("color", "red");
</script>
</body>
</html> ci-dessus, nous verrons p La couleur des éléments dans la balise n'a pas changé. , parce que nous avons un paramètre dans children(), first est le premier, nous allons donc chercher le premier élément enfant dans le div
comme vous pouvez le voir <ul> div, donc les éléments de la balise li changeront. Vous pouvez essayer d'écrire un morceau de code localement
.
section suivante