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();
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.
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)
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 :
<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é.
$ : 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.
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.
ça me met une erreur de chargement. Alors que si il n'y pas d'id ça fonctionne.