Utilisation du sélecteur de filtre jQuery Analysis

Utilisation du sélecteur de filtre jQuery Analysis_jquery

WBOY

Libérer： 2016-05-16 16:14:49

original

1266 Les gens l'ont consulté

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

En pratique, un sélecteur de filtre peut être ajouté au sélecteur de base pour terminer la tâche de requête. Selon la situation spécifique, la valeur de l'index, le contenu, les attributs, la position du sous-élément et la forme de l'élément peuvent être utilisés dans. le sélecteur de filtre

Attributs du domaine et visibilité comme conditions de filtrage

1. :premier sélecteur

Format :

Copier le code Le code est le suivant :

$("sélecteur : premier")

est utilisé Filtrer la collection jQuery actuelle et sélectionner le premier élément correspondant

Exemple :

Copier le code Le code est le suivant :

$("td:first").css ("border", "2px solid blue");

2. :dernier sélecteur

Format :

Copier le code Le code est le suivant :

$("sélecteur : dernier")

est utilisé Filtrer la collection jQuery actuelle et sélectionner le dernier élément correspondant
Exemple :

Copier le code Le code est le suivant :

$("td:last").css("border ", " 2px bleu uni ");

3. :sélecteur impair

Format :

Copier le code Le code est le suivant :

$("sélecteur : impair")

est utilisé Sélectionnez tous les éléments avec un indice impair (en comptant à partir de 0)

Exemple :

Copier le code Le code est le suivant :

$("td:odd").css ("fond", "rouge");

4. sélecteur pair

Format :

Copier le code Le code est le suivant :

$("sélecteur : pair")

est utilisé Sélectionnez tous les éléments avec un indice pair (en comptant à partir de 0)

Exemple :

Copier le code Le code est le suivant :

$("td:even").css ("fond", "rouge");

5. :sélecteur d'eq

Format :

Copier le code Le code est le suivant :

$("selector:eq(index)" )

Utilisé pour sélectionner l'élément dont l'index est égal à la valeur donnée dans l'ensemble correspondant

Exemple :

Copier le code Le code est le suivant :

$("li:eq(1)" ).css ("couleur", "bleu");

6. :sélecteur gt

Format :

Copier le code Le code est le suivant :

$("selector:gt(index)" )

Utilisé pour sélectionner tous les éléments d'un ensemble correspondant avec un indice supérieur à une valeur donnée

Exemple :

Copier le code Le code est le suivant :

$("li:gt(0)" ).css ("couleur", "vert");

7. Sélecteur :lt

Format :

Copier le code Le code est le suivant :

$("selector:lt(index)" )

Utilisé pour sélectionner tous les éléments d'un ensemble correspondant avec un indice supérieur à une valeur donnée

Exemple :

Copier le code Le code est le suivant :

$("li:lt(5)" ).css ("couleur", "vert");

Pour rechercher tous les éléments dont l'indice est supérieur à n1 et inférieur à n2, vous pouvez utiliser le sélecteur de tableau,

Copier le code Le code est le suivant :

$("selector:gt(n1), selector:lt(n2 )") ;

8. :pas de sélecteur

Format :

Copier le code Le code est le suivant :

$("selector1:not(selector2)" )

Utilisé pour supprimer tous les éléments correspondant au sélecteur donné de l'ensemble correspondant

Exemple :

Copier le code Le code est le suivant :

$("td:not(:first, :last) ").css("background", "red"); //Sauf pour la première et la dernière cellule, la couleur de fond des autres cellules est rouge 

9. :sélecteur d'en-tête

Format :

Copier le code Le code est le suivant :

$(":header")

pour la sélection Tous les éléments de titre comme h1, h2, h3

10. :sélecteur animé

Format :

Copier le code Le code est le suivant :

$("selector:animated")

est utilisé Sélectionnez tous les éléments qui effectuent une animation

Exemple simple :

Copier le code Le code est le suivant :

  
过滤选择器  

≪/tête>  

简单过滤选择器应用示例  

  ≪/tr>  

  ≪/tr>  

  ≪/tr>

效果图如下所示：

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