suchen

Heim >Web-Frontend >js-Tutorial >Der Unterschied zwischen jQuery :first selector, :first-child selector und first()

Der Unterschied zwischen jQuery :first selector, :first-child selector und first()

黄舟
黄舟Original
2017-06-23 14:35:211800Durchsuche

:first Holen Sie sich das erste Element. Der

:first-child-Selektor wählt alle Elemente aus, die das erste untergeordnete Element seines übergeordneten Elements sind.

first() gibt das erste Element des ausgewählten Elements zurück.

Der Testcode lautet wie folgt: 

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Insert title here</title>  
</head>  
<body>  
    <ul>  
        <li>ul_1 item 1</li>  
        <li>ul_1 item 2</li>  
        <li>ul_1 item 3</li>  
        <li>ul_1 item 4</li>  
        <li>ul_1 item 5</li>  
    </ul>  
    <ul>  
        <li>ul_2 item 1</li>  
        <li>ul_2 item 2</li>  
        <li>ul_2 item 3</li>  
        <li>ul_2 item 4</li>  
        <li>ul_2 item 5</li>  
    </ul>  
</body>  
</html>

Zuerst testen: Zuerst lautet der Code wie folgt

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("ul li:first").css("background-color","yellow");  
    })  
 </script>

Der Effekt ist wie folgt;

Der Unterschied zwischen jQuery :first selector, :first-child selector und first()

Nur ​​das erste ist ausgewählt,

Test: erstes Kind, der Code lautet wie folgt 

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("ul li:first-child").css("background-color","yellow");  
    })  
 </script>

Der Effekt ist wie folgt :

Der Unterschied zwischen jQuery :first selector, :first-child selector und first()

Es wurde festgestellt, dass das erste li-Element jedes ul ausgewählt ist,

Testen Sie zuerst (), der Code lautet wie folgt 

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>  
<script type="text/javascript">  
    $(function(){  
        $("ul li").first().css("background-color","yellow");  
    })  
 </script>

Der Effekt ist wie folgt:

Der Unterschied zwischen jQuery :first selector, :first-child selector und first()

Es stellt sich heraus, dass nur der erste ausgewählt ist

Hier stellen wir fest, dass :first den ersten auswählt li-Unterelement des ersten ul-Elements und fügt dann einen Stil hinzu, unabhängig davon, ob sich dieses Element in diesem Element befindet. Es wird nur nach dem ersten

gesucht und :first-child wählt aus Alle Elemente, deren erstes untergeordnetes Element unter ul li ist. Es gibt zwei übergeordnete ul-Elemente, ul_1 und ul_2. Beide haben ihre eigenen untergeordneten Elemente li.

Das letzte ist first(), das :first ähnelt. Es ruft das erste li-Unterelement des ersten ul-Elements ab, egal wie viele Elemente es gibt

Das obige ist der detaillierte Inhalt vonDer Unterschied zwischen jQuery :first selector, :first-child selector und first(). 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：jquery: Warum ist der First-Child-Selektor in diesem Fall ungültig?Nächster Artikel：jquery: Warum ist der First-Child-Selektor in diesem Fall ungültig?

In Verbindung stehende Artikel

Mehr sehen