Le sélecteur jQuery

Le sélecteur jQuery

Tutoriel publié en mai 2011 par Galdon dans la catégorie jQuery

Bien, maintenant que vous êtes au point sur javascript, après avoir lu le chapitre 1, on va entrer dans le vif du sujet et commencer à apprendre jQuery.

La principale fonctionnalité est le sélecteur. Il permet de sélectionner un ou plusieurs éléments du DOM très facilement, beaucoup plus facilement qu'en javascript natif, puisqu'il utilise la même syntaxe que les sélecteurs CSS (grâce au moteur Sizzle, pour ceux que ça intéresse).

Premiers pas avec le sélecteur jQuery

On va prendre par exemple une page simple :

<html>
<head>
<title>Je débute en jQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>

<body>

<div id="header">
	<a id="handle" href="#">Je suis un lien</a><br/>
	<span class="description">La description de cette page qui ne sert à rien</span>
</div>
<div id="content">
	<div class="description">Une autre description</div>
</div>

<script type="text/javascript">
// ... votre code JS ici ...
</script>

</body>
</html>

Pour sélectionner le lien, on peut utiliser son id avec le sélecteur :

jQuery('#handle');

Cette ligne ne fait... rien, en apparence seulement. En fait, cette ligne permet simplement de sélectionner le lien, on va donc pouvoir agir dessus.

Par exemple, nous allons faire disparaitre le lien grâce à la fonction jQuery fadeOut() :

jQuery('#handle').fadeOut();
Tester /ressources/exemple/cours-jquery/ch3_exemple1.html
Exemple 1
Le lien disparait au chargement.

Comme vous pouvez le voir, le lien disparait au moment ou le javascript est exécuté (c'est à dire au chargement de la page).

De la même manière, on pourrait masquer ce même lien avec un sélecteur différent, qui est #header a, et qui signifie "Tous les éléments a (liens hypertexte) contenu dans l'élément portant l'id header" :

jQuery('#header a').fadeOut();

Les événements

Pour le moment, le code JavaScript (fadeOut) est exécuté au chargement de la page.

Heureusement, les possibilités offertes par javascript sont beaucoup plus vastes, puisqu'on peut "capter" (on dit aussi "écouter" ou "bind") une série d'actions à certains événements.

Mais comme on l'a vu au chapitre 1, javascript permet de "capter" (on dit aussi "écouter" ou "bind") des événements, et d'effectuer une série d'action lorsque ces événements sont déclenchés.

On va prendre un exemple concret : le clic sur le lien Je suis un lien est un événement. On pourrait très bien choisir de faire disparaitre la description lorsqu'on clique sur ce lien :

jQuery('#handle').click(function(){
	jQuery('#header .description').fadeOut();
});

À la première ligne, on sélectionne notre lien : #handle, et on affecte une fonction anonyme, qui sera exécutée à chaque fois qu'on va cliquer sur ce lien.

À la seconde ligne, on spécifie l'action effectuée par la fonction anonyme, ici : faire disparaitre (fadeOut) les éléments de classe description contenus dans l'élément qui porte l'id header.

Tester /ressources/exemple/cours-jquery/ch3_exemple2.html
Exemple 2
La description disparait au clic sur le lien.

Click n'est pas le seul événement, il en existe beaucoup d'autres :

  • mouseover : déclenché lorsque le pointeur de la souris survol l'élément
  • keypress : déclenché lorsque l'utilisateur appui sur une touche (très utile pour les champs de formulaire : input, textarea...)
  • change : lorsque la valeur d'un champ de formulaire est modifiée

Le même exemple avec mousehover au lieu de click :

jQuery('#handle').mouseover(function(){
	jQuery('#header .description').fadeOut();
});

La liste de tous les événements ainsi que leur documentation est sur le site officiel de jQuery.

C'est beaucoup plus propre d'utiliser jQuery pour binder des actions à des événements, que d'utiliser les attributs javascript natifs (<a href="#" onclick="alert('hello');">lien</a>), car le code Javascript est totalement séparé du code HTML.

Javascript vient alors comme une surcouche à notre page web, qui l'enrichi par l'ajout de comportements dynamiques et intéractifs.

L'événement DOM Ready

Mais parmi tous ces événements, il y en a un qu'on va utiliser presque tout le temps, c'est l'événement ready de l'objet document :

jQuery(document).ready(function($){
	// ... votre code ici ...
});

Cet événement ne se déclenche qu'une seule fois pour chaque page, lorsque le navigateur a fini de transformer le code HTML en DOM (cf chapitre 1) on dit alors que le DOM est chargé.

Pour ceux qui connaissent déjà Javascript, c'est un peu l'équivalent de window.onload, à quelques différences près :

  • window.onload est déclenché plus tard que jQuery(document).ready, puisqu'il intervient après que le DOM soit chargé ET les ressources également (images, feuilles CSS, iframes...)
  • jQuery(document).ready est plus pratique car il n'écrase pas les instructions précédemment bindées (contrairement à window.onload)
C'est quoi l'intérêt ?

Pour comprendre, on va tester cette page web :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Je débute en jQuery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
</head>

<body>

<script type="text/javascript">
jQuery('#header .description').fadeOut();
</script>

<div id="header">
	<a id="handle" href="#">Je suis un lien</a><br/>
	<span class="description">La description de cette page qui ne sert à rien</span>
</div>
<div id="content">
	<div class="description">Une autre description</div>
</div>

</body>
</html>
Tester /ressources/exemple/cours-jquery/ch3_exemple3.html
Exemple 3
Normalement, la description devrait disparaitre au chargement...

Normalement, la description devrait disparaitre au chargement de la page, comme à l'exemple 1.

Sauf que cette fois-ci, le code JavaScript est écrit avant le code HTML qui crée l'élément description...

Et comme le navigateur exécute le JavaScript immédiatement (en même temps qu'il le lit), au moment où le Javascript est exécuté l'élément description n'existe pas encore !

Pour régler ce problème, soit on place toujours le javascript après les éléments sur lesquels il agit, soit on encapsule notre code dans une fonction anonyme bindée à l'événement jQuery(document).ready :

<script type="text/javascript">
jQuery(document).ready(function($){
	$('#header .description').fadeOut();
});
</script>

Et maintenant ça marche !

Pourquoi ?
Tout simplement parce que le code qui masque la description est exécuté une fois que le chargement du DOM est terminé.

Tester /ressources/exemple/cours-jquery/ch3_exemple3bis.html
Exemple 3 bis
Cette fois-ci ça fonctionne, grâce à jQuery(document).ready

$ : le sélecteur raccourci

Encore une petite précision : dans mon extrait de code ci-dessus, vous voyez que j'ai ajouté un paramètre $ pour ma fonction anonyme, et que j'ai ensuite utilisé $() à la place de jQuery().

En fait, $() est un alias de la fonction jQuery() (un autre nom pour la même fonction), on l'utilise plus souvent que jQuery(), tout simplement parce que c'est plus court à écrire !

Le seul problème est que d'autres framework javascript (Mootools nottament) utilisent également $ comme raccourci, du coup si vous utilisez plusieurs frameworks sur la même page, il y aura des conflits.

Heureusement, jQuery propose un mode noConflict(). Dans ce mode, le raccourci $ n'est pas créé pour éviter les problèmes. Le mode noConflict est par exemple activé par défaut dans Wordpress, donc $ ne marche pas et il faut donc se rabattre sur jQuery() à la place, la loose -_-'.

L'astuce que j'ai utilisée me permet d'utiliser $ comme raccourci SEULEMENT à l'intérieur de ma fonction anonyme. Comme ça, même sous Wordpress où le mode noConflict est activé, je pourrais utiliser $ à l'intérieur de mon jQuery(document).ready.

Et il n'y a aucun risque de conflit puisque le tout est encapsulé dans jQuery(), elle est pas belle la vie !

Allez donc jeter un oeil sur cette page : dessiner un aigle royal avec photoshop.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.

13 commentaires :
Seuls les 10 derniers commentaires sont affichés.
Cliquez ici pour afficher tous les commentaires
commentaire n°2242 par anonyme
anonyme mercredi 23 mai 2012, 14:53
Dès que je met un id dans un lien genre ...
ça me met une erreur de chargement. Alors que si il n'y pas d'id ça fonctionne.
commentaire n°2257 par shaomao
shaomao mardi 12 juin 2012, 15:04
Merci pour le tutoriel
commentaire n°2329 par jean
jean mardi 28 août 2012, 14:59
je n'ai rien compris, moi je veux un script qui à partir des bouton qui sont en lien internes affiche le contenue de ces liens au click de la souris
commentaire n°2387 par rachidgrayir
rachidgrayir mercredi 17 octobre 2012, 16:50
merci beaucoup j'ai tous compris :)
commentaire n°2982 par Pomme
Pomme vendredi 23 janvier 2015, 11:13
Etant débutant je trouve que c'est super bien expliqué, beau travail !
commentaire n°7690 par Nabgrergy@rvmail.xyz
Nabgrergy@rvmail.xyz samedi 11 septembre 2021, 07:51
<a href=https://buystromectolon.com/>;Stromectol</a>
commentaire n°7730 par annodcami@svmail.xyz
annodcami@svmail.xyz lundi 13 septembre 2021, 06:45
https://buystromectolon.com/ - Stromectol
commentaire n°8080 par assulpabe@rqmail.xyz
assulpabe@rqmail.xyz lundi 20 septembre 2021, 17:29
<a href=https://buyplaquenilcv.com/>;where can i buy plaquenil without a doctor prescription</a>
commentaire n°8243 par Reacick@oourmail.xyz
Reacick@oourmail.xyz jeudi 23 septembre 2021, 11:54
https://buyplaquenilcv.com/ - hydroxychloroquine sulfate 200 mg
commentaire n°8308 par chishar@sqmail.xyz
chishar@sqmail.xyz vendredi 24 septembre 2021, 10:59
<a href=https://buypriligyhop.com/>;walmart priligy</a>
facultatif
Facebook Twitter RSS Email
Forum Excel
Venez découvrir le nouveau forum excel question/réponse à la stackoverflow.com !
Forum Excel
hit parade n'en a rien a foutre du W3C Positionnement et Statistiques Gratuites Vincent Paré