Maison > Article > interface Web > Tutoriel de base du sélecteur JQuery : sélecteur de base, sélecteur hiérarchique, sélecteur de filtre
Tutoriel de base du sélecteur JQuery : sélecteur de base, sélecteur hiérarchique, sélecteur de filtre
- 伊谢尔伦original
- 2017-06-17 15:45:091587parcourir
Le sélecteur de base est le sélecteur le plus couramment utilisé dans JQuery et le sélecteur le plus simple. Il recherche par identifiant d'élément, classe et nom de balise élément DOM. Ceci est très important et le contenu suivant est basé sur cela et amélioré étape par étape.
1). "$("#id")", récupère l'élément spécifié par id L'identifiant est globalement unique, il n'a donc qu'un seul membre.
2). "$(".class")", récupère l'élément spécifié par classe. Différents éléments peuvent avoir le même attribut de classe, il peut donc avoir plusieurs membres.
3). "$("element")", récupère l'élément spécifié par element (nom de l'élément, tel que div, table, etc.), qui peut avoir plusieurs membres.
4). "$("*")", récupère tous les éléments, équivalents au document.
5). "$("selector1,selector2,...,selectorN")", fusionne les éléments correspondant à chaque sélecteur et renvoie-les ensemble. Renvoie l'ensemble correspondant à selector1 + l'ensemble correspondant à selector2 +... + l'ensemble correspondant à selectorN.
2. Sélecteur de niveau
Qu'est-ce que le niveau ? Le niveau est le nœud de la relation père-fils et de la relation frère. Par conséquent, le sélecteur hiérarchique est utilisé pour obtenir les nœuds parent, enfant et frère d'un élément spécifié.
1). "$("ancêtre descendant")", récupère tous les éléments sous l'élément ancêtre.
2). "$("parent > child")", récupère tous les éléments enfants sous l'élément parent (seul le premier niveau d'éléments enfants est inclus).
3). "$("pre + next")", récupère l'élément frère suivant immédiatement après l'élément pre.
4). "$("pre ~ siblings")", récupère tous les éléments frères après l'élément pre.
3. Sélecteur de filtre
Filtrer ? 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électionne 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 du titre, 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
C'est une opération sur les éléments et le contenu du texte.
a) « :contains(text) », sélectionne les éléments contenant du contenu 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). Sélecteur de filtre de visibilité
Sélectionnez 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 : caché inclut non seulement les éléments dont l'attribut de style n'est pas affiché, mais inclut également des éléments tels que les champs de texte cachés () et visible : caché.
4). 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électionne tous les éléments dont la valeur d'attribut spécifiée est valeur.
c) "[attribut !=valeur]", sélectionnez tous les éléments dont la valeur d'attribut n'est pas une valeur.
d) « [attribut ^= valeur] », sélectionnez tous les éléments dont la valeur d'attribut commence par valeur.
e) « [attribut $= valeur] », sélectionnez tous les éléments dont la valeur d'attribut se termine par valeur.
f) « [attribut *= valeur] », sélectionnez tous les éléments dont la valeur d'attribut contient une 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.
l niè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).
l nth-child(2) : peut sélectionner l'élément avec la valeur d'index 2 sous chaque élément parent.
l nth-child(3n) : peut sélectionner des éléments dont la valeur d'index sous chaque élément parent est un multiple de 3.
l 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électionne 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électeur de filtre qui sélectionne les éléments du formulaire.
a) ":input", sélectionne tous les éléments ,