Résumé des sélecteurs jQuery_jquery couramment utilisés

Dans la programmation Dom, nous ne pouvons utiliser que des fonctions limitées pour obtenir des objets Dom basés sur l'identifiant ou le TagName. Cependant, c'est complètement différent dans jQuery. jQuery fournit des sélecteurs extrêmement puissants pour nous aider à obtenir des objets sur la page et à convertir les objets renvoyés. en tant qu'ensemble de wrapper jQuery. Cet article présente et catégorise principalement les sélecteurs jQuery couramment utilisés.

Les sélecteurs jQuery peuvent être grossièrement divisés en 4 catégories : les sélecteurs de base, les sélecteurs hiérarchiques, les sélecteurs de filtres et les sélecteurs de formulaire.
Les sélecteurs de filtre peuvent être divisés en : sélecteurs de filtre simples, sélecteurs de filtre de contenu, sélecteurs de filtre de visibilité, sélecteurs de filtre d'attribut, sélecteurs de filtre d'élément enfant et sélecteurs de filtre d'attribut d'objet de formulaire.

Sélecteur de base :

$("#myELement") Sélectionnez l'élément dont la valeur id est égale à myElement. La valeur id ne peut pas être répétée. Il ne peut y avoir qu'une seule valeur id myElement dans le document, vous obtenez donc le seul élément
. $("div") Sélectionnez tous les éléments de balise div et renvoyez un tableau d'éléments div
$(".myClass") Sélectionnez tous les éléments en utilisant le CSS de la classe myClass
$("*") Sélectionnez tous les éléments du document[/code]
Vous pouvez utiliser diverses méthodes de sélection pour la sélection conjointe : par exemple $("#myELement,div,.myclass")

Sélecteur en cascade :

$("form input") Sélectionnez tous les éléments d'entrée dans les éléments de formulaire
$("#main > *") Sélectionnez tous les éléments enfants avec la valeur d'identification main
$("label input") Sélectionnez le nœud d'élément d'entrée suivant de tous les éléments d'étiquette
Le sélecteur testé renvoie tous les éléments de balise d'entrée
qui sont directement suivis d'une balise d'entrée après la balise label. $("#prev ~ div") Sélecteur de frères et sœurs
Ce sélecteur renvoie toutes les balises div

appartenant au même élément parent de l'élément tag avec l'identifiant prev

Sélecteur de filtre de base :

$("tr:first") Sélectionnez le premier
de tous les éléments tr $("tr:last") Sélectionnez le dernier
de tous les éléments tr $("input:not(:checked) span")
Filtrer : tous les éléments d'entrée du sélecteur coché
$ ("TR: EVEN") Sélectionnez l'élément personnel 0, 2, 4 ... ... de tous les éléments TR (Remarque : étant donné que les multiples éléments sélectionnés constituent le tableau lorsqu'ils le choisissent, le numéro de série commence donc à partir de 0) $("td:eq(2)") Sélectionnez l'élément td avec le numéro de série 2 parmi tous les éléments td
$("td:gt(4)") Sélectionnez tous les éléments td avec des numéros de séquence supérieurs à 4
$ ("TD: LL (4)") Sélectionnez tous les éléments TD avec un numéro de série inférieur à 4 dans l'élément TD
$(":en-tête")
$("div:animé")

Sélecteur de filtre de contenu :

$("div:contains('John')") Sélectionne tous les éléments contenant le texte John dans les divs

$("td:empty") Sélectionne un tableau de tous les éléments td vides (sans compter les nœuds de texte)
$("div:has(p)") Sélectionnez tous les éléments div contenant des balises p
$("td:parent") Sélectionnez tous les tableaux d'éléments avec td comme nœud parent

Sélecteur de filtre visuel :

$("div:hidden") Sélectionnez tous les éléments div masqués

$("div:visible") Sélectionnez tous les éléments div visibles

Sélecteur de filtre d'attribut :

$("div[id]") Sélectionnez tous les éléments div contenant l'attribut id
$("input[name='newsletter']") Sélectionnez tous les éléments d'entrée dont l'attribut name est égal à 'newsletter'
$("input[name!='newsletter']") Sélectionnez tous les éléments d'entrée dont l'attribut name n'est pas égal à 'newsletter'
$("input[name^='news']") Sélectionnez tous les éléments d'entrée dont l'attribut name commence par 'news'
$("input[name$='news']") Sélectionnez tous les éléments d'entrée dont l'attribut name se termine par 'news'
$("input[name*='man']") Sélectionnez tous les éléments d'entrée dont l'attribut name contient 'news'
$("input[id][name$='man']") Vous pouvez utiliser plusieurs attributs pour une sélection conjointe. Ce sélecteur récupère tous les éléments qui contiennent l'attribut id et l'attribut se termine par man

.

Sélecteur de filtre d'élément enfant :

$("ul li:nth-child(2)"),$("ul li:nth-child(impair)"),$("ul li:nth-child(3n 1)")
$("div span:first-child") Renvoie un tableau des premiers nœuds enfants de tous les éléments div
$("div span:last-child") Renvoie le tableau du dernier nœud de tous les éléments div
$("div button:only-child") Renvoie un tableau de tous les nœuds enfants qui n'ont qu'un seul nœud enfant dans tous les divs

Sélecteur d'élément de formulaire :

$(":input") Sélectionnez tous les éléments de saisie du formulaire, y compris l'entrée, la zone de texte, la sélection et le bouton
$(":text") Sélectionnez tous les éléments de saisie de texte
$(":password") Sélectionnez tous les éléments de saisie du mot de passe
$(":radio") Sélectionnez tous les éléments d'entrée radio
$(":checkbox") Sélectionnez tous les éléments de saisie de la case à cocher
$(":submit") Sélectionnez tous les éléments d'entrée soumis
$(":image") Sélectionnez tous les éléments d'entrée d'image
$(":reset") Sélectionnez tous les éléments d'entrée réinitialisés
$(":button") Sélectionnez tous les éléments de saisie du bouton
$(":file") Sélectionnez tous les éléments d'entrée du fichier
$(":hidden") Sélectionnez tous les éléments de saisie ou champs masqués du formulaire qui sont de type caché

Sélecteur de filtre d'élément de formulaire :

$(":enabled") Sélectionnez tous les éléments de formulaire utilisables
$(":disabled") Sélectionnez tous les éléments de formulaire inutilisables
$(":checked") Sélectionnez tous les éléments du formulaire cochés
$("select option:selected") Sélectionne les éléments sélectionnés parmi tous les éléments enfants sélectionnés