Jquery

Simplifiez vos
dveloppements
JavaScript avec
jQuery
Par MichelMartin
www.openclassrooms.com
Licence Creative Commons 6 2.0

Dernire mise jour le 7/01/2013
2/266
Sommaire
Sommaire ...........................................................................................................................................
Lire aussi ............................................................................................................................................
Simplifiez vos dveloppements JavaScript avec jQuery ....................................................................
Partie 1 : Introduction jQuery ...........................................................................................................
2
3
5
6
Avant de commencer ........................................................................................................................................................ 6

Historique du Web : de HTML jQuery ....................................................................................................................................................................... 6
Qu'est-ce que jQuery ? ................................................................................................................................................................................................ 7
Ce qui rend jQuery si puissant et universel ................................................................................................................................................................. 8
Installer jQuery .......................................................................................................................................................................................................... 10
Tlchargement de jQuery sur votre ordinateur ........................................................................................................................................................ 10
Faire rfrence jQuery en ligne .............................................................................................................................................................................. 13
Premiers pas ................................................................................................................................................................... 14

Le vocabulaire connatre ........................................................................................................................................................................................ 15
Le squelette HTML typique ........................................................................................................................................................................................ 17
Squelette HTML en phase de dveloppement .......................................................................................................................................................... 17
Squelette HTML en phase de production .................................................................................................................................................................. 18
Optimisation du code ................................................................................................................................................................................................ 19
Attendre la disponibilit du DOM ............................................................................................................................................................................... 19
Premier script : Hello world ................................................................................................................................................................................. 19
Partie 2 : Les bases de jQuery .......................................................................................................... 22

Slection d'lments ....................................................................................................................................................... 22
Fonctionnement de base de jQuery ..........................................................................................................................................................................
Slection d'lments .................................................................................................................................................................................................
Quelle est la nature de l'objet retourn ? ..................................................................................................................................................................
Appliquer une mthode la slection .......................................................................................................................................................................
Notions indispensables .............................................................................................................................................................................................
Fonctions de rappel ...................................................................................................................................................................................................
Chanage de mthodes .............................................................................................................................................................................................
22
22
24
24
24
24
25
Plus loin dans la slection d'lments ............................................................................................................................ 26

Slecteurs d'attributs ................................................................................................................................................................................................. 26
Slecteurs hirarchiques ........................................................................................................................................................................................... 28
Pseudo-slecteurs d'lments slectionns ............................................................................................................................................................. 29
Slecteurs d'lments particuliers ............................................................................................................................................................................. 30
Pseudo-slecteurs spcifiques aux formulaires ........................................................................................................................................................ 31
Slecteurs utiliss dans les tableaux ........................................................................................................................................................................ 33
Parcourir les lments slectionns ......................................................................................................................................................................... 34
Conversion jQuery/DOM ........................................................................................................................................................................................... 36
Conversion d'un lment du DOM en un objet jQuery .............................................................................................................................................. 36
Conversion d'une variable JavaScript en un objet jQuery ......................................................................................................................................... 36
Conversion d'un objet jQuery en un lment du DOM .............................................................................................................................................. 36
Modifier le contenu d'un lment .................................................................................................................................... 38

Getters et setters ....................................................................................................................................................................................................... 38
Ce que renvoie un getter ........................................................................................................................................................................................... 38
Ce qui peut tre pass un setter ............................................................................................................................................................................ 39
Accder aux attributs HTML et aux proprits CSS .................................................................................................................................................. 40
Accder aux attributs des balises HTML ................................................................................................................................................................... 40
Accder aux proprits CSS ..................................................................................................................................................................................... 40
Travailler avec l'attribut class .................................................................................................................................................................................... 41
Ajouter et supprimer des classes .............................................................................................................................................................................. 41
Tester l'existence de classes ..................................................................................................................................................................................... 44
Travailler avec les formulaires ................................................................................................................................................................................... 45
Travailler avec les valeurs stockes dans des lments .......................................................................................................................................... 46
Position et taille des lments ................................................................................................................................................................................... 48
Connatre la position des lments sur la page ........................................................................................................................................................ 51
Modifier la position des lments .............................................................................................................................................................................. 53
Connatre les dimensions des lments ................................................................................................................................................................... 53
Associer des donnes aux balises ............................................................................................................................................................................ 57
Insrer et remplacer des lments dans le DOM ........................................................................................................... 60

Insrer du contenu ....................................................................................................................................................................................................
Remplacer des lments ..........................................................................................................................................................................................
Insrer des lments .................................................................................................................................................................................................
Dplacer du contenu .................................................................................................................................................................................................
Dupliquer des lments ............................................................................................................................................................................................
Entourer des lments ..............................................................................................................................................................................................
Supprimer des lments ...........................................................................................................................................................................................
61
63
64
67
69
73
77
TP : Questionnaire interactif en jQuery ........................................................................................................................... 79

Instructions pour raliser le TP ..................................................................................................................................................................................
Correction ..................................................................................................................................................................................................................
Dissimuler les rponses aux questions .....................................................................................................................................................................
Mettre en forme les lments affichs sur l'cran .....................................................................................................................................................
Textes et images en affichage flottant .......................................................................................................................................................................
Ragir au survol du lien Tester les rponses ......................................................................................................................................................
Le code complet ........................................................................................................................................................................................................
79
82
82
82
82
84
87
Sommaire
3/266
Partie 3 : Aller plus loin avec jQuery ................................................................................................. 89

Les bases de la gestion vnementielle ......................................................................................................................... 90
La souris .................................................................................................................................................................................................................... 90
Avant de commencer ................................................................................................................................................................................................ 90
Clics et positions de la souris .................................................................................................................................................................................... 90
La mthode scroll ...................................................................................................................................................................................................... 93
which et type ............................................................................................................................................................................................................. 94
Le clavier ................................................................................................................................................................................................................... 95
Les lments ............................................................................................................................................................................................................. 99
focus() et blur() .......................................................................................................................................................................................................... 99
focusin() et focusout() .............................................................................................................................................................................................. 100
resize() .................................................................................................................................................................................................................... 102
change() .................................................................................................................................................................................................................. 102
Les pages ................................................................................................................................................................................................................ 104
Plus loin dans la gestion vnementielle ...................................................................................................................... 106

vnements personnaliss ..................................................................................................................................................................................... 106
Une mthode pour grer plusieurs vnements ..................................................................................................................................................... 106
Plusieurs mthodes en une seule instruction .......................................................................................................................................................... 107
Dsactiver une mthode de gestion vnementielle .............................................................................................................................................. 107
tiqueter plusieurs mthodes vnementielles ....................................................................................................................................................... 108
Gestion vnementielle unique ............................................................................................................................................................................... 110
Dclenchement d'vnements ................................................................................................................................................................................ 111
Crer des vnements personnaliss ..................................................................................................................................................................... 113
Dlgation d'vnements ........................................................................................................................................................................................ 116
Animations et effets ....................................................................................................................................................... 120

Apparition et disparition ...........................................................................................................................................................................................
Apparition/disparition avec une animation ..............................................................................................................................................................
Animation avec un modle de progression .............................................................................................................................................................
Apparition/disparition en cascade ...........................................................................................................................................................................
Fondu enchan ......................................................................................................................................................................................................
Apparition/disparition ...............................................................................................................................................................................................
Modification de l'opacit ..........................................................................................................................................................................................
Un diaporama en deux instructions .........................................................................................................................................................................
Aller plus loin ...........................................................................................................................................................................................................
Dplier/replier des lments ...................................................................................................................................................................................
Dsactiver les animations .......................................................................................................................................................................................
Dfinir un dlai avant une animation .......................................................................................................................................................................
Dfinir une animation personnalise .......................................................................................................................................................................
120
120
121
121
122
122
123
124
125
125
125
126
126
Files d'attente et timer ................................................................................................................................................... 128

Les files d'attente jQuery ......................................................................................................................................................................................... 129
tat de la file d'attente ............................................................................................................................................................................................. 131
Manipuler la file d'attente ........................................................................................................................................................................................ 132
Rpter une animation sans fin .............................................................................................................................................................................. 134
Arrter et reprendre une animation ......................................................................................................................................................................... 135
Mettre en place un timer .......................................................................................................................................................................................... 137
Une horloge lmentaire ......................................................................................................................................................................................... 138
Une animation sans fin ............................................................................................................................................................................................ 139
Textes et images ........................................................................................................................................................... 141

Les chanes de caractres ......................................................................................................................................................................................
Supprimer des espaces dans une chane ...............................................................................................................................................................
Position d'un caractre dans une chane ................................................................................................................................................................
Recherches et remplacements de textes ................................................................................................................................................................
Les images ..............................................................................................................................................................................................................
Ragir au survol d'une image ..................................................................................................................................................................................
Galerie d'images .....................................................................................................................................................................................................
Diaporama automatique ..........................................................................................................................................................................................
141
141
142
143
144
144
146
148
Formulaires et tableaux ................................................................................................................................................. 151

Les formulaires ........................................................................................................................................................................................................
Donner le focus un lment .................................................................................................................................................................................
Quel lment a le focus ? .......................................................................................................................................................................................
Mise en vidence de l'lment qui a le focus ..........................................................................................................................................................
Vider un formulaire ..................................................................................................................................................................................................
Validation de formulaires .........................................................................................................................................................................................
Les tableaux ............................................................................................................................................................................................................
La fonction $.grep() .................................................................................................................................................................................................
La fonction $.map() .................................................................................................................................................................................................
La fonction $.inArray() .............................................................................................................................................................................................
La fonction $.merge() ..............................................................................................................................................................................................
151
151
151
152
153
155
155
155
157
159
159
TP : Mise en forme d'une page Web ............................................................................................................................. 161

Instructions pour raliser le TP ................................................................................................................................................................................
Correction ................................................................................................................................................................................................................
Couleur de fond .......................................................................................................................................................................................................
Texte ........................................................................................................................................................................................................................
Police ......................................................................................................................................................................................................................
Police de la premire phrase ..................................................................................................................................................................................
Premier caractre des phrases ...............................................................................................................................................................................
Mot en rouge ...........................................................................................................................................................................................................
Bordure des images ................................................................................................................................................................................................
Remise zro du formulaire ...................................................................................................................................................................................
Le code jQuery complet ..........................................................................................................................................................................................
161
164
164
165
166
167
168
171
172
173
173
Un jeu en jQuery ........................................................................................................................................................... 174
Lire aussi
4/266
Le document de base .............................................................................................................................................................................................. 175

Grer les dplacements .......................................................................................................................................................................................... 178
Crer un dcor en mouvement ............................................................................................................................................................................... 178
Afficher et dplacer la voiture rouge ........................................................................................................................................................................ 179
Dplacer la voiture jaune ........................................................................................................................................................................................ 181
Dtecter les collisions ............................................................................................................................................................................................. 181
Ajouter des sons ..................................................................................................................................................................................................... 183
Le code complet ...................................................................................................................................................................................................... 184
TP : Un jeu de collecte spatiale ..................................................................................................................................... 186

Instructions pour raliser le TP ................................................................................................................................................................................
Correction ................................................................................................................................................................................................................
Structure HTML et mise en forme CSS ...................................................................................................................................................................
Dplacement du vaisseau .......................................................................................................................................................................................
Affichage des lments #bon et #mauvais .............................................................................................................................................................
Gestion des collisions .............................................................................................................................................................................................
186
188
188
189
191
192
Partie 4 : jQuery et AJAX ................................................................................................................ 198

Premiers pas avec AJAX ............................................................................................................................................... 199
Qu'est-ce qu'AJAX ? ............................................................................................................................................................................................... 199
Serveur Web local et serveur Web distant .............................................................................................................................................................. 200
Charger un fichier .................................................................................................................................................................................................... 202
Charger une partie d'un fichier ................................................................................................................................................................................ 205
Passer des paramtres un programme PHP ....................................................................................................................................................... 206
Requtes GET et POST .......................................................................................................................................................................................... 208
La fonction $.get() ................................................................................................................................................................................................... 208
La fonction $.post() .................................................................................................................................................................................................. 210
Faire patienter l'utilisateur avec une animation ....................................................................................................................................................... 210
Plus loin avec AJAX ....................................................................................................................................................... 211

Charger un script et des donnes JSON ................................................................................................................................................................. 212
Charger un script ..................................................................................................................................................................................................... 212
Charger des donnes codes en JSON .................................................................................................................................................................. 212
La fonction $.ajax() .................................................................................................................................................................................................. 214
vnements associs une requte AJAX ............................................................................................................................................................ 216
TP : Un chat en jQuery .................................................................................................................................................. 221

Instructions pour raliser le TP ................................................................................................................................................................................ 221
Correction ................................................................................................................................................................................................................ 222
criture du code HTML et CSS ............................................................................................................................................................................... 222
criture du code jQuery ........................................................................................................................................................................................... 223
Partie 5 : Les plugins jQuery ........................................................................................................... 225

Trouver et utiliser un plugin ........................................................................................................................................... 226
Trouver et utiliser un plugin jQuery ......................................................................................................................................................................... 226
Trouver un plugin .................................................................................................................................................................................................... 226
Utiliser un plugin ...................................................................................................................................................................................................... 226
Quelques exemples de plugins ............................................................................................................................................................................... 229
Parseur RSS/Atom .................................................................................................................................................................................................. 229
Validation de formulaires ......................................................................................................................................................................................... 230
Un menu droulant un ou plusieurs niveaux ........................................................................................................................................................ 231
Cartographie ............................................................................................................................................................................................................ 232
jQuery UI ....................................................................................................................................................................... 236

De quoi est capable jQuery UI ? ............................................................................................................................................................................. 236
Dplacer et redimensionner des lments .............................................................................................................................................................. 236
Dplacement ........................................................................................................................................................................................................... 236
Redimensionnement ............................................................................................................................................................................................... 237
Un accordon .......................................................................................................................................................................................................... 238
Slection de date .................................................................................................................................................................................................... 239
Des botes de dialogue ............................................................................................................................................................................................ 240
Afficher des onglets ................................................................................................................................................................................................. 243
Animation : une impression de dj-vu ................................................................................................................................................................... 244
Animation de couleurs ............................................................................................................................................................................................. 246
Modles de progression .......................................................................................................................................................................................... 247
Crer un plugin .............................................................................................................................................................. 250

Le squelette d'un plugin ..........................................................................................................................................................................................
Conflits entre plusieurs bibliothques JavaScript ....................................................................................................................................................
Continuer utiliser l'alias $ dans un plugin jQuery ...........................................................................................................................................
Parcourir les lments issus du slecteur ...............................................................................................................................................................
Ne rompez pas la chane ........................................................................................................................................................................................
Un premier plugin ....................................................................................................................................................................................................
Un plugin plus ambitieux .........................................................................................................................................................................................
250
250
251
251
252
253
254
Partie 6 : Annexe ............................................................................................................................. 258

Dboguer le code jQuery .............................................................................................................................................. 258
Dboguer avec la fonction alert() ............................................................................................................................................................................ 258
Try et catch .............................................................................................................................................................................................................. 258
Capturer toutes les erreurs ...................................................................................................................................................................................... 259
Dboguer avec Firebug ........................................................................................................................................................................................... 260
Tlcharger et installer Firebug ............................................................................................................................................................................... 260
Utiliser la console .................................................................................................................................................................................................... 262
Dfinir un point d'arrt ............................................................................................................................................................................................. 263
Valeur des variables et proprits non listes ......................................................................................................................................................... 263
Point d'arrt conditionnel ......................................................................................................................................................................................... 264
Quelques raccourcis clavier connatre ................................................................................................................................................................. 265
Lire aussi
5/266
Simplifiez vos dveloppements JavaScript avec jQuery

Par MichelMartin
Mise jour : 07/01/2013
Difficult : Intermdiaire
Si vous avez dj programm en JavaScript, vous savez que ce langage est puissant, mais aussi verbeux et souvent assez
complexe mettre en uvre. Si vous voulez accder toute la puissance de JavaScript en utilisant des instructions simples,
logiques, faciles comprendre et maintenir, jQuery est vraiment fait pour vous !
Avec ce cours, je vous propose de dcouvrir les multiples facettes du framework jQuery. De la slection d'lments la
manipulation du DOM, en passant par l'animation, les requtes AJAX, l'utilisation et la cration de plugins, la cration de jeux et
bien d'autres choses encore !
N'ayez crainte, votre apprentissage se fera en douceur et de trs nombreux exemples de code documents viendront consolider
vos connaissances. Au fil des pages, votre approche deviendra de plus en plus naturelle et les nouveaux chapitres ne feront
qu'apporter une pierre de plus l'difice, sans en branler les fondations. Si vous le souhaitez, vous pouvez amliorer vos
connaissances en JavaScript en consultant ce cours.
Si vous lisez ces lignes, c'est parce que vous avez dcid d'aller plus loin dans vos dveloppements Web. En portant votre choix
sur jQuery, je peux vous certifier que vous avez fait le bon choix. Si aujourd'hui de plus en plus d'entreprises l'utilisent pour leur
site Web, ce n'est pas par hasard. Tournez vite les pages et devenez, vous aussi, un inconditionnel de jQuery. Et surtout,
amusez-vous bien !
Le logo de jQuery
Simplifiez vos dveloppements JavaScript avec jQuery
6/266
Partie 1 : Introduction jQuery
Avant de commencer
Si vous vous intressez un tant soit peu la cration de sites Web, vous avez forcment entendu parler de jQuery et vous
connaissez certainement plusieurs personnes qui vantent ses mrites. Mais voil, vous pensez que seuls les experts peuvent en
tirer quelque chose, et vous avez peur de ne pas avoir le niveau ncessaire ! Je vous rassure tout de suite : jQuery est loin d'tre
inabordable, surtout si vous avez quelques notions (mme sommaires) de HTML, CSS et JavaScript.
Mais au fait, qu'est-ce que jQuery ? Comment est-il apparu ? Comment vous le procurer ? De quel environnement matriel et
logiciel avez-vous besoin pour dvelopper en jQuery ? Autant de questions qui trouveront une rponse dans ce premier
chapitre.
Historique du Web : de HTML jQuery

Certains d'entre vous ont certainement connu le monde de la micro-informatique avant l'avnement d'Internet. cette poque,
les ordinateurs voluaient en solo et les ouvrages papier taient lgion. Aujourd'hui, nous vivons dans un monde interconnect,
o l'information ne se trouve plus dans l'ordinateur, la tablette ou le tlphone, mais sur un vaste rseau plantaire dont la
capacit de stockage a de quoi donner le vertige ! Tout ce petit monde communique en utilisant des langages informatiques
spcifiques, tels que HTML, CSS, JavaScript, PHP, MySQL, etc.
Pour bien comprendre le fonctionnement de jQuery, il est important d'avoir l'esprit la technique client-serveur, utilise pour
changer des informations sur le Web. Le terme client dsigne tout ordinateur, tablette, tlphone ou autre priphrique qui
consomme des donnes. Inversement, le terme serveur dsigne tout ordinateur qui dlivre des donnes. Ainsi, lorsque vous
tapez une adresse dans votre navigateur, vous utilisez un client Web. Ce client envoie une demande d'informations au serveur
correspondant. Les informations sont recherches sur le serveur, achemines jusqu'au client et finalement affiches dans le
navigateur, comme le montre la figure suivante.
Fonctionnement entre un serveur
et des clients
Mais pourquoi est-ce que je vous parle de cela, me direz-vous ? Eh bien, parce qu'il est important de comprendre que le code
jQuery s'excute ct client. Dans la plupart des cas, il n'y aura aucun change avec un serveur et donc quasiment aucun dlai
entre le dbut et la fin de l'excution du code jQuery. Ce que je viens de dire est prendre avec des pincettes. En effet, un code
jQuery mal crit et/ou non optimis peut ncessiter de nombreuses secondes (voire minutes !) pour s'excuter. Ce qu'il faut
retenir de cela, c'est qu'avec jQuery vous n'tes pas soumis la disponibilit d'un quelconque serveur et qu'en gnral les temps
d'excution sont vraiment trs courts.
Vous savez maintenant quoi correspond le modle client-serveur. Je peux donc poursuivre en parlant de HTML, JavaScript,
AJAX et jQuery :
7/266
HTML est le langage de base du Web. Apparu en aot 1991, il utilise un ensemble de balises pour dcrire les donnes
afficher.
CSS est un langage consacr la mise en forme des contenus HTML. Apparu vers le milieu des annes 90, c'est
aujourd'hui un complment essentiel de tout site Web qui se respecte. Il assure l'uniformit des pages et facilite leur
maintenance.
JavaScript a t dvelopp par Netscape en 1995. Il a vu le jour sous le nom LiveScript et a t utilis pour la premire
fois dans Netscape 1.0. Ce n'est que lors de la sortie de Netscape 2.0 que le nom JavaScript est apparu. Excut ct
client, il ajoute de l'interactivit aux pages Web.
AJAX est galement apparu en 1995. Son utilisation est trs intressante, car elle permet de mettre jour une partie (et
une partie seulement) d'une page Web en demandant les donnes ncessaires un serveur. Les changes client/serveur
sont donc limits et les pages Web sont affiches plus rapidement, pour le plus grand plaisir des internautes.
jQuery est une bibliothque (c'est--dire un ensemble de codes prts l'emploi) conue pour simplifier l'criture de codes
JavaScript et AJAX. Cre en 2006 par John Resig, cette bibliothque est la plus clbre et la plus utilise ce jour.
J'espre que je ne vous ai pas trop ennuys avec cette numration. Mais je pense que c'tait une tape ncessaire pour
comprendre comment jQuery se positionne dans le petit monde de la programmation Web. L'image suivante schmatise ce qui
vient d'tre dit afin de bien matrialiser les choses.
Fonctionnement de jQuery
Ce schma suppose qu'une page Web est affiche sur l'ordinateur, la tablette ou le tlphone client (1). Le code jQuery peut
mettre jour la page sans accder au serveur. Mais il peut galement mettre jour la page en demandant l'aide du serveur. Il se
comporte alors comme du code AJAX (2 et 3).
Qu'est-ce que jQuery ?

Si vous avez lu ce qui prcde, vous savez que jQuery est une bibliothque qui permet d'agir sur le code HTML, CSS, JavaScript
et AJAX. Tout ceci est parfaitement exact, mais un peu vague. Prcisons les choses : jQuery permet de manipuler les lments
mis en place en HTML (textes, images, liens, vidos, etc.) et mis en forme en CSS (position, taille, couleur, transparence, etc.) en
utilisant des instructions simples qui donnent accs aux immenses possibilits de JavaScript et d'AJAX. Mais alors, pourquoi ne
pas utiliser directement JavaScript et AJAX, me direz-vous ? Ceux qui se posent cette question n'ont certainement jamais tent
l'aventure. JavaScript et AJAX sont certes puissants, mais galement trs susceptibles dans leur syntaxe et vraiment trs
verbeux. Entendez par l :
1. Que toute erreur insignifiante dans la syntaxe provoque gnralement la non-excution de l'instruction correspondante.
2. Qu'il est souvent ncessaire d'crire de nombreuses lignes pour faire un simple petit traitement !
8/266
Heureusement, la devise de jQuery est Write less, do more , ce qui signifie crivez moins pour faire plus . Cela devrait
convenir bon nombre de programmeurs. En effet, en crivant moins de code, les erreurs seront moins frquentes. Qui s'en
plaindrait ?
Le logo de jQuery avec son slogan
S'il est vrai que la syntaxe utilise en jQuery a de quoi laisser perplexe de prime abord, vous verrez qu'elle est logique, facile
mettre en uvre, et qu'elle devient vite une seconde nature pour le programmeur. Et pour vous mettre un peu plus l'eau la
bouche, sachez qu'une seule instruction jQuery peut remplacer plusieurs dizaines d'instructions JavaScript !
Vous devriez normalement avoir un diteur de code ou un logiciel FTP avec lequel vous avez l'habitude de travailler. jQuery ne
change rien tout a, vous pouvez continuer les utiliser. Essayez de tester vos codes avec le plus de navigateurs possibles, en
tout cas les gros du march (Firefox, Chrome, Internet Explorer, Safari, Opera). Enfin, n'hsitez pas visiter les deux liens cidessous :
La documentation officielle de jQuery ;
Le forum de discussion consacr jQuery, en anglais.
Ce qui rend jQuery si puissant et universel

Le langage JavaScript est n en 1995. Depuis lors, son implmentation dans les diffrents navigateurs du march s'est faite d'une
faon plutt anarchique : au fil des diffrentes versions (tant du langage que des navigateurs), certaines fonctionnalits ont t
retenues, d'autres non. C'est ainsi qu'une mme instruction JavaScript peut tre reconnue dans un navigateur et pas dans un
autre, voire mme dans une certaine version d'un navigateur et pas dans une autre. Quel casse-tte pour le programmeur !
Heureusement, jQuery vient la rescousse : en dfinissant son propre jeu d'instructions, il agit comme une surcouche aux
diffrentes versions de JavaScript, qu'elles soient existantes ou venir. D'autre part, il tient compte des navigateurs prsents sur
le march, de leurs multiples versions et de leur compatibilit avec les instructions des langages JavaScript et AJAX.
Pour qu'un traitement crit en JavaScript s'excute correctement sur les diffrentes versions de chaque navigateur, le
programmeur doit mettre en place une batterie de tests et excuter un code spcifique chaque navigateur et chaque version,
comme schmatis dans la figure suivante.
9/266
Un code JavaScript classique
doit s'adapter chaque navigateur
Ce schma est une caricature de la ralit. Il n'est l que pour mettre en vidence la difficult de crer un code qui
s'excute de faon similaire sur les diffrents navigateurs du march. Aujourd'hui, on utilise des techniques plus
modernes bases sur la dtection des fonctionnalits supportes par chaque navigateur. Quoi qu'il en soit, leur mise en
place peut s'avrer laborieuse, en particulier si vous ne l'avez jamais exprimente. Pour en savoir plus ce sujet,
consultez la section Introduction aux polyfills du cours JavaScript de Thunderseb et Nesquik69.
10/266
En jQuery, ces tests sont inutiles : il suffit d'excuter les instructions ncessaires, sans se proccuper du navigateur utilis, ni de
la version du langage JavaScript compatible avec ce navigateur. Le cas chant, tous ces tests sont raliss de faon
transparente par jQuery. En ce qui vous concerne, vous n'avez qu' vous proccuper du code.
jQuery est trs pratique, mais n'en profitez pas pour ne penser qu' l'aspect visuel du dveloppement : une page se doit
avant tout de reposer sur des bases HTML solides !
Mais que se passe-t-il lorsqu'une nouvelle version de JavaScript voit le jour ? Eh bien, les instructions jQuery sont compltes
en consquence. Vous pouvez continuer utiliser les instructions avec lesquelles vous avez l'habitude de travailler et/ou
consulter la documentation sur les nouvelles instructions disponibles. Quelle que soit votre dmarche, toutes les instructions
jQuery utilises fonctionneront dans tous les navigateurs disponibles. Cette approche est un vrai bonheur pour le programmeur,
qu'il soit nophyte ou confirm.
J'ajouterai quelques autres dtails qui vont coup sr vous convaincre que vous avez fait le bon choix en dcidant de vous
mettre l'apprentissage de jQuery :
La documentation officielle est trs fournie et de grande qualit ;
La communaut qui gravite autour de jQuery est en perptuelle expansion et elle fournit un support de qualit ;
De nombreux acteurs de premier plan du Web (Microsoft, Google, Amazon, Twitter, Mozilla, etc.) utilisent jQuery ;
Une foultitude de plugins est disponible afin d'augmenter les possibilits de base de jQuery.
Bienvenue dans le monde merveilleux de jQuery !
Installer jQuery
jQuery est une bibliothque JavaScript. En d'autres termes, un fichier d'extension .js. Pour l'utiliser dans une page HTML, il
vous suffit d'y faire rfrence en utilisant une balise <script>, comme ceci :
Code : HTML
<script src="jquery.js"></script>
Dans cet exemple, l'attribut src vaut jquery.js. Comme vous pouvez le voir, l'emplacement du fichier n'est pas prcis dans
l'attribut. Cela signifie qu'il devra se trouver dans le mme dossier que le document HTML.
Mais le fichier jquery.js n'est pas sur mon ordinateur. Est-ce que ce code va quand mme fonctionner ?
Eh bien non ! Si vous utilisez l'instruction prcdente, la bibliothque jQuery ne sera pas utilisable. Deux solutions s'offrent
vous :
1. Si votre ordinateur n'est pas toujours reli Internet et/ou si votre connexion Internet n'est pas rapide, vous pouvez
tlcharger la bibliothque jQuery dans un dossier quelconque et y faire rfrence localement.
2. Si votre ordinateur est toujours connect Internet, vous pouvez faire rfrence la bibliothque jQuery en indiquant
une adresse Web.
Examinons ces deux solutions.
Tlchargement de jQuery sur votre ordinateur

Rendez-vous sur le site de jQuery et tlchargez la dernire version en date en cliquant sur le lien jquery.js, dans le cadre
Recent Stable Versions, comme la figure suivante..
11/266
Tlchargement de jQuery sur le
site officiel
Si vous utilisez Internet Explorer, la bote de dialogue Afficher les tlchargements indique que l'diteur du fichier
jquery.js n'a pas pu tre vrifi, comme l'image suivante.
Internet Explorer envoie une
alerte lors du tlchargement

N'ayez crainte, le fichier jquery.js est sans danger s'il est tlcharg depuis le site officiel.
12/266
Sur le site officiel, deux versions de la bibliothque jQuery sont proposes : jquery.js et jquery.min.js.
Pourquoi a-t-on choisi la premire version ? La deuxime est-elle moins complte ?
Ces deux fichiers sont strictement identiques d'un point de vue fonctionnel. Par contre, le deuxime a une taille infrieure au
premier. Pour cela, les espaces, tabulations, et commentaires y ont t supprims, et les noms des variables et des fonctions ont
t raccourcis, comme le montre la figure suivante.
gauche le code avec espaces, tabulations et commentaires, droite sans

En rgle gnrale, vous utiliserez le fichier jquery.js en dveloppement et le fichier jquery.min.js en production, c'est-
-dire lorsque votre code aura t test, dbogu et plac sur le Web.
Vous aussi, vous pourrez minimiser vos scripts jQuery pour qu'ils se chargent plus vite. Pour cela vous utiliserez
Google Closure Compiler ou YUI Compressor.
Rendez-vous dans le dossier de tlchargement et dplacez le fichier jquery.js dans le dossier o vous dvelopperez vos
codes jQuery. l'image suivante par exemple, le fichier est dplac dans le dossier data\Site du Zro\jQuery\dev.
13/266
Le fichier est dplac dans le dossier de dveloppement
Faire rfrence jQuery en ligne

Le plus simple consiste faire rfrence au fichier jquery.js sur un CDN (pour Content Delivery Network). Constitus
d'ordinateurs relis en rseau via Internet, ces lments d'infrastructure cooprent pour mettre disposition aussi vite que
possible la bibliothque jQuery. Vous pouvez utiliser les CDN jQuery, Google ou Microsoft. Voici les adresses correspondantes :
CDN
Version non minimise
Version minimise
jQuery
http://code.jquery.com/jquery.js
http://code.jquery.com/jquery.min.js
Google
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js http://ajax.googleapis.com/ajax/libs/j [...] jquery.min.js
Microsoft http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.js
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js
Les CDN jQuery et Google donnent directement accs la dernire version de jQuery. Quant au CDN Microsoft, vous
devez prciser la version utiliser dans l'adresse. Cela peut tre pratique si vous voulez utiliser une version particulire
de jQuery. Le cas chant, rendez-vous sur la page listant les adresses des diffrentes versions de jQuery.
L'utilisation d'un CDN est intressante en production, c'est--dire lorsque votre code jQuery a t test et est hberg sur un
serveur Web. En effet, en faisant rfrence un fichier externe votre site, vous n'entamez pas sa bande passante. D'autre part,
tant donn que les CDN ont une grande bande passante, ils sont trs ractifs. Enfin, le fichier jquery.min.js issu d'un
CDN est bien souvent dj prsent dans la mmoire cache du navigateur. Ces trois raisons font que votre page se chargera plus
rapidement.
Par contre, en phase de dveloppement, c'est--dire lorsque vous mettez au point votre code jQuery sur votre ordinateur local, je
vous conseille de tlcharger le fichier jquery.js et d'y faire rfrence localement. En effet, mme si les CDN ont une
excellente bande passante, l'utilisation d'un fichier local sera bien plus rapide.
En rgle gnrale, le code jQuery s'excute sur les ordinateurs clients. Cependant, il peut parfois demander un serveur
de mettre jour une partie d'une page en utilisant du code AJAX.
La meilleure technique pour dvelopper du code jQuery sur son ordinateur consiste tlcharger le fichier jquery.js,
14/266
le placer dans un dossier de son disque dur et faire rfrence ce fichier dans une balise <script>.
Lorsque le code a t test et dbogu, vous le placerez sur un serveur Web avec votre client FTP et vous ferez rfrence
au fichier jquery.min.js stock sur un CDN pour amliorer les temps de rponse sans grignoter la bande passante
de votre serveur.
15/266
Premiers pas
Vous tes maintenant quips pour dvelopper en jQuery et vous brlez d'crire vos premires lignes de code. Ce chapitre est l
pour cela. Mais avant, je voudrais introduire le jargon technique qui sera utilis tout au long de ce tutoriel. Dans ce chapitre,
vous verrez que les pages Web qui utilisent des instructions jQuery sont construites selon un modle bien prcis. Le squelette
prsent ici servira tout au long de ce cours.
Et enfin, vous ferez vos premiers pas en programmation jQuery en crivant quelques lignes de code. Vous pourrez alors constater
quel point jQuery est concis et puissant. Bienvenue dans le monde de la programmation jQuery !
Le vocabulaire connatre
Tout au long de ce tutoriel, nous utiliserons un jargon technique propre aux langages HTML, CSS, JavaScript et jQuery. Cette
section va passer en revue les diffrents termes connatre. Il n'est pas ncessaire de lire tout ce qui figure dans cette section
(surtout que vous tes censs connatre la plupart de ces termes). Sachez simplement qu'elle existe et reportez-vous-y lorsque
vous rencontrez un terme dont la signification vous chappe. Si vous avez besoin d'une piqre de rappel plus importante, je
vous renvoie sur ces deux cours :
Apprenez crer votre site web avec HTML5 et CSS3 crit par Mathieu Nebra alias m@teo21
Dynamisez vos sites web avec Javascript ! crit par Sbastien de la Mark alias Thunderseb et Johann Pardanaud alias
Nesquik69
Balise
Aussi appele lment ou tag , c'est l'entit de base du langage HTML. Les balises sont toujours encadres par les caractres <
et >. Par exemple <html> ou encore <body>. Les balises ouvertes doivent tre fermes avec une balise fermante. Par exemple
</html> ou encore </body>. Certaines balises peuvent tre la fois ouvrantes et fermantes. Dans ce cas, le caractre /
apparat avant le signe > de fin de balise. Par exemple, <img src="image.jpg" />.
Attribut
Outre leur nom, certaines balises HTML peuvent recevoir une ou plusieurs informations complmentaires. Ces informations sont
des attributs. Toujours spcifis dans la balise ouvrante, ils sont suivis d'un signe = et d'une valeur entre guillemets. Lorsqu'une
balise contient plusieurs attributs, ils sont spars par des espaces. La balise <img> du code <img src="jquery.jpg"
alt="logo jQuery" id="imglogo" /> contient trois attributs : src, alt et id.
Block
Les balises HTML de type block sont affiches sur des lignes successives. Par exemple, si l'on dfinit deux balises <div> dans
un document HTML, elles seront affiches l'une en dessous de l'autre. Les balises de type block peuvent tre dimensionnes, et
donc occuper un espace bien dfini (hauteur et largeur) dans un document.
Inline
Les balises HTML de type inline sont affiches les unes la suite des autres. Par exemple, si l'on dfinit deux balises <span>
dans un document HTML, elles seront affiches sur une mme ligne. Les balises de type inline ne peuvent pas tre
dimensionnes. Elles occupent un espace qui dpend de leur contenu.
Inline-block
C'est un mlange des types inline et block. Si on dfinit deux balises de type inline-block dans un document HTML, elles seront
affiches l'une la suite de l'autre (c'est le comportement des balises inline). Leur taille (largeur et hauteur) pourra galement tre
dfinie (c'est le comportement des balises block).
Feuille de styles
C'est un document qui rassemble un ou plusieurs styles CSS qui dfinissent la mise en forme d'un document. Si la feuille de
styles est interne un document, les diffrents styles doivent tre dfinis dans l'en-tte du document, entre les balises <style
type="text/css"> et </style>. Si la feuille de styles est externe, vous devez dfinir les styles dans un fichier d'extension
16/266
.css et y faire rfrence dans l'en-tte du document en utilisant une balise <link rel="stylesheet"
type="text/css" href="feuille-de-styles.css" />. Ici, la feuille de styles a pour nom feuille-destyles.css.
Proprits CSS
Elles dfinissent les caractristiques d'un style CSS. Elles sont prcises dans la feuille de styles, entre les accolades ouvrante et
fermante qui suivent le nom du style. Dans l'exemple qui suit, color et margin sont des proprits CSS :
Code : CSS
li
{
}
color: red;
margin: 10px;
Slecteur CSS
Pour dfinir une rgle CSS, on utilise un slecteur qui indique quoi va se reporter la rgle. Il peut s'agir d'un slecteur de balise,
de classe, d'identifiant, de pseudo-lment, voire mme d'un slecteur universel qui s'adresse toutes les balises du document.
Le tableau suivant montre quelques exemples pour mieux comprendre le fonctionnement des slecteurs.
Slecteur
Type
Se rapporte
h2
Slecteur de balise
Toutes les balises <h2>
.rouge
Slecteur de classe
Toutes les balises de classe rouge
#grand
Slecteur d'identifiant
La balise d'identifiant grand
:first-letter
Slecteur de pseudo-lment
La premire lettre d'un lment
.rouge:first-letter Slecteur de pseudo-lment d'une classe La premire lettre des balises de classe rouge
*
Slecteur universel
Toutes les balises
W3C
Le World Wide Web Consortium (W3C), est un organisme de standardisation but non lucratif, charg de promouvoir la
compatibilit des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.
DOM
Le Document Object Model est une structure de donnes qui reprsente un document HTML comme une arborescence. La
racine de cet arbre est un nud nomm document qui correspond grossirement la balise <html>. Tout aussi
grossirement, les balises HTML dfinies dans la page Web correspondent aux nuds de l'arbre DOM et en constituent la
structure. Le langage jQuery est en mesure d'interroger le DOM pour connatre les caractristiques (attributs et valeurs HTML,
proprits et valeurs CSS) des balises qui constituent un document HTML, mais aussi de modifier ces lments pour changer
l'allure et/ou le contenu du document.
DTD
Le Document TYPE Declaration fait rfrence la balise <!DOCTYPE>. Cette dernire doit apparatre en tte des documents
HTML. Elle indique au navigateur les rgles d'criture utilises dans le document. Dans ce cours, nous utiliserons
systmatiquement les rgles d'criture du langage HTML5. Le DTD correspondant sera <!DOCTYPE html>.
17/266
Jeu de caractres
Le jeu de caractres d'un document HTML est associ aux diffrents claviers nationaux. Pour indiquer au navigateur dans quel
jeu de caractres vous travaillez, vous devez insrer une balise <meta charset=""> dans l'en-tte du document. Deux jeux
de caractres sont essentiellement utiliss :
ISO-8859-1 pour accder la majorit des caractres des langues occidentales, telles que le franais, l'anglais, l'allemand,
l'espagnol, etc.
UTF-8 pour afficher sur une mme page des caractres issus de plusieurs langues (franais et japonais par exemple).
Selon vos besoins, vous utiliserez donc une balise <meta charset="ISO-8859-1"> ou <meta charset="UTF8">.
Fonction jQuery
C'est le point d'entre de la bibliothque jQuery. Vous pouvez utiliser au choix l'instruction jQuery() ou son alias $(). Dans
ce cours, nous utiliserons systmatiquement l'alias pour limiter l'criture.
Mthodes jQuery
La bibliothque jQuery est constitue d'un ensemble de blocs de code autonomes appels mthodes. Ce qui fait la puissance de
cette bibliothque, c'est avant tout la grande diversit des mthodes proposes. Pour excuter une mthode jQuery, il suffit de
prciser son nom la suite d'un slecteur en le sparant de ce dernier par un point :
$(slecteur).mthode(paramtres);.
Objet jQuery
On appelle objet jQuery l'entit retourne par la fonction jQuery, c'est--dire par $(). Cet objet reprsente un ensemble de
zro, un ou plusieurs lments issus du document.
Le squelette HTML typique

Nous allons voir le squelette typique d'un document HTML dans lequel on utilise du code jQuery. C'est partir de ce squelette
que tous les exemples de ce tutoriel seront construits. Vous trouverez ici toutes les informations ncessaires pour comprendre
son agencement.
En fait, ce n'est pas un mais deux squelettes dont nous allons parler ici : un concernant le dveloppement et un autre concernant
la production. Une seule balise HTML les diffrencie, mais, comme nous allons le voir, cette balise fait une grande diffrence.
Squelette HTML en phase de dveloppement

Voici les instructions qui seront typiquement utilises dans tous nos exemples :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Le titre du document</title>
<link rel="stylesheet" type="text/css" href="feuille-destyles.css">
</head>
<body>

<script src="mon-script.js"></script>
</body>
</html>
18/266
Je ne vais pas m'arrter sur chacune de ces lignes, vous devriez tre en mesure de les comprendre. Je vais cependant dtailler un
peu les lignes 10 et 11.
La ligne 10 fait rfrence la bibliothque jquery.js. Ici galement, tant donn qu'aucun chemin n'est spcifi dans la valeur
affecte l'attribut src, le fichier jquery.js doit se trouver dans le mme dossier que le document HTML. Je ne vais pas
revenir sur comment le tlcharger, reportez-vous au premier chapitre si vous avez besoin.
La ligne 11 fait rfrence un fichier JavaScript externe votre page dans lequel vous placerez tout le code jQuery en rapport
avec le document.
Au final, on se retrouve donc avec quatre fichiers :
1.
2.
3.
4.
Le document HTML lui-mme ;

La feuille de styles externe qui dfinit la mise en forme du document ;
Le fichier jquery.js, qui contient la bibliothque jQuery ;
Un fichier JavaScript externe qui contient tout le code jQuery que vous dvelopperez.
Quatre fichiers pour mettre en place quelques instructions jQuery ? N'est-ce pas un peu disproportionn ?
Eh bien tout dpend si vous voulez bricoler ou si vous voulez programmer en jQuery. Effectivement, la tentation est grande
de placer le code CSS et jQuery dans le document HTML, afin de n'utiliser que deux fichiers : le document HTML et la
bibliothque jQuery. D'autant plus que cela fonctionne. Mais imaginez que vous deviez raliser un site Web contenant plusieurs
dizaines de pages. En externalisant les codes CSS et jQuery, vous pourrez facilement les rutiliser et ainsi tre gagnants sur
plusieurs tableaux :
Le temps de dveloppement sera rduit d'autant ;
Les risques d'erreurs seront minimiss, puisque le mme code sera utilis dans les diffrents documents HTML ;
La maintenance sera d'autant facilite : pour effectuer une modification dans tout le site, il vous suffira d'agir sur la feuille
de styles externe et sur le fichier de code JavaScript externe. Si vous aviez internalis le code de ces deux fichiers, vous
auriez d agir sur chacune des pages HTML du site !
Squelette HTML en phase de production

a y est, votre code HTML/CSS/jQuery/JavaScript fonctionne la perfection et vous tes impatients de le tester en ligne. Avant
d'utiliser un client FTP, assurez-vous que vous faites rfrence la version minimise de la bibliothque jQuery et que vous la
chargez sur un CDN. Ainsi, avec la version minimise sur le CDN de Google, voici le code utiliser :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Le titre du document</title>
<link rel="stylesheet" type="text/css" href="feuille-de-styles.css">
</head>
<body>

<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="mon-script.js"></script>
</body>
</html>
19/266
Optimisation du code
Voici quelques recommandations qui augmenteront les performances des pages qui contiennent du code jQuery :
1. Invoquez la bibliothque jquery.js la fin du document, avant la balise </body>.
2. Insrez le code jQuery rattach la page dans un fichier annexe et faites rfrence ce fichier juste aprs la balise qui
indique o se trouve la bibliothque jQuery.
Ces positions stratgiques optimisent le temps de chargement de la page. En effet, de nombreux navigateurs bloquent l'excution
du code qui suit une balise <script> jusqu' ce que cette balise ait t charge et excute. En plaant les deux balises
<script> juste avant la balise </body>, l'affichage de la page n'est pas frein par le code jQuery.
Attendre la disponibilit du DOM
Le langage jQuery est utilis pour manipuler (en lecture et en criture) le DOM, c'est--dire l'arborescence du document. Imaginez
que ces manipulations commencent alors que l'arbre n'a pas encore t entirement obtenu. Cette situation erratique pourrait
dsorganiser l'affichage, produire des erreurs, voire mme bloquer le navigateur !
Pour viter d'en arriver l, vous devez attendre que l'arbre soit complet. En jQuery, cela se traduit par le code suivant :
Code : JavaScript
jQuery(document).ready(function() {
// Ici, le DOM est entirement dfini
});
Cette criture peut se simplifier en remplaant jQuery par son alias, $, ce qui donne :
Code : JavaScript
$(document).ready(function() {
});
Enfin, (document).ready peut tre omis pour arriver au code suivant :

Code : JavaScript
$(function() {
});
Ces trois instructions sont strictement quivalentes. En ce qui me concerne, j'utiliserai systmatiquement la troisime tout au
long de ce cours, car c'est la plus courte et la plus simple crire. Par contre, si vous consultez d'autres articles traitant de jQuery,
vous trouverez parfois les deux autres formes.
Dans l'introduction, il a t dit que jQuery peut tre utilis pour interroger/modifier le DOM, mais aussi les styles CSS
du document. L'instruction $(function() { s'assure que le DOM est entirement dfini. Mais qu'en est-il de la
feuille de styles ?
Si vous avez fait rfrence une feuille de styles entre les balises <head> et </head>, l'instruction $(function() {
s'assure galement que la feuille de styles est charge. Vous pouvez donc l'interroger et la manipuler comme bon vous semble.
Premier script : Hello world

20/266
Il est une tradition bien ancre lorsque l'on crit un cours sur un langage de programmation : le premier exemple affiche un texte
sur l'cran : Hello world ! Nous n'allons pas droger la rgle. Prts relever le dfi ?
Prcdemment, j'ai plusieurs fois affirm que jQuery tait capable de manipuler les lments du DOM. Eh bien maintenant, il est
temps de le prouver. Pour cela, je vais dfinir une balise <span> dans le document, lui affecter un attribut id afin de l'identifier
et modifier son contenu en jQuery.
hello-world.html :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
Ce texte est affich en HTML
<span id="texteJQ"></span>
<script src="jq-hello-world.js"></script>
</body>
</html>
Comme vous pouvez le constater, la ligne contenant une balise <link> a t enleve de l'en-tte. En effet, l'utilisation d'une
feuille de styles ne prsente aucun intrt dans cet exemple.
La ligne 12 fait rfrence au fichier JavaScript jq-hello-world.js. En voici le contenu :
Code : JavaScript
$(function() {
$('#texteJQ').html('Hello world. Ce texte est affich par
jQuery.');
});
Si vous n'avez pas la mmoire trop courte, vous reconnaissez certainement les lignes 1 et 3 qui attendent la disponibilit du
DOM. La ligne 2, quant elle, contient une instruction jQuery dont la syntaxe peut vous laisser perplexes. Dcomposons-la pour
mieux comprendre son fonctionnement :
$('#texteJQ') : cette partie agit comme un slecteur. Elle retrouve dans le DOM l'lment dont l'attribut id vaut
texteJQ. Pourquoi l'attribut id, me direz-vous ? Eh bien parce que, selon les conventions du langage CSS, le caractre
# reprsente justement l'attribut id.
html('Hello world. Ce texte est affich par jQuery.'); : la deuxime partie indique ce qui doit
tre modifi. Dans cet exemple, on utilise la mthode html() pour demander la modification du contenu de la balise.
Le point entre ces deux parties fait le lien entre le slecteur et l'action.
Cette instruction slectionne donc l'lment d'id texteJQ et y insre le texte Hello world. Ce texte est affich par jQuery.
Vous voyez, il n'y a rien de sorcier l-dedans.
Double-cliquez sur le fichier hello-world.html pour l'ouvrir dans votre navigateur. Vous devriez obtenir quelque chose
ressemblant l'image suivante.
21/266
Le fichier
est ouvert dans Internet Explorer

Si chez vous rien ne s'affiche, vrifiez que :
Le fichier jquery.js se trouve bien dans le mme dossier que le fichier hello-world.html.
Vous n'avez oubli aucun guillemet, parenthse ou accolade dans le fichier jq-hello-world.js.
Le squelette d'un document qui utilise du code jQuery est diffrent en dveloppement et en production. Dans le premier
cas, vous ferez rfrence la bibliothque jquery.js localement. Dans le second, vous ferez rfrence la
bibliothque jquery.min.js sur un CDN.
Il est impratif d'attendre la disponibilit du DOM avant d'excuter du code jQuery. Sans quoi, ce code pourrait
s'appliquer un lment indisponible et provoquer un comportement inattendu, voire mme un plantage du navigateur.
En jQuery, pour modifier le contenu d'une balise <span> dont l'attribut id vaut monid, on utilise l'instruction
$("#monid").html("texte quelconque");.
Pour optimiser le code d'un document HTML qui utilise une feuille de styles et du code jQuery, on place les styles et le
code jQuery dans des fichiers externes. La feuille de styles est appele dans l'en-tte du document, alors que le code
jQuery est appel juste avant la balise </body> et juste aprs la rfrence la bibliothque jQuery.
22/266
Partie 2 : Les bases de jQuery
Slection d'lments
Dans ce chapitre, vous allez commencer entrevoir la puissance de jQuery en dcouvrant une de ses facettes : la slection
d'lments. Aprs cette lecture, vous saurez slectionner, modifier et obtenir la valeur de la plupart des lments qui peuvent tre
rencontrs dans un document HTML.
Vous connatrez galement la nature des objets retourns par les instructions jQuery et vous verrez comment rduire la taille du
code jQuery en chanant les mthodes utilises sur un objet.
Fonctionnement de base de jQuery

jQuery repose sur une seule et unique fonction : jQuery(), ou son alias, $(). Cette fonction accepte un ou plusieurs
paramtres et retourne un objet que nous appellerons objet jQuery . Les paramtres peuvent tre d'un des types suivants :
Une fonction, qui sera excute ds que le DOM est disponible. Cette technique est trs largement utilise par tous les
programmeurs jQuery.
Un slecteur CSS : l'lment (ou les lments) qui correspondent au slecteur sont retourns. Nous allons nous intresser
cette technique dans ce chapitre.
Un lment HTML, un document ou l'objet window : un objet jQuery correspondant cet lment est retourn.
Une (ou plusieurs) balise(s) HTML : un objet jQuery correspondant cette (ces) balise(s) est retourn. Vous pouvez lui
appliquer des mthodes jQuery, par exemple pour ajouter cette (ces) balise(s) dans un lment HTML.
Slection d'lments
Une des grandes forces de jQuery est dintgrer la syntaxe des slecteurs CSS. Par cet intermdiaire, il est lmentaire de
slectionner les nuds DOM qui nous intressent, en utilisant la syntaxe $(slection) o slection reprsente un
slecteur CSS.
En effet, jQuery est fortement li trois autres langages : HTML, CSS et JavaScript. CSS est un langage consacr la mise en
forme des documents crits en HTML. Les slecteurs CSS sont des mots et symboles qui permettent d'identifier les lments
contenus dans un document HTML. Par exemple, h2 reprsente les balises HTML <h2>, ou encore p reprsente les balises
<p>. En utilisant un slecteur CSS dans la premire partie d'une instruction jQuery, le ou les lments HTML correspondants
seront slectionns. Par la suite, il suffira de leur appliquer une action pour modifier leur contenu ou leur apparence.
Avant de poursuivre, voici quelques slecteurs CSS que vous devez avoir en mmoire :
Un nom de balise, sans les caractres < et >, permet de slectionner cette balise. Si plusieurs balises de mme nom se
trouvent dans le document, toutes ces balises sont slectionnes. Par exemple, si le document contient plusieurs balises
<div>, le slecteur CSS div slectionne toutes ces balises.
Le signe # fait rfrence l'attribut id (ou identifiant) d'une balise. Par exemple, si vous dfinissez la balise <p
id="premier">, le slecteur #premier slectionne cette balise. Notez que deux balises ne peuvent pas avoir le
mme identifiant.
Le point fait rfrence l'attribut class d'une balise. Supposons que vous ayez dfini la balise <h2
class="rouge">. Le slecteur .rouge slectionne cette balise. Plusieurs balises peuvent avoir la mme classe. Un
mme traitement pourra donc tre appliqu ces deux balises.
Pour diffrencier les balises <h2> de classe rouge des balises <p> de classe rouge, vous utiliserez les slecteurs
h2.rouge et p.rouge. Ce cas particulier s'applique toutes les balises et toutes les classes. Ainsi, le slecteur
nom_balise.nom_classe permet de slectionner les balises nom_balise de classe nom_classe.
Supposons maintenant que vous ayez dfini une liste puces <ul></ul> et une liste numrote <ol></ol>.
Chacun des lments des deux listes est repr par des balises <li>. Pour diffrencier les lments <li> de la liste
puces des lments <li> de la liste numrote, vous utiliserez un slecteur descendant . Ainsi, le slecteur ul li
s'adresse tous les lments <li> de la liste puces <ul>, et le slecteur ol li s'adresse tous les lments <li>
de la liste numrote <ol>.
Certaines balises HTML peuvent contenir un ou plusieurs attributs. Par exemple, la balise <img src="chien.jpg"
width="40" height="30"> contient trois attributs : src, width et height. Pour slectionner toutes les balises
qui contiennent un attribut src, vous utiliserez le slecteur [src].
Vous pouvez mme aller plus loin en slectionnant les balises dont un attribut a une certaine valeur. Par exemple, pour
slectionner toutes les balises dont l'attribut width a pour valeur 40, vous utiliserez le slecteur [width="40"].
Le caractre * reprsente toutes les balises du document.
Et maintenant, nous allons raisonner sur un exemple pour mieux comprendre comment utiliser les slecteurs CSS.
23/266
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Slecteurs CSS</title>
</head>
<body>
<ul class="rouge">
<li class="impair">premier lment de la liste puces</li>
<li class="pair">deuxime lment de la liste puces</li>
<li class="impair">troisime lment de la liste puces</li>
</ul>
<div>
<ul class="bleu">
<li class="impair">premier lment de la liste puces</li>
<li class="pair">deuxime lment de la liste puces</li>
<li class="impair">troisime lment de la liste
puces</li>
</ul>
</div>
<ol class="rouge">
<li>premier lment de la liste numrote</li>
<li>deuxime lment de la liste numrote</li>
<li>troisime lment de la liste numrote</li>
</ol>
<script>
$(function() {
// Insrer le code jQuery ici
});
</script>
</body>
</html>
Le tableau suivant donne quelques exemples significatifs de slecteurs et indique quoi ils correspondent.
Slecteur CSS
Slecteur jQuery
Signification
ul
$('ul')
Les balises <ul>
ul.bleu
$('ul.bleu')
La balise <ul> de classe bleu
div ul
$('div ul')
La balise <ul> contenue dans la balise <div>
div ul
li[class="pair"]
$('div ul
li[class="pair"]')
La balise <li> contenue dans une balise <ul>, elle-mme

contenue dans une balise <div>, et dont l'attribut class
vaut pair
li[class]
$('li[class]')
Les balises <li> qui possdent un attribut class
li[class="impair"] $('li[class="impair"]')
Les balises <li> qui possdent un attribut class de

valeur impair
Toutes les balises du document
$('*')
Vous avez peut-tre remarqu l'utilisation des guillemets dans la colonne Slecteur jQuery : $('div ul
li[class="pair"]') et $('li[class="impair"]'). Ceci vient du fait qu'il est impossible d'utiliser des
apostrophes l'intrieur d'autres apostrophes. Lorsqu'un tel cas se produit, les apostrophes les plus internes sont
remplaces par des guillemets.
24/266
Quelle est la nature de l'objet retourn ?

Le rsultat retourn par la fonction $() est un objet jQuery. Cet objet ressemble un tableau : il a une proprit length et les
lments slectionns peuvent tre accds par un indice. Par exemple :
$('a').length retourne le nombre de liens hypertextes contenus dans la page.
$('ul.bleu').length retourne le nombre de balises <ul> de classe bleu.
$('li[class="impair"]').length retourne le nombre de balises <li> qui ont un attribut class de valeur
impair.
$('body').length retourne 1 car le document contient une seule balise <body>.
Pour accder un des lments slectionns, prcisez son indice entre crochets la suite du slecteur. Par exemple :
$('a')[0] retourne le premier lien hypertexte de la page.
$('ul.bleu')[3] retourne la quatrime balise <ul> de classe bleu.
$('body')[0] est quivalent document.body.
Appliquer une mthode la slection

Une fois qu'un ou plusieurs lments ont t slectionns avec une instruction $(slecteur), vous pouvez leur appliquer
un traitement en excutant une mthode jQuery. Pour cela, ajoutez un point aprs la parenthse fermante et indiquez la mthode
utiliser :
Code : JavaScript
$(slecteur).action
o $(slecteur) slectionne un ou plusieurs lments dans le document et action effectue un traitement sur les
lments slectionns. Par exemple, pour crire un message dans une balise <span> d'identifiant resultat, vous utiliserez
quelque chose comme le code suivant :
Code : JavaScript
$('#resultat').html('texte crire dans la balise span');
La mthode html() n'est qu'une des nombreuses mthodes utilisables en jQuery. Pour avoir un aperu global des
principales mthodes, reportez-vous la section Getters et setters du chapitre Modifier le contenu d'un lment .
Notions indispensables
Je vais ici vous parler de deux notions indispensables : les fonctions de rappel et le chanage de mthodes.
Fonctions de rappel
Une fonction de rappel (ou callback en anglais) est une fonction excute lorsqu'une autre fonction a termin de s'excuter. En
jQuery, les fonctions de rappel sont essentiellement utilises pour raliser des animations et des appels AJAX. Nous reviendrons
sur ces deux sujets dans la partie 3 du cours.
Juste pour vous mettre l'eau la bouche, voici un exemple de fonction de rappel, applique aux lments de classe rouge :
Code : JavaScript
25/266
$(function() {
$(".rouge").fadeOut("slow",function(){
$(this).fadeIn("slow");
});
});
Ce code fait disparatre puis rapparatre progressivement les balises de classe rouge.
Chanage de mthodes
Le chanage est un concept trs puissant et pourtant simple comprendre. tant donn que les mthodes jQuery retournent un
objet jQuery, il est possible de les chaner , c'est--dire de les excuter les unes la suite des autres.
titre d'exemple, les deux premires instructions sont quivalentes la troisime :
Code : JavaScript
$('.rouge').css('background','red');
$('.rouge').css('color','yellow');
$('.rouge').css('background','red').css('color','yellow');
Nous n'avons pas encore tudi la mthode jQuery css(), mais je suis sr qu'en observant la faon dont elle s'articule vous
comprenez son fonctionnement. Cette mthode admet deux paramtres. Le premier est une proprit CSS et le deuxime, la valeur
affecter cette proprit.
Ainsi par exemple, l'instruction $('.rouge').css('background','red'); affecte un arrire-plan (background) de
couleur rouge (red) aux balises de classe rouge ($('.rouge')). L'instruction
$('.rouge').css('color','yellow');, quant elle, affecte la couleur jaune (yellow) aux balises de classe
rouge.
En chanant ces deux instructions, les balises de classe rouge ont un arrire-plan de couleur rouge et des caractres de couleur
jaune. Et tout cela en une seule instruction !
La mthode css() n'est qu'une des nombreuses mthodes utilisables en jQuery. Pour avoir un aperu global des
principales mthodes, reportez-vous la section Getters et setters du chapitre Modifier le contenu d'un lment .
Le slecteur jQuery $('sel') utilise la syntaxe CSS. En remplaant sel par un slecteur CSS quelconque, les lments
correspondants (s'ils existent) seront slectionns dans le DOM. Par exemple :
$('a') slectionne tous les liens hypertextes ;
$('.rouge') slectionne les lments de classe rouge ;
$('#e2') slectionne l'lment d'identifiant e2 ;
$('[src]') slectionne tous les lments qui possdent un attribut src ;
$('[width="40"]') slectionne tous les lments qui ont un attribut width gal 40.
L'objet retourn par un slecteur jQuery peut faire rfrence plusieurs lments. Pour accder un lment, vous
pouvez prciser son index entre crochets, en ayant bien l'esprit que le premier lment a un index gal 0. Par exemple,
le slecteur $('a')[2] fait rfrence au troisime lien hypertexte contenu dans la page.
Pour appliquer une mthode un objet jQuery obtenu en utilisant un slecteur, il suffit d'crire cette mthode droite du
slecteur en la sparant de ce dernier par un point. Par exemple, l'instruction suivante crit en jaune tous les liens
hypertextes contenus dans la page : $('a').css('color', 'yellow');.
Pour chaner deux mthodes jQuery, crivez-les l'une la suite de l'autre en les sparant par un point. Par exemple, cette
instruction applique un arrire-plan de couleur rouge et un texte de couleur jaune aux lments de classe rouge :
$('.rouge').css('background','red').css('color','yellow');.
26/266
Plus loin dans la slection d'lments

Vous avez appris slectionner des balises, des identifiants et des classes dans le code HTML d'une page Web. Ces types de
slections sont trs utiles et vous les utiliserez frquemment lors de vos dveloppements jQuery.
Cependant, il est possible d'aller plus loin en slectionnant encore plus finement les lments du DOM. Ce chapitre va vous
montrer comment slectionner des lments HTML en fonction de leurs attributs, comment limiter les lments retourns en
utilisant des pseudo-slecteurs ou encore comment utiliser des slecteurs spcialiss pour certains types d'lments.
Vous apprendrez galement parcourir les lments slectionns pour appliquer chacun d'entre eux un traitement spcifique.
Cette technique est trs importante. Elle sera souvent utilise dans les autres chapitres de ce cours.
Slecteurs d'attributs
Arrivs ce point dans la lecture du cours, vous savez slectionner les lments qui contiennent :
un attribut donn, en utilisant le slecteur $('[nom]') ;
un attribut donn qui a une certaine valeur, en utilisant le slecteur $('[nom:valeur]').
Le tableau suivant dresse la liste des slecteurs d'attributs volus auxquels nous allons nous intresser.
Slecteur
['nom*="valeur"']
lments slectionns
lments qui possdent un attribut nom qui contient (partiellement ou totalement) la valeur
spcifie.
['nom~="valeur"'] lments qui possdent un attribut nom qui contient la valeur spcifie, dlimit par des espaces.
['nom$="valeur"'] lments qui possdent un attribut nom qui se termine par la valeur spcifie.
['nom!="valeur"']
lments qui ne possdent pas l'attribut nom, ou qui possdent un attribut nom diffrent de la
valeur spcifie.
['nom^="valeur"'] lments qui possdent un attribut nom qui commence par la valeur spcifie.
Pour bien comprendre comment fonctionnent ces slecteurs, nous allons travailler avec le code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="canard.jpg" title="animal canard" border="11">
<img src="chat.jpg" title="animal chat" border="4">
<img src="cheval.jpg" title="cheval" border="2">
<img src="chien.jpg" title="animal chien" border="8">
<img src="girafe.jpg" title="girafe" border="4">
<script>
$(function() {
// Le code jQuery sera insr ici
});
</script>
</body>
</html>
Au dbut de ce cours, je vous ai dit qu'il tait conseill de sparer les codes HTML, CSS et jQuery dans plusieurs
27/266
fichiers. Ce conseil reste toujours d'actualit ; cependant, tant donn la faible ampleur du code, j'ai pris la libert de
mettre le code jQuery directement dans le HTML. N'ayez crainte, nous utiliserons plusieurs fichiers spars lorsque le
code deviendra un peu plus toff.
Le corps du document contient cinq balises <img>. Chacune d'entre elles a trois attributs : src, title et border. Nous
allons utiliser plusieurs slecteurs d'attribut volus pour modifier la couleur de certaines bordures d'images. Aprs que les
images ont t dfinies, une balise <script> fait rfrence la bibliothque jQuery et une autre dlimite le code jQuery que
nous allons crire. L'instruction $(function() { attend la disponibilit du DOM. Les instructions jQuery seront places la
place du commentaire.
L'image suivante est le rsultat lorsqu'on excute ce code dans Internet Explorer.
Le
code excut dans Internet Explorer

Nous allons tracer une bordure rouge autour de certaines images en utilisant la mthode jQuery css() suivante :
Code : JavaScript
$('selecteur').css('border-color','red');
o selecteur est un des slecteur CSS du tableau suivant :
Critre
Image
modifie
Slecteur
Image dont l'attribut border contient partiellement ou totalement la valeur

1 .
$('[border*="1"]')
Image dont l'attribut title contient le mot animal dlimit par une
espace.
$('[title~="animal"]') 1, 2, 4
28/266
Image dont l'attribut src se termine par e.jpg .
$('[src$="e.jpg"]')
Image qui ne possde pas un attribut border gal 15 .
$('[border!="15"]')
1, 2, 3, 4, 5
Image dont l'attribut src commence par ch .
$('[src^="ch"]')
2, 3, 4
Slecteurs hirarchiques
Dans l'arborescence DOM, l'exception de html, tous les lments ont un parent, et certains lments ont un ou plusieurs
enfants. Cette section s'intresse aux slecteurs hirarchiques, avec lesquels vous pourrez slectionner les enfants d'un certain
parent, l'nime enfant d'un parent, les enfants uniques, etc.
Slecteur
lments slectionns
('p > e')
lments e directement descendants d'lments p
('p + e')
lments e directement prcds d'un lment p
('p ~ e')
lments e prcds d'un lment p
:empty
lments qui n'ont pas d'enfant
:first-child Premier enfant

:first
Premier lment
:last-child
Dernier enfant
:last
Le dernier lment de la slection
:nth-child() lment qui est l'nime enfant de son parent

:only-child
lments qui sont enfants uniques de leur parent
Rien de tel qu'un peu de code pour bien comprendre comment fonctionnent ces slecteurs. Ici, nous utiliserons des listes
imbriques :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="listes">
<ul id="ul1">
<li> Elment de liste 1
<ul id="ul2">
<li> Enfant 1</li>
<li> Enfant 2</li>
</ul>
</li>
<li> Elment de liste 2</li>
</ul>
</div>
<script>
$(function() {
// Le code jQuery sera insr ici
});
</script>
</body>
</html>
29/266
L'image suivante reprsente ce code excut dans Internet Explorer.
Le code prcdent excut dans
Internet Explorer
Nous allons afficher en rouge certains lments de ces listes imbriques en utilisant la mthode jQuery css() suivante :
Code : JavaScript
$(function() {
$('sel').css('color','red');
});
o sel est un des slecteur CSS du tableau suivant :

Critre
Slecteur
lment modifi
lments ul directement descendants d'lments li $('li > ul')
2, 3
lments li directement prcds d'un lment li
$('li + li')
3, 4, 5, 6
Premier lment li enfant
$('li:first-child')
1, 2, 3
Premier lment li
$('li:first')
1, 2, 3
Dernier lment li
$('li:last')
Dernier lment li enfant
$('li:last-child')
3, 6
lments li enfants uniques de leur parent
$('li:only-child')
aucun
Deuxime enfant li
$('li:nth-child(2)') 3, 4
Pseudo-slecteurs d'lments slectionns

Lorsque vous utilisez un slecteur CSS, un ou plusieurs lments sont slectionns dans le DOM. En ajoutant un pseudoslecteur au slecteur, vous allez pouvoir filtrer la slection en ne conservant que les lments pairs, impairs, ayant un certain
index, etc. Regardez le tableau suivant :
Slecteur
:even
lments slectionns
lments pairs
30/266
:odd
lments impairs
:eq()
lment dont l'index est spcifi
:gt()
lments dont l'index est suprieur (greater than) l'index spcifi
:lt()
lments dont l'index est infrieur (lower than) l'index spcifi
Pour varier les plaisirs, nous allons effectuer des slections dans une srie de paragraphes. Voici le code HTML utilis :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
<p>Paragraphe 4</p>
<p>Paragraphe 5</p>
<script>
$(function() {
//Le code jQuery sera insr ici
});
</script>
</body>
</html>
Nous allons afficher en rouge certains lments de ces listes imbriques en utilisant la mthode jQuery css().
Critre
Slecteur
Paragraphe modifi
lments p pairs
$('p:even')
1, 3, 5
lments p impairs
$('p:odd')
2, 4
lments p aprs le deuxime
$('p:gt(1)') 3, 4, 5
lment p d'index 4
$('p:eq(3)') 4
lments p avant le quatrime $('p:lt(3)') 1, 2, 3
Slecteurs d'lments particuliers

Cette section s'intresse des slecteurs propres certaines balises ou difficilement classables dans les autres catgories.
Regardez le tableau suivant :
Slecteur
lments slectionns
:header
Tous les titres <h1> <h6>
:hidden
lments cachs
:visible lments visibles

:not()
lments qui ne correspondent pas au slecteur spcifi
Voici le code utilis pour tester ces slecteurs :
31/266
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Titre de niveau 1</h1>
<p>Un paragraphe de texte</p>
<div>Texte dans une balise div</div>
<script>
$(function() {
$('div').hide();
//Le code jQuery sera insr ici
});
</script>
</body>
</html>
Ligne 17, l'instruction jQuery dissimule la balise <div> l'aide de la mthode hide(). Testez tour tour les trois instructions
jQuery suivantes :
Critre
Instruction jQuery
Effet
Slection de tous les titres
$(':header').css('color','red');
Les titres <h1>, <h2> et <h3> sont

affichs en rouge.
Affichage des lments cachs
$('div:hidden').show();
L'lment div qui avait t cach la

ligne 17 est affich.
Dissimulation de tous les titres

sauf le titre <h1>
$(':header:not(h1)').hide();
Toutes les balises de titre sont

caches, l'exception de la balise
<h1>.
Pseudo-slecteurs spcifiques aux formulaires

Les formulaires ont leur propre jeu de pseudo-slecteurs CSS. En les utilisant, il est trs simple de s'adresser un lment ou un
type d'lment en particulier. Regardez le tableau suivant :
Pseudo-slecteur
lments slectionns
:input
Tous les lments de type input, textarea, select et button
:button
lments de type button
:checkbox
lments de type checkbox
:checked
lments qui sont cochs
:radio
lments de type radio
:reset
lments de type reset
:image
Tous les boutons de type image
:submit
lments de type submit
:text
lments de type text
:password
lments de type password
32/266
:selected
lments slectionns
:focus
Slectionne l'lment s'il a le focus
:enabled
lments valids
Pour illustrer ces pseudo-slecteurs, nous allons utiliser un formulaire trs classique contenant :
une zone de texte ;
un mot de passe ;
deux boutons radio ;
une zone de texte multiligne ;
un bouton submit et un bouton reset ;
un bouton image.
Voici le code :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
Nom d'utilisateur
<input type="text" name="nom"><br />
Mot de passe
<input type="password" name="pass"><br />
Sexe
Homme <input type="radio" name="sexe" value="H">
Femme <input type="radio" name="sexe" value="F"><br />
Commentaires
<textarea rows="3" name="commentaires">Tapez vos commentaires
ici</textarea><br />
<input type="image" src="chat.jpg"><br />
<input type="submit" value="Envoyer">
<input type="reset" value="Annuler">
</form>
<script>
$(function() {
// Le code jQuery sera tap ici
});
</script>
</body>
</html>
Excut, ce code ressemble l'image suivante :
33/266
Internet Explorer
Nous allons modifier la couleur d'arrire-plan de certains lments du formulaire et modifier la taille du bouton image en utilisant
quelques lignes de jQuery, comme au tableau suivant :
Action accomplir
Instruction jQuery/JavaScript
Effet
Coloration de tous les

champs de saisie
$(':input').css('background','yellow');
Les zones de texte, boutons radio

et boutons ont un arrire-plan de
couleur jaune.
Coloration d'un champ

de saisie particulier
$(':password').css('background','yellow');
Le champ de type password a

un arrire-plan de couleur jaune.
Redimensionnement
d'un champ de type
image
$(':image').css('width','100px');
Le champ input de type image

est redimensionn pour avoir une
largeur de 100 px.
Focus au premier champ

document.forms[0].nom.focus();
de saisie et coloration
$(':focus').css('background','yellow');
en jaune
La premire instruction donne le

focus au premier champ de saisie
et la deuxime colore son arrireplan en jaune.
Slecteurs utiliss dans les tableaux

Si les tableaux n'ont pas de slecteurs spcifiques, plusieurs des slecteurs voqus dans les sections prcdentes sont
cependant bien pratiques pour mettre en forme rapidement des tableaux HTML.
Pseudo-slecteur
lments slectionns
:first
Premier lment
:last
Dernier lment
:eq()
lment dont l'index est spcifi
:gt()
lments dont l'index est suprieur l'index spcifi
:lt()
lments dont l'index est infrieur l'index spcifi
:even
lments d'index pair
:odd
lments d'index impair
34/266
:empty
lments qui n'ont pas d'enfant
:not()
lments qui ne correspondent pas au slecteur spcifi
Nous allons mettre en application ces pseudo-slecteurs en les appliquant sur le tableau dfini en HTML que voici :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<table border=1>
<tr><td></td><td>Salle 1</td><td>Salle 2</td></tr>
<tr><td>Lundi</td><td>X</td><td>X</td></tr>
<tr><td>Mardi</td><td></td><td></td></tr>
<tr><td>Mercredi</td><td>X</td><td></td></tr>
<tr><td>Jeudi</td><td></td><td>X</td></tr>
<tr><td>Vendredi</td><td>X</td><td>X</td></tr>
</table>
</form>
<script>
$(function() {
$('td').css('text-align','center');
// Le code jQuery sera tap ici
});
</script>
</body>
</html>
Nous allons affecter la couleur jaune l'arrire-plan de certaines cellules du tableau en utilisant la mthode jQuery css().
Action recherche
Slecteur
Coloration de la premire cellule
$('td:first')
Coloration de la dernire ligne
$('tr:last')
Coloration des cellules vides
$(':empty')
Coloration des lignes paires
$('tr:even')
Coloration des cellules paires
$('td:even')
Coloration des lignes d'index suprieur 2
$('tr:gt(1)')
Coloration des lignes d'index suprieur 1 et infrieur 5 $('tr:gt(0):lt(4)')

Coloration des cellules 5 11
$('td:gt(4):lt(10)')
Coloration de toutes les lignes l'exception de la dernire $('tr:not(tr:last)')
Parcourir les lments slectionns

Tout au long de ce chapitre, vous avez vu qu'il suffisait d'appliquer une mthode jQuery aux lments slectionns pour agir
immdiatement sur ces lments. Dans cette section, je vais vous montrer une autre faon d'interagir plus finement sur la
slection, en utilisant la mthode each().
Supposons par exemple que trois images soient affiches dans une page Web. Ces images sont repres par leur chemin :
35/266
images1/i1.jpg, images1/i2.jpg et images1/i3.jpg. Comment feriez-vous en jQuery pour que ces images soient
lues dans le dossier images2 et non dans le dossier images1 ? Au risque de vous dcevoir, c'est tout bonnement impossible
avec vos connaissances actuelles en jQuery ! Pour rsoudre cet exercice, il faudrait pouvoir agir de faon individuelle sur
l'attribut src de chaque balise <img>.
Pour arriver nos fins, nous allons utiliser la mthode each(), qui passe en revue les lments slectionns par une requte
jQuery et permet de les modifier en utilisant des instructions JavaScript. La syntaxe de la mthode each() est la suivante :
Code : JavaScript
$('sel').each(function(index){
//Une ou plusieurs instructions JavaScript
});
o :
sel est un slecteur CSS, comme ceux que nous avons utiliss jusqu'ici ;
index est une variable JavaScript qui reprsente la position de l'lment dans la slection. Il aura pour valeurs
conscutives 0, 1, 2, etc. jusqu' ce que tous les lments aient t passs en revue ;
Jusqu'ici, rien de bien mchant ! Cependant, une question se pose : comment accder l'lment courant, c'est--dire l'lment
modifier ? Pour cela, vous devez utiliser le mot this. Si vous avez suivi ce que j'ai dit un peu plus haut, la modification se fera
via l'attribut src de la balise <img>. Eh bien, dans ce cas, vous utiliserez l'expression this.src.
Examinons le code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="images1/i1.jpg">
<script>
$(function() {
$('img').each(function(index){
this.src = 'images2/i' + (index+1) + '.jpg';
});
});
</script>
</body>
</html>
Nous retrouvons nos trois images, l'appel jQuery ainsi que quelques instructions. Lorsque le DOM est disponible, les images
du document sont slectionnes avec le slecteur img et les lments slectionns sont parcourus avec la mthode each().
Une seule ligne est ncessaire pour modifier les adresses des images :
Code : JavaScript
this.src = 'images2/i' + (index+1) + '.jpg';
36/266
Le terme this.src correspond l'attribut src de la balise <img> en cours de traitement. tant donn qu'il y a trois images
traiter, la variable index va prendre les valeurs 0, 1 puis 2. Le terme 'images2/i' + (index+1) + '.jpg' aura donc
pour valeurs conscutives images2/i1.jpg, images2/i2.jpg et images2/i3.jpg, ce qui est exactement l'effet
recherch.
En JavaScript, le signe + est utilis pour concatner (c'est--dire mettre bout bout) deux textes, deux nombres ou un
texte et un nombre. Ici, 'images2/i' + (index+1) + '.jpg' concatne le texte images2/i, le nombre
(index+1) et le texte .jpg. Remarquez les parenthses autour de index+1 ; sans elles, ce n'est pas la valeur
numrique index+1 qui aurait t concatne, mais la valeur numrique de la variable index puis le chiffre 1. Ce qui
aurait fabriqu les chanes images2/i01.jpg, images2/i11.jpg et images2/i21.jpg.
Conversion jQuery/DOM
Conversion d'un lment du DOM en un objet jQuery
Si vous avez suivi attentivement ce tutoriel, vous savez que le simple fait d'utiliser un slecteur jQuery convertit un lment (ou
un ensemble d'lments) du DOM en un objet jQuery. Ainsi par exemple, l'instruction $('div') retourne un objet jQuery qui
donne accs toutes les balises <div> du document. La premire balise <div> est alors accessible avec $("div")[0];, la
deuxime avec $("div")[1];, et ainsi de suite.
Conversion d'une variable JavaScript en un objet jQuery

jQuery et JavaScript font bon mnage ensemble, et il est frquent d'entremler des instructions jQuery et des instructions
JavaScript. Fatalement, un jour ou l'autre, vous voudrez convertir une variable JavaScript en un objet jQuery pour pouvoir lui
appliquer les puissantes mthodes de ce langage. Eh bien, il n'y a rien de plus simple :
Code : JavaScript
var variableJS = 'un simple texte';
var variableJQ = $(variableJS);
La premire ligne cre une variable JavaScript en lui affectant un simple texte. La deuxime la convertit en un objet jQuery en
l'enveloppant avec l'alias $().
Conversion d'un objet jQuery en un lment du DOM

Il est parfois ncessaire d'appliquer un traitement JavaScript un objet jQuery. tant donn que seules les mthodes jQuery
peuvent tre appliques aux objets jQuery, une conversion jQuery vers DOM est alors ncessaire. Pour cela, vous appliquerez la
mthode .get() un slecteur jQuery.
Par exemple, si un document contient plusieurs balises <span>, il est possible de les convertir en un tableau JavaScript avec
l'instruction suivante :
Code : JavaScript
var spans = $('span').get();
Ici, le tableau est stock dans la variable JavaScript spans. La valeur stocke dans la premire cellule du tableau est obtenue
avec spans[0].innerHTML, la valeur stocke dans la deuxime cellule du tableau est obtenue avec
spans[1].innerHTML, et ainsi de suite
Il est possible d'affiner la slection d'lments grce aux slecteurs d'attributs, aux pseudo-slecteurs et aux slecteurs
hirarchiques.
Les formulaires ont leur propre jeu de pseudo-slecteurs. Faciles mmoriser, ils ont le nom des balises correspondantes
et sont prcds d'un : .
37/266
En utilisant un slecteur jQuery, on obtient un objet jQuery qui contient zro, un ou plusieurs lments du DOM. On peut
appliquer un traitement global ces lments en leur appliquant une mthode jQuery. Lorsqu'un traitement global n'est
pas suffisant, on utilise une boucle each.
Avec une boucle each, les diffrents lments slectionns sont parcourus un un. Ils sont reprs par leur index, dont
le nom est spcifi en paramtre de la fonction. Le traitement est ralis par une ou plusieurs instructions JavaScript.
Il est parfois utile de convertir des objets jQuery en lments du DOM et inversement. La transformation DOM vers
jQuery se fait en utilisant un slecteur, et ventuellement en le limitant un des lments retourns. Quant la
transformation jQuery vers DOM, elle repose sur l'utilisation de la mthode get().
38/266
Modifier le contenu d'un lment

Arrivs ce point dans la lecture du cours, vous savez slectionner peu prs tout ce qui peut se trouver dans un document
HTML. Vous vous sentez peut-tre un peu frustrs : quoi bon effectuer des slections si vous n'en faites rien ! Vous avez tout
fait raison.
Ce chapitre va (enfin !) vous montrer comment agir sur les lments slectionns pour les transformer. Vous pourrez ainsi
modifier les attributs et les proprits CSS des lments slectionns, mais aussi ajouter, rorganiser et supprimer des lments
du DOM pour modifier l'agencement de la page sur laquelle vous travaillez.
Poursuivez vite la lecture et surtout amusez-vous bien !
Getters et setters
Plutt que de diffrencier les mthodes charges de lire (ces mthodes sont dites getters, de l'anglais to get qui signifie obtenir
) et de modifier (ces mthodes sont dites setters, de l'anglais to set qui signifie dfinir ) les valeurs HTML ou CSS, les
concepteurs de jQuery ont choisi de leur donner le mme nom. Mais alors, comment les diffrencier, me direz-vous ? C'est trs
simple, puisqu'il suffit d'observer les paramtres de la fonction. Raisonnons sur un exemple pour mieux comprendre de quoi il
retourne. Observez les deux instructions suivantes :
Code : JavaScript
$('h2').css('font-size');
$('h2').css('font-size','2em');
Dans la premire instruction, aucune valeur n'est prcise. Il est impossible de modifier la valeur de la proprit CSS fontsize. La premire mthode est donc un getter ; elle retourne la valeur de la proprit font-size. Pour faciliter sa
manipulation, vous pouvez la mmoriser dans une variable :
Code : JavaScript
var taille = $('h2').css('font-size');
Dans la deuxime instruction, la valeur 2em est prcise dans les paramtres de la mthode css(). Cette valeur sera utilise
pour mettre jour la proprit CSS font-size (ou la crer si elle n'existe pas) de tous les lments retourns par le slecteur.
La deuxime mthode est donc un setter.
Ce qui vient d'tre dit peut se gnraliser toutes les mthodes jQuery :
Si aucune valeur n'est prcise dans les arguments de la mthode, il s'agit d'un getter. La mthode retourne la valeur qui
correspond au premier argument.
Si une valeur est prcise dans les arguments de la mthode, il s'agit d'un setter. Le premier argument de la mthode est
initialis avec cette valeur. S'il n'existe pas, il est cr. S'il existe, il est modifi en consquence.
Ce que renvoie un getter

Un slecteur jQuery peut retourner zro, un ou plusieurs lments. Lorsqu'aucun lment n'est retourn, le getter renvoie la
valeur undefined (c'est--dire non dfini ). Lorsqu'un seul lment est retourn, le getter renvoie la valeur de cet lment.
Enfin, lorsque plusieurs lments sont retourns, le getter renvoie la valeur du premier lment.
Examinez le code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
39/266
</head>
<body>
<div id="listes">
<a href="http://api.jquery.com">API jQuery</a><br>
<a href="http://docs.jquery.com">Documentation jQuery</a><br>
</div>
<script>
$(function() {
var test = $('a').attr('href');
document.write(test);
});
</script>
</body>
</html>
Deux liens hypertextes sont dfinis lignes 9 et 10. Le premier pointe sur la page http://api.jquery.com et le second sur
la page http://docs.jquery.com. la ligne 16, on utilise l'instruction jQuery $('a').attr('href') pour lire le
contenu de l'attribut href des balises <a> contenues dans le document. L'objet retourn est stock dans la variable test. La
ligne 17 affiche cette variable. D'aprs vous, quelle valeur va s'afficher dans le navigateur ?
Comme il a t dit prcdemment, dans le cas d'une rponse multiple, seule la premire valeur est retourne par le getter. Ici, c'est
donc l'adresse http://api.jquery.com qui s'affichera dans le navigateur.
Comme vous pouvez le voir, les deux balises <a> de ce document ne contiennent qu'un seul attribut : href. Si on utilisait
l'instruction var test = $('a').attr('class');, la valeur retourne serait undefined.
Ce qui peut tre pass un setter

Les mthodes setters peuvent se prsenter sous trois formes diffrentes :
Code : JavaScript
$('#logo').attr('src','logo.gif');
$('#logo').attr({src: 'logo.gif', alt: 'Logo de la socit', width:
'200px'});
$("a").attr({target:function(){}});
La premire ligne se contente d'affecter la valeur logo.gif l'attribut src de l'lment d'identifiant logo.
La deuxime ligne cre (s'ils n'existent pas) ou modifie (s'ils existent) plusieurs attributs dans l'lment d'identifiant logo. Ici,
l'attribut src est initialis avec la valeur logo.gif , l'attribut alt avec la valeur Logo de la socit et l'attribut width avec
la valeur 200px .
Enfin, la troisime ligne utilise une fonction JavaScript pour crer ou modifier l'attribut target des balises <a> du document.
Voici par exemple quoi pourrait ressembler la fonction passe en deuxime argument de la mthode attr() :
Code : JavaScript
$('a').attr('target', function() {
if(this.host == location.host) return '_self'
else return '_blank'
});
Si vous avez quelques rudiments de JavaScript, le code utilis dans cette fonction ne devrait pas vous poser de problme. Dans
le cas contraire, je vais dcrire en dtail les actions accomplies.
40/266
Si le lien (this.host) se trouve sur le mme site que la page en cours (== location.host), l'attribut target est
initialis avec la valeur _self (return '_self'). Dans le cas contraire, l'attribut target est initialis avec la valeur
_blank (else return '_blank'). Une fois ces deux lignes excutes, les liens hypertextes seront ouverts :
dans l'onglet courant du navigateur s'ils renvoient vers une page situe dans le mme nom de domaine que la page
actuelle ;
dans une autre fentre (ou un nouvel onglet) du navigateur s'ils se trouvent sur un autre nom de domaine.
Accder aux attributs HTML et aux proprits CSS

Accder aux attributs des balises HTML
Vous utiliserez la mthode attr() pour lire, crer et modifier les attributs des balises HTML. Voici quelques exemples :
$('#plus').attr('src'); retourne l'attribut src de l'lment d'identifiant plus.
$('div').attr('class'); retourne l'attribut class du premier <div>.
$('div').attr('class', 'madiv'); modifie ou cre l'attribut class dans les balises <div> du document
et leur affecte la valeur madiv .
$('#illustration').attr('src','monimage.jpg'); modifie ou cre l'attribut src dans la balise
d'identifiant illustration et lui affecte la valeur monimage.jpg .
Vous savez maintenant comment lire et comment crer/modifier un attribut d'une balise ou d'un ensemble de balises HTML.
Voyons maintenant comment supprimer un attribut dans une balise ou un ensemble de balises. Pour cela, vous utiliserez la
mthode removeAttr() :
Code : JavaScript
$(sel).removeAttr('attribut');
o sel est un slecteur jQuery et attribut est l'attribut que vous voulez supprimer. Cette mthode agit sur tous les
lments slectionns par le slecteur jQuery. Par exemple, pour supprimer l'attribut href de toutes les balises <a> du
document, vous utiliserez l'instruction suivante :
Code : JavaScript
$('a').removeAttr('href');
Pour avoir un aperu des diffrentes balises HTML5 et de leurs attributs, vous pouvez consulter le site
W3Schools.com.
Accder aux proprits CSS

Dans les chapitres prcdents, nous avons utilis plusieurs reprises la mthode jQuery css() pour crer ou modifier les
proprits CSS des balises HTML. Cette mthode peut galement tre utilise comme un getter, pour connaitre la valeur d'une
proprit CSS. Par exemple, l'instruction suivante rcupre la valeur stocke dans l'attribut font-size du premier lment de
classe para et la stocke dans la variable taille :
Code : JavaScript
var taille = $('.para').css('font-size');
41/266
Cette deuxime instruction affecte la valeur 40px l'attribut font-size de tous les lments de classe para :
Code : JavaScript
$('.para').css('font-size', '40px');
Pour avoir un aperu des diffrentes proprits CSS3, vous pouvez consulter le site W3Schools.com.
Travailler avec l'attribut class

Comme tout programmeur (ou apprenti programmeur) Web, vous utilisez certainement l'attribut class pour donner la mme
apparence plusieurs balises HTML. Pour accder aux balises dont l'attribut class a une certaine valeur, il suffit de prciser
cette valeur dans le slecteur en la faisant prcder d'un point. Par exemple, pour slectionner tous les lments de classe vert,
vous utiliserez le slecteur jQuery $('.vert').
Ajouter et supprimer des classes

Trois mthodes consacres aux classes vont vous permettre d'aller plus loin :
addClass() ajoute une classe dans les lments slectionns ;
removeClass() supprime (si elle existe) une classe des lments slectionns ;
toggleClass() accomplit deux actions : si la classe spcifie n'existe pas dans les lments slectionns, elle y est
ajoute. Si elle existe, elle est supprime.
La thorie tant pose, nous allons l'exprimenter en utilisant le code suivant :

Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Manipulation de l'attribut class</title>
<style type="text/css">
.rouge { color: red; }
.vert { color: green; }
.petit { font-size: 100%; }
.grand {font-size: 250%; }
</style>
</head>
<body>
<span id="jean" class="rouge grand">Jean</span>
<span id="pierre">Pierre</span>
<span id="paul" class="vert grand">Paul</span>
<span id="julia">Julia</span>
<span id="eric" class="vert">Eric</span>
<span id="kevin" >Kvin</span>
<script>
$(function() {
// Ajouter le code jQuery ici
});
</script>
</body>
42/266
</html>
Les lignes 6 11 dfinissent quatre styles :

rouge affiche les caractres en rouge ;
vert affiche les caractres en vert ;
petit affiche les caractres avec la taille par dfaut (100%) ;
grand affiche les caractres avec une grande taille (250%).
Les lignes 14 19 affichent six prnoms par l'intermdiaire de balises <span>. Chaque balise a un identifiant unique, et certaines
balises ont un attribut class initialis avec une ou deux classes.
Pour l'instant, aucun code jQuery n'a t insr dans le document. L'image suivante montre quoi il ressemble une fois affich
dans un navigateur.
Firefox
Nous allons exprimenter les mthodes addClass(), removeClass() et toggleClass() en insrant du code jQuery
ligne 30.
La balise <span> d'identifiant julia ne possde aucune classe. Le prnom Julia est donc affich en caractres noirs de taille
standard. Supposons que nous voulions les afficher en rouge ; le code utiliser est le suivant :
Code : JavaScript
$('#julia').addClass('rouge');
Supposons maintenant que le prnom Julia doive tre affich en grands caractres verts. Le code utiliser est le suivant :
Code : JavaScript
$('#julia').addClass('vert grand');
Nous allons maintenant travailler avec le prnom Eric. Ce prnom est affich via une balise <span> de classe vert. Supposons
que vous vouliez afficher le prnom Eric en rouge. L'instruction suivante n'a aucun effet :
Code : JavaScript
$('#eric').addClass('rouge');
43/266
Avez-vous une ide de la raison de cet chec ? Cela vient d'un conflit entre la classe vert (existante) et la classe rouge (que
l'on veut ajouter). Pour parvenir au rsultat souhait, il faudrait supprimer la classe existante et la remplacer par la classe rouge :
Code : JavaScript
$('#eric').removeClass('vert').addClass('rouge');
La premire mthode supprime la classe vert et la deuxime ajoute la classe rouge.

Supposons maintenant que vous vouliez afficher le prnom Paul en petits caractres de couleur rouge. La balise <span>
correspondante utilise deux classes : vert et grand. Pour que le texte s'affiche en caractres rouges de taille standard, vous
devez :
supprimer la classe vert ;
ajouter la classe rouge ;
supprimer la classe grand ;
ajouter la classe petit.
Voici l'instruction utiliser :

Code : JavaScript
$('#paul').removeClass('vert').addClass('rouge').removeClass('grand').addClass('petit'
En utilisant un autre identifiant dans le slecteur, ce chanage de quatre mthodes peut galement s'appliquer une quelconque
balise <span> du document. Ainsi par exemple, cette instruction affiche le prnom Pierre en caractres rouges de taille standard
:
Code : JavaScript
$('#pierre').removeClass('vert').addClass('rouge').removeClass('grand').addClass('petit
Les mthodes removeClass() et addClass() peuvent galement tre remplaces par la mthode toggleClass().
Ainsi, cette instruction affiche le prnom Paul en caractres rouges de petite taille :
Code : JavaScript
$('#paul').toggleClass('vert').toggleClass('rouge').toggleClass('grand').toggleClass
Par contre, si vous l'appliquez au <span> d'identifiant eric, le prnom Eric est affich en caractres rouges de grande taille :
Le <span> tant de classe vert, cette classe est supprime : toggleClass('vert') ;
La classe rouge lui est ajoute puisqu'elle n'existe pas : toggleClass('rouge') ;
Le <span> tant de classe petit, cette classe est supprime : toggleClass('petit') ;
Enfin, la classe grand lui est ajoute puisqu'elle n'existe pas : toggleClass('grand').
44/266
Comme vous le voyez, la mthode toggleClass() doit tre utilise en toute connaissance de cause, sans quoi elle
produira des effets alatoires.
Pour simplifier l'criture, il est possible d'indiquer plusieurs classes spares par des espaces dans les mthodes addclass(),
removeclass() et toggleclass(). Ainsi par exemple, cette instruction :
Code : JavaScript
$('#pierre').removeClass('vert').addClass('rouge').removeClass('grand').addClass('petit
Peut tre simplifie comme suit :

Code : JavaScript
$('#pierre').removeClass('vert grand').addClass('rouge petit');
Tester l'existence de classes

La mthode hasClass() permet de tester si la slection est d'une certaine classe. Supposons par exemple que la balise
<span> suivante soit dfinie :
Code : HTML
<span id="jean" class="rouge grand">Jean</span><br />
L'instruction $('#jean').hasClass('rouge'); renverra la valeur true, car le <span> est de classe rouge.
L'instruction $('#jean').hasClass('petit'); renverra la valeur false, car le <span> n'est pas de classe petit.
Ainsi, on pourra effectuer une action ou une autre en fonction de l'existence d'une classe :
Code : JavaScript
if ($('#jean').hasClass('rouge'))
alert('le span #jean est de classe rouge');
else
alert('le span #jean n\'est pas de classe rouge');
Si vous devez tester l'appartenance plusieurs classes, vous utiliserez la mthode is(). Raisonnons sur la balise <span>
suivante :
Code : HTML
<span id="jean" class="rouge grand">Jean</span><br />
L'instruction $('#jean').is('.grand.rouge'); renverra la valeur true, car le <span> est de classe grand et
rouge. Par contre, l'instruction $('#jean').is('.petit.rouge'); renverra la valeur false, car le <span> n'est
45/266
pas de classe petit. En enveloppant l'instruction jQuery par un if, vous pourrez effectuer une action ou une autre en fonction
de l'existence de deux ou plusieurs classes :
Code : JavaScript
if ($('#jean').is('.grand.rouge'))
alert('le span #jean est de classe grand et rouge');
else
alert('le span #jean n\'est pas de classe grand et/ou rouge');
Travailler avec les formulaires

Vous utiliserez la mthode val() pour tester/modifier la valeur des zones de texte, boutons radio, cases cocher, listes
droulantes et zones de liste contenues dans un document HTML. Pour vous montrer comment utiliser cette mthode, nous
allons raisonner sur un exemple :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
Nom d'utilisateur
<input type="text" id="nom"><br />
Mot de passe
<input type="password" id="pass"><br />
Sexe
H <input type="radio" id="sexe" name="H" value="H">
F <input type="radio" id="sexe" name="F" value="F"><br />
Fonction
<select id="fonction">
<option VALUE="etudiant">Etudiant</option>
<option VALUE="ingenieur">Ingnieur</option>
<option VALUE="enseignant">Enseignant</option>
<option VALUE="retraite">Retrait</option>
<option VALUE="autre">Autre</option>
</select><br /><br />
<input type="submit" id="envoyer" value="Envoyer">
<input type="reset" id="annuler" value="Annuler">
</form>
<script>
$(function() {
// Entrer les instructions jQuery ici
});
</script>
</body>
</html>
Ce code dfinit une zone de texte (nom), un mot de passe (pass), deux boutons radio (sexe), une liste droulante
(fonction), un bouton Envoyer (envoyer) et un bouton Annuler (annuler).
Le tableau suivant donne un aperu des instructions que vous pouvez utiliser pour lire et modifier les donnes stockes dans le
formulaire.
46/266
Instruction jQuery
Effet
$('#nom').val()
Lit le nom de l'utilisateur.
$('#pass').val()
Lit le mot de passe.
$(':radio[name="H"]:checked').val()
Lit l'tat du bouton radio H. Renvoie true si le bouton est slectionn,

sinon false.
$('#fonction').val()
Lit l'lment slectionn dans la liste droulante.
$('#nom').val('Michel')
crit Michel dans la zone de texte Nom d'utilisateur.
$('#pass').val('abcde')
crit abcde dans la zone de texte Mot de passe.
$(':radio').val(['H']);
Slectionne le bouton radio H.
$('#fonction').val('retraite')
Slectionne Retrait dans la liste droulante.
La syntaxe des instructions n'est pas complexe, mais rien de tel qu'un peu de pratique pour qu'elle ne vous pose plus aucun
problme. Je vous suggre donc de vous entraner utiliser ces instructions en les tapant une une sur la ligne 36 du code
prcdent !
Travailler avec les valeurs stockes dans des lments

Lorsque vous dfinissez un slecteur jQuery, vous obtenez un objet jQuery qui fait rfrence zro, un ou plusieurs lments. Si
ces lments contiennent des valeurs textuelles, vous pouvez les lire ou les modifier en utilisant deux mthodes jQuery :
text() retourne/modifie la valeur textuelle stocke dans l'lment ;
html() retourne/modifie le code HTML stock dans l'lment.
Comme toujours, nous allons utiliser un exemple pour bien comprendre le fonctionnement de ces deux mthodes. Voici le code
utilis :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Valeurs stockes dans les lments</title>
</head>
<body>
<h1>Documentation jQuery</h1>
<p><a href='http://docs.jquery.com'>Documentation
officielle</a></p>
<p><a href='http://api.jquery.com'>API jQuery</a></p>
<script>
$(function() {
});
</script>
</body>
</html>
Le corps du document dfinit un titre de niveau 1 et deux paragraphes qui pointent vers la documentation officielle de jQuery et
l'API jQuery. Pour rcuprer le texte stock dans les deux paragraphes, nous utiliserons l'instruction $('p').text();, et
pour afficher ce texte sur l'cran nous utiliserons une bote de dialogue : alert($('p').text());. Tapez cette instruction
la ligne 15 du code prcdent, sauvegardez le document et affichez-le dans le navigateur de votre choix. L'image suivante vous
montre le rsultat sous Internet Explorer.
47/266
Une bote de dialogue s'affiche
Comme vous pouvez le voir, l'instruction retourne les deux valeurs textuelles stockes dans les balises <p>. Ces deux valeurs
sont places l'une la suite de l'autre. Pour accder individuellement la premire et la dernire valeur, le plus simple consiste
utiliser des pseudo-oprateurs :
Code : JavaScript
var premier = $('p:first').text();
var dernier = $('p:last').text();
Si vous voulez accder individuellement chacune des valeurs, vous devez dfinir une fonction comme paramtre de la mthode
text(), comme ceci : function(index, actuel), o index reprsente le numro de la valeur en cours de traitement (
partir de 0), et actuel reprsente la valeur en cours de traitement.
titre d'exemple, pour afficher la valeur contenue dans chaque paragraphe du document, vous pourriez utiliser le code suivant :
Code : JavaScript
$('p').text(function(index,actuel) {
alert('Paragraphe ' + (index+1) + ' : '+actuel);
});
Ce qui vous donnerait la figure suivante.
48/266
Affiche le code HTML du premier
lment
Vous savez maintenant rcuprer sous forme de texte les valeurs stockes dans des lments HTML. Pour en obtenir une forme
HTML, remplacez la mthode text() par la mthode html(). Voici quelques-unes des instructions que vous pourriez utiliser :
Instructions
Rsultat
alert($('p').html());

lment (voir image suivante).
alert($('p:first').html());

lment.
alert($('p:last').html());
Affiche le code HTML du dernier

lment.
$('p').html(function(index,actuel) { alert('Paragraphe
' + (index+1) + ' : '+actuel);});
Affiche individuellement le code HTML

de chaque lment.
En observant les deux premiers exemples de code dans le tableau prcdent, vous vous demandez certainement si une erreur ne
s'est pas glisse dans la colonne Rsultat . En effet, est-ce que les instructions alert($('p').html()); et
alert($('p:first').html()); seraient quivalentes et renverraient toutes deux le code HTML du premier lment ?
Eh bien oui, ces deux instructions sont quivalentes car, contrairement la mthode text(), html() ne balaie pas tous les
lments, mais se contente du premier.
Les mthodes text() et html() peuvent bien videmment tre utilises en tant que setters. Par exemple, pour que le premier
paragraphe du listing prcdent pointe vers le moteur de recherche Google et non vers la documentation officielle de jQuery,
vous utiliserez l'instruction suivante :
Code : JavaScript
$('p:first').html('<a href="http://www.google.com">Moteur de
recherche Google</a>');
Position et taille des lments

Je vais vous montrer comment connatre et modifier la position et les dimensions des lments affichs dans une page Web.
Pour grer la position des lments dans une page HTML, vous utiliserez les mthodes suivantes :
offset() : position absolue d'un lment dans la page (getter et setter) ;
49/266
position() : position relative d'un lment dans son parent (getter seulement).
Les positions retournes par ces mthodes ont deux composantes : l'abscisse left et l'ordonne top. Vous utiliserez donc :
offset().left et offset().top pour connatre la position absolue d'un lment.
position().left et position().top pour connatre la position d'un lment dans son parent.
Pour montrer comment utiliser ces deux mthodes, nous allons utiliser le code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Valeurs stockes dans les lments</title>
#parent {
width: 300px;
height:300px;
position: absolute;
top: 100px;
left: 200px;
background-color: yellow;
}
#enfant {
width: 100px;
height:100px;
position: absolute;
top: 150px;
left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="parent">
Texte dans le parent
<div id="enfant">
Texte dans l'enfant
</div>
</div>
<span id="resultat"></span>
<script>
$(function() {
});
</script>
</body>
</html>
Le corps du document contient deux balises <div> imbriques, d'identifiants respectifs parent et enfant :
Code : HTML
<div id="parent">
Texte dans le parent
<div id="enfant">
50/266
Texte dans l'enfant

</div>
</div>
ainsi qu'une balise <span> qui sera utilise par la suite pour afficher les coordonnes des balises <div> :
Code : HTML
Ces balises sont mises en forme par des rgles CSS, entre les lignes 7 et 23. Les dimensions de la balise d'identifiant parent
sont fixes 300 pixels sur 300. Cette balise est positionne de faon absolue 100 pixels du bord suprieur et 200 pixels du
bord gauche de la page. Enfin, la couleur d'arrire-plan est jaune :
Code : CSS
#parent {
width: 300px;
height:300px;
position: absolute;
top: 100px;
left: 200px;
}
Les dimensions de la balise d'identifiant enfant sont fixes 100 pixels sur 100. Cette balise est positionne de faon absolue
150 pixels du bord suprieur et 100 pixels du bord gauche de son parent. Oui, vous avez bien lu, de son parent : la balise
enfant tant imbrique dans la balise parent, le terme absolute a une valeur toute relative (sans vouloir faire un jeu de
mots). En effet, le positionnement est bien absolu, si on se rfre la balise parent et non au document dans son ensemble.
Enfin, la couleur d'arrire-plan est rouge :
Code : CSS
#enfant {
width: 100px;
height:100px;
position: absolute;
top: 150px;
left: 100px;
}
Si vous affichez ce document dans votre navigateur, vous devriez obtenir l'image suivante.
51/266
Internet Explorer
Connatre la position des lments sur la page

Nous allons ajouter quelques instructions jQuery partir de la ligne 38 pour afficher les coordonnes absolues des deux balises
<div> dans la balise <span> :
Code : JavaScript
var posparent=$('#parent').offset();
var posenfant=$('#enfant').offset();
$('span').text('Parent : x=' + posparent.left + ', y=' +
posparent.top + ' Enfant : x=' + posenfant.left + ', y=' +
posenfant.top);
La ligne 1 utilise la mthode offset() pour connatre les coordonnes absolues de la balise <div> parent. Ces
coordonnes sont mmorises dans la variable posparent.
La ligne 2 est trs proche de la ligne 1, ceci prs qu'elle mmorise les coordonnes absolues de la balise <div> enfant dans
la variable posenfant.
La ligne 3 affiche les coordonnes absolues des balises parent et enfant dans la balise <span>. La mthode text() est
utilise pour insrer du texte dans la balise <span>. Les coordonnes left et top des balises parent et enfant sont
extraites des variables posparent et posenfant. Par exemple, pour l'abscisse de la balise parent, on utilise
posparent.left.
Pourquoi avoir dfini les variables posparent et posenfant?
Deux objectifs ont motiv l'criture de variables intermdiaires :
52/266
1. L'instruction $('span').text() est ainsi allge. En effet, il est plus court d'crire posparent.left que
$('#parent').offset().left. Si vous n'utilisiez pas de variables intermdiaires, l'instruction deviendrait :
Code : JavaScript
$('span').text('Parent : x=' + $('#parent').offset().left + ',
y=' + $('#parent').offset().top + ' Enfant : x=' +
$('#enfant').offset().left + ', y=' +
$('#enfant').offset().top);
2. L'instruction posparent.left s'excute bien plus vite que l'instruction $('#parent').offset().left. Le

code sera donc optimis en utilisant des variables intermdiaires.
Une fois ces trois lignes de code insres aprs la ligne 38, sauvegardez puis affichez le document dans un navigateur. L'image
suivante reprsente ce que vous devriez obtenir.
Le code prcdent a t modifi
grce jQuery
Remplaons les mthodes offset() par position(), sans toucher l'affichage dans la balise <span> :
Code : JavaScript
var posparent=$('#parent').position();
var posenfant=$('#enfant').position();
$('span').text('Parent : x=' + posparent.left + ', y=' +
posparent.top + ' Enfant : x=' + posenfant.left + ', y=' +
posenfant.top);
Les coordonnes renvoyes sont relatives au parent de chaque balise. Le parent de la balise #parent est le document. Elles ne
devraient donc pas changer. Quant au parent de la balise #enfant, il s'agit de la balise #parent. Ses coordonnes seront
donc relatives cette balise.
53/266
Une fois le code modifi et sauvegard, excutez le fichier. Vous devriez obtenir l'image suivante.
Les coordonnes ont chang
Modifier la position des lments

Nous avons vu que la mthode offset() pouvait tre utilise en tant que setter, et donc pouvait modifier les coordonnes
absolues d'un lment. Pour cela, il suffit d'indiquer les nouvelles coordonnes dans les paramtres de la mthode offset().
Par exemple, pour afficher la balise <div> #enfant aux coordonnes absolues (100,100), voici le code mettre en place :
Code : JavaScript
var posenfant = $('#enfant').offset();
posenfant.top = 100;
posenfant.left = 100;
$('#enfant').offset(posenfant);
La premire instruction cre un objet jQuery contenant les coordonnes absolues de la balise #enfant et le mmorise dans la
balise posenfant. Les deux instructions suivantes dfinissent les nouvelles coordonnes et les affectent aux composantes
top et left de l'objet posenfant. Enfin, la quatrime instruction utilise l'objet posenfant pour modifier les coordonnes
absolues de la balise #enfant.
Connatre les dimensions des lments

Examinez l'image suivante. Elle reprsente une balise <div> dans laquelle ont t dfinies :
une marge intrieure (padding) ;
une marge extrieure (margin) ;
une bordure (border).
54/266
Une balise <div> avec padding,
margin et border
Plusieurs mthodes jQuery permettent de connatre les dimensions et de redimensionner les lments de type block :
width() : largeur de l'lment, de la fentre ou du document, sans inclure les marges (padding, border et
margin). Cette mthode peut tre utilise comme getter (pour connatre la largeur d'un lment) ou comme setter (pour
modifier la largeur d'un lment).
innerWidth() : largeur de l'lment, en incluant le padding gauche et droit.
outerWidth() : largeur de l'lment, en incluant le padding gauche et droit et border.
outerWidth(true) : largeur de l'lment, en incluant padding gauche et droit, border et margin gauche et
droit.
height() : hauteur de l'lment, de la fentre ou du document, sans inclure les marges (padding, border et
margin). Cette mthode peut tre utilise comme getter (pour connatre la hauteur d'un lment) ou comme setter (pour
modifier la hauteur d'un lment).
innerHeight() : hauteur de l'lment, en incluant le padding suprieur et infrieur.
outerHeight() : hauteur de l'lment, en incluant border et padding suprieur et infrieur.
outerHeight(true) : hauteur de l'lment, en incluant border, padding suprieur et infrieur et margin
suprieur et infrieur.
Voyons comment utiliser ces mthodes en exploitant les proprits CSS d'une balise <div>. Voici le code utilis :
Code : HTML
<!DOCTYPE html>
<html>
<head>
div {
55/266
width: 250px;
height: 250px;
background-color: #AEEE00;
padding: 35px;
margin: 35px;
border-width : 6px;
border-color: black;
border-style: solid;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.
</div>
<script>
$(function() {
});
</script>
</body>
</html>
Le corps du document accomplit deux actions :

1. Mise en place d'une balise <div> et insertion d'un peu de texte dans cette balise.
2. Mise en place d'une balise <span> d'identifiant #resultat, dans laquelle les dimensions de la balise <div> seront
affiches.
Le style de la balise <div> est redfini dans l'en-tte, entre les balises <style> et </style> :
Dimensions : width: 250px; height: 250px;
Couleur d'arrire-plan : background-color: #AEEE00;
Marges internes : padding: 35px;
Marges externes : margin: 35px;
Bordure : border-width : 6px; border-color: black; border-style: solid;
Pour accder aux dimensions de la balise <div>, nous allons insrer un peu de code jQuery aprs la ligne 30 :
Code : JavaScript
var dimensions = 'width=' + $('div').width() + ', innerWidth=' +
$('div').innerWidth() + ', outerWidth=' + $('div').outerWidth() + ',
outerWidth(true)=' + $('div').outerWidth(true);
dimensions = dimensions + ', height=' + $('div').height() + ',
innerHeight=' + $('div').innerHeight() + ', outerHeight=' +
$('div').outerHeight() + ', outerHeight(true)=' +
$('div').outerHeight(true);
$('#resultat').text(dimensions);
56/266
Les deux premires lignes obtiennent les dimensions de la balise <div> avec les mthodes width(), innerWidth(),
outerWidth(), outerWidth(true), height(), innerheight(), outerHeight() et outerHeight(true).
Ces informations sont mmorises dans la variable dimensions. La troisime ligne affiche le contenu de la variable
dimensions dans la balise <span> en utilisant la mthode jQuery text().
Pour amliorer la lisibilit du code, l'affectation la variable dimensions a t scinde en deux. La premire ligne
interroge toutes les mthodes relatives la largeur de la balise <div> et stocke les valeurs renvoyes dans la variable
dimensions. La deuxime ligne interroge toutes les mthodes relatives la hauteur de la balise <div> et concatne
les valeurs renvoyes la variable dimensions.
Le rsultat se trouve l'image suivante.
Les dimensions sont affiches
sur la page
Aux imprcisions prs, les valeurs retournes par les mthodes jQuery correspondent bien aux dimensions dfinies dans le style
CSS de la balise <div> :
Mthode
Proprit(s) CSS
Valeur
width()
width
250
innerWidth()
width + padding gauche + padding droit
250 + 35 + 35 = 320
outerWidth()
width + padding gauche + padding droit + border gauche + border droit
250 + 35 + 35 + 6 + 6
= 332
outerWidth(true)
width + padding gauche + padding droit + border gauche + border droit +

margin gauche + margin droit
250 + 35 + 35 + 6 + 6
+ 35 + 37 = 402
height()
height
250
innerHeight()
height + padding suprieur + padding infrieur
250 + 35 + 35 = 320
outerHeight()
height + padding suprieur + padding infrieur + border suprieur + border 250 + 35 + 35 + 6 + 6

outerHeight()
outerHeight(true)
57/266
infrieur
= 332
height + padding suprieur + padding infrieur + border suprieur + border 250 + 35 + 35 + 6 + 6

infrieur + margin suprieur + margin infrieur
+ 35 + 35 = 402
Supposons maintenant que vous vouliez modifier les dimensions de la balise <div>. Vous utiliserez pour cela les mthodes
width() et height() en tant que setters. Dans cet exemple, les dimensions de la balise <div> sont fixes 400200 pixels :
Code : JavaScript
$('div').width('400px');
$('div').height('200px');
Associer des donnes aux balises

Utilise en setter, la mthode jQuery $.data() permet d'associer une ou plusieurs donnes textuelles n'importe quel lment
du DOM. Oui, vous avez bien lu ! Il peut s'agir de donnes complmentaires quelconques que vous retrouverez par la suite en
utilisant la mthode $.data() en getter. Rassurez-vous, ces donnes ne surchargent pas la mmoire de l'ordinateur : elles sont
dtruites lorsque l'lment auquel elles sont lies est retir du DOM ou lorsque la page Web change.
La syntaxe de cette mthode est un peu particulire. Supposons que vous vouliez associer une donne unique un lment,
vous utiliserez la syntaxe suivante :
Code : JavaScript
$.data(el, 'nom', nom_don: don);
o :
el est le nom de l'lment concern, sans apostrophes ;
nom est le nom (entre apostrophes) de la variable dans laquelle sera stocke la donne ;
nom_don est le nom (sans apostrophes) associ la donne ;
don est une donne quelconque. S'il s'agit d'un nombre, les apostrophes sont inutiles. Par contre, s'il s'agit d'une chane,
mettez-la entre apostrophes.
Si vous voulez associer plusieurs donnes un lment, vous utiliserez une syntaxe lgrement diffrente :
Code : JavaScript
$.data(el, 'nom', {nom_don1: don1, nom_don2: don2, nom_don3: don3,
etc.});
o :
el est le nom de l'lment concern, sans apostrophes ;
nom est le nom (entre apostrophes) dans lequel sera stocke la donne ;
nom_don1, nom_don2, nom_don3, etc. sont les noms (sans apostrophes) associs aux donnes ;
don1, don2, don3, etc. sont des donnes quelconques. Lorsqu'une de ces donnes est numrique, ne mettez pas
d'apostrophes. Au contraire, lorsqu'une de ces donnes est une chane, mettez-la entre apostrophes.
Pour retrouver une donne associe un lment, utilisez la syntaxe suivante :

Code : JavaScript
58/266
var uneVariable = $.data(el,'nom').nom_don;
o :
uneVariable est une variable quelconque ;
el est le nom de l'lment (sans apostrophes) auquel une donne a t associe ;
nom est le nom (entre apostrophes) dans lequel a t stocke la donne ;
nom_don est le nom de la donne retrouver, sans apostrophes.
Si tout ceci est confus pour vous, un petit exemple va vous apporter la lumire ! Dans le code suivant, nous allons associer trois
donnes une balise <div>, retrouver ces donnes et les afficher dans trois balises <span> enfants du <div>. Voici le code :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="mondiv">
Les valeurs stockes dans la balise <div> sont : <span
id="sp1"></span>, <span id="sp2"></span> et <span id="sp3"></span>.
</div>
<script>
$(function() {
var div = $('div')[0];
$.data(div, 'mesValeurs', {premier: 'bonjour', deuxieme: 12,
troisieme: 'http://www.siteduzero.com'});
var val1 = $.data(div, 'mesValeurs').premier;
var val2 = $.data(div, 'mesValeurs').deuxieme;
var val3 = $.data(div, 'mesValeurs').troisieme;
$('#sp1').text(val1);
});
</script>
</body>
</html>
Remarquez :
Les codes HTML < et > qui apparaissent autour du mot div. Ces codes remplacent les caractres < et >. Sans
eux, le texte <div> serait interprt comme une balise, et le code ne produirait pas l'effet recherch.
L'emplacement stratgique des balises <span>. En y insrant des donnes, elles complteront la phrase Les valeurs
stockes [] d'une faon naturelle, comme si la phrase avait t crite en dur .
La partie intressante du code se trouve entre les lignes 15 et 22.

Pour allger l'criture, la ligne 15 commence par stocker le premier lment div dans la variable div. Ainsi, il suffira d'crire div
la place de $('div')[0] :
Code : JavaScript
59/266
La ligne 16 attache trois donnes nommes premier , deuxieme et troisieme la variable mesValeurs et relie cette
variable l'unique balise <div> du document. Remarquez les apostrophes utilises autour des donnes textuelles premier et
troisieme :
Code : JavaScript
$.data(div, 'mesValeurs', {premier: 'bonjour', deuxieme: 12,
troisieme: 'http://www.siteduzero.com'});
Les lignes 17 19 sont construites sur le mme modle. titre d'exemple, la ligne 17 lit la valeur premier de la variable
mesValeurs associe la balise <div> et la mmorise dans la variable val1 :
Code : JavaScript
var val1 = $.data(div, 'mesValeurs').premier;
Les lignes 20 22 insrent les trois valeurs rcupres lignes 17 19 dans les balises <span> #sp1, #sp2 et #sp3 :
Code : JavaScript
Si vous excutez ce code dans votre navigateur, vous devriez obtenir le mme rsultat qu' l'image suivante.
Le code excut dans le navigateur

Je vous ai dit que les donnes associes aux lments ne surchargeaient pas la mmoire de l'ordinateur, car elles taient dtruites
lorsque l'lment auquel elles sont lies est retir du DOM, lorsque la page Web change ou que le navigateur est ferm.
Je voudrais vous parler d'une troisime technique, moins destructrice que les deux premires puisqu'elle se contente de
supprimer les donnes associes un lment sans supprimer l'lment et sans changer de page. Il s'agit de la mthode
removeData() dont voici la syntaxe :
Code : JavaScript
$.removeData(el,'nom');
60/266
o :
el est le nom de l'lment (sans apostrophes) auquel les donnes ont t associes ;
nom est le nom (entre apostrophes) de la variable dans lequel les donnes ont t stockes.
Par exemple, pour supprimer la variable mesValeurs associe la premire (et unique d'ailleurs) balise <div> de l'exemple
prcdent, vous utiliserez les instructions suivantes :
Code : JavaScript
$.removeData(div, 'mesValeurs');
La premire instruction dfinit la variable div et y stocke le premier lment <div>. La deuxime instruction supprime la
variable mesValeurs qui tait associe premire balise <div>.
Les termes getter et setter correspondent aux mthodes de lecture (getter) et d'criture (setter) du langage jQuery. Ils
viennent des verbes anglais to get (obtenir) et to set (dfinir). En jQuery, un getter est une mthode qui obtient une
valeur HTML ou CSS en interrogeant le code. Inversement, un setter est une mthode qui modifie une valeur HTML ou
CSS dans le code du document.
Un slecteur jQuery peut retourner zro, un ou plusieurs lments. Lorsqu'aucun lment n'est retourn, le getter renvoie
la valeur undefined (c'est--dire non dfini ). Lorsqu'un seul lment est retourn, le getter renvoie la valeur de cet
lment. Les setters reoivent gnralement plusieurs paramtres textuels qui permettent de modifier une proprit CSS,
un attribut HTML ou encore d'insrer un lment dans le code.
Vous utiliserez la mthode attr() pour lire, crer et modifier les attributs des balises HTML.
Vous utiliserez la mthode css() pour lire, crer et modifier les proprits CSS attaches au document.
La mthode addClass() ajoute la slection l'attribut class dont le nom est indiqu entre les parenthses. La
mthode removeClass() supprime un attribut class dans une balise. Enfin, la mthode hasClass() permet de
tester l'existence d'une classe dans les lments retourns par le slecteur.
La mthode val() permet de connatre et de modifier la valeur des zones de texte, boutons radio, cases cocher, listes
droulantes et zones de liste contenues dans un document HTML.
Les mthodes text() et html() permettent de travailler avec les valeurs stockes dans des lments HTML :
text() retourne/modifie la valeur textuelle stocke dans l'lment, et html() retourne/modifie le code HTML stock
dans l'lment.
Pour connatre/modifier la position absolue d'une balise dans le document, vous utiliserez les mthodes offset() et
position(). Pour connatre les dimensions d'un lment, vous utiliserez les mthodes width(), innerWidth(),
outerWidth(), height(), innerHeight(), et outerHeight().
En utilisant le langage jQuery, il est possible d'associer des donnes aux balises HTML. Pour cela, on utilise la mthode
$.data(). Dans un premier temps, on affecte une ou plusieurs donnes la balise en utilisant la mthode $.data()
en tant que setter. Lorsque cela est ncessaire, la ou les valeurs associes la balise sont rcupres en utilisant la
mthode $.data() en getter. Lorsque les donnes associes une balise ne sont plus ncessaires, on peut les
supprimer avec la mthode $.removeData().
61/266
Insrer et remplacer des lments dans le DOM

Nous allons ici nous intresser une autre facette de jQuery : la modification du DOM. Les mthodes qui vont tre examines
permettent d'insrer, de remplacer et de supprimer des lments quelconques dans le DOM, et ainsi de modifier le contenu de la
page affiche dans le navigateur.
Insrer du contenu
Toutes les mthodes passes en revue dans cette section seront testes sur le code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Insertion, copie et suppression de donnes</title>
</head>
<body>
<h2 id="un">Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<hr>
<h2 id="deux">Lorem ipsum suite</h2>
<p>
</p>
<hr>
<h2 id="trois">Liste puces</h2>
<ul>
<li>Premier lment</li>
<li>Deuxime lment</li>
<li>Troisime lment</li>
<li>Quatrime lment</li>
</ul>
<script>
$(function() {
});
</script>
</body>
</html>
L'image suivante vous montre comment apparat la page lorsqu'aucun code jQuery n'a t insr.
62/266
La page HTML avant
l'intervention du code jQuery

Plusieurs mthodes trs pratiques permettent d'insrer du contenu dans ou en dehors de la slection (entendez par l des
lments retourns par le slecteur jQuery) :
append() insre du contenu la fin de la slection ;
prepend() insre du contenu au dbut de la slection ;
before() insre du contenu avant la slection ;
after() insre du contenu aprs la slection.
Voici quelques exemples d'utilisation de ces mthodes.
Ajout d'une espace et de trois astrisques la suite de chaque titre <h2>

Code : JavaScript
$('h2').append(' ***');
Ajout de trois astrisques et d'une espace avant chaque titre <h2>

Code : JavaScript
$('h2').prepend('*** ');
Ajout d'une ligne de sparation horizontale avant le titre <h2> #trois

Code : JavaScript
63/266
$('#trois').before('<hr>');
Insertion de deux sauts de ligne aprs chaque balise <hr>

Code : JavaScript
$('hr').after('
');
Comme vous le voyez, c'est plutt simple ! Passons donc la suite.
Remplacer des lments

Pour remplacer la slection, utilisez la mthode replaceWith() en prcisant le nouvel lment entre les parenthses. Par
exemple, pour remplacer les balises <hr> par des sauts de ligne, utilisez l'instruction suivante :
Code : JavaScript
$('hr').replaceWith('
');
Une petite question tout hasard : quelle instruction jQuery utiliseriez-vous pour remplacer tous les titres <h2> du document
par des titres <h3> ?
Alors, une petite ide ? Peut-tre avez-vous song cette instruction :

Code : JavaScript
$('h2').replaceWith('<h3>');
Mais quelle dception lorsque vous avez affich le document dans votre navigateur ! En effet, vous devriez avoir quelque chose
ressemblant l'image suivante.
64/266
La mthode replaceWith() n'a pas
produit l'effet escompt

Les titres <h2> ont tout bonnement disparu ! Comprenez-vous ce qui s'est pass ? Le slecteur $('h2') ne s'est pas content
de slectionner les balises <h2>, mais galement leur contenu et la balise fermante </h2>. Les trois titres de niveau 2 ont donc
t remplacs par une balise <h3>, sans balise fermante, ce qui a provoqu leur disparition.
Mais alors, est-ce que nous nous trouvons face la premire lacune de jQuery ? Bien sr que non ! La solution consiste
parcourir les lments slectionns avec la mthode each() et effectuer un remplacement replaceWith() personnalis :
Code : JavaScript
$('h2').each(function(){
var elemH2 = $(this);
elemH2.replaceWith('<h3>' + elemH2.text() + '</h3>');
});
La premire ligne slectionne tous les lments <h2> du document ($.('h2')) et applique une fonction chacun d'entre eux
(each(function(){).
Pour limiter l'criture et amliorer les performances du code, la deuxime ligne dfinit la variable elemH2 et y mmorise l'lment
<h2> en cours de traitement.
La troisime ligne applique la mthode replaceWith() l'lment jQuery en cours de traitement (elemH2.replaceWith)
et le remplace par une balise ouvrante <h3>, suivie du texte contenu dans l'lment en cours de traitement (elemH2.text())
et d'une balise fermante </h3>.
La quatrime ligne met fin la fonction et la mthode each().
Insrer des lments
Vous avez prcdemment appris insrer du contenu dans ou en dehors des lments slectionns par un slecteur jQuery. Ici,
je vais vous montrer comment insrer des lments dans l'arborescence du DOM. Les mthodes utilises sont les suivantes :
eai.appendTo(cible) insre un lment la fin de la cible ;
65/266
eai.prependTo(cible) insre un lment au dbut de la cible ;

eai.insertBefore(cible) insre un lment avant la cible ;
eai.insertAfter(cible) insre un lment aprs la cible.
eai reprsente l'lment insrer et cible reprsente l'lment avant ou aprs lequel doit se faire l'insertion.
Pour dcrire eai et cible, vous pouvez utiliser un slecteur jQuery, un nom d'lment, une chane HTML ou un objet
jQuery.
Peut-tre vous demandez-vous si les mthodes appendTo() et insertAfter() ne sont pas quivalentes ? Et de mme, si
les mthodes prependTo() et insertBefore() ne sont pas quivalentes ?
Eh bien, appendTo() insre un lment la fin de la cible, tout en restant l'intrieur de cette dernire, alors que
insertAfter() insre un lment aprs la cible.
D'une manire identique, prependTo() insre un lment au dbut de la cible tout en restant l'intrieur de cette dernire,
alors que insertBefore() insre un lment avant la cible.
Voici quelques exemples d'utilisation de ces mthodes pour mieux les comprendre (ces exemples se basent sur le code HTML
prsent au dbut de ce chapitre). Les instructions jQuery sont insres aprs la ligne 32.
Ajout d'un lment de liste puces aprs le deuxime lment

Code : JavaScript
$('<li>Deuxime lment bis</li>').insertAfter($('li:nthchild(2)'));
La puce Deuxime lment bis
a t insre aprs la puce Deuxime lment
Ajout d'une balise <hr> avant chaque titre <h2>

Code : JavaScript
$('<hr>').prependTo($('h2'));
66/266
Un sparateur horizontal a t
insr avant chaque titre de niveau 2

Et maintenant, une simple petite question pour vous inciter rflchir sur la mthode prependTo(). D'aprs vous, que produit
l'instruction suivante ?
Code : JavaScript
$('<li>Deuxime lment bis</li>').prependTo($('li:nth-child(2)'));
Sans trop y rflchir, vous pensez certainement qu'une puce Deuxime lment bis est ajoute avant la puce Deuxime
lment . Pourtant, si vous excutez le code, vous obtenez l'image suivante.
L'effet de la mthode prependTo() n'est pas celui qui tait attendu
D'o vient le problme ?
Rappelez-vous ce que j'ai dit propos des diffrences entre les mthodes prependTo() et insertBefore(). La premire
effectue une insertion l'intrieur de la cible et la deuxime avant la cible. Aprs l'excution de l'instruction jQuery, le code
HTML de la liste puces est donc le suivant :
Code : HTML
67/266
<ul>
<li><li>Deuxime lment bis</li>Deuxime lment</li>
</ul>
Totalement incohrent d'un point de vue smantique, ce code est mal interprt par le navigateur qui affiche quelque chose
d'assez inattendu ! Ne rejetez pas la faute sur lui : dans ce cas prcis, la mthode insertBefore() tait plus adapte la
situation.
Dplacer du contenu
Pour dplacer un lment existant dans le document, vous utiliserez les mthodes append(), prepend(), before() ou
after() :
$('sel').append(depl);
$('sel').prepend(depl);
$('sel').before(depl);
$('sel').after(depl);
o sel slectionne l'lment avant ou aprs lequel doit se faire le dplacement et depl reprsente l'lment dplacer.
Les mthodes append() et after() sont comparables : elles dplacent toutes deux un lment aprs un autre lment. Mais
attention, avec append() le dplacement se fait avant la balise de fin de l'lment slectionn, alors qu'avec after() elle se
fait aprs cette balise.
Les mthodes prepend() et before() sont galement comparables : elles dplacent toutes deux un lment avant un autre
lment. Mais attention, avec prepend() le dplacement se fait aprs la balise de dbut de l'lment slectionn, alors qu'avec
before() elle se fait avant cette balise.
titre d'exemple, considrons le code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Dplacement de contenu</title>
</head>
<body>
<h2>Lorem ipsum</h2>
<p id="un">
</p>
<hr>
<h2>Lorem ipsum suite</h2>
<p id="deux">
</p>
<hr>
<script>
$(function() {
68/266

});
</script>
</body>
</html>
Ce code dfinit deux titres de niveau 2, chacun suivi d'un paragraphe de texte et d'un trait de sparation horizontal, comme le
montre l'image suivante.
Le document, avant toute
intervention du code jQuery

Remplacez la ligne 25 par l'instruction suivante, sauvegardez le code et rafrachissez la page dans le navigateur.
Code : JavaScript
$('#deux').after($('#un'));
Le rsultat est l'image suivante.
69/266
Le paragraphe d'identifiant #deux
a t dplac la suite du paragraphe d'identifiant #un

Comme vous pouvez le constater, le paragraphe d'identifiant #un n'est plus affich aprs la premire balise <h2>, mais aprs le
paragraphe d'identifiant #deux. Il a donc t dplac depuis la position qu'il occupait vers sa nouvelle position.
Dupliquer des lments
Comme vous avez pu le constater prcdemment, la mthode after() (ceci est galement valable pour les mthodes
append(), prepend() et before()) dplace un lment existant vers la position indique dans le slecteur. Si vous voulez
non pas dplacer, mais dupliquer un lment existant, vous appliquerez la mthode clone() un slecteur et, selon l'effet
recherch, vous la ferez suivre de la mthode appendTo(), prependTo(), insertBefore() ou insertAfter().
titre d'exemple, nous allons dupliquer le paragraphe d'identifiant #deux et l'insrer avant le paragraphe d'identifiant #un. Voici
l'instruction utiliser :
Code : JavaScript
$('#deux').clone().insertBefore($('#un'));
70/266
Le paragraphe d'identifiant #deux
a t clon et copi avant le paragraphe d'identifiant #un

Si l'lment dupliqu a un ou plusieurs descendants, ils font eux aussi partie du clonage. Nous allons illustrer ce comportement
en dupliquant tous les lments qui composent la liste puces du code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Dplacement de contenu</title>
</head>
<body>
<h2>Lorem ipsum</h2>
<p id="un">
</p>
<hr>
<ul>
</ul>
71/266
<hr>
<script>
$(function() {
});
</script>
</body>
</html>
Ce code affiche un titre 2 suivi d'un paragraphe de texte et d'un trait de sparation, puis un autre titre 2 suivi d'une liste puces
compose de quatre lments, comme le montre l'image suivante.
Le code HTML prcdent sans
aucune instruction jQuery.

Insrez l'instruction suivante ligne 27 :
Code : JavaScript
$('ul').clone().insertBefore($('h2:first'));
Cette instruction slectionne la balise <ul> ($('ul')), la duplique (clone()) et place le clone avant la premire balise <h2>
(insertBefore($('h2:first'))). Admirez le rsultat visible l'image suivante.
72/266
La liste puces a t clone et
copie avant le premier titre de niveau 2

Lorsque plusieurs lments sont retourns par le slecteur, ils font tous partie du clonage. Ainsi par exemple, pour dfinir le
sommaire du document en y faisant figurer tous les titres de niveau 2, vous pourriez utiliser les instructions suivantes :
Code : JavaScript
$('<h1>Sommaire</h1>').insertBefore($('h2:first'));
$('h2').clone().insertAfter($('h1'));
La premire instruction insre le titre de niveau 1 Sommaire ($('<h1>Sommaire</h1>')) avant le premier titre de niveau
2 du document (insertBefore($('h2:first'))).
La deuxime instruction slectionne tous les titres de niveau 2 du document ($('h2')), les clone (clone()) et les insre
aprs le titre de niveau 1 (insertAfter($('h1'))).
73/266
Le sommaire a t cr
automatiquement grce jQuery
Entourer des lments

La mthode wrap() permet d'entourer un lment par un ou plusieurs autres lments crs la vole. Voici sa syntaxe :
Code : JavaScript
$('sel').wrap('elwrap');
o sel est un slecteur jQuery quelconque et elwrap reprsente le ou les lments (ouvrants et fermants) insrer autour
de la slection. Ces lments peuvent tre du code HTML, un slecteur, un lment jQuery ou un lment du DOM. Quelle que
soit leur nature, ils encadrent les lments entourer.
Pour bien comprendre le fonctionnement de cette mthode, nous allons raisonner sur le code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Wrap</title>
</head>
74/266
<body>
<ul>
</ul>
<script>
$(function() {
});
</script>
</body>
</html>
Ce code affiche un titre de niveau 2 et une liste puces compose de quatre lments. Supposons que vous vouliez afficher les
lments de la liste puces en italique. Pour cela, il vous suffit de les entourer avec la balise <i> en utilisant la mthode
wrap(). Insrez l'instruction suivante ligne 19 :
Code : JavaScript
$('li').wrap('<i></i>');
Sauvegardez le document et affichez-le dans votre navigateur. Les quatre lments de la liste puces sont maintenant affichs en
italique, comme le montre l'image suivante.
Chaque lment <li> est en
italique
Et si vous voulez afficher les lments de la liste en rouge, gras, italique et soulign, vous utiliserez l'instruction suivante :
Code : JavaScript
$('li').wrap('<font color="red"><b><i><u></u></i></b></font>');
75/266
Passons la vitesse suprieure en utilisant une fonction pour personnaliser les lments insrs autour de la slection.
La mthode wrap() a deux variantes :
wrapInner(), pour entourer le contenu d'un lment par un autre lment cr la vole ;
wrapAll(), pour entourer d'une faon globale les lments slectionns avec un autre lment cr la vole.
Pour illustrer le fonctionnement de la mthode wrapInner(), supposons qu'une page HTML dfinisse le paragraphe suivant :
Code : HTML
<p>Le texte du paragraphe</p>
Si vous excutez l'instruction jQuery suivante :

Code : JavaScript
$('p').wrapInner('<i></i>');
le paragraphe se transforme en :
Code : HTML
<p><i>Le texte du paragraphe</i></p>
Si vous aviez utilis la mthode wrap() la place :

Code : JavaScript
$('p').wrap('<i></i>');
le paragraphe se serait transform en :

Code : HTML
<i><p>Le texte du paragraphe</p></i>
Pour illustrer le fonctionnement de la mthode wrapAll(), nous allons raisonner sur le code suivant :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Wrap</title>
div { background: red;}
</style>
76/266
</head>
<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
un texte isol
<p>Paragraphe 4</p>
un autre texte isol
<script>
$(function() {
});
</script>
</body>
</html>
Si vous excutez ce code dans un navigateur, vous obtiendrez l'image suivante.
Internet Explorer
Comme vous le voyez, les paragraphes et le texte isol apparaissent dans l'ordre o ils ont t dfinis. Nous allons maintenant
appliquer la mthode wrapAll() aux paragraphes (autrement dit aux balises <p>) du document et les entourer d'une balise
<div>. Le style div a t dfini dans le document : les lments de ce style auront un arrire-plan rouge. Insrez l'instruction
suivante en ligne 22 :
Code : JavaScript
$('p').wrapAll('<div></div>');
Sauvegardez le document, puis rafrachissez l'affichage dans le navigateur. Vous devriez obtenir l'image suivante.
77/266
Les quatre balises <p> ont t
rassembles
Les paragraphes ont t rassembls et entours par une balise <div>. Le code HTML a t transform comme suit :
Code : HTML
<div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
<p>Paragraphe 4</p>
</div>
un texte isol un autre texte isol
Supprimer des lments

La mthode remove() permet de supprimer les lments retourns par un slecteur jQuery. Par exemple, pour supprimer tous
les titres <h2> du document, utilisez cette instruction :
Code : JavaScript
$('h2').remove();
Ou encore, pour supprimer la troisime puce dans l'unique liste puces du document, utilisez l'instruction suivante :
Code : JavaScript
$('li:nth-child(2)').remove();
Un dernier exemple. Pour supprimer tous les paragraphes qui contiennent le mot quelconque , utilisez l'instruction suivante :
Code : JavaScript
$('p').remove(':contains("quelconque")');
78/266
Pour insrer du contenu dans un document, vous utiliserez les mthodes append(), prepend(), before() et
after(). Pour remplacer des lments, vous utiliserez la mthode replaceWith(). Pour insrer des lments dans
le DOM, vous utiliserez les mthodes appendTo(), prependTo(), insertBefore() et insertAfter().
Enfin, pour dupliquer des lments, vous utiliserez la mthode clone(), chane la mthode appendTo(),
prependTo(), insertBefore() ou insertAfter().
Les mthodes wrap(), wrapInner() et wrapAll() permettent d'entourer un lment par un ou plusieurs autres
lments crs la vole.
Pour supprimer un lment, vous utiliserez la mthode remove().
79/266
TP : Questionnaire interactif en jQuery

Vous voici donc arrivs au premier TP ! TP signifie Travaux Pratiques . En clair, vous allez pratiquer ce que nous venons de
voir. Rgulirement, je vous ferai travailler grce ce genre d'exercices et vous allez vite voir que, mine de rien, vous savez
beaucoup de choses.
videmment, je ne vous demanderai jamais rien que vous ne soyez capables de faire. Enfin pas vraiment Il se peut que cela
arrive, mais dans ce cas je vous donnerai la marche suivre pour parvenir la fin du TP.
Bon, vous tes prts ? Alors allons-y ! Je vous propose de crer un QCM (questionnaire choix multiples) interactif en jQuery.
Instructions pour raliser le TP

Dans ce premier TP, vous allez mettre en place un QCM interactif en partant d'un modle HTML que je vais vous fournir. En
utilisant des instructions jQuery, vous devrez transformer ce modle de base pour obtenir quelque chose ressemblant l'image
suivante.
Voil quoi devra ressembler le QCM

Pour arriver ce rsultat, vous devrez :
1. Dissimuler les rponses aux questions ;
2. Mettre en forme les lments affichs sur l'cran ;
3. Ragir au survol du lien Tester les rponses en affichant, pour chaque question :
a. L'icne bon.png si la rponse est bonne ou l'icne mauvais.png si la rponse est mauvaise.
b. Le texte explicatif en vert si la rponse est bonne ou en rouge si elle est mauvaise.
Normalement, seule la troisime tape devrait vous poser un problme. Les autres ont dj t vues. Si vous rencontrez le
moindre problme, n'hsitez pas (re)lire les chapitres prcdents correspondants.
80/266
Si la troisime tape peut vous poser des problmes, ce n'est pas tant par sa complexit que par le fait que vous devrez utiliser
une instruction jQuery qui n'a pas encore t vue et qui donne de l'interactivit au QCM. J'aurais pu limiter votre travail une
pure mise en forme, mais cela aurait vraiment t dommage de ne pas intgrer de l'interactivit dans ce formulaire. Je vais donc
vous donner l'instruction jQuery utiliser, sans m'tendre sur le sujet ni expliquer son fonctionnement.
La mthode utiliser est la suivante :
Code : JavaScript
$('a').hover(
function() {
// Les instructions excuter au survol du lien
},
function() {
// Les instructions excuter lorsque le lien n'est plus
survol
}
);
Vous voyez, il n'y a rien de bien sorcier. Vous auriez presque pu trouver la mthode sans mon aide tant elle est proche de son
homologue CSS hover.
Voici le code HTML de dpart :
Code : HTML
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Questionnaire interactif en jQuery</title>
</head>
<body>
<form>
<a href="">Tester les rponses</a>
<div class="question">
<div class="texte">
<h2>Question 1</h2>
Le code jQuery s'excute :<br>
<input type="radio" id="r1" name="q1">Dans le
navigateur<br>
<input type="radio" id="r2" name="q1">Sur le serveur o
est stock le code<br>
<input type="radio" id="r3" name="q1">Tantt dans le
navigateur, tantt sur le serveur<br>
<br><span class="reponse" id="reponse1">Le code jQuery n'est
autre que du JavaScript. A ce titre, il s'excute toujours sur les
clients (ordinateurs, tablettes et tlphones) qui font rfrence
ce code via une page HTML. La bonne rponse est donc la
premire.</span>
</div>
<img id="img1" src="question.png" />
</div>
<div class="texte">
<h2>Question 2</h2>
Lorsque l'on veut excuter du code jQuery, attendre la
disponibilit du DOM est :<br>
<input type="radio" id="r4" name="q2">Vital<br>
<input type="radio" id="r5" name="q2">Inutile<br>
81/266
<input type="radio" id="r6" name="q2">Parfois important,

parfois sans importance<br>
<br><span class="reponse" id="reponse2">Il est impratif
d'attendre la disponibilit du DOM avant d'excuter du code jQuery.
Sans quoi, ce code pourrait s'appliquer un lment indisponible et
provoquer un comportement inattendu, voire mme un plantage du
navigateur.</span>
</div>
</div>
<div class="texte">
<h2>Question 3</h2>
Pour chaner deux mthodes jQuery :<br>
<input type="radio" id="r7" name="q3">Il faut les mettre
l'une la suite de l'autre en les sparant par une virgule<br>
l'une la suite de l'autre en les sparant par un point dcimal<br>
<input type="radio" id="r9" name="q3">Il est impossible de
chaner deux mthodes jQuery<br>
<br><span class="reponse" id="reponse3">L'excution d'un
slecteur jQuery produit un objet jQuery sur lequel il est possible
d'appliquer une mthode jQuery. Cette mthode produit elle-mme un
objet jQuery. Il est donc possible de lui appliquer une autre
mthode en utilisant le caractre de liaison habituel : le point
dcimal.</span>
</div>
</div>
</form>
<script>
$(function() {
});
</script>
</body>
</html>
Examinons la structure de ce document.

L'en-tte ne contient aucun code de mise en forme CSS, ce qui est tout fait normal puisque vous devrez crire ce code de mise
en forme en jQuery ! Le corps du document contient un formulaire qui contient lui-mme un lien hypertexte ainsi que
trois balises <div> qui correspondent aux trois questions du QCM.
Chaque balise <div> contient deux lments essentiels :
1. Une autre balise <div> dans laquelle seront affichs tous les lments textuels ;
2. Une balise <img> d'identifiant img1, qui pointe vers l'image question.png.
Cet agencement a t cr pour faciliter la mise en forme flottante de l'image par rapport au texte.
l'intrieur de la balise <div> de classe texte, six lments :
Un titre de niveau 2 ;
Le texte de la question ;
Trois boutons radio (d'identifiants r1, r2 et r3 et d'attribut name q1) suivis des rponses possibles ;
Une balise <span> dans laquelle s'affiche le texte qui explique la bonne rponse lorsque l'utilisateur place le pointeur de
la souris sur le lien Tester les rponses .
82/266
Le code se termine de faon trs classique par l'intgration de la bibliothque jQuery et par l'attente de la disponibilit du DOM.
C'est ici que vous interviendrez en insrant autant d'instructions jQuery que ncessaires pour arriver au rsultat demand.
Avant de vous laisser votre imagination et votre clavier, je vais vous fournir les trois images utilises dans le document.
Allez, c'est vous de jouer !
Correction
J'espre que vous n'avez pas eu trop de problmes dans ce TP. Voici ma correction, dans laquelle je passe en revue tous les
points qui auraient pu coincer .
Dissimuler les rponses aux questions

Toutes les rponses ont la mme classe : reponse. Pour les dissimuler, il suffit d'excuter la mthode hide() sur les objets
renvoys par le slecteur $('.reponse') ds la disponibilit du DOM :
Code : JavaScript
$(function() {
// Dissimulation des rponses
$('.reponse').hide();
Mettre en forme les lments affichs sur l'cran

Dans un premier temps, vous allez mettre en forme les balises <div> de classe question, c'est--dire les balises qui
correspondent aux questions poses dans le QCM. En utilisant le slecteur $('.question'), vous pouvez facilement isoler
les trois balises <div> de classe question. Il suffit alors d'appliquer plusieurs reprises la mthode jQuery css() ce
slecteur pour modifier les caractristiques des balises <div> :
Code : JavaScript
var q = $('.question');
//Mmorisation du slecteur dans
une variable pour optimiser le code
q.css('background', '#9EEAE0'); //Couleur d'arrire-plan
q.css('border-style', 'groove'); //Type de la bordure
q.css('border-width', '4px');
//Largeur de la bordure
q.css('width', '900px');
//Largeur des balises <div> de
classe question
q.css('height', '250px');
//Hauteur des balises <div> de
classe question
q.css('margin', '20px');
//Marge autour des balises <div> de
classe question
Textes et images en affichage flottant

Les caractristiques de mise en forme des balises de classe question tant dfinies, nous allons maintenant faire flotter les
lments textuels gauche et l'image droite de ces balises. Cette mise en page se fera en agissant sur la proprit CSS float
des balises de classe texte et des images.
La premire instruction fait flotter la balise <div> de classe texte gauche de la balise <div> parente, c'est--dire de la balise
<div> de classe question :
83/266
Code : JavaScript
$('.texte').css('float', 'left');
La deuxime instruction donne 90% de la largeur disponible la balise <div> de classe texte. Ainsi, cette balise aura toujours
la mme largeur et, par voie de consquence, les images affiches sa droite auront toujours la mme position et seront alignes
verticalement :
Code : JavaScript
$('.texte').css('width', '90%');
La troisime instruction fait flotter l'image droite de la balise <div> parente, c'est--dire de la balise <div> de classe
question :
Code : JavaScript
$('img').css('float', 'right');
Enfin, la quatrime instruction dcale l'image vers le bas en dfinissant une marge suprieure de 80 pixels :
Code : JavaScript
$('img').css('margin-top', '80px');
La mise en page est maintenant termine. Si vous excutez le code, vous devriez obtenir quelque chose ressemblant l'image
suivante.
84/266
Le texte et les images sont maintenant bien positionns
Dans ce TP, la mise en forme des lments HTML a t ralise en jQuery. Certains d'entre vous ont peut-tre utilis
des instructions CSS la place. Il n'y a rien de mal cela. Je dirai mme que la mise en forme est le propre du CSS. Si j'ai
utilis des instructions jQuery la place, ce n'est que pour ajouter quelques exemples votre palmars.
Ragir au survol du lien Tester les rponses

Arrivs ce point, la mise en page est termine, il vous est possible de rpondre aux questions poses, mais pas de tester les
rponses. Pour cela, vous devez crire le code de la mthode $('a').hover(). Lorsque le lien Tester les rponses est
point, les actions accomplir sont les suivantes pour chaque question :
1. Test de la rponse.
2. Si la rponse est bonne, affichage de l'icne bon.png et du texte explicatif en vert.
3. Si la rponse est mauvaise, affichage de l'icne mauvais.png et du texte explicatif en rouge.
Lorsque le lien Tester les rponses n'est plus point, les actions accomplir sont les suivantes :
85/266
1. Dissimulation des rponses.

2. Affichage de l'icne question.png dans les trois balises <img>.
Voici la fonction mise jour :

Code : JavaScript
$('a').hover(
function() {
$('.reponse').show();
if ($(':radio[id="r1"]:checked').val()) {
$('#img1').attr('src', 'bon.png');
$('#reponse1').css('color', 'green');
}
else {
$('#img1').attr('src', 'mauvais.png');
$('#reponse1').css('color', 'red');
}
}
else {
}
}
else {
}
);
},
function() {
$('#img1').attr('src', 'question.png');
}
Ne vous laissez pas impressionner par la longueur du code ! Vous allez voir, toutes ces lignes sont vraiment simples
comprendre !
La premire fonction contient trois blocs d'instructions quasiment identiques. Chacun d'entre eux s'intresse une des questions
poses dans le QCM. Nous allons nous intresser au premier bloc d'instructions. Vous pourrez sans problme transfrer les
explications qui vont tre donnes aux deux autres blocs.
Aprs avoir valid l'affichage des balises de classe reponse :
Code : JavaScript
l'tat du premier bouton radio est test (ce choix reprsente la bonne rponse). Si ce bouton a t slectionn :
86/266
Code : JavaScript
l'image bon.png est affiche dans la balise <img> d'identifiant #img1 :

Code : JavaScript
et les explications sont affiches en vert dans la balise d'identifiant #reponse1 :

Code : JavaScript
Si ce bouton radio n'est pas slectionn :

Code : JavaScript
else {
l'image mauvais.png est affiche dans la balise <img> d'identifiant #img1 :

Code : JavaScript
et les explications sont affiches en rouge dans la balise d'identifiant #reponse1 :

Code : JavaScript
Les deux autres blocs de code effectuent un traitement similaire, si ce n'est qu'ils testent un autre bouton radio, et qu'ils agissent
sur d'autres balises <img> et <span>.
Le deuxime paramtre de la mthode hover() indique ce qu'il faut faire quand le lien n'est plus point par la souris. La rponse
doit tre cache :
Code : JavaScript
function() {
87/266
et l'image question.png doit tre affiche dans les trois balises <img> :
Code : JavaScript
$('img').each(function() {
$(this).attr('src', 'question.png');
});
Le code complet
a y est, le code est entirement oprationnel. Bien entendu, vous pouvez le modifier pour crer vos propres QCM
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Questionnaire interactif en jQuery</title>
</head>
<body>
<form>
<a href="">Tester les rponses</a>
<div class="texte">
<h2>Question 1</h2>
Le code jQuery s'excute :<br>
<input type="radio" id="r1" name="q1">Dans le
navigateur<br>
<input type="radio" id="r2" name="q1">Sur le serveur o
est stock le code<br>
<input type="radio" id="r3" name="q1">Tantt dans le
navigateur, tantt sur le serveur<br>
<br><span class="reponse" id="reponse1">Le code jQuery n'est
autre que du JavaScript. ce titre, il s'excute toujours sur les
clients (ordinateurs, tablettes et tlphones) qui font rfrence
ce code via une page HTML. La bonne rponse est donc la
premire.</span>
</div>
</div>
<div class="texte">
<h2>Question 2</h2>
Lorsque l'on veut excuter du code jQuery, attendre la
disponibilit du DOM est :<br>
<input type="radio" id="r4" name="q2">Vital<br>
<input type="radio" id="r5" name="q2">Inutile<br>
<input type="radio" id="r6" name="q2">Parfois important,
parfois sans importance<br>
<br><span class="reponse" id="reponse2">Il est impratif
d'attendre la disponibilit du DOM avant d'excuter du code jQuery.
Sans quoi, ce code pourrait s'appliquer un lment indisponible et
provoquer un comportement inattendu, voire mme un plantage du
navigateur.</span>
</div>
</div>
<div class="texte">
88/266
<h2>Question 3</h2>
Pour chaner deux mthodes jQuery :<br>
l'une la suite de l'autre en les sparant par une virgule<br>
l'une la suite de l'autre en les sparant par un point dcimal<br>
<input type="radio" id="r9" name="q3">Il est impossible de
chaner deux mthodes jQuery<br>
<br><span class="reponse" id="reponse3">L'excution d'un
slecteur jQuery produit un objet jQuery sur lequel il est possible
d'appliquer une mthode jQuery. Cette mthode produit elle-mme un
objet jQuery. Il est donc possible de lui appliquer une autre
mthode en utilisant le caractre de liaison habituel : le point
dcimal.</span>
</div>
</div>
</form>
<script>
$(function() {
// Dissimulation des rponses
// Mise en forme des div du QCM
var q = $('.question');
q.css('background', '#9EEAE0');
q.css('border-style', 'groove');
q.css('border-width', '4px');
q.css('width', '900px');
q.css('height', '250px');
q.css('margin', '20px');
$('.texte').css('float', 'left');
$('.texte').css('width', '90%');
$('img').css('float', 'right');
$('img').css('margin-top', '80px');
// Action au survol du lien Tester les rponses
$('a').hover(
function() {
}
else {
}
}
else {
}
}
else {
}
},
function() {
89/266
$('img').each(function() {
$(this).attr('src', 'question.png');
});
);
});
</script>
</body>
</html>
Partie 3 : Aller plus loin avec jQuery
90/266
Les bases de la gestion vnementielle

Vous avez dj fait connaissance avec la gestion vnementielle dans le TP de la deuxime partie de ce cours. Cela vous a permis
de faire ragir le survol d'un lien hypertexte. Ce chapitre va aller beaucoup plus loin en prsentant les trs nombreux vnements
qui peuvent tre grs par du code jQuery.
La souris
Avant de commencer
Quel que soit l'vnement grer, vous devrez mettre en place une mthode qui ressemblera ceci :
Code : JavaScript
$(sel).mge(function() {
// Une ou plusieurs instructions jQuery
// pour grer l'vnement lorsqu'il se produit
}
o sel est un slecteur jQuery comme ceux que vous avez rencontrs jusqu'ici et mge est une mthode de gestion
vnementielle comme celles que vous rencontrerez tout au long de ce chapitre.
La mise en place d'un vnement concerne tous les lments retourns par le slecteur. Ainsi par exemple, en appliquant une
gestion vnementielle au slecteur $('img'), elle concernera toutes les balises <img> du document. Ou encore, en
appliquant une gestion vnementielle au slecteur $('.resultat'), elle s'appliquera toutes les balises de classe
resultat. Bref, vous l'aurez compris : une seule instruction permet de mettre en place plusieurs gestions vnementielles.
Quel gain de temps ! vous de trouver le slecteur le plus appropri chaque cas.
La souris est un priphrique universellement utilis pour communiquer avec l'ordinateur. Vous pouvez dsigner un lment en le
pointant, slectionner ou donner le focus un lment en cliquant dessus, ou encore dplacer le contenu d'un lment dot
d'une barre de dfilement en agissant sur la roulette. Autant d'vnements accessibles en jQuery. Dans ce sous-chapitre, nous
allons nous intresser aux vnements dcrits dans le tableau suivant.
Mthode
vnement gr
click()
Clic gauche
dbclick()
Double-clic
mousedown()
Appui sur le bouton gauche ou droit de la souris alors que le pointeur est au-dessus de
l'lment
mouseenter() ou
mouseover()
Dbut de survol de l'lment
mouseleave() ou
mouseout()
Arrt de survol de l'lment
mousemove()
Dplacement du pointeur au-dessus de l'lment
mouseup()
Relchement du bouton gauche ou droit alors que le pointeur est au-dessus de l'lment
scroll()
Utilisation de la roulette alors que le pointeur se trouve au-dessus d'un lment concern par
ce type d'vnement
Clics et positions de la souris

Je suis bien conscient que vous avez appris beaucoup de choses dans les chapitres prcdents et que vous avez besoin de
91/266
vous dtendre. Que diriez-vous d'un mini-jeu crit en jQuery pour bien comprendre comment fonctionnent les mthodes de
gestion vnementielle de la souris ? Nous allons afficher une image de petite taille une position alatoire sur l'cran. Lorsque
le joueur cliquera sur cette image, elle sera affiche un autre emplacement. Voici le code utilis :
Code : HTML
<img id="target" src="petitchat.jpg">
<script>
$(function() {
// Dimensions de la fentre
var largeur = ($(window).width()) - 50;
var hauteur = ($(window).height()) - 50;
// Affichage de la premire image en (100, 100)
var p = $('#target').offset();
p.top=100;
p.left=100;
$('#target').offset(p);
// Gestion du clic et dplacement de l'image
$("#target").click(function() {
x = Math.floor(Math.random()*largeur);
y = Math.floor(Math.random()*hauteur);
p.top = y;
p.left = x;
});
});
</script>
Examinons les instructions qui composent ce document. Une balise <img> d'identifiant #target fait rfrence l'image
petitchat.jpg. Le reste du code utilise des instructions jQuery pour modifier l'emplacement de l'image et ragir aux clics de
l'utilisateur.
Aprs avoir attendu la disponibilit du DOM, les dimensions de la fentre sont mmorises dans les variables largeur et
hauteur :
Code : JavaScript
var largeur = ($(window).width()) - 50;
var hauteur = ($(window).height()) - 50;
Je comprends qu'il soit ncessaire de connatre les dimensions de la fentre pour afficher l'image, mais pourquoi avoir
soustrait 50 de la largeur et de la hauteur ?
L'image affiche a une dimension de 5050 pixels. En soustrayant ces valeurs de la largeur et de la hauteur de la fentre, on
s'assure que l'image sera toujours affiche dans la partie visible de la fentre. La mthode jQuery offset() est utilise pour
modifier l'emplacement initial de l'image, et la mthode target() pour connatre l'emplacement actuel de l'image :
Code : JavaScript
quoi peut bien servir de connatre l'emplacement de l'image ?
92/266
Vous avez raison, cette instruction n'a apparemment aucun intrt. Et pourtant, en y regardant d'un peu plus prs En utilisant
l'instruction $('#target').offset() et en mmorisant son rsultat dans la variable JavaScript p, on dfinit du mme
coup un objet jQuery par lequel les coordonnes de l'image pourront tre modifies. C'est d'ailleurs ce que font les deux
instructions suivantes en affichant l'image aux coordonnes (100, 100) :
Code : JavaScript
p.top=100;
p.left=100;
Il ne reste plus qu' utiliser la mthode offset() pour afficher l'image aux coordonnes (100, 100) :
Code : JavaScript
Une gestion vnementielle est mise en place pour l'vnement click, c'est--dire lorsque l'utilisateur clique sur le bouton
gauche de la souris :
Code : JavaScript
$("#target").click(function() {
Une nouvelle position alatoire est choisie pour l'image (tout en restant dans les limites de la fentre) en attendant un autre clic
de l'utilisateur. Un nombre alatoire compris entre 0 et la largeur de la fentre est choisi et mmoris dans la variable x :
Code : JavaScript
x = Math.floor(Math.random()*largeur);
Math.random() est une fonction JavaScript qui retourne un nombre alatoire compris entre 0 et une valeur proche de 1. Dans
cet exemple, afin de simplifier les choses, nous allons admettre que le nombre retourn est compris entre 0 et 1.
En multipliant la valeur retourne par la largeur de la fentre, on obtient un nombre compris entre 0 et la largeur de la fentre.
Enfin, en appliquant la fonction JavaScript Math.floor() ce nombre, on obtient la valeur entire la plus proche de ce
nombre. C'est exactement l'effet recherch.
La ligne suivante utilise la mme technique pour choisir un nombre alatoire compris entre 0 et la hauteur de la fentre. Ce
nombre est mmoris dans la variable y.
Pour dplacer l'image, nous utilisons la technique traditionnelle. Aprs avoir obtenu un objet jQuery qui correspond la position
actuelle de l'image :
Code : JavaScript
les coordonnes de l'image sont modifies en utilisant les coordonnes tires alatoirement dans l'tape prcdente :
93/266
Code : JavaScript
p.top = y;
p.left = x;
Puis l'image est dplace en utilisant la mthode offset() :

Code : JavaScript
Le code est fonctionnel, vous pouvez le tester dans un navigateur quelconque.

Vous pouvez videmment remplacer la mthode click() par une autre de votre choix. Par exemple, pour ragir au dbut du
survol de l'image, vous utiliserez cette instruction :
Code : JavaScript
$("#target").mouseenter(function() {
La mthode scroll
Pour terminer avec les mthodes vnementielles relatives la souris, il ne reste plus qu' crire un peu de code pour utiliser la
mthode scroll().
Code : HTML
div {
width: 200px;
height: 200px;
overflow: scroll;
border: 2px black solid;
}
</style>
<div>
eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
</div>
<script>
$(function() {
$('div').scroll(function() {
alert('Utilisation de la roulette dans la balise <div>');
});
$(window).scroll(function() {
alert('Utilisation de la roulette dans le document');
94/266
});
});
</script>
partir d'ici, je ne mettrai plus l'ensemble du code mais uniquement les lments indispensables. ce stade, vous
devriez tre capables de vous dbrouiller.
Pour dtecter l'utilisation de la roulette dans la balise <div>, il suffit de slectionner la balise et de lui appliquer la mthode
scroll() :
Code : JavaScript
$('div').scroll(function() {
La dtection d'un mouvement de roulette dclenche l'affichage d'une bote de message :

Code : JavaScript
alert('Utilisation de la roulette dans la balise <div>');
Pour dtecter l'utilisation de la roulette dans le document, procdez de mme, en insrant le mot window dans le slecteur, sans
le mettre entre apostrophes :
Code : JavaScript
$(window).scroll(function() {
Ici aussi, la dtection d'un mouvement de roulette dclenche l'affichage d'une bote de message :
Code : JavaScript
alert('Utilisation de la roulette dans le document');
Si la fentre est trop grande, vous ne pourrez pas y tester l'utilisation de la roulette. Pensez redimensionner la fentre
pour qu'un scrolling soit possible.
which et type
Dans certains cas particuliers, il peut tre ncessaire de savoir quel bouton de la souris a t press. Pour cela, vous ferez appel
la mthode event.which, qui renvoie l'une des valeurs suivantes :
1 : bouton gauche press ;
2 : bouton central press ;
3 : bouton droit press.
95/266
Pour connatre le type d'vnement qui a t lev par la procdure de gestion vnementielle, vous utiliserez la mthode
event.type. La valeur renvoye pourra tre click, dblclick, mousedown, mouseenter, mouseover,
mouseleave, mouseout, mousemove ou mouseup.
Voyons comment utiliser ces deux mthodes en pratique.
Code : HTML
Cliquez sur l'image avec un des boutons de la souris.<br />
<img id="target" src="petitchat.jpg"><br />
<span id="rapport"></span>
<script>
$(function() {
$('#target').mousedown(function(e){
$('#rapport').html('vnement : ' + e.type + '. Bouton press
: ' + e.which );
});
});
</script>
Le code jQuery met en place un gestionnaire vnementiel en rapport avec la balise d'identifiant #target, c'est--dire l'image.
Ce gestionnaire capture l'vnement mousedown. Remarquez le paramtre e pass la fonction :
Code : JavaScript
$('#target').mousedown(function(e){
Les mthodes e.type et e.which sont utilises pour indiquer le type d'vnement lev et le bouton qui a t press. Ces
informations sont affiches dans la balise <span> d'identifiant #rapport :
Code : JavaScript
$('#rapport').html('vnement : ' + e.type + '. Bouton press : ' +
e.which );
Le clavier
Le clavier est galement un priphrique fondamental pour communiquer avec l'ordinateur. Sur le Web, il est essentiellement
utilis pour saisir des donnes textuelles dans des formulaires. jQuery est en mesure de capturer trois vnements en rapport
avec le clavier.
Mthode
vnement gr
keydown()
Appui sur une touche du clavier
keyup()
Relchement d'une touche du clavier pralablement enfonce
keypress() Maintien d'une touche du clavier enfonce
Voyons comment utiliser ces mthodes en raisonnant sur un cas pratique. titre d'exemple, nous allons afficher un petit
rectangle de couleur verte chaque fois qu'un caractre sera ajout dans une balise <textarea>. Ce rectangle deviendra blanc
lorsque la touche sera relche. Voici le code utilis :
Code : HTML
96/266
#lumiere {
width: 10px;
height: 10px;
background-color: white; }
</style>
<div id="lumiere"></div>
<textarea id="target"></textarea>
<script>
$(function() {
$('#target').keydown(function(){
$('#lumiere').css('background-color', 'green');
});
$('#target').keyup(function(){
$('#lumiere').css('background-color', 'white');
});
});
</script>
Le code jQuery met en place deux procdures vnementielles : une relative l'vnement keydown et l'autre l'vnement
keyup. Lorsqu'une touche du clavier est enfonce, la couleur d'arrire-plan de la balise <div> devient verte. Lorsque la touche
est relche, la balise redevient blanche.
Dans certains programmes crits en jQuery, il peut tre ncessaire de savoir quelle touche du clavier a t presse. Pour cela,
vous ferez appel la mthode event.which qui renvoie prcisment cette information. Pour connatre le type d'vnement qui
a t lev par la procdure de gestion vnementielle, vous utiliserez la mthode event.type. La valeur renvoye pourra tre
keydown, keypress ou keyup, en fonction de la mthode vnementielle utilise. Voyons comment utiliser la mthode
event.which en pratique.
Code : HTML
<form>
Laissez aller votre imagination : saisissez quelques mots<br />
<textarea id="saisie"></textarea>
</form><br />
Caractre saisi : <span id="unelettre"></span>
<script>
$(function() {
$('#saisie').keypress(function(e) {
$('#unelettre').text(e.which); //keyCode
});
});
</script>
L'utilisateur est invit taper quelques mots dans la zone de texte multilignes. Chacun des caractres taps est alors affich en
dessous de la zone de saisie. Le code jQuery met en place un gestionnaire vnementiel sur la balise d'identifiant #saisie,
c'est--dire sur le <textarea>. La touche frappe est rcupre et affiche dans la balise <span>, comme le montre la figure
suivante.
97/266
La
mthode e.which retourne le code de la touche frappe
Caractre ASCII Caractre ASCII Caractre ASCII Caractre ASCII Caractre ASCII
Espace
32
51
70
89
108
33
52
71
90
109
"
34
53
72
91
110
35
54
73
92
111
36
55
74
93
112
37
56
75
94
113
&
38
57
76
95
114
'
39
58
77
96
115
40
59
78
97
116
41
<
60
79
98
117
42
61
80
99
118
43
>
62
81
100
119
44
63
82
101
120
45
64
83
102
121
46
65
84
103
122
47
66
85
104
123
48
67
86
105
124
49
68
87
106
125
50
69
88
107
126
Avec keydown() et keyup(), il s'agit d'une version simplifie du code ASCII dans laquelle les caractres minuscules et
majuscules sont confondus.
Touche
Code Touche Code
Touche
Code
Touche
Code
98/266
Retour arrire 8
54
86
F3
114
Tab
55
87
F4
115
Entre
13
56
88
F5
116
Maj
16
57
89
F6
117
Ctrl
17
65
90
F7
118
Alt
18
66
Windows gauche 91
F8
119
Pause
19
67
Windows droit
92
F9
120
Verr Maj
20
68
Slection
93
F10
121
Echap
27
69
0 pav num.
96
F11
122
Page Prc
33
70
1 pav num.
97
F12
123
Page Suiv
34
71
2 pav num.
98
Verr Num
144
Fin
35
72
3 pav num.
99
Arrt Defil 145
Origine
36
73
4 pav num.
100
186
Gauche
37
74
5 pav num.
101
187
Haut
38
75
6 pav num.
102
188
Droite
39
76
7 pav num.
103
189
Bas
40
77
8 pav num.
104
190
Inser
45
78
9 pav num.
105
191
Suppr
46
79
106
192
48
80
107
219
49
81
109
220
50
82
110
221
51
83
111
Espace
222
52
84
F1
112
53
85
F2
113
Si vous voulez obtenir non pas le code du caractre mais le caractre lui-mme, assurez-vous que vous utilisez la mthode
keypress() :
Code : JavaScript
$('#saisie').keypress(function(e) {
Et remplacez la ligne suivante par :

Code : JavaScript
var c = String.fromCharCode(e.which);
$('#unelettre').text(c);
99/266
La premire instruction rcupre le code tap au clavier (e.which), le convertit en un caractre (String.fromCharCode)
et le stocke dans la variable c. La deuxime instruction affiche ce caractre dans la balise d'identifiant #unelettre, c'est--dire
dans le <span>.
Les lments
J'ai ici regroup les mthodes vnementielles en rapport avec le gain et la perte de focus, la modification de la taille et du
contenu, et la slection d'un lment.
Mthode
vnement gr
focus()
Rception de focus par l'lment
blur()
Perte de focus par l'lment
focusin()
Rception de focus par l'lment ou un de ses enfants
focusout() Perte de focus par l'lment ou un de ses enfants

resize()
Redimensionnement d'un lment
change()
Modification d'un lment
Les mthodes focus() et blur() dtectent respectivement la rception de focus et la perte de focus par un lment dans un
formulaire. Cela peut se produire suite l'appui sur une touche ou une combinaison de touches du clavier (Tab ou Maj + Tab par
exemple) ou par un clic de souris.
Les mthodes focusin() et focusout() sont comparables aux mthodes focus() et blur() et peuvent les remplacer.
Cependant, elles dtectent galement la rception et la perte de focus d'un lment parent.
focus() et blur()
Un peu de code va claircir ce que je viens de dire. Tout d'abord, intressons-nous aux mthodes focus() et blur().
Code : HTML
<form>
Cliquez sur les zones de texte<p>
<input type="text" class="f" id="Zone-de-texte-1"><p>
<input type="text" class="f" id="Zone-de-texte-2"><br />
</form><br />
Focus : <span id="resultat"></span><br />
Perte de focus : <span id="resultat2"></span>
<script>
$(function() {
$('.f').focus(function() {
$('#resultat').text($(this).attr('id'));
});
$('.f').blur(function() {
$('#resultat2').text($(this).attr('id'));
});
});
</script>
Le corps du document contient essentiellement deux zones de texte et deux balises <span>. Lorsque l'utilisateur donne le focus
l'une des zones de texte, le contenu des deux <span> est modifi. Le premier indique l'identifiant du contrle qui a reu le
focus et le deuxime indique l'identifiant du contrle qui a perdu le focus.
La procdure vnementielle est responsable de l'affichage dans le premier <span>. La mthode utilise est focus().
100/266
L'vnement dclencheur sera donc la rception du focus :

Code : JavaScript
$('.f').focus(function() {
Examinez le slecteur. Toutes les balises de classe f sont concernes, savoir les deux zones de texte. Lorsque cette fonction
vnementielle est excute, l'identifiant (attr('id')) de la balise qui a dclench l'vnement ($(this)) est affich
(text) dans la balise d'identifiant #resultat ($('#resultat')), c'est--dire dans la premire balise <span> :
Code : JavaScript
La deuxime procdure vnementielle est responsable de l'affichage dans le deuxime <span>. La mthode utilise est
blur(). L'vnement dclencheur sera donc la perte du focus :
Code : JavaScript
$('.f').blur(function() {
Cette mthode concerne les balises de classe f, et donc les deux zones de texte. Lorsque cette fonction vnementielle est
excute, l'identifiant (attr('id')) de la balise qui a dclench l'vnement ($(this)) est affich (text) dans la balise
d'identifiant #resultat2 ($('#resultat2')), c'est--dire dans la deuxime balise <span>.
La figure suivante montre la page Web aprs avoir donn le focus la deuxime zone de texte, puis la premire.
Les deux
<span> sont mis jour en fonction de l'lment qui a le focus
focusin() et focusout()
Nous allons maintenant nous intresser aux mthodes focusin() et focusout(), et montrer leurs diffrences par rapport
aux mthodes focus() et blur(). Pour cela, deux balises <fieldset> contenant chacune deux balises <input
type="text"> vont tre cres. Le gain et la perte de focus seront tests au niveau des balises <fieldset>. En donnant
101/266
le focus une zone de texte, l'vnement sera rpercut jusqu' la balise <fieldset> parent qui affichera des informations en
consquence.
Code : HTML
<form>
Cliquez sur les zones de texte<p>
<fieldset id="premier">
<legend>Premier groupe</legend>
</fieldset>
<fieldset id="deuxieme">
<legend>Deuxime groupe</legend>
</fieldset>
</form><br />
Focus : <span id="resultat"></span><br />
Perte de focus : <span id="resultat2"></span>
<script>
$(function() {
$('fieldset').focusin(function() {
});
$('fieldset').focusout(function() {
});
});
</script>
Le corps du document contient deux balises <fieldset> d'identifiant #premier et #deuxieme. Chacune de ces balises
contient une lgende et deux zones de texte. la suite des deux balises <fieldset>, deux balises <span> sont utilises
pour indiquer quelle balise <fieldset> gagne le focus et quelle balise <fieldset> le perd.
La premire procdure vnementielle teste le gain de focus. La mthode focusin() est applique aux lments fieldset,
c'est--dire aux deux balises <fieldset> :
Code : JavaScript
$('fieldset').focusin(function() {
Lorsqu'une balise <fieldset> ou un de ses enfants (les balises <legend> et <input type="text">) gagne le focus,
cette mthode vnementielle est excute. L'identifiant (attr('id')) de la balise <fieldset> parent ($(this)) est alors
affich (text) dans la balise d'identifiant #resultat ($('#resultat')), c'est--dire dans la premire balise <span> :
Code : JavaScript
Un traitement similaire affiche dans la deuxime balise <span> le nom de la balise <fieldset> qui a perdu le focus :
Code : JavaScript
102/266
$('fieldset').focusout(function() {
});
tout hasard, remplacez les mthodes focusin() et focusout() par focus() et blur() et exprimentez le nouveau
code. Maintenant, vous faites la diffrence entre ces deux jeux de mthodes et vous savez quand utiliser l'un ou l'autre.
resize()
Nous allons maintenant nous intresser la mthode vnementielle resize(). Cette mthode est excute chaque fois que la
fentre change de taille. Nous allons l'utiliser pour afficher dans une balise <span> les dimensions de la fentre chaque fois
qu'elle est excute :
Code : HTML
<script>
$(function() {
$(window).resize(function() {
var taille = 'Taille de la fentre : ' + $(window).width() +
'px x ' + $(window).height() + 'px';
$('#resultat').text(taille);
});
});
</script>
Le corps du document est vraiment simple, puisqu'il ne comporte qu'une balise <span> dans laquelle nous afficherons les
dimensions de la fentre. Quant au traitement, il est trs simple. Dans un premier temps, les dimensions de la fentre
($(window).width et $(window).height) sont mmorises dans la variable taille :
Code : JavaScript
var taille = 'Taille de la fentre : ' + $(window).width() + 'px x '
+ $(window).height() + 'px';
Puis le contenu de la variable taille est copi (text(taille)) dans la balise <span> d'identifiant #resultat
($('#resultat')) :
Code : JavaScript
$('#resultat').text(taille);
Essayez de redimensionner la fentre, vous verrez que cela fonctionne !
change()
Pour en terminer avec les mthodes vnementielles relatives aux lments, nous allons nous intresser la mthode
change(). Cette mthode est excute chaque fois que le contenu de l'lment concern change. Elle peut tre utilise sur les
balises <input>, <textarea> et <select>. titre d'exemple, nous allons dtecter les modifications dans une liste
droulante et afficher un message en consquence.
103/266
Code : HTML
<form>
Slectionnez une valeur dans la liste droulante
<select>
<option>J'aime jQuery</option>
<option>J'adore jQuery</option>
<option>Je raffole de jQuery</option>
<option>jQuery ? Jamais entendu parler !</option>
</select>
</form><br />
<span id="resultat"></span><br />
<script>
$(function() {
$('select').change(function() {
$('#resultat').text('Vous venez de slectionner "' +
$(this).val() +'".');
});
});
</script>
Le corps du document met en place une liste droulante qui contient quatre lments. L'lment slectionn dans la liste sera
indiqu dans la balise <span> d'identifiant #resultat. La partie la plus intressante du code se trouve bien videmment
entre les balises <script> et </script>. La mthode vnementielle change() est applique la balise <select>.
Chaque fois que l'utilisateur slectionne une valeur dans la liste, cette mthode est excute :
Code : JavaScript
$('select').change(function() {
Le texte de l'lment slectionn dans la liste ($(this).val()) est alors affich dans la balise <span> d'identifiant
#resultat ($('#resultat').text) :
Code : JavaScript
$('#resultat').text('Vous venez de slectionner "' + $(this).val()
+'".');
La figure suivante vous montre un exemple d'excution.
104/266
Le texte est mis jour en
fonction du choix dans la liste
Les pages
Applique l'lment window, la mthode vnementielle load() permet de tester le complet chargement d'une page, en
incluant les textes, images et autres objets qui la composent. Quant la mthode unload(), elle est dclenche lorsque
l'internaute a demand un changement de page. Voyons comment utiliser ces deux mthodes :
Code : HTML
<img src="canard.jpg"><br />
<a href="http://www.siteduzero.com">Cliquez ici pour aller sur le
Site du Zro</a>
<script>
$(function() {
alert('Le DOM est charg');
$(window).load(function() {
alert('La page est entirement charge');
});
$(window).unload(function() {
alert('Vous avez demand changer de page');
});
});
</script>
Le corps du document contient une image et un lien qui pointe vers le Site du Zro. Lorsque le DOM est disponible, une bote de
dialogue est affiche :
Code : JavaScript
alert('Le DOM est charg');
Le contenu de la page est alors charg. Lorsque l'image et le lien sont en mmoire, la mthode vnementielle
$(window).load() s'excute. Une autre bote de dialogue est alors affiche :
Code : JavaScript
alert('La page est entirement charge');
105/266
Enfin, quand l'utilisateur clique sur le lien Cliquez ici pour aller sur le Site du Zro , puis clique sur Page prcdente ou
Page suivante du navigateur ou lorsqu'il ferme ce dernier, la mthode vnementielle $(window).unload() est
excute, ce qui produit l'affichage d'une troisime bote de dialogue :
Code : JavaScript
alert('Vous avez demand changer de page');
La mthode unload() est toujours applique l'lment window, c'est--dire la fentre du navigateur. Par contre, la
mthode load() peut tre applique un autre lment auquel est associ une URL : une balise <img>, <script>,
<frame> ou <iframe>. Dans ce cas, le code associ cette mthode est excut lorsque l'lment correspondant et ses
enfants (s'ils existent) sont entirement chargs.
Par exemple, vous utiliserez les instructions suivantes pour afficher les dimensions d'une image aprs son complet chargement :
Code : JavaScript
$('#image1').load(function() {
alert(this.width + ' x ' + this.height);
}
o #image1 est l'identifiant de l'image.

Dans une mthode de gestion vnementielle de type mousedown(function(e)), e.which indique quel bouton
a t press (1 pour le bouton gauche, 2 pour le bouton central, 3 pour le bouton droit). Dans une mthode de gestion
vnementielle de type keypress(function(e)), e.which retourne le code ASCII de la touche presse. Ce code
peut tre converti en un caractre avec la fonction JavaScript String.fromCharCode().
Vous utiliserez la mthode focus() pour effectuer un traitement suite au gain de focus par un lment et la mthode
blur() pour effectuer un traitement suite la perte de focus par un lment. Si le gain et la perte de focus peuvent
galement concerner les enfants de l'lment, vous utiliserez les mthodes focusin() et focusout().
Applique l'lment window, la mthode load() permet d'excuter du code lorsque la page est entirement charge,
en incluant les textes, images et autres objets qui la composent. Quant la mthode unload(), elle permet d'excuter
du code juste avant un changement de page demand par l'utilisateur.
106/266
Plus loin dans la gestion vnementielle

Arrivs ce point dans la lecture du cours, vous savez comment mettre en place une gestion vnementielle en rapport avec la
souris, le clavier et les lments affichs sur une page Web. Je vous propose d'aller plus loin en vous faisant dcouvrir comment
grer plusieurs vnements avec une seule mthode, dclencher des vnements avec du code jQuery ou encore utiliser la
dlgation d'vnements pour limiter le code.
vnements personnaliss
Sans le savoir, vous avez utilis la version simplifie de la mthode on() dans toutes les mthodes vnementielles tudies
jusqu'ici. Le tableau suivant donne quelques correspondances entre les mthodes traditionnelles et les mthodes on()
quivalentes.
Mthode traditionnelle
Mthode on() quivalente
$(sel).click(function() {})
$(sel).on('click', function() {})
$(sel).scroll(function() {})
$(sel).on('scroll', function() {})
$(sel).keydown(function() {}) $(sel).on('keydown', function(){})

$(sel).focus(function() {})
$(sel).on('focus', function() {})
$(sel).load(function() {})
$(sel).on('load', function() {})
Dans toutes ces expressions, sel reprsente un slecteur jQuery quelconque.

Je pense que vous avez compris la logique permettant de convertir une mthode vnementielle traditionnelle quelconque en
son quivalent on() : il suffit de spcifier le nom de l'vnement dans le premier argument de la mthode, entre apostrophes, et
de spcifier la fonction vnementielle dans le deuxime argument.
Mais alors, pourquoi utiliser la mthode on() et ne pas se contenter des mthodes traditionnelles ?
Comme nous allons le voir, la mthode on() a plusieurs avantages. Elle permet de :
Limiter l'criture en associant une mme mthode vnementielle plusieurs lments ;
Relier plusieurs mthodes vnementielles un lment en une seule instruction ;
Dsactiver une mthode vnementielle prcdemment attache avec la mthode on() ;
Relier plusieurs mthodes vnementielles entre elles. Par la suite, vous pourrez toutes les dclencher, ou toutes les
dsactiver en une seule instruction jQuery.
Une mthode pour grer plusieurs vnements

Supposons que vous vouliez relier les mthodes vnementielles mouseenter() et mousemove() aux balises <img>.
Traditionnellement, vous utiliserez les instructions suivantes :
Code : JavaScript
$('img').mouseenter(function() { }
$('img').mousemove(function() { }
Si vous passez par la mthode on(), une seule instruction suffira :

Code : JavaScript
$('img').on('mouseenter mousemove', function() { })
107/266
Comme vous le voyez, il suffit de passer les mthodes vnementielles dans le premier argument de la mthode on() en les
mettant entre apostrophes et en les sparant par une espace.
Plusieurs mthodes en une seule instruction

Imaginons maintenant que vous vouliez associer les fonctions traitement1 et traitement2 aux vnements
mouseenter et mousemove des balises <img> de classe grand. Vous utiliserez les instructions suivantes :
Code : JavaScript
$('img.grand').mouseenter(traitement1);
$('img.grand').mousemove(traitement2);
En utilisant la mthode on(), une seule ligne suffit pour associer les deux traitements aux deux vnements des images de
classe grand :
Code : JavaScript
$('img.grand').on({mouseenter:traitement1, mousemove:traitement2});
Ce cas particulier se gnralise : pour associer plusieurs vnements et plusieurs fonctions de traitement aux lments
slectionns par un slecteur jQuery, spcifiez les diffrents vnements en paramtres de la mthode on() en respectant les
rgles suivantes :
Chaque vnement doit tre suivi du caractre : et de la fonction de traitement associe ;
Les vnements sont spars par une virgule ;
Les vnements sont mis entre accolades.
Dsactiver une mthode de gestion vnementielle

Si la mthode on() attache un vnement un lment, d'aprs vous, quelle mthode dtache ce mme vnement ? Comme on
pouvait s'y attendre, il s'agit de la mthode off().
Nous allons autoriser puis interdire l'vnement click sur une image en utilisant les mthodes on() et off().
Code : HTML
Cliquez sur l'image aprs avoir activ le clic<br />
<img src="canard.jpg" id='image'><br />
<button id="activer">Activer le clic</button>
<button id="desactiver">Dsactiver le clic</button>
<script>
$(function() {
function traitement() {
alert('Image clique');
}
$('#activer').on('click', function() {
$('#image').click(traitement);
});
$('#desactiver').on('click', function() {
$('#image').off('click', traitement);
});
});
108/266
</script>
La fonction traitement() affiche une bote de dialogue avec la fonction JavaScript alert(). Cette fonction sera invoque
lorsque l'utilisateur cliquera sur l'image, condition que la mthode de gestion vnementielle click() ait t attache
l'image.
Code : JavaScript
$(function() {
function traitement() {
alert('Image clique');
}
Lorsque l'utilisateur clique sur le bouton d'identifiant #activer, la mthode de gestion vnementielle click() est attache
l'image d'identifiant #image. chaque clic sur l'image, la fonction traitement() sera excute :
Code : JavaScript
$('#image').click(traitement);
Lorsque l'utilisateur clique sur le bouton d'identifiant #desactiver, la mthode de gestion vnementielle click() est
dtache de l'image d'identifiant #image :
Code : JavaScript
$('#image').off('click', traitement);
tiqueter plusieurs mthodes vnementielles

Vous avez appris attacher une mthode vnementielle un slecteur en utilisant la mthode on(). Ainsi par exemple, pour
attacher une mthode vnementielle correspondant l'vnement dbut de survol aux balises <img>, vous utilisez cette
instruction :
Code : JavaScript
$('img').on('mouseenter', function() {...});
Pour supprimer cette mthode vnementielle, vous utilisez cette instruction :

Code : JavaScript
$('img').off('mouseover');
Tout ceci fonctionne parfaitement tant que vous utilisez la bibliothque jQuery sans aucun plugin. Par contre, si un ou plusieurs
plugins sont utiliss (un chapitre y est consacr), il se peut qu'ils dfinissent leurs propres mthodes vnementielles et qu'ils les
attachent aux mmes slecteurs que vous. Si vous utilisez la mthode off() en prcisant un nom d'vnement, comme dans
l'instruction prcdente, toutes les mthodes vnementielles correspondant cet vnement seront supprimes : les vtres,
109/266
mais aussi celles qui sont peut-tre dfinies dans les plugins que vous utilisez. Du coup, ces plugins risquent de ne plus
fonctionner !
Premire parade
Dans la sous-section Dsactiver une mthode de gestion vnementielle , vous avez vu qu'il tait possible de crer une
fonction de traitement en JavaScript, et d'indiquer son nom lorsque vous dfinissez une mthode vnementielle un slecteur.
Par exemple, pour attacher une mthode vnementielle correspondant l'vnement dbut de survol aux balises <img> en
confiant le traitement la fonction actions(), vous utilisez l'une de ces instructions :
Code : JavaScript
$('img').mouseenter(actions);
$('img').on('mouseenter', actions);
Bien entendu, vous devrez dfinir la fonction actions() pour indiquer quel traitement doit tre effectu :
Code : JavaScript
function actions() {
// Insrer les instructions de traitement appropries
}
Par la suite, vous pourrez supprimer cette mthode vnementielle sans toucher aux ventuelles autres qui auraient pu tre
associes l'vnement mouseenter. Pour cela, vous utiliserez cette instruction :
Code : JavaScript
$('img').off('mouseenter', actions);
Deuxime parade
Vous pouvez affecter un espace de noms (namespace en anglais) vos mthodes vnementielles. Ne soyez pas effrays par
ce nom. En jQuery, un espace de noms peut tre compar une classe CSS. Son but est de donner une tiquette une ou
plusieurs mthodes vnementielles afin de faciliter leur manipulation. Une fois vos mthodes vnementielles ainsi tiquetes,
vous pourrez facilement les supprimer sans que cela nuise aux mthodes vnementielles qui auraient pu tre dfinies dans les
plugins que vous utilisez.
Commencez par choisir un espace de noms. Supposons que vous utilisiez jQuery pour mettre au point un site en rapport avec le
dpannage informatique, vous pourriez utiliser l'espace de noms depanPC pour toutes les mthodes vnementielles que
vous dfinirez. Cet espace de noms sera alors systmatiquement ajout chaque fois que vous faites appel la mthode on().
Par exemple :
Code : JavaScript
$('img').on('mouseenter.depanPC', function() { //traitement });
$('img').on('mouseleave.depanPC', function() { //traitement });
$('img').on('mousemove.depanPC', function() { //traitement });
Comme vous le voyez, il suffit d'ajouter un point suivi de l'espace de noms chaque vnement. Lorsque vous voudrez
supprimer la mthode vnementielle mouseleave() que vous avez mise en place, vous utiliserez l'instruction suivante :
110/266
Code : JavaScript
$('img').off('mouseleave.depanPC');
Cette instruction ne supprimera pas les ventuelles autres mthodes vnementielles qui auraient pu tre dfinies dans les
plugins que vous utilisez. Vous pouvez supprimer plusieurs mthodes vnementielles lies un espace de noms en une seule
instruction. Supposons que vous dsiriez supprimer les mthodes vnementielles mouseenter() et mouseleave() lies
l'espace de noms depanPC . Vous utiliserez l'instruction suivante :
Code : JavaScript
$('img').off('mouseenter.depanPC mouseleave.depanPC');
Supposons maintenant que vous dsiriez supprimer toutes les mthodes vnementielles rattaches l'espace de noms
depanPC . Pour cela, vous utiliserez l'instruction suivante :
Code : JavaScript
$('img').off('.depanPC');
Enfin, vous pouvez supprimer les mthodes vnementielles lies plusieurs espaces de noms en une seule instruction. Par
exemple, pour supprimer des espaces de noms depanPC et depanMAC de toutes les mthodes vnementielles lies
l'vnement click et appliques aux balises <img>, vous utiliserez l'instruction suivante :
Code : JavaScript
$('img').off('click.depanPC.depanMAC');
Ou encore, pour supprimer des espaces de noms depanPC et depanMAC de toutes les mthodes vnementielles
appliques aux balises <a>, vous utiliserez l'instruction suivante :
Code : JavaScript
$('a').off('.depanPC.depanMAC');
Pour l'instant, vous ne voyez peut-tre pas trs bien quoi les espaces de noms vont vous servir, mais rassurez-vous, tout
deviendra limpide lorsque vous dfinirez vos propres plugins jQuery.
Gestion vnementielle unique

Il est parfois ncessaire de ragir un vnement la premire fois qu'il se produit, puis de l'ignorer par la suite. jQuery possde
une mthode pour cela : one(). Voyons comment mettre en uvre cette mthode avec quelques lignes de code. Dans cet
exemple, l'utilisateur pourra cliquer sur une image. Le premier clic sera pris en compte, les autres seront ignors.
Code : HTML
Cliquez sur l'image<br />
<img src="bon.gif"><br />
<span id='message'></span>
<script>
111/266
$(function() {
$('img').one('click', function() {
$('#message').text('Vous avez cliqu sur l\'image. Dsormais,
je resterai insensible aux clics.').fadeIn(1000).fadeOut(5000);
});
});
</script>
Le corps du document contient un texte, une image et une balise <span> dans laquelle sera affich un message suite au premier
clic sur l'image. Le code jQuery met en place une mthode vnementielle usage unique sur l'vnement click de la balise
<img> :
Code : JavaScript
$('img').one('click', function() {
Lorsque l'image est clique pour la premire fois, un texte est affich dans la balise <span> l'aide de la mthode text().
Cette mthode est chane avec les mthodes fadeIn() et fadeOut() pour provoquer une apparition du message en une
seconde (fadeIn(1000)) et une disparition du message en cinq secondes (fadeOut(5000)).
Dclenchement d'vnements
Gnralement, les vnements sont dclenchs par l'utilisateur, lorsqu'il clique sur un objet, utilise la roulette de la souris ou
appuie sur une touche du clavier par exemple. Dans certains cas, il peut tre ncessaire de dclencher un vnement sans le
concours de l'utilisateur, en utilisant une instruction jQuery. Pour cela, vous ferez appel la mthode trigger(), dont voici la
syntaxe :
Code : JavaScript
$(sel).trigger('ev');
o sel est un slecteur jQuery quelconque et ev est l'vnement dclencher.

Seuls les vnements suivants sont dclenchables : blur, change, click, dblclick, error, focus,
keydown, keypress, keyup, select et submit.
Voyons comment utiliser la mthode trigger() en pratique. Cet exemple demande l'utilisateur de cliquer sur une image. Un
message est alors affich dans une balise <span>. L'utilisateur peut galement cliquer sur un bouton. Dans ce cas, c'est la
procdure vnementielle lie au clic sur le bouton qui dclenche l'affichage du message.
Code : HTML
<span id='message'></span><br />
<button>Cliquez ici</button>
<script>
$(function() {
$('img').click(function() {
$('#message').text('L\'image a t
clique.').fadeIn(1000).fadeOut(1000);
});
$('button').click(function() {
$('img').trigger('click');
});
});
112/266
</script>
L'instruction suivante dfinit une mthode vnementielle lie au clic sur le bouton :
Code : JavaScript
Le traitement consiste simuler le clic sur l'image :

Code : JavaScript
$('img').trigger('click');
Le message L'image a t clique est donc affich lorsque vous cliquez sur l'image ou sur le bouton.
Il pourrait tre intressant d'afficher un message si l'image est clique et un autre message si le bouton est cliqu. Voici le code
utilis :
Code : HTML
<span id='message'></span><br />
<button>Cliquez ici</button>
<script>
$(function() {
$('img').click(function(event,texte) {
if (texte == undefined)
texte = "par vous";
$('#message').text('L\'image a t clique ' +
texte).fadeIn(1000).fadeOut(1000);
});
$('img').trigger('click', 'par jQuery');
});
});
</script>
Comme vous pouvez le constater, seul le code jQuery a t modifi. Maintenant, la fonction a deux paramtres :
Code : JavaScript
$('img').click(function(event,texte) {
Le paramtre event sera remplac par le nom de l'vnement lorsqu'il se produira. Ici, event vaudra donc click lorsque
l'image sera clique. Par contre, texte est un paramtre supplmentaire qui pourra tre pris en compte lors du traitement de la
mthode vnementielle. Lorsque l'utilisateur clique sur l'image, aucun paramtre texte n'est pass la mthode de gestion
vnementielle. Le paramtre texte vaut donc undefined (non dfini). Dans ce cas, la valeur par vous doit lui tre
affecte pour que le message L'image a t clique par vous s'affiche dans la balise <span> :
113/266
Code : JavaScript
if (texte == undefined)
texte = "par vous";
Le message affich a une partie fixe ( L'image a t clique ) et une partie variable (texte) qui dpend de l'lment cliqu par
l'utilisateur. La mthode vnementielle lie au clic sur le bouton simule toujours un clic sur l'image, mais cette fois-ci le texte
par jQuery est pass la mthode $('img').click() pour modifier le texte affich dans la balise <span>.
Code : JavaScript
$('img').trigger('click', 'par jQuery');
});
Il est parfois ncessaire de passer plusieurs arguments la mthode trigger(). Dans ce cas, mettez-les entre crochets,
comme ceci :
Code : JavaScript
$(sel).trigger('ev', ['param1', 'param2', 'param3', 'etc.']);
o :
sel est un slecteur jQuery quelconque ;
ev est l'vnement simuler ;
param1, param2, param3 et les suivants s'ils existent sont les paramtres passer la mthode vnementielle
dclenche par la mthode trigger().
Crer des vnements personnaliss

Arrivs ce point dans la lecture de ce cours, vous savez crer des mthodes vnementielles en utilisant la mthode on(). Par
exemple, les instructions suivantes mettent en place une mthode vnementielle qui affiche une bote de dialogue lorsque
l'utilisateur clique sur un lment d'identifiant #calcul :
Code : JavaScript
$('#calcul').on("click", function() {
alert("Vous avez cliqu sur l'lment d'identifiant #calcul");
});
La mthode on() peut galement tre utilise pour dfinir des mthodes vnementielles personnalises. Ici par exemple, nous
dfinissons l'vnement personnalis bonjour_jquery et nous l'associons un lment d'identifiant #bonjour :
Code : JavaScript
$('#bonjour').on('bonjour_jquery', function() {
alert('jQuery vous dit bonjour !');
});
Pour dclencher l'vnement personnalis bonjour_jquery lors du clic sur un lment d'identifiant #bonjour, vous
114/266
utiliserez la mthode trigger() :

Code : JavaScript
$('#bonjour').trigger('bonjour_jquery');
Voici un exemple de code complet :

Code : HTML
<button id="bonjour">Cliquez ici</button>
<script>
$(function() {
});
$('#bonjour').click(function() {
});
});
</script>
Le corps du document contient un bouton d'identifiant #bonjour. Le code jQuery dfinit l'vnement personnalis
bonjour_jquery et lui fait afficher une bote de message :
Code : JavaScript
});
Les instructions suivantes dfinissent une mthode vnementielle pour le clic sur le bouton d'identifiant #bonjour :
Code : JavaScript
Cette mthode dclenche l'vnement bonjour_jquery, et donc affiche la bote de message dfinie dans cette mthode :
Code : JavaScript
Est-il possible de passer des paramtres une procdure vnementielle personnalise ?
Cela est tout fait possible. Voici le code utiliser :
115/266
Code : HTML
<button id="bonjour">Cliquez ici</button>
<script>
$(function() {
$('#bonjour').on('bonjour_jquery', function(event, param) {
alert(param + ', jQuery vous dit bonjour !');
});
$('#bonjour').trigger('bonjour_jquery', 'Michel');
});
});
</script>
Comme vous pouvez le voir, deux paramtres sont passs la fonction de retour :
Code : JavaScript
$('#bonjour').on('bonjour_jquery', function(event, param) {
Utilisez le paramtre transmis comme bon vous semble. Ici par exemple, il est intgr dans le texte affich par la bote de message :
Code : JavaScript
alert(param + ', jQuery vous dit bonjour !');
Lors du dclenchement de l'vnement personnalis bonjour_jquery, il suffit de passer une valeur dans le deuxime
paramtre de la mthode trigger() :
Code : JavaScript
$('#bonjour').trigger('bonjour_jquery', 'Michel');
Le rsultat se trouve la figure suivante.
116/266
Les vnements
personnaliss peuvent tre facilement paramtrs
Dlgation d'vnements
jQuery est frquemment utilis pour ajouter des lments dans une page Web. Si des vnements sont attachs aux lments de
mme type dj existants, vous voudrez certainement attacher les mmes vnements aux nouveaux lments. Plutt que de
dfinir une mthode vnementielle pour chacun des nouveaux lments, vous utiliserez la dlgation d'vnements. Pour cela,
vous devez utiliser la mthode on() en lui transmettant trois arguments :
Code : JavaScript
$('#del').on('ev', 'sel', function () {
//Une ou plusieurs instructions
});
o :
del est l'lment dont on souhaite cloner le ou les gestionnaires d'vnements ;
ev est le nom de l'vnement concern ;
sel est un slecteur qui agit comme un filtre ;
function() est la fonction excuter lorsque l'vnement ev est dtect.
Lorsque l'vnement ev se produit sur l'lment retourn par le slecteur $('#del'), jQuery teste si cet vnement
correspond ce qui est spcifi dans le deuxime argument de la mthode on(). Si c'est le cas, la fonction est excute.
Voyons comment fonctionne cette mthode en pratique. Dans l'exemple suivant, nous allons dfinir une balise <div>, modifier
ses caractristiques l'aide de quelques instructions CSS et lui affecter une gestion vnementielle sur l'vnement click.
Lorsque cet vnement surviendra, une balise de mme type sera cre la suite de la balise clique, et la gestion vnementielle
de la balise clique lui sera affecte.
117/266
la figure suivante, un clic sur l'lment d'origine cre un autre lment ayant la mme allure et le mme comportement
vnementiel (1). Un deuxime clic sur l'lment d'origine cre un deuxime lment ayant la mme allure et le mme
comportement vnementiel (2). tant donn que le premier lment cr a le mme comportement vnementiel que celui dont il
est issu, il est galement possible de cliquer sur cet lment pour crer un clone vnementiel (3).
Clonage du comportement
de l'lment d'origine
Pour ceux qui frlent la syncope, voici (enfin !) un peu de code :
Code : HTML
<style>
div {
background:yellow;
font-weight:bold;
cursor:pointer;
padding:8px;
}
</style>
<div id="master">
<div>Cliquez pour insrer un autre &ltdiv&gt</div>
</div>
<script>
$('#master').on('click', 'div', function(){
$(this).after('<div>Ce <div> a les mmes caractristiques
que son parent</div>');
});
</script>
Le corps du document contient deux balises <div> imbriques. La balise conteneur (#master) est celle dont on dsire
reproduire le comportement. Le code CSS met en forme les balises <div> du document : arrire-plan de couleur jaune, graisse
des caractres initialise bold, pointeur de la souris transform en une main et marges intrieures fixes 8 pixels.
Examinons le code jQuery qui est l'origine du clonage vnementiel :
Code : JavaScript
});
118/266
Lorsque l'lment d'identifiant #master ($('#master')) est cliqu (on(click, )), jQuery vrifie qu'il s'agit bien d'un
lment de type div. Dans ce cas, la fonction de retour est excute. Cette fonction insre une balise <div> et son contenu
(<div>Ce <div> a les mmes caractristiques que son parent</div>) aprs l'lment qui
vient d'tre cliqu ($(this).after()). Vous pouvez indiffremment cliquer sur la balise <div> d'origine ou sur une des
balises <div> insres pour ajouter une nouvelle balise <div> aprs la dernire. La gestion vnementielle a donc bien t
clone.
La figure suivante reprsente le rsultat obtenu.
Un clic sur
une balise <div> permet d'en crer une nouvelle

La dlgation d'vnements apporte un avantage indniable : elle permet de rduire dans de larges proportions le nombre de
gestionnaires d'vnements dfinis dans le code. Imaginez que vous ayez plusieurs dizaines d'lments insrs dans le
conteneur pendant l'excution du code jQuery. Sans la dlgation d'vnements, vous devriez dfinir un gestionnaire
vnementiel pour chacun d'entre eux !
Pour supprimer une dlgation d'vnements, vous utiliserez la mthode off() :
Code : JavaScript
119/266
$('#del').off('ev', 'sel');
o :
del est l'lment partir duquel le ou les gestionnaires d'vnements ont t clons ;
ev est le nom de l'vnement concern ;
sel est un slecteur qui agit comme un filtre.
Nous allons ajouter un bouton de commande dans le code prcdent pour supprimer la dlgation d'vnements.
Code : HTML
<button id="suppr">Supprimer la dlgation d'vnements</button>
Code : JavaScript
});
$('#suppr').on('click', function() {
$('#master').off('click','div');
});
Le code jQuery capture l'vnement click sur le bouton d'identifiant #suppr :

Code : JavaScript
$('#suppr').on('click', function() {
Lorsque cet vnement se produit, la dlgation d'vnements est supprime en faisant appel la mthode off() :
Code : JavaScript
$('#master').off('click','div');
Certains vnements peuvent tre dclenchs par une instruction, en utilisant la mthode trigger() : blur,
change, click, dblclick, error, focus, keydown, keypress, keyup, select et submit. Par contre, les
vnements suivants ne sont pas dclenchables : load, mousedown, mouseout, mouseover, mousemove,
mouseup, resize et unload.
Il est possible de dfinir des vnements personnaliss en jQuery, en utilisant la mthode on(). L'vnement ainsi cr
peut tre dclench avec la mthode trigger().
La dlgation d'vnements permet de cloner la gestion vnementielle d'un lment un ou plusieurs de ses enfants
crs la vole dans le code jQuery. Peu importe le nombre d'lments crs : ils se comporteront tous (d'un point de vue
vnementiel) comme leur parent. Et ce, sans qu'aucun code supplmentaire ne soit crit.
120/266
Animations et effets
Dans ce chapitre, je vais vous montrer comment animer vos pages Web. Aprs cette lecture, vous saurez comment faire
apparatre, faire disparatre et animer des objets, en utilisant et en combinant les mthodes prdfinies dans jQuery.
Apparition et disparition
Vous avez prcdemment fait connaissance avec les mthodes show() et hide(). Dans les versions lmentaires de ces deux
mthodes, vous avez vu que hide() fait disparatre le ou les objets auxquels elle est applique, alors que show() fait
apparatre le ou les objets auxquels elle est applique.
Ainsi l'instruction $('div').hide(); cache toutes les balises <div> du document. Seulement, cette instruction fait
apparatre ou disparatre les lments correspondants immdiatement, sans aucune animation
Apparition/disparition avec une animation

Si vous passez une dure aux mthodes show() et hide(), l'apparition ou la disparition s'animent en agissant de concert sur
la hauteur, la largeur et l'opacit du ou des objets concerns. Vous pouvez passer une valeur numrique ces mthodes pour
indiquer le temps de l'animation en millisecondes ou passer la chane fast pour fixer la dure de l'animation 200 millisecondes,
ou la chane slow pour la fixer 600 millisecondes.
Voici un exemple d'animation bas sur l'utilisation des mthodes show() et hide(). Ici, deux boutons de commande
permettent d'afficher et de dissimuler les lignes paires d'un tableau.
Code : HTML
<button id="affiche">Faire apparatre les lignes paires</button>
<button id="cache">Faire disparatre les lignes paires</button><br
/>
<table border>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>d</td><td>e</td><td>f</td></tr>
<tr><td>g</td><td>h</td><td>i</td></tr>
<tr><td>j</td><td>k</td><td>l</td></tr>
<tr><td>m</td><td>n</td><td>o</td></tr>
</table>
<script>
$(function() {
$('tr:even').css('background','yellow');
$('td').css('width','200px');
$('td').css('text-align','center');
$('#affiche').click(function() {
$('tr:even').show('slow');
} );
$('#cache').click(function() {
$('tr:even').hide(1000);
});
});
</script>
Essayer
Le corps du document dfinit les boutons #affiche et #cache ainsi qu'un tableau compos de cinq lignes et de trois
colonnes. La mise en forme du tableau est effectue en jQuery. Dans un premier temps, une couleur d'arrire-plan jaune est
affecte aux lignes paires du tableau, puis la largeur de toutes les cellules du tableau est fixe 200 pixels. Enfin, le contenu des
cellules est centr.
Lorsque l'utilisateur clique sur le premier bouton, la procdure vnementielle $('#affiche').click () est excute. Les
lignes paires sont alors affiches (si elles taient caches) en utilisant une animation lente :
Code : JavaScript
121/266
$('tr:even').show('slow');
Lorsque l'utilisateur clique sur le deuxime bouton, la procdure vnementielle $('#cache').click() est excute. Les
lignes paires sont alors caches (si elles taient affiches) en utilisant une animation d'une dure de 1000 millisecondes :
Code : JavaScript
$('tr:even').hide(1000);
}
Si les valeurs prdfinies fast et slow ne vous suffisent pas, vous pouvez les redfinir, voire mme en ajouter d'autres. Vous
agirez pour cela sur l'objet jQuery.fx.speeds. Par exemple, l'instruction suivante redfinit la valeur slow et lui affecte une
dure de 1500 millisecondes :
Code : JavaScript
jQuery.fx.speeds.slow = 1500;
L'instruction suivante ajoute la valeur super-slow et lui affecte une dure de 3000 millisecondes :
Code : JavaScript
jQuery.fx.speeds['super-slow'] = 3000;
Ces valeurs pourront tre utilises dans les mthodes show() et hide(), mais galement dans les mthodes fadeIn(),
fadeOut(), fadeTo(), slideDown(), slideUp(), slideToggle() et animate(), qui seront tudies un peu
plus loin dans ce chapitre.
Animation avec un modle de progression

En prcisant un deuxime paramtre dans les mthodes show() et hide(), vous pouvez choisir un modle de progression de
l'animation. Deux modles sont disponibles dans jQuery : le modle par dfaut (swing) et le modle de progression linaire
(linear). Voici comment les incorporer aux mthodes show() et hide() :
Code : JavaScript
show('slow','linear');
hide(1000,'swing');
La deuxime instruction est quivalente l'instruction hide(1000); puisque le modle swing est utilis par dfaut s'il n'est
pas spcifi.
En faisant appel des plugins jQuery, vous pouvez utiliser d'autres modles de progression. Ne vous inquitez pas, j'en
parle plus loin dans ce cours.
Apparition/disparition en cascade
122/266
Il est possible d'utiliser une fonction de rappel dans les mthodes show() et hide(). Cette mthode est appele lorsque
l'affichage/la dissimulation est termin. Par exemple, cette instruction affiche une bote de dialogue lorsque la dissimulation des
images est termine :
Code : JavaScript
$('img').hide('slow', function message() {
alert('Les images sont maintenant caches');
});
En faisant rfrence au premier lment lors de l'excution de la fonction hide(), et en dfinissant une fonction de rappel qui
fait rfrence aux autres lments avec la mthode next(), il est possible de faire disparatre un un les lments concerns
par le slecteur. Un peu comme dans un jeu de dominos : le premier domino s'croule, entranant dans sa chute le deuxime
domino, qui entrane dans sa chute le troisime, et ainsi de suite. Ici, le premier lment disparat (ou apparat si vous utilisez la
mthode show()). Lorsque l'animation est termine, la fonction de rappel fait disparatre (ou apparatre) l'lment suivant. Ainsi
de suite jusqu'au dernier lment concern par le slecteur.
En utilisant ce principe, voyons comment enchaner l'apparition/la disparition des images insres dans un document.
Code : HTML
<button id="affiche">Faire apparatre les images</button>
<button id="cache">Faire disparatre les images</button><br />
<img src="bon.png">
<img src="mauvais.png">
<img src="question.png">
<script>
$(function() {
$('#affiche').click(function() {
$('img').first().show('slow', function showNextOne() {
$(this).next('img').show('slow', showNextOne);
});
});
$('img').first().hide('slow', function hideNextOne() {
$(this).next('img').hide('slow', hideNextOne);
});
});
});
</script>
Essayer
Le corps du document contient deux boutons d'identifiants #affiche et #cache et trois images sans identifiant, simplement
affiches l'une la suite de l'autre. Lorsque l'utilisateur clique sur le premier bouton, la mthode vnementielle click()
associe est excute. La premire image ($('img').first()) est affiche (show()). Cet affichage est lent (slow), et la
fonction showNextOne() est excute la fin de l'animation. son tour, la fonction showNextOne() affiche lentement
(slow) l'image suivante ($(this).next('img')). Cette fonction tant appele lorsque l'image est entirement affiche,
l'affichage se poursuit jusqu' la dernire image incluse dans le document.
Lorsque l'utilisateur clique sur le deuxime bouton, la mthode vnementielle associe est excute. Cette mthode est en tout
point similaire la prcdente, si ce n'est que les images disparaissent une une en utilisant la mthode hide().
Fondu enchan
Les mthodes fadeIn() et fadeOut() sont complmentaires des mthodes hide() et show(). Elles agissent toutes deux
progressivement sur l'opacit d'un lment. La premire affiche l'lment et la deuxime fait disparatre l'lment.
123/266
Apparition/disparition
Dans leur forme la plus simple, les mthodes fadeIn() et fadeOut() ne demandent aucun paramtre. Dans ce cas,
l'apparition ou la disparition se fait en 400 millisecondes :
Code : JavaScript
$('sel').fadeIn();
$('sel').fadeOut();
En passant une valeur numrique ces mthodes, vous pouvez indiquer le temps de l'animation en millisecondes. Vous pouvez
aussi passer la chane fast pour fixer la dure de l'animation 200 millisecondes, ou la chane slow pour la fixer 600
millisecondes :
Code : JavaScript
$('sel').fadeIn('fast');
$('sel').fadeOut('slow');
En ajoutant un deuxime paramtre dans les mthodes fadeIn() et fadeOut(), vous pouvez choisir un modle de
progression de l'animation. Deux modles sont disponibles dans jQuery : le modle par dfaut (swing) et le modle de
progression linaire (linear). Voici comment les incorporer aux mthodes show() et hide() :
Code : JavaScript
$('sel').fadeIn(1200,'linear');
$('sel').fadeOut(1000,'swing');
Tout comme pour les mthodes show() et hide(), vous pouvez faire appel des plugins jQuery pour utiliser
d'autres modles de progression.
Modification de l'opacit
Pour modifier progressivement l'opacit d'un lment sans aller jusqu' sa disparition ou sa complte opacit, vous utiliserez la
mthode fadeTo(), dont voici la syntaxe :
Code : JavaScript
$('sel').fadeTo(dure, opacit);
o :
sel est un slecteur jQuery ;
dure est la dure de l'animation. Indiquez un entier qui reprsente une dure en millisecondes ou une chane (fast,
normal ou slow pour fixer la dure 200, 400 ou 600 millisecondes) ;
opacit est un nombre dcimal compris entre 0 (transparent) et 1 (opaque).
Si ncessaire, vous pouvez dfinir une fonction de rappel, qui sera appele la fin de l'animation :
124/266
Code : JavaScript
$('sel').fadeTo(dure, opacit, function() {
// Une ou plusieurs instructions
});
titre d'exemple, vous utiliserez l'instruction suivante pour faire passer l'opacit d'un lment d'identifiant #semiT de sa valeur
actuelle 0,4 :
Code : JavaScript
$('#semiT').fadeTo(3000, 0.4);
Un diaporama en deux instructions

Je vous propose de mettre tout a en pratique afin de raliser un diaporama basique. Nous allons empiler plusieurs images en les
faisant disparatre grce la mthode fadeOut(). Voici le code :
Code : HTML
img { position: absolute; left: 0px; top: 0px; }
#img1 {z-index: 1;}
#img2 {z-index: 2;}
#img3 {z-index: 3;}
#img4 {z-index: 4;}
#img5 {z-index: 5;}
</style>
<img
<img
<img
<img
<img
src="zozor5.jpg"
src="zozor4.jpg"
src="zozor3.jpg"
src="zozor2.jpg"
src="zozor1.jpg"
id="img5">
id="img4">
id="img3">
id="img2">
id="img1">
<script>
$(function() {
$('img').first().fadeOut(2000, function suivante() {
$(this).next('img').fadeOut(2000,suivante);
});
});
</script>
Le corps du document se contente d'afficher cinq images d'identifiants #img5 #img1. Quelques instructions CSS suffisent
pour que les images s'empilent les unes sur les autres. Pour cela, les images sont positionnes au mme emplacement et un zindex diffrent est affect chacune d'entre elles pour provoquer l'empilement (plus la proprit z-index est leve, plus
l'image se trouve en avant-plan ; ici, l'image #img5 sera donc au premier plan).
Ds l'ouverture de la page, le code jQuery commence afficher le diaporama. La premire image disparat en 2 secondes en
utilisant la mthode fadeOut(), puis la fonction suivante() est appele :
Code : JavaScript
$('img').first().fadeOut(2000, function suivante() {
125/266
Cette fonction accde l'image suivante ($(this).next('img')), lui applique un fadeOut() rgl sur 2 secondes, puis
appelle la fonction suivante() :
Code : JavaScript
$(this).next('img').fadeOut(2000,suivante);
Vous l'aurez compris : la fonction suivante() est appele jusqu' la dernire image, provoquant ainsi un fondu enchan sur
toutes les images empiles.
Une fois les cinq images dissimules, plus rien ne se passe. Est-il possible de boucler sur la premire image pour faire
un diaporama sans fin ?
Effectivement, lorsque toutes les images ont t dissimules avec la mthode fadeOut(), la fentre reste dsesprment vide.
J'espre que vous ne m'en voudrez pas trop mais je vous montrerai comment raliser des diaporamas un peu plus loin dans ce
cours. Pour l'instant, il est encore trop tt et j'espre que vous pourrez vous contenter de cette bauche de diaporama.
Aller plus loin

Dplier/replier des lments
Arrivs ce point dans la lecture de ce chapitre, vous savez faire apparatre et disparatre des lments en utilisant les mthodes
show(), fadeIn(), hide() et fadeOut(). Je vous propose de dcouvrir comment dplier et replier des lments en
modifiant simultanment leur hauteur et leur largeur. Pour cela, vous utiliserez les mthodes slideDown(), slideUp() et
slideToggle() :
slideDown() augmente la hauteur et la largeur de la slection jusqu' atteindre la dimension native de chaque
lment ;
slideUp() diminue la hauteur et la largeur de la slection jusqu' ce qu'elle disparaisse ;
slideToggle() inverse l'animation : si les objets slectionns ont une taille nulle, leur hauteur et leur largeur sont
augmentes jusqu' ce qu'ils atteignent leur dimension. Par contre, s'ils ont une taille non nulle, leur hauteur et leur
largeur sont diminues jusqu' ce qu'ils disparaissent.
Tout comme les autres mthodes d'animation tudies jusqu'ici, il est possible de passer zro, un ou plusieurs paramtres ces
mthodes. Voici quelques exemples qui vous aideront mieux comprendre comment ragissent ces mthodes en fonction des
paramtres qui leur sont passs.
Dsactiver les animations

De nombreux sites Web utilisent couramment les animations dont nous venons de parler. Si, vous aussi, vous en faites usage
dans vos pages, je vous conseille d'insrer un lien permettant de les dsactiver.
Mais pourquoi dsactiver les animations que nous avons mis du temps dvelopper ?
La plupart de vos visiteurs apprcieront vos animations, mais il faut aussi penser ceux et celles qu'elles pourraient dranger !
D'autant plus que cette opration est lmentaire en jQuery : pour dsactiver toutes les animations, il vous suffit d'affecter la
valeur true l'objet jQuery.fx.off :
Code : JavaScript
jQuery.fx.off = true;
126/266
Et si, par la suite, vous voulez ractiver les animations, vous affecterez la valeur false ce mme objet. L'activation et la
dsactivation des animations pourraient tre dclenches suite au clic sur un lien hypertexte que vous placerez dans vos pages.
Le plus simple consiste crer deux classes :
Code : JavaScript
$('.stopAnim').click(function() {
jQuery.fx.off = true;
});
$('.execAnim').click(function() {
jQuery.fx.off = false;
});
C'est tout bte mais a fonctionne trs bien !
Dfinir un dlai avant une animation

Il est parfois ncessaire de dfinir un dlai avant d'excuter une animation. Pour cela, le plus simple consiste utiliser la mthode
jQuery delay(), en prcisant le dlai souhait en millisecondes. Par exemple, supposons que vous vouliez afficher un message
avec la mthode fadeIn(), le laisser affich pendant deux secondes pour qu'il ait le temps d'tre lu, puis l'effacer avec la
mthode fadeOut(). Vous pourriez utiliser quelque chose comme ceci :
Code : HTML
<style>
#message { display: none; background-color: yellow; }
</style>
<span id="message">Ce texte sera affich pendant deux
secondes</span><br /><br />
<button id="afficheMessage">Afficher le message</button>
<script>
$(function() {
$('#afficheMessage').click(function() {
$('#message').fadeIn('slow').delay(2000).fadeOut('slow');
});
});
</script>
Le corps du document affiche une balise <span> dans laquelle se trouve le message, et un bouton pour dclencher l'affichage
du message. Pour viter que le message ne soit affich l'ouverture de la page, une instruction CSS affecte la valeur none la
proprit display de la balise <span>. Lorsque le bouton est cliqu par l'utilisateur, le texte contenu dans la balise <span>
s'affiche progressivement (fadeIn('slow')), reste affich pendant 2 secondes (delay(2000)), puis disparat
progressivement (fadeOut('slow')).
Dfinir une animation personnalise

Les mthodes passes en revue jusqu'ici taient bases sur des effets prprogramms dans la bibliothque jQuery. Dans cette
section, je vais vous montrer comment crer des animations personnalises en agissant sur une ou plusieurs proprits CSS via
la mthode animate(). Cette mthode admet deux syntaxes.
Premire syntaxe
Cette syntaxe est la plus frquemment utilise. Elle permet de faire voluer plusieurs proprits de concert. Il est possible de
choisir la dure de l'animation, le modle de progression de l'animation et, si cela est ncessaire, d'excuter une fonction lorsque
127/266
l'animation est termine :

Code : JavaScript
$('sel').animate({ prop1: val1, prop2: val2, prop3: val3, etc. },
dure, modle, function() {
});
o :
sel est un slecteur jQuery.
prop1, prop2 et prop3 sont des proprits CSS et val1, val2 et val3 les valeurs associes. Une valeur
numrique sera interprte comme un nombre de pixels. Une valeur du type +=50 demandera d'ajouter
progressivement 50 pixels la proprit. Inversement, la valeur -=50 demandera de soustraire progressivement 50
pixels la proprit. Vous pouvez galement utiliser les chanes show, hide et toggle pour respectivement afficher,
dissimuler et inverser la proprit.
dure est la dure de l'animation (entier en millisecondes ou chane fast, normal ou slow).
modle est le modle de progression de l'animation (swing, linear ou un modle issu d'un plugin).
function() contient une ou plusieurs instructions qui seront excutes lorsque l'animation sera termine.
Dans cette syntaxe, dure, modle et la fonction sont facultatifs. Si vous ne spcifiez qu'un ou plusieurs couples
proprits/valeurs CSS, l'animation durera 400 millisecondes.
Les donnes spcifies dans le premier argument de la mthode animate() peuvent tre :
Des valeurs littrales : 0.25 , 50 , 'yellow' ;
Des valeurs relatives : +=100 pour augmenter de 100 pixels ou -=30 pour diminuer de 30 pixels ;
Des pourcentages : 15% ;
Des modles de progression : swing, linear ou d'autres modles accessibles via des plugins ;
Le mot cl toggle pour inverser l'animation.
Deuxime syntaxe
Dans cette syntaxe, le deuxime argument de la mthode animate() est un objet qui peut contenir une ou plusieurs options
identifies par des mots-cls. Elle est utilise dans des cas particuliers, comme par exemple l'excution d'une fonction chaque
tape de l'animation, la gestion des files d'attente d'animations ou encore l'utilisation de plusieurs modles de progression pour
faire voluer les diffrentes proprits CSS :
Code : JavaScript
{options});
o :
prop1, prop2 et prop3 sont des proprits CSS et val1, val2 et val3 les valeurs associes ;
options est un objet qui peut contenir une ou plusieurs des proprits suivantes :
duration : dure de l'animation (entier en millisecondes ou chane fast, normal ou slow) ;
easing : modle de progression de l'animation (swing, linear ou un modle issu d'un plugin) ;
complete : fonction appele lorsque l'animation est termine ;
step : fonction appele chaque tape de l'animation ;
queue : valeur boolenne qui indique si l'animation doit (true) ou ne doit pas (false) tre place dans une file
128/266
d'attente rserve aux animations. Si la valeur false est attribue cette proprit, l'animation dmarre
immdiatement. Dans le cas contraire, elle est en attente de dclenchement.
specialEasing : un ou plusieurs couples proprits CSS/modle de progression.
Lorsque les mthodes show(), hide(), fadeIn(), fadeOut(), fadeTo(), slideDown(), slideUp() et
slideToggle() sont utilises sans argument, leur dure d'excution est par dfaut gale 400 millisecondes. Si vous
le souhaitez, il est possible de choisir une autre dure. Vous pouvez utiliser la chane fast pour fixer la dure 200
millisecondes ou la chane slow pour fixer la dure 600 millisecondes. Mais vous pouvez galement passer un nombre
entier qui reprsente une dure en millisecondes.
Deux modles de progression sont disponibles pour vos animations : linear et swing. Si vous voulez utiliser d'autres
modles de progression, vous devrez utiliser un ou plusieurs plugins.
Les mthodes fadeIn(), fadeOut() et fadeTo() permettent d'agir sur l'opacit des lments slectionns. La
premire fait apparatre la slection en augmentant l'opacit jusqu' 1.La deuxime fait disparatre la slection en
diminuant l'opacit jusqu' 0. La troisime augmente ou diminue l'opacit jusqu' ce qu'elle atteigne la valeur spcifie.
Pour replier des lments vers le haut ou vers le bas, vous pouvez utiliser les mthodes slideDown(), slideUp() et
slideToggle(). Un niveau minimum en anglais vous laisse supposer que la premire mthode dplie la slection vers
le bas et la deuxime replie la slection vers le haut. Quant la troisime, elle agit comme slideDown() ou comme
slideUp() en fonction de l'tat (dpli ou repli) de la slection.
L'objet jQuery.fx.off permet d'activer et de dsactiver les animations. Affectez-lui la valeur true pour dsactiver
toutes les animations et la valeur false pour autoriser les animations.
La mthode delay() permet de diffrer l'excution d'une animation. Vous pouvez l'insrer dans un chanage
d'animations.
Il est possible de dfinir des animations en faisant voluer progressivement une ou plusieurs proprits CSS via la
mthode animate(). Ces animations sont dites personnalises.
129/266
Files d'attente et timer

Ce chapitre poursuit votre formation sur les animations. Vous y dcouvrirez entre autres comment enchaner vos animations, ou
au contraire comment les excuter simultanment, comment rpter sans fin une animation, et comment mettre en place un timer
pour excuter du code intervalles rguliers.
Les files d'attente jQuery

Les animations jQuery sont asynchrones, c'est--dire qu'elles s'excutent en tche de fond. Si vous enchanez deux animations
en utilisant une instruction du type suivant :
Code : JavaScript
$('sel').animate().animate();
alors la deuxime animation commence quand la premire est termine. Il s'agit l du comportement par dfaut de jQuery : les
animations sont places dans une file d'attente et s'enchanent, les unes la suite des autres. Si vous souhaitez que plusieurs
animations s'excutent en mme temps, il suffit d'indiquer les proprits CSS modifier dans le premier argument de la mthode
animate() :
Code : JavaScript
$('sel').animate({ prop1: val1, prop2: val2, } );
Mais, dans ce cas, la vitesse d'excution de chaque animation est commune. Si vous voulez excuter plusieurs animations en
mme temps, chacune ayant une vitesse d'excution qui lui est propre, vous devez utiliser une technique particulire, base sur
l'utilisation de la proprit queue dans la deuxime syntaxe de la mthode animate() :
Code : JavaScript
{queue: });
Voyons tout cela en raisonnant sur un exemple pratique. Nous allons appliquer deux animations une image : la premire
augmentera progressivement la largeur de la bordure et la deuxime diminuera progressivement la taille de l'image. Voici le code
utilis :
Code : HTML
<button id="enchainer">Enchaner les animations</button>
<button id="nePasEnchainer">Ne pas enchaner les
animations</button><br />
<button id="executerEnMemeTemps">Excuter les animations en mme
temps</button>
<button id="etatInitial">tat initial</button><br /><br />
<img src="logo.png" style="border: 2px black solid;">
<script>
$(function() {
$('#enchainer').click( function() {
$('img').animate({ 'border-width': '100'}, 1500 )
.animate({ 'width': '-=100'}, 1500);
});
$('#nePasEnchainer').click( function() {
$('img').animate({ 'border-width': '100'}, { queue: false,
duration: 1500 })
.animate({ 'width': '-=100'}, 1500);
});
130/266
$('#executerEnMemeTemps').click( function() {
$('img').animate({ 'border-width': '100', 'width': '-=100' },
1500);
});
$('#etatInitial').click( function() {
$('img').css({'border-width': '2px', width: '200'});
});
});
</script>
Essayer
Le corps du document dfinit quatre boutons ainsi qu'une image dont la bordure est dfinie par un style CSS.
Lorsque le premier bouton est cliqu par l'utilisateur, la bordure de l'image s'agrandit jusqu' 100 pixels en 1500 millisecondes :
Code : JavaScript
$('img').animate({ 'border-width': '100'}, 1500 )
Une fois cette premire animation termine, la largeur de l'image diminue de 100 pixels en 1500 millisecondes :
Code : JavaScript
.animate({ 'width': '-=100'}, 1500);
Affichez cette page dans un navigateur et cliquez sur le premier bouton. Comme vous pouvez le voir, la bordure de l'image est
modifie, puis l'image est redimensionne.
Lorsque le deuxime bouton est cliqu, la bordure de l'image s'agrandit jusqu' 100 pixels en 1500 millisecondes. Comme la
proprit queue est initialise false, la deuxime animation est excute en mme temps que la premire. tant donn que les
deux animations ont la mme dure, elles s'excuteront exactement en mme temps :
Code : JavaScript
$('img').animate({ 'border-width': '100'}, { queue: false, duration:
1500 })
.animate({ 'width': '-=100'}, 1500);
Affichez cette page dans un navigateur et cliquez sur le deuxime bouton. La modification de la bordure et le redimensionnement
de l'image se font en parallle.
Lorsque le troisime bouton est cliqu, les deux animations sont excutes en parallle :
Code : JavaScript
$('img').animate({ 'border-width': '100', 'width': '-=100' }, 1500);
Affichez cette page dans un navigateur et essayez de trouver une diffrence entre les animations associes au deuxime et au
troisime bouton Vous avez du mal les diffrencier ? Cela est tout fait normal, puisqu'elles produisent le mme effet.
131/266
Mais alors, pourquoi utiliser le code du deuxime bouton ? Il est bien plus complexe et il produit le mme effet !
Vous avez raison, un dtail prs : si les deux traitements produisent le mme effet, c'est parce que les deux animations ont une
dure identique. Essayez de modifier la valeur affecte la proprit duration, dans la mthode
$('#nePasEnchainer').click(). Affectez-lui par exemple la valeur 500 et visualisez le rsultat. Affectez maintenant la
valeur 3000 cette proprit et visualisez le rsultat. Je suis sr que maintenant vous comprenez l'intrt du code attach au
deuxime bouton.
Lorsque le quatrime bouton est cliqu, les proprits CSS border-width et width de l'image sont initialises leurs
valeurs originales, ce qui permet de retrouver l'image telle qu'elle tait affiche l'ouverture de la page :
Code : JavaScript
$('img').css({'border-width': '2px', width: '200'});
tat de la file d'attente

Quand plusieurs animations s'enchanent sur un mme objet, elles sont places dans une file d'attente, prtes s'excuter les
unes aprs les autres. Pour connatre l'tat de la file d'attente pour un objet particulier, vous lui appliquerez la mthode queue()
sans aucun argument. Par exemple, pour connatre l'tat de la file d'attente pour un lment d'identifiant #monElement, vous
utiliserez cette instruction :
Code : JavaScript
var resultat = $('#monElement').queue();
La mthode queue() retourne un tableau. Le nombre d'animations en attente d'excution est gal au nombre d'lments du
tableau, et donc resultat.length.
Pour illustrer cette mthode, nous allons nous appuyer sur quelques lignes de code jQuery. Nous allons appliquer une ou
plusieurs animations une image et tester le nombre d'animations en attente d'excution en cliquant sur un bouton. Voici le code
utilis :
Code : HTML
<button id="droite">Droite</button>
<button id="gauche">Gauche</button>
<button id="bas">Bas</button>
<button id="haut">Haut</button>
<button id="etatFile">Etat de la file d'attente</button><br />
<span id="infos">Cliquez sur Etat de la file d'attente</span><br
/><br />
<img src="logo.png" style="position: relative;">
<script>
$(function() {
$('#droite').click( function() {
$('img').animate({left: '+=50'}, 2000);
});
$('#gauche').click( function() {
$('img').animate({left: '-=50'}, 2000);
});
$('#bas').click( function() {
$('img').animate({top: '+=50'}, 2000);
});
$('#haut').click( function() {
$('img').animate({top: '-=50'}, 2000);
});
$('#etatFile').click(function() {
var n = $('img').queue();
132/266
$('#infos').text('Nombre d\'animations dans la file d\'attente

: ' + n.length);
});
});
</script>
Essayer
Le document contient cinq boutons, une balise <span> et une image positionne en relatif dans la page de faon pouvoir tre
dplace facilement. Trs classiques, les quatre premiers boutons appliquent une animation de 2 secondes l'image en la
dplaant respectivement vers la droite, vers la gauche, vers le bas et vers le haut. Par exemple, lorsque le bouton #haut est
cliqu, le code suivant s'excute :
Code : JavaScript
$('img').animate({top: '-=50'}, 2000);
La vitesse de l'animation est volontairement longue. Cela permet l'utilisateur de mettre plusieurs animations dans la
file d'attente.
Lorsque le cinquime bouton est cliqu, la mthode queue() est appele afin de connatre le nombre d'animations dans la file
d'attente. L'objet retourn par la mthode queue() est stock dans la variable n :
Code : JavaScript
var n = $('img').queue();
En appliquant la fonction JavaScript length cette variable, on obtient le nombre d'animations en attente d'excution. Cette
information est affiche dans la balise <span> #infos :
Code : JavaScript
$('#infos').text('Nombre d\'animations dans la file d\'attente : ' +
n.length);
Manipuler la file d'attente

Dans les sections prcdentes, vous avez appris utiliser la proprit queue pour indiquer si une animation devait ou ne devait
pas tre place dans la file d'attente, et la mthode queue() pour connatre l'tat de la file d'attente. Vous allez maintenant
apprendre utiliser les mthodes queue(), dequeue() et clearQueue() pour manipuler la file d'attente :
queue() ajoute une animation dans la file d'attente ;
dequeue() joue puis supprime une animation de la file d'attente ;
clearQueue() vide la file d'attente.
Comme toujours, c'est par la pratique que vous allez comprendre le fonctionnement de ces mthodes. Dans cet exemple, deux
images sont affiches dans le navigateur. l'aide de quatre boutons de commande, vous allez pouvoir :
Jouer une animation, puis, lorsqu'elle sera termine, ajouter d'autres animations dans la file d'attente avec la mthode
queue() ;
Supprimer le contenu de la file d'attente ;
Remplacer le contenu de la file d'attente ;
Ajouter une fonction de retour la file d'attente.
133/266
Voici le code utilis :

Code : HTML
<button id="ajouter">Ajouter animation</button>
<button id="annuler">Annuler la file d'attente</button><br />
<button id="remplacer">Remplacer la file d'attente</button>
<button id="retour">Ajouter une fonction de retour</button><br />
<img src="bon.gif" id="bon" style="position: relative;">
<img src="mauvais.gif" id="mauvais" style="position: relative;">
<script>
$(function() {
$('#ajouter').click( function() {
$('#bon').toggle(5000)
.queue(function() {
$('#mauvais').animate({left: '+=200'}, 'slow')
.animate({top: '+=200'}, 'slow')
.animate({left: '-=200'}, 'slow')
.animate({top: '-=200'}, 'slow');
});
});
$('#annuler').click( function() {
$('img').clearQueue();
});
$('#remplacer').click( function() {
$('#mauvais').css('left', 200).css('top', 200);
$('#mauvais').queue(function() {
$(this).animate({top: '-=200'}, 'slow')
.animate({top: '+=200', 'left': '-=200'},
'slow')
$(this).dequeue();
});
});
$('#retour').click( function() {
$('img').queue(function() {
alert('Animation termine.');
$(this).dequeue();
});
});
});
</script>
Lorsque le premier bouton (#ajouter) est cliqu, la mthode toggle est applique l'image d'identifiant #bon pour la faire
disparatre ou apparatre, selon qu'elle soit visible ou non :
Code : JavaScript
$('#bon').toggle(5000)
Lorsque cette premire animation est termine (c'est--dire au bout de 5 secondes), quatre autres animations sont places dans la
file d'attente l'aide de la mthode queue() :
Code : JavaScript
.queue(function() {
$('#mauvais').animate({left: '+=200'}, 'slow')
134/266

});
});
Le code associ au deuxime bouton de commande est simplissime : il se contente d'appeler la mthode clearQueue() pour
effacer le contenu de la file d'attente :
Code : JavaScript
$('#annuler').click( function() {
$('img').clearQueue();
});
Lorsque le troisime bouton est cliqu, la mthode css() est invoque deux reprises pour dplacer l'image #mauvais en
(200, 200) :
Code : JavaScript
$('#mauvais').css('left', 200).css('top', 200);
Une animation sur l'image #mauvais est place dans la file d'attente :
Code : JavaScript
$('#mauvais').queue(function() {
$(this).animate({top: '-=200'}, 'slow')
.animate({top: '+=200', 'left': '-=200'}, 'slow')
En invoquant la mthode dequeue(), cette animation est joue immdiatement et enleve de la file d'attente :
Code : JavaScript
$(this).dequeue();
Enfin, lorsque le quatrime bouton est cliqu, une fonction de retour est ajoute la file d'attente via la mthode queue().
Cette fonction se contente d'afficher une bote de message pour indiquer que l'animation est termine :
Code : JavaScript
$('img').queue(function() {
alert('Animation termine.');
$(this).dequeue();
});
Rpter une animation sans fin

Toutes les animations jQuery prsentes jusqu'ici s'excutaient suite des actions de l'utilisateur et s'arrtaient aprs leur
excution. Que diriez-vous d'excuter une animation en boucle ?
Le principe repose sur la dfinition d'une fonction JavaScript dans laquelle on insre un ou plusieurs appels la mthode
135/266
animate(). Le dernier de ces appels utilise une fonction de rappel qui excute cette mme fonction JavaScript !
Pour illustrer mes propos, nous allons dplacer indfiniment une balise <div> sur un carr de 200 pixels de ct. Voici le code
utilis :
Code : HTML
#balle {
width: 10px;
height: 10px;
border: black 2px solid;
border-radius: 10px;
position: relative;
}
</style>
<div id="balle"></div>
<script>
$(function() {
function bis() {
$('#balle').animate({left: '+=200'}, 'slow')
.animate({top: '-=200'}, 'slow', bis);
};
bis();
});
</script>
Essayer
Le corps du document contient une simple balise <div> d'identifiant #balle. Cette balise est mise en forme par quelques
instructions CSS. Sont ainsi dfinies les dimensions, la couleur d'arrire-plan, la bordure et le type de positionnement.
La fonction bis() dcrit un cycle d'animation de la balise <div>. Elle est tout d'abord dplace vers la droite de 200 pixels en
200 millisecondes, puis vers le bas de 200 pixels en 200 millisecondes, puis vers la gauche de 200 pixels en 200 millisecondes et
enfin vers le haut de 200 pixels, toujours en 200 millisecondes :
Code : JavaScript
.animate({top: '-=200'}, 'slow', bis);
};
Remarquez le dernier paramtre de la mthode animate(). En utilisant la fonction de rappel bis(), un nouveau cycle
d'animation est lanc.
Il ne suffit pas de dfinir la fonction bis() pour qu'elle soit excute. C'est pourquoi la fonction bis() est appele
une premire fois, juste avant la balise </script>, afin d'amorcer l'animation.
Arrter et reprendre une animation

La mthode stop() permet d'arrter une animation. Selon les paramtres qui lui sont passs, cette mthode peut supprimer ou
non les animations en attente et/ou afficher l'tat final de l'animation. Voici sa syntaxe :
136/266
Code : JavaScript
$('sel').stop(efface, fin);
o :
efface est une valeur boolenne qui indique si les animations en attente d'excution doivent tre (true) ou non
(false) supprimes de la file d'attente ;
fin est une valeur boolenne qui indique si l'animation doit prendre son tat final (true) ou non (false). Si ce
paramtre n'est pas spcifi, l'animation reste dans l'tat o elle se trouvait au moment de son arrt.
Dans l'exemple suivant, deux animations sont appliques une image : un dcalage vers la droite, puis un dcalage vers le bas.
tout moment, l'utilisateur peut arrter l'animation en cours en cliquant sur un bouton de commande. Trois types d'arrt sont
proposs :
Arrt et positionnement la fin de l'animation en cours ;
Arrt de l'animation en cours, annulation des animations en attente et dplacement la fin de l'animation en cours ;
Simple arrt de l'animation.
Un autre bouton permet de reprendre l'animation comme l'ouverture de la page. Voici le code utilis :
Code : HTML
<button id="stopFin">Stop et fin</button>
<button id="stopAnnuleFin">Stop, annule et fin</button>
<button id="stop">Stop</button>
<button id="reprise">Reprise</button><br /><br />
<img src="image.png" style="position: relative;">
<script>
$(function() {
$('img').animate({left: '+=500'}, 2000).animate({top: '+=300'},
2000);
$('#stopFin').click( function() {
$('img').stop(false, true);
});
$('#stopAnnuleFin').click( function() {
$('img').stop(true, true);
});
$('#stop').click( function() {
$('img').stop(true, false);
});
$('#reprise').click( function() {
$('img').css('left', 0).css('top', 0);
$('img').animate({left: '+=500'}, 2000).animate({top:
'+=300'}, 2000);
});
});
</script>
Ds que le DOM est prt, l'image est anime :

Code : JavaScript
$(function() {
2000);
137/266
L'utilisateur peut alors cliquer sur l'un des trois premiers boutons pour arrter l'animation. Un clic sur le premier bouton met fin
l'animation en cours, ne supprime pas les animations dans la file d'attente (premier paramtre false) et place l'image dans sa
position finale (deuxime paramtre true) :
Code : JavaScript
$('#stopFin').click( function() {
$('img').stop(false, true);
});
Un clic sur le deuxime bouton met fin l'animation en cours, supprime les animations dans la file d'attente (premier paramtre
true) et place l'image dans sa position finale (deuxime paramtre true) :
Code : JavaScript
$('#stopAnnuleFin').click( function() {
$('img').stop(true, true);
});
Enfin, un clic sur le troisime bouton met fin l'animation en cours, supprime les animations dans la file d'attente (premier
paramtre true) et laisse l'image dans sa position actuelle (deuxime paramtre false) :
Code : JavaScript
$('#stop').click( function() {
$('img').stop(true, false);
});
Examinons la dernire mthode vnementielle. Lorsque l'utilisateur clique sur le quatrime bouton, l'image est repositionne
son emplacement d'origine :
Code : JavaScript
$('img').css('left', 0).css('top', 0);
et l'animation qui lui a t applique l'ouverture de la page est relance :

Code : JavaScript
2000);
Mettre en place un timer

Vous avez vu dans ce chapitre qu'il tait possible de rpter une srie d'animations en plaant toutes les animations dans une
fonction, et en utilisant la fonction de rappel de la dernire animation pour excuter nouveau la fonction. Une autre technique
est possible. Je tenais vous la montrer avant de terminer ce chapitre, car elle vous sera certainement utile si vous vous
aventurez crer des jeux ou des zones animes sur le Web. Cette technique consiste utiliser un timer JavaScript via la
fonction setInterval() :
Code : JavaScript
138/266
function nom() {
// Une ou plusieurs instructions JavaScript et/ou jQuery
}
setInterval(nom, priode);
o :
nom est le nom de la fonction qui doit tre excute priodiquement ;
dure est la priode (c'est--dire le temps) entre deux excutions conscutives des instructions contenues dans la
fonction.
Une horloge lmentaire

Dans ce premier exemple, nous allons raliser une horloge numrique lmentaire en utilisant la fonction JavaScript
setInterval(). L'heure sera mise jour toutes les secondes dans une balise <span> en utilisant une instruction jQuery.
Code : HTML
<span id="heure"></span>
<script>
$(function() {
function Horloge() {
var laDate = new Date();
var h = laDate.getHours() + ":" + laDate.getMinutes() + ":" +
laDate.getSeconds();
$('#heure').text(h);
}
setInterval(Horloge, 1000);
});
</script>
Lorsque le DOM est disponible, la fonction Horloge() est dfinie. Aprs avoir cr l'objet Date, les heures, minutes et
secondes sont rcupres via les fonctions getHours(), getMinutes() et getSeconds(), et stockes dans la variable
h:
Code : JavaScript
function Horloge() {
var laDate = new Date();
var h = laDate.getHours() + ":" + laDate.getMinutes() + ":" +
laDate.getSeconds();
Le contenu de la balise <span> #heure est alors mis jour en y affichant la valeur qui vient d'tre stocke dans la variable h :
Code : JavaScript
$('#heure').text(h);
Pour que la fonction Horloge() s'excute toutes les secondes, il suffit maintenant d'utiliser la fonction setInterval() en
139/266
passant Horloge en premier argument et 1000 en deuxime argument :

Code : JavaScript
setInterval(Horloge, 1000);
Ne mettez pas le nom de la fonction entre apostrophes ou entre guillemets, ne la faites pas suivre de parenthses
ouvrante et fermante ni d'un point-virgule, sans quoi la fonction ne sera pas appele !
Une animation sans fin

Ce deuxime exemple reprend l'animation de la section Rpter une animation sans fin et l'excute en boucle avec la fonction
setInterval(). Voici le code utilis :
Code : HTML
<!DOCTYPE html>
#balle {
width: 10px;
height: 10px;
border-radius : 10px;
position: relative;
}
</style>
<body>
<div id="balle"></div>
<script>
$(function() {
function bis() {
};
setInterval(bis, 2400);
});
</script>
Le corps du document ne contient qu'une balise <div> d'identifiant #balle. Lorsque le DOM est disponible, la fonction
JavaScript bis() est dfinie. Dans cette fonction se trouvent les quatre animations qui font dcrire un carr la balle :
Code : JavaScript
function bis() {
};
Si vous pensez qu'il n'y a rien de bien nouveau dans ce code, examinez la dernire mthode animate() : la fonction de rappel a
140/266
disparu !
Cela est tout fait normal puisque l'excution rpte de la fonction bis() ne va pas se faire par la fonction de rappel de la
dernire animation, mais par une instruction setInterval(). Cette instruction suit la fonction bis(). Elle appelle la
fonction bis() toutes les 2400 millisecondes :
Code : JavaScript
setInterval(bis, 2400);
Pourquoi avoir choisi 2400 millisecondes ?
Rflchissez un peu La valeur slow, passe en deuxime argument des quatre mthodes animate, correspond une dure
de 600 millisecondes. tant donn que l'on enchane quatre animations, vous avez votre rponse.
Les animations jQuery sont asynchrones. Si vous lancez plusieurs animations, elles seront places dans une file
d'attente. La nime animation ne pourra tre lance que lorsque la prcdente sera termine moins que vous
n'agissiez sur la file d'attente. Pour cela, vous utiliserez la deuxime syntaxe de la mthode animate() pour dclencher
simultanment plusieurs animations.
Pour connatre le nombre d'animations qui se trouvent dans la file d'attente, utilisez la mthode queue() sans argument
et testez sa proprit length.
Vous pouvez utiliser les mthodes queue(), dequeue() et clearQueue() pour manipuler la file d'attente :
queue() ajoute une animation dans la file d'attente, dequeue() joue puis supprime une animation de la file d'attente,
clearQueue() vide la file d'attente.
La mthode stop() met fin l'animation en cours. Selon les paramtres qui lui sont passs, les animations suivantes
sont ou ne sont pas effaces de la file d'attente et l'animation est affiche dans son tat final ou s'arrte simplement.
Deux techniques permettent de rpter une srie d'animations sans fin. Aprs avoir inclus les animations dans une
fonction, vous pouvez :
Utiliser la fonction de rappel de la dernire animation pour rappeler la fonction ;
Appeler la fonction en mettant en place un timer JavaScript.
141/266
Textes et images
Dans ce chapitre, nous allons voir quelques mthodes spcialises dans le traitement des chanes de caractres et des images.
Vous allez apprendre supprimer des espaces dans une chane, faire des recherches et des remplacements, mais aussi crer
une galerie d'images ou un diaporama.
Les chanes de caractres

Supprimer des espaces dans une chane
La fonction $.trim() supprime les espaces au dbut et la fin d'une chane. Pour mettre en vidence son fonctionnement, le
code suivant demande l'utilisateur d'entrer du texte dans la zone de texte en le faisant prcder et/ou suivre par des espaces. Ce
texte est alors affich dans une balise <pre> tel qu'il a t saisi, puis tel qu'il est aprs avoir t trait par la fonction trim().
Code : HTML
Tapez du texte dans la zone de texte en le faisant commencer et/ou
finir par des espaces, puis cliquez sur le bouton.<br><br>
<input type="text" id="texte" />
<button id="action">Cliquez ici</button>
<pre id="resultat"></pre>
<script>
$(function() {
$('#action').click(function() {
var leTexte = $('#texte').val();
$('#resultat').html('Texte original : "' + leTexte + '"' +
'<br>Aprs la fonction trim() : "' +
$.trim(leTexte) + '"');
});
});
</script>
Le rsultat se trouve la figure suivante.
La fonction $.trim() supprime
tous les espaces au dbut et la fin de la chane

Ce code n'a rien d'extraordinaire et vous devriez tre en mesure de le comprendre par vous-mmes. Cependant, remarquez
l'utilisation d'une balise <pre> pour afficher le rsultat. Ce choix de balise est intentionnel, car le texte y est affich avec des
142/266
caractres non proportionnels, c'est--dire dont la largeur est fixe. Par exemple, une espace est aussi large que la lettre i ou
encore que la lettre R.
Position d'un caractre dans une chane

La fonction charAt() permet d'obtenir le caractre qui se trouve une position donne dans une chane. Voici sa syntaxe :
Code : JavaScript
var unCaractere = chaine.charAt(position);
o chaine est une chane de caractres, position est la position du caractre extraire (attention, le premier caractre
occupe la position 0, le deuxime la position 1, etc.) et unCaractere est la variable dans laquelle est stock le caractre extrait.
Dans l'exemple suivant, l'utilisateur entre une chane de caractres dans la premire zone de texte, une position dans la deuxime,
puis il appuie sur le bouton. Le caractre qui se trouve dans la position spcifie est alors affich dans une balise <div>.
Code : HTML
Tapez du texte dans la premire zone de texte, une position dans la
deuxime zone de texte, puis cliquez sur le bouton.<br><br>
Texte : <input type="text" id="texte" /><br>
Position : <input type="text" id="position" /><br>
<button id="action">Cliquez ici</button><br>
<div id="resultat"></div>
<script>
$(function() {
var leTexte = $('#texte').val();
var laPosition = $('#position').val();
var leResultat = 'Le caractre en position ' + laPosition + '
est un "' + leTexte.charAt(laPosition) + '"';
$('#resultat').text(leResultat);
});
});
</script>
La figure suivante montre le rsultat dans un navigateur.
143/266
Le troisime caractre (position 2)
est un e
Recherches et remplacements de textes

Il est parfois ncessaire de slectionner le ou les lments qui contiennent un mot ou un texte particulier. Pour cela, vous
utiliserez le pseudo-slecteur :contains. Par exemple, pour slectionner toutes les balises <div> qui contiennent le mot
rouge , vous utiliserez le slecteur suivant :
Code : JavaScript
$('div:contains("rouge")')
Vous pourriez par exemple modifier la couleur d'arrire-plan des <div> qui contiennent le mot rouge en utilisant cette
instruction :
Code : JavaScript
$('div:contains("rouge")').css('background-color', 'red');
Il est galement possible de remplacer un texte par un autre ou un lment par un autre en utilisant la mthode
replaceWith(), dont voici la syntaxe :
Code : JavaScript
$('sel').replaceWith('contenu');
o sel est un slecteur jQuery et contenu une chane HTML, un lment du DOM ou un objet jQuery qui remplacera le ou
les lments slectionns. Regardez le code suivant, tout deviendra limpide.
Code : HTML
<img id="un" src="girafe.jpg"><br>
144/266
<button id="changement">Remplacer l'image</button>

<script>
$(function() {
$('#changement').click(function() {
$('#un').replaceWith('<img id="unbis" src="chat.jpg">');
});
});
</script>
En cliquant sur le bouton #changement, la balise <img id="un"> va tout simplement tre remplace par la balise <img
id="unbis">, qui affiche une autre image.
replaceWith() remplace sans supprimer si on lui fournit du code HTML. Par contre, il supprime et remplace si on
lui fournit un slecteur jQuery.
Les images
Ce que nous allons voir ici ne sera pas forcment nouveau pour vous. J'ai voulu faire un rappel et approfondir certaines
techniques dj vues.
Ragir au survol d'une image

Pour ajouter un peu d'interactivit dans une page Web, vous pouvez suivre les mouvements de la souris et interagir lorsqu'elle
survole certains lments.
Agrandissement au survol
Cet exemple est un grand classique : une vignette est affiche sur la page. Lorsqu'elle est survole par la souris, elle est
remplace par une image de plus grande taille. Lorsque la souris se dplace en dehors de l'image, la vignette est nouveau
affiche. Voici le code utilis :
Code : HTML
<img id="montagne" src="montagnepetit.jpg">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#montagne').mouseover(function() {
$(this).attr('src','montagne.jpg');
});
$('#montagne').mouseout(function() {
$(this).attr('src','montagnepetit.jpg');
});
});
</script>
Une vignette (ou une miniature, si vous prfrez) est affiche sur la page. Lorsque l'utilisateur la survole avec la souris :
Code : JavaScript
$('#montagne').mouseover(function() {
elle est remplace par une autre image. Cette action est accomplie en agissant sur la proprit src de la vignette :
Code : JavaScript
145/266
$(this).attr('src','montagne.jpg');
Lorsque la souris n'est plus sur l'image :

Code : JavaScript
$('#montagne').mouseout(function() {
cette dernire est remplace par la vignette. Ici encore, le passage de l'image la vignette se fait en agissant sur la proprit
src de l'image :
Code : JavaScript
$(this).attr('src','montagnepetit.jpg');
Agrandissement avec animation au survol

Dans l'exemple prcdent, le passage de la vignette l'image et de l'image la vignette tait pratiquement instantan. Que diriezvous d'ajouter un peu de douceur aux transitions ? Pour cela, nous allons :
1. Superposer la vignette et l'image ;
2. Cacher l'image ;
3. Passer de la vignette l'image et de l'image la vignette en utilisant des transitions fadeIn()/fadeOut().

Code : HTML
img{
position: absolute;
left: 0px;
top: 0px;
}
#montagneGrand{
display: none;
}
</style>
<img id="montagnePetit" src="montagnepetit.jpg">
<img id="montagneGrand" src="montagne.jpg">
<script type="text/javascript">
$(function() {
$('#montagnePetit').mouseover(function() {
$(this).fadeOut(1000);
$('#montagneGrand').fadeIn(1000);
});
$('#montagneGrand').mouseout(function() {
$('#montagnePetit').fadeIn(1000);
});
});
</script>
146/266
Les deux images doivent se trouver au mme emplacement pour que le passage de l'une l'autre se fasse en douceur. D'autre
part, seule la vignette doit tre affiche. Toutes ces mises en forme se font en CSS. Les deux images sont positionnes de faon
absolue en haut et gauche de l'cran, puis l'image est dissimule afin que seule la vignette soit affiche.
Passons maintenant au code jQuery ! Lorsque le pointeur se trouve au-dessus de la vignette :
Code : JavaScript
$('#montagnePetit').mouseover(function() {
celle-ci est dissimule avec la fonction fadeOut() et l'image la remplace progressivement avec la fonction fadeIn() :
Code : JavaScript
$('#montagneGrand').fadeIn(1000);
Inversement, lorsque la souris se dplace en dehors de l'image, cette dernire disparat et la vignette la remplace progressivement
:
Code : JavaScript
$('#montagneGrand').mouseout(function() {
$('#montagnePetit').fadeIn(1000);
});
Galerie d'images
Vous voulez exposer des photos sur un site Web ? Rien de tel qu'une galerie d'images. Voici le code utilis :
Code : HTML
img
{
padding: 5px;
}
</style>
<img
<img
<img
<img
<img
/>
<img
src="miniPaysage1.jpg"
id="paysage1.jpg"
id="paysage2.jpg"
id="paysage3.jpg"
id="paysage4.jpg"
id="paysage5.jpg"
class='miniature'>
class='miniature'>
class='miniature'>
class='miniature'>
class='miniature'><br
id="grand" src="paysage1.jpg" />
<script>
$(function() {
$('.miniature').css('border','5px white solid');
$('img:first').css('border','5px black solid');
$('.miniature').click(function() {
$('img').css('border','5px white solid');
147/266
$(this).css('border','5px black solid');

var nom = $(this).attr('id');
$('#grand').attr('src',nom);
});
});
</script>
Pour faire fonctionner ce programme, vous devez disposer de cinq images et des vignettes associes. Les vignettes sont
affiches sur une mme ligne l'aide de balises <img>. Par dfaut, la premire vignette est slectionne et l'image de grande
taille est affiche dans la partie infrieure de la page, comme la figure suivante.
Une galerie d'images en quelques lignes

Avez-vous remarqu le nom des identifiants des cinq vignettes ? paysage1.jpg, paysage2.jpg, etc. Vous vous demandez
certainement pourquoi avoir choisi ces noms. Il s'agit l, nous allons le voir, d'une astuce pour allger (oui, c'est possible !)
l'criture du code jQuery.
Ds que le DOM est disponible, une bordure blanche paisse de 5 pixels est affiche autour des cinq vignettes et une bordure
noire paisse de 5 pixels est affiche autour de la premire vignette :
Code : JavaScript
$('.miniature').css('border','5px white solid');
$('img:first').css('border','5px black solid');
Quelle trange pratique ! Pourquoi afficher une bordure blanche pour ensuite la remplacer par une bordure noire ?
148/266
La premire instruction affiche une bordure blanche autour de tous les lments de classe miniature. C'est--dire autour des
cinq vignettes. Cet affichage a un seul but : dcaler les vignettes horizontalement de telle sorte qu'elles restent la mme place
lorsque l'utilisateur cliquera par la suite sur l'une d'entre elles. Vous comprenez mieux maintenant le pourquoi de cette premire
instruction. Quant la deuxime instruction, elle encadre la premire vignette. C'est en effet elle qui est affiche par dfaut
l'ouverture de la page.
Lorsqu'une des miniatures est clique :
Code : JavaScript
$('.miniature').click(function() {
il faut effacer le cadre affich autour de la vignette prcdemment slectionne. Une instruction se charge d'effacer tous les
cadres :
Code : JavaScript
$('img').css('border','5px white solid');
L'instruction suivante affiche un cadre autour de la vignette qui a t clique. Remarquez l'utilisation du mot-cl this :
Code : JavaScript
$(this).css('border','5px black solid');
Un peu plus haut, vous avez remarqu quel point l'identifiant des vignettes tait trange. Il est temps de mettre profit cette
tranget. L'instruction suivante dfinit la variable nom et y stocke l'attribut de l'image qui a t clique :
Code : JavaScript
var nom = $(this).attr('id');
Pour afficher cette image, il suffit de modifier en consquence l'attribut src de l'image de grande taille :
Code : JavaScript
$('#grand').attr('src',nom);
Si vous vous sentez l'me codeuse, n'hsitez pas amliorer cette galerie en utilisant les mthodes fadeIn() et
fadeOut() pour que les images apparaissent en fondu-enchan. Une ou deux lignes de jQuery devraient suffire !
Diaporama automatique
Dans un chapitre prcdent, nous avions travaill sur un diaporama basique, et je vous avais dit que nous reviendrions dessus.
Il est dsormais temps ! Arrivs ce point dans la lecture de ce cours, vous en savez assez pour comprendre le code d'un vrai
149/266
diaporama.
Code : HTML
img
{
position: absolute; // Les images vont se superposer
left: 0px; // A gauche
top: 0px; // et en haut de la feuille
display: none; // Par dfaut, elles ne seront pas affiches
}
</style>
<img
<img
<img
<img
<img
src="paysage5.jpg"
src="paysage4.jpg"
src="paysage3.jpg"
src="paysage2.jpg"
src="paysage1.jpg"
id="img5">
id="img4">
id="img3">
id="img2">
id="img1">
<script>
$(function() {
var i=0;
affiche();
function affiche() {
i++;
if (i==1) precedent = '#img5'
else precedent = '#img' + (i-1);
var actuel = '#img' + i;
$(precedent).fadeOut(2000);
$(actuel).fadeIn(2000);
if (i==5) i=0;
}
setInterval(affiche, 2000);
});
</script>
Essayer
La partie la plus importante du code rside dans la dfinition de la fonction affiche(). Lorsque le DOM est disponible, la
variable i est dfinie et initialise 0. Dans la suite du code, cette variable sera utilise pour pointer successivement sur les cinq
images du diaporama. Puis la fonction affiche(), responsable de l'affichage d'une image, est appele. Mais voyons voir ce
qui se cache dans cette fonction.
Tout d'abord, la variable i est incrmente. Lors de la premire excution de la fonction affiche(), elle aura donc pour valeur
1:
Code : JavaScript
function affiche() {
i++;
Si la variable i vaut 1, la variable precedent est initialise #img5. Dans le cas contraire, cette variable est initialise #img
suivi de la valeur de i-1 :
Code : JavaScript
if (i==1) precedent = '#img5';
150/266
else precedent = '#img' + (i-1);
Pourquoi diffrencier le cas i=1 des autres cas ? Tout simplement pour que la boucle puisse boucler ou, en d'autres termes,
pour que les images se succdent de la premire la cinquime, puis que la boucle soit nouveau excute. La variable actuel
est initialise avec #img suivi de l'index i. Elle vaudra conscutivement #img1, #img2, #img3 et #img4 :
Code : JavaScript
var actuel = '#img' + i;
Maintenant, on sait quelle image doit disparatre (precedent) et quelle image doit apparatre (actuel). Il ne reste plus qu'
utiliser un fadeOut() et un fadeIn() :
Code : JavaScript
$(precedent).fadeOut(2000);
$(actuel).fadeIn(2000);
Lorsque la cinquime image est atteinte, il faut rinitialiser la boucle en affectant la valeur 0 la variable i :
Code : JavaScript
if (i==5) i=0;
Une dernire chose : pour que les images s'enchanent automatiquement, il suffit d'excuter la fonction affiche() intervalles
rguliers :
Code : JavaScript
setInterval(affiche, 2000);
$.trim() supprime les espaces au dbut et la fin de la chane passe en argument.

charAt() retourne le caractre qui se trouve une position donne dans une chane. Indiquez le nom de la chane
suivi d'un point et de la fonction charAt(), et prcisez la position du caractre entre les parenthses.
Pour slectionner le ou les lments qui contiennent un mot ou un texte particulier, utilisez le pseudo-slecteur
:contains.
Enfin, pour remplacer un texte par un autre ou un lment par un autre, utilisez la mthode replaceWith().
151/266
Formulaires et tableaux
Dans ce chapitre, nous allons nous intresser aux formulaires et aux tableaux dans jQuery. Je ne parle pas des tableaux HTML
<table></table>, mais des tableaux JavaScript, dfinis par exemple en srialisant des donnes ou encore retourns par la
mthode queue().
Vous verrez dans un premier temps comment grer le focus ou la perte de focus d'un lment de tableau ou encore comment vider
un formulaire. Dans un second temps, vous verrez diffrentes mthodes associes au traitement des donnes contenues dans
des tableaux.
Les formulaires
Certaines des techniques que nous allons voir sont possibles en HTML5 et CSS3. Malheureusement, vos visiteurs
n'auront pas forcment un navigateur rcent, aussi est-il bien de savoir comment les mettre en place en jQuery.
Donner le focus un lment

Si vous tes amens crer une page de login, vos utilisateurs apprcieront que la premire zone de texte (celle o ils saisiront
leur nom) soit slectionne par dfaut. Ceci est extrmement simple en jQuery. Supposons que vous ayez dfini la zone de texte
#user comme ceci :
Code : HTML
<input type="text" id="user">
Pour que le point d'insertion s'affiche dans cette zone de texte et que les frappes au clavier y soient reportes, utilisez cette
instruction jQuery :
Code : JavaScript
$('#user').focus();
Quel lment a le focus ?

Il peut parfois tre intressant de savoir quel lment a le focus dans un formulaire. Par exemple pour modifier sa mise en forme
afin que l'utilisateur sache d'un simple coup d'il quel lment il est en train de modifier.
Dans cet exemple, un formulaire contient trois zones de texte <input type="text"> et un <textarea>. Lorsque
l'utilisateur clique dans un de ces lments, son identifiant est affich dans une balise <span>.
Code : HTML
<span id="status">Cliquez sur un des lments du
formulaire</span><br /><br />
<form>
<input type="text" id="zone1"><br />
<textarea id="zone4"></textarea>
</form>
<script>
$(function() {
var leFocus;
$('input, textarea').focus( function() {
leFocus = $(this).attr('id');
$('#status').text(leFocus + ' a le focus');
});
152/266
});
</script>
Une fois la variable leFocus dfinie, le DOM est parcouru pour trouver quelle balise <input> ou <textarea> a le focus :
Code : JavaScript
Le nom de la balise qui a le focus est alors rcupr dans la fonction de retour. Le mot-cl this correspond l'lment qui a le
focus. Ici, nous extrayons son attribut id avec la mthode attr() :
Code : JavaScript
leFocus = $(this).attr('id');
Le nom de l'identifiant est enfin affich dans la balise <span> :

Code : JavaScript
$('#status').text(leFocus + ' a le focus');
Mise en vidence de l'lment qui a le focus

Vous venez d'apprendre identifier l'lment qui a le focus dans un formulaire. Je vous propose maintenant de modifier la mise en
forme de cet lment. Pour cela, vous allez devoir vous intresser non seulement l'lment qui gagne le focus (mthode
focus()), mais galement celui qui le perd (mthode blur()). Sans quoi, aprs quelques clics, il sera impossible de savoir
quel lment a le focus, car ils auront tous la mme mise en forme !
Dans l'exemple suivant, nous allons agir sur la couleur d'arrire-plan des lments qui gagnent et qui perdent le focus. Mais rien
ne vous empche d'agir sur une ou plusieurs autres proprits. Voici le code utilis :
Code : HTML
<span id="status">Cliquez sur un des lments du
formulaire</span><br /><br />
<form>
<textarea id="zone4"></textarea>
</form>
<script>
$(function() {
var leFocus;
leFocus = '#' + $(this).attr('id');
$(leFocus).css('background-color', '#afc');
});
$('input, textarea').blur( function() {
$(leFocus).css('background-color', '#fff');
});
153/266
});
</script>
Essayer
Une fois la variable leFocus dfinie, la mthode focus() est utilise pour savoir quel lment acquiert le focus :
Code : JavaScript
La variable leFocus est alors initialise avec l'identifiant de cet lment, prcd du signe # :
Code : JavaScript
La variable leFocus est directement utilisable dans un slecteur jQuery. En agissant sur la proprit CSS backgroundcolor, la couleur d'arrire-plan de l'lment change ds que celui-ci acquiert le focus :
Code : JavaScript
$(leFocus).css('background-color', '#afc');
Il reste maintenant modifier la couleur d'arrire-plan de l'lment qui a perdu le focus, s'il existe un tel lment. Pour cela, nous
faisons appel la mthode blur(), en l'appliquant aux lments <input> et <textarea> du document :
Code : JavaScript
$('input, textarea').blur( function() {
Comme dans la requte jQuery prcdente, l'identifiant de l'lment est mmoris dans la variable leFocus :
Code : JavaScript
Il suffit maintenant d'utiliser cette variable dans un slecteur pour modifier la couleur d'arrire-plan de l'lment qui a perdu le
focus :
Code : JavaScript
$(leFocus).css('background-color', '#fff');
Vider un formulaire
154/266
Pour annuler les donnes saisies dans un formulaire, il suffit d'utiliser un bouton reset :
Code : HTML
<input type="reset" id="annuler" value="Annuler">
Si vous le souhaitez, cette action peut galement tre accomplie en jQuery.

Mettez en place un bouton de remise zro du formulaire :
Code : HTML
<button id="raz">RAZ du formulaire</button>
Capturez l'vnement click sur ce bouton et excutez la fonction efface_formulaire() (ou tout autre nom qui vous
conviendra) :
Code : JavaScript
$('#raz').click(efface_formulaire);
Et voici le code de cette fonction :

Code : JavaScript
function efface_formulaire () {
$(':input')
.not(':button, :submit, :reset, :hidden')
.val('')
.prop('checked', false)
.prop('selected', false);
}
Un slecteur jQuery slectionne toutes les balises <input> du document, en dehors des lments button, submit, reset
et hidden :
Code : JavaScript
$(':input')
.not(':button, :submit, :reset, :hidden')
Les valeurs de ces lments (si elles existent) sont supprimes :

Code : JavaScript
.val('')
Puis, s'ils existent, les attributs checked et selected sont supprims :
155/266
Code : JavaScript
.prop('checked', false)
.prop('selected', false);
Lorsqu'une page ne contient qu'un formulaire, il suffit de la rafrachir pour supprimer toutes les donnes qui auraient pu
y tre saisies. Pour cela, vous utiliserez l'instruction JavaScript location.reload();.
Validation de formulaires
Vous voulez valider les donnes saisies par l'utilisateur dans un de vos formulaires ? En testant par exemple que l'adresse e-mail
entre est bien forme, ou encore que la date d'anniversaire est bien une date ? Le plus simple consiste utiliser un plugin.
Arrivs ce point dans le cours, vous ne savez pas encore comment utiliser des plugins dans jQuery, mais figurez-vous que c'est
justement le sujet d'une prochaine partie. Si vous n'avez pas la patience d'attendre jusque-l, reportez-vous au premier chapitre
de la partie consacre aux plugins.
Les tableaux
La fonction $.grep()
Cette fonction trouve les lments du tableau qui satisfont un ou plusieurs critres. Voici sa syntaxe :
Code : JavaScript
var tableau2 = $.grep(tableau, function(lment, index) { }, inv);
o :
tableau est le tableau qui contient les donnes filtrer ;
lment et index sont les lments et l'index des lments du tableau ;
inv indique si le critre doit (true) ou ne doit pas (false ou n'est pas spcifi) tre invers.
Un peu de pratique serait vraiment bienvenue. Voici donc quelques lignes de code. Deux balises <span> seront utilises pour
afficher les rsultats et trois boutons de commande pour filtrer le tableau de dpart selon diffrents critres :
Code : HTML
<span id="un"></span><br /><br />
<span id="deux"></span><br /><br />
<button id="filtre1">Aprs le cinquime</button>
<button id="filtre2">Diffrent de Mathis, Hugo et Yanis</button>
<button id="filtre3">Avant le cinquime</button>
<script>
$(function() {
var tableau = ['Luca', 'Emma', 'Mathis', 'Jade', 'La', 'Enzo',
'Chlo', 'Nathan', 'Manon', 'Noah', 'Sarah ', 'Louis', 'Luna',
'Kylian', 'Clara', 'Ethan', 'Camille', 'Hugo', 'Lylou', 'Tho', 'Zo
', 'Yanis', 'Malys'];
var tableau2;
$('#un').text('Donnes originales : ' + tableau.join(', '));
$('#filtre1').click(function() {
tableau2 = $.grep(tableau, function(el,ind) {
return (ind > 4);
});
$('#deux').text('Aprs le cinquime : ' + tableau2.join(',
156/266
'));
});
return (el != 'Mathis' && el != 'Hugo' && el !='Yanis');
});
$('#deux').text('Diffrent de Mathis, Hugo et Yanis : ' +
tableau2.join(', '));
});
return (ind > 4);
}, true);
$('#deux').text('Avant le cinquime : ' + tableau2.join(',
'));
});
});
</script>
Essayer
Le code jQuery commence par dfinir le tableau et y stocker quelques prnoms, puis dfinit le tableau dans lequel seront stocks
les rsultats :
Code : JavaScript
$(function() {
var tableau = ['Luca', '' 'Malys'];
var tableau2;
L'instruction suivante lit les donnes stockes dans le tableau et les copie dans la premire balise <span> en les sparant par
une virgule et une espace :
Code : JavaScript
Lorsque le premier bouton est cliqu :

Code : JavaScript
la fonction grep() est applique au tableau en ne slectionnant que les lments dont l'index est suprieur 5 (la valeur 4
s'explique par le fait que le premier lment a un index gal 0) :
Code : JavaScript
return (ind > 4);
});
Le tableau mis jour par la fonction grep() est alors affich dans la deuxime balise <span> :
157/266
Code : JavaScript
$('#deux').text('Aprs le cinquime : ' + tableau2.join(', '));
Lorsque le deuxime bouton est cliqu, la fonction grep() est applique au tableau. Seuls les lments diffrents de Mathis
, Hugo et Yanis sont conservs :
Code : JavaScript
return (el != 'Mathis' && el != 'Hugo' && el !='Yanis');
});
Puis le rsultat est affich dans la deuxime balise <span>.

Enfin, lorsque le troisime bouton est cliqu, la fonction grep() est applique au tableau en ne conservant que les lments
d'indice suprieur 5. tant donn que le troisime paramtre a pour valeur true, le critre de slection est invers. Ce sont
donc les lments d'indice infrieur 5 qui seront affichs :
Code : JavaScript
return (ind > 4);
}, true);
Le rsultat est affich dans la deuxime balise <span>.
La fonction $.map()
Cette fonction recopie en partie ou en totalit un tableau en lui appliquant un traitement. Voici sa syntaxe :
Code : JavaScript
tableau2 = $.map(tableau, function(el, ind) { });
o :
tableau est le tableau qui contient les donnes recopier ;
lment et index sont les lments et l'index des lments du tableau ;
tableau2 est le tableau dans lequel sont stocks les rsultats de la fonction map().
Afin que ce soit plus clair, nous allons travailler sur un exemple concret. Deux balises <span> sont utilises pour afficher les
rsultats et deux boutons de commande pour recopier le tableau de dpart en lui appliquant deux traitements diffrents :
Code : HTML
<span id="un"></span><br /><br />
<span id="deux"></span><br /><br />
<button id="copie1">Prnoms en majuscules</button>
<button id="copie2">Index et prnoms en minuscules</button>
158/266
<script>
$(function() {
'Chlo'];
var tableau2;
$('#copie1').click(function() {
tableau2 = $.map(tableau, function(el,ind) {
return (el.toUpperCase());
});
$('#deux').text('Prnoms en majuscules : ' + tableau2.join(',
'));
});
$('#copie2').click(function() {
return (ind + ' : ' + el.toLowerCase());
});
$('#deux').text('Index et prnoms en minuscules : ' +
tableau2.join(', '));
});
});
</script>
Essayer
Les premires instructions jQuery dfinissent le tableau de dpart et le tableau dans lequel se feront les copies et affichent le
tableau de dpart :
Code : JavaScript
$(function() {
'Chlo'];
var tableau2;
Lorsque le premier bouton est cliqu, la fonction map() est applique au tableau. Les prnoms sont retourns en caractres
majuscules et stocks dans tableau2 :
Code : JavaScript
return (el.toUpperCase());
Ce tableau est alors affich dans la deuxime balise <span> :

Code : JavaScript
$('#deux').text('Prnoms en majuscules : ' + tableau2.join(', '));
Lorsque le deuxime bouton est cliqu, la fonction map() est applique au tableau. Chacun des lments du tableau est
transform en une chane contenant l'index du tableau suivi du sparateur : et du prnom converti en caractres minuscules :
Code : JavaScript
159/266

return (ind + ' : ' + el.toLowerCase());
Comme prcdemment, le rsultat est affich dans la deuxime balise <span>.
La fonction $.inArray()
Vous recherchez un lment dans un tableau ? La fonction inArray() est l pour vous. Voici sa syntaxe :
Code : JavaScript
var position = $.inArray('valeur', tableau, index)
o :
valeur est la valeur recherche ;
tableau est le tableau dans lequel doit se faire la recherche ;
index, s'il est prcis, est le numro de la cellule partir de laquelle doit commencer la recherche (attention, la premire
cellule a pour index 0) ;
position est la premire position de la valeur dans le tableau. Si la recherche est infructueuse, inArray() retourne 1.
Supposons que la variable tableau soit dfinie comme suit :

Code : JavaScript
'Chlo'];
Le tableau suivant indique quelques exemples de valeurs retournes par la fonction inArray().
Instruction
Valeur retourne
$.inArray('Emma',tableau)
$.inArray('La',tableau)
$.inArray('Luca',tableau, 5) -1 car Luca se trouve en position 0 et non aprs la position 5

$.inArray('Alfred',tableau)
-1 car Alfred n'est pas dans le tableau
La fonction $.merge()
Il est parfois ncessaire de regrouper les informations qui se trouvent dans deux tableaux. La fonction merge() est l pour
vous faciliter la tche. Voici sa syntaxe :
Code : JavaScript
$.merge(tableau1, tableau2);
160/266
o tableau1 et tableau2 sont les deux tableaux regrouper. Lorsque la fonction a t excute, le premier tableau
contient ses propres donnes et celles du deuxime tableau. Par exemple :
Code : JavaScript
var tableau1 = ['Luca', 'Emma', 'Mathis', 'Jade', 'La', 'Enzo',
'Chlo'];
var tableau2 = ['Clara', 'Ethan', 'Camille', 'Hugo', 'Lylou',
'Tho'];
$.merge(tableau1, tableau2);
alert(tableau1.join(', '));
Ce qui donne la figure suivante.
Le premier tableau contient ses propres
donnes et celles du deuxime tableau

Pour donner le focus un lment d'un formulaire, vous utiliserez l'instruction $('lment').focus();.
Pour savoir quel lment a le focus dans un formulaire, commencez par parcourir le DOM avec l'instruction $('input,
textarea').focus( function() { });. Utilisez ensuite l'instruction var idFocus =
$(this).attr('id'); pour rcuprer l'identifiant de l'lment qui a le focus.
Pour vider le contenu d'un formulaire, vous devez lui appliquer les mthodes val(''), removeAttr('checked')
et removeAttr('selected'). Si la page ne contient qu'un formulaire, vous pouvez la rafrachir avec l'instruction
location.reload();.
La fonction $.grep() slectionne certains lments dans un tableau et les copie dans un autre tableau.
La fonction $.map() recopie les lments d'un tableau dans un autre tableau en leur appliquant un traitement.
La fonction $.inArray() recherche si un lment particulier est prsent dans un tableau.
La fonction $.merge() regroupe les informations qui se trouvent dans deux tableaux.
161/266
TP : Mise en forme d'une page Web

Avec ce TP, je vous propose de rviser les techniques de slection et de mise en forme tudies dans cette partie mais galement
dans les parties prcdentes. Il s'agit d'une rvision gnrale, en somme. Le but sera de modifier une page Web via un formulaire.

Avant toute chose, je vais vous montrer quoi va ressembler le rendu final de ce TP. Pour a, regardez la figure suivante.
Cette page n'attend plus que votre code jQuery

La page est compose de deux balises <div>. La premire contient des informations textuelles et une image. La deuxime
contient un formulaire compos de plusieurs listes droulantes, d'une zone de texte et de deux boutons de commande. Lorsque
l'utilisateur agira sur les contrles du formulaire, le contenu de la premire balise <div> devra tre mis jour en consquence.
Rassurez-vous, je vous fais grce du code HTML/CSS. Ce que je vous demande ici, c'est de donner vie aux lments du
formulaire en effectuant les actions ncessaires en jQuery lorsque l'utilisateur slectionne une valeur dans une liste droulante
ou clique sur un bouton. Le tableau suivant rsume la fonction des diffrents contrles du formulaire.
Contrle
Effet dans la premire balise <div>
Couleur
de fond
Modification de la couleur de fond en utilisant la valeur qui se trouve dans l'attribut value de la balise
<option> choisie.
Texte
Modification de l'attribut de tout le texte.
Police
Modification de la police de tout le texte.
Police 1e
phrase
Modification de la police de la premire phrase.
Prem
caract
phrases
Modification des caractristiques du premier caractre de chaque phrase.
Mot en
rouge
criture en caractres rouges du mot spcifi dans le premier paragraphe. Par exemple, si l'utilisateur tape 10
dans la zone de texte, le dixime mot du premier paragraphe doit apparatre en caractres rouges.

Bordure
images
162/266
Affecter une bordure aux images.
RAZ
Remettre zro le formulaire et la mise en forme de la premire balise <div>.
formulaire
Voici le code HTML/CSS sur lequel vous allez travailler :

Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Mise en forme</title>
#contenu
{
width: 500px;
height: 450px;
float: left;
margin-right: 10px;
overflow-y: auto;
}
#controles
{
width: 300px;
height: 450px;
float: left;
}
#controles div{
margin-bottom: 10px;
padding: 5px;
}
label{
float: left;
width: 140px;
}
#image
{
width: 110px;
height: 110px;
margin-left: 100px;
}
p
{
padding-left: 5px;
padding-right: 5px;
font-family: 'Times New Roman';
}
</style>
</head>
<body>
<div id="contenu">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus
qui blanditiis praesentium voluptatum deleniti atque corrupti quos
dolores et quas molestias excepturi sint occaecati cupiditate non
provident, similique sunt in culpa qui officia deserunt mollitia
animi, id est laborum et dolorum fuga. </p>
<div id="image"><img src="zozor.png"></div>
<p>Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat facere possimus, omnis
voluptas assumenda est, omnis dolor repellendus. Temporibus autem
quibusdam et aut officiis debitis aut rerum necessitatibus saepe
163/266
eveniet ut et voluptates repudiandae sint et molestiae non

recusandae. </p>
<p>Itaque earum rerum hic tenetur a sapiente delectus, ut aut
reiciendis voluptatibus maiores alias consequatur aut perferendis
doloribus asperiores repellat. </p>
</div>
<div id="controles">
<div>
<label for="couleur-fond">Couleur de fond</label>
<select id="couleur-fond">
<option value="#FFFFFF">Blanc</option>
<option value="#9FFEF1">Bleu</option>
<option value="#9FFECE">Vert</option>
<option value="#FAFE9F">Jaune</option>
</select>
</div>
<div>
<label for="texte">Texte</label>
<select id="texte">
<option value="Normal">Normal</option>
<option value="Gras">Gras</option>
<option value="Italique">Italique</option>
<option value="Souligne">Soulign</option>
</select>
</div>
<div>
<label for="police">Police</label>
<select id="police">
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Arial">Arial</option>
</select>
</div>
<div>
<label for="police-prem-phrase">Police 1e phrase</label>
<select id="police-prem-phrase">
</select>
</div>
<div>
<label for="prem-car-phrases">Prem caract phrases</label>
<select id="prem-car-phrases">
<option value="Normal">Normal</option>
<option value="Gras">Gras</option>
</select>
</div>
<div>
<label for="mot">Mot en rouge</label>
<input type="text" id="mot" size="2">
<button id="couleurMot">OK</button>
</div>
<div>
<label for="bordure-images">Bordure images</label>
<select id="bordure-images">
<option value="Rien">Rien</option>
<option value="Simple">Simple</option>
<option value="Double">Double</option>
</select>
</div>
<div>
<button id="raz">RAZ formulaire</button>
164/266
</div>
</div>
<script>
</script>
</body>
</html>
Essayer
La figure suivante reprsente l'image que j'ai utilise, mais vous pouvez videmment en utiliser une autre (dans ce cas attention
aux dimensions).
L'image que j'utilise pour ce TP
Votre travail va consister crire quelques (!) lignes de jQuery la fin du document. N'hsitez pas relire les parties du cours qui
vous aideront rsoudre ce TP. Et maintenant, c'est vous de jouer !
Correction
J'espre que tout s'est bien pass et que vous n'avez pas rencontr de difficult majeure dans ce TP. Comme toujours, je vous
propose une solution. Il se peut que vous soyez partis dans une autre direction et que vos codes fonctionnent la perfection.
Dans ce cas, considrez ce que je propose comme une solution alternative.
Pour faciliter la lecture de la correction, je l'ai scinde en autant de sous-sections que de contrles dans le formulaire. Vous
pouvez tout lire ou vous reporter la sous-section qui correspond un traitement qui vous en a particulirement fait baver.
Couleur de fond
Cette fonctionnalit ne devrait pas vous avoir pos de problme. Voici le code que j'ai utilis :
Code : JavaScript
$('#couleur-fond').change(function() {
var cf = $('#couleur-fond option:selected').val();
$('#contenu').css('background-color', cf);
});
Lorsque l'utilisateur slectionne une entre dans la liste droulante #couleur-fond :

Code : JavaScript
on rcupre la valeur stocke dans l'attribut value de la slection :

Code : JavaScript
165/266
Cette instruction est essentielle. Elle sera utilise tout au long de cette correction. Le slecteur est particulirement remarquable
mon avis. Jugez un peu : #couleur-fond option:selected signifie l'lment d'identifiant #couleur-fond dont la
balise enfant <option> est slectionne . Ce simple slecteur fait rfrence la balise <option> choisie par l'utilisateur
dans la liste droulante. Pour connatre la valeur affecte son attribut value, il suffit d'appliquer la mthode val() ce
slecteur !
La valeur retourne est une couleur directement exploitable. Il suffit donc de l'affecter la proprit background-color de la
premire balise <div> pour modifier la couleur de l'arrire-plan :
Code : JavaScript
J'allais oublier : le code jQuery doit commencer par l'instruction $(function() { pour s'assurer que le DOM est
disponible. Mais bien sr, vous y aviez pens.
Texte
L'affectation des attributs gras, italique et soulign au texte contenu dans la premire balise <div> n'est gure plus complique.
Il vous suffit de savoir quelles proprits CSS utiliser :
font-weight pour le gras ;
font-style pour l'italique ;
text-decoration pour le soulignement.

Code : JavaScript
$('#texte').change(function() {
var te = $('#texte option:selected').val();
if (te == 'Gras') $('#contenu p').css('font-weight', 'bold');
if (te == 'Italique') $('#contenu p').css('font-style', 'italic');
if (te == 'Souligne') $('#contenu p').css('text-decoration',
'underline');
if (te == 'Normal') {
$('#contenu p').css('font-weight', 'normal');
$('#contenu p').css('font-style', 'normal');
$('#contenu p').css('text-decoration', 'none');
}
});
Lorsque le contenu de la liste droulante #texte change :

Code : JavaScript
166/266
l'attribut valeur de l'entre slectionne par l'utilisateur est mmoris dans la variable te :
Code : JavaScript
Si l'entre Gras a t slectionne, la proprit font-weight est initialise bold :

Code : JavaScript
Si l'entre Italique a t slectionne, la proprit font-style est initialise italic :

Code : JavaScript
if (te == 'Italique') $('#contenu p').css('font-style', 'italic');
Si l'entre Soulign a t slectionne, la proprit text-decoration est initialise underline :

Code : JavaScript
'underline');
Enfin, si l'entre Normal a t slectionne, il faut rinitialiser les proprits font-weight, font-style et textdecoration :
Code : JavaScript
}
Police
Si vous avez pass avec succs les deux tapes prcdentes, la modification de la police utilise dans la premire balise <div>
sera un vrai jeu d'enfant. Un simple coup d'il au code HTML permet de constater que l'attribut value des diffrents
<select> contient le nom de la police utiliser :
Code : HTML
<select id="police">
</select>
167/266
Il suffira donc de rcuprer ce nom et de l'affecter la proprit font-family de la premire balise <div>. Voici les quelques
lignes de code jQuery utilises :
Code : JavaScript
$('#police').change(function() {
var ff = '"' + $('#police option:selected').val() + '"';
$('#contenu p').css('font-family', ff);
});
Lorsque l'utilisateur slectionne une valeur dans la liste droulante #police :

Code : JavaScript
la valeur de l'attribut de la balise <option> slectionne est mmorise dans la variable ff :

Code : JavaScript
Pour modifier la police utilise dans les paragraphes de la premire balise <div>, il suffit d'affecter cette valeur la proprit
CSS font-family de toutes les balises <p> :
Code : JavaScript
C'est aussi simple que cela !
Police de la premire phrase

Enfin quelque chose de plus difficile ! Quoique Ici, seule la police de la premire phrase doit tre modifie. Si vous avez but
sur cette problmatique, prenez le temps de rflchir ce qui la diffrencie de la prcdente
Vous avez trouv ? C'est le slecteur qui va faire toute la diffrence. Observez bien le premier paragraphe. Il contient une (et une
seule) phrase. Slectionner la premire phrase va donc revenir slectionner le premier paragraphe ! Voici le code utilis :
Code : JavaScript
$('#police-prem-phrase').change(function() {
var ppp = $('#police-prem-phrase option:selected').val();
$('#contenu p:first').css('font-family', ppp);
});
Lorsqu'une valeur est slectionne dans la liste droulante #police-prem-phrase :
168/266
Code : JavaScript
la valeur de l'attribut value de la balise <option> slectionne est mmorise dans la variable ppp :
Code : JavaScript
Cette valeur est affecte la proprit CSS font-family du premier paragraphe de la premire balise #contenu :
Code : JavaScript
Premier caractre des phrases

mon avis, cette problmatique a d vous occuper un certain temps. J'espre que vous avez survcu l'preuve. Quelle ide,
me direz-vous, mettre en gras la premire lettre de chaque phrase ! Si vous vous rappelez ce qui a t dit sur la sparation des
lments contenus dans une chane, vous tes sur la bonne voie. Que diriez-vous de partager le contenu des paragraphes sur les
caractres . , ou, en d'autres termes, la fin de chaque phrase ? Il vous suffira ensuite d'appliquer un traitement particulier au
premier caractre des diffrentes valeurs ainsi isoles et le tour sera jou. Voici le code que j'ai utilis :
Code : JavaScript
$('#prem-car-phrases').change(function() {
var pcp = $('#prem-car-phrases option:selected').val();
if (pcp == 'Gras') {
$('p').each(function() {
var tableau = $(this).text().split('. ');
if (tableau.length == 1) {}
else {
var tableau2 = $.map(tableau, function(el, ind) {
if (el[0] != null) return '<b>' + (el[0]) + '</b>' +
el.substring(1) + '. ';
});
$(this).html(tableau2.join(''));
}
});
}
if (pcp == 'Normal') {
var unPar = $(this).html();
if (unPar.indexOf('<img') == -1)
$(this).text($(this).text());
});
}
});
Ne soyez pas impressionns par le nombre d'instructions : je vais tout vous expliquer !
Lorsque l'utilisateur slectionne une valeur dans la liste droulante #prem-car-phrases :
169/266
Code : JavaScript
cette valeur est mmorise dans la variable pcp :

Code : JavaScript
Si l'utilisateur a slectionn la valeur Gras :

Code : JavaScript
on applique un traitement chaque paragraphe du document :

Code : JavaScript
La premire tape du traitement va consister diviser les phrases dans un tableau en utilisant la fonction split() :
Code : JavaScript
Si le paragraphe ne comporte qu'une phrase, le tableau contient un seul lment. Sa longueur est donc gale 1. Dans ce cas,
aucun traitement ne doit tre effectu puisque le paragraphe ne contient aucune phrase :
Code : JavaScript
Dans le cas contraire, la fonction map() est applique au tableau pour mettre en gras le premier caractre de chaque phrase. Le
rsultat de la fonction map() est stock dans la variable tableau2 :
Code : JavaScript
else {
Si la valeur examine n'est pas nulle, il s'agit d'une phrase qui doit tre traite. Dans ce cas, le premier caractre est entour des
170/266
balises <b> et </b> et du reste de la phrase diminu du premier caractre. Enfin, un point et une espace sont ajouts la fin de
la phrase, puisqu'ils avaient t supprims par la mthode split() l'tape prcdente :
Code : JavaScript
if (el[0] != null) return '<b>' + (el[0]) + '</b>' + el.substring(1)
+ '. ';
Les lments contenus dans tableau2 sont alors rassembls et la chane HTML obtenue remplace le paragraphe qui tait
slectionn :
Code : JavaScript
Vous tes toujours l ? Je l'espre, car seule la moiti du traitement a t effectue. Il faut encore crire quelques lignes de code
pour ragir la slection de la valeur Normal dans la liste droulante #prem-car-phrases. Je vous rassure tout de suite
: le code crire est bien plus simple comprendre que celui qui vient d'tre crit.
Lorsque la valeur Normal est slectionne dans la liste droulante :
Code : JavaScript
un traitement est appliqu tous les paragraphes du document :

Code : JavaScript
Dans un premier temps, le code HTML du paragraphe est mmoris dans la variable unPar :
Code : JavaScript
Si ce code ne contient pas une balise <img> :

Code : JavaScript
cela signifie qu'il contient du texte dans lequel le premier caractre de chaque phrase a pu tre mis en gras par l'utilisateur. Un
traitement particulier doit donc lui tre appliqu. Nous allons utiliser une astuce de programmation : en affectant au paragraphe
sa version texte (et non HTML), toutes les balises HTML qu'il pourrait contenir sont supprimes :
Code : JavaScript
171/266
Mot en rouge
Il se peut que cette mise en forme vous ait galement pos quelques problmes. Cependant, si vous avez suivi ce que je viens de
dire, tout vous semblera bien plus simple. Je vous mets sur la voie : pour sparer les mots du premier paragraphe, la fonction
split() semble tout indique
Voici le code que j'ai utilis :
Code : JavaScript
$('#couleurMot').click(function() {
var mot = $('#mot').val();
var tableau = $('p:first').text().split(' ');
if (ind+1 == mot) return ('<font color="red">' + el + '</font>')
else return(el);
});
$('p:first').html(tableau2.join(' '));
});
Lorsque le bouton #couleurMot est cliqu :

Code : JavaScript
le nombre tap dans la zone de texte #mot est mmoris dans la variable mot :
Code : JavaScript
Les mots sont spars entre eux par des espaces. C'est donc une espace que nous utiliserons comme sparateur dans la fonction
split(). Le rsultat de la sparation est stock dans la variable tableau :
Code : JavaScript
Il ne reste plus qu' appliquer un traitement spcial au mot dsign par l'utilisateur en utilisant la mthode map(). Le rsultat est
stock dans la variable tableau2 :
Code : JavaScript
172/266
Lorsque l'index de l'lment est gal la valeur entre dans la zone de texte #mot ( un prs puisque le dcompte se fait partir
de 0), le mot est entour par une balise <font> dans laquelle l'attribut color est initialis red :
Code : JavaScript
if (ind+1 == mot) return ('<font color="red">' + el + '</font>')
S'il s'agit d'un autre mot, aucun traitement ne lui est appliqu :
Code : JavaScript
else return(el);
Enfin, le premier paragraphe est remplac par le contenu de la variable tableau2, aprs avoir assembl ses lments via la
fonction join() :
Code : JavaScript
Vous voyez qu'il n'y avait rien de compliqu dans ce traitement.
Bordure des images

La bordure des images est dfinie avec la proprit CSS border. Selon la valeur slectionne dans la liste droulante
#bordure-images, une bordure simple, double ou aucune bordure est applique l'image contenue dans la premire balise
<div>. Voici le code utilis :
Code : JavaScript
$('#bordure-images').change(function() {
var bi = $('#bordure-images option:selected').val();
if (bi == 'Rien') $('img').css('border', '2px solid white');
if (bi == 'Simple') $('img').css('border', '2px solid red');
if (bi == 'Double') $('img').css('border', '5px double red');
});
Lorsque l'utilisateur slectionne une valeur dans la liste droulante #bordure-images :

Code : JavaScript
cette valeur est mmorise dans la variable bi :

Code : JavaScript
173/266
Si la valeur Rien a t slectionne, une bordure blanche paisse de 2 pixels est affiche autour de l'image. Si elle existait, la
bordure prcdente est efface, car la bordure blanche s'affiche sur un arrire-plan de couleur blanche :
Code : JavaScript
Le principe est le mme pour les deux autres valeurs :

Code : JavaScript
Remise zro du formulaire

Pour remettre zro le formulaire, vous avez peut-tre crit de nombreuses lignes de code jQuery pour parvenir un rsultat
certes correct, mais qui aurait pu s'crire en une seule ligne ! Si vous vous demandez quelle instruction j'ai bien pu utiliser, je dois
bien avouer que j'ai eu recours une astuce : tout le contenu du document est remis zro si on rafrachit la page. Il suffit donc
d'utiliser une instruction qui provoque le rafrachissement de la page lorsque le bouton #raz est cliqu :
Code : JavaScript
$('#raz').click(function() {
location.reload();
});
Le code jQuery complet

Voici le code jQuery dans son intgralit, afin que vous ayez une vue d'ensemble :
Code : JavaScript
$(function() {
// Couleur de fond
});
// Texte
}
if (te == 'Italique') $('#contenu p').css('font-style',
'italic');
'underline');
});
174/266
// Police
});
// Police 1e phrase
});
// Premier caractre des phrases
});
}
else {
if (el[0] != null) return '<b>' + (el[0]) + '</b>' +
el.substring(1) + '. ';
});
}
});
}
});
// Mot en rouge
if (ind+1 == mot) return ('<font color="red">' + el +
'</font>')
else return(el);
});
});
// Bordure des images
});
// RAZ du formulaire
$('#raz').click(function() {
location.reload();
});
});
Essayer
175/266
Un jeu en jQuery
Vous tiez nombreux attendre un chapitre consacr la ralisation de jeux en jQuery. Eh bien, vous y tes ! Vous allez apprendre
:
Afficher un dcor en mouvement pour donner l'illusion d'un dplacement ;
Dplacer des objets sur l'cran en utilisant les touches flches du clavier ;
Grer plusieurs couches graphiques ;
Dtecter des collisions ;
Ajouter des sons.
Prts ? Allons-y !
Le document de base
Avant d'aller plus loin, je vais vous montrer quoi va ressembler le jeu. Regardez la figure suivante pour en avoir un petit aperu.
Le jeu dans
sa version finale
La route dfile du bas vers le haut. Le joueur pilote la voiture jaune et doit viter les voitures rouges qui apparaissent
alatoirement sur l'cran. La voiture jaune se dirige avec les touches Droite et Gauche du clavier. La zone de jeu n'est autre
qu'une balise <div> dans laquelle on place les diffrents lments graphiques :
Deux portions de route #fond1 et #fond2, toutes deux de classe .fond ;
La voiture #voiture ;
La voiture rouge #vr.
176/266
Je vous propose de tlcharger les images que j'ai utilises, mais vous pouvez bien videmment prendre vos propres images.
L'arrire-plan : route.png
La voiture jaune : vj.png
La voiture rouge : vr.png
Des informations textuelles sont affiches au-dessus de l'aire de jeu l'aide d'une balise <span>. Voici le code HTML utilis :
Code : HTML
Collisions : <span id="info">0</span>
<div id="jeu">
<img id="fond1" class="fond" src="route.png">
<img id="vj" src="vj.png"> 
<img id="vr" src="vr.png"> 
</div>
177/266
Ces lments sont mis en forme l'aide de quelques instructions CSS. L'aire de jeu #jeu est dimensionne 400 400 pixels.
Elle est entoure d'une bordure noire continue paisse de 2 pixels. tant donn que deux images vont tre affiches l'une en
dessous de l'autre, sa proprit overflow est initialise hidden pour dissimuler les barres de dfilement. Le positionnement
l'intrieur de l'aire de jeu se fait de faon relative.
Code : CSS
#jeu{
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
Les images qui reprsentent la route sont positionnes de faon relative et leur z-index est initialis 10. Quant aux images
des voitures, elles sont positionnes de faon absolue et leur z-index est initialis avec d'autres valeurs. Vous comprendrez
pourquoi en lisant la suite.
Code : CSS
.fond{
margin-bottom:-5px;
z-index: 10;
position: relative;
}
#vj{
z-index: 100;
position: absolute;
top: 10px;
left: 48px;
}
#vr{
z-index: 80;
position: absolute;
top: -200px;
left: 0px;
}
Dans les chapitres prcdents, nous avons dj crois la proprit CSS z-index. Je vais quand mme rappeler que cette
proprit permet d'empiler plusieurs lments les uns sur les autres. L'lment qui est le plus en avant-plan est celui qui a un zindex le plus lev. Inversement, l'lment qui est le plus en arrire-plan est celui qui a un z-index le plus faible, comme le
montre la figure suivante.
178/266
Les lments s'empilent en
fonction de leur proprit z-index

Dans le code sur lequel nous sommes en train de travailler, la route a un z-index gal 10, la voiture rouge un z-index gal
80 et la voiture jaune un z-index gal 100. La voiture jaune sera donc en avant-plan, la route en arrire-plan et la voiture
rouge sera affiche au-dessus de la route, mais en dessous de la voiture jaune si vous ne savez pas l'viter.
a y est : la structure et la mise en forme du document sont maintenant en place ! Il ne reste plus (!) qu' crire quelques lignes
de jQuery pour mettre tout cela en mouvement.
Grer les dplacements

Crer un dcor en mouvement
La route doit dfiler du bas vers le haut de l'aire de jeu. Avez-vous une ide de la technique utiliser ? La mthode animate(),
bien entendu !
D'accord, la mthode animate() va me permettre de dplacer la route vers le haut, mais comment faire en sorte que
l'affichage boucle sur lui-mme afin que la route se droule vers le haut sans jamais s'arrter ?
Deux astuces vont mener ce rsultat :

1. En insrant l'appel la mthode animate() dans une fonction et en rexcutant cette fonction via la fonction de rappel
de la mthode animate(), on obtient une boucle sans fin.
2. En redonnant la position initiale aux images de classe .fond dans la fonction de rappel de la mthode animate(), un
nouveau dplacement vers le haut peut tre initi.

Code : JavaScript
function deplace()
{
$('.fond').animate({
top: '-=360'
},
1000,
'linear',
179/266
function(){
$('.fond').css('top', 0);
deplace();
});
Dans ce code, les deux images de la route sont dplaces de faon linaire vers le haut de 360 pixels en 1000 millisecondes.
Lorsque ce dplacement est termin, la fonction de rappel est excute. Les images sont replaces leur position d'origine et la
fonction deplace() est nouveau excute.
Pourquoi avoir utilis deux images ?
La mthode animate() dplace de 360 pixels vers le haut la premire image. En ajoutant une deuxime image identique sa
suite, on vite qu'une zone blanche n'apparaisse dans la partie infrieure de l'aire de jeu, comme la figure suivante.
La
deuxime image assure la continuit de la route

Il suffit d'excuter la fonction deplace() pour que la route se dplace sans fin vers le haut. Mais si vous ne l'activez pas une
premire fois, rien ne se passera sur l'cran. Vous devez donc insrer l'instruction deplace(); un peu avant la balise
</script>.
Afficher et dplacer la voiture rouge

180/266
La voiture rouge doit se dplacer de bas en haut et apparatre alatoirement. Voici le code utilis :
Code : JavaScript
function deplace()
{
$('#vr').animate({top: '-=600'}, 2500, 'linear', function(){
var vrX = Math.floor(Math.random()*194)+70;
var vrY = 400;
$('#vr').css('top',vrY);
$('#vr').css('left',vrX);
});
// Ici se trouve l'appel la mthode animate()
// pour animer la route
};
N'ayez pas peur de ce code. Il n'y a rien de sorcier l-dedans !

La premire instruction dplace linairement la voiture rouge vers le haut de 600 pixels en 2500 millisecondes. C'est le mme
principe que pour dplacer la route, sauf qu'ici on dplace la voiture de 600 pixels vers le haut afin qu'elle disparaisse
compltement de l'cran. Faites le test avec une valeur plus petite que 400, vous comprendrez. On modifie galement le temps de
dfilement : l'image a plus de chemin parcourir, il faut donc laisser le temps au joueur d'viter la voiture. Lorsque le dplacement
est termin, une nouvelle voiture rouge doit tre affiche. Pour cela, on tire alatoirement un nombre compris entre 70 et 194+70,
soit 264. Ce nombre est mmoris dans la variable vrX. Il correspond l'abscisse (la coordonne horizontale) de la voiture rouge
lorsqu'elle sera affiche pour la premire fois. Cette abscisse doit se trouver sur la route. Les valeurs 70 et 264 ont t obtenues
en utilisant un logiciel graphique.
Les abscisses minimale et maximale d'affichage
de la voiture rouge
181/266
Dplacer la voiture jaune

La voiture jaune se dplace horizontalement, avec les touches Gauche et Droite du clavier. Il suffit donc de capturer l'appui sur
ces touches et d'effectuer le traitement ncessaire. Pour cela, nous appliquerons la mthode vnementielle keydown() au
document :
Code : JavaScript
$(document).keydown(function(e){
Les touches Gauche et Droite ont pour code ASCII 37 et 39. Il suffit donc de tester la valeur de e.which pour savoir quelle
touche a t presse. S'il s'agit de la touche Droite, et si la voiture n'est pas trop droite, celle-ci est dplace de 30 pixels grce
la proprit CSS left :
Code : JavaScript
if (e.which == 39)
{
vjX = parseInt($('#vj').css('left'));
if (vjX < 280)
$('#vj').css('left', vjX+30);
}
Si la touche Gauche est presse, et si la voiture n'est pas trop gauche, celle-ci est dplace de 30 pixels grce la proprit CSS
left :
Code : JavaScript
if (e.which == 37)
{
if (vjX > 70)
$('#vj').css('left', vjX-30);
}
Simple et efficace !
Dtecter les collisions

Comment savoir si les voitures sont entres en collision ? En comparant leurs coordonnes respectives tout simplement. Voici le
code utilis :
Code : JavaScript
function collision()
{
vrX = parseInt($('#vr').css('left'));
vjY = 10;
vrY = parseInt($('#vr').css('top'));
if (((vrX > vjX) && (vrX < (vjX+66)) && (vrY > (vjY+120)) && (vrY
< (vjY+150)) &&(ok == 1))
|| ((vrX2 > vjX) && (vrX2 < (vjX+66)) && (vrY > (vjY+120)) && (vrY
< (vjY+150)) && (ok == 1)))
{
collision = parseInt($('#info').text()) + 1;
182/266
$('#info').text(collision);
ok = 0;
Les premires lignes placent les coordonnes de la voiture jaune dans les variables vjX et vjY et celles de la voiture rouge
dans les variables vrX et vrY. Les lignes 7 et 8 reprsentent le test de collision. La premire ligne traite des collisions sur le ct
gauche.
Une collision gauche s'est produite
Elle compare les coordonnes des deux voitures en supposant que la voiture rouge est plus droite que la voiture jaune sur l'aire
de jeu. Si la voiture rouge entre en collision par la gauche, le test est vrifi et les lignes 10 12 s'excutent. De la mme manire,
la deuxime ligne compare les coordonnes des deux voitures en supposant que la voiture rouge est plus gauche que la voiture
jaune sur l'aire de jeu. Si la voiture rouge entre en collision par la droite, le test est vrifi et les lignes 10 12 s'excutent.
quoi correspond la variable ok dans les deux tests de collision et dans les instructions excutes en cas de collision
?
Sans cette variable, en cas de collision, plusieurs collisions seraient dtectes au fur et mesure que la voiture rouge se dplace
vers le haut. Pour que la variable ok remplisse sa fonction, vous devez l'initialiser 1 au tout dbut du code ainsi qu'en fin de
dplacement de chaque voiture rouge :
Code : JavaScript
$(function() {
var ok = 1;
...
et :
183/266
Code : JavaScript
function deplace()
{
var vrY = 400;
ok = 1;
});
...
Lorsqu'une collision se produit, le nombre de collisions est incrment de 1 dans la balise <span id="info">. Pour que
cette fonction soit excute intervalles rguliers (ici, toutes les 20 millisecondes), nous utilisons la fonction setInterval()
:
Code : JavaScript
setInterval(collision, 20);
Ajouter des sons

Que diriez-vous d'ajouter un effet sonore chaque collision ? Ceci est encore une fois d'une simplicit dsarmante, condition
d'utiliser un navigateur rcent, compatible avec le langage HTML5. Commencez par insrer une balise <audio> dans le
document :
Code : HTML
<audio preload="auto" id="son">
<source src="beep.mp3" type="audio/mp3">
<source src="beep.ogg" type="audio/ogg">
</audio>
Comme vous pouvez le voir, on utilise deux formats de son : MP3 et OGG. Ceci afin d'assurer la compatibilit du code avec la
plupart des navigateurs du march. Chaque navigateur utilisera le type de fichier qu'il sait lire. Par exemple, Internet Explorer
choisira le fichier MP3, Firefox et Google Chrome le fichier OGG.
Vous trouverez sans peine de nombreux effets spciaux sur le Web, mais encore une fois je vous propose de tlcharger celui
que j'ai utilis pour ce chapitre.
Pour jouer le son, utilisez l'instruction jQuery suivante :
Code : JavaScript
$('#son')[0].play();
Si vous placez cette instruction dans la fonction collision(), juste aprs le if qui teste si une collision s'est produite, l'effet
sonore se produira chaque fois que les voitures entrent en collision :
Code : JavaScript
if (((vrX > vjX) && (vrX < (vjX+66)) && (vrY > vjY) && (vrY <
(vjY+150)) && (ok == 1))
|| ((vjX > vrX) && (vjX < (vrX+66)) && (vrY > vjY) && (vrY <
(vjY+150)) && (ok == 1)))
{
184/266
$('#son')[0].play();
...
Le code complet
Je vous propose de tester le rendu final en cliquant ici. De plus, voici le code complet de l'application. Amusez-vous bien !
Code : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jeu</title>
#jeu{
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
.fond{
margin-bottom:-5px;
z-index: 10;
position: relative;
}
#voiture{
z-index: 100;
position: absolute;
top: 10px;
left: 48px;
}
#vr{
z-index: 80;
position: absolute;
top: -200px;
left: 0px;
}
</style>
</head>
<body>
Collisions : <span id="info">0</span>
<div id="jeu">
<img id="voiture" src="vj.png">
<img id="vr" src="vr.png">
</div>
<audio preload="auto" id="son"><source src="beep.mp3"
type="audio/mp3"><source src="beep.ogg" type="audio/ogg"></audio>
<script
<script>
$(function() {
var ok = 1;
function deplace()
{
var vrY = 400;
ok = 1;
});
$('.fond').animate({top: '-=360'}, 1000, 'linear', function(){
$('.fond').css('top',0);
};
185/266
deplace();
});
if (e.which == 39)
{
vjX = parseInt($('#voiture').css('left'));
if (vjX < 280)
$('#voiture').css('left', vjX+30);
}
if (e.which == 37)
{
if (vjX > 70)
$('#voiture').css('left', vjX-30);
}
});
function collision()
{
vrX = parseInt($('#vr').css('left'));
vjY = 10;
vrY = parseInt($('#vr').css('top'));
if (((vrX > vjX) && (vrX < (vjX+66)) && (vrY > vjY) && (vrY <
(vjY+150)) && (ok == 1))
|| ((vjX > vrX) && (vjX < (vrX+66)) && (vrY > vjY) && (vrY <
(vjY+150)) && (ok == 1)))
{
$('#son')[0].play();
collision = parseInt($('#info').text()) + 1;
$('#info').text(collision);
ok = 0;
}
}
deplace();
setInterval(collision, 20);
});
</script>
</body>
</html>
186/266
TP : Un jeu de collecte spatiale

Pour terminer cette partie, je vous propose de raliser un jeu en jQuery. Votre mission, si vous l'acceptez, va consister diriger un
vaisseau spatial au pav numrique et collecter des lments qui apparaissent de faon alatoire sur l'cran. Mais attention, il y
a deux types d'lments : les bons (des vaches) et les mauvais (des voitures Men In Black). Les premiers ajoutent 5 points
votre score, alors que les seconds en enlvent 5.

Avant de commencer, je vous propose de regarder la figure suivante pour voir quoi ressemblera le jeu.
Le jeu une fois termin

Les huit touches flches du pav numrique permettront de diriger le vaisseau. Et vous verrez que ce n'est pas un luxe : la partie
se joue trs vite et le dplacement en diagonale est un vrai plus.
Pour vous faire rflchir un peu plus, je vous demande d'ajouter une musique de fond au jeu. Celle-ci devra dmarrer ds
l'ouverture de la page et boucler sans fin. Vous pouvez utiliser n'importe quelle musique aux formats MP3 et OGG. Pour ma part,
j'ai utilis la musique BabyPleaseDontGo.mp3, tlcharge gratuitement sur le site publicdomain4u.com.
Vous devriez tre capables d'crire tout le code sans aucun conseil de ma part. Je vais cependant vous fournir les fichiers dont
vous aurez besoin et, au passage, vous donner deux ou trois conseils qui vous aideront partir d'un bon pied.
Voici les ressources utilises dans ce jeu :
187/266
fond.png : 600
400 pixels
soucoupe.png : 125 177 pixels
bon.png : 50 116 pixels
mauvais.png : 56 113
pixels
Le tableau suivant donne les codes ASCII des touches du pav numrique. Il vous sera utile lorsque vous crirez la procdure
vnementielle keydown() :
Touche
Code ASCII
Droite
39
Gauche
37
Bas
40
Haut
38
Diagonale haut et gauche 36

Diagonale haut et droite
33
Diagonale bas et gauche
35
Diagonale bas et droite
34
188/266
Dans le chapitre prcdent, vous avez appris jouer un son lorsqu'une collision se produit. Pour jouer une musique de fond,
vous utiliserez le mme principe, mais ici vous activerez la musique ds l'ouverture de la page en affectant la valeur autoplay
l'attribut autoplay de la balise <audio>. De mme, vous affecterez la valeur loop l'attribut loop de la balise <audio>
pour que la musique boucle sur elle-mme :
Code : HTML
<audio preload="auto" id="musiqueFond" autoplay="autoplay"
loop="loop">
<source src="BabyPleaseDontGo.mp3" type="audio/mp3">
<source src="BabyPleaseDontGo.mp3" type="audio/ogg">
</audio>
Et maintenant, la balle est dans votre camp. vos claviers, et amusez-vous bien !
Correction
J'espre que tout s'est bien pass. Pour faciliter la correction, nous allons procder par tapes successives. Assurez-vous que
vous avez pass chaque tape avec succs et, en cas de doute, comparez le code de la correction avec votre propre code.
Comme toujours en programmation, il n'y a pas une solution mais plusieurs qui donnent lieu plusieurs codes, parfois trs
diffrents. Si votre code ne ressemble pas du tout au mien mais fonctionne, ce n'est pas grave. Cela signifie simplement que vous
tes partis dans une autre direction. Ce qui compte avant tout, c'est qu'il fonctionne.
Structure HTML et mise en forme CSS

La premire tape consiste mettre en place l'ossature HTML du document. Voici le code que j'ai utilis :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>jeu</title>
#jeu
{
width: 600px;
height: 400px;
background: url('fond.png');
}
#soucoupe{
z-index: 200;
position: absolute;
top: 20px;
left: 70px;
}
#bon{
z-index: 100;
position: absolute;
display: none;
}
#mauvais{
z-index: 100;
position: absolute;
display: none;
}
</style>
</head>
<body>
<div id="jeu">
<img id="soucoupe" src="soucoupe.png">
<img id="bon" src="bon.png">
<img id="mauvais" src="mauvais.png">
189/266
</div>
Bon : <span id="info1">0</span> Mauvais : <span
id="info2">0</span> Score : <span id="info3">0</span>
loop="loop">
<source src="BabyPleaseDontGo.mp3" type="audio/mp3">
<source src="BabyPleaseDontGo.ogg" type="audio/ogg">
</audio>
<script>
// Insrez le code jQuery ici
</script>
</body>
</html>
Comme vous pouvez le voir, il n'y a rien d'exceptionnel dans ces lignes. L'aire de jeu correspond la balise <div id="jeu">.
Cette balise hberge trois images : l'arrire-plan (soucoupe.png), l'lment collecter (bon.png) et l'lment qui ne doit pas
tre collect (mauvais.png).
Trois informations sont affiches en dessous de l'aire de jeu :
1. Le nombre de bons objets collects (#info1) ;
2. Le nombre de mauvais objets collects (#info2) ;
3. Le score du joueur (#info3).
Enfin, une balise <audio> est utilise pour la musique de fond.

Le code CSS n'offre aucune difficult. L'aire de jeu est dimensionne, encadre et une image y est affiche en arrire-plan. La
proprit z-index de la soucoupe volante est initialise 200 afin qu'elle soit toujours affiche en avant-plan. Les images
d'identifiants #bon et #mauvais ont un z-index gal 100. Elles s'afficheront donc entre l'image d'arrire-plan et la
soucoupe volante. Elles sont positionnes de faon absolue et leur proprit display est initialise none afin d'tre
invisibles l'ouverture de la page.
Dplacement du vaisseau
Cette deuxime tape va donner vie aux touches du pav numrique. Dans quelques minutes, vous pourrez dplacer le vaisseau
o bon vous semble.
Code : JavaScript
if (e.which == 39) // Vers la droite
{
posX = parseInt($('#soucoupe').css('left'));
if (posX < 470)
$('#soucoupe').css('left', posX+30);
}
if (e.which == 37) // Vers la gauche
{
if (posX > 20)
$('#soucoupe').css('left', posX-30);
}
if (e.which == 40) // Vers le bas
{
posY = parseInt($('#soucoupe').css('top'));
if (posY < 230)
$('#soucoupe').css('top', posY+30);
190/266
}
if (e.which == 38) // Vers le haut
{
if (posY > 20)
$('#soucoupe').css('top', posY-30);
}
if (e.which == 36) // Vers le haut et la gauche
{
if ((posY > 20) && (posX > 20))
$('#soucoupe').css('left', posX-30).css('top',
}
if (e.which == 33) // Vers le haut et la droite
{
if ((posY > 20) && (posX < 470))
$('#soucoupe').css('left', posX+30).css('top',
}
if (e.which == 35) // Vers le bas et la gauche
{
if ((posX > 20) && (posY < 230))
$('#soucoupe').css('left', posX-30).css('top',
}
if (e.which == 34) // Vers le bas et la droite
{
if ((posY < 230) && (posX < 470))
$('#soucoupe').css('left', posX+30).css('top',
}
});
posY-30);
posY-30);
posY+30);
posY+30);
Ne vous laissez pas impressionner par le nombre d'instructions contenues dans la mthode keydown(). Si vous y regardez
d'un peu plus prs, vous verrez qu'elle contient huit blocs de code consacrs au traitement des huit touches du pav numrique.
Prenons par exemple le code traitant de la touche 9 du pav numrique. Cette touche doit dplacer le vaisseau en diagonale, vers
le haut et la droite.
Code : JavaScript
{
if ((posY > 20) && (posX < 470))
$('#soucoupe').css('left', posX+30).css('top', posY-30);
}
Les deux premires instructions initialisent les variables posX et posY avec les coordonnes de la soucoupe. Si ces
coordonnes le permettent, le dplacement est effectu. Ici, la soucoupe ne doit pas tre trop haut (posY > 20) ni trop droite
(posX < 470). Le dplacement s'effectue en modifiant les proprits CSS left et top.
Une fois ces instructions saisies, vous pouvez vrifier que la soucoupe est guide avec les touches flches du pav numrique.
Rien ne se passe. Est-ce que j'ai oubli quelque chose ?
191/266
Si la soucoupe reste immobile, vrifiez que la touche Verr Num n'est pas active. Si vous utilisez un ordinateur portable, il se peut
que les touches flches soient absentes du clavier. Dans ce cas, vous devrez choisir d'autres touches. Reportez-vous la
section traitant de la gestion vnementielle du clavier, au chapitre 1 de la partie 3, pour avoir la liste des codes ASCII des
touches du clavier.
Affichage des lments #bon et #mauvais

Les images #bon et #mauvais doivent tre affiches priodiquement des positions choisies alatoirement. Pour cela, vous
devez mettre en place une fonction qui s'excutera intervalles rguliers. Voici le code de cette fonction :
Code : JavaScript
function afficheElements()
{
var elemX = Math.floor(Math.random()*500)+20;
var elemY = Math.floor(Math.random()*300)+20;
var elemType = Math.floor(Math.random()*2);
if (elemType == 0)
{
$('#bon').css('top',elemY).css('left',elemX);
$('#bon').show();
$('#mauvais').css('display','none');
}
else
{
$('#mauvais').css('top',elemY).css('left',elemX);
$('#mauvais').show();
$('#bon').css('display','none');
}
}
Les trois premires instructions utilisent la fonction Math.random() pour tirer des nombres alatoires. Le premier correspond
l'abscisse de l'lment qui va s'afficher. Il est compris entre 0 et 519. Le deuxime correspond l'ordonne de l'lment qui va
s'afficher. Il est compris entre 0 et 319. Enfin, le troisime dtermine le type de l'lment qui sera affich. Si elemType vaut 0,
l'lment #bon est affich aux coordonnes (elemX, elemY), puis l'lment #mauvais est dissimul :
Code : JavaScript
if (elemType == 0)
{
$('#bon').show();
}
Inversement, si elemType est diffrent de 0, l'lment #mauvais est affich aux coordonnes (elemX, elemY), puis
l'lment #bon est dissimul :
Code : JavaScript
else
{
}
192/266
N'oubliez pas d'utiliser la mthode setInterval() pour appeler de faon rptitive la fonction afficheElements(). Ici,
la priode entre deux excutions est fixe 2 secondes :
Code : JavaScript
setInterval(afficheElements, 2000);
Gestion des collisions

Le programme est presque termin : il ne reste plus qu' grer les collisions entre le vaisseau et les lments #bon et
#mauvais. Dfinissez pour cela la fonction collisions().
Code : JavaScript
function collisions()
{
if ($('#bon').css('display') == 'none')
{
elemType = 'mauvais';
elemX = parseInt($('#mauvais').css('left'));
elemY = parseInt($('#mauvais').css('top'));
}
else
{
elemType = 'bon';
elemX = parseInt($('#bon').css('left'));
elemY = parseInt($('#bon').css('top'));
}
if ((elemX>posX-20) && (elemX<(posX+125-50+20)) && (elemY>posY-20)
&& (elemY<(posY+177-116+20)) && (stopDetection == 0))
{
if (elemType=='bon')
{
var nbBon = parseInt($('#info1').text())+1;
$('#info1').text(nbBon);
var score = parseInt($('#info3').text())+5;
$('#info3').text(score);
$('#bon').css('display', 'none');
}
else
{
var nbMauvais = parseInt($('#info2').text())+1;
$('#info2').text(nbMauvais);
var score = parseInt($('#info3').text())-5;
$('#mauvais').css('display', 'none');
}
}
}
Les deux premires instructions mmorisent les coordonnes de la soucoupe dans les variables posX et posY :
Code : JavaScript
193/266
L'instruction if suivante dtermine les coordonnes de l'lment (#bon ou #mauvais) affich et les stocke dans les variables
elemX et elemY. Si l'lment #bon n'est pas affich :
Code : JavaScript
cela signifie que l'lment #mauvais est affich. La chane mauvais est stocke dans la variable elemType et les
coordonnes de l'lment #mauvais le sont dans les variables elemX et elemY :
Code : JavaScript
Dans le cas contraire, l'lment #bon est affich. La chane bon est stocke dans la variable elemType et les coordonnes
de l'lment #bon le sont dans les variables elemX et elemY :
Code : JavaScript
elemType = 'bon';
Il ne reste plus qu' tester si la soucoupe et l'lment affich aux coordonnes (elemX, elemY) se chevauchent :
Code : JavaScript
if ((elemX>posX-20) && (elemX<(posX+125-50+20)) && (elemY>posY-20)
&& (elemY<(posY+177-116+20)))
Pourquoi avoir crit posX+125-50+20 et posY+177-116+20 ?
C'est vrai qu'il aurait t plus simple d'crire posX+95 et posY+81. Si j'ai indiqu trois nombres la suite de posX et de posY,
c'est uniquement dans un but pdagogique : le vaisseau a une largeur de 125 pixels et les lments collecter une largeur
d'environ 50 pixels. En vrifiant que l'abscisse de l'lment est suprieure celle du vaisseau et infrieure celle du vaisseau + la
largeur du vaisseau - la largeur de l'lment, on s'assure que l'lment est entirement couvert par le vaisseau.
Il en va de mme en ce qui concerne les deux derniers tests : en vrifiant que l'ordonne de l'lment est suprieure celle du
vaisseau et infrieure celle du vaisseau + la hauteur du vaisseau - la hauteur de l'lment, on s'assure que l'lment est
entirement couvert par le vaisseau.
Les 20 pixels ajouts posX et posY donnent une marge de scurit autour du vaisseau afin que la collision soit plus facile
dtecter. De la mme faon, on enlve 20 pixels dans le premier et le troisime test pour faciliter la dtection des collisions. Sans
cet artifice, il faudrait que les lments soient entirement masqus par le vaisseau pour qu'une collision se produise.
Les lignes suivantes mettent jour les balises <span> #info1, #info2 et #info3 en fonction de la nature de l'lment qui
est entr en collision avec le vaisseau. S'il s'agit de l'lment #bon :
Code : JavaScript
194/266
le nombre d'lments #bon capturs est incrment de 1, le score est incrment de 5 et l'lment #bon est dissimul :
Code : JavaScript
S'il s'agit de l'lment #mauvais, le nombre d'lments #mauvais captur est incrment de 1, le score est dcrment de 5 et
l'lment #mauvais est dissimul :
Code : JavaScript
else
{
}
Pour terminer, activez cette fonction intervalles rguliers. Par exemple toutes les 200 millisecondes avec la fonction
setInterval() :
Code : JavaScript
setInterval(collisions, 200);
Je vous sens impatients de tester ce code. Allez-y !

Tout fonctionne correctement si ce n'est un lger problme avec la dtection des collisions. tant donn que la fonction
collisions() est excute toutes les 200 millisecondes, le programme dtecte parfois plusieurs collisions alors qu'une seule
s'est produite. Ce qui provoque l'augmentation ou la diminution excessive du nombre de #bon ou de #mauvais capturs. Bien
entendu, ce problme se propage jusqu'au score qui peut s'envoler ou diminuer bien plus rapidement que ce qu'il devrait !
Pour rsoudre ce problme, nous allons dfinir la variable globale stopDetection que nous initialiserons 0 juste aprs la
disponibilit du DOM :
Code : JavaScript
$(function() {
var stopDetection = 0;
...
Pourquoi utiliser une variable globale ?
195/266
La variable stopDetection est dite globale car elle n'est pas lie une mthode ou une fonction donne. Sa porte sera
donc globale dans tout le code JavaScript.
Lorsqu'une collision est dtecte, la valeur 1 est stocke dans la variable stopDetection pour indiquer qu'il ne faut plus
dtecter de collisions. Paralllement, pour qu'une collision soit effective, la variable stopCollision doit tre gale 0. Le
code de la fonction collisions() devient donc le suivant :
Code : JavaScript
if ((elemX>posX) && (elemX<(posX+233)) && (elemY>posY) &&
(elemY<(posY+127)) && (stopDetection == 0))
{
$('#son')[0].play();
stopDetection = 1;
Il ne reste plus qu' mettre 0 la variable stopDetection lorsqu'un nouvel lment est affich :
Code : JavaScript
{
stopDetection = 0;
...
a y est, le code est entirement oprationnel. J'espre que sa mise au point ne vous a pos aucun problme. N'hsitez pas
modifier ou ajouter des choses (des sons par exemple). Ce qui serait bien, c'est de permettre au joueur de mettre la musique en
pause ou en lecture.
Essayer le jeu
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>jeu</title>
#jeu{
width: 600px;
height: 400px;
background: url('fond.png');
}
#soucoupe{
z-index: 200;
position: absolute;
top: 20px;
left: 70px;
}
#bon{
z-index: 100;
position: absolute;
display: none;
}
#mauvais{
z-index: 100;
position: absolute;
196/266
display: none;
}
</style>
</head>
<body>
<div id="jeu">
<img id="soucoupe" src="soucoupe.png">
<img id="bon" src="bon.png">
<img id="mauvais" src="mauvais.png">
</div>
Bon : <span id="info1">0</span> Mauvais : <span
id="info2">0</span> Score : <span id="info3">0</span>
loop="loop"><source src="BabyPleaseDontGo.mp3"
type="audio/mp3"><source src="BabyPleaseDontGo.ogg"
type="audio/ogg"></audio>
<script>
$(function() {
var stopDetection = 0;
if (e.which == 39) // Vers la droite
{
if (posX < 470)
$('#soucoupe').css('left', posX+30);
}
if (e.which == 37) // Vers la gauche
{
if (posX > 20)
$('#soucoupe').css('left', posX-30);
}
if (e.which == 40) // Vers le bas
{
if (posY < 230)
$('#soucoupe').css('top', posY+30);
}
if (e.which == 38) // Vers le haut
{
if (posY > 20)
$('#soucoupe').css('top', posY-30);
}
if (e.which == 36) // Vers le haut et la gauche
{
if ((posY > 20) && (posX > 20))
$('#soucoupe').css('left', posX-30).css('top', posY-30);
}
{
if ((posY > 20) && (posX < 470))
$('#soucoupe').css('left', posX+30).css('top', posY-30);
}
if (e.which == 35) // Vers le bas et la gauche
{
if ((posX > 20) && (posY < 230))
$('#soucoupe').css('left', posX-30).css('top', posY+30);
}
if (e.which == 34) // Vers le bas et la droite
{
}
});
197/266
if ((posY < 230) && (posX < 470))
$('#soucoupe').css('left', posX+30).css('top', posY+30);
{
stopDetection = 0;
var elemX = Math.floor(Math.random()*500)+20;
var elemY = Math.floor(Math.random()*300)+20;
var elemType = Math.floor(Math.random()*2);
if (elemType == 0)
{
$('#bon').show();
}
else
{
}
}
function collisions()
{
{
}
else
{
elemType = 'bon';
}
if ((elemX>posX-20) && (elemX<(posX+125-50+20)) &&
(elemY>posY-20) && (elemY<(posY+177-116+20)) && (stopDetection ==
0))
{
stopDetection = 1;
{
}
else
{
}
}
}
setInterval(afficheElements, 2000);
setInterval(collisions, 200);
});
198/266
</script>
</body>
</html>
Partie 4 : jQuery et AJAX
199/266
Premiers pas avec AJAX

Ce chapitre va aborder un sujet qui fait souvent peur aux programmeurs Web : AJAX. Vous allez voir quel point jQuery facilite
les changes de donnes AJAX et il y a fort parier que vous utiliserez sans aucune apprhension tout ce qui sera crit dans ce
chapitre pour obtenir des pages Web dynamiques, vraiment ractives et qui soulageront dans de grandes mesures les changes
avec le serveur.
Qu'est-ce qu'AJAX ?
Lorsque vous naviguez de page en page sur un site Web traditionnel (entendez par l non-AJAX), les actions de l'internaute se
traduisent par les actions suivantes :
1. Envoi d'une requte au serveur afin d'obtenir une nouvelle page.
2. Calcul de la nouvelle page par le serveur et envoi des donnes HTML/CSS correspondantes.
3. Affichage de ces donnes dans le navigateur.
Cette technique fonctionne trs bien dans la plupart des cas, mais parfois seule une partie de la page ncessite d'tre mise jour.
C'est l qu'intervient AJAX :
1. Dans un premier temps, envoi d'une requte au serveur afin d'obtenir les donnes qui seront affiches dans une partie
bien prcise de la page actuelle.
2. Calcul des donnes demandes par le serveur et envoi de ces donnes au navigateur au format XML.
3. Rception des donnes envoyes par le programme (on dit aussi moteur) AJAX qui les a demandes et affichage dans un
endroit bien prcis de la page actuelle sans toucher au reste de la page.
La figure suivante rsume ces deux modes de fonctionnement.
Les deux modes de
fonctionnement d'un site Web : client-serveur et AJAX

Si, dans la plupart des cas, un fonctionnement traditionnel est entirement satisfaisant, les performances d'affichage peuvent tre
200/266
grandement amliores dans certains cas particuliers, comme par exemple l'affichage de donnes mises jour intervalles
rguliers (cours d'actions en bourse par exemple), la sauvegarde des donnes pendant la saisie dans un formulaire, la mise jour
et/ou la vrification dynamique des champs d'un formulaire en fonction des donnes saisies par l'utilisateur, la saisie prdictive
(comme le fait Google en proposant des rponses lorsque vous commencez taper quelques caractres dans la case de
recherche), etc.
Mais au fait, savez-vous ce que signifie le terme AJAX ? Que tous les joyeux drilles qui ont fait un rapprochement avec la lessive
de mme nom se rassurent, ces deux termes, quoique homonymes, n'ont aucun rapport entre eux. AJAX est l'acronyme
d'Asynchronous JavaScript and XML. Tous ces termes se comprennent aisment : le langage JavaScript est utilis pour
demander des donnes au serveur. Ces donnes lui sont retournes de faon asynchrone sous une forme XML.
Serveur Web local et serveur Web distant

Vous savez maintenant ce que signifie le terme AJAX et ce qu'il pourra vous apporter dans vos dveloppements Web. Vous tes
donc prts crire vos premires lignes. Et pourtant, nous n'allons pas commencer tout de suite
Jusqu'ici, tous les dveloppements en jQuery se faisaient en local, sur votre ordinateur, et il suffisait d'afficher la page HTML
dans un navigateur Web pour tester son fonctionnement. En effet, tout se passait au niveau client, c'est--dire dans le
navigateur : aucun aller-retour avec un serveur Web n'tait ncessaire. Au risque de vous dcevoir, pour que les changes AJAX
fonctionnent, vous devrez utiliser un serveur. Deux possibilits s'offrent vous. Vous pouvez :
1. Installer un serveur Web sur votre ordinateur.
2. Poster vos pages sur un serveur Web distant.
Installation et utilisation d'un serveur Apache

Si vous faites du PHP, il est plus que probable que vous ayez dj un serveur Apache sur votre machine. En effet, des
logiciels comme WAMP, MAMP, XAMPP, etc. en possdent dj un. Si un serveur Apache est dj install sur votre
ordinateur, vous pouvez sauter cette tape.
L'installation d'un serveur Apache sur votre ordinateur n'a rien de sorcier : elle consiste tlcharger et excuter un fichier.
Rendez-vous sur le site officiel d'Apache et tlchargez la dernire version en date du fichier Apache pour Windows. Une fois
tlcharg, double-cliquez sur ce fichier pour installer le serveur Apache. Vous devriez rapidement arriver la fentre visible la
figure suivante.
201/266
Les informations concernant le
serveur ont t compltes

Quelques prcisions sur le paramtrage de cette bote de dialogue :
localhost fait rfrence l'ordinateur local ;
127.0.0.1 correspond l'adresse IP interne de l'ordinateur ;
admin@localhost est l'adresse de l'administrateur du serveur Web. En l'occurrence, vous.
for All Users, on Port 80, as a Service installe Apache pour tous les comptes d'utilisateurs en utilisant le port 80, c'est-dire le port de communication utilis par dfaut pour communiquer avec un serveur Web.
Cliquez sur Next, choisissez une installation typique. Cliquez sur Next et choisissez le dossier d'installation. Enfin, cliquez sur
Install pour procder l'installation. Quelques instants plus tard, le serveur Web est install sur votre ordinateur et il peut
tre utilis. Pour vous en convaincre, ouvrez votre navigateur Web, tapez http://localhost dans la barre d'adresse et
appuyez sur la touche Entre. Vous devriez obtenir quelque chose ressemblant la figure suivante.
202/266
Le serveur Web est oprationnel
Peut-tre avez-vous remarqu la prsence d'une nouvelle icne dans la zone de notifications, comme le montre la figure suivante.
Il s'agit du moniteur Apache. Vous l'utiliserez pour dmarrer, arrter et redmarrer le service Apache.
Dmarrage,
arrt et redmarrage du service Apache en quelques clics de souris

Maintenant que le serveur Web est oprationnel, il va falloir placer vos fichiers HTML un endroit bien prcis. Le dossier de
travail utilis par dfaut par Apache est le sous-dossier htdocs du dossier dans lequel Apache a t install :
C:/Program Files/Apache Software Foundation/Apache2.2/htdocs si vous avez conserv le chemin
propos dans l'assistant d'installation.
Si, pour une raison ou pour une autre, vous voulez utiliser un autre dossier, ouvrez le fichier
C:/Program Files/Apache Software Foundation/Apache2.2/conf/httpd.conf dans un diteur de texte
quelconque, recherchez le terme DocumentRoot et remplacez le chemin propos par dfaut par un autre chemin qui vous
convient mieux.
Maintenant pour tester vos pages prsentes dans le dossier Apache, il vous suffit d'ouvrir votre navigateur et de vous rendre
sur la page http://localhost/nom_du_fichier.html.
Utilisation d'un serveur distant

Si vous lisez ce cours, il est fort probable que vous ayez dj hberg des sites Web sur un serveur distant propos par un
hbergeur quelconque. Vous devriez donc savoir comment faire. Et si ce n'est pas le cas, je vous invite lire ce chapitre du cours
de HTML5 de Mathieu Nebra.
Charger un fichier
Je vais vous montrer comment charger des informations stockes sur le serveur et mettre jour un lment de la page actuelle (et
juste cet lment) avec ces informations. Pour cela, nous allons utiliser la mthode load(), dont voici la syntaxe :
Code : JavaScript
203/266
$('sel').load('nom_page', function() {
//une ou plusieurs instructions
});
o :
sel est un slecteur jQuery quelconque qui permet d'identifier l'lment (ou les lments) mettre jour ;
nom_page est le nom d'une page Web quelconque dont le contenu sera utilis pour effectuer la mise jour ;
Si elle est prcise, la fonction de rappel est, comme toujours, excute lorsque la mthode a t excute, c'est--dire
lorsque l'lment (ou les lments) a (ont) t mis jour.
Passons tout de suite la pratique. Dans ce premier exemple, un document affiche deux boutons de commande et quatre balises
<div>. Trois d'entre elles contiennent du texte et une contient une image. Le premier bouton va mettre jour le contenu de la
premire balise <div> et le deuxime le contenu de la deuxime. Et ce, bien entendu, sans toucher au reste du document. Voici le
code utilis :
Code : HTML
div { width: 400px; height: 300px; float: left; margin: 5px; }
#premier { background-color: #F6E497; }
#troisieme { background-color: #CAF1EC; }
#quatrieme { background-color: #F1DBCA; }
</style>
<button id="majPremier">Mise jour premire zone</button>
<button id="majDeuxieme">Mise jour deuxime zone</button><br /><br
/>
<div id="premier">
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</div>
<div id="deuxieme">
<img src="image1.jpg">
</div>
<div id="troisieme">
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
</div>
<div id="quatrieme">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</div>
<script>
$(function() {
$('#majPremier').click(function() {
$('#premier').load('maj1.html', function() {
alert('La premire zone a t mise jour');
});
});
$('#majDeuxieme').click(function() {
204/266
$('#deuxieme').load('maj2.html', function() {
alert('La deuxime zone a t mise jour');
});
});
});
</script>
Examinons le code jQuery. Lorsque le premier bouton est cliqu, la balise d'identifiant #premier (en d'autres termes, la premire
balise <div>) est mise jour avec le contenu du document maj1.html :
Code : JavaScript
$('#premier').load('maj1.html', function() {
La fonction de rappel de la mthode load() est utilise pour indiquer la fin de la mise jour :
Code : JavaScript
Voici le code contenu dans le fichier maj1.html :

Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?
</body>
</html>
Le texte compris entre les balises <body> et </body> sera utilis pour mettre jour la premire balise <div> de notre
document. Le texte original Lorem ipsum dolor sit amet deviendra donc Ut enim ad minima veniam .
Lorsque le deuxime bouton est cliqu, la mme technique met jour le contenu de la deuxime balise <div>, avec le document
maj2.html :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="image2.jpg">
</body>
205/266
</html>
Essayer le code
Charger une partie d'un fichier

En modifiant lgrement la syntaxe de la mthode load(), il est possible d'utiliser une partie seulement des donnes auxquelles
donne accs la requte AJAX. Pour cela, il suffit de faire suivre le nom du fichier par une espace et par un slecteur jQuery :
Code : JavaScript
$('sel').load('nom_page sel2', function() {
});
o :
nom_page est le nom d'une page Web quelconque dont le contenu sera utilis pour effectuer la mise jour ;
sel2 est un slecteur jQuery quelconque, sans le signe $ ni les parenthses, qui permettra d'isoler certaines donnes
dans la page nom_page ;
titre d'exemple, j'ai regroup les donnes de mise jour qui se trouvaient dans les fichiers maj1.html et maj2.html de
l'exemple prcdent, je les ai places dans le fichier maj.html et je leur ai affect un identifiant pour qu'elles soient plus faciles
isoler en jQuery :
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="modif1">
Ut enim ad minima veniam, quis nostrum exercitationem ullam
corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea
voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<img id="modif2" src="paysage2.jpg">
</body>
</html>
Ainsi, le texte utiliser pour mettre jour la premire balise est facilement identifiable par l'identifiant #modif1, et l'image
utiliser pour mettre jour la deuxime balise est facilement identifiable par l'identifiant #modif2. Voici comment doivent tre
modifies les deux mthodes vnementielles de l'exemple prcdent pour n'utiliser qu'une partie du fichier lors de la mise jour :
Code : JavaScript
$('#majPremier').click(function() {
$('#premier').load('maj.html #modif1', function() {
});
206/266
});
$('#majDeuxieme').click(function() {
$('#deuxieme').load('maj.html #modif2', function() {
alert('La deuxime zone a t mise jour');
});
});
Passer des paramtres un programme PHP

Je ne pouvais pas faire l'impasse sur les possibilits de passage de paramtres de la mthode load(). Cette technique est
particulirement adapte si vous programmez en PHP. En utilisant jQuery pour crer des adresses URL contenant un ou plusieurs
paramtres (http://site.fr/page.php?id=10&p=2), vous pourrez interroger une base de donnes en PHP et
retourner des informations qui dpendent des paramtres passs dans l'URL.
Premire forme de la mthode load()

Pour passer des paramtres la suite de l'adresse URL avec la mthode load(), voici la syntaxe utiliser :
Code : JavaScript
$('sel').load(url,param);
o :
url est le nom de la page PHP qui sera utilise pour faire la mise jour ;
param est une chane qui contient un ou plusieurs couples paramtres/valeurs. Par exemple, si param vaut id=5, p=14
et url vaut http://site.fr/page.php, la page utilise pour la mise jour sera
http://site.fr/page.php?id=5&p=14.
Et maintenant, je vous propose de voir comment utiliser cette version de la mthode load() sur un cas concret. Que diriezvous d'afficher des proverbes chinois en utilisant quelques lignes de jQuery associes un programme crit en PHP ? Voici le
code HTML/jQuery utilis :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Ajax - Load</title>
</head>
<body>
<input type="text" id="ref">
<button id="action">Afficher</button><br />
<div id="r">Entrez un nombre compris entre 1 et 10 pour afficher
un proverbe chinois</div>
<script>
$(function() {
var param = 'l=' + $('#ref').val();
$('#r').load('http://www.proverbes.php',param);
});
});
</script>
</body>
</html>
207/266
Lorsque le bouton est cliqu, le contenu de la zone de texte est lu avec la mthode jQuery val() applique la zone de texte
#ref. La valeur ainsi obtenue est mmorise dans la variable param, prcde du texte l= :
Code : JavaScript
Par exemple, si vous tapez 5 dans la zone de texte, la variable param contiendra la chane l=5 aprs l'excution de cette
instruction.
La ligne suivante passe le paramtre que vous avez saisi au programme proverbes.php et met jour la balise <div
id="r"> en consquence :
Code : JavaScript
$('#r').load('proverbes.php',param);
Il ne vous manque plus que le traitement PHP. Je vais vous le donner, mais je ne vais pas l'expliquer, ce n'est pas vraiment le but
de ce cours. Sans plus attendre
Code : PHP
<?php
$proverbe = array("On ne rassasie pas un chameau en le nourrissant
la cuillre.",
"Connatre son ignorance est la meilleure part de
la connaissance.",
"Une maison en paille o l'on rit, vaut mieux
qu'un palais o l'on pleure.",
"Le vrai voyageur ne sait pas o il va.",
"Point n'est besoin d'lever la voix quand on a
raison.",
"Un ami c'est une route, un ennemi c'est un mur.",
"Un peu de parfum demeure toujours sur la main qui
te donne des roses.",
"Si lev que soit l'arbre, ses feuilles tombent
toujours terre.",
"Si ce que tu as dire n'est pas plus beau que le
silence, tais toi.",
"Trois coupes de vin font saisir une doctrine
profonde.");
$l=$_GET["l"];
if (($l != "") && ($l>0) && ($l<11))
{
echo "<u>Proverbe chinois N ".$l."</u><br><br>";
echo "<b>".$proverbe[$l-1]."</b>";
}
else
echo "<font color=red>Entrez un nombre compris entre 1 et 10
!</font>";
?>
Essayer
Seulement attention, comme je vous le disais prcdemment, le PHP doit tre plac sur un serveur, local ou distant. Pour que
votre page fonctionne, placez les deux fichiers sur un serveur.
208/266
Il est impossible d'afficher des informations provenant d'un autre site. Votre traitement PHP doit donc tre sur le mme
hbergement que votre code jQuery, sans a rien ne fonctionnera.
Deuxime forme de la mthode load()

Il est galement possible de passer un objet en deuxime argument de la mthode load(). Par exemple, vous pourriez passer
deux couples paramtres/valeurs en utilisant l'instruction suivante :
Code : JavaScript
$('sel').load('http://www.site.com/page.php',{ id:50, nom:
'durand'});
Mais attention, dans ce cas, les valeurs sont passes par une requte HTTP POST. Elles devront donc tre rcupres de la
sorte par le programme PHP.
Requte HTTP POST ? Mais qu'est-ce que tout ce charabia ?
chaque manipulation faite par l'utilisateur, le navigateur envoie une requte au serveur contenant une rfrence une page
Web (http://www.site.com/page.php?param1=15&param2=rouge par exemple). Le serveur effectue les calculs
ncessaires et renvoie le rsultat au navigateur sous forme d'une page Web. Les requtes peuvent tre de type GET (apparentes
dans l'adresse URL) ou POST (absentes de l'adresse URL). Selon la mthode utilise, les instructions permettant de rcuprer les
donnes ct serveur seront diffrentes.
Requtes GET et POST

La fonction $.get()
En parallle de la mthode load(), vous pouvez utiliser la fonction jQuery $.get() pour obtenir des donnes envoyes par
le serveur en utilisant une requte HTTP GET. Voici la syntaxe de cette fonction :
Code : JavaScript
$.get(adresse, donnes, function() {
});
o :
adresse est le nom d'une page Web quelconque dont le contenu sera rcupr par la fonction get() ;
donnes reprsente les donnes passer la page Web par une requte HTTP GET ;
Passons la pratique. l'aide de la fonction get(), nous allons modifier le code prcdent pour rcuprer le code HTML
retourn par une page PHP et l'afficher dans une bote de message. Voici les instructions utilises :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Ajax - Get</title>
209/266
</head>
<body>
<button id="action">Lancer la requte HTTP GET</button><br />
<script>
$(function() {
$.get('proverbes.php?l=9', function(data) {
alert(data);
});
});
});
</script>
</body>
</html>
Essayer
Le corps du document comporte un simple bouton de commande qui dclenchera l'excution de la mthode get().
Lorsque ce bouton est cliqu, la fonction get() est excute. Le premier paramtre de la fonction contient l'adresse de la page
excuter (ici, une page PHP). Le deuxime correspond la fonction de rappel grce laquelle les donnes retournes par la page
PHP seront rcupres :
Code : JavaScript
$.get('proverbes.php?l=9', function(data) {
Le paramtre data ayant t pass en argument de la fonction de rappel, il suffit de l'utiliser pour rcuprer les donnes
affiches par la page PHP. Ces donnes sont alors affiches dans une bote de message avec la fonction alert().
La figure suivante vous montre le rsultat.
Rcupration des donnes PHP et affichage
210/266
La fonction $.post()
La fonction $.post() est toute indique si vous voulez envoyer des donnes de grande taille et/ou sensibles (entendez par l
qui contiennent des mots de passe ou d'autres donnes du mme type) au serveur. Par exemple, vous utiliserez la fonction
post() pour envoyer des donnes saisies dans un formulaire, qui doivent tre stockes dans la base de donnes du site. Voici
le type d'instruction que vous pourriez utiliser :
Code : JavaScript
$.post('traiteFormulaire.php', { nom: 'Pierre34', heure: '2pm',
post='Un peu de texte rcupr dans un formulaire HTML et destin
tre post dans un forum.' },
function(data) {
alert(data);
});
Ici, le programme traiteFormulaire.php est excut. Les donnes saisies dans le formulaire lui sont transmises, et les
lments affichs par le programme PHP sont affichs dans une bote de message.
Faire patienter l'utilisateur avec une animation

Certaines requtes AJAX peuvent demander quelques secondes pour s'excuter. Pour faire patienter la personne qui en est
l'origine, il est courant d'utiliser une image GIF anime, comme celle prsente la figure suivante.
L'image indique au visiteur qu'il doit attendre quelques secondes
Si vous dsirez une image diffrente, je vous conseille de vous rendre sur le site ajaxload.info pour obtenir une image
GIF en parfait accord avec la charte graphique de votre site.
Pour grer l'affichage de cette image, il suffit d'y faire rfrence lorsque la requte AJAX est dclenche, puis de l'effacer lorsque
l'excution de la requte AJAX est termine.
titre d'exemple, voici comment a t modifi le code de l'exemple prcdent pour afficher une image d'attente entre le dbut et la
fin de la requte AJAX :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Ajax - Load</title>
</head>
<body>
<input type="text" id="ref">
<button id="action">Afficher</button><br />
<div id="r">Entrez un nombre compris entre 1 et 10 pour afficher
un proverbe chinois</div>
<script>
$(function() {
$('#r').html('<img
src="http://www.mediaforma.com/sdz/jquery/ajax-loader.gif">');
$('#r').load('http://www.mediaforma.com/sdz/jquery/data.php',param);
211/266
});
});
</script>
</body>
</html>
Qu'est-ce qui a chang, d'aprs vous ?

Le code HTML est strictement identique. C'est du ct jQuery qu'il faut chercher les diffrences, ou plutt la diffrence,
puisqu'une seule instruction a t ajoute, ligne 17 :
Code : JavaScript
$('#r').html('<img src="http://www.mediaforma.com/sdz/jquery/ajaxloader.gif">');
Lorsque le bouton est cliqu par l'utilisateur, cette ligne affiche l'animation dans la balise <div>. Les lignes 18 et 19 lancent une
requte AJAX qui met jour le contenu de la balise <div> et donc efface l'image GIF anime.
Pour mettre jour une zone du document avec une page Web (crite en HTML ou en PHP par exemple), le plus simple
consiste utiliser la mthode load(), en prcisant le nom de la page entre les parenthses, ventuellement suivi d'une
fonction de rappel. Si elle est prcise, cette fonction sera appele lorsque les donnes auront t charges.
En modifiant lgrement la syntaxe de la mthode load(), il est possible d'utiliser une partie seulement des donnes
auxquelles donne accs la requte AJAX. Pour cela, il suffit de faire suivre le nom du fichier par une espace et par un
slecteur jQuery, sans le signe $, sans les parenthses et sans les apostrophes.
Un ou plusieurs couples paramtres/valeurs peuvent tre passs la mthode load(). Indiquez-les sous la forme d'une
chane dans le deuxime paramtre de la fonction.
Plusieurs fonctions jQuery vont vous permettre d'aller plus loin avec vos requtes AJAX. Vous pouvez en particulier
envoyer des requtes HTTP GET et POST au serveur avec les fonctions $.get() et $.post(), charger et excuter
un script JavaScript avec la fonction $.getScript() et des donnes JSON avec la fonction $.getJSON().
212/266
Plus loin avec AJAX

Arrivs ce point dans la lecture du cours, vous savez mettre jour une partie d'une page Web en utilisant la mthode load().
Nous allons maintenant nous intresser des fonctions jQuery complmentaires.
Les mthodes se diffrencient des fonctions, car elles s'appliquent des lments obtenus travers un slecteur jQuery. Dans
$('slecteur').meth(paramtres);, meth est une mthode, alors que dans $.fonc(paramtres);, fonc est
une fonction.
Charger un script et des donnes JSON

Charger un script
La fonction $.getScript() permet de charger (de faon asynchrone) puis d'excuter un fichier JavaScript. Dans sa syntaxe
la plus simple, il suffit de prciser l'adresse URL du fichier charger :
Code : JavaScript
$.getScript('adresse');
Dans la deuxime syntaxe, une fonction de retour est prcise en deuxime paramtre de la fonction. Cette fonction est excute
lorsque le code JavaScript a t charg et excut :
Code : JavaScript
$.getScript('adresse', function() {
});
Charger des donnes codes en JSON

JSON (JavaScript Object Notation) est un format de donnes textuel qui permet de reprsenter des informations structures.
Voici un exemple de donnes au format JSON :
Code : Autre
{
'menu': 'Fichier',
'commande': [
{
'nomCde': 'Nouveau',
'action':'CreateDoc'
},
{
'nomCde': 'Ouvrir',
'action': 'OpenDoc'
},
{
'nomCde': 'Enregistrer sous',
'action': 'SaveAs'
}
{
'nomCde': 'Fermer',
'action': 'CloseDoc'
}
]
213/266
Comme vous pouvez le dduire en examinant ce code, un fichier JSON est compos d'un ensemble de paires
'nom':'valeur' organises de faon hirarchique. Ici par exemple, les noms menu et commande se trouvent au mme
niveau hirarchique. Quant aux noms nomCde et action, il s'agit des enfants du nom commande.
Dans vos vies de programmeurs jQuery, vous serez peut-tre amens manipuler des donnes au format JSON. Pour cela, vous
chargerez le fichier de donnes JSON avec la fonction $.getJSON(), puis vous travaillerez sur les diffrentes donnes qui le
composent en utilisant la fonction de rappel.
Pour bien comprendre comment accder aux donnes d'un fichier cod en JSON, nous allons raisonner sur un exemple simple qui
comporte quatre paires 'nom':'valeur' de mme niveau :
Code : Autre
{
"nom": "Pierre Durand",

"age": "27",
"ville": "Paris",
"domaine": "HTML5, CSS3, JavaScript"
Et voici le code HTML/jQuery utilis pour manipuler ces donnes :

Code : HTML
<button id="charger">Charger et traiter les donnes</button>
<div id="r">Cliquez sur "Charger et traiter les donnes" pour lancer
la lecture et le traitement des donnes JSON</div>
<script>
$(function() {
$('#charger').click(function() {
$.getJSON('fichier.json', function(donnees) {
$('#r').html('<p><b>Nom</b> : ' + donnees.nom + '</p>');
$('#r').append('<p><b>Age</b> : ' + donnees.age + '</p>');
$('#r').append('<p><b>Ville</b> : ' + donnees.ville +
'</p>');
$('#r').append('<p><b>Domaine de comptences</b> : ' +
donnees.domaine + '</p>');
});
});
});
</script>
Lorsque le bouton est cliqu, la fonction getJSON() est excute pour charger le fichier de donnes fichier.json :
Code : JavaScript
$.getJSON('fichier.json', function(donnees) {
Le deuxime paramtre de la fonction getJSON() correspond la fonction de rappel. Cette fonction est excute lorsque le
fichier de donnes a t entirement charg. Remarquez le mot donnees pass comme paramtre de la fonction de rappel. C'est
par son intermdiaire que les donnes JSON seront accessibles.
Dans un premier temps, la valeur correspondant au nom (donnees.nom) est extraite du fichier de donnes et place sous une
forme HTML (html()) dans la balise <div> #r. Comme nous passons par la mthode html() pour remplir la balise <div>,
il est possible d'utiliser des attributs de mise en forme. Ici, le mot Nom est mis en gras avec la balise HTML <b> :
214/266
Code : JavaScript
$('#r').html('<p><b>Nom</b> : ' + donnees.nom + '</p>');
La donne age (donnees.age) est alors extraite du fichier de donnes et place la suite du nom, dans un nouveau
paragraphe. Ici aussi, le nom du champ est mis en gras en utilisant la balise HTML <b>.
Deux instructions similaires extraient les donnes ville et domaine du fichier de donnes JSON et les affichent la suite du
nom et de l'ge :
Code : JavaScript
$('#r').append('<p><b>Ville</b> : ' + donnees.ville + '</p>');
$('#r').append('<p><b>Domaine de comptences</b> : ' +
donnees.domaine + '</p>');
La figure suivante reprsente le rendu de ce code dans un navigateur.
Rcupration des donnes dans le fichier JSON
La fonction $.ajax()
J'ai gard le meilleur pour la fin : la fonction $.ajax() ! Tout comme les mthodes et fonctions AJAX tudies jusqu'ici,
$.ajax() permet d'envoyer des requtes HTTP AJAX un serveur Web. Ce qui la diffrencie de ses collgues , c'est la
finesse des paramtres qui peuvent lui tre communiqus. N'ayez crainte, je vais tout vous expliquer et vous jugerez en toute
connaissance de cause si oui ou non vous avez besoin de cette fonction. Deux syntaxes sont possibles :
Code : JavaScript
215/266
$.ajax(adresse, {options});
$.ajax({options});
o adresse est l'adresse laquelle la requte doit tre envoye, et options correspond une ou plusieurs des options
suivantes :
type : type de la requte, GET ou POST (GET par dfaut).
url : adresse laquelle la requte doit tre envoye.
data : donnes envoyer au serveur.
dataType : type des donnes qui doivent tre retournes par le serveur : xml, html, script, json, text.
success : fonction appeler si la requte aboutit.
error : fonction appeler si la requte n'aboutit pas.
timeout : dlai maximum (en millisecondes) pour que la requte soit excute. Si ce dlai est dpass, la fonction
spcifie dans le paramtre error sera excute.
Beaucoup d'autres options peuvent tre utilises. Pour en avoir une liste exhaustive, consultez la documentation officielle.
Que diriez-vous de passer la pratique pour voir comment utiliser cette fonction ? Je vous propose de reprendre l'exemple du
chapitre prcdent et de remplacer la fonction $.get() par $.ajax(). Voici le code utilis :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Ajax - La fonction ajax()</title>
</head>
<body>
<button id="action">Lancer la requte AJAX</button><br />
<script>
$(function() {
$.ajax({
type: 'GET',
url: 'proverbes.php?l=7',
timeout: 3000,
success: function(data) {
alert(data); },
error: function() {
alert('La requte n\'a pas abouti'); }
});
});
});
</script>
</body>
</html>
Le corps du document contient un bouton de commande qui sera utilis pour excuter la requte AJAX. Lorsque ce bouton est
cliqu, la fonction $.ajax() est lance pour excuter la requte AJAX. Cette requte est de type GET (ce paramtre aurait pu
tre omis, puisqu'il s'agit de la valeur par dfaut). La page invoque est dfinie dans le paramtre url et le dlai maximal
d'excution l'est dans le paramtre timeout. Ici, un dlai de 3000 millisecondes est accord au programme PHP pour fournir ce
qui lui est demand.
Si la requte aboutit, les donnes renvoyes par le programme PHP sont affiches dans une bote de message. Dans le cas
contraire, un message d'erreur est affich.
Voici un exemple d'excution de cette page :
216/266
Excution de la fonction $.ajax() pour rcuprer des donnes sur le serveur

Que pensez-vous de la fonction $.ajax() ? Personnellement, j'ai tendance lui prfrer la mthode load() et les fonctions
$.get(), $.post(), $.getScript() et $.getJSON(). Mais ce n'est qu'une affaire de got ! Peut-tre prfrerez-vous
vous concentrer sur une seule fonction pour toutes vos requtes AJAX plutt que d'apprendre utiliser plusieurs mthodes et
fonctions.
vnements associs une requte AJAX

Dans la section prcdente, vous avez appris utiliser la fonction success() pour excuter du code lorsqu'une requte AJAX
a abouti, et la fonction error() pour excuter du code lorsqu'une requte AJAX n'a pas abouti. Dans cette section, vous allez
dcouvrir une autre technique permettant d'excuter du code diffrentes tapes de l'excution d'une requte AJAX. Cette
technique repose sur la mise en place de mthodes de gestion vnementielle. Le tableau suivant donne un aperu des mthodes
utilisables :
Mthode
vnement
$('sel').ajaxSend(function(ev, req, options))
Requte sur le point d'tre envoye
$('sel').ajaxStart(function())
Dbut d'excution de la requte
$('sel').ajaxStop(function())
Fin de la requte
$('sel').ajaxSuccess(function(ev, req, options))
La requte a abouti
$('sel').ajaxComplete(function(ev, req, options))
La requte est termine
$('sel').ajaxError(function(ev, req, options, erreur)) La requte n'a pas abouti
o :
ev reprsente l'vnement ;
req reprsente la requte ;
options contient les paramtres passs la requte ;
erreur est le nom de l'erreur dtecte par jQuery.
Voici un peu de code pour vous aider comprendre comment utiliser ces mthodes vnementielles et dans quel ordre elles sont
217/266
excutes :
Code : HTML
<button id="action">Lancer la requte AJAX</button><br /><br />
<div id="donnees" style="background-color: yellow"></div><br />
<div id="message"></div>
<script>
$(function() {
$('#message').ajaxStart(function() {
$(this).html('Mthode ajaxStart excute<br>');
});
$('#message').ajaxSend(function(ev, req, options){
$(this).append('Mthode ajaxSend excute, ');
$(this).append('nom du fichier : ' + options.url + '<br>');
});
$('#message').ajaxStop(function(){
$(this).append('Mthode ajaxStop excute<br>');
});
$('#message').ajaxSuccess(function(ev, req, options){
$(this).append('Mthode ajaxSuccess excute<br>');
});
$('#message').ajaxComplete(function(ev, req, options){
$(this).append('Mthode ajaxComplete excute<br>');
});
$('#message').ajaxError(function(ev, req, options, erreur){
$(this).append('Mthode ajaxError excute, ');
$(this).append('erreur : ' + erreur + '<br>');
});
$('#donnees').load('affiche.htm');
});
});
</script>
Lorsque le bouton #action est cliqu, plusieurs mthodes de gestion vnementielle sont mises en place. Par exemple, la
mthode ajaxStart() capture l'vnement dbut d'excution de la requte . Cette mthode est applique la balise <div
id="message"> :
Code : JavaScript
$('#message').ajaxStart(function() {
Lorsque cet vnement est dclench, un texte est affich dans la balise <div id="message"> :
Code : JavaScript
$(this).html('Mthode ajaxStart excute<br>');
Les autres mthodes de gestion vnementielle sont comparables. Notez simplement l'affichage du nom du fichier dans la
mthode ajaxSend() :
Code : JavaScript
$(this).append('nom du fichier : ' + options.url + '<br>');
218/266
Et l'affichage du message d'erreur dans la mthode ajaxError() :

Code : JavaScript
$(this).append('erreur : ' + erreur + '<br>');
Une fois les mthodes de gestion vnementielle dfinies, le contenu du document affiche.htm est charg et insr dans la
balise <div id="donnees"> :
Code : JavaScript
$('#donnees').load('affiche.htm');
Le document affiche.htm est lmentaire : il se contente d'afficher un peu de texte dans le document :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Affichage d'un simple texte</title>
</head>
<body>
Ce texte est affich par la page affiche.htm
</body>
</html>
Essayer
Vous devriez obtenir quelque chose ressemblant la figure suivante.
219/266
Cette
excution montre l'ordre dans lequel sont levs les vnements en rapport avec la requte AJAX
Essayons de modifier le nom du fichier pour faire rfrence un fichier inexistant :
Code : JavaScript
$('#donnees').load('inexistant.htm');
Un clic sur le bouton de commande dclenche l'excution d'vnements lgrement diffrents, comme le montre la figure
suivante.
220/266
Le fichier
inexistant.htm n'a pas t trouv, ce qui a dclench l'vnement ajaxError

Plusieurs fonctions jQuery vont vous permettre d'aller plus loin avec vos requtes AJAX. Vous pouvez en particulier
envoyer des requtes HTTP GET et POST au serveur avec les fonctions $.get() et $.post(), charger et excuter
un script JavaScript avec la fonction $.getScript() et des donnes JSON avec la fonction $.getJSON().
La fonction $.ajax() pourra vous tre utile si vous voulez paramtrer finement vos requtes AJAX. Elle permet de
dfinir plusieurs fonctions de rappel pour ragir diffrents vnements lis la requte.
Enfin, vous pouvez mettre en place des mthodes de gestion vnementielle pour capturer les vnements :
ajaxSend(), ajaxStart(), ajaxStop(), ajaxSuccess(), ajaxComplete() et ajaxError().
221/266
TP : Un chat en jQuery
Je vous propose un projet ambitieux : l'criture d'un chat en jQuery. Si vous pensez que vous n'y arriverez jamais, relisez les titres
des chapitres que vous avez lus jusqu'ici et prenez un peu de recul. Laissez aller votre imagination et demandez-vous ce qu'est
un programme de chat, ce qu'il implique et ce que vous devrez mettre en place en jQuery.
Une fois que vous aurez pris ce temps de rflexion, poursuivez la lecture et je vous donnerai toutes les instructions pour que
vous arriviez crire ce programme.

Qui n'a jamais discut en direct avec ses proches en utilisant une application de chat ? Ce genre de programme permet de saisir
de courts messages textuels qui seront affichs chez toutes les personnes qui suivent la conversation. Si une d'entre elles envoie
une rponse, elle sera galement affiche chez toutes les personnes qui suivent la conversation. Le principe du chat tant pos,
vous trouverez l'image suivante un exemple d'excution du programme de chat que vous allez dvelopper.
D'une simplicit dsarmante, ce
programme est galement trs efficace

Voici quelques remarques pour partir du bon pied :
Vous pouvez tester ce programme localement, en utilisant un serveur Apache, mais je vous conseille de le dposer sur un
serveur Web afin que tous vos amis puissent l'utiliser.
Lorsqu'un internaute envoie un message, les donnes du formulaire doivent tre envoyes au programme chat.php.
Ce programme met jour le fichier ac.htm que vous utiliserez pour rafrachir le contenu de la zone de conversation.
Le rafrachissement de la conversation devra se faire toutes les 4 secondes. Vous pouvez diminuer cette priode, mais le
serveur sur lequel sera plac le programme risque de ne pas apprcier si de nombreuses personnes lancent une
conversation.
222/266
Le code PHP
Ce chat fonctionne grce un code PHP que je vais vous donner afin que vous puissiez tester votre application au fur et
mesure. Si vous n'y comprenez rien, ce n'est pas trs grave, l'important est que cela fonctionne. Et pour ceux qui savent
dvelopper en PHP, n'hsitez pas amliorer le script.
Code : PHP
<?php
$nom = $_POST['nom'];
//On rcupre le pseudo et
on le stocke dans une variable
$message = $_POST['message'];
//On fait de mme avec le
message
$ligne = $nom.' > '.$message.'<br>';
//Le message est cr
$leFichier = file('ac.htm');
//On lit le fichier ac.htm
et on stocke la rponse dans une variable (de type tableau)
array_unshift($leFichier, $ligne);
//On ajoute le texte
calcul dans la ligne prcdente au dbut du tableau
file_put_contents('ac.htm', $leFichier); //On crit le contenu du
tableau $leFichier dans le fichier ac.htm
?>
Je crois que j'ai tout dit. Alors, c'est vous de jouer. Progressez pas pas. N'crivez pas trop d'instructions la fois et surtout
faites des tests le plus frquemment possible pour valider ce que vous aurez crit.
Correction
Je vais maintenant vous donner ma correction. Je dis bien ma correction et pas la correction. Il existe en effet plusieurs faons de
rsoudre le problme. Si vous tes partis sur une tout autre technique et si cela fonctionne, je vous flicite. Par contre, si vous
tes partis sur une autre technique et que vous n'arrivez pas obtenir le rsultat escompt, je suis sr que vous trouverez dans
cette correction des lments qui vous feront progresser jusqu' votre solution
criture du code HTML et CSS

Je ne vais pas m'attarder sur ce point, ce n'est pas vraiment le but de ce cours ni de ce TP. Voici le code HTML et CSS de la page
du chat, vous de l'adapter au besoin :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Chat jQuery</title>
#conversation {
width: 300px;
height: 400px;
background-color: #efecca;
overflow-x: hidden;
overflow-y: scroll;
padding: 5px;
margin-left: 10px;
}
fieldset {
width: 330px;
background-color: #e6e2af;
}
</style>
223/266
</head>
<body>
<fieldset>
<legend>Un chat en jQuery</legend>
<div id="conversation"></div><br />
<form action="#" method="post">
<input type="text" id="nom" value="pseudo" size="6">
<input type="text" id="message" size="27">
<button type="button" id="envoyer" title="Envoyer"><img
src="envoyer.gif"></button>
</form>
</fieldset>
</body>
</html>
criture du code jQuery

Il ne reste plus qu' donner vie cette page en y insrant des instructions jQuery. Insrez le code suivant aprs la balise
</fieldset> :
Code : HTML
<script
<script>
$(function() {
afficheConversation();
$('#envoyer').click(function() {
var nom = $('#nom').val();
var message = $('#message').val();
$.post('chat.php', {'nom':nom, 'message': message }, function() {
afficheConversation;
});
});
function afficheConversation() {
$('#conversation').load('ac.htm');
$('#message').val('');
$('#message').focus();
}
setInterval(afficheConversation, 4000);
});
</script>
Quoi ? C'est tout ? Ces quelques lignes vont faire fonctionner le chat ?
Eh bien oui ! Rappelez-vous de la devise de jQuery : Write less, do more , ce qui signifie crivez moins pour faire plus .
Une fois de plus, jQuery montre sa puissance travers ces quelques lignes de code.
Ligne 1, remarquez la rfrence la version minimise de jQuery sur le CDN Google.
Le code jQuery occupe les lignes 3 19. Lorsque le DOM est disponible ($(function() {), la mthode
afficheConversation() est appele. Elle est dfinie entre les lignes 14 et 16. Cette mthode se contente d'afficher le
contenu du fichier ac.htm dans la balise <div id="conversation"> :
Code : JavaScript
$('#conversation').load('ac.htm');
224/266
Cette simple instruction est responsable de tout ce qui est affich dans la balise <div>. Merci jQuery !
Les lignes 5 11 reprsentent la mthode de gestion vnementielle des clics sur le bouton de commande. Lorsque le bouton est
cliqu, le contenu des zones de texte d'identifiants #nom et #message est stock dans les variables nom et message :
Code : JavaScript
var nom = $('#nom').val();
var message = $('#message').val();
L'instruction suivante utilise la fonction jQuery post() pour poster ces donnes au programme chat.php. Lorsque les
donnes ont t envoyes, la fonction de retour afficheConversation() est excute, ce qui provoque l'affichage du
message qui vient d'tre post dans la zone de conversation :
Code : JavaScript
$.post('chat.php', {'nom':nom, 'message': message }, function() {
afficheConversation;
Pour faciliter la vie de l'utilisateur, l'instruction suivante supprime le contenu de la zone de texte #message, mais garde celui de
la zone de texte #pseudo. Il est en effet probable qu'il veuille poursuivre la conversation en gardant le mme pseudo mais pas le
message qu'il vient de taper. Pour lui viter d'avoir effacer la zone de saisie du message chaque fois qu'il veut intervenir, une
instruction jQuery est suffisante :
Code : JavaScript
$('#message').val('');
La troisime instruction de la fonction afficheConversation() donne le focus la zone de saisie du message. Il suffit
donc l'utilisateur de saisir un message et de cliquer sur le bouton de commande pour l'envoyer :
Code : JavaScript
$('#message').focus();
Il ne reste plus qu'une instruction pour terminer le TP. Cette instruction est trs importante, car c'est elle qui va excuter
intervalles rguliers la mthode afficheConversation() et ainsi mettre jour la zone de conversation lorsque d'autres
personnes que vous posteront un message. Bien entendu, cette instruction fait appel la fonction JavaScript
setInterval() en prcisant le nom de la fonction excuter, sans parenthses ni guillemets, le dlai entre deux excutions
tant exprim en millisecondes :
Code : JavaScript
setInterval(afficheConversation, 4000);
Certains d'entre vous se demandent peut-tre pourquoi la fonction afficheConversation() est invoque deux reprises
(lignes 4 et 9), alors que la fonction setInterval() l'excute rgulirement toutes les 4 secondes. Ces deux appels ne sont l
que pour le confort de l'utilisateur :
225/266
Ligne 4, la zone de conversation est remplie ds la disponibilit du DOM ;

Ligne 9, la zone de conversation est mise jour juste aprs que le message a t post.
J'espre que vous avez apprci ce TP. Il ne tient qu' vous de l'amliorer. Vous pourriez par exemple :
Permettre aux chatteurs d'utiliser un avatar graphique ;
Autoriser des messages sur plusieurs lignes ;
Amliorer la mise en forme des messages posts en affectant une couleur d'arrire-plan diffrente un message sur deux ;
Dfinir plusieurs groupes de conversation (ici toutes les personnes qui affichent la page chat.htm partagent le mme
espace de conversation).
Il ne s'agit l que de quelques suggestions, et il y a fort parier que vous trouverez sans peine plusieurs autres amliorations
ce programme.
Partie 5 : Les plugins jQuery
226/266
Trouver et utiliser un plugin

La bibliothque jQuery a t crite de telle sorte qu'il est trs simple de l'tendre en installant des modules additionnels, connus
sous le nom d'extensions ou de plugins. De nombreux sites Web se sont spcialiss dans les plugins jQuery.
Dans ce chapitre, je vais vous indiquer deux sites rpertoriant ces fameux plugins. Je vous montrerai enfin comment les utiliser.
Trouver et utiliser un plugin jQuery

Trouver un plugin
Pour vous faire gagner du temps, je vais limiter (du moins dans un premier temps) vos recherches deux sites :
The Ultimate jQuery List et jQuery Plugins. Tous deux trs bien faits, ils donnent accs de trs nombreux
plugins classs par catgories.
Il vous suffit donc d'aller dans une catgorie et de regarder les plugins proposs. Sur The Ultimate jQuery List,
cliquez sur un plugin pour en avoir une description. Si le plugin vous intresse, rendez-vous sur le site Web ddi afin de le
tlcharger ; la plupart du temps, la documentation du plugin s'y trouve galement. Vous trouverez galement souvent une
dmonstration, ce qui est toujours intressant pour se dcider.
Utiliser un plugin
Vous allez voir qu'utiliser un plugin est la plupart du temps un jeu d'enfant. Nous allons utiliser le plugin Websanova Color
Picker , propos sur le site The Ultimate jQuery List. Rendez-vous donc sur ce site, allez dans la catgorie Color
Pickers et cliquez sur Websanova Color Picker, puis sur Visit Website. Une fois sur le site en question,
tlchargez le plugin (il s'agit d'un fichier compress, choisissez donc le format qui vous convient).
Dcompressez l'archive et copiez la version minimise des fichiers JavaScript et CSS dans le dossier dans lequel vous faites vos
dveloppements jQuery. Vous tes maintenant prts utiliser le plugin. Il ne vous reste plus qu' consulter la documentation.
Dans notre cas, elle se trouve en ligne. La figure suivante vous montre quoi elle ressemble.
227/266
La documentation en ligne du
plugin Websanova Color Picker

Il ne reste plus qu' faire rfrence au plugin en utilisant une balise <script>, au code CSS en utilisant une balise <link>
dans l'en-tte, et appliquer les consignes donnes dans la documentation. Voici un exemple d'utilisation de ce plugin :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Websanova Color Picker</title>
<link rel="Stylesheet" type="text/css"
href="wColorPicker.1.2.min.css" />
</head>
<body>
<div id="wcp1">
<input id="wcp-input" type="text"/><br />
</div>
<script src="wColorPicker.1.2.min.js"></script>
<script>
$(function() {
$("#wcp1").wColorPicker({
228/266
initColor: '#ccf',
onSelect: function(color){
$('body').css('background', color);
},
onMouseover: function(color){
$('#wcp-input').css('background', color).val(color);
}
});
});
</script>
</body>
</html>
Le code jQuery est directement tir de la documentation du plugin. Dans cet exemple, la couleur d'arrire-plan de la zone de texte
#wcp-input est modifie lorsque la souris se trouve au-dessus d'une des couleurs du nuancier et la couleur correspondante
est affiche dans la zone de texte :
Code : JavaScript
onMouseover: function(color){
$('#wcp-input').css('background', color).val(color);
}
Quand l'utilisateur clique sur une des couleurs du nuancier, la couleur d'arrire-plan de la page est mise jour en consquence :
Code : JavaScript
onSelect: function(color){
$('body').css('background', color);
}
L'image suivante montre le rsultat.
Le plugin est oprationnel
229/266
Et c'est tout ?
Oui, c'est la dmarche utiliser pour interfacer un plugin jQuery quelconque. Si la documentation est bien faite (!) et si vous
comprenez un peu l'anglais technique, vous ne devriez avoir aucun mal utiliser tous les plugins possibles et imaginables.
Quelques exemples de plugins

Cette section s'intresse quelques plugins dignes d'intrt et vous montre comment les utiliser en jQuery. Il existe de trs
nombreux plugins, et il fallait faire un choix. Si vous ne trouvez pas le plugin de vos rves dans cette section, cette lecture devrait
vous donner les bases pour savoir comment l'utiliser
Parseur RSS/Atom
De nombreux sites Web proposent des flux de donnes au format RSS et/ou Atom. En utilisant un parseur, vous pouvez
rcuprer ces flux de donnes et les intgrer votre site. Je vous propose d'utiliser le plugin jFeed qui excelle dans ce
domaine.
Rendez-vous sur la page de tlchargement du plugin et cliquez sur Click here to download. Dcompressez le fichier
zrssfeed-116 et placez les fichiers jquery.rssfeed.js, jquery.zrssfeed.css et example.html dans le
dossier dans lequel vous faites vos dveloppements jQuery.
Nous allons maintenant parser un des flux RSS proposs par le site lemonde.fr. Rendez-vous sur la page
http://www.lemonde.fr/rss/, choisissez un des flux proposs, cliquez du bouton droit sur l'icne XML
correspondante et slectionnez Copier le raccourci dans le menu contextuel, comme le montre l'image suivante.
L'adresse du flux la une se
230/266
trouve dans le presse-papiers
Ouvrez le fichier example.html et modifiez le flux que vous voulez parser en collant l'adresse du flux copi prcdemment. Au
besoin, modifiez la rfrence au fichier jQuery ainsi qu'au fichier jquery.zrssfeed.js. Il ne vous reste plus qu' excuter
ce fichier dans votre navigateur pour afficher les sujets contenus dans le flux du site lemonde.fr. l'image suivante par
exemple, ce sont les flux la une qui s'affichent.
Le flux la une du site
lemonde.fr a t pars
Validation de formulaires
Vous voulez valider un formulaire avec jQuery ? Aucun problme, si ce n'est le temps pass imaginer toutes les saisies
possibles et diffrencier celles qui sont valides de celles qui ne le sont pas. Une autre solution s'offre vous : utiliser le plugin
Validate .
Si vous avez choisi la premire solution, retroussez vos manches, je vous souhaite bon courage. Si vous avez choisi la deuxime
solution, vous pouvez poursuivre la lecture.
Tlcharger le plugin Validate et copiez les fichiers ncessaires (demo > example.html et jquery.validate.js)
dans votre espace de travail. Au besoin, modifiez le fichier example.html afin que les rfrences aux fichiers externes soient
bonnes.
Pour utiliser le plugin Validate , il suffit d'excuter la mthode validate() lorsque le DOM est disponible :
Code : HTML
<script>
$("#commentForm").validate();
});
</script>
Pour dfinir le type de validation souhait sur un champ du formulaire, affectez-lui la classe correspondante :
required : champs requis ;
231/266
email : adresse e-mail ;

url : adresse URL ;
date : date ;
number : nombre ;
creditcard : numro de carte bancaire.
Si vous regardez le fichier example.html, vous devriez voir la ligne suivante :
Code : HTML
<input id="cemail" name="email" class="required email" />
Ce code signifie que le champ est obligatoire et doit contenir une adresse e-mail. Plutt facile mettre en place, non ?
La figure suivante est un exemple d'excution du script.
Des messages d'erreur sont
affichs sous les zones de texte lorsque les informations entres ne sont pas valides
Les messages d'erreur sont affichs en anglais, mais peut-tre les voudriez-vous en franais. Pour cela, vous devez franciser le
fichier jquery.validate.js. Tous les messages d'erreur sont regroups entre les lignes 268 et 284. vous de les modifier
comme vous l'entendez. Vous ne devriez avoir aucun mal adapter les fichiers example.html et jquery.validate.js
pour valider vos propres formulaires, avec des messages d'erreur en franais s'il vous plat !
Un menu droulant un ou plusieurs niveaux

Il est souvent ncessaire de mettre en place un menu droulant dans un site. Plutt que de tout concevoir la main , je vous
propose d'utiliser un plugin. L'image suivante montre ce que vous obtiendrez simplement en crivant quelques lignes de code
HTML.
232/266
Un menu droulant en quelques
lignes de code HTML avec le plugin Simple jQuery Dropdowns

Rendez-vous sur cette page et tlchargez le plugin. Dcompressez ce fichier et double-cliquez sur le fichier index.html pour
obtenir le rsultat de la figure prcdente. Voyons ce qui se cache dans le code de cette page. Le plugin utilis est
jquery.dropdownPlain.js. Le simple fait d'excuter ce script vous ddouane de tout autre code jQuery ! Pour construire
votre menu, il vous suffira de dfinir une liste <ul><li></li></ul> un ou plusieurs niveaux. Examinons les premiers
lments de la liste dfinie dans le fichier index.html :
Code : HTML
<ul class="dropdown">
<li><a href="#">For Facilities</a>
<ul class="sub_menu">
<li><a href="#">Artificial Turf</a></li>
<li>
<a href="#">Batting Cages</a>
<ul>
<li><a href="#">Indoor</a></li>
<li><a href="#">Outdoor</a></li>
</ul>
</li>
<li><a href="#">Benches & Bleachers</a></li>
<li><a href="#">Communication Devices</a></li>
<li><a href="#">Dugouts</a></li>
<li><a href="#">Fencing & Windscreen</a></li>
etc.
La premire ligne cre une liste de classe dropdown. Cette classe correspond aux commandes principales du menu. La balise
<li> suivante dfinit le titre du premier menu. Vient ensuite une balise <ul> de classe sub_menu. Cette balise contient toutes
les commandes attaches au premier menu. Pour crer des commandes de menu secondaires, il suffit d'imbriquer une autre liste
<ul> compose d'autant de balises <li> que de commandes de menu secondaires. Par exemple, la commande Batting Cages
donne accs aux commandes de menu secondaires Indoor et Outdoor . Rien de plus compliqu !
Si vous devez mettre en place un menu sur un de vos sites Web, ce plugin devrait vous faciliter grandement la tche. Pensez
simplement insrer les fichiers jquery.dropdownPlain.js et style.css dans les dossiers js et css de votre site
(ou d'adapter selon vos besoins), et le tour sera jou !
233/266
Cartographie
Que diriez-vous d'afficher sur votre site Web une carte gographique centre sur un point particulier ? C'est ce que je vous
propose de faire avec le plugin gMap , qui interface le systme de cartographie Google Maps. Rendez-vous sur cette page et
tlchargez la dernire version compresse du plugin.
Voyons comment afficher une carte du monde. Crez un nouveau document HTML et insrez une balise <div> dans le corps du
document. Donnez cette balise la dimension que vous voulez lui voir occuper dans la page et affectez la valeur hidden son
attribut overflow :
Code : HTML
<div id="map1" style="width: 800px; height: 600px; border: 1px solid
#777; overflow: hidden;"></div>
Pour accder toute la puissance de Google Maps, utilisez trois balises <script> pour faire rfrence la bibliothque jQuery,
l'API de Google Maps et au plugin jquery.gmap-1.1.0-min.js :
Code : HTML

<script type="text/javascript" src="http://maps.google.com/maps?
file=api&v=2&sensor=false&key=ABQIAAAA6cQIrMEc9zlaKBjWiPM5rxSjlBXfTSDcGsB79
<script type="text/javascript" src="jquery.gmap-1.1.0-min.js"></script>
Pour afficher la carte du monde dans la balise <div id="map1">, il vous suffit de lui appliquer la mthode gMap() ds que
le DOM est disponible :
Code : HTML
<script>
$(function() {
$('#map1').gMap();
});
</script>
L'image suivante vous montre le rsultat.
234/266
Une seule instruction permet d'afficher une carte

Plusieurs paramtres peuvent tre passs la mthode gMap(). Entre autres :
La latitude et la longitude : proprits latitude et longitude ;
Des informations sur le centre de l'affichage : proprit address ;
Le facteur de zoom : proprit zoom (entre 1 et 19) ;
Le type de la carte : proprit maptype (G_NORMAL_MAP, G_SATELLITE_MAP, G_HYBRID_MAP,
G_DEFAULT_MAP_TYPES, G_PHYSICAL_MAP).
Pour avoir la liste complte des paramtres qui peuvent tre passs la mthode gMap(), consultez la documentation
en ligne.
Pour connatre la latitude et la longitude d'une ville, allez sur le site de Google Maps, tapez le nom de la ville dans le champ de
recherche et appuyez sur la touche Entre de votre clavier. La carte se centre sur la ville avec une icne. Faites un clic droit sur
cette icne et choisissez Plus d'infos sur cet endroit. Le champ de recherche est alors mis automatiquement jour
avec la latitude et la longitude.
Pour terminer, voici un exemple concret d'utilisation. Nous allons afficher une carte centre sur la ville d'Albi, situe aux
coordonnes (43.92, 2.14). Le texte Albi sera affich dans une bulle, le facteur de zoom sera gal 10 et la carte sera de type
vue en relief . Voici le code utiliser :
Code : JavaScript
235/266
$("#map").gMap({ markers: [{
latitude: 43.92,
longitude: 2.14,
html: "Albi",
popup: true }],
maptype: G_SATELLITE_MAP,
zoom: 10 });
Il est possible d'largir les possibilits de jQuery en utilisant des plugins. Il en existe beaucoup et ils vous rendront de
grands services.
Pour faire rfrence un plugin, il suffit de l'appeler en utilisant une balise <script>.
Une fois le plugin rfrenc, vous pouvez l'appeler comme n'importe quelle autre mthode jQuery. Par exemple :
$('#monId').monPlugin(10, 'rouge').
236/266
jQuery UI
Si jQuery offre de trs nombreuses mthodes pour grer le DOM, les proprits CSS, AJAX et la gestion vnementielle, jQuery
UI le complte parfaitement en offrant des mthodes additionnelles appliques la ralisation de l'interface utilisateur ( UI ,
dans jQuery UI , signifie user interface , soit interface utilisateur en franais). jQuery UI est en quelque sorte un vaste
assemblage de plugins accessibles travers un seul fichier JavaScript.
De quoi est capable jQuery UI ?

Pour avoir un aperu des possibilits offertes par jQuery UI, rendez-vous sur le site officiel et testez les diffrentes
fonctionnalits proposes.
Dans la suite de ce chapitre, je vais vous montrer comment utiliser les mthodes qui m'ont paru les plus intressantes dans
jQuery UI. Pour utiliser cette bibliothque, il vous suffit d'y faire rfrence avec une balise <script> qui pointe vers le CDN
Google :
Version non minimise
Version minimise
Pour amliorer le rendu, la mise en forme des lments manipuls par jQuery UI peut s'appuyer sur un thme CSS, auquel vous
ferez rfrence via une balise <link>, dans l'en-tte du document. Tous les thmes sont accessibles sur le CDN Google.
Ce chapitre n'est qu'une introduction jQuery UI. Si vous voulez en savoir plus, je vous conseille de lire le cours Dcouvrez la
puissance de jQuery UI crit par Sainior.
Dplacer et redimensionner des lments

Dplacement
La mthode draggable() permet n'importe quel lment du DOM d'tre librement dplac dans la page. Supposons qu'une
page Web soit compose des lments suivants :
Code : HTML
<style>
div{
width: 150px;
height: 150px;
padding: 0.5em;
}
</style>
<span>Dplacez les images et le div comme vous l'entendez</span><br
/><br />
<img src="miniPaysage1.jpg">
<div>Dplacez-moi</div>
Aprs avoir fait rfrence aux bibliothques jQuery et jQuery UI, il suffit d'une instruction jQuery pour rendre mobiles toutes les
balises <img> et <div> :
Code : JavaScript
$(function() {
$('img,div').draggable();
});
La figure suivante vous montre un exemple d'excution de ce code, avant et aprs le dplacement des images et de la balise
<div>.
237/266
Les
trois images et la balise <div> peuvent tre dplaces o bon vous semble
Redimensionnement
La mthode resizable() permet de redimensionner un objet quelconque. Bien qu'elle soit utilisable sur tous les objets du
DOM, vous l'utiliserez surtout pour permettre l'utilisateur de redimensionner des images. Une fois encore, jQuery UI brille par
sa simplicit : pour rendre un lment redimensionnable, appliquez-lui simplement la mthode resizable().
Code : HTML
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/base/jqueryui.css">
<img id="redim" src="visage.jpg">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jqueryui.min.js"></script>
<script>
$(function() {
$("#redim").resizable();
});
</script>
La figure suivante vous montre le rsultat obtenu.
238/266
L'image peut tre
redimensionne en agissant sur les bords droit et infrieur, et sur l'angle infrieur droit
Un accordon
Imaginez un empilement de balises <div> dont le contenu d'une seule est visible la fois et vous aurez une ide assez prcise
de ce que peut produire la mthode accordion(). Pour mettre en uvre cette mthode, commencez par dfinir une balise
<div> conteneur compose de plusieurs balises de titre <h3> associes des balises <div> dans lesquelles vous placerez le
contenu afficher. Regardez le code suivant, ce devrait tre beaucoup plus clair.
Code : HTML
<div id="accordeon">
<h3><a href="#">Titre du bloc 1</a></h3>
<div>Contenu du bloc 1</div>
<h3><a href="#">Titre du bloc 2</a></h3>
<div>Contenu du bloc 2</div>
etc.
</div>
Faites rfrence un fichier CSS jquery-ui.css sur le CDN Google, puis excutez la mthode jQuery accordion() sur le
<div> conteneur, comme dans le code suivant.
Code : HTML
<html>
$("#accordeon").accordion();
});
</html>
Essayer
239/266
La figure suivante vous montre le rsultat.
Une
seule balise <div> s'affiche
N'hsitez pas tester les thmes disponibles pour changer radicalement le rendu de l'accordon.
Slection de date
La mthode datepicker() transforme une simple zone de texte <input type="text"> en un calendrier dans lequel
l'utilisateur peut choisir une date. La date choisie est alors copie dans la zone de texte. Pour utiliser cette mthode, il suffit de
l'appliquer une zone de texte quelconque, aprs avoir fait rfrence un thme et aux bibliothques jQuery et jQuery UI :
Code : HTML
Date <input type="text" id="datepicker">
<script>
$(function() {
$( "#datepicker").datepicker();
});
</script>
La figure suivante illustre le rsultat obtenu.
240/266
La zone de texte a t transforme en un datepicker en une ligne de code

Qu'en dites-vous ? Plutt sympathique, non ? Mais que diriez-vous d'avoir un calendrier franais ? Ce serait mieux, non ? Pour
cela, vous allez initialiser le tableau $.datepicker.regional['fr'] comme ceci :
Code : JavaScript
$.datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: 'Prcdent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames:
['Janvier','Fvrier','Mars','Avril','Mai','Juin','Juillet','Aot','Septembre','Octobre
monthNamesShort: ['Janv.','Fvr.','Mars','Avril','Mai','Juin','Juil.','Aot','Sept.'
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
dayNamesMin: ['D','L','M','M','J','V','S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
Puis indiquer que vous voulez utiliser ces donnes dans la mthode datepicker() :
Code : JavaScript
$.datepicker.setDefaults($.datepicker.regional['fr']);
Ces instructions doivent tre places juste au-dessus de l'appel la mthode datepicker(). Vous voil avec un calendrier en
franais !
Des botes de dialogue

La mthode dialog() permet de crer des botes de dialogue de bien meilleur aspect que celles affiches avec la fonction
JavaScript alert(). Voici comment la mettre en uvre :
1. Crez une balise <div>.
2. Dfinissez le titre de la bote de dialogue dans son attribut title.
3. Appliquez la mthode dialog() la balise <div>.
241/266
L'instruction suivante cre une instance de la bote de dialogue et l'ouvre :

Code : JavaScript
$('sel').dialog();
Si la bote de dialogue doit tre ouverte et ferme plusieurs fois, vous utiliserez d'autres instructions :
Code : JavaScript
$('sel').dialog({ autoOpen: false; }); //Cre une instance de la
bote de dialogue sans l'ouvrir
$('sel').dialog('open'); // Ouvre la bote de dialogue
$('sel').dialog('close'); // Ferme la bote de dialogue
Voici quelques autres options utilisables dans les paramtres de la mthode dialog() :
Options
Signification
height et
width
Hauteur et largeur de la bote de dialogue l'ouverture.
modal
Initialis true, rend la bote de dialogue modale (c'est--dire interdit l'accs la page). La valeur par
dfaut est false.
position
Position de la bote de dialogue sur la page (elle est centre par dfaut).
zindex
Z-index de la bote de dialogue (1000 par dfaut).
buttons
Un ou plusieurs boutons affichs dans la bote de dialogue.
Voici un exemple basique dans lequel une balise <div> est transforme en une bote de dialogue non modale, centre et dont les
dimensions sont celles par dfaut :
Code : HTML
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
fugiat quo voluptas nulla pariatur?

<div id="dialog" title="Bote de dialogue de base">
Cette bote de dialogue peut tre redimensionne, dplace et ferme.
</div>
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
242/266
La figure suivante montre le rsultat obtenu.
Une bote de
dialogue de base
Supposons maintenant que vous vouliez crer une bote de dialogue modale comportant deux boutons (Oui et Non) et
positionne en (100, 100). Voici le code utiliser :
Code : HTML
<script>
$(function() {
$( "#dialog" ).dialog({
modal: true,
buttons: {
"Oui": function() {
$('body').css('background', 'yellow');
$( this ).dialog( "close" );
},
"Non": function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
La figure suivante montre le rsultat obtenu. Comme vous le voyez, la page est grise et inaccessible. Lorsque l'utilisateur clique
sur le bouton Oui, l'arrire-plan de la page devient jaune, puis la bote de dialogue se ferme. Lorsqu'il clique sur le bouton Non,
l'arrire-plan reste inchang et la bote de dialogue se ferme. Ce qu'il faut surtout retenir, c'est que vous pouvez dfinir des
fonctions.
243/266
Une bote de
dialogue modale avec deux boutons
Afficher des onglets

En utilisant des onglets, vous pouvez afficher un grand nombre d'informations dans un espace rduit. Pour visualiser l'ensemble
de ces informations, il vous suffit de basculer d'onglet en onglet.
Pour dfinir des onglets, vous devez imbriquer plusieurs <div> enfants (une par onglet) dans une <div> parent. L'identifiant
et l'intitul des diffrents onglets sont dfinis dans une liste puces insre dans la balise <div> parent. Voici la structure
HTML utiliser :
Code : HTML
<div id="onglets">
<ul>
<li><a href="#onglet-1">Titre onglet 1</a></li>
</ul>
<div id="onglet-1">

</div>
<div id="onglet-2">

</div>
<div id="onglet-3">

</div>
</div>
Une fois ces instructions mises en place, appliquez la mthode tabs() la balise <div> parent (ici #onglets) :
Code : HTML
244/266
<script>
$(function() {
$('#onglets').tabs();
});
</script>
jQuery UI se charge alors du reste. Regardez la figure suivante pour en tre convaincus.
La
dfinition d'onglets est un vrai jeu d'enfant avec jQuery UI

Le contenu des diffrents onglets peut galement tre obtenu en AJAX. Pour cela, prcisez l'adresse URL des pages afficher
dans l'attribut href des diffrents onglets. Ici par exemple, le premier onglet est obtenu partir de la balise <div> enfant
#onglet-1, le deuxime partir de la page distante page2.htm et le troisime partir du programme PHP page3.php :
Code : HTML
<ul>
<li><a href="http://www.site.com/page2.htm">Titre onglet
2</a></li>
<li><a href=" http://www.site.com/page3.php">Titre onglet
3</a></li>
</ul>
Animation : une impression de dj-vu

Je vais ici vous parler des mthodes show(), hide() et toggle(). Nous les avons dj tudies, vous ne devriez
normalement avoir aucune difficult les utiliser. Si je reviens sur ces mthodes, c'est parce que jQuery UI tend ces mthodes et
vous permet d'aller beaucoup plus loin
Avant de continuer, je prcise pour tous ceux qui auraient la mmoire courte que la mthode show() anime un lment en le
faisant apparatre, la mthode hide() anime un lment en le faisant disparatre et la mthode toggle() anime un lment en
le faisant apparatre ou disparatre, en fonction de l'tat de l'lment lorsqu'elle est excute. Tout cela reste valide lorsque l'on
utilise les mthodes jQuery UI.
Voici la syntaxe utiliser :
245/266
Code : JavaScript
show(effet, options, vitesse, retour);
hide(effet, options, vitesse, retour);
toggle(effet, options, vitesse, retour);
o :
effet est l'un des effets suivants : blind, clip, drop, explode, fold, puff, slide, scale, size et
pulsate.
options reprsente les options appliquer l'effet. Ce paramtre est optionnel.
vitesse est la vitesse d'excution de l'effet : slow, normal (valeur par dfaut quivalente 400 ms), fast ou un
nombre qui reprsente une dure en millisecondes. Ce paramtre est optionnel.
retour est une fonction de retour, excute lorsque l'effet est termin. Ce paramtre est optionnel.
Voici un exemple pratique d'utilisation de la mthode jQuery UI show() avec l'effet explode :
Code : HTML
#contenu
{
width: 240px;
height: 135px;
border: 1px gray solid;
background-color: #aaeae1;
}
#contenu h3
{
margin: 0;
padding: 0.4em;
text-align: center;
background-color: #777;
}
</style>
<div id="contenu" style="width: 400px;">
<h3>Un titre</h3>
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos
animi, id est laborum et dolorum fuga.
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jqueryui.min.js"></script>
<script>
$(function() {
$('#contenu').show('explode');
});
</script>
Essayer
Le code CSS n'est l que pour donner un peu de consistance la balise <div id="contenu">. Cette dernire contient un
titre <h3> et un peu de texte. Le code jQuery applique l'effet explode la balise <div id="contenu"> via la mthode
show().
246/266
Je vous conseille de tester les autres effets et les mthodes hide() et toggle() pour vous rendre compte des possibilits
offertes. Si vous voulez plus d'informations sur les options relatives aux diffrents effets, consultez la page qui y est consacre.
Pour appliquer un effet un lment sans le faire apparatre ou disparatre, passez par la mthode effect(), en
utilisant la mme syntaxe que pour les mthodes show(), hide() et toggle().
Animation de couleurs
Dans la troisime partie du cours, vous avez appris animer des lments avec la mthode animate(). jQuery UI tend cette
mthode : vous pourrez dsormais animer la couleur des lments ! Les proprits sur lesquelles vous pouvez agir sont les
suivantes :
backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
outlineColor
La syntaxe de la mthode animate() ne change pas :

Code : JavaScript
dure, modle, function() {
});
o :
prop1, prop2, prop3 sont des proprits CSS et val1, val2, val3 les valeurs associes ;
dure est la dure de l'animation ;
modle est le modle de progression de l'animation ;
function() contient une ou plusieurs instructions qui seront excutes lorsque l'animation sera termine.
Pour illustrer l'animation de couleurs, nous allons modifier progressivement la couleur d'arrire-plan et la couleur du texte dans
une balise <div>, tout en combinant ces animations avec une modification de la largeur et de la position horizontale de la
balise.
Code : HTML
<style>
#contenu
{
border: 4px gray solid;
background-color: #aaeae1;
color: black;
width: 100px;
position: relative;
}
#contenu h3
{
margin: 0;
padding: 0.4em;
text-align: center;
background-color: #777;
}
</style>
247/266
<div id="contenu">
<h3>Cliquez ici</h3>
At vero eos et accusamus et iusto odio dignissimos ducimus qui
blanditiis praesentium voluptatum deleniti atque corrupti quos
animi, id est laborum et dolorum fuga.
</div>
<script
<script>
$(function() {
$('#contenu').toggle(
function() {
$( '#contenu').animate({
backgroundColor: '#fff',
color: 'red',
left: '+=200',
width: 500
}, 1000 );
},
function() {
$('#contenu').animate({
backgroundColor: '#aaeae1',
color: 'black',
left: '-=200',
width: 100
}, 1000 );
}
);
});
</script>
Essayer
Le code CSS dfinit les caractristiques de la balise <div> et du titre <h3> qui y est inclus. La proprit position est
initialise avec la valeur relative pour permettre le dplacement de la balise.
Le code jQuery applique la mthode toggle() la balise <div id="contenu">. Lorsque l'utilisateur clique sur cette
balise, les deux fonctions dfinies dans les paramtres de la mthode toggle() sont excutes alternativement.
La premire fonction anime la couleur d'arrire-plan, la couleur des caractres, la position horizontale (+=200) et la largeur (500) de
la balise <div>. La deuxime fonction redonne la balise ses caractristiques l'ouverture de la page. Pour cela, elle anime la
couleur d'arrire-plan, la couleur des caractres, la position horizontale (-=200) et la largeur (100) de la balise <div>.
Modles de progression
Avec jQuery, vous n'avez accs qu' deux modles de progression pour vos animations : swing et linear. La bibliothque
jQuery UI propose un bien plus grand nombre de modles de progression :
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart easeInQuint
easeOutQuint
easeInOutQuint
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic easeInOutElastic easeInBack
easeOutBack
easeInOutBack
easeInOutBounce
easeInBounce
easeOutBounce
248/266
Aprs avoir fait rfrence la bibliothque jQuery UI, vous pouvez les utiliser dans toutes les mthodes d'animation : show(),
hide(), fadeIn(), fadeOut(), fadeTo(), slideUp(), slideDown() et animate(). Pour avoir une ide de l'effet
des modles de progression, rendez-vous sur la page qui y est consacre (voir figure suivante) et cliquez sur les vignettes.
Dmonstration en ligne des modles de progression de jQuery UI

Voici un court exemple qui vous montre comment appliquer les modles de progression de jQuery UI sur une image :
Code : HTML
<button id="easeOutElastic">Effet easeOutElastic</button>
<button id="easeInOutBack">Effet easeInOutBack</button><br />
<img src="balle.png" style="position: relative;">
<script
<script>
$(function() {
$('#easeOutElastic').click( function() {
$('img').css('left','0px');
$('img').animate({ left: '+=200'}, 3000, 'easeOutElastic' );
});
$('#easeInOutBack').click( function() {
249/266
$('img').css('left','0px');
$('img').animate({ left: '+=200'}, 3000, 'easeInOutBack' );
});
});
</script>
Essayer
Lorsque le premier bouton est cliqu, l'image est dplace vers la droite de 200 pixels en utilisant un modle de progression
easeOutElastic. Le deuxime bouton fait de mme, mais en utilisant le modle de progression easeInOutBack.
jQuery UI est le complment idal de jQuery. Les trs nombreuses mthodes proposes dans cette bibliothque vous
permettront d'amliorer l'aspect et les possibilits de vos pages.
Pour accder la totalit des mthodes contenues dans la bibliothque jQuery UI, il suffit d'ajouter une balise
<script> pour y faire rfrence.
Pour amliorer le rendu, la mise en forme des lments manipuls par jQuery UI peut s'appuyer sur des thmes CSS
accessibles sur un CDN.
Les mthodes show(), hide() et toggle() de la bibliothque jQuery UI donnent accs de nombreux effets
supplmentaires.
jQuery UI propose un trs grand nombre de modles de progression, utilisables dans toutes les mthodes d'animation :
show(), hide(), fadeIn(), fadeOut(), fadeTo(), slideUp(), slideDown() et animate().
Avec jQuery UI, la mthode animate() de jQuery est tendue. Elle peut tre utilise pour animer la couleur des
lments suivants : backgroundColor, borderBottomColor, borderLeftColor, borderRightColor,
borderTopColor, color et outlineColor.
250/266
Crer un plugin
Vous en savez maintenant bien assez pour apporter votre pierre l'difice jQuery en crant vos propres plugins. Surtout, ne
sautez pas ce chapitre en vous disant que l'criture de plugins n'est pas faite pour vous car cela doit tre horriblement compliqu.
Vous allez bientt tre convaincus du contraire !
Le squelette d'un plugin

jQuery a t bien pens dans les moindres dtails. Y compris en ce qui concerne la cration de plugins. Si vous vous lancez dans
l'aventure, tout ce que vous avez savoir, c'est que les objets jQuery reposent tous sur le prototype jQuery.fn. En d'autres
termes, si vous ajoutez une nouvelle fonction JavaScript l'objet jQuery.fn, elle devient une mthode jQuery ! Par exemple, le
code suivant dfinit la mthode gis() :
Code : JavaScript
jQuery.fn.gis = function(param1, param2, param3, )
{
// Une ou plusieurs instructions JavaScript
}
Si vous sauvegardez ce code dans un fichier d'extension .js et que vous y faites rfrence dans une page Web l'aide d'une
balise <script>, vous pouvez directement l'utiliser en faisant quelque chose comme ceci :
Code : JavaScript
$('p').gis(5, 'abc', 10);
Cette instruction applique la mthode gis() toutes les balises <p> du document en lui transmettant les trois paramtres
spcifis entre les parenthses. Bravo, vous venez de crer votre premier plugin jQuery !
C'est tout ? Les autres plugins sont-ils vraiment construits sur ce modle ?
Eh bien oui ! quelques petits dtails prs qui vont tre abords dans la suite.
Conflits entre plusieurs bibliothques JavaScript

De nombreuses bibliothques JavaScript utilisent le signe $ pour faire rfrence une variable ou une fonction qui leur est
propre. Lorsqu'une page Web utilise une bibliothque de ce type ainsi que jQuery, il se produit un conflit qui peut entraner des
dysfonctionnements de l'une ou l'autre des bibliothques.
Heureusement, il est possible de demander jQuery de ne pas utiliser l'alias $ la place du mot jQuery . Pour cela, on
utilise la mthode noConflict() :
Code : JavaScript
jQuery.noConflict();
Une fois cette instruction excute, il est possible d'utiliser le signe $ en accord avec l'autre bibliothque. Voici un exemple de
code :
Code : HTML
<script src="uneBibliothequeJavaScript.js"></script>
251/266
<script>
$.noConflict();
// Ici, vous pouvez insrer une ou plusieurs instructions
// Qui utilisent le signe $ en accord avec les spcifications
// De la bibliothque uneBibliothequeJavaScript.js
</script>
En utilisant une instruction $.noConflict() dans vos plugins, vous les rendez utilisables avec d'autres bibliothques
JavaScript. C'est donc une bonne pratique mettre en uvre systmatiquement dans vos plugins.
Est-ce que cela veut dire qu'aprs avoir excut l'instruction $.noConflict() dans un plugin je ne pourrai plus
utiliser d'instructions jQuery ?
Bien sr que non ! Cela signifie simplement qu'au lieu d'utiliser le signe $ vous utiliserez le mot jQuery . Cette situation est
parfaitement tolrable si vous dveloppez de petits plugins qui ne dpassent pas une centaine de lignes de code. Mais elle
devient vite insupportable au-del.
Continuer utiliser l'alias $ dans un plugin jQuery

Tous les programmeurs jQuery sont habitus utiliser l'alias $ la place de jQuery , et vous allez voir que cela est
toujours possible, mme aprs l'instruction jQuery.noConflict(). Ce tour de force rside dans l'utilisation d'une fonction
anonyme (c'est--dire sans nom) :
Code : JavaScript
(function($) {
// Entrez ici le code de votre plugin jQuery
})(jQuery);
Prenez quelques instants pour examiner cette fonction. La syntaxe utilise est quelque peu inhabituelle, je vous l'accorde. Mais
en y regardant d'un peu plus prs, on comprend sans peine le mcanisme : la fonction anonyme comporte un paramtre. Lors de
son appel, la valeur jQuery lui est transmise. tant donn que, dans la dfinition de la fonction, le paramtre a pour nom $ ,
toutes les instructions situes l'intrieur de la fonction remplaceront automatiquement le signe $ par jQuery . Ce qui est
exactement l'effet recherch. Il est donc possible de continuer utiliser l'alias $ dans le plugin si vous incluez son code
l'intrieur de la fonction anonyme. Dans notre cas, le code devient le suivant :
Code : JavaScript
(function($) {
$.fn.gis = function(paramtres)
{
};
})(jQuery);
Parcourir les lments issus du slecteur

Les mthodes jQuery sont appliques un slecteur. Ainsi par exemple, l'instruction suivante applique la mthode gis()
toutes les balises de classe premier :
Code : JavaScript
$('.premier').gis();
252/266
Il se peut que le document ne comporte qu'une balise de classe premier, mais il se peut aussi qu'il en comporte plusieurs. Pour
passer en revue les diffrents lments susceptibles d'tre retourns par le slecteur, vous utiliserez l'instruction each() :
Code : JavaScript
this.each(function()
{
//Les instructions du plugin
});
Le code du plugin devient le suivant :

Code : JavaScript
(function($) {
{
this.each(function() {
// Les instructions du plugin
});
};
})(jQuery);
Ne rompez pas la chane

Vous l'avez expriment maintes reprises dans ce cours : de nombreuses mthodes jQuery peuvent tre chanes. Par exemple,
ces deux instructions :
Code : JavaScript
$('.rouge').css('background','red');
$('.rouge').css('color','yellow');
sont quivalentes cette instruction :

Code : JavaScript
$('.rouge').css('background','red').css('color','yellow');
Cela vient du fait que la mthode css() retourne l'objet qui l'a appele. Cette remarque s'applique galement la plupart des
autres mthodes jQuery. Lorsque vous crivez un plugin, vous devez respecter cette pratique en retournant l'objet sur lequel a
t applique votre mthode. Ceci est extrmement simple, puisqu'une instruction suffit :
Code : JavaScript
return this ;
Voici donc (enfin !) le squelette de vos futurs plugins jQuery :
253/266
Code : JavaScript
(function($) {
{
// Les instructions du plugin
});
Return this;
};
})(jQuery);
Un premier plugin
Maintenant, vous savez comment sont construits les plugins jQuery. Il est temps de passer la pratique en crivant votre
premier plugin. Pour commencer en douceur, je vous propose de crer un plugin qui affecte les attributs gras, italique et soulign
au contenu des balises sur lesquelles il est appliqu. C'est le fameux plugin gis dont je vous parle depuis le dbut du
chapitre.
Ce plugin est trs simple : il ne demande aucun paramtre et se contente d'appliquer trois proprits CSS au contenu des balises
concernes. Voici le code utilis :
Code : JavaScript
(function($) {
$.fn.gis = function()
{
$(this).wrap('<b><i><u></u></i></b>');
});
return this;
};
})(jQuery);
En appliquant la mthode wrap('<b><i><u></u></i></b>') aux lments slectionns, leur contenu se verra entour
des balises <b>, <i> et<u>. Le texte apparatra donc en gras, italique et soulign.
Sauvegardez ce code dans le fichier gis.js. Nous allons maintenant utiliser ce plugin dans une page HTML.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Utilisation du plugin gis</title>
</head>
<body>
<p class="grasItaliqueSouligne">Ce texte devrait
gras, italique, soulign aprs avoir cliqu sur le
<p>Ce texte devrait rester inchang</p>
<p class="grasItaliqueSouligne">Ce texte devrait
gras, italique, soulign aprs avoir cliqu sur le
<p>Ce texte devrait rester inchang</p><br />
<button id="action">Cliquez ici pour utiliser le
gis</button>
apparatre en
bouton</p>
apparatre en
bouton</p>
plugin
<script src="gis.js"></script>
<script>
$(function() {
$('#action').click(function(){
$('.grasItaliqueSouligne').gis();
254/266
});
});
</script>
</body>
</html>
Le corps du document contient quatre paragraphes (deux de classe grasItaliqueSouligne et deux sans classe) et un
bouton de commande d'identifiant #action. Remarquez l'appel au plugin gis (situ dans le mme dossier que la page en
cours d'excution).
Lorsque le bouton est cliqu, la mthode gis() est applique aux lments de classe grasItaliqueSouligne, c'est--dire
aux premier et troisime paragraphes :
Code : JavaScript
$('.grasItaliqueSouligne').gis();
});
Je dois bien l'avouer, ce plugin n'est pas trs intressant. Que diriez-vous de quelque chose de plus pouss ?
Un plugin plus ambitieux

Si vous tes prts aller plus loin, je vous propose de dvelopper un plugin qui effectue un rebond multiple amorti sur un
lment (un peu comme une bille qu'on laisse tomber sur le sol). Mais avant de commencer entrer dans les dtails du code
jQuery, un petit dtour mathmatique s'impose, moins que vous n'ayez une ide prcise de ce qu'est un sinus cardinal
Sous ce nom barbare se cache une fonction mathmatique bien sympathique dont la reprsentation produira l'effet de rebond
recherch : y = abs(sin(x))/x, o x reprsente la position sur un axe horizontal et y la position sur un axe vertical. La
figure suivante vous montre quoi ressemble cette courbe.
Reprsentation graphique de la fonction y = abs(sin(x))/x

Maintenant, vous savez ce qu'est un sinus cardinal. Nous pouvons donc clore cet apart et retourner la programmation jQuery.
Pour corser (un peu, si peu !) le code, nous allons utiliser deux paramtres dans le plugin : l'amplitude du dplacement horizontal
et l'amplitude du dplacement vertical. Nous allons appeler ce plugin rebond , dont voici le code :
Code : JavaScript
255/266
(function($) {
$.fn.rebond = function(amplX, amplY)
{
var x, y, affX, affY, initX, initY;
initX = parseInt($(this).css('left'));
initY = parseInt($(this).css('top'));
for (x = (Math.PI)/2; x < (4*Math.PI); x = x+.2)
{
y = (Math.abs(Math.sin(x)))/x;
affX = initX + x * amplX;
affY = initY - y * amplY;
$(this).animate({left: affX, top: affY},10);
}
});
return this;
};
})(jQuery);
C'est un peu effrayant, mais je vais vous expliquer comment il fonctionne.

Remarquez l'utilisation des paramtres amplX et amplY dans la dfinition de la fonction :
Code : JavaScript
$.fn.rebond = function(amplX, amplY)
Dans le code jQuery, l'accs aux valeurs passes au plugin se fera donc via les variables amplX et amplY.
La premire instruction qui suit la boucle this.each() dfinit les variables qui seront utilises dans le plugin :
Code : JavaScript
var x, y, affX, affY, initX, initY;
Dans cette instruction :

x et y sont les coordonnes calcules par la formule du sinus cardinal ;
affX et affY sont les coordonnes d'affichage de l'lment en cours de traitement ;
initX et initY sont les coordonnes de dpart de l'lment en cours de traitement.
Les coordonnes de dpart sont obtenues en passant les valeurs left et top la mthode css(), et en appliquant cette
mthode l'lment en cours de traitement. Remarquez l'utilisation de la fonction JavaScript parseInt() pour convertir la
valeur de la chane retourne par la mthode css() en une valeur numrique entire :
Code : JavaScript
initX = parseInt($(this).css('left'));
initY = parseInt($(this).css('top'));
La boucle for qui suit fait le gros du traitement. Elle fait varier l'abscisse entre
et
d'exprimenter d'autres valeurs pour obtenir un rebond un peu diffrent) :

Code : JavaScript
par pas de 0,2 (rien ne vous empche
256/266
L'ordonne est obtenue en appliquant le sinus cardinal la valeur courante de la variable x :

Code : JavaScript
Les coordonnes d'affichage sont obtenues en ajoutant les coordonnes de dpart (initX et initY) aux coordonnes
calcules (x et y) pondres par les paramtres fournis au plugin (amplX et amplY) :
Code : JavaScript
affX = initX + x * amplX;
affY = initY - y * amplY;
L'lment en cours de traitement est alors dplac avec la mthode animate(). Les proprits left et top sont modifies
pour atteindre (respectivement) les coordonnes affX et affY. La dure du dplacement est fixe 10 millisecondes. Ici
encore, rien ne vous empche d'exprimenter d'autres dures de dplacement :
Code : JavaScript
$(this).animate({left: affX, top: affY},10);
Voyons maintenant comment se servir de ce plugin :

Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Utilisation du plugin rebond</title>
img { position: absolute; }
#balle { top: 100px; left: 100px; }
</style>
</head>
<body>
<img src="balle.png" id="balle">
<button id="action">Cliquez ici pour utiliser le plugin
rebond</button>
<script src="rebond.js"></script>
<script>
$(function() {
$('img').rebond(10, 100);
});
});
</script>
</body>
257/266
</html>
Essayer
Ce document contient une image d'identifiant #bon et un bouton d'identifiant #action. Quelques instructions CSS
positionnent l'image de faon absolue, aux coordonnes (100, 100). Lorsque le bouton #action est cliqu, le plugin rebond
est appel en lui transmettant les paramtres 10 et 100 :
Code : JavaScript
$('img').rebond(10, 100);
});
Le reste se fait tout seul, c'est le plugin qui le prend en charge.

Si vous voulez un rebond vertical et non horizontal, utilisez cette instruction : $('img').rebond(0, 100);.
Vous en savez maintenant assez pour crer des plugins qui faciliteront vos dveloppements et, pourquoi pas, ceux de la
communaut des programmeurs jQuery. Si vous voulez mettre vos crations la disposition des autres dveloppeurs jQuery,
soignez particulirement la documentation. Montrez comment utiliser votre plugin, indiquez comment fonctionnent ses
paramtres et donnez plusieurs exemples d'appel.
crire un plugin pour jQuery n'est pas bien difficile : il suffit d'utiliser le bon squelette et d'y insrer les instructions
jQuery et JavaScript qui raliseront les actions souhaites.
La fonction anonyme vous permet de continuer utiliser l'alias $ de jQuery dans le code du plugin. Y compris si la
page qui appelle le plugin fait rfrence une autre bibliothque JavaScript qui utilise le signe $ en interne.
La mthode this.each() permet de parcourir un un les lments sur lesquels doit tre appliqu le plugin.
L'instruction return this; assure la continuit de la chane jQuery. Avec elle, votre plugin pourra tre chan une
mthode jQuery ou un autre plugin.
258/266
Partie 6 : Annexe
Dboguer le code jQuery

Lorsqu'une page Web ne contient que quelques instructions jQuery, la phase de dbogage est gnralement rduite sa plus
simple expression : vous affichez la page et vous constatez que tout fonctionne. Si vous crivez des programmes plus
volumineux, contenant plusieurs centaines d'instructions jQuery, il en va parfois tout autrement. Ce chapitre va vous montrer
plusieurs techniques et outils pour dbusquer les bogues qui pourraient s'tre glisss dans votre code.
Dboguer avec la fonction alert()

tout moment, vous pouvez utiliser la fonction JavaScript alert() pour afficher une bote de message dans laquelle
apparatra la valeur d'une variable JavaScript. C'est la technique la plus simple pour tester ponctuellement la valeur d'une
variable. Par exemple, l'instruction suivante permet de connatre la valeur des variables x et y :
Code : JavaScript
alert('x = ' + x + ', y = ' + y);
ce qui pourrait donner la figure suivante.
La valeur des variables x et y est affiche dans une bote
de message
Si votre code n'atteint jamais une instruction donne, vous pouvez utiliser la fonction alert() pour savoir quelle est la
dernire instruction excute :
Code : JavaScript
alert('pass ici : 01');
etc.
En dplaant ces instructions dans votre code, vous pouvez assez rapidement savoir quelle instruction est fautive.
Try et catch
Lorsque vous mettez au point un code particulirement sensible , c'est--dire que vous souponnez d'tre l'origine de
bogues, vous pouvez le placer dans une structure try catch :
Code : JavaScript
try
{
// Instructions sensibles
Partie 6 : Annexe
259/266
}
catch(err)
{
// Gestion des erreurs
}
Un petit exemple va vous montrer comment utiliser ces instructions. Dans le code suivant, la fonction alort() ne fait pas
partie du langage JavaScript et n'est pas une mthode jQuery. tant donn que l'instruction mise en cause a t place sous la
surveillance d'un try, les instructions qui suivent le mot catch vont tre excutes.
Code : JavaScript
var message='';
try
{
alort('un message');
}
catch(err)
{
message='Une erreur s\'est produite.\n\n';
message+='Description : ' + err.message + '\n\n';
message+='Cliquez sur OK pour poursuivre.';
alert(message)
}
Dans cet exemple, comme le montre la figure suivante, une bote de message affiche la proprit err.message, indiquant ainsi
quelle est la cause de l'erreur.
Le mot-cl alort n'existe pas
Capturer toutes les erreurs

Partie 6 : Annexe
260/266
En tendant cette technique, il est possible d'afficher une bote de message pour chacune des erreurs qui pourraient se produire
dans le code. Voici les instructions utiliser :
Code : JavaScript
function gestionErreurs(err)
{
alert('Erreur : \n' + err);
return true;
}
window.onerror = gestionErreurs;
Lorsqu'une erreur se produit dans le code JavaScript/jQuery, la fonction gestionErreurs() est excute. Une bote de
message dcrivant l'erreur est alors affiche.
Dboguer avec Firebug

Firebug est un outil incontournable que tous les dveloppeurs jQuery devraient avoir sous la main. Comme son nom le laisse
supposer, il a t dvelopp pour le navigateur Firefox. Voici quelques-unes de ses possibilits :
Inspection et dition du code HTML et CSS ;
Surveillance de l'activit du rseau, afin de dterminer quel bloc de code pnalise le temps de chargement d'une page ;
Dbogage du code JavaScript/jQuery.
C'est videmment cette troisime possibilit qui vous intressera avant tout. Lisez vite la suite et vous saurez comment procder.
Il est videmment indispensable d'avoir install Firefox.
Tlcharger et installer Firebug

Enfoncez puis relchez la touche Alt du clavier pour afficher le systme de menus de Firefox s'il n'est pas dj affich. Cliquez sur
Outils, pointez Dveloppeur Web et cliquez sur Obtenir d'autres outils. La page des modules pour Firefox est
affiche, comme la figure suivante.
Partie 6 : Annexe
261/266
Le
module Firebug apparat en premire position

En face de Firebug, cliquez sur Ajouter Firefox. Quelques instants plus tard, une bote de dialogue demande de
confirmer que vous voulez bien installer Firebug. Cliquez sur Installer maintenant. Une fois le module Firebug install,
une nouvelle icne apparat dans l'angle suprieur droit de la fentre de Firefox, comme la figure suivante.
Partie 6 : Annexe
262/266
Cette icne (et le menu associ) donne accs Firebug et
ses commandes principales
Utiliser la console
La fonction JavaScript alert() est certes trs pratique, mais elle a l'inconvnient d'afficher une bote de message que
l'utilisateur doit refermer pour poursuivre l'excution du code. En utilisant la console de Firefox, accessible via l'onglet Console
de Firebug, vous allez pouvoir afficher des donnes comme avec la fonction alert(), mais sans interrompre l'excution du
code. Pour cela, vous utiliserez la fonction JavaScript log().
Dans l'exemple suivant, la fonction log() est utilise pour connatre les diffrentes valeurs calcules dans la variable y :
Code : JavaScript
{
window.console.log('y = ' + y);
En slectionnant l'onglet Console dans le module Firebug, on obtient les informations recherches, comme le montre la figure
suivante.
Partie 6 : Annexe
263/266
Les
diffrentes valeurs ont t affiches dans la console
Dfinir un point d'arrt

Ouvrez la page Web que vous voulez dboguer dans Firefox, puis cliquez sur l'icne de Firebug. Un nouveau volet est affich
dans la partie infrieure de la fentre. C'est dans ce volet que vous dboguerez votre code.
Slectionnez l'onglet Script. Si un message vous indique que le panneau Script est dsactiv, cliquez sur la flche droite
de l'icne Firebug et slectionnez Activer tous les panneaux dans le menu. Le code JavaScript apparat dans la partie
gauche du volet de Firebug. Cliquez sur un numro de ligne pour dfinir un point d'arrt. L'excution se poursuit jusqu' cette
ligne, puis le programme se met en pause. Plusieurs informations apparaissent dans la partie droite du volet de Firebug.
Diffrentes informations s'affichent, vous maintenant de voir si tout est correct.
Valeur des variables et proprits non listes

Lorsque vous avez atteint un point d'arrt, vous pouvez pointer une variable ou une proprit dans le code pour connatre sa
valeur.
Supposons que vous ayez dfini un point d'arrt sur l'instruction qui suit la mthode keydown(), comme dans la figure
suivante. Pour savoir quel est le code ASCII de la touche enfonce par l'utilisateur, il suffit de pointer la proprit e.which.
Partie 6 : Annexe
264/266
Pour
connatre la valeur d'une variable ou d'une proprit, pointez-la dans le code
Point d'arrt conditionnel

Lorsqu'un point d'arrt est plac dans une boucle, l'excution du programme est suspendue chaque itration de la boucle. Ce
comportement est parfois souhaitable, et parfois non. Par exemple, si vous voulez suspendre l'excution lorsqu'une condition
particulire se produit, le plus simple consiste dfinir un point d'arrt conditionnel. Pour cela, cliquez du bouton droit sur le
numro de ligne o l'excution doit tre suspendue et entrez la condition suspensive.
la figure suivante, l'excution sera suspendue si la variable posX a une valeur infrieure 100.
Partie 6 : Annexe
265/266
Dfinition d'un point d'arrt conditionnel
Quelques raccourcis clavier connatre

Pour bien utiliser le dbogage de code JavaScript/jQuery dans Firebug, regardez le tableau suivant qui indique quelques
raccourcis clavier.
Raccourci
Fonction
F8
Continuer
Maj + F8
Excuter nouveau jusqu'au point d'arrt
F10
Pas pas
F11
Pas pas approfondi
Ctrl + L
Aller la ligne spcifie
Ces raccourcis ne fonctionnent que sous l'onglet Script de Firebug.
Pour avoir un aperu global de tous les raccourcis clavier utilisables dans Firebug, consultez la page qui y est consacre.
Ce cours est maintenant termin. J'espre qu'il vous a plu. Dsormais, c'est vous de faire le reste en dveloppant vos projets. Si
vous rencontrez un problme, n'hsitez pas aller sur le forum JavaScript du Site du Zro pour poser vos questions.

Jquery

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Jquery

Transféré par

Droits d'auteur :

Formats disponibles

Simplifiez vos

Licence Creative Commons 6 2.0

Avant de commencer ........................................................................................................................................................ 6

Premiers pas ................................................................................................................................................................... 14

Partie 2 : Les bases de jQuery .......................................................................................................... 22

Plus loin dans la slection d'lments ............................................................................................................................ 26

Modifier le contenu d'un lment .................................................................................................................................... 38

Insrer et remplacer des lments dans le DOM ........................................................................................................... 60

TP : Questionnaire interactif en jQuery ........................................................................................................................... 79

Partie 3 : Aller plus loin avec jQuery ................................................................................................. 89

Plus loin dans la gestion vnementielle ...................................................................................................................... 106

Animations et effets ....................................................................................................................................................... 120

Files d'attente et timer ................................................................................................................................................... 128

Textes et images ........................................................................................................................................................... 141

Formulaires et tableaux ................................................................................................................................................. 151

TP : Mise en forme d'une page Web ............................................................................................................................. 161

Un jeu en jQuery ........................................................................................................................................................... 174

Le document de base .............................................................................................................................................................................................. 175

TP : Un jeu de collecte spatiale ..................................................................................................................................... 186

Partie 4 : jQuery et AJAX ................................................................................................................ 198

Plus loin avec AJAX ....................................................................................................................................................... 211

TP : Un chat en jQuery .................................................................................................................................................. 221

Partie 5 : Les plugins jQuery ........................................................................................................... 225

jQuery UI ....................................................................................................................................................................... 236

Crer un plugin .............................................................................................................................................................. 250

Partie 6 : Annexe ............................................................................................................................. 258

Simplifiez vos dveloppements JavaScript avec jQuery

Simplifiez vos dveloppements JavaScript avec jQuery

Partie 1 : Introduction jQuery

Historique du Web : de HTML jQuery

Fonctionnement entre un serveur

Partie 1 : Introduction jQuery

Qu'est-ce que jQuery ?

Partie 1 : Introduction jQuery

Le logo de jQuery avec son slogan

Ce qui rend jQuery si puissant et universel

Partie 1 : Introduction jQuery

Un code JavaScript classique

doit s'adapter chaque navigateur

Partie 1 : Introduction jQuery

Bienvenue dans le monde merveilleux de jQuery !

Examinons ces deux solutions.

Tlchargement de jQuery sur votre ordinateur

Partie 1 : Introduction jQuery

Tlchargement de jQuery sur le

Internet Explorer envoie une

alerte lors du tlchargement

Partie 1 : Introduction jQuery

gauche le code avec espaces, tabulations et commentaires, droite sans

Partie 1 : Introduction jQuery

Le fichier est dplac dans le dossier de dveloppement

Faire rfrence jQuery en ligne

Version non minimise

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js http://ajax.googleapis.com/ajax/libs/j [...] jquery.min.js

Partie 1 : Introduction jQuery

Partie 1 : Introduction jQuery

Partie 1 : Introduction jQuery

Toutes les balises <h2>

Toutes les balises de classe rouge

La balise d'identifiant grand

La premire lettre d'un lment

Toutes les balises

Partie 1 : Introduction jQuery

Le squelette HTML typique