Cours jQuery pdf

Formation jQuery, tutoriel & guide de travaux pratiques en pdf.

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 :

1
2
3

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 :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<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 :

1
2
3
4
5

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é.

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.
c