suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erklärung des Unterschieds zwischen :first-child, :first und :first-of-type in jQuery-Selektoren

Detaillierte Erklärung des Unterschieds zwischen :first-child, :first und :first-of-type in jQuery-Selektoren

黄舟
黄舟Original
2017-06-23 14:39:011448Durchsuche

Beginnen wir mit einem kleinen Exkurs. Da mein erster Job nach dem Abschluss kein Front-End-Job war, sondern in einem staatlichen Unternehmen. Nachdem ich etwa drei Monate lang gearbeitet hatte, konnte ich das angenehme Tempo des Lebens wirklich nicht ertragen, also habe ich entschieden gekündigt (eigentlich wegen der Mangel an Geld), und dann wählte ich „Entscheiden Sie sich für die Richtung, die Ihnen gefällt, und beginnen Sie mit der Seite“. Jetzt bin ich fast im dritten Monat als Pager. Da ich einen Praktikumsplatz in einem kleinen Startup-Unternehmen gefunden habe, habe ich von Anfang bis Ende nur sehr wenig Wissen über das Frontend . , daher kann ich in letzter Zeit nur nach der API von jQuery suchen.

Okay, kommen wir zum Punkt.

Ich habe den Selektor :first-child in der API gesehen, der so beschrieben wird (ich habe die Übersetzung und Kompilierung einer anderen Person verwendet, obwohl ich das Gefühl habe, immer noch die offizielle englische Version zu lesen Es ist besser, aber ich benutze diese Version immer noch, weil ich faul bin)

Darüber war ich zunächst sehr verärgert, denn was zurückgegeben wird, ist ein Array von Objekten (Dies ist mein persönliches Verständnis, ich weiß nicht, ob es richtig ist), aber der Name dieses Selektors lautet: erstes Kind (ich möchte mich wirklich beschweren, warum nenne ich es nicht Kinder) Später habe ich es selbst ausprobiert und festgestellt, dass das erste Element des Arrays standardmäßig zurückgegeben wird, das im Screenshot 25edfb22a4f469ecb59f1190150159c6Johnbed06894275b65c1ab86501b08a632eb ist. (Eigentlich ist das nicht das, worüber ich sprechen möchte, das soll nur den Weg ebnen)

Wenn Sie in dieser API etwas weiter zurückblicken, sehen Sie den Selektor :first- of-type, wie folgt Es war seine Beschreibung dieses Selektors

Später ging ich aufgrund dessen, was er am Anfang dieses Teils sagte, zu Baidu Überprüfen Sie die Online-Rezension: Beschreibung des ersten Typs und dann auch überprüft: erstes Kind. Ich stellte fest, dass einige der Anweisungen ungenau zu sein schienen.

Okay, es sind zu viele Wörter, also gehen wir direkt zum Code und den Effekten. (Im Codeteil, der Einführung von jQuery, möchte ich mir nicht die Mühe machen, den im Internet zu finden, sondern einfach den lokalen Pfad verwenden)

[: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>

[:erster Selektor ist wo? Anzeige unter Browsern】

【:first-child】

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

【: First-Child-Selektor Wirkung unter verschiedenen Browsern] (Aufgrund der Durchquerung gibt es 3 ausgewählte Elemente, d. h. es werden 3 Popup-Fenster angezeigt; die Browser sind: Waterfox, Chrome, IE 11, Edge)

【Waterfox】

【Chrome】PS: Es scheint ein Popup-Fenster in Chrome zu geben, daher kann ich nicht zu einem anderen Fenster wechseln, also kann ich Nur 3 Screenshots machen Nach dem Spleißen

【IE 11】

【Edge】

【:First-of-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>

【:First-of-Type-Selektor-Anzeigeeffekt in jedem Browser】

Dieser Teil der Anzeige und Der Effekt ist derselbe unter dem [:first-child]-Selektor. Die Länge wird reduziert, aber der Screenshot ist immer noch nicht enthalten.

[Zusammenfassung]

Auf dem Screenshot oben können wir sehen, dass :first , :first-child , :first-of-type diese drei Selektoren durchsuchen Die unterschiedlichen Prozessorkerne haben keinen Einfluss auf jQuery und Anzeigeeffekte.

Andererseits gibt der

[:first]-Selektor einen einzelnen Knoten zurück, d. h. den Knoten, der eindeutig und sicher ist

【:first-child】Der Selektor gibt tatsächlich ein Array von Knoten zurück, wenn nicht jeder zum Durchlaufen verwendet wird, wird standardmäßig der erste Knoten des Arrays zurückgegeben (später habe ich den Rückgabewert von size() überprüft). in der Tat 3, was meine Idee bestätigt)

[:first-of-type]-Selektor, ähnlich zu [:first-child] (der Grund, warum es nicht dasselbe ist, liegt darin, dass das Ergebnis hier dasselbe ist Beispiel und die beiden Selektoren haben unterschiedliche Funktionen), und was zurückgegeben wird, ist auch ein Array von Knoten. Wenn nicht jeder zum Durchlaufen verwendet wird, wird standardmäßig der erste Knoten des Arrays zurückgegeben (später habe ich den Rückgabewert von size( überprüft). ) , es ist tatsächlich 3, was meine Idee bestätigt).

PS: Es scheint ein Letztes zu geben, das dem Ersten entspricht. Ich habe es noch nicht gesehen, aber ich persönlich habe das Gefühl, dass sie gleich sind, außer dass eines das Erste und das Erste ist „andere“ ist die letzte. Wenn ich Zeit habe, sende ich die Verifizierungsergebnisse der letzten drei Selektoren

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung des Unterschieds zwischen :first-child, :first und :first-of-type in jQuery-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Der Unterschied zwischen jQuery :first selector, :first-child selector und first()Nächster Artikel：Der Unterschied zwischen jQuery :first selector, :first-child selector und first()

In Verbindung stehende Artikel

Mehr sehen