Zusammenfassung der Verwendung von jQuery-Selektoren: first-child, :nth-child und :last-child

:first-child Beispiel für die Verwendung des Selektors in jQuery

Dieser Selektor kann mit dem ersten untergeordneten Element des übergeordneten Elements übereinstimmen.

Grammatikstruktur:

$(":first-child")

Dieser Selektor wird im Allgemeinen in Verbindung mit anderen Selektoren verwendet, z. B. Klassenselektor, Element Selektorusw. Beispiel:

$("ul li:first-child").css("color","blue")

Der obige Code kann die Schriftfarbe im ersten li-Element unter dem übergeordneten Element auf Blau setzen.

Hinweis: Das Konzept muss in Kombination mit dem obigen Code erläutert werden. Das hier erwähnte übergeordnete Element ist nicht li, sondern das übergeordnete Element von li. Viele Leute denken oft fälschlicherweise, dass es mit dem letzten Element unter den untergeordneten Elementen des li-Elements übereinstimmt.

Beispielcode:

  

    
ASP教程
    
ASP.NET教程
    
PHP教程
  
  

    
html教程
    
DIV+CSS教程
    
jQUERY教程
    
jAVAScript教程
  

点击查看效果

Im obigen Code kann durch Klicken auf die Schaltfläche die Textfarbe des ersten li-Elements unter jedem ul auf Blau gesetzt werden.

In jQuery: Beispiel für die Verwendung des n-ten untergeordneten Selektors

Dieser Selektor entspricht dem n-ten untergeordneten Element oder dem ungerade-gerade-Element unter seinem übergeordneten Element. Der
:eq(index)-Selektor stimmt nur mit einem Element überein, während der :nth-child-Selektor untergeordnete Elemente für jedes übergeordnete Element abgleicht.
:nth-child beginnt bei 1, während :eq() bei 0 beginnt.
Grammatikstruktur:

$(":nth-child")

Dieser Selektor wird im Allgemeinen in Verbindung mit anderen Selektoren wie Klassenselektoren, Elementselektoren usw. verwendet. Beispiel:

$("li:nth-child(2)").css("color","blue")

Der obige Code kann die Schriftfarbe im zweiten li-Element unter dem übergeordneten Element auf Blau setzen. Sie können auch ungerade und gerade untergeordnete Elemente eines übergeordneten Elements berechnen. Beispiel:

$("li:nth-child(even)").css("color","blue")

Der obige Code kann die Schriftfarbe im geraden li-Element unter dem übergeordneten Element auf Blau setzen.

Hinweis: Das Konzept muss in Kombination mit dem obigen Code erläutert werden. Das hier erwähnte übergeordnete Element ist nicht li, sondern das übergeordnete Element von li.
Viele Leute denken oft fälschlicherweise, dass es das letzte Element in den untergeordneten Elementen ist, das mit dem li-Element übereinstimmt.

Beispielcode:

  

    
ASP教程
    
ASP.NET教程
    
;PHP教程
  
  

    
html教程
    
DIV+CSS教程
    
jQUERY教程
    
jAVAScript教程
  

点击查看效果

jQuery: Beispiel für die Verwendung des Selektors für das letzte untergeordnete Element

Dieser Selektor kann mit dem letzten untergeordneten Element des übergeordneten Elements übereinstimmen.

Hinweis: last wählt nur ein Element aus und dieser Selektor stimmt mit dem letzten untergeordneten Element jedes übergeordneten Elements überein.
Grammatikstruktur:

$(":last-child")

Dieser Selektor wird im Allgemeinen in Verbindung mit anderen Selektoren wie Klassenselektoren, Elementselektoren usw. verwendet. Beispiel:

$("li:last-child").css("color","blue")

Der obige Code kann die Schriftfarbe im letzten li-Element unter dem übergeordneten Element auf Blau setzen.

Hinweis: Das Konzept muss in Kombination mit dem obigen Code erläutert werden. Das hier erwähnte übergeordnete Element ist nicht li, sondern das übergeordnete Element von li. Viele Leute denken oft fälschlicherweise, dass es mit dem letzten Element unter den untergeordneten Elementen des li-Elements übereinstimmt.

Beispielcode:

  

    
ASP教程
    
ASP.NET教程
    
PHP教程
  
  

    
html教程
    
DIV+CSS教程
    
jQUERY教程
    
jAVAScript教程
  

点击查看效果

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von jQuery-Selektoren: first-child, :nth-child und :last-child. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!