Les sélecteurs de filtre jQuery incluent : ":first", ":last", ":not()", ":even", ":odd", ":eq()", ":gt( ) ", ":lt()", ":header", ":empty", ":has()", ":hidden", etc.
[Recommandations associées : Tutoriel vidéo jQuery]
Sélecteur de filtre jQuery
Filtre ? Il faut absolument ajouter des conditions de filtre. Ajoutez des conditions de filtre via ":", telles que "$("div:first")" pour renvoyer le premier élément div de la collection d'éléments div, et first est la condition de filtre.
Selon différentes règles de filtrage, les sélecteurs de filtres peuvent être divisés en filtrage de base, filtrage de contenu, filtrage de visibilité, filtrage d'attributs, filtrage de sous-éléments et sélecteurs de filtrage d'attributs d'objet de formulaire.
1. Sélecteur de filtre de base
a) « :first », sélectionnez le premier élément, n'oubliez pas qu'il est également placé dans une collection ! Parce que JQuery est une collection d'objets DOM. Par exemple, "$("tr:first")" renvoie le premier élément tr de tous les éléments tr, qui est toujours enregistré dans la collection.
b) « :last », sélectionnez le dernier élément. Par exemple, "$("tr:last")" renvoie le dernier élément tr de tous les éléments tr, qui est toujours enregistré dans la collection.
c) ":not(selector)", supprime tous les éléments correspondant au sélecteur donné. Par exemple, "$("input:not(:checked)")" renvoie tous les éléments d'entrée, mais supprime les éléments sélectionnés (bouton radio, zone de sélection multiple).
d) « :even », sélectionne les éléments pairs parmi tous les éléments. Étant donné que l'objet JQuery est une collection, le nombre pair fait ici référence à l'index de la collection et l'index commence à 0.
e) ":odd", sélectionne les éléments impairs parmi tous les éléments, et l'index commence à 0.
f) « :eq(index) », sélectionne l'élément à l'index spécifié, et l'index commence à 0.
g) « :gt(index) », sélectionne les éléments dont l'index est supérieur à l'index spécifié, et l'index commence à 0.
h) ":lt(index)", sélectionne les éléments dont l'index est inférieur à l'index spécifié, et l'index commence à 0.
i) « :header », sélectionnez tous les éléments d'en-tête, tels que hq, h2, etc.
j) « :animated », sélectionne tous les éléments animés en cours d'exécution.
2. Sélecteur de filtre de contenu
Il opère sur les éléments et le contenu du texte.
a) ":contains(text)", sélectionnez l'élément contenant le contenu du texte.
b) « :empty », sélectionne les éléments vides qui ne contiennent pas d'éléments enfants ni de nœuds de texte.
c) « :has(selector) », sélectionne l'élément contenant l'élément correspondant par le sélecteur.
d) « :parent », sélectionnez les éléments contenant des éléments enfants ou des nœuds de texte. (C'est un nœud parent)
3. Le sélecteur de filtre de visibilité
sélectionne les éléments en fonction de leur statut visible ou invisible.
« :hidden » sélectionne tous les éléments invisibles.
":visible" sélectionne tous les éléments visibles.
Sélecteur visible : masqué inclut non seulement les éléments dont l'attribut de style n'est pas affiché, mais inclut également les champs de texte masqués () et visible : masqué, etc. .éléments.
4. Le sélecteur de filtre d'attribut
sélectionne l'élément correspondant via l'attribut de l'élément.
a) "[attribut]", sélectionnez les éléments avec cet attribut.
b) "[attribute=value]", sélectionnez tous les éléments avec la valeur d'attribut spécifiée.
c) "[attribut !=valeur]", sélectionnez tous les éléments dont la valeur d'attribut n'est pas valeur.
d) "[attribut ^= valeur]", sélectionnez tous les éléments dont la valeur d'attribut commence par valeur.
e) "[attribut $= value]", sélectionnez tous les éléments dont la valeur d'attribut se termine par value.
f) "[attribut *= valeur]", sélectionnez tous les éléments dont la valeur d'attribut contient valeur.
g) "[sélecteur1] [sélecteur2]...[sélecteurN]", un sélecteur composite, sélectionne d'abord [sélecteur1] et renvoie l'ensemble A, l'ensemble A sélectionne ensuite [sélecteur2] et renvoie l'ensemble B, l'ensemble B Ensuite, sélectionnez et renvoyez le résultat défini via [selectorN].
5. Sélecteur de filtre d'élément enfant
Comme vous pouvez le voir d'après le nom, il sélectionne les éléments enfants d'un certain élément.
a) ":nth-child(index/even/odd)", sélectionne l'élément d'index, l'élément d'index pair et l'élément d'index impair.
ntième enfant (pair/impair) : peut sélectionner des éléments dont la valeur d'index sous chaque élément parent est un nombre pair (impair).
nth-child(2) : peut sélectionner l'élément avec la valeur d'index 2 sous chaque élément parent.
nth-child(3n) : peut sélectionner des éléments dont la valeur d'index sous chaque élément parent est un multiple de 3.
nth-child(3n + 1) : peut sélectionner l'élément dont la valeur d'index est 3n + 1 sous chaque élément parent.
b) « :first-child », sélectionnez le premier élément enfant.
c) « :last-child », sélectionnez le dernier élément enfant.
d) ":only-child", sélectionne le seul élément enfant dont l'élément parent n'a que cet élément enfant.
6. Sélecteur de filtre de formulaire
Sélectionnez le sélecteur de filtre de l'élément de formulaire.
a) ":input", sélectionne tous les éléments ,
