Maison > Article > interface Web > Comment trouver des éléments descendants dans jquery ? méthode jquery pour obtenir les éléments descendants

Comment trouver des éléments descendants dans jquery ? méthode jquery pour obtenir les éléments descendants

云罗郡主original: 2018-11-03 15:22:538367parcourir

Dans l'article précédent nous avons parlé de jquery pour récupérer l'élément parent ? Je pense que vous l'avez appris, alors parlons de la façon de trouver des éléments descendants dans jquery ? méthode jquery pour obtenir les éléments descendants.

1 : Trois façons de trouver des éléments descendants

(1) children();

(2) contents(); 🎜> (3) find();

Les éléments dits descendants sont les "éléments enfants" et les "petits-enfants" d'un certain élément... Sun Yuan Yuan, bien qu'il n'y ait pas de terme de ce type dans le front-end, il est plus vivant, c'est pourquoi ce terme est utilisé dans cette section.

Deux : méthode jquery pour obtenir des éléments descendants

1. Méthode children()

Dans jQuery, nous pouvons utiliser. La méthode children() recherche « tous les éléments enfants » ou « certains éléments enfants » de l’élément actuel. Notez que la méthode children() ne peut trouver que des éléments enfants, pas d’autres éléments descendants.

Syntaxe : children(expression)

Description : L'expression du paramètre représente l'expression du sélecteur jQuery, utilisée pour filtrer les éléments enfants. Lorsque l'argument est omis, tous les éléments enfants seront sélectionnés. Si le paramètre n'est pas omis, cela signifie que les éléments enfants qui remplissent les conditions sont sélectionnés.

Exemple :

L'effet est le suivant :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".wrapper").hover(function () {
                $(this).children(".test").css("color", "red");
            }, function () {
                $(this).children(".test").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孙元素</li>
            <li class="test">孙元素</li>
            <li>孙元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
    <hr />
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孙元素</li>
            <li class="test">孙元素</li>
            <li>孙元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
</body>
</html>

Comment trouver des éléments descendants dans jquery ? méthode jquery pour obtenir les éléments descendants Quand on déplace la souris vers la première classe du wrapper Lorsque sur l'élément div, l'effet d'aperçu du navigateur est le suivant :

Comment trouver des éléments descendants dans jquery ? méthode jquery pour obtenir les éléments descendants Analyse : $(this).children(".test") signifie sélectionner la classe de test sous l'élément courant "élément enfant". Ici, nous constaterons que bien qu'il y ait des « petits-enfants » avec le test de classe, les « petits-enfants » ne seront pas sélectionnés à l'aide de la méthode children().

Méthode 2.contents()

Semblable à la méthode children(), la méthode contents() est également utilisée pour trouver du contenu enfant, mais elle n'obtient pas seulement éléments enfants, vous pouvez également obtenir des nœuds de texte, des nœuds de commentaires, etc. Les lecteurs peuvent donc y voir l'implémentation jQuery de l'attribut childNodes dans le DOM. La méthode contents() est rarement utilisée. En tant que débutants, nous pouvons simplement ignorer cette méthode.

Je me souviens que dans de nombreux tutoriels précédents, certaines connaissances courantes mais peu utilisées étaient mentionnées dans une certaine mesure. Beaucoup de suggestions enthousiastes ont été dites, webmaster, puisque ces connaissances ne sont pas utilisées et c'est une perte d'espace, pourquoi en parler ? Supprimez-le simplement directement. En fait, la raison est très simple : apprendre des connaissances et savoir « ce qui n'a pas besoin d'être étudié en profondeur » est tout aussi important que « savoir ce qui doit être étudié en profondeur ». Premièrement, il s'agit de permettre aux lecteurs de clarifier plus facilement leurs pensées, et deuxièmement, lorsqu'ils rencontreront ces connaissances à l'avenir, cela aura une certaine impression afin qu'ils ne soient pas pressés.

Méthode 3.find()

La méthode find() est similaire à la méthode children(), les deux sont utilisées pour trouver des éléments descendants de l'élément sélectionné, mais la méthode find() peut trouver tous les éléments descendants, tandis que la méthode children() ne peut trouver que les éléments enfants.

La méthode find() et la méthode children() sont utilisées presque aussi fréquemment et sont tout aussi importantes. Chacun doit le maîtriser soigneusement et le distinguer soigneusement.

Syntaxe : find(expression)

Exemple :

Par défaut, l'effet d'aperçu dans le navigateur est le suivant :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".wrapper").hover(function () {
                $(this).find(".test").css("color", "red");
            }, function () {
                $(this).find(".test").css("color", "black");
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孙元素</li>
            <li class="test">孙元素</li>
            <li>孙元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
    <hr />
    <div class="wrapper">
        <div class="test">子元素</div>
        <ul>
            <li>孙元素</li>
            <li class="test">孙元素</li>
            <li>孙元素</li>
        </ul>
        <div class="test">子元素</div>
    </div>
</body>
</html>

Comment trouver des éléments descendants dans jquery ? méthode jquery pour obtenir les éléments descendants Quand on bouge la souris au 1er Lorsqu'il est placé sur un élément div avec un wrapper de classe, l'effet d'aperçu du navigateur est le suivant :

Comment trouver des éléments descendants dans jquery ? méthode jquery pour obtenir les éléments descendants Analyse : $(this).find(".test") signifie sélectionner l'élément actuel. La classe ci-dessous contient tous les "éléments descendants" du test, y compris les éléments enfants et tous les éléments descendants tels que les éléments petits-enfants. Si vous comparez l’exemple de la méthode find() avec l’exemple de la méthode children(), vous pouvez intuitivement trouver la différence entre les deux.

Semblable à la méthode children(), la méthode contents() est également utilisée pour trouver du contenu enfant, mais elle obtient non seulement des éléments enfants, mais également des nœuds de texte, des nœuds de commentaires, etc. Les lecteurs peuvent donc y voir l'implémentation jQuery de l'attribut childNodes dans le DOM. La méthode contents() est rarement utilisée. En tant que débutants, nous pouvons simplement ignorer cette méthode. Si vous souhaitez en savoir plus, vous pouvez vous référer au :

Tutoriel jQuery

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment obtenir l'élément parent en utilisant jquery ? méthode jquery pour obtenir l'élément parentArticle suivant：Comment obtenir l'élément parent en utilisant jquery ? méthode jquery pour obtenir l'élément parent

Articles Liés

Voir plus