Maison  >  Article  >  interface Web  >  Jquery : compréhension approfondie du sélecteur de premier enfant

Jquery : compréhension approfondie du sélecteur de premier enfant

黄舟
黄舟original
2017-06-23 14:28:301538parcourir

Aperçu

correspond au premier élément enfant

':first' ne correspond qu'à un seul élément, tandis que ce sélecteur correspondra à un enfant pour chaque élément parent Élément

Exemple

Description :

Trouver le premier li

Code HTML :

<ul> 
<li>John</li> 
<li>Karl</li> 
<li>Brandon</li> 
</ul> 
<ul> 
<li>Glen</li> 
<li>Tane</li> 
<li>Ralph</li> 
</ul>

jQuery Code :

$("ul li:first-child")

Résultat :

[ <li>John</li>, <li>Glen</li> ]

$("p:first-child") définition :

Sélectionnez le premier élément p appartenant à son élément parent et tous les éléments frères :

Exemple de code

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title>first-child选择器</title>
        <script src="../../jquery.min.js">
        </script>

        <script>
            $(document).ready(function(){
                $("p:first-child").css("background-color","red");
            });        </script>
    </head>

    <body>
        <p>the first paragraph in body</p>

        <div style="border:1px solid;">
            <p>The first paragraph in div.</p>
            <p>the last paragraph in div.</p>
        </div><br>

        <div style="border:1px solid;">
            <span>This is a span element.</span>
            <p>The first paragraph in another div.</p>
            <p>The last paragraph in another div.</p>
        </div>
    </body></html>

Structure arborescente DOM

Jquery : compréhension approfondie du sélecteur de premier enfant

Explication populaire

Localisez d'abord l'élément parent de tous les éléments p dans le document actuel, puis localisez son premier élément enfant, puis modifiez l'effet d'ombre arrière, $("p:last -child") est exactement le contraire. Si le premier élément ne l'est pas. p, mais un élément span, l'effet d'ombre arrière ne sera pas modifié.

Extended

$("p:nth-child(n)")
Sélectionne chaque élément p qui est le nième élément enfant de son élément parent.
Si le n-ème élément n'est pas un p élément, il n'appartient pas à la plage sélectionnée par ce sélecteur.

$(“p:nth-last-child(n)”)
Sélectionnez l'élément p qui est le troisième élément enfant de son élément parent, en comptant à partir du dernier élément enfant
Si vous comptez down Si le nième élément n'est pas un élément p, il n'appartient pas à la plage sélectionnée par ce sélecteur.


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