C'est pour moi une des fonctionnalités les plus puissantes de jQuery : les sélecteurs.
Un sélecteur permet de pointer et d'interagir avec n'importe quel élément de votre code source pour peu qu'il soit existant...
On va pouvoir ainsi modifier autant le contenu d'un <div>, que sa propriété CSS ou encore le masquer ou l'afficher en le combinant avec d'autres fonctions...
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="http://www.jarodxxx.com/index.php?post/2009/01/10/#">clic</a>
<p class="test">
<a href="http://www.jarodxxx.com/index.php?post/2009/01/10/#">clic</a>
<a href="http://www.jarodxxx.com/index.php?post/2009/01/10/#" 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"]
Jeu de briques
Snake
Pacman
Bubble