Maison > interface Web > js tutoriel > Utilisation du sélecteur de filtre de sous-attribut jQuery Analysis_jquery

Utilisation du sélecteur de filtre de sous-attribut jQuery Analysis_jquery

WBOY
Libérer: 2016-05-16 16:14:46
original
1101 Les gens l'ont consulté

L'exemple de cet article décrit l'utilisation du sélecteur de filtre de sous-attribut jQuery. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1. :sélecteur du premier enfant

permet de sélectionner tous les éléments du premier élément enfant de son parent, format :

Copier le code Le code est le suivant :
$("selector:first-child")

Par exemple :

Copier le code Le code est le suivant :
$("ul:first-child" ).css( "text-decoration", "underline").css("color", "blue");

2. :sélecteur du dernier enfant

permet de sélectionner tous les éléments du dernier élément enfant de son parent, format :

Copier le code Le code est le suivant :
$("selector:last-child")

Par exemple :

Copier le code Le code est le suivant :
$("ul:last-child" ).css( "text-decoration", "underline").css("color", "red");

3. : sélecteur de nième enfant

Utilisé pour sélectionner le Nième élément enfant ou l'élément impair-pair sous l'élément parent.

Format de syntaxe :

Copier le code Le code est le suivant :
$("selector:nth-child( index/pair/impair/équation)") );

Par exemple :

Copier le code Le code est le suivant :
$("ul li:nth-child (4)" ).css("color", "red");//Définissez la couleur du texte du cinquième élément sous l'élément ul sur rouge, c'est-à-dire que la valeur d'index de l'élément li est 4

4. :sélecteur d'enfant uniquement

Le sélecteur unique utilisé pour sélectionner un élément

Format :

Copier le code Le code est le suivant :
$("selector:only-chilid")

Exemple simple :

Copier le code Le code est le suivant :
 
 
 
 
子元素过滤选择器 
 
 
≪/tête> 
 
 
子元素过滤器应用实例
 
 
     
       
       
       
       
       
    ≪/tr> 
     
       
       
       
       
       
    ≪/tr> 
     
       
       
       
       
       
    ≪/tr> 
     
       
       
       
       
       
    ≪/tr> 
     
       
       
       
       
       
    ≪/tr> 
 
 

效果图如下所示:

希望本文所述对大家的jQuery程序设计有所帮助。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal