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.

Quels sont les différents types de sélecteurs jquery ?

1. Sélecteur de base

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

2. Sélecteur hiérarchique

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

3. Sélecteur de filtre

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>

ou un élément

d'un élément de texte (

ou

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.:text

Description : Sélectionnez toutes les zones de texte sur une seule ligne

Exemple : $(":text") Sélectionnez toutes les zones de texte sur une seule ligne

2, :password

Description : 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!