Méthode jQuery traversal find()

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 :

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>

Formation continue

nouveau fichier

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

soumettre Réinitialiser le code

Opération automatique

Méthode jQuery traversal find()

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