Résumé de l'utilisation des sélecteurs jQuery : first-child, :nth-child et :last-child

:first-child exemple d'utilisation du sélecteur dans jQuery

Ce sélecteur peut correspondre au premier élément enfant de l'élément parent.

Structure grammaticale :

$(":first-child")

Ce sélecteur est généralement utilisé en conjonction avec d'autres sélecteurs, tels que sélecteur de classe, Element sélecteuretc. Par exemple :

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

Le code ci-dessus peut définir la couleur de la police du premier élément li sous l'élément parent sur bleu.

Remarque : Il est nécessaire d'expliquer le concept en combinaison avec le code ci-dessus. L'élément parent mentionné ici n'est pas li, mais l'élément parent de li. Beaucoup de gens pensent souvent à tort qu'il correspond au dernier élément parmi les éléments enfants de l'élément li.

Exemple de code :

  

    
ASP教程
    
ASP.NET教程
    
PHP教程
  
  

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

点击查看效果

Dans le code ci-dessus, cliquer sur le bouton peut définir la couleur du texte du premier élément li sous chaque ul sur bleu.

Dans jQuery : exemple d'utilisation du sélecteur de nième enfant

Ce sélecteur correspond au Nième enfant ou à l'élément impair-pair sous son élément parent. Le sélecteur
:eq(index) ne correspond qu'à un seul élément, tandis que le sélecteur :nth-child correspondra aux éléments enfants de chaque élément parent.
:nth-child commence à 1, tandis que :eq() commence à 0.
Structure grammaticale :

$(":nth-child")

Ce sélecteur est généralement utilisé en conjonction avec d'autres sélecteurs, tels que les sélecteurs de classe, les sélecteurs d'éléments, etc. Par exemple :

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

Le code ci-dessus peut définir la couleur de police du deuxième élément li sous l'élément parent sur bleu. Il est également possible de calculer des éléments enfants impairs et pairs d'un élément parent. Par exemple :

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

Le code ci-dessus peut définir la couleur de la police dans l'élément li pair sous l'élément parent sur bleu.

Remarque : Il est nécessaire d'expliquer le concept en combinaison avec le code ci-dessus. L'élément parent mentionné ici n'est pas li, mais l'élément parent de li.
Beaucoup de gens pensent souvent à tort que c'est le dernier élément des éléments enfants qui correspond à l'élément li.

Exemple de code :

  

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

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

点击查看效果

jQuery : exemple d'utilisation du sélecteur du dernier enfant

Ce sélecteur peut correspondre au dernier élément enfant de l'élément parent.

Remarque : last ne sélectionne qu'un seul élément, et ce sélecteur correspondra au dernier élément enfant de chaque élément parent.
Structure grammaticale :

$(":last-child")

Ce sélecteur est généralement utilisé en conjonction avec d'autres sélecteurs, tels que les sélecteurs de classe, les sélecteurs d'éléments, etc. Par exemple :

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

Le code ci-dessus peut définir la couleur de police du dernier élément li sous l'élément parent sur bleu.

Remarque : Il est nécessaire d'expliquer le concept en combinaison avec le code ci-dessus. L'élément parent mentionné ici n'est pas li, mais l'élément parent de li. Beaucoup de gens pensent souvent à tort qu'il correspond au dernier élément parmi les éléments enfants de l'élément li.

Exemple de code :

  

    
ASP教程
    
ASP.NET教程
    
PHP教程
  
  

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

点击查看效果

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!