Decouvrez JQuery, amusons-nous avec les selecteurs [2/7]

Série de tutoriels sur JQuery que je continue ici. L’idée est de commencer de zéro (les premiers tutoriels ne sont donc pas adaptés aux connaisseurs de JQuery). Je vais essayer de faire connaître un peu mieux cette librairie aux non-initiés !

J’ai découpé cette série en 7 épisodes, la difficulté devrait aller crescendo !

Retrouve le premier tutorial : installation et Hello World !

——————-

Pour le deuxième tutorial de la série « découvrez JQuery », je vais parler des sélecteurs disponibles dans JQuery. En effet pour faire des animations de la mort qui tue, il faut pouvoir sélectionner et pointer les bons éléments.

tuto-jquery-2/7

Et c’est déjà que l’on peut voir la puissance de JQuery, plein de type de sélecteurs différents existent. Comme tu as pu le voir avec le premier tutorial JQuery, les sélecteurs ressemble au premier abord à des sélecteurs CSS.

Par exemple, pour sélectionner un lien possédant un id (et pour détecter le click sur ce lien) il suffit de faire :

1
2
3
$("#idDuLien").click(function() {
       // code à exécuter au click sur le lien ayant pour id "idDuLien" ( <a href="url-du-lien.html" id="idDuLien">Lien</a> )
});

Ensuite avec du contenu dynamique (généré, par exemple, en PHP) on n’a pas forcément des id partout. Les sélecteurs marchent également avec les classes (il suffit de remplacer le # par un .). Pour les exemples qui suivent, on va se mettre dans le cas d’une liste d’éléments ayant tous la même classe.

1
2
3
4
5
6
7
8
9
10
11
12
<div class="bloc">
     Honoratis nullum adhibens modum nec licentia licentia disseminata adhibens modum iam vexabat iam honoratis vexabat.
</div>
 
<div class="bloc">
     Nosmet amicitia amicum erga amicis termini se De termini tanti sunt fiat erga quanti amicis ipse in se ut pariter.
</div>
 
<div class="bloc">
     Suspicionum blanditiae simulantium ubi suspicionum exclamabant salute asperitati amplitudo eius vocibus dicebatur vel proximorum amplitudo imperii statum 
     proximorum statum asperitati si statum exclamabant cruentae ubi laesa enim et dolere laesa.
</div>

Pour le premier cas, on ne veut sélectionner que le premier élément, pour cela pas besoin de se prendre la tête, il suffit de faire son sélecteur sur la classe comme d’habitude et ajouter « :first », comme ceci :

1
2
3
$("div.bloc:first").mouseover(function() {
       // code à exécuter au survol du premier bloc ayant pour class "bloc"
});

Il existe plusieurs sélecteurs de ce type, voici quelques exemples :

  • :first – pour sélectionner le premier élément.
  • :last – pour sélectionner le dernier élément.
  • :nth-child(5) : pour sélection le 5ème élément (bien entendu tu peux mettre le nombre que tu souhaites !).
  • :even – pour sélectionner les éléments pairs à partir de zéro. C’est-à-dire le 0ème, le 2ème, le 4ème… Idéal pour coloriser une ligne sur deux d’un tableau.
  • : odd – pour sélectionner les éléments impairs.
  • :visible – pour sélectionner les éléments visibles qui ne sont pas en « display:none », en « opacity:0 » ou en « visibility:hidden ».
  • :hidden – pour sélectionner les éléments non-visibles.
  • :contains(texte) – pour sélectionner les éléments qui contiennent le texte passé en paramètre (attention cette fonction peut être gourmande en ressource).
  • :checked – pour sélectionner seulement les élément coché (pour les checkbox)

Déjà avec ces différents sélecteurs, il y a de quoi s’amuser ! Après on peut également préciser le sélecteur en fonction de la valeur d’un attribut. Cela peut être utile pour sélectionner un input en fonction de son attribut « name » :

1
2
3
$("input[name=prenom]").mouseover(function() {
       // code à exécuter au survol du champ de texte ayant l'attribut name égal à "prenom"
});

On peut  utiliser des jokers pour le test :

  • [name^=val] : la valeur de l’attribut name doit commencer par « val ». Par exemple : « valeur ».
  • [name$=val] : la valeur de l’attribut name doit finir par « val ». Par exemple : « laval ».
  • [name*=val] : la valeur de l’attribut name doit contenir « val ». Par exemple : « avaliser ».

Il existe d’autres façons encore de préciser les sélecteurs avec JQuery. Mais il y a déjà de quoi faire avec ce qu’on vient de voir. Pour plus de détails sur les sélecteurs, je t’invite à aller faire un tour sur la documentation JQuery sur les sélecteurs (en français). Ramassage des copies dans 5 minutes 😉

Pour le prochain tutorial de la série (qui devrait être en fin de semaine ou en début de semaine prochaine), je développerai les différents événements qui existent et on pourra par la suite commencer à faire nos premières animations avec JQuery !

Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , . Vous pouvez le mettre en favoris avec ce permalien.

Une reponse a Découvrez JQuery, amusons-nous avec les sélecteurs [2/7]

  1. Max dit :

    Vraiment tu fais de super tutoriels … je n’ai pas vraiment de connaissance en java et surtout sur jquery , et la tout coule de source merci a toi !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *