Explication détaillée de la différence entre :first-child, :first et :first-of-type dans les sélecteurs jQuery-js tutoriel-php.cn

Explication détaillée de la différence entre :first-child, :first et :first-of-type dans les sélecteurs jQuery

黄舟

Libérer： 2017-06-23 14:39:01

original

1419 Les gens l'ont consulté

Commençons par une petite digression. Parce que mon premier emploi après l'obtention de mon diplôme n'était pas un emploi de premier plan, c'était dans une entreprise publique. Après avoir travaillé pendant environ 3 mois, je ne supportais vraiment pas le rythme de vie confortable, alors j'ai démissionné de manière décisive (en fait à cause de). le manque d'argent), puis j'ai choisi Décidez de la direction que vous aimez et partez de la page. Alors maintenant, j'en suis presque à mon troisième mois en tant que téléavertisseur. Parce que j'ai trouvé un stage dans une petite entreprise en démarrage, j'ai en fait très peu de connaissances sur le front-end du début à la fin, je me contente généralement de vérifier et d'apprendre tout ce dont j'ai besoin. , donc récemment, je ne peux chercher que l'API de jQuery.

Bon, allons droit au but.

J'ai vu le sélecteur :first-child dans l'API, qui est décrit de cette façon (j'ai utilisé la traduction et la compilation de quelqu'un d'autre, même si j'ai l'impression de lire encore la version officielle anglaise C'est mieux, mais j'utilise toujours cette version parce que je suis paresseux)

Pour cela, j'étais très ennuyé au début, car ce qui est renvoyé est un tableau d'objets (C'est ma compréhension personnelle, je ne sais pas si c'est correct), mais le nom de ce sélecteur est : premier-enfant (j'ai vraiment envie de me plaindre, pourquoi je ne l'appelle pas enfants) . Plus tard, je l'ai essayé moi-même et j'ai découvert que si je n'utilise pas each(), le premier élément du tableau est renvoyé par défaut, qui est

John

(En fait, ce n'est pas de cela dont je veux parler, c'est juste pour ouvrir la voie)

Dans cette API, si vous regardez un peu plus loin, vous verrez le sélecteur :premier- de type, comme suit C'était sa description de ce sélecteur

Plus tard, à cause de ce qu'il a dit au début de cette partie, je suis allé à Baidu pour faites une recherche en ligne : description du premier type, puis vérifiez également : premier enfant. J'ai trouvé que certaines instructions semblaient inexactes.

Bon, il y a trop de mots, alors passons directement au code et aux effets. (Dans la partie code, l'introduction de jQuery, je ne veux pas m'embêter à trouver celui sur Internet, il suffit d'utiliser le chemin local)

[:first]

<!DOCTYPE html><html lang="zh-CN"><head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./js/jquery-1.11/jquery.min.js"></script></head><body>
    <p>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </p>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:first").each(function(){
                alert($(this).html());
            })
        })    </script></body></html>

Copier après la connexion

[:le premier sélecteur est où ? Afficher sous les navigateurs】

【:premier enfant】

<!DOCTYPE html><html lang="zh-CN"><head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./js/jquery-1.11/jquery.min.js"></script></head><body>
    <p>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </p>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:firstchild").each(function(){
                alert($(this).html());
            })
        })    </script></body></html>

Copier après la connexion

【 : Sélecteur du premier enfant Effet sous différents navigateurs] (En raison de la traversée, il y a 3 éléments sélectionnés, c'est-à-dire que 3 fenêtres contextuelles apparaîtront ; les navigateurs sont : waterfox, chrome, IE 11, Edge)

【waterfox】

【chrome】PS : Il semble y avoir une fenêtre pop-up dans Chrome, donc je ne peux pas passer à une autre fenêtre, donc je peux ne prendre que 3 captures d'écran Après l'épissage

【IE 11】

【Edge】

【:premier de type】

<!DOCTYPE html><html lang="zh-CN"><head>
    <title>test</title>
    <meta charset="utf-8">
    <script src="./bootstrap/js/jquery-1.11/jquery.min.js"></script></head><body>
    <p>
        <ul>
            <li><p>测试li-11</p></li>
            <li><p>测试li-12</p></li>
            <li><p>测试li-13</p></li>
        </ul>
        <hr>
        <ul>
            <li><p>测试li-21</p></li>
            <li><p>测试li-22</p></li>
            <li><p>测试li-23</p></li>
        </ul>
        <hr>
    </p>
    <hr>
    <ul>
        <li><p>测试li-31</p></li>
        <li><p>测试li-32</p></li>
        <li><p>测试li-33</p></li>
    </ul>
    <script>
        $(document).ready(function(){
            $("ul li:first-of-type").each(function(){
                alert($(this).html());
            })
        })    </script></body></html>

Copier après la connexion

【:effet d'affichage du sélecteur de premier type dans chaque navigateur】

Cette partie de l'affichage et L'effet est le même sous le sélecteur [:first-child] La longueur est réduite, mais la capture d'écran n'est toujours pas incluse.

[Résumé]

D'après la capture d'écran ci-dessus, nous pouvons voir que :first , :first-child , :first-of-type, ces trois sélecteurs, parcourent Les différents cœurs de processeur n'affecteront pas jQuery et les effets d'affichage.

D'autre part, le sélecteur

[:first] renvoie un seul nœud, c'est-à-dire le nœud, qui est unique et certain

【:first-child】Le sélecteur renvoie en fait un tableau de nœuds. Si chacun n'est pas utilisé pour le parcours, le premier nœud du tableau est renvoyé par défaut (plus tard, j'ai vérifié la valeur de retour de size() , c'est le cas). en effet 3, ce qui confirme mon idée)

sélecteur [:first-of-type], similaire à [:first-child] (la raison pour laquelle ce n'est pas pareil est que le résultat est le même dans ce exemple, et les deux sélecteurs ont des fonctions différentes), et ce qui est renvoyé est également un tableau de nœuds. Si chacun n'est pas utilisé pour le parcours, le premier nœud du tableau est renvoyé par défaut (plus tard, j'ai vérifié la valeur de retour de size(). ) , il s'agit bien de 3, ce qui confirme mon idée).

PS : Il semble y avoir un dernier correspondant au premier, je ne l'ai pas encore vu, mais j'ai personnellement l'impression que ce sont les mêmes, sauf que l'un est le premier et le. l'autre est le dernier. C'est le dernier. Si j'ai le temps, je publierai les résultats de la vérification des trois derniers sélectionneurs

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!