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.

Le système d'exploitation de ce tutoriel : système Windows 10, jQuery version 3.6.0, ordinateur Dell G3.

Il existe quatre sélecteurs dans 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 dans le DOM l'identifiant, la classe et le nom de la balise de l'élément. .

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 les éléments id qui sont test

2. Class selector.class

Description : faites correspondre les éléments en fonction du nom de classe donné et renvoie une collection d'éléments

Exemple : $(".test") sélectionne tous les éléments avec la classe test.

3, élément de sélection d'élément (étiquette)

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 éléments

: sélectionnez Toutes les balises div

4, *

Description : Faites correspondre tous les éléments et renvoyez un ensemble d'éléments

Exemple : $("*") sélectionne tous les éléments

5, selector1, selector2,...,selectorN ( union Selector)

Description : combinez 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 tous les

, une collection d'éléments avec 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

ou niveau petit-enfant)

2. Sélecteur enfant $("parent>child")

Exemple : $("p>span") sélectionne tous les éléments sous l'élément

ne sélectionne que les éléments enfants appartenant directement à l'élément parent)

3. Sélecteur de pairs $("prev+next")

Description : Sélectionne l'élément suivant immédiatement après l'élément PRev et renvoie l'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électionne tous les frères et sœurs après l'élément élément précédent, renvoie l'ensemble des elements

Exemple : $("#two~p") sélectionne l'ensemble de tous les éléments frères et sœurs après l'élément portant l'identifiant two

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 les éléments

: Sélectionnez le dernier élément et renvoyez un seul élément

Exemple : $("p:last") sélectionne le dernier élément

parmi tous les éléments

3. Sélectionnez tous les éléments dont l'index est un nombre pair, l'index commence à 0 et renvoie l'élément set

5, :odd

Description : Sélectionnez tous les éléments dont l'index est un nombre impair, l'index commence à 0 et renvoie le element set

6 , :eq(index)

Description : Sélectionnez les éléments avec un index égal à index, l'index commence à 0, renvoie un seul élément

7, :gt(index)

Description : Sélectionnez des éléments avec un index supérieur que l'index, l'index commence à 0, renvoie la collection d'éléments

8, :lt(index)

Description : Sélectionnez l'élément dont l'index est inférieur à l'index, l'index commence à 0, renvoie la collection d'éléments

9, : focus

Description : Sélectionnez l'élément qui reçoit actuellement le focus

2>Sélecteur de filtrage de contenu

1, :contains(text)

Description : Sélectionnez les éléments contenant du texte et renvoyez une collection d'éléments

Exemple : $("p : contient('I')") Sélectionnez contient l'élément du texte "I"

2, :empty

Description : Sélectionnez un élément vide qui ne contient pas d'éléments enfants ni d'éléments de texte, et renvoie une collection d'éléments

Exemple : $("p:empty") Sélectionne qui ne contient pas d'éléments enfants ni de texte Élément

vide de l'élément (

)

3 :has(selector)

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

)

4. :parent

Description : Sélectionnez des éléments contenant des sous-éléments ou du texte et renvoyez une collection d'éléments

Exemple : $("p:parent") sélectionne les éléments

contenant des éléments enfants ou des éléments de texte (

ou

text< ;/ p>)

3>Sélecteur de filtre de visibilité

1, :hidden

Description : Sélectionnez tous les éléments invisibles et renvoyez la collection d'éléments

2, :visible

Description : Sélectionnez tous les éléments visibles et renvoyez la collection d'éléments

4> 🎜🎜#1, [attribut]

Exemple : $("p[id]") Sélectionnez l'élément p avec l'attribut id

2 ,[attribute=value]

Exemple : $("input[name=text]") Sélectionnez l'élément d'entrée avec l'attribut name égal à text

3, [attribut!= value]#🎜🎜 #

Exemple : $("input[name!=text]") Sélectionnez l'élément d'entrée dont 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, [attribute$=value]#🎜 🎜## 🎜🎜#Exemple : $("input[name$=text]") Sélectionnez l'élément d'entrée dont l'attribut name se termine par text

6, [attribut*=value]

#🎜🎜 #Exemple : $("input[name*=text]") Sélectionnez l'élément d'entrée avec l'attribut name contenant du texte

7, [attribute~=value]

#🎜🎜 #Exemple : $("input[class~=text]") Sélectionnez l'élément d'entrée qui contient du texte dans la valeur séparée par des espaces de l'attribut de classe

8, [attribute1][attribute2][attributeN]# 🎜 🎜#

Description : Fusionner 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:checked") Sélectionnez tous les éléments sélectionnés Element

# 🎜🎜#4, :selected

Description : Sélectionnez tous les éléments d'option sélectionnés (liste déroulante)

Exemple : $( "select option:selected") Sélectionnez tous les éléments sélectionnés éléments d'option

4. Sélecteur de formulaire (renvoie une 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 cases de mot de passe

3, :button

Description : Sélectionnez tous les boutons#🎜🎜 #

4, :checkbox#🎜 🎜#Description : Cochez toutes les cases

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!