Méthode jQuery traversal children()

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

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

Méthode jQuery traversal children()

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]