jQuery Types de sélecteurs

Exemple

Dans jQuery, vous pouvez sélectionner des éléments dans une page en utilisant différentes propriétés de l'élément, notamment:

  • Type
  • Classe
  • ID
  • Possession d'attribut
  • Valeur d'attribut
  • Sélecteur indexé
  • Pseudo-état

Si vous connaissez les sélecteurs CSS, vous remarquerez que les sélecteurs dans jQuery sont les mêmes (à quelques exceptions près).

Prenez le code HTML suivant, par exemple:

<a href="index.html"></a>                  <!-- 1 -->
<a id="second-link"></a>                   <!-- 2 -->
<a class="example"></a>                    <!-- 3 -->
<a class="example" href="about.html"></a>  <!-- 4 -->
<span class="example"></span>              <!-- 5 -->

Sélection par type:

Le sélecteur jQuery suivant sélectionnera tous les éléments <a> , y compris 1, 2, 3 et 4.

$("a")

Sélection par classe

Le sélecteur jQuery suivant sélectionnera tous les éléments de l' example de classe (y compris les éléments non-a), à savoir 3, 4 et 5.

$(".example")

Sélection par ID

Le sélecteur jQuery suivant sélectionnera l'élément avec l'ID donné, qui est 2.

$("#second-link")

Sélection par possession d'attribut

Le sélecteur jQuery suivant sélectionne tous les éléments avec un attribut href défini, y compris 1 et 4.

$("[href]")

Sélection par valeur d'attribut

Le sélecteur jQuery suivant sélectionne tous les éléments pour lesquels l'attribut href existe avec la valeur index.html , qui est juste 1.

$("[href='index.html']")

Sélection par position indexée ( sélecteur indexé )

Le sélecteur jQuery suivant sélectionnera seulement 1, le second <a> ie. le second-link parce que l'index fourni est 1 comme eq(1) (notez que l'index commence à 0 donc le second a été sélectionné ici!).

$("a:eq(1)")

Sélection avec exclusion indexée

Pour exclure un élément en utilisant son index :not(:eq())

Ce qui suit sélectionne les éléments <a> , sauf celui avec l' example classe, qui est 1

$("a").not(":eq(0)")

Sélection avec exclusion

Pour exclure un élément d'une sélection, utilisez :not()

Ce qui suit sélectionne les éléments <a> , sauf ceux avec l’ example classe, qui sont 1 et 2.

$("a:not(.example)")

Sélection par pseudo-état

Vous pouvez également sélectionner dans jQuery en utilisant des pseudo-états, y compris :first-child :last-child :first-of-type :last-of-type , etc.

Le sélecteur jQuery suivant sélectionne uniquement le premier élément <a> : numéro 1.

$("a:first-of-type")

Combiner les sélecteurs jQuery

Vous pouvez également augmenter votre spécificité en combinant plusieurs sélecteurs jQuery; vous pouvez en combiner n'importe quel nombre ou les combiner tous. Vous pouvez également sélectionner plusieurs classes, attributs et états en même temps.

$("a.class1.class2.class3#someID[attr1][attr2='something'][attr3='something']:first-of-type:first-child")

Cela sélectionnerait un élément <a> qui:

  • A les classes suivantes: class1, class2, and class3
  • A l'identifiant suivant: someID
  • A l'attribut suivant: attr1
  • A les attributs et valeurs suivants: attr2 avec valeur something , attr3 avec valeur something
  • A les états suivants: first-child et first-of-type

Vous pouvez également séparer différents sélecteurs par une virgule:

$("a, .class1, #someID")  

Cela sélectionnerait:

  • Tous les <a> éléments
  • Tous les éléments qui ont la classe class1
  • Un élément avec l'id #someID

Sélection des enfants et des frères et sœurs

Les sélecteurs jQuery sont généralement conformes aux mêmes conventions que CSS, ce qui vous permet de sélectionner les enfants et les frères et sœurs de la même manière.

  • Pour sélectionner un enfant non direct, utilisez un espace
  • Pour sélectionner un enfant direct, utilisez un >
  • Pour sélectionner un frère adjacent après le premier, utilisez un +
  • Pour sélectionner un frère non adjacent après le premier, utilisez un ~

Sélection de caractères génériques

Il peut y avoir des cas où nous voulons sélectionner tous les éléments mais il n’ya pas de propriété commune à sélectionner (classe, attribut, etc.). Dans ce cas, nous pouvons utiliser le sélecteur * qui sélectionne simplement tous les éléments:

$('#wrapper *')    // Select all elements inside #wrapper element