Formation jQuery

Introduction

jQuery est une bibliothèque JavaScript qui retient l’attention en raison de sa syntaxe astucieuse, de ses performances, de sa astucieuse, de ses performances, de sa compacité et de son approche modulaire à compacité et de son approche modulaire à base de plugins.

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 :
1 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() :
1 jQuery(‘#handle’).fadeOut();
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 » :
1 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.
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énementready 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>

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 :

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