Maison > Article > interface Web > Quels sont les types de sélecteurs jquery ?
Il existe 4 types de sélecteurs jquery, qui sont : 1. Le sélecteur de base, qui recherche les éléments par leur identifiant, leur classe, etc. ; 2. Le sélecteur hiérarchique, qui obtient des éléments spécifiques basés sur des relations hiérarchiques ; Filtrage de contenu, filtrage de visibilité, filtrage d'attributs et filtrage de sous-éléments ; 4. Sélecteur de formulaire, qui peut renvoyer une collection d'éléments.
L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.
Le sélecteur de base est le sélecteur le plus couramment utilisé et le plus simple dans jQuery. Il recherche les éléments par leur identifiant, leur classe et leur nom de balise. .
1. Sélecteur d'ID #id
Description : fait correspondre un élément en fonction de l'identifiant donné et renvoie un seul élément (Remarque : dans la page Web, le nom de l'identifiant ne peut pas être répété)
Exemple : $("# test") Sélectionnez l'élément avec l'identifiant de test
2. Sélecteur de classe.class
Description : Faites correspondre les éléments en fonction du nom de classe donné et renvoyez la collection d'éléments
Exemple : $(".test") Sélectionnez tous ceux qui ont un test de classe Element
3. Élément de sélection d'élément (tag)
Description : fait correspondre les éléments en fonction du nom d'élément donné et renvoie la collection d'éléments
Exemple : $("p") sélectionne tous les
4, *
Description : Faites correspondre tous les éléments et renvoyez la collection d'éléments
Exemple : $("*") Sélectionnez tous les éléments
5, selector1, selector2 ,...,selectorN (sélecteur d'union)
Description : Fusionnez les éléments correspondant à chaque sélecteur et renvoyez-les ensemble, puis renvoyez l'ensemble d'éléments fusionnés
Exemple : $("p,span,p. myClass ") sélectionne l'ensemble des éléments avec toutes les balises
, et dont la classe est myClass Le sélecteur hiérarchique obtient des éléments spécifiques basés sur des relations hiérarchiques. 1. Sélecteur descendant Exemple : $("p span") sélectionne tous les éléments dans l'élément il s'agit d'un niveau fils ou d'un niveau petit-fils) 2. Sélecteur d'enfant $("parent>child") Exemple : $("p>span") sélectionne tous les ; élément (remarque : les sélecteurs enfants sélectionnent uniquement les éléments enfants appartenant directement à l'élément parent) 3. Sélecteur frère $("prev+next") Description : Sélectionnez l'élément suivant immédiatement après l'élément précédent, renvoyez l'élément précédent. ensemble d'éléments Exemple : $(".one+p") sélectionne l'élément frère suivant avec la classe un 4. Sélecteur de frères et sœurs $("prev~siblings") Description : Sélectionnez tous les éléments frères après l'élément précédent et renvoie l'ensemble d'éléments Exemple : $("#two~p") sélectionne l'ensemble de tous les éléments frères après l'élément avec l'identifiant deux 1>Sélecteur de filtre de base 1, :first Description : Sélectionnez le premier élément et renvoie un seul élément Exemple : $("p:first") sélectionne le premier élément parmi tous element 2, :last Description : Sélectionnez le dernier élément et renvoie un seul élément Exemple : $("p:last") sélectionne le dernier Element 3, :not(selector) Description : Supprime tous les éléments qui correspondent au sélecteur donné et renvoie une collection d'éléments Exemple : $("input:not(.myClass)") sélectionne une classe qui n'est pas myClass Element 4, :even Description : sélectionne tous les éléments dont l'index est pair, l'index commence à 0, renvoie l'ensemble d'éléments 5, :odd Description : sélectionne tous les éléments dont l'index est impair number, index A partir de 0, renvoie l'ensemble des éléments 6, :eq(index) Description : Sélectionnez l'élément dont l'index est égal à index, l'index part de 0, renvoie un seul élément 7, : gt(index) Description : Sélectionnez l'index Pour les éléments supérieurs à l'index, l'index commence à 0 et renvoie l'ensemble d'éléments 8 :lt(index) Description : Sélectionne les éléments dont l'index est inférieur à l'index. L'index commence à 0 et renvoie l'ensemble d'éléments 9. :focus Description : Sélectionnez l'élément qui reçoit actuellement le focus 2> Sélecteur de filtre de contenu 1, :contains(text) Description : Sélectionnez le élément contenant le contenu du texte sous forme de texte et renvoie la collection d'éléments Exemple : $(" p:contains('I')") Sélectionnez les éléments contenant le texte "I" 2, :empty Description : Sélectionnez les éléments vides qui ne contiennent pas d'éléments enfants ou d'éléments de texte, et renvoient une collection d'éléments Exemple : $(" p:empty") sélectionne un élément vide qui ne contient pas d'éléments enfants ou d'éléments de texte ( 3. :has(sélecteur) Description : Sélectionnez l'élément contenant l'élément correspondant au sélecteur et renvoyez l'ensemble d'éléments Exemple : $("p:has(p)") sélectionne l'élément contenant l'élément p> d'un élément de texte ( 2. Sélecteur hiérarchique
3. Sélecteur de filtre
text
) 3> ;Sélecteur de filtre de visibilité1. :masqué
Description : Sélectionnez tous les éléments invisibles et renvoyez l'ensemble d'éléments2 :visible
Description : Sélectionnez tous les éléments visibles et renvoyez l'ensemble d'éléments
4> selector (renvoie l'ensemble d'éléments)1. [attribut]
Exemple : $("p[id]") Sélectionnez l'élément p avec l'attribut id2.[attribut=value]
Exemple : $( "input[name=text ]") Sélectionnez les éléments d'entrée avec l'attribut name égal à text
3, [attribute!=value]
Exemple : $("input[name!=text]") Sélectionnez les éléments d'entrée avec l'attribut name n'est pas égal à text
4. [attribut^=value]
Exemple : $("input[name^=text]") Sélectionnez l'élément d'entrée dont l'attribut name commence par text
5.
Exemple : $( "input[name$=text]") sélectionne l'élément d'entrée dont l'attribut name se termine par text
6 [attribute*=value]
Exemple : $("input[name*=text ]") sélectionne l'élément d'entrée avec l'attribut name Éléments d'entrée contenant du texte
7, [attribut~=valeur]
Exemple : $("input[class~=text]") Sélectionnez les éléments d'entrée qui contiennent du texte dans les valeurs séparés par des espaces avec des attributs de classe
8, [attribut1][attribute2][attributeN]
Description : Combiner plusieurs sélecteurs de filtre d'attribut
5> Sélecteur de filtre d'attribut d'objet de formulaire (collection d'éléments de retour)1, : activé
Description : Sélectionnez tous les éléments disponibles 2, :disabled
Description : Sélectionnez tous les éléments indisponibles
3, :checked
Description : Sélectionnez tous les éléments sélectionnés (cases radio, cases à cocher)
Exemple : $( "input: selected") Sélectionnez tous les éléments sélectionnés
4, :selected
Description : Sélectionnez tous les éléments d'option sélectionnés (liste déroulante)
Exemple : $("select option:selected") Sélectionnez tout selected Élément d'option sélectionné
Quatre. Sélecteur de formulaire (renvoie la collection d'éléments, utilisation similaire) 1.:textExemple : $(":text") Sélectionnez toutes les zones de texte sur une seule ligne
2, :passwordDescription : Sélectionnez toutes les zones de mot de passe
3, :button
Description : Sélectionnez tous les boutons
4, :checkbox
Description : Sélectionnez toutes les cases à sélection multiple
Tutoriels vidéo associés recommandés : Tutoriel vidéo jQuery
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!