Les sélecteurs

Il nous suffit donc de citer un élément en paramètre de jQuery. Je rappelle que la fonction jQuery se note tout simplement "$", et que les paramètres se passent entre parenthèses.

Exemple :

$("body")

va sélectionner la balise <body> de votre page, mais il ne se passera rien puisqu'on ne lui associe aucune fonction !

En revanche avec :

$("body").hide();

On va pouvoir tout simplement masquer toute la page (inutile donc mais c'est un exemple ;)

La force des sélecteurs, c'est sans aucun doute la possibilité de spécifier en paramètres le chemin vers l'élément.

En effet s'il n'y a qu'un seul élément <body> sur votre page, en revanche il peut y avoir plusieurs balises <a href...>

Imaginons l'exemple suivant :

...

<body>
   <div id="global">
   <a href="#">clic</a>
      <p class="test">
         <a href="#">clic</a>
         <a href="#" class="ikule">clic</a>
      </p>
   </div>
</body>
...

On a donc 2 liens <a href...>. L'un peut être identifié par sa classe, l'autre par son absence de classe, mais les deux liens peuvent être identifiés par leurs positions dans la balise <p> !

Exemple de sélection par chemin :

$("body #global .test a.ikule").click();

va déclencher le clic automatique sur le lien (c'est mal, ne le faites pas ).

Pour ce même lien on peut aussi utiliser tout simplement

$(".ikule").click();

Puisque c'est le seul lien qui porte cette classe.

si on fait :

$("a").hide();

On va donc cacher TOUS les liens de la page... pas cool !

Comment faire, donc, pour ne cacher QUE le PREMIER lien qui se trouve dans la balise <p> mais pas au-dessus ?

Rappelez-vous du tuto sur les fonctions essentielles de jQuery. On va donc utiliser la fonction Eq pour pointer sur ce lien.

Deux possibilités :

$("a").eq(1);
// la fonction eq commence à compter les éléments à partir de 0. Comme nous voulons la 2e position, on utilise le eq(1); 

On peut faire aussi :
$("p a").eq(0);
Ici on va sélectionner le 1e élément <a> se trouvant à l'intérieur de <p>.

Voilà, normalement si vous avez compris tout ça, vous devez pouvoir interagir sur tous les éléments de votre page. Cependant il faut connaitre les possibilités offertes par jQuery...
 

Documentations des sélecteurs jQuery

Considérons que notre élément s'appelle "E" (ce qui n'existe pas !) : E sera donc remplacé par <a> ==> donc $("a");

 *: n'importe quel élément
E: élément de type E
E:nth-child(n): élément E, le n-ième fils de son père
E:first-child: élément E, le premier fils de son père
E:last-child: élément E, le dernier fils de son père
E:only-child: élément E, seul fils de son père
E:empty: élément E qui n'a pas de fils (en incluant les nœuds textes)
E:enabled: élément de type interface (élément de formulaire) E qui n'est pas désactivé
E:disabled: élément de type interface E qui est désactivé
E:checked: élément de type interface E qui est coché (case à cocher, bouton radio...)
E:selected: élément de type interface E qui est sélectionné (options d'un select). Ce sélecteur n'est pas dans la spécification CSS, mais est supporté par jQuery.
E.warning: élément E dont la classe est "warning"
E#myID: élément E dont l'id est "myID". Ne retourne qu'un élément maximum.
E:not(s): élément E qui ne répond pas à la condition du sélecteur. Exemple : E:not(enabled) = E:disabled
E F: élément F descendant d'un élément E.
E > F: élément F fils d'un élément E.
E + F: élément F immédiatement précédé d'un élément E.
E ~ F: élément F précédé d'un élément E.
E,F,G: sélectionne tous les éléments E, F et G.



Les possibilités des sélecteurs

jQuery ne supporte que les sélecteurs qui sélectionnent des éléments DOM, les autres sont ignorés :

E:link
E:visited
E:active
E:hover
E:focus
E:target
E::first-line
E::first-letter
E::selection
E::before
E::after


jQuery ne supporte pas non plus les sélecteurs suivants en raison de leur utilité très limitée :

E:nth-last-child(n)
E:nth-of-type(n)
E:nth-last-of-type(n)
E:first-of-type
E:last-of-type
E:only-of-type
E:lang(fr)
E[foo~="test"]
E[hreflang|="en"]