Web Dyna J Query

Un site web
dynamique avec
jQuery !
Par Nassoub
et Sainior
www.siteduzero.com
Licence Creative Commons BY-NC-SA 2.0

Dernire mise jour le 22/05/2012
Sommaire
1/60
Sommaire
Sommaire ........................................................................................................................................... 1
Lire aussi ............................................................................................................................................ 1
Un site web dynamique avec jQuery ! ................................................................................................ 3
Partie 1 : Introduction jQuery ........................................................................................................... 5
jQuery : l'histoire d'un framework ! .................................................................................................................................... 5
Mais... c'est quoi jQuery ? ...........................................................................................................................................................................................
jQuery, un framework JavaScript ................................................................................................................................................................................
JavaScript ou... jQuery ? .............................................................................................................................................................................................
jQuery, un framework ou une librairie ? .......................................................................................................................................................................
A quoi va nous servir jQuery ? ....................................................................................................................................................................................
Les points forts de jQuery ...........................................................................................................................................................................................
L'histoire du framework ...............................................................................................................................................................................................
Des sites qui utilisent jQuery .......................................................................................................................................................................................
5
5
5
6
7
7
8
9
De quels outils a-t-on besoin ? .......................................................................................................................................... 9

Le choix du navigateur web ....................................................................................................................................................................................... 10
Un incontournable : Firebug pour Firefox ! ................................................................................................................................................................ 11
Ajoutez Firebug votre navigateur Firefox ! .............................................................................................................................................................. 11
Utiliser la bote outils Firebug ! ............................................................................................................................................................................... 11
Un diteur de texte efficace ....................................................................................................................................................................................... 13
Un diteur de texte performant et efficace ................................................................................................................................................................ 13
Rappels gnraux sur JavaScript ................................................................................................................................... 15

O et quand utiliser JavaScript ? ..............................................................................................................................................................................
O placer son code JavaScript ? ..............................................................................................................................................................................
Quand et comment l'utiliser ? ....................................................................................................................................................................................
Variables et fonctions ................................................................................................................................................................................................
De la dclaration des variables .................................................................................................................................................................................
Fonctions et arguments .............................................................................................................................................................................................
16
16
16
17
17
17
Partie 2 : Les bases du framework ! .................................................................................................. 18

Vos premiers pas avec jQuery ! ...................................................................................................................................... 19
Inclure jQuery dans vos pages ..................................................................................................................................................................................
Deux mthodes pour inclure jQuery dans vos pages web ........................................................................................................................................
La fonction de base : jQuery() ...................................................................................................................................................................................
Une fonction gnrique : jQuery() ou $() ...................................................................................................................................................................
viter le conflit ...........................................................................................................................................................................................................
Le principe de fonctionnement ..................................................................................................................................................................................
19
19
21
21
24
24
Les slecteurs ................................................................................................................................................................. 26

Les slecteurs de CSS ..............................................................................................................................................................................................
Les slecteurs les plus utiliss ..................................................................................................................................................................................
Frres et parents .......................................................................................................................................................................................................
Une slection plus pousse ......................................................................................................................................................................................
La place d'un lment ...............................................................................................................................................................................................
Slection par attributs ...............................................................................................................................................................................................
Le slecteur :not() .....................................................................................................................................................................................................
Le cas des formulaires ..............................................................................................................................................................................................
Le type des lments ................................................................................................................................................................................................
Le slecteur $(this) ....................................................................................................................................................................................................
26
26
26
27
27
28
28
29
29
30
jQuery et les vnements ............................................................................................................................................... 30

Un vnement, des vnements... ...........................................................................................................................................................................
C'est quoi un vnement ? ........................................................................................................................................................................................
Quelques vnements incontournables ....................................................................................................................................................................
Dclenchement d'vnements ..................................................................................................................................................................................
Le dclenchement virtuel ..........................................................................................................................................................................................
Annuler le comportement d'un lment par dfaut ...................................................................................................................................................
Les gestionnaires d'vnements ...............................................................................................................................................................................
Rappels .....................................................................................................................................................................................................................
L'coute en jQuery ....................................................................................................................................................................................................
La dlgation d'vnements .....................................................................................................................................................................................
Les espaces de noms ...............................................................................................................................................................................................
La suppression en jQuery .........................................................................................................................................................................................
31
31
32
32
33
33
34
34
34
35
36
36
Manipuler le code CSS avec jQuery ............................................................................................................................... 37

Une mthode puissante : css() .................................................................................................................................................................................
Rcuprer la valeur d'une proprit ..........................................................................................................................................................................
Dfinition de proprits CSS .....................................................................................................................................................................................
Positionner des lments ..........................................................................................................................................................................................
Modifier la position d'un lment ...............................................................................................................................................................................
Grer les dimensions ................................................................................................................................................................................................
38
38
38
39
39
39
TP : le formulaire interactif .............................................................................................................................................. 41

Explications et pr-requis ..........................................................................................................................................................................................
Objectif concret .........................................................................................................................................................................................................
Mthodes requises ....................................................................................................................................................................................................
Correction ..................................................................................................................................................................................................................
Explications du code jQuery ......................................................................................................................................................................................
Amliorations ............................................................................................................................................................................................................
www.siteduzero.com
41
41
41
42
43
46
Sommaire
2/60
Partie 3 : Manipulation du DOM et animations .................................................................................. 47

Des effets sur votre site avec jQuery ! ............................................................................................................................ 47
Animez vos lments ................................................................................................................................................................................................ 47
Des animations personnalises ................................................................................................................................................................................ 47
Deux arguments supplmentaires : step et queue .................................................................................................................................................... 48
Dfinition directe d'attributs ....................................................................................................................................................................................... 49
Astuces et cas spciaux ............................................................................................................................................................................................ 50
Les effets natifs ......................................................................................................................................................................................................... 51
Le retour des trois tats ............................................................................................................................................................................................. 51
Des mthodes plus esthtiques ................................................................................................................................................................................ 52
Dclencheur d'vnement ......................................................................................................................................................................................... 53
Reprenez le contrle des effets ................................................................................................................................................................................. 53
Le concept de file d'attente ....................................................................................................................................................................................... 53
Arrter les animations ............................................................................................................................................................................................... 55
Manier les attributs .......................................................................................................................................................... 56

Gestion gnrale des attributs .................................................................................................................................................................................. 57
Bref rappel sur les attributs ....................................................................................................................................................................................... 57
Rcuprer des valeurs .............................................................................................................................................................................................. 57
(Re)dfinir un attribut ................................................................................................................................................................................................. 57
Grer les classes proprement ................................................................................................................................................................................... 58
Ajouter une classe ..................................................................................................................................................................................................... 58
Supprimer une classe ............................................................................................................................................................................................... 59
Prsence d'une classe .............................................................................................................................................................................................. 59
Switcher une classe .................................................................................................................................................................................................. 59
www.siteduzero.com
Un site web dynamique avec jQuery !
3/60
Par
Nassoub et
Sainior
Mise jour : 21/05/2012

Difficult : Facile
Dure d'tude : 1 mois
5 201 visites depuis 7 jours, class 38/784
Bien le bonjour vous !
JavaScript est un langage devenu incontournable en l'espace de quelques annes, principalement dans le paysage du web. Et
pour cause ! C'est une technologie complte, qui regroupe un nombre impressionnant d'outils permettant de dynamiser vos
pages web et de leur donner une toute autre dimension. Comme toutes les grandes technologies, JavaScript a une grande
communaut. Et comme toutes les grandes communauts, celle de JavaScript a vite ressenti le besoin d'amliorer les
possibilits du langage, notamment par des frameworks. jQuery est l'un d'eux .
jQuery, crivez moins, faites plus.

La devise de jQuery rsume elle seule l'impact que cet outil que vous apprendrez aujourd'hui, aura sur votre manire de coder
de demain. Vous crirez moins de code JavaScript, mais pour toujours en faire plus. C'est ce besoin que jQuery cherche
rpondre depuis 2006, et vous constaterez au cours de ce tutoriel que force est d'admettre qu'il y parvient formidablement bien.
jQuery est le framework JavaScript le plus utilis de tous : mme le Site du Zro en fait usage ! Complet, puissant, lgant...
beaucoup sont ses points forts, et rares sont ses points faibles. L'attrait pour cet outil est immense. Seulement voil : comment
se former cette technologie, en France, o la documentation de qualit se fait rare ? Comment aborder jQuery lorsque l'on
est dbutant ? C'est ces problmatiques que nous allons chercher rpondre ensemble par le biais de ce tutoriel. Si vous ne
savez pas ce qu'est jQuery ou ne savez pas ce qu'est un framework ou une librairie, ne fuyez pas ! Comme l'accoutume, nous
partirons de Zro.
Quelques prrequis nous semblent quand mme indispensables pour aborder ce cours dans les meilleures conditions.
Les prrequis pour suivre ce cours :
Matriser HTML. (mise niveau)
De bonnes bases en CSS. (mise niveau)
Des bases solides en JavaScript. (mise niveau)
Matriser un langage server-side comme PHP est un plus indniable. Cependant, cela ne sera ncessaire que lorsque
nous aborderons AJAX. (mise niveau PHP)
www.siteduzero.com
4/60
Les normes antrieures HTML5 et CSS3 peuvent tre utilises. Les codes donns au cours de ce tutoriel respecteront
nanmoins les dernires versions des deux standards.
www.siteduzero.com
Partie 1 : Introduction jQuery
5/60

Nous sommes heureux de voir que nous avons pu vous convaincre d'aborder avec nous l'apprentissage du framework jQuery.
Vous allez voir, vous ne le regretterez pas. Seulement... tes-vous sr de savoir ce qu'est un framework ? Ou encore mieux, tesvous sr de savoir ce qu'est jQuery ? Nous sommes sur le Site du Zro, alors partons de zro en rpondant ces premires
questions dans cette partie introductive.
Une Introduction jQuery , pas mieux pour introduire un tutoriel jQuery, pas vrai ?
Mme si vous tes aux premiers abords peu intress par l'apprentissage de jQuery, nous vous conseillons quand
mme de lire ces premiers chapitres ; ils vous donneront une vue d'ensemble de ce qui sera tudi dans ce cours. Et qui
sait ? Peut-tre que cela vous fera revoir votre avis sur la question ?
jQuery : l'histoire d'un framework !

Pour bien nous situer dans cet univers de dveloppement web, il est bon de
contextualiser un peu la chose. C'est galement le choix que nous souhaitons
faire pour ce tutoriel.
Avant de chercher aborder jQuery, commenons dj par poser les bases de la
philosophie du framework dans votre tte. Pas de code ici, juste de l'histoire et
des rponses aux questions basiques qui vous trottent dans la tte.
Vous saurez notamment la fin de ce chapire ce qu'est jQuery, qui l'utilise, quoi
sert-il... bref ! Une mise niveau gnrale pour ceux qui souhaitent apprendre
cette technologie, reste trop longtemps hors de porte des Zros.
Tchons de rpondre dans ce premier chapitre toutes ces questions. Vous
tes prts ? C'est maintenant que cela commence !
Mais... c'est quoi jQuery ?

Pour bien commencer introduire jQuery, commenons donc par le dfinir, ce sera dj une bonne chose de faite, vous ne
pensez pas ?
jQuery, un framework JavaScript

Vous le savez certainement, vos pages web sont composes de beaucoup de technologies diffrentes.
Comme si ce n'tait pas assez compliqu comme cela, ces satans informaticiens ont eu en plus la bonne ide de nous compliquer
encore plus la tche, en faisant en sorte que ces technologies puissent interagir entre elles.
Parmi ces technologies qui font le web, on retrouve les standards HTML(5) et CSS(3) mais aussi des langages plus "volus"
qui permettent de dynamiser les pages web. L'un d'eux, le plus connu et le plus utilis, est JavaScript.
Un logo de JavaScript
www.siteduzero.com
6/60
JavaScript ou... jQuery ?

JavaScript est un excellent langage, qui a su au fil des annes s'imposer comme une technologie vraiment incontournable dans le
web.
Le nombre de sites qui utilisent dsormais JavaScript est tout simplement gigantesque. La cause ? L'avnement du web 2.0, un
web communautaire o les Webmasters cherchent faire interagir toujours plus l'utilisateur avec le site. JavaScript est un
langage tout indiqu pour rpondre ce besoin, expliquant ainsi en partie son succs.
Un beau paysage pour JavaScript... seulement voil, comme on dit : on n'arrte pas le progrs.
Alors trs rapidement, ses utilisateurs ont voulu faire voluer JavaScript, le rendre toujours meilleur. On a voulu que le langage
puisse faire toujours plus de choses, toujours plus proprement et toujours plus simplement.
C'est dans cet esprit que la communaut de JavaScript a dvelopp des frameworks pour le langage, des "cadres de travail".
L'un d'eux est le plus utilis de tous, celui que l'on retrouve un peu partout sur le web. Et c'est aussi celui que l'on va tudier tout
au long de ce cours : jQuery !
jQuery, un framework JavaScript

Ci-contre, vous pouvez voir l'un des logos de jQuery o est indique sa devise : "jQuery.
Write Less, Do More". Cette devise, on peut la traduire tout btement par : "jQuery. Ecrivez
moins, faites plus".
Cela rsume vraiment ce que jQuery va vous permettre de faire. En l'utilisant dans votre code
JavaScript : vous crirez moins de code, et vous serez plus productif.
Cela parat flou, et nous vous comprenons. Vous avez encore du mal vous reprsenter ce
qu'est jQuery objectivement. Dans notre ternelle bont, nous allons vous donner une
vision plus physique de la chose : jQuery n'est en fait qu'un seul et unique fichier
JavaScript, tlchargeable sur le web et qui porte l'extension .js !
Et oui ! Ce petit fichier, c'est bien jQuery !
Euh... et c'est ce petit truc de rien du tout qui ncessite un cours entier ? Elle me parat pas franchement crdible toute
cette histoire...
Et pourtant !
jQuery n'est pas n'importe quel fichier JavaScript. C'est une norme bibliothque de fonctions JavaScript qui ont t crites et
regroupes en un seul et unique fichier pour plus de simplicit.
Vous tes intrigu par le contenu de ce fichier... et vous avez du mal croire qu'il peut lui seul tre l'objet d'autant
d'engouement. C'est normal. Cliquez plutt sur ce lien pour voir le code de jQuery dans sa version 1.7 . Plutt impressionnant
non ? Cela prend tout de suite une autre ampleur.
Ce qu'il faut vous dire, c'est que jQuery est vraiment une grosse bote outils, et pas "un petit fichier de rien du tout". Le nombre
de fonctions qui sont contenues dans ce simple fichier est vraiment grand. Et ces outils n'ont qu'un seul but : vous permettre
d'crire moins de code JavaScript, pour tre toujours plus productif et efficace dans vos dveloppements !
jQuery, un framework ou une librairie ?

Pour cette petite question de vocabulaire, nous allons vous apporter un lment de rponse. Vous avez trs certainement au
cours de vos visites sur le web entendu parler du mot librairie.
www.siteduzero.com
7/60
Le cas le plus simple : une librairie

Une librairie, en programmation, est une bibliothque de fonctions.
Elles sont composes gnralement par d'autres personnes qui les ont mises disposition de tous, pour gagner du temps dans le
dveloppement. Elles sont souvent constitues d'un ou de plusieurs fichiers qui contiennent les fonctions. Tout ce que le
programmeur a faire, c'est d'inclure la librairie dans son code. Il peut ainsi commencer utiliser les fonctions qui s'y trouvent
pour avancer dans son code.
Mais alors, jQuery c'est exactement a non ? Pourquoi est-ce que vous parlez de frameworks depuis tout l'heure ?
Il existe en fait une petite diffrence toute simple entre framework et librairie, et cette diffrence, nous nous proposons de vous
l'expliquer ds maintenant pour mieux comprendre l'impact que jQuery va avoir sur votre manire de coder.
Un cas plus complexe : un framework

Un framework, c'est quelque chose de dj plus complexe qu'une librairie. Les frameworks sont gnralement beaucoup plus
massifs que les librairies, et pour cause : ils proposent plus de choses.
En fait, lorsque l'on code avec une librairie, ce sont les fonctions qui la compose qui vont s'intgrer notre code. Avec un
framework, ce n'est pas du tout pareil.
Le framework pose les bases d'une application, et il va nous "forcer" programmer selon les codes qu'il nous impose. Ainsi, on
peut dire que c'est notre manire de coder qui s'intgre la vision du framework. Pour jQuery, c'est exactement a.
jQuery est plus qu'une simple librairie mme s'il en a les traits majeurs, il va vraiment vous faire coder en JavaScript d'une
nouvelle manire. Et ceci tel point qu'il est tout fait possible de considrer jQuery comme un langage un peu part, puisqu'il
s'agit vraiment d'une redcouverte totale de JavaScript. Lorsque vous commencerez travailler vraiment avec jQuery, vous
comprendrez rellement tout le sens de cette phrase.
Rappelez vous qu'il s'agit d'un tutoriel qui a t pens pour les dbutants, alors ne vous inquitez pas. Pour peu que
vous suiviez les chapitres dans l'ordre il vous faudra peu de temps pour assimiler les bases du framework.
Vous voulez un peu savoir ce que ce framework a dans le ventre ? Trs bien ! Voyons maintenant quoi peut (et va !) nous servir
jQuery concrtement dans notre site web.
A quoi va nous servir jQuery ?

jQuery est un framework qui va nous simplifier la vie d'une manire gnrale, et cela va passer par plusieurs fronts.
Nous allons lister quelques petites choses qui feront que demain, cet outil que vous allez apprendre utiliser vous sera
totalement indispensable pour presque tous vos dveloppements en JavaScript.
Les points forts de jQuery

Si vous tes un habitu du JavaScript, vous savez que chaque navigateur web dispose d'un moteur JavaScript qui lui est propre.
Ce moteur, c'est lui qui va "parser" votre code JavaScript, et faire agir le navigateur en fonction de celui-ci.
Par exemple, le moteur JavaScript qui quipe les navigateurs Chrome et Safari intgr au moteur de rendu WebKit
s'appelle SquirrelFish. Il gre le JavaScript d'une manire diffrente du moteur Gecko de Firefox par exemple.
jQuery et la compatibilit
Concrtement, la compatibilit inter-navigateurs signifie qu'un code JavaScript qui fonctionne sur un
navigateur web peut ne pas fonctionner sur un autre. Et bien devinez quoi ? jQuery uniformise le
tout ! Au final, un code JavaScript respectant les normes imposes par jQuery sera compatible sur
tous les navigateurs web.
Un gain de temps et d'nergie plus quapprciable, vous permettant de vous focaliser vraiment sur le
cur de votre code, plutt que sur des questions de compatibilit entre navigateurs.
www.siteduzero.com
8/60
jQuery et l'AJAX
Dans le mme registre de compatibilit, l'AJAX avec jQuery a t grandement simplifi.
AJAX est rendu possible grce un objet de JavaScript appel XmlHttpRequest
(XHR)... seulement, instancier un objet XmlHttpRequest peut vite devenir un vritable
calvaire, car d'un navigateur l'autre, cela ne se fait pas du tout de la mme manire.
Grce jQuery, instancier un objet XHR est trs simple.
Une seule fonction instancie l'objet, et elle couvre tous les navigateurs, en plus de
vous fournir des outils pour grer au mieux votre requte ! AJAX devient donc
tonnamment facile et rapide utiliser.
jQuery et les animations

L'un des lments incontournables de jQuery et qui a fait son succs est incontestablement la
possibilit de crer des effets sur sa page. Envie de faire disparatre un bloc avec un effet de
fondu, ou bien faire trembler un bouton submit sur votre page web ? Pas de problme ! jQuery le
fait pour vous.
Vous verrez que la masse de fonctions que jQuery vous proposera afin de crer des effets sur vos
pages web sera tout simplement impressionnante. Vous verrez aussi que la densit de la
documentation en tmoignera.
jQuery et les formulaires

Un des points forts de jQuery est qu'il va vous permettre d'effectuer un pr-traitement
de vos formulaires HTML ct client, de manire trs avance. Nous pourrons ainsi
relever quels type de formulaires ont mal t remplis et afficher ceci au visiteur.
Attention nanmoins : jQuery ne remplace en aucun cas un traitement ct serveur. Ce framework reste une technologie
ct client, on peut donc facilement contourner ces validations, voir mme les dsactiver.
Ainsi, ne comptez pas QUE sur jQuery pour valider vos donnes. Vous devrez galement prvoir une validation ct serveur,
avec un langage tel que PHP.
Et tout cela, c'est sans parler de toutes la panoplie d'outils disponible pour manipuler pleinement le DOM que jQuery vous offre.
Pas de doutes, jQuery est le choix pour lequel vous devez opter aujourd'hui pour donner une nouvelle dimension vos futurs
sites.
Nous ne pouvons que vous encourager vous accrocher et apprendre cette technologie. Avec ce tuto entre les mains, ce
travail d'apprentissage n'en sera que plus facile.
L'histoire du framework
Le framework jQuery est la base l'oeuvre d'un seul homme, un
www.siteduzero.com
9/60
Le framework jQuery est la base l'oeuvre d'un seul homme, un
programmeur JavaScript hors-pair qui a su, en 2006, initier le projet.
Son nom est John Resig. Depuis 2006, John Resig est rest le chef de projet
de jQuery. C'est ainsi lui qui suppervise encore aujourd'hui le
dveloppement de jQuery.
Il fut dans le pass dveloppeur pour le compte de la Mozilla Corporation,
o il travaillait en tant que dveloppeur JavaScript.
Malgr le travail colossal que Resig a su faire sur le framework jQuery, vous
imaginez bien que cet homme n'a pas pu lui seul crer un tel outil. Les
autres dveloppeurs de jQuery, ce sont les membres de sa communaut.
En effet ! John Resig a publi le framework sous licence MIT et GNU GPL :
deux licences libres. Cela signifie concrtement que tout le monde peut
travailler sur le framework et participer son amlioration. Vous verrez
notamment plus tard qu'il existe des plug-ins jQuery que vous pourrez crer
vous-mme, afin de toujours plus complter le framework... mais nous n'en sommes encore pas l.
A ce jour, jQuery en est sa version 1.7.2, et a dj subi beaucoup de mises jour. La communaut est en effet trs active, et les
mises jour sont font toujours rgulirement.
Des sites qui utilisent jQuery

jQuery est le framework JavaScript le plus utilis sur le web, et ce, pour les qualits que nous vous avons prsentes plus haut.
Voici quelques grands noms du web qui utilisent aujourd'hui jQuery de manire plus ou moins abondante, cela devrait vous aider
faire dfinitivement votre choix.
Site du Zro
Google et ses diffrents services
Mozilla
Amazon
...
Sachez galement que les CMS les plus rpandus sur le web comme Drupal et Wordpress utilisent galement jQuery !
Cette introduction jQuery et son histoire est maintenant acheve. Nous esprons que cela vous aura plus, et que vous cernez
maintenant un peu mieux ce qu'est jQuery.
Nous allons maintenant nous intresser aux outils dont on va avoir besoin pour coder correctement et efficacement avec
jQuery.
www.siteduzero.com
10/60
De quels outils a-t-on besoin ?

La prparation est probablement l'lment le plus important, quel que soit le projet que vous souhaitez mener, et ce, pas
seulement en dveloppement.
Afin de maximiser nos chances d'apprendre jQuery dans les meilleures conditions, nous allons nous aussi passer par toute une
phase de prparation. Ici, c'est vous et votre ordinateur que nous allons devoir prparer utiliser jQuery... cela passe surtout par
s'quiper de bons programmes.
Vous verrez, nous n'avons pas besoin d'tre arms jusqu'au dents pour dvelopper avec jQuery, un bon couple
navigateur/diteur suffit.
Le choix du navigateur web

jQuery tant une technologie axe web, le navigateur sera sans aucun doute le programme dont vous aurez le plus besoin ici.
Seulement, comment choisir le bon navigateur web pour travailler, quand on a toute une panoplie de produits tous plus
excellents les uns que les autres ?
Ce choix est d'autant plus difficile lorsque l'on connat les problmes de compatibilit lis l'utilisation de JavaScript dans son
code... mais ici pas de problme, puisque jQuery va nous permettre de ne plus prendre ce paramtre en ligne de compte !
Considrant cet lment, le choix du navigateur se rsumera donc seulement prendre celui avec lequel vous tes le plus l'aise.
Voici une liste vous prsentant les diffrents navigateurs web, honteusement reprise du tutoriel de rfrencement web du Site du
Zro.
Icne
Nom
Internet
Explorer
OS Tlchargement
Fourni par
dfaut avec
Windows.
Dscription
Un navigateur web sign Microsoft et intgr par dfaut toutes les versions du
systme d'exploitation Windows. Si vous tournez actuellement sous Windows,
alors vous disposez de ce navigateur.
Je ne vous recommande pas d'utiliser ce navigateur, car les versions les plus
rcentes ne sont pas disponibles pour les systmes comme Windows XP qui
sont pourtant massivement utilises encore aujourd'hui.
Il y a donc une grosse probabilit que votre version d'Internet Explorer ne soit
pas capable de reconnatre les dernires avances technologiques en matire de
standards web.
Mozilla
Firefox
Tlchargement
Un navigateur web gratuit et extrmement performant sign par la Mozilla

Foundation. Je ne saurais que vous recommander de l'utiliser sans modration.
Google
Chrome
Un autre navigateur web sign cette fois-ci par Google. Le programme est bas
sur un projet open-source baptis Chromium, mais connat quelques
Tlchargement
controverses vis vis du respect des informations personnelles de ses
utilisateurs. Il est nanmoins recommand de l'utiliser tant il est performant.
Chromium
Chromium est le projet open-source sur lequel est bas Google Chrome. Il s'agit
en fait de Google Chrome lav de tous les ajouts de Google. Vous pouvez l'utiliser
Tlchargement
si vous tes inquiet au sujet des questions du respect des informations
personnelles.
Opera
Opera est un navigateur web de trs grande qualit propos gratuitement par
Tlchargement l'entreprise Opera Software.
Il est moins utilis que les 4 prcdents mais demeure un excellent produit.
Safari
Tlchargement
Safari est le navigateur web d'Apple qui quipe tous les ordinateurs Apple par
dfaut. C'est un peu l'Internet Explorer de la pomme de ce point de vue.
Sachez que jQuery est totalement compatible avec tous ces navigateurs. Vous n'avez pas vous inquiter de ce ct-l.
www.siteduzero.com
11/60
Maintenant que nous vous avons prsent ces navigateurs majeurs que tout le monde utilise sur le web, nous pouvons quand
mme souligner qu'il y en a un qui ressort nettement plus que les autres. Ce navigateur, c'est Mozilla Firefox !
Et... pourquoi cela ?
Simplement parce que Firefox est vraiment le meilleur de tous les navigateurs lorsqu'il s'agit de dvelopper pour le web. Nous
souhaiterions vous faire dcouvrir (ou redcouvrir) un outil spcialement ddi au dveloppement web, et surtout uniquement
disponible sous Mozilla Firefox.
Cet outil, nomm Firebug vous sera vraiment d'une aide capitale dans vos futurs dveloppement web, en particulier avec
JavaScript et jQuery.
Un incontournable : Firebug pour Firefox !

Firebug est en fait une extension gratuite pour Firefox, qui est vraiment devenue incontournable pour tout dveloppeur web qui
se respecte.
Ajoutez Firebug votre navigateur Firefox !

Elle a t dveloppe par des dveloppeurs indpendants, et vous pourrez
l'ajouter directement votre navigateur Firefox sur le site officiel Mozilla
Addons.
L'installation de Firebug -et de toute autre extension- ncessite le
redmarrage du navigateur Firefox pour tre effective.
Dans une optique d'aide au dveloppement, l'extension Firebug se

caractrise en fait par toute une panoplie d'outils pour le dveloppement
web qui vont venir s'intgrer compltement Firefox dans le but de le
complter et de le rendre beaucoup utile et agrable l'utilisation. Etant
donn que c'est un ajout Firefox, vous devez tre conscient que
l'installation de ces outils rend le navigateur sensiblement plus lourd, donc
plus lent l'excution.
Utiliser la bote outils Firebug !

Pour commencer utiliser Firebug, il serait bien convenu d'arriv l'ouvrir vous ne pensez pas ?
C'est trs simple. Commencez par ouvrir une page web dans votre navigateur Firefox, optez par exemple pour la page d'accueil du
Site du Zro.
Une fois que vous y tes... faites trs attention, car la manipulation que vous allez devoir raliser pour ouvrir Firebug va tre
tellement complexe que... bon ok, j'arrte. Contentez-vous simplement d'appuyer sur F12 et a fera l'affaire.
La magie opre, et Firebug s'ouvre dans Firefox !
www.siteduzero.com
12/60
Firebug ouvert dans le navigateur Firefox !

Vous pouvez voir que Firebug dispose de 6 onglets, proposant des outils diffrents. Chaque onglet est dcoup en deux zones
ayant toutes une utilit diffrente de l'autre. Trois de ces onglets vont retenir notre attention pour le moment.
Console
C'est de loin celui qui va le plus nous intresser dans nos dveloppements avec jQuery. C'est une console JavaScript
qui vous retournera notamment les erreurs que vous pourriez commettre dans votre script jQuery ; vous permettant
ainsi de les solutionner le plus facilement possible. Autre intrt majeur de la console : elle vous permettra de taper du
code JavaScript et de le tester la vole. Vous pouvez aussi utiliser le site web jsFiddle. C'est un site "bac sable".
Idal pour vous exercer.
HTML
Pour l'onglet HTML, Firebug vous propose un outil vous permettant d'inspecter votre code HTML et de le modifier
la vole. Vous pourrez naviguer dans l'arboresence du document HTML, et la modifier trs facilement. Vous verrez
galement vos modifications s'appliquer en direct sur le rendu de la page ouverte dans le navigateur.
CSS
L'onglet CSS propose exactement la mme chose l'onglet HTML, mais apadt pour les feuilles de style. Ici, vous
pourrez modifier ou supprimer la vole n'importe quelle proprit CSS contenue dans les feuilles de style relies la
page.
Mine de rien, ces outils vont nous tre sacrment utiles pour dvelopper en jQuery. Pour la suite : sachez qu'il existe 3 autres
onglets : Script, DOM et rseau, mais que nous ne souhaitons pas dvelopper dans cette partie du cours sur jQuery. Si vous
souhaitez avoir plus d'informations sur Firebug dans son ensemble, nous pouvons vous conseiller de lire cet excellent tutoriel
sur l'extension Firebug disponible sur le Site du Zro.
www.siteduzero.com
13/60
Il est galement savoir que Google Chrome propose en natif des outils de dveloppement assez proches de Firebug,
ils s'ouvrent de la mme manire, en appuyant sur la touche F12.
Notre prfrence personnelle va quand mme Firebug, nanmoins, la qualit de ces outils est certaine, et ils pourraient
vous convenir parfaitement si vous tes un grand fan de Google Chrome/Chromium.
Un diteur de texte efficace

Le dernier lment dont vous aurez besoin pour dvelopper avec jQuery... ce sera bien sr un diteur de texte.
Un diteur de texte performant et efficace

Nous ne pouvons pas opter pour n'importe quel diteur de texte pour dvelopper avec jQuery, et c'est d'ailleurs vrai pour
n'importe quel langage. Ce qu'il nous faut, c'est un diteur suffisament perfectionn pour grer la coloration syntaxique. Ils sont
nombreux, mais tout cela pour dire qu'il ne faut pas se laisser aller et utiliser le Bloc Note fourni par dfaut avec Windows.
Nous allons vous conseiller l-encore quelques exemples de programmes utiliser, sachez qu'ils ne sont pas les mmes en
fonction du systme d'exploitation que vous utilisez.
Sous Windows
Le code du framework jQuery ouvert sous Notepad++

Sous Windows, on peut trouver des diteurs vraiment trs performants. Nous utilisons respectivement les diteurs Notepad++,
qui a le mrite d'tre gratuit, et l'diteur Sublime Text 2. Pour ce dernier, sachez que le programme n'est pas gratuit et qu'il faudra
songer l'enregistrer au bout d'une certaine priode.
Ces deux diteurs sont vraiment de qualit. Sachez que Sublime Text 2 vous donne en plus de cela la possibilit de naviguer dans
votre arborescence, un peu la manire d'un IDE.
Un autre programme existe pareil ailleurs : ConTEXT. Pour l'avoir essay, il est lui aussi de trs bonne qualit en plus d'tre
gratuit.
Des environnements de dveloppement complets tels que Netbeans peuvent aussi tre utiliss, c'est selon votre
prfrence.
Sous Linux
www.siteduzero.com
14/60
L'diteur Gedit sous GNU/Linux Ubuntu 10.04

Sous Linux on a l encore beaucoup d'diteurs diffrents et ils ont tous beaucoup d'atouts dans leur manche.
Si vous tes un habitu de la console et que vous ne souhaitez pas tre dpays, vous pourrez toujours diter vos fichiers avec
Vim ou Emacs. Si en revanche vous prfrez utiliser un diteur graphique, l'diteur de texte Gedit ou Geany sont tous les deux
excellents.
Sous MacOS X
Le logo de l'diteur Smultron sous MacOS X

Le systme d'exploitation de la firme Apple a lui aussi son lot d'diteur. Le plus connu est sans doute Smultron, qui a t cr par
un dveloppeur Sudois.
Choisissez l'diteur de texte avec lequel vous tes le plus l'aise. Si vous avez l'habitude de crer des sites internet, le navigateur
que vous utilisez pour HTML n'a aucune raison de ne pas connatre JavaScript. Et s'il connat JavaScript : c'est qu'il connat
jQuery.
Vous arrivez bientt au terme de votre prparation, bientt nous allons pouvoir aborder rellement jQuery et commencer coder
avec lui.
www.siteduzero.com
15/60
Le chapitre qui suit sera le dernier chapitre introductif au cours. Nous allons faire une dernire petite mise au point... cette fois-ci
au niveau du JavaScript. Vous remettre en mmoire une dernire fois les fondements de ce langage ne sera pas de trop avant
d'apprendre jQuery !
Si vous estimez que le chapitre suivant ne vous sera pas utile, vous tes totalement libre de le sauter. Il est nanmoins
recommand de le lire. Cela ne vous prendra que peu de temps, et ce ne sera que positif pour vous.
www.siteduzero.com
16/60
Rappels gnraux sur JavaScript

Histoire de mettre tout le monde sur la mme longueur d'onde, nous vous proposons un petit rappel sur les rudiments de
JavaScript, ses bonnes pratiques, quand l'utiliser, et surtout pourquoi. Ce chapitre ne se veut en aucun cas un apprentissage
ultra-rapide du langage, il existe d'ailleurs un big-tutoriel sur le Site du Zro pour cela.
O et quand utiliser JavaScript ?

Avant tout chose, il nous faut dfinir la place que prendra notre code JavaScript dans la page. En effet, la structure se doit d'tre
claire, car on ne dveloppe pas n'importe comment. Pour les connaisseurs, avez-vous pour habitude de placer du code PHP dans
une page portant l'extension .html ? Pour sr que non !
Avec JavaScript, on sera un peu moins regardant ce niveau, mais il est quand mme prfrable de bien diviser son code.
O placer son code JavaScript ?

Cette question, bien qu'elle semble simplette et dnue d'intrt, fait parfois l'objet de dbats sur le web. Certains diront qu'un
code JavaScript DOIT se placer entre les balises <head></head>, car c'est comme cela que le langage HTML a t construit.
En revanche, les non-adhrants cette pratique diront que, pour un soucis de performance, il est largement plus rentable de
placer JavaScript en fin de page, juste avant la fermeture de la balise <body>.
N'oubliez pas que l'on a pour habitude de placer le JavaScript dans des fichiers portant l'extension .js. C'est d'ailleurs la
mthode la plus recommande pour utiliser JavaScript.
Le problme se pose maintenant : qui a raison, et qui a tort ?
Au cours de ce tutoriel, nous ne vous obligerons pas prfrer la premire ou la deuxime pratique, mais il est clair pour nous
que placer son code JavaScript en fin de page est plus logique : la structure HTML, le DOM, se charge ainsi en premier en raison
de la lecture linaire du navigateur, ce qui est le plus important. Vient ensuite JavaScript, qui se chargera d'ajouter tous les effets
et applications voulues. Les codes que nous vous prsenterons seront donc toujours placs en fin de page, ou dans des
documents externes chargs en derniers.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<script>
// mon code JavaScript
</script>
</body>
</html>
Il est vident qu'il ne faut pas placer son code JavaScript en plein milieu de la page, c'est totalement illogique et vous
pouvez vous perdre plus facilement si votre script fait beaucoup de lignes !
Quand et comment l'utiliser ?

Une des autres choses retenir, c'est qu'il faut savoir utiliser JavaScript avec parcimonie. Souvenez-vous toujours que c'est un
langage qui s'excute du ct client, et qui est donc facilement contournable grce un bon navigateur. Ainsi, vrifier des
informations peut se faire en JavaScript, mais doit toujours tre assur galement du ct de votre serveur, qui lui n'est pas
accessible. Cela vous vitera bien des problmes !
Paralllement, n'utilisez JavaScript que lorsqu'il est utile, c'est--dire lorsqu'il apporte quelque chose au visiteur. Faire un dluge
www.siteduzero.com
17/60
de flocons de neige sur la page d'accueil prsente trs peu d'intrt, et aura plutt tendance agacer l'utilisateur.
De mme,
ne chargez pas vos informations essentielles avec ce langage : les personnes l'ayant dsactiv, les personnes handicapes et les
robots des moteurs de recherche ne pourront ou ne saurront pas lire votre contenu !
JavaScript doit donc tre sur un site web pour, par exemple, amliorer l'exprience utilisateur, mais surtout pas pour la cration de
contenu.
Variables et fonctions
Parmis les bonnes pratiques adopter en JavaScript, il y a celles qui concernent les variables et les fonctions. Nous ne vous
parlerons que de ces lments pour la simple et bonne raison que leur dclaration ne change pas avec jQuery, contrairement aux
vnements, par exemple. Si vous ne savez pas ce qu'est une variable ou une fonction, nous vous conseillons vivement d'aller
lire un tutoriel consacr JavaScript !
De la dclaration des variables

Les variables en JavaScript se dclarent toujours de la mme faon : il faut prcder le nom du mot-cl var. Il est possible de
dclarer plusieurs variables la suite en les sparant de virgules :
Code : JavaScript
var maVariable = 1, // cette variable vaut 1
maVariable2, // celle-ci est dclare, mais vide
maVariable3 = true; // celle-ci contient le boolen true
Traditionnellement, on dclarera nos variables en dbut de code ; ce n'est pas le langage qui veut cela, c'est juste une faon d'y
voir plus clair.
Concernant les tableaux, plus couramment appels arrays, et les objets, ils se dclarent grce leur structure particulire. Ainsi,
on initialisera un tableau avec des crochets [ ], et un objet avec des accolades { }.
Fonctions et arguments
Les fonctions en JavaScript se dclarent de la mme manire qu'en PHP, par exemple. Beaucoup de langages de programmation
se ressemblent, surtout ce niveau. Ainsi, il suffit d'crire le mot-cl function suivi du nom de la fonction pour dclarer celleci et pouvoir l'utiliser. Elle peut aussi prendre des arguments, qui feront office de variables accessibles uniquement dans la
fonction qui les a instanci. Il est donc possible d'exploiter des donnes diffrentes avec une seule fonction.
Code : JavaScript
function helloWorld(nom){
alert('Hello World, ' + nom + '!');
}
helloWorld('Sainior'); // affichera une alerte "Hello World Sainior
!"
Cas des fonctions anonymes

Il est possible, en JavaScript, de dclarer des fonctions qui ne possdent pas de nom. Assez joliment, on les a appeles
fonctions anonymes . Elles permettent de lancer une fonction directement depuis une variable, par exemple, ou mme une autre
fonction ! Elles seront donc trs utilises dans ce cours, donc assurez-vous bien d'tre au point avec. Pour exemple, si je dclare
une fonction anonyme dans une variable, je pourrai excuter la fonction avec la variable :
Code : JavaScript
var helloWorld = function(){ // cette fonction est anonyme
alert('Hello World !');
}; // attention au point-virgule, il ne faut jamais l'oublier !
www.siteduzero.com
Partie 2 : Les bases du framework !
18/60
helloWorld(); // affichera une alerte "Hello World !"
Encore une fois, jQuery est presque un nouveau langage apprendre. Ainsi, nous ne serons pas aussi rapides dans
nos explications dans les prochains chapitres. Ici, nous souhaitons juste vous rafrachir la mmoire.
Vous tes maintenant au point pour commencer vous lancer avec jQuery ! Ces chapitres d'introduction ont peut-tre t un peu
long, mais nous pensons qu'il est ncessaire que vous soyez sr de vous pour coder dans de bonnes conditions. Alors
n'attendez plus, on commence ds maintenant !
www.siteduzero.com
19/60

Aprs cette partie introductive, nous sommes maintenant tous au mme niveau, c'tait vraiment ncessaire. Maintenant, vous
savez ce qu'est jQuery et vous savez pourquoi il va tre intressant de l'utiliser. En plus de cela, vous tes maintenant
parfaitement quips pour commencer apprendre le framework, et nous vous avons offert en plus un petit rafrachissement de
vos connaissances en JavaScript. Pas mal non ?
Bref ! Tout a pour dire que maintenant, nous sommes fins prts nous lancer dans l'apprentissage du framework jQuery ! Lisez
bien ces chapitres dans l'ordre, la fin de cette partie, vous connaitrez les bases fondamentales de jQuery, et vous serez prts
aborder avec nous une utilisation un peu plus avance de cette technologie.
Vos premiers pas avec jQuery !

Nous voici maintenant dans la vraie phase d'apprentissage de jQuery. C'est ici que l'on va commencer taper nos premiers codes
sources en jQuery.
Il arrivera souvent au cours de ce tutoriel que nous utilisions par abus de langage l'expression "coder en jQuery".
jQuery n'est pas un langage, c'est bien un framework JavaScript. C'est simplement un petit raccourci que nous allons
utiliser et qui est assez utilis sur le web. Mais comprenez bien par l qu'on entend : "coder en JavaScript en utilisant le
framework jQuery".
Inclure jQuery dans vos pages

Pour commencer travailler avec jQuery sur votre site web, il va falloir tout naturellement l'inclure dans vos pages. Voyons ici
comment l'on va procder.
Deux mthodes pour inclure jQuery dans vos pages web

Vous devez savoir qu'il existe deux mthodes pour inclure jQuery dans vos pages. Les deux marchent et sont tout fait valables,
mais l'une est plutt dconseille alors que l'autre est au contraire vraiment trs conseille.
Inclure jQuery depuis votre serveur (mthode dconseille)

La premire de ces deux mthodes, celle qui n'est pas conseille, consiste inclure jQuery dans vos pages web depuis votre
propre serveur. Pour cela, c'est trs simple.
Dans un premier temps, nous allons devoir nous rendre sur le site officiel de jQuery : jQuery.com.
Nous vous conseillons d'ailleurs de mettre ce site dans vos favoris histoire de toujours l'avoir sur la main, en effet, c'est
galement sur ce site que se trouve la documentation jQuery que nous apprendrons lire et utiliser plus tard.
Pour rcuprer jQuery, vous devez tout simplement cliquer sur l'option "Download" dans le menu du haut. Vous arriverez alors
sur une page vous prsentant les diffrentes release de jQuery. A l'heure o nous crivons ces lignes, la version actuelle est la
1.7.2, et c'est celle que nous utiliserons au sein de ce cours.
Quoiqu'il en soit, la version la plus jour est place un peu en avant par rapport aux autres ; pratique pour l'identifier et la
rcuprer plus rapidement.
Euh... il y a deux release pour la mme version non ? Une version "Minified" et une version "Uncompressed"... qu'estce que je dois choisir ?
Ah oui ! Nous allions y venir !

En fait, c'est trs simple. jQuery vous est toujours fourni en deux exemplaires. Je vous rassure le contenu du fichier est
exactement le mme. Il n'y a pas 2 jQuery, il y en a bien qu'un seul.
www.siteduzero.com
20/60
jQuery Minified
jQuery Minified est le framework jQuery "compress". En effet, vous avez pu vous rendre compte : jQuery est un fichier
qui est vraiment immense, et dans ce fichier immense vous pouvez voir qu'il y a beaucoup d'espaces et beaucoup de
retours la ligne : pour garder un peu de lisibilit pour les codeurs. Le problme, c'est qu'en faisant a, le fichier
prend vraiment plus de place. La version Minified rpond ce problme : tous les espaces et retours la ligne sont
retirs. Cela a pour effet de rendre le code compltement illisible, mais en revanche, jQuery sera tlcharg plus vite
par vous et vos visiteurs !
jQuery Uncompressed
jQuery Uncompressed est "l'autre jQuery". Celui qui a conserv les espaces et les retour la ligne pour garder de la
lisibilit, mais qui est plus long charger.
Bien sr, nous vous recommandons vivement d'utiliser la version compresse sur votre site en production, car elle sera
vraiment plus rapide charge. En revanche, pour toute la phase de dveloppement il sera plus sage d'utiliser la
version dcompresse.
Bref, pour en revenir notre inclusion dans nos pages, tlchargeons la version compresse de jQuery. Faites donc un Clic Droit
-> Enregistrer sous, et placez jQuery dans un dossier facile d'accs pour pouvoir l'inclure plus facilement dans votre page web.
La suite est trs simple et trs basique. Ouvrons un document HTML.
Code : HTML
<!DOCTYPE html>
<html>
<head>
<title>Test jQuery</title>
</head>
<body>
<p>On va bosser avec jQuery, c'est super !</p>
<script src="chemin/vers/jquery.js"></script>
</body>
</html>
Et voil ! Si le chemin d'accs vers le fichier est correct, jQuery a bien t reli votre page web... seulement, cette mthode n'est
franchement pas recommand, car elle va faire bosser votre serveur un peu plus, et surtout inutilement.
On va voir tout de suite la deuxime mthode, celle qui est vraiment beaucoup plus recommande par tous les dveloppeurs
jQuery !
Inclure jQuery depuis un serveur distant (Google !)

Et oui ! La mthode la plus recommande pour inclure jQuery dans votre page web est encore d'inclure le fichier directement
depuis un serveur distant.
Seulement voil, il faut trouver quelqu'un de suffisamment fou pour pouvoir hberger un fichier aussi utilis que jQuery et le
mettre disposition de tous les dveloppeurs de la plante qui veulent l'utiliser... et il y a bien une entreprise qui fait a, c'est
Google !
Google n'est pas seulement un moteur de recherche et une suite de sites web, c'est aussi une entreprise qui a montr depuis
toujours un intrt farouche pour l'open-source. C'est ainsi que Google met disposition de tous le framework jQuery hberg
directement sur ses serveurs. Google vous fournit un lien absolu indiquer dans vos pages, et c'est tout bon, jQuery est inclus !
Reprenons le mme code source que tout l'heure, et adaptons-le pour ce deuxime cas de figure.
www.siteduzero.com
21/60
Code : HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</body>
</html>
jQuery est prt l'emploi !

Le lien vers jQuery Minified chez Google est
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
Et le lien vers jQuery Uncompressed chez Google est
https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js
jQuery n'est d'ailleurs pas le seul framework libre que Google hberge et propose tout le monde. Si vous voulez voir l'intgralit
des outils proposs par Google, vous pouvez vous rendre sur cette page. Les liens absolus indiquer sont galement rfrencs
sur cette page du site Google ddi aux dveloppeurs.
Et pourquoi cette mthode est-elle la plus recommande des deux ?
La rponse cette question est trs simple : c'est juste pour moins faire travailler notre serveur. En plus de cela, inclure jQuery
depuis un serveur Google permet une mise en cache immdiate, pour toujours acclrer les temps de chargement de votre site.
C'est donc plus une question de performance qu'autre chose.
Ainsi, pensez bien qu' chaque fois que vous travaillerez en jQuery, il vous faudra inclure le framework depuis un serveur Google
!
La fonction de base : jQuery()

jQuery est donc inclus notre page web... c'est bien beau, mais l'idal serait quand mme d'arriver utiliser ce qu'il a nous
proposer non ? Voyons comment faire ds maintenant pour exploiter toute la puissance du framework.
Une fonction gnrique : jQuery() ou $()

L'ensemble du framework jQuery repose sur une seule fonction. C'est la fonction la plus importante du framework, vous devrez
toujours l'utiliser ds qu'il s'agira de dvelopper en jQuery. Cette fonction, c'est tout btement la fonction jQuery() !
Elle va servir tout simplement dire : "Hop l ! A partir de maintenant, c'est du jQuery qu'il va y avoir". Sans cette fonction,
absolument aucun code jQuery ne pourra tre interprt. C'est peut-tre l une faiblesse qui n'en est pas une pour le framework :
tout le code qu'on l'on va devoir crire, on va devoir le faire au sein de cette fonction.
Reprenons notre code de tout l'heure et voyons comment appeler la fonction jQuery().
Code : HTML
<!DOCTYPE html>
<html>
<head>
www.siteduzero.com
22/60
</head>
<body>
<script

<script>
jQuery(document).ready(function(){
// Du code en jQuery va pouvoir tre tap ici !
});
</script>
</body>
</html>
Nous incluons jQuery min. ici, nous considrons simplement que cette page est en production. Si elle avait t une
page en dveloppement, nous y aurions inclus la version non compresse de jQuery.
Oulah, il y a dj pas mal d'infos dans ce code que nous allons devoir vous expliquer.
Laissons un peu tomber le HTML pour le moment et focalisons-nous sur le JavaScript. Essayez simplement d'imaginer que nous
nous trouvons dans une page HTML complte.
Code : JavaScript
// Du code en jQuery va pouvoir tre tap ici !
});
Alors, comme nous vous le disions, on a dj pas mal de nouveauts dans ce code : la ligne 1 en contient le plus.
Code : JavaScript
jQuery(document)
jQuery prend un argument. Ici, elle cible le "document", qui reprsente tout simplement votre document HTML sur lequel vous
travaillez : votre page web.
Code : JavaScript
// notre code ici
});
La suite de ce code est vraiment trs simple. Vous voyez que le prochain lment qui arrive, est l'vnement ready. Cet
vnement se traduit simplement par "est prt". Une fois que cet vnement est vrifi, on lance une fonction anonyme dans
laquelle on va place notre jQuery.
Ainsi, cette ligne peut tre traduite par : "Quand le document HTML est prt (sous-entendu, est charg) lance une fonction qui
contient le code jQuery."
www.siteduzero.com
23/60
Cette petite structure de rien du tout signifie vraiment beaucoup de choses : on attend simplement que la page HTML soit
charge avant de commencer parler de jQuery. C'est LA structure que vous devrez utiliser dans 99% des cas pour coder en
jQuery dans votre page. Retenez la par coeur, parce que cela vous fera vraiment gagner du temps.
Et comment on peut vrifier que tout cela est fonctionnel ?
Vous pouvez simplement ajouter un console.log la place des commentaires dans le code ci-dessus pour voir si vous recevez
bien quelque chose dans votre console Firebug l'excution de ce code. Vous pouvez galement utiliser la mthode hard en
utilisant carrment un alert().
Vous pouvez vous y prendre comme ceci :
Code : JavaScript
/*
* Avec un console.log
*/
console.log("jQuery est prt !");
});
/*
* Avec un alert()
*/
alert("jQuery est prt !");
});
Si vous avez un retour dans votre console ou dans votre navigateur, c'est tout bon !
Quoiqu'il en soit n'oubliez pas cette structure.
$() un alias de jQuery()

Vous savez tous qu'un programmeur, c'est par dfinition quelqu'un de trs fainant. Alors comme on a trouv que c'tait trop long
d'crire jQuery() pour appeler la fonction, on s'est dit qu'on allait crer un alias pour pouvoir l'appeler plus facilement. Ainsi, il
faut savoir que la fonction jQuery peut aussi s'appeller avec $(). Le reste du code reste exactement le mme.
Ainsi :
Code : JavaScript
alert('Salut, jQuery est oprationnel !');
});
et
Code : JavaScript
$(document).ready(function(){
alert('Salut, jQuery est oprationnel !');
});
www.siteduzero.com
24/60
donnerons exactement le mme rsultat !

Notez par ailleurs que l'alias $() est vraiment le plus utilis sur le web, tout simplement parce qu'il est plus rapide crire. Ainsi,
dans la suite de ce cours nous utiliserons toujours l'alias $() pour les codes que nous vous fournirons. Vous feriez mieux de vous
aussi prendre l'habitude. Vous verrez, ce n'est pas trs compliqu, vous avez juste vous dire qu'il y a crit "jQuery" la place de
"$" !
viter le conflit
La plupart des bibliothques JavaScript utilisent elles aussi le $ (dollar), ce qui peut tre la source de conflit entre les diffrentes
librairies sur une mme page. Pour viter ce genre de problme, il est possible de passer la variable jQuery une fonction
anonyme pour tre sr que notre alias ne soit pas l'origine de conflits.
Code : JavaScript
(function($){
// notre code ici
})(jQuery);
Le principe de fonctionnement
Comme nous venons de le voir, le framework met en place une fonction dite principale. Le principe de fonctionnement de jQuery
repose en fait entirement sur celle-ci ! Autant dire que vous allez vous servir beaucoup plus du caractre $ (dollar) ds prsent
!
Ainsi, pour agir avec les lments d'une page web, on ralisera ce qu'on appelle couramment un ciblage d'lment , qui
reprsentera une balise, par exemple. On agira ensuite dessus grce des mthodes. Pour que vous ayez un aperu, voici un
code fictif tout simple usant du principe de jQuery :
Code : JavaScript
$('monElement').maMethode();
Je cible dans un premier temps mon lment qui jouera le rle d'objet, grce un slecteur (chose que nous verrons plus en
dtails dans le prochain chapitre). Je peux ensuite agir dessus grce une mthode !
www.siteduzero.com
25/60
Mais c'est quoi une mthode ?
Une mthode en jQuery est une fonction un peu spciale qui agira directement sur l'objet (ou l'lment cibl, si vous prfrez)
indiqu. Le framework en possde beaucoup, mais il est possible de crer les notres ! Nous verrons cela dans un chapitre ddi,
lorsque vous serez plus l'aise avec jQuery.
Il est possible de chaner les mthodes, c'est--dire que l'on peut en mettre plusieurs la suite, pour agir sur l'objet en une seule
fois.
Code : JavaScript
$('monElement').premiereMethode().deuxiemeMethode();
/* la premire mthode agit d'abord sur l'objet, avant la deuxime.
On a donc un ordre logique : les mthodes s'enclenchent les unes
derrire les autres */
Si vous avez assimil ce fonctionnement de base, vous avez fait le plus dur.
Bien sr, jQuery est bourr d'outils pour rendre la chose un peu plus vivante.
Vous devez commencer comprendre comment fonctionne concrtement le framework !
allons monter le niveau d'un cran, et voir les slecteurs dans le chapitre suivant.
www.siteduzero.com
C'est une trs bonne chose, car nous
26/60
Les slecteurs
jQuery a une syntaxe qui permet de slectionner trs facilement des lments sur la page, c'est un de ses plus grands points
forts. Mais, au-del des apparences, la slection de ceux-ci est plus complexe qu'il n'y parat. Les slecteurs en jQuery sont
toute une science que nous allons apprendre pas pas au cours de ce chapitre !
Les slecteurs de CSS

Avant de se lancer dans une foule de slecteurs propres jQuery tous plus compliqus les uns que les autres (non, on plaisante
), il est ncessaire de dbuter par des slecteurs plus basiques. En effet, le framework que nous tudions fonctionne tout
d'abord avec les slecteurs de CSS. Vous les connaissez surement, ou tout du moins la plupart, car vous tes cens connatre
un minimum la syntaxe du CSS pour suivre ce tutoriel.
Cela ne vous dit vraiment rien ?
Les slecteurs les plus utiliss

Peut-tre est-ce le mot slecteur qui vous fait peur. Dans ce cas-l, je pense que votre mmoire va se rafrachir si je vous parle
d'identifiant et de classe. Pour rappel, il est possible d'attribuer une classe ou un identifiant un lment HTML ; on s'en servira
par la suite pour le slectionner avec CSS, ce qui nous permettra de styliser l'lment.
Avec jQuery, vous pouvez trs bien utiliser ces slecteurs ! Ce sont mme ceux-ci qui reviendront le plus souvent dans vos
codes. Pour cela, il suffit de suivre simplement la syntaxe suivante, comme en CSS :
Code : JavaScript
$('p'); // je slectionne tous les paragraphes
$('.maClasse'); // je slectionne les lments ayant .maClasse pour
classe
$('#monId'); // je slectionne l'lment qui possde l'identifiant
#monId
Un identifiant est unique : plusieurs lments d'une seule page ne peuvent pas avoir le mme id !
Frres et parents
Parmis les slecteurs un peu plus complexes que les classes et les identifiants se trouvent les slecteurs de descendance. Ce mot
bizarrement employ dans un contexte tel que le notre cache en fait un concept trs puissant de parcours. Vous n'tes surement
pas sans savoir qu'il est possible, en HTML, d'imbriquer des balises les unes dans les autres. Eh bien, ce systme fait usage de la
descendance !
Prenons un exemple concret. Je possde un paragraphe, dans lequel j'ai un lien absolu. Ma balise <a href="lien"></a>
est alors imbrique dans les balises <p></p> propres au paragraphe.
On dit que le paragraphe est un lment parent, et le lien un lment enfant.

Comprenez-vous le principe ? La balise parente mon lien est la balise qui contient celui-ci. Ainsi, de cette faon-l, la balise
<body> est parente de toute notre structure HTML !
CSS, et par extension, jQuery, permet de manipuler ce concept de descendance grce des slecteurs spciaux. Le plus connu
est sans doute le slecteur qui fait suivre deux lments au minimum :
Code : JavaScript
$('p .lien');
/* ici, nous slectionnons tous les lments ayant la classe .lien,
et contenus dans un paragraphe qui joue le rle de parent */
www.siteduzero.com
27/60
Le problme de cette mthode-ci est qu'elle prend en compte tous les lments possdant la bonne classe et contenus dans un
parent. Imaginez que vous ne vouliez slectionner que les lments qui descendent directement du bloc parent, c'est--dire qui
ne sont pas contenus une seconde fois dans un autre bloc. Dans ce cas-l, il vous faudra utiliser un slecteur un peu moins
connu, qui n'est autre que >.
Code : JavaScript
$('p > .lien');
/* ici, nous slectionnons seulement les lments ayant la classe
.lien,
et descendants directement du paragraphe ! */
Il est ensuite possible de pousser le systme encore plus loin, par exemple en utilisant les slecteurs + et ~ qui se chargent de
reprsenter les frres de l'lment. Ce qu'on appelle couramment les frres, dans ce contexte de jQuery, ce sont simplement les
lments qui se suivent directement, comme par exemple deux liens.
Code : JavaScript
$('.lien + .visite');
/* la slection s'effectue sur les lments ayant pour classe
.visite,
et qui sont immdiatement prcds d'un lment ayant pour classe
.lien */
$('.lien ~ .visite');
/* dans ce cas-l, ce sont tous les lments .visite,
prcds immdiatement ou non par un lment .lien */
Alors, pas trop compliqu ?

Jusque l, vous devriez avoir suivi assez facilement. Les slecteurs CSS sont une chose assez peu difficile assimiler, et si vous
avez du mal, pas de soucis avoir, cela viendra avec l'exprience. En attendant ce jour heureux, je vous invite passer aux
slecteurs propres jQuery !
Une slection plus pousse

Les slecteurs de CSS, c'est bien, mais des slecteurs plus sophistiqus ne seraient pas de refus ! En effet, pour les besoins des
dveloppeurs, jQuery met en place une slection d'lments beaucoup plus pousse que CSS. Comprenez bien que ce n'est pas
seulement avec des identifiants et des classes que nous pourrons tablir un vritable systme, ce serait le chaos total et
franchement peu pratique. C'est pourquoi jQuery a mis en place ce que l'on appelle des filtres, qui ont une syntaxe particulire :
deux points suivis du nom du slecteur. Vous en saurez plus en lisant la suite.
La place d'un lment

Parmis les trs nombreux slecteurs proposs par le framework figurent ceux qui permettent de slectionner un lment suivant
sa place sur la page. C'est quelque chose de vraiment pratique qui tait assez compliqu raliser avec du simple JavaScript. Les
plus utiliss et connus sont :
:first, qui slectionnera le tout premier lment donn ;
:eq(index), qui se chargera de retourner l'lment possdant l'index spcifi ;
:last, je pense que vous l'aurez vite compris, permettra de slectionner le dernier lment.
Ainsi, de cette faon, il vous suffira de taper ceci pour faire une slection sur le premier et/ou le dernier lment :
Code : JavaScript
$('p:first'); // slection du premier paragraphe trouv
$('a:last'); // ici, on slectionne le dernier lien de la page
www.siteduzero.com
28/60
L'index d'un lment

Cela peut vous paratre flou au premier abord, contrairement aux deux autres slecteurs. En effet, qu'est-ce que l'index d'un
lment ?
Eh bien, pour faire le plus simple possible, c'est le numro qui reprsente sa place dans la page. Ainsi, si vous possdez cinq
paragraphes, vous pourrez par exemple slectionner le troisime sans problme. Mais attention il y a un pige : il faut
commencer compter partir de 0. C'est trs important de retenir cela, la systme est similaire sur les tableaux, par exemple.
Alors quel chiffre taperez-vous pour retourner le troisime paragraphe ?
Secret (cliquez pour afficher)
Code : JavaScript
$('p:eq(2)'); // c'tait 2 !
Slection par attributs

Un autre type de slecteurs sont les slecteurs fonctionnant grce aux attributs des lments du DOM. Il est ainsi possible de
raliser de multiples actions sur les balises qui contiennent un attribut donn, tel qu'un identifiant ou une valeur :
Code : JavaScript
$('p[id]'); // retourne seulement les paragraphes ayant un
identifiant
Cibler d'autres faons

Heureusement, il est possible de prciser la requte. Imaginons que vous vouliez rcuprer les lments ayant une valeur
(value) ou un nom (name) bien prcis. Dans ce cas-l, il est possible de le dire jQuery grce la syntaxe suivante :
Code : JavaScript
$('input[name=pseudo]'); // cible seulement l'lment de formulaire
ayant pseudo pour nom
Si au contraire vous voulez cibler tous les autres lments, ceux qui n'ont pas la bonne valeur dans leur attribut, il suffit de
rajouter un point d'exclamation (!) devant le signe "gal" (=) :
Code : JavaScript
$('input[name!=pseudo]'); // retourne les lments n'ayant pas
pseudo pour nom
Le slecteur :not()
Un peu part, ce slecteur particulier permet de cibler les lments qui sont tout sauf ce qui a t indiqu l'intrieur. Il permet
donc une slection puissante, et, depuis jQuery 1.3, permet mme de spcifier plusieurs types de balises en mme temps ! Il
s'utilise trs facilement :
www.siteduzero.com
29/60
Code : JavaScript
$('p:not(.rouge)'); // slection de tous les paragraphes, sauf ceux
ayant .rouge comme classe
$('input:not(.bleu, .vert)'); // on slectionne tous les lments de
formulaire sauf ceux ayant .bleu et/ou .vert comme classe
Autant dire qu'en terme de praticit, ce slecteur vaut pas mal de points !
Sauver la slection
Il peut parfois se rvler pratique de sauvegarder un objet jQuery. Il est donc possible de rentrer une slection dans une variable,
cette dernire pouvant tre utilise la place de la fonction principale.
Code : JavaScript
var $element = $('monElement');
Par soucis de lisibilit et de comprhension, on fait prcder le nom de notre variable du caractre $. On sait ainsi
directement qu'on a affaire un objet jQuery.
Le cas des formulaires

Pour exploiter la pleine puissance des trs nombreux slecteurs de jQuery, il faut se pencher sur les formulaires en HTML. En
effet, l'interaction tant beaucoup plus prsente ces endroits, il est logique que le framework soit plus enclin les dynamiser.
Ainsi, la slection des lments de formulaire se fera d'une faon un peu diffrente, que nous allons commencer traiter tout de
suite.
Le type des lments

Comme vous le savez surement, les lments de formulaire peuvent changer de type selon ce que l'on veut en faire. La balise ne
change pas et reste la mme, on utilisera dans 90% des cas <input />. En changeant l'attribut type de la balise, il est
possible de spcifier que l'on veut une case cocher, un champ de texte, un bouton...
Suivant ce principe, on pourrait penser qu'il faut faire ceci en jQuery :
Code : JavaScript
$('input[type=button]'); // on slectionne un input de type button
Ce code fonctionne parfaitement, mais ce n'est pas la meilleure faon de procder ! Il y a plus simple, plus rapide et surtout plus
propre. Pour respecter cela, il faut indiquer le type, prcd de deux points :
Code : JavaScript
$('input:button'); // on slectionne un input de type button
Et vous pouvez ensuite faire ceci pour chaque type d'input !

Type
text (Texte)
Code
input:text
password (Mot de passe) input:password

file (Fichier)
input:file
www.siteduzero.com
30/60
checkbox (Case cocher) input:checkbox

radio (Bouton radio)
input:radio
button (Bouton normal)
input:button
submit (Bouton d'envoi)
input:submit
tat des lments

Dernire petite astuce avant de conclure ce chapitre, vous pouvez tablir une slection suivant l'tat des lments d'un
formulaire. Vous allez nous rpondre qu'il n'y a pas trente-six tats, justement, et vous avez effectivement raison. Neanmoins, ce
sont des slecteurs que nous retrouverons assez souvent, et nous pensons qu'il est intressant de les connatre.
Ainsi, vous pouvez vrifier qu'une case est coche, ou qu'un lment est activ/dsactiv, grce aux slecteurs suivants :
:checked vrifie qu'une case est coche ;
:disabled cible les lments dsactivs ;
:enabled fait le contraire, il slectionne les lments activs.
Le slecteur $(this)
Le slecteur le plus spcial est sans aucun doute $(this). Dans la plupart des langages orients objet, le mot-cl this
reprsente l'objet courant, celui qui est actuellement trait par une fonction, par exemple. jQuery permet la slection de cet objet.
Exemple avec ce code qui traite chaque lment trouv :
Code : JavaScript
$('p').each(function(){
$(this).html('Hello World !'); // $(this) reprsente le
paragraphe courant
});
C'est la fin de ce chapitre ! Vous avez vu que les slecteurs de jQuery offrent de nombreuses possibilits de ciblages des
lments d'une page web, et ce n'est que le dbut de ce fabuleux framework ! Vous verrez dans le prochain chapitre comment
grer les vnements, o vous aurez besoin de mettre en pratique tout ce que vous venez de voir. Assurez-vous donc de bien
avoir compris !
www.siteduzero.com
31/60
jQuery et les vnements

En jQuery, vous aurez presque tout le temps travailler avec ce que l'on appelle des vnements, (events en anglais)... Nous
allons voir ce que c'est dans ce chapitre. Qui sont-ils ? A quoi vont-ils nous servir, surtout et comment les aborder dans notre
code jQuery ?
C'est vraiment un lment cl du framework, donc forcment, c'est un chapitre cl. Bonne nouvelle : c'est plutt simple
comprendre.
Go !
Un vnement, des vnements...

Voyons voir ici ce que sont les vnements... si vous tes assez l'aise avec JavaScript, cette sous-partie n'aura probablement
pas grand chose vous apprendre. Mais bien sr, lisez quand mme car vous tes en train de rapprendre JavaScript travers
jQuery !
C'est quoi un vnement ?

Pour expliquer la chose simplement, dites-vous qu'un vnement est une action remplie par le navigateur, ou plus gnralement
l'utilisateur. Vous connaissez les conditions ? Pour les vnements, c'est un peu le mme principe : on lance un bout de code
quand une action est remplie.
D'ailleurs ! Vous vous en tes peut-tre rendu compte, mais dans les chapitres prcdents, nous avons dj utilis un vnement,
le ready() ! Voyons le code que nous avions :
Code : JavaScript
// Le code jQuery ici !
});
C'est la fonction de base de jQuery, vous vous souvenez ? Elle marche autour de l'vnement ready() qui coute le
chargement du document. L'coute d'un vnement, c'est tout simplement le fait d'attacher une action bien prcise remplir un
lment pour dclencher une fonction, appele couteur d'vnement.
"QUAND le document est PRT , on appelle une fonction dans laquelle on va mettre du
jQuery."
C'est le fonctionnement de ce code qui tourne autour de l'vnement ready() : tant que le document n'est pas charg, on ne
fait rien. Quand il est charg, on agit. Fort heureusement pour nous, jQuery peut couter plein d'vnements diffrents, on ne se
limitera pas qu' couter si notre page est charge ou non.
On aura par exemple un vnement qui pourra couter la souris de l'utilisateur : quand il va cliquer sur un certain lment
de votre page que vous aurez cibl avec un slecteur, vous pourrez excuter du code jQuery.
Un autre vnement peut couter le clavier de l'utilisateur : quand il va presser des touches de son clavier, vous pourrez
excuter l encore du code.
En gros, on peut dire qu'un vnement fait le lien entre une action remplie, et une fonction (du code) excute.
Encore une fois, si vous tes un habitu du JavaScript vous deviez connatre un peu tout a, si ce n'tait pas le cas, pas de
problme : maintenant vous connaissez le concept. JavaScript permettait de grer les vnements d'une certaine manire. Eh bien
devinez quoi ? En jQuery, c'est totalement diffrent ! Bon point : en JavaScript, grer des vnements ne se faisait pas du tout de
la mme manire d'un navigateur l'autre. Sachez que jQuery uniformise encore le tout !
La syntaxe en elle-mme est super simple, voyons ce que cela donne ici. Utilisons par exemple l'vnement click() qui est un
vnement coutant le clic de la souris.
Code : JavaScript
www.siteduzero.com
32/60
$("#uneDiv").click(function(){
// Le code a excuter !
});
Si on clique sur l'lment qui possde l'id #uneDiv (<div id="uneDiv"></div>), alors vous allez pouvoir dclencher du
code JavaScript. Plus tard, lorsque l'on sera un peu plus l'aise avec jQuery, on pourra par exemple dcider de faire disparatre
cette div (ou un autre lment !) avec un bel effet, ou mme commencer grer une requte AJAX pour mettre jour le contenu
de cette div... bref ! Les possibilits sont multiples.
Les vnements vous intressent et vous voulez aller plus loin, alors lisez donc la suite.
Quelques vnements incontournables

jQuery tant trs complet il va nous donner l'opportunit d'couter beaucoup d'vnements sur notre page web. Nous allons en
voir quelques uns ici, que nous pensons incontournables.
Dclenchement d'vnements
Parmis les nombreux vnements disponibles, les plus clbres sont sans aucun doute ceux pouvant tre dclenchs par
l'utilisateur. Ce sont eux qui permettent une trs grande interactivit avec le visiteur, c'est donc eux qui seront les plus utiliss en
gnral. Nous allons en voir quelques uns, ceux qui sont connatre absolument !
L'coute sur la souris

La souris d'un ordinateur est un outil qui permet l'utilisateur de raliser de multiples actions : cliquer, bouger, double-cliquer,
descendre dans une page... Bref, un paquet de mouvements prendre en compte. Ce qui est gnial avec jQuery, c'est que l'on va
pouvoir contrler entirement les actions du visiteur, et dclencher de multiples fonctions grce elles !
Vous connaissez sans doute dj click(), qui lance une fonction lors du clic de l'utilisateur sur l'objet associ. Nous vous
proposons ci-dessous une liste d'vnements adapts la souris ; le fonctionnement reste le mme.
Action
Fonction
Clic
click()
Double-clic
dblclick()
Passage de la souris
hover()
Rentrer dans un lment
mouseenter()
Quitter un lment
mouseleave()
Presser un bouton de la souris
mousedown()
Relcher un bouton de la souris mouseup()

Scroller (utiliser la roulette)
scroll()
L'coute sur le clavier

Tout comme la souris, le clavier peut tout fait tre cout par un script jQuery. L'utilisation la plus frquente que l'on peut en
faire est de dtecter l'appui d'une touche et de lancer une action seulement si la bonne t presse. Les vnements associs ne
sont pas trs nombreux, on en trouvera seulement trois :
keydown(), qui se lance lorsqu'une touche du clavier est enfonce ;
keypress(), qui se lance lorsqu'on maintient une touche enfonce ;
keyup(), qui se lance lorsqu'on relche une touche pralablement enfonce.
Pour connatre la touche enfonce par l'utilisateur, dans chaque cas, il vous faudra employer une fonction anonyme quipe d'un
argument reprsentant le code de la touche, sur lequel on appliquera la proprit keyCode. Cependant, le principal problme de
cette proprit est qu'elle ne fonctionne pas sur tous les navigateurs (souvenez-vous que ceux-ci ont des moteurs JavaScript
diffrents). Il faut donc ruser pour rendre notre code compatible tous navigateurs :
www.siteduzero.com
33/60
Code : JavaScript
$(document).keyup(function(touche){ // on coute l'vnement keyup()
var appui = touche.which || touche.keyCode; // le code est
compatible tous navigateurs grce ces deux proprits
if(appui == 13){ // si le code de la touche est gal 13
(Entre)
alert('Vous venez d\'appuyer sur la touche Entre !'); // on
affiche une alerte
}
});
Pour connatre le code d'une touche, je vous invite aller consulter cette page.
Le cas des formulaires

Les lments de formulaire possdent eux aussi leur lot d'vnements associs. Par exemple, lorsqu'un champ est focalis, on dit
qu'il prend le focus , car c'est sur lui que se trouve notre pointeur. Un vnement permet de contrler ce genre de chose.
Action
Focalisation
Fonction
focus()
Slection (p.e. dans une liste) select()

Changement de valeur
change()
Envoi du formulaire
submit()
Le dclenchement virtuel
jQuery permet de simuler le dclenchement d'vnements grce une simple mthode. Pour faire court, vous n'avez pas besoin
d'attendre que l'utilisateur remplisse une action prcise pour lancer du code : vous pouvez excuter virtuellement un vnement
grce trigger() ! Il suffit de donner le type de l'vnement en tant qu'argument.
Code : JavaScript
$('p').click(function(){
alert('Cliqu !');
});
$('p').trigger('click'); // dclenche l'action au chargement du
script
Annuler le comportement d'un lment par dfaut

Chaque vnement possde son propre groupe d'lments spcifiques traiter : par exemple, la soumission de formulaire ne
s'applique pas tous les cas. Cependant, certains lments ont un comportement par dfaut, dfini par le navigateur. Le cas le
plus courant est le lien hypertexte : son comportement va tre de rediriger l'utilisateur vers l'adresse donne.
Une mthode en jQuery permet d'annuler tous comportement par dfaut. Il s'agit de preventDefault().
Code : JavaScript
$('a').click(function(e){
e.preventDefault(); // annule l'action du lien
});
www.siteduzero.com
34/60
Les gestionnaires d'vnements

En jQuery, et mme plus globalement en JavaScript, on peut faire appel aux gestionnaires d'vnements. Ce sont des fonctions
auxquelles on donne un type d'vnement couter, ainsi qu'une fonction excuter chaque fois que l'vnement est
dclench. Elles sont plusieurs et nous allons les tudier car elles reprsentent une partie importante de ce chapitre, si ce n'est
LA plus importante !
Rappels
Si vous lisez ce cours, c'est que vous avez quand mme quelques notions en JavaScript. Dans un premier temps, rappelez-vous
la mthode que vous utilisiez pour couter un vnement. Il devait sans doute s'agir de addEventListener(), qui signifie
en franais ajouter un couteur d'vnement . Cette fonction prenait le plus souvent deux arguments : le premier indiquait le
type d'vnement couter, le second tait une fonction de retour excutant du code.
Un troisime paramtre pouvait tre dfini true ou false, et permettait d'utiliser soit la phase de capture, soit la phase de
bouillonnement.
L'coute en jQuery
Sachez qu'avec notre framework, il est possible de raliser la mme chose. L'coute d'un vnement se ralisera avec la mthode
bind() le plus souvent, mais la tendance s'inverse pour laisser place la fonction on(), recommande par les auteurs de
jQuery depuis la version 1.7 : c'est donc trs rcent. Comme chaque dveloppeur doit s'adapter au progrs, nous utiliserons la
seconde mthode dans la suite de ce chapitre, et plus gnralement de ce cours !
Quelle diffrence entre ces deux fonctions ? Pourquoi utiliser l'une, et plus l'autre ?
On note une diffrence majeure de flexibilit : nous allons voir juste aprs qu'il est possible de dlguer des vnements, de faire
vivre des vnements, et videmment d'couter des vnements. Dans les versions plus anciennes de jQuery, il fallait utiliser
trois mthodes diffrentes pour raliser ces choses-l. La mthode on() permet de les regrouper en une seule, elle est donc bien
plus pratique et ergonomique !
Prcdemment, vous avez vu comment dclencher un vnement simple. Les fonctions utilises n'taient en fait que des
mthodes simplifies, permettant aux dveloppeurs de ne pas crer chaque fois un gestionnaire. Nous allons voir prsent
l'coute, la vraie, d'vnements en jQuery.
Rappel : nous utilisons la mthode on().
Pour couter un vnement, il suffit de raliser le mme schma de code qu'avec addEventListener(). C'est--dire que l'on
va donner dans un premier temps le type d'vnement, puis la fonction de callback excuter :
Code : JavaScript
$('button').on('click', function(){
alert('Ce code fonctionne !');
});
Concrtement, ce code se lance de cette faon :

1.
2.
3.
4.
on cible un bouton ;
on initialise un gestionnaire d'vnement ;
on coute le clic de l'utilisateur ;
et on excute le code de la fonction de retour.
Un des avantages de cette technique est que l'coute peut se faire sur plusieurs vnements en mme temps, vous n'tes pas
oblig de crer un gestionnaire pour chacun d'eux ! Ainsi, nous pouvons lancer une coute sur le clic et sur le double-clic, en
sparant les deux types par un espace :
Code : JavaScript
www.siteduzero.com
35/60
$('button').on('click dblclick', function(){ // on coute le clic et

le double-clic !
alert('Ce code fonctionne !');
});
Passer par un objet

Encore plus fort, vous pouvez passer un objet en tant qu'argument cette mthode, afin d'excuter des fonctions diffrentes
pour chaque vnement ! Le concept est trs simple, il suffit de donner le type d'vnement en tant qu'identifiant, auxquel vous
attachez une fonction de retour chaque fois :
Code : JavaScript
$('button').on({
click : function(){
alert('Vous avez cliqu !');
},
mouseup : function(){
alert('Vous avez relch le clic !');
}
});
La dlgation d'vnements
Ce concept est plutt simple comprendre. Il permet en fait de crer un couteur d'vnements sur un lment, et de s'adapter
automatiquement aux lments similaires crs plus tard, de faon dynamique ! Pour que vous compreniez bien, imaginons que
vous ayez un paragraphe simple, sur lequel vous appliquez un vnement. Si vous crez d'autres paragraphes dans la page,
ceux-ci ne seront pas pris en compte par l'couteur !
Avant la version 1.7 du framework, il tait trs courant (et a l'est encore ajourd'hui) d'utiliser la mthode live(), pour dlguer
un vnement un lment cr dynamiquement. C'est une technique dprcie, pour la simple et bonne raison qu'elle devient
lente sur de grosses pages, et les problmes de performance sont trs mal vus des dveloppeurs. De mme, cette mthode
parcoure l'ensemble du document, contrairement on(), qui cible directement un lment ! On a donc une porte restreinte
pour une efficacit croissante : double gain de vitesse d'excution !
La fonction delegate() est presque autant utilise que live(). La diffrence entre ces mthodes est que la premire
fonctionne presque comme on(), et est donc plus propre et ergonomique. Elle n'est pas dprcie, contrairement sa cousine,
mais encore une fois, vous n'aurez pas l'utiliser.
La syntaxe pour dlguer un vnement est trs simple. Il faut donner trois arguments :
www.siteduzero.com
36/60
le type d'vnement ;
l'lment sur lequel on veut faire une dlgation ;
et la fonction de retour.
Code : JavaScript
$('body').delegate('click', 'p', function(){
alert('Les paragraphes crs peuvent tre cliqus !');
});
Les espaces de noms

Trs utiles, les espaces de noms (namespaces dans la langue de Shakespeare) ont la capacit de dsigner un vnement bien
prcis. Le nommage d'vnement n'tant pas possible avec une fonction, les dveloppeurs de jQuery ont prfr mettre en place
ce systme. A utiliser avec les gestionnaires d'vnements, les espaces de noms ont une syntaxe bien particulire retenir :
event.namespace
event dsigne le type d'vnement qui doit subir un espace de nom.
Le point permet de faire la jonction avec l'espace de nom.
namespace dsigne le nom.
Grce un systme pareil, vous pourrez excuter diffrentes fonctions partir d'un mme type d'vnement. Il suffit de spcifier
l'espace de nom utiliser, et seule la fonction correspondante sera excute.
Code : JavaScript
$('button').on('click.nom', function(){
alert('Premier vnement');
});
$('button').on('click.prenom', function(){
alert('Second vnement');
});
$('button').trigger('click.nom'); // excute le clic, MAIS ne lance
que la premire alerte !
Quatre rgles doivent tre respectes lorsque vous utilisez les espaces de noms. Il ne faut pas en user n'importe comment, car ils
ne sont pas adapts chaque cas d'utilisation :
1.
il est possible de donner plusieurs espaces de noms un vnement ;
en revanche, il n'est pas possible d'appeler plusieurs espaces de noms d'un seul coup !
Exemple : on('click.nom.prenom', ...) dfinira en mme temps click.nom et click.prenom ;
mais trigger('click.nom.prenom') ne marchera pas.
2.
vous pouvez seulement prciser le type d'vnement, sans les espaces de noms, pour tous les dclencher en
mme temps ;
en revanche, il n'est pas possible de ne prciser qu'un espace de nom sans type d'vnement !
Exemple : trigger('click') dclenchera toutes les fonctions associes aux espaces de noms sur le clic ;
mais trigger('.nom') ne marchera pas.
La suppression en jQuery
www.siteduzero.com
37/60
S'il est possible d'couter un vnement avec on(), il doit tre galement possible de le supprimer ! Et en effet, la fonction
inverse cette mthode se nomme, de manire plutt logique, off(). Elle est assez puissante dans le sens o elle peut
supprimer tous les gestionnaires et couteurs mis en place prcdemment avec on(), de mme qu'on utilisait unbind() pour
annuler bind() ! Fort heureusement, ce n'est pas sa seule utilisation : un argument permet notamment de spcifier quel type
d'vnement il faut annuler.
Code : JavaScript
$('p').on('click', function(){
// du code ici
});
$('p').off('click'); // supprime tous les gestionnaires coutant le
clic
$('p').off(); // supprimer tous les gestionnaires de n'importe quel
vnement
Les vnements directs, mais aussi dlgus, ne seront plus couts.
Annuler la dlgation
La fonction inverse de live(), avant de passer off(), se nommait die(). De mme que pour sa soeur, cette mthode est
dprcie, on peut donc dire qu'il est temps pour die() de mourrir !
Si vous voulez supprimer tous les gestionnaires d'vnements dlgus seulement, il faut donner un second argument la
mthode, qui est l'lment cr dynamiquement. La valeur ** dsigne tous les lments qui profitent de la dlgation
d'vnements :
Code : JavaScript
$('body').on('click', 'p', function(){
// du code ici
});
$('body').off('click', 'p'); // supprime tous les gestionnaires
d'vnements dlgus sur les paragraphes
$('body').off('click', '**'); // supprime tous les gestionnaires
d'vnements dlgus
Vous avez vu, les vnements n'taient pas difficiles comprendre, et en plus de a, c'est plutt simple d'en exploiter toute la
puissance dans notre code jQuery. Peut-tre les gestionnaires vous ont-ils donn du fil retordre ? Si c'est le cas, prenez bien le
temps de relire cette petite partie, car ils sont trs utiliss !
Les bases du framework se mettent de plus en plus en place dans votre tte, et c'est une trs bonne chance. Bientt vous serez
tonnez de ce qu'il est possible de faire avec votre site web ! La prochaine tape : la manipulation de votre code CSS. Modifier
des lments de votre design dynamiquement, un rve inavou ?
www.siteduzero.com
38/60
Manipuler le code CSS avec jQuery

La manipulation du code CSS en jQuery se fait de manire rapide et efficace. En effet, il est possible d'accder toutes les
proprits existantes, et plus encore, comme rcuprer des donnes stylisantes. Les diffrentes positions sont galement une
part importante de la modification du style par jQuery ; ce chapitre sera ddi l'tude de tout cela.
Une mthode puissante : css()

Parmis les nombreuses mthodes de jQuery, il en est une que vous utiliserez trs souvent en ce qui concerne la modification du
style de vos pages. Il s'agit de la mthode au nom trs loquent : css().
Rcuprer la valeur d'une proprit

La mthode css() peut prendre plusieurs sortes d'arguments. Le plus simple est de spcifier le nom de la proprit, afin de
rcuprer sa valeur. Imaginez que vous ayez un paragraphe dont le texte est de couleur verte. Pour rcuprer cette donne, vous
devrez faire ceci en jQuery :
Code : JavaScript
$('p').css('color'); // ma mthode ira chercher la valeur de la
proprit "color" et retournera "green"
Dfinition de proprits CSS

Vous vous doutez bien que s'il est possible de rcuprer la valeur d'une proprit CSS spcifique, il est aussi possible d'en dfinir
et d'en modifier. Pour cela, il suffit de passer un deuxime argument la mthode, qui contiendra la valeur donner l'attribut :
Code : JavaScript
$('p').css('color', 'red'); // ma mthode modifiera la proprit
"color" et la dfinira "red"
Cela crasera l'ancienne valeur s'il y en avait une !
Il est galement possible de dfinir plusieurs proprits CSS en mme temps, grce un objet JavaScript que l'on passera en tant
qu'argument. Il suffira de sparer les diffrents attributs par une virgule :
Code : JavaScript
$('p').css({
color : 'red', // couleur rouge
width : '300px', // largeur de 300px
height : '200px' // hauteur de 200px
});
Une chose est retenir pour cette troisime faon de faire : il ne faut pas oublier que les tirets ne sont pas accepts dans les
identifiants d'un objet ! Pour parer ce problme, il vous faut soit mettre la premire lettre de chaque mot en majuscule, sans
sparer ceux-ci, soit mettre le nom de la proprit entre guillemets ou apostrophes :
Code : JavaScript
$('p').css({
borderColor : 'red', // bordure rouge
paddingRight : '30px', // marge intrieure de 30px
'margin-left' : '10px' // marge extrieure de 10px
});
www.siteduzero.com
39/60
La proprit float doit tre mise entre guillemets ou apostrophes, car c'est un mot-cl en JavaScript ! Il risque donc
d'y avoir un conflit si vous ne le faites pas.
Positionner des lments

La position des lments d'une page web peut se dfinir avec la mthode css(), en modifiant les proprits left, top,
right et bottom. Paralllement, des mthodes en jQuery permettent de faire ceci de manire plus propre :
offset(), qui dfinit la position d'un lment par rapport au document, c'est donc une position absolue ;
position(), qui dfinit la position d'un lment par rapport son parent, c'est donc une position relative.
Ces mthodes ne fonctionnent qu'avec deux objets, qui sont left (axe horizontal ) et top (axe vertical ). Souvenez-vous que les
donnes ont pour origine le coin en haut gauche de la page. Ainsi, pour rcuprer la valeur de la position d'un lment :
Code : JavaScript
$('p').offset().left; // retourne la valeur "left" de l'lment
(position absolue)
$('p').position().top; // retourne la valeur "top" de l'lment
(position relative)
Modifier la position d'un lment

Il est possible de spcifier une nouvelle position un lment, en passant par les mthodes prcdentes. Il suffit de passer un
objet en tant qu'argument, en donnant les nouvelles valeurs (en pixels) aux identifiants left et top :
Code : JavaScript
$('p').offset({
left : 30,
top : 200
});
$('p').position({
left : 200
});
Chaque mthode transforme l'objet donn (l'lment de la page web), et lui dfinit automatiquement une position absolue ou
relative.
Grer les dimensions

De mme que pour les positions d'un lment, les dimensions peuvent tre gres directement avec css(). Cependant,
plusieurs autres mthodes sont trs pratiques pour grer la hauteur et la largeur d'un bloc. Il s'agit des fonctions suivantes :
height(), qui retourne la hauteur formate en pixels ;
width(), qui fait la mme chose avec la largeur ;
innerHeight() et innerWidth(), qui prennent en compte les marges intrieures ;
outerHeight() et outerWidth(), qui prennent en compte les marges intrieures et la bordure d'un lment.
Le box model est un concept connatre lorsque l'on manipule les dimensions avec jQuery. Conrtement, il faut retenir qu'il y a
plusieurs types de largeur et d'hauteur. Les marges intrieures, les bordures et les marges extrieures sont des lments prendre
en compte, et c'est pourquoi jQuery a cr plusieurs mthodes pour rpondre ce systme.
www.siteduzero.com
40/60
Mais comment prendre en compte les marges extrieures ?
Pour cela, il faut passer la valeur true aux mthodes outerHeight() et outerWidth().
Code : JavaScript
$('p').height(); // retourne la hauteur stricte du paragraphe
$('p').innerWidth(); // retourne la largeur (avec marges
intrieures) du paragraphe
$('p').outerWidth(); // retourne la largeur (avec marges intrieures
+ bordures) du paragraphe
$('p').outerHeight(true); // retourne la hauteur (avec marges
intrieures + bordures + marges extrieures) du paragraphe
Le style CSS d'une page web est facilement modifiable, et il est possible de raliser d'excellentes choses si on couple ce systme
avec les vnements. Si vous n'avez pas tout fait compris le chapitre, nous vous invitons le relire, car c'est une part
importante de jQuery.
Le prochain chapitre sera sous forme de TP : vous allez enfin pouvoir mettre en pratique vos nouvelles connaissances !
www.siteduzero.com
41/60
TP : le formulaire interactif
Bienvenue dans votre premier Travail Pratique !
Cela va tre l'occasion pour vous de mettre en pratique tout ce que vous venez d'apprendre travers les chapitres de cette partie
sur les bases de jQuery. Prparez-vous bien, et n'hsitez pas relire les chapitres que vous n'avez pas compris. Vous allez vous
charger de crer un formulaire interactif !
Explications et pr-requis
Le but de ce travail pratique est de raliser un formulaire interactif, que l'on animera grce jQuery. Ce sera un formulaire trs
basique, avec quatre ou cinq champs au maximum, qui verront leur style CSS changer suivant l'action de l'utilisateur. Le but est
en fait de vrifier les informations entres : nombre de caractres, vrifier que la confirmation du mot de passe est identique
celui-ci, vrifier si tous les champs sont remplis, etc.
Objectif concret
Ce formulaire devra contenir quatre champs :
un champ text pour le pseudonyme ;
un champ password pour le mot de passe ;
un deuxime champ password pour la confirmation du mot de passe ;
et un dernier champ text pour ce que vous voulez, comme l'adresse e-mail par exemple.
De mme, deux boutons devront permettre respectivement d'envoyer les donnes, et de vider les champs. Pas de langage
serveur pour ce TP : tout devra se drouler dans le ct client. videmment, vous devrez vous assurer par la suite, lorsque vous
coderez pour des projets destins au grand public, que les donnes sont bonnes du ct serveur, c'est trs important car le
JavaScript peut tre contourn !
Pour le moment, le but est juste de vous faire pratiquer. Vous devrez vous assurer que l'utilisateur rentre les bonnes infos, de la
bonne manire :
tous les champs devront contenir au moins 5 caractres ;
le mot de passe et la confirmation devront tre bien sr identique ;
si les champs sont vides lors de l'envoi, on affiche un message d'erreur.
Pour indiquer l'erreur au visiteur, il vous suffira d'utiliser CSS : une bordure de champ de couleur rouge ferait par exemple l'affaire.
De la mme manire, si le champ est bon, vous pourriez changer la couleur du champ adquat en vert.
Mthodes requises
Pour pouvoir raliser cela, vous allez devoir user des vnements, vous ne pourrez rien faire sans. De mme, la manipulation du
CSS doit tre matrise afin de pouvoir animer les champs. N'oubliez pas que vous devez traiter tous les cas, car il ne faut jamais
faire confiance l'utilisateur.
Pour rcuprer le contenu d'un champ, vous devrez utiliser une mthode que nous n'avons pas encore traite : val(). La
proprit length vous permettra, elle, de rcuprer la longueur d'une chane de caractre.
Nous vous donnons la structure HTML que nous utilisons, mais absolument rien ne vous empche de crer la votre !
Code : HTML
<div id="erreur">
<p>Vous n'avez pas rempli correctement les champs du formulaire
!</p>
</div>
<form>
<label for="pseudo">Pseudonyme</label> <input type="text"
id="pseudo" class="champ" /><br /><br />
<label for="mdp">Mot de passe</label> <input type="password"
id="mdp" class="champ" /><br /><br />
<label for="confirmation">Confirmation</label> <input
www.siteduzero.com
42/60
type="password" id="confirmation" class="champ" /><br /><br />

<label for="mail">E-mail</label> <input type="text" id="mail"
class="champ" /><br /><br />
<input type="submit" id="envoi" value="Envoyer" /> <input
type="reset" id="rafraichir" value="Rafrachir" />
</form>
Le bloc contenant le message d'erreur DOIT tre invisible par dfaut : nous vous suggrons d'utiliser la proprit
display : none.
Correction
Alors, avez-vous russi ?
Nous vous proposons une correction. Si vous n'avez pas russi obtenir quelque chose de correct, nous vous conseillons
vivement d'tre attentif la correction, vous comprendrez ainsi vos erreurs, et ne les referez plus (n'est-ce pas ?
).
La structure HTML que nous avons utilis est la suivante, pour rappel :
Code : HTML
<div id="erreur">
<p>Vous n'avez pas rempli correctement les champs du formulaire
!</p>
</div>
<form>
<label for="pseudo">Pseudonyme</label> <input type="text"
id="pseudo" class="champ" />
<label for="mdp">Mot de passe</label> <input type="password"
id="mdp" class="champ" />
<label for="confirmation">Confirmation</label> <input
type="password" id="confirmation" class="champ" />
<label for="mail">E-mail</label> <input type="text" id="mail"
class="champ" />
<input type="submit" id="envoi" value="Envoyer" /> <input
type="reset" id="rafraichir" value="Rafrachir" />
</form>
Formulaire basique, contenant quatre champs et deux boutons, prcd d'un bloc invisible contenant un message d'erreur. La
suite tait plutt simple : il ne fallait surtout pas oublier d'inclure le fichier du framework, sinon vous ne pouviez pas utiliser
jQuery :
Code : HTML
<div id="erreur">
<p>Vous n'avez pas rempli correctement les champs du formulaire !</p>
</div>
<form>
<label for="pseudo">Pseudonyme</label> <input type="text" id="pseudo"
class="champ" />
<label for="mdp">Mot de passe</label> <input type="password" id="mdp"
class="champ" />
<label for="confirmation">Confirmation</label> <input type="password"
id="confirmation" class="champ" />
<label for="mail">E-mail</label> <input type="text" id="mail" class="champ"
/>
<input type="submit" id="envoi" value="Envoyer" /> <input type="reset"
id="rafraichir" value="Rafrachir" />
</form>

<script
www.siteduzero.com
43/60
Le reste, c'tait faire au niveau du jQuery !
Explications du code jQuery

La premire des choses laquelle penser tait de s'assurer que le document tait charg. Pour cela, vous deviez utiliser
l'vnement ready(), comme appris au dbut de cette partie.
Code : JavaScript
// notre code ici
});
Une des bonnes pratiques adopter est de mettre vos objets jQuery dans des variables. Cela n'est absolument pas obligatoire,
mais a permet une plus grande lisibilit dans le code. En suivant cela, il fallait dterminer quels lments slectionner :
le champ du pseudonyme ;
les champs du mot de passe et de la confirmation ;
le champ de l'e-mail ;
le bouton d'envoi ;
le bouton de rafrachissement du formulaire ;
et enfin tous les champs en gnral (ceux ayant la classe .champ).
Code : JavaScript
var $pseudo = $('#pseudo'),
$mdp = $('#mdp'),
$confirmation = $('#confirmation'),
$mail = $('#mail'),
$envoi = $('#envoi'),
$reset = $('#rafraichir'),
$champ = $('.champ');
});
Le plus facile tant fait, je vous propose ensuite de dterminer quel vnement vous deviez utiliser. La bonne faon de faire tait
d'couter le clavier de l'utilisateur, grce l'vnement keyup(), et ce sur chaque champ du formulaire. Il suffisait ensuite de
vrifier avec une condition que la longueur de la chane de caractre tait suprieure 5, grce la mthode val() et l'objet
length que nous vous avions donns :
Code : JavaScript
// le code prcdent se trouve ici
$champ.keyup(function(){
if($(this).val().length < 5){ // si la chane de caractres est
infrieure 5
$(this).css({ // on rend le champ rouge
borderColor : 'red',
color : 'red'
});
}
else{
$(this).css({ // si tout est bon, on le rend vert
borderColor : 'green',
color : 'green'
www.siteduzero.com

});
});
44/60
Le principe tait similaire pour vrifier que la confirmation et le mot de passe tait identique :
Code : JavaScript
$confirmation.keyup(function(){
if($(this).val() != $mdp.val()){ // si la confirmation est
diffrente du mot de passe
color : 'red'
});
}
else{
color : 'green'
});
}
});
Nous devons maintenant nous occuper des boutons d'envoi et de rafrachissement. Dans le premier cas, il faut vrifier chaque
champ un un, pour voir si l'un d'entre eux est vide. Si c'est effectivement le cas, il faudra l'indiquer l'utilisateur en affichant le
message d'erreur, et galement en rendant rouge le champ vide.
Il y a plusieurs faons d'y parvenir, et celle que nous utiliserons ici n'est pas la meilleure. Il existe une mthode spcialement
adapte pour traiter chaque lment trouv un un, mais nous ne vous avons pas encore appris comment l'utiliser. A la place,
vous pouviez crer une fonction qui se chargeait de vrifier que le champ donn n'tait pas vide :
Code : JavaScript
function verifier(champ){
if(champ.val() == ""){ // si le champ est vide
$('#erreur').css('display', 'block'); // on affiche le message
d'erreur
champ.css({ // on rend le champ rouge
color : 'red'
});
}
}
En coutant le clic sur le bouton d'envoi, on pouvait ensuite lancer la fonction de vrification sur chaque champ :
Code : JavaScript
$envoi.click(function(e){
e.preventDefault(); // on annule la fonction par dfaut du
bouton d'envoi
// puis on lance la fonction de vrification sur tous les
champs :
verifier($pseudo);
verifier($mdp);
verifier($confirmation);
verifier($mail);
});
Le reste tait simplissime. Il fallait couter le clic sur le bouton de rafrachissement, et annuler tous les styles CSS sur le
www.siteduzero.com
45/60
formulaire :
Code : JavaScript
$reset.click(function(){
$champ.css({ // on remet le style des champs comme on l'avait
dfini dans le style CSS
borderColor : '#ccc',
color : '#555'
});
$('#erreur').css('display', 'none'); // on prend soin de cacher
le message d'erreur
});
Et voil, nous avons dsormais termin ! Avouez que ce n'tait tout de mme pas sorcier.
Code : JavaScript
var $pseudo = $('#pseudo'),
$mdp = $('#mdp'),
$confirmation = $('#confirmation'),
$mail = $('#mail'),
$envoi = $('#envoi'),
$reset = $('#rafraichir'),
$champ = $('.champ');
$champ.keyup(function(){
if($(this).val().length < 5){ // si la chane de caractres
est infrieure 5
color : 'red'
});
}
else{
color : 'green'
});
}
});
$confirmation.keyup(function(){
if($(this).val() != $mdp.val()){ // si la confirmation est
diffrente du mot de passe
color : 'red'
});
}
else{
color : 'green'
});
}
});
$envoi.click(function(e){
e.preventDefault(); // on annule la fonction par dfaut du
bouton d'envoi
champs :
// puis on lance la fonction de vrification sur tous les
www.siteduzero.com
});
46/60
verifier($pseudo);
verifier($mdp);
verifier($confirmation);
verifier($mail);
$reset.click(function(){
$champ.css({ // on remet le style des champs comme on
l'avait dfini dans le style CSS
borderColor : '#ccc',
color : '#555'
});
$('#erreur').css('display', 'none'); // on prend soin de
cacher le message d'erreur
});
function verifier(champ){
if(champ.val() == ""){ // si le champ est vide
$('#erreur').css('display', 'block'); // on affiche le
message d'erreur
champ.css({ // on rend le champ rouge
color : 'red'
});
}
}
});
Le code entier faisant moins de 100 lignes, autant vous dire que si vous n'aviez utilis que du JavaScript pur, vous en auriez eu
au moins le double ! C'est ce moment l qu'on se rend compte de l'efficacit de jQuery. Nous esprons que ce TP vous aura
permis de progresser, car la pratique est le meilleur moyen pour obtenir un certain niveau.
Amliorations
Ce formulaire peut encore tre amlior, dans le sens o vous pourriez restreindre encore plus les possibilits de l'utilisateur, en
interdisant de dpasser un certain nombre de caractres dans le pseudo, par exemple. De mme, le style est pour l'instant ultra
basique, rien ne vous empche de le sophistiquer, pour que l'exprience utilisateur soit pousse son maximum.
Quelques amliorations au niveau de la scurit pourraient tre apportes :
vous pourriez vrifier le format de l'adresse e-mail, grce une expression rgulire, faite avec l'objet Regex de JavaScript
;
vous auriez pu galement vrifier que le mot de passe tait sr, en faisant par exemple un mini-indicateur de sret qui se
baserait sur le nombre de caractres, leur diversit, ...
il est possible d'afficher un message d'aide pour chaque champ, lorsque l'utilisateur tape du texte dans ceux-ci ;
...
Le formulaire tant trs basique, des champs auraient eu leur place, comme le sexe, l'ge, la localisation ou mme le prnom.
Essayez de faire cela vous-mme, cela ne sera que bnfique et positif pour votre apprentissage, croyez-nous !
Ce TP ne vous a-t-il pas trop fatigu ? Non ? Tant mieux, car la suite va tre encore pire !
La prochaine partie sera consacre la manipulation du code HTML la vole, directement dans la page, grce aux fonctions de
parcours, aux attributs et la manipulation du DOM. Vous verrez galement comment matriser l'animation de vos lments avec
jQuery, ce qui est une trs bonne chose quand on sait que c'est l'un des plus gros points forts du framework ! Trve de
bavardage, nous vous invitons passer la suite, pour que vous puissiez subir un nouveau TP le plus vite possible.
www.siteduzero.com
Partie 3 : Manipulation du DOM et animations
47/60

La manipulation du DOM se fait d'une manire adapte en jQuery. Nous allons en voir les diffrents aspects, et nous traiterons
galement l'animation, une part extrmement utilise par la majorit des dveloppeurs en jQuery !
Des effets sur votre site avec jQuery !

Vous voil dans la troisime partie !
Nous allons passer la vitesse suprieure, car vous avez les bases en jQuery. Dans cette partie, nous verrons comment parcourir
le DOM, modifier le code HTML la vole, et comment animer concrtement votre site web. Cette dernire chose sera tudie
dans ce chapitre, avec ce qu'on appelle les effets.
Animez vos lments

Une des plus puissantes fonctionnalits de jQuery est sans doute l'animation. En effet, le framework vous permet de lancer des
effets sur absolument tout et n'importe quoi. Mais concrtement, comment cela se passe-t-il ? Le mcanisme est en fait trs
simple si on l'aborde de manire thorique : c'est simplement une proprit CSS qui se droulera pendant un interval de temps,
donn en millisecondes.
Une mthode native de jQuery permet de grer l'animation des lments : il s'agit de animate().
Des animations personnalises

La mthode animate() est trs puissante dans le sens o elle peut recevoir une foule d'arguments diffrents. Le principe
d'utilisation le plus frquent que vous aurez appliquer est de passer un objet la mthode, contenant les proprits CSS
animer. Oui, vous l'aurez de suite compris : c'est la mme chose que pour la mthode css() !
La diffrence avec cette dernire mthode, c'est que animate() peut dfinir en plus :
duration : le temps de droulement de l'animation, toujours en millisecondes ;
easing : la faon d'acclerer de l'animation, c'est--dire comment va-t-elle voluer au cours du temps ;
complete : et enfin une fonction de callback, qui est l'action appele lorsque l'animation est termine.
Ces arguments sont facultatifs ; par dfaut, ils sont rgls respectivement normal, swing et null. Nous verrons plus tard
ce que ces valeurs signifient, et comment les modifier.
Code : JavaScript
$('p').animate({
width : '150px',
fontSize : '35px', // ne pas oublier la syntaxe de
l'identifiant !
marginTop : '50px'
});
Lors du lancement de cette animation, mon paragraphe s'largira, se dplacera par rapport la hauteur du document, et verra sa
taille de police se fixer 35px.
duration : le temps de droulement

Le temps de droulement d'une animation est un facteur important : en effet, si votre animation est trop rapide, l'utilisateur risque
de ne pas la voir. D'un autre ct, si elle est trop lente, il s'ennuiera et trouvera votre site web lourd et sans intrt. Il va donc
vous falloir trouver la bonne dure pour lancer votre animation. Cela dpendra notamment de son ampleur sur le visiteur : par
exemple, si vous faites disparatre un sous-menu, cela sera plus rapide que si vous agrandissez un paragraphe de faon
gigantesque. Il faut vous adapter.
L'argument peut prendre deux types de valeur : une chane de caractre (string ) ou un nombre entier (int), qui reprsentera le
temps en millisecondes (nous insistons l-dessus, beaucoup de dbutants font l'erreur). La chane de caractre ne peut tre
qu'un de ces trois mots :
slow, qui quivaut une dure de 600 millisecondes ;
www.siteduzero.com
48/60
normal, la valeur par dfaut, qui est gale 400 millisecondes ;

et fast, qui reprsente une dure de 200 millisecondes seulement.
Code : JavaScript
$('p').animate({
width : '150px'
}, 'fast'); // premier exemple avec la valeur fast (200ms)
$('p').animate({
width : '150px'
}, 1000); // second exemple avec 1000ms (= 1s)
easing : l'volution de l'animation

L'volution de l'animation est la faon dont va se drouler celle-ci : est-ce qu'elle va aller de plus en plus vite au cours du temps ?
Va-t-elle rester constante ? Actuellement, jQuery ne propose malheureusement que deux faons de drouler l'animation :
swing, qui est la valeur par dfaut, fait aller l'animation de plus en plus vite au cours du temps, et ralentit la fin ;
linear, qui force l'animation se drouler la mme vitesse durant toute l'opration.
Pour user de plus de fonctions, il faudra passer par un plugin externe tel que jQuery UI. Nous apprendrons plus tard comment les
mettre en place.
Code : JavaScript
$('p').animate({
width : '150px'
}, 'linear'); // l'animation se droulera de faon linaire
complete : la fonction de retour

La fonction de retour, plus communment appele callback, est une action qui se lancera une fois l'animation termine. Il suffit
de donner une fonction anonyme en guise d'argument :
Code : JavaScript
$('p').animate({
width : '150px'
}, function(){
alert('Animation termine !');
});
La fonction de retour se lancera autant de fois qu'il y a d'lments anims sur la page : si par exemple vous avez trois
paragraphes et que vous lancez le code ci-dessus, trois alertes s'afficheront.
Deux arguments supplmentaires : step et queue

Ces deux arguments, step et queue, ne peuvent tre modifis qu'avec une certaine manire de rgler les arguments de la
mthode animate(). Ils ne sont pas directement accessibles : il vous faudra passer par un objet comme second argument.
Passer par un objet
www.siteduzero.com
49/60
Vous savez que le premier argument de la mthode est un objet, contenant chaque proprit animer. Ce qui est intressant, c'est
que les autres arguments peuvent se trouver sous forme d'objet eux aussi. Ainsi, ces deux animations feront exactement la mme
chose :
Code : JavaScript
$('p').animate({
width : '150px'
}, 1000, 'linear', function(){
});
// ce code est gal celui-ci :
$('p').animate({
width : '150px'
}, {
duration : 1000,
easing : 'linear',
complete : function(){
}
});
Ainsi, vous pourrez aussi agir sur les deux arguments step et queue :
step lancera une fonction chaque tape de l'animation, c'est--dire chaque proprit CSS traite ;
queue dterminera si une animation doit se terminer avant d'en lancer une seconde, et prendra un boolen en tant que
valeur.
Le second argument est utile si vous avez un chanage d'animation ou plusieurs animations la suite ; si vous voulez les lancer
toutes en mme temps, vous devrez mettre la valeur false : ainsi, les mthodes n'attendront pas la fin de la prcdente avant de
se lancer. Dans le cas contraire, queue devra tre dfini true.
Code : JavaScript
$('p')
.animate({
width : '150px'
}, {
duration : 1000,
queue : false
})
.animate({
fontSize : '35px'
}, 1000);
// les deux animations se lanceront en mme temps
Dfinition directe d'attributs

Il est possible que vous vouliez attribuer une acclration diffrente chaque proprit CSS anime. C'est tout fait possible de
faire cela depuis la version 1.4 du framework !
On utilisera en gnral la premire faon de faire, mais sachez qu'il en existe
deux : on peut passer par un tableau (array) ou une proprit dans le second argument (object).
Pour la premire mthode, vous devrez donner la nouvelle valeur de la proprit CSS dans un tableau, suivie du type
d'acclration (swing ou linear pour le moment).
Code : JavaScript
www.siteduzero.com
50/60
$('p').animate({
fontSize : ['50px', 'linear'], // cette proprit s'animera de
faon linaire
width : '200px' // les autres s'animeront de la faon dfinie
ensuite : swing
}, 'swing');
La seconde mthode est un peu plus complique mettre en place, dans le sens o vous devrez donner un objet un identifiant
d'un objet (qui, rappelons-le, est lui-mme un argument de la mthode d'animation). La proprit dfinir se nomme
specialEasing :
Code : JavaScript
$('p').animate({
fontSize : '50px',
width : '200px'
},
{
easing : 'swing'
specialEasing : { // on dfinit la proprit
fontSize : 'linear' // puis on liste toutes les proprits
CSS dans un objet en donnant leur volution
}
});
Astuces et cas spciaux

Il nous reste encore quelques petites choses mettre au point avant de passer la suite. En effet, nous n'avons pas encore parl
de certaines pratiques, qui mritent pourtant une place dans ce tutoriel.
Animer les couleurs

Vous l'aurez peut-tre remarqu si vous avez test quelques codes de votre ct, jQuery ne permet pas encore de traiter les
animations sur les couleurs. C'est bien dommage, car elles sont un lment important du style d'une page web. Pas de panique,
car un dveloppeur jQuery a cr un petit plugin open-source (sources libres) permettant de faire cela.
Nous vous invitons le tlcharger cette adresse (fichier jquery.color.js inclure dans votre page). Une fois inclu,
vous pourrez animer toutes les couleurs de n'importe quelle proprit :
Code : JavaScript
$('p').animate({
color : 'red',
backgroundColor : 'green'
});
Ajout de valeurs
Une astuce trs pratique en jQuery, c'est qu'il est possible d'ajouter une valeur une proprit CSS. Le principe est similaire
l'ajout de valeur en JavaScript : vous devez passer par les prfixes += ou -=.
Cela ne fonctionne qu'avec les donnes qui sont des nombres entiers (int).
Code : JavaScript
$('p').animate({
www.siteduzero.com
});
51/60
width : '+=50px', // ajoute 50px la largeur

height : '-=20px' // enlve 20px la hauteur
Animer les barres de dfilement

En CSS, il est impossible d'agir sur les barres de dfilement. C'est diffrent en JavaScript, et surtout en jQuery, qui met un point
d'honneur pouvoir les animer ! Les deux proprits influencer sont donc les suivantes :
scrollTop, qui agit sur la barre de dfilement verticale ;
scrollLeft, qui agit sur la barre horizontale (si elle existe).
Elles s'animent exactement de la mme faon que les autres proprits.
Les trois tats additionnels

Pas vraiment utiliss ni trs connus, ces trois tats ne sont autres que show, hide et toggle. Pourquoi disons-nous qu'ils ne
sont pas trs utiliss ? Parce que des mthodes spciales existent, et sont bien plus rapides mettre en place pour avoir le mme
rsultat.
Nanmoins, nous pensons que vous pouvez en avoir parfois l'utilit. Et si ce n'est pas le cas, un peu de culture ne vous fera pas
de mal, n'est-ce pas ?
Ces tats permettent d'agir seulement sur la proprit qui les utilise. Concrtement, ils ralisent ces actions :
show affiche la proprit ;
hide se charge de la cacher ;
toggle, lui, va faire la navette entre les deux : si la proprit est cache, il l'affiche, et vice versa.
Ils s'utilisent donc de cette faon :
Code : JavaScript
$('p').animate({
width : 'show' // anime la largeur pour afficher le paragraphe
});
$('p').animate({
width : 'hide' // anime la largeur pour cacher le paragraphe
});
$('p').animate({
width : 'toggle' // anime la largeur pour cacher ou afficher le
paragraphe
});
Les effets natifs

Certains puristes nous diront qu'on ne peut pas parler de nativit avec un framework, car ce n'est pas un langage proprement
parl. Nanmoins, jQuery est tellement part et redfinit tellement de notions que nous pensons pouvoir nous permettre de faire
ce petit abus de langage.
Maintenant que c'est clair, vous vous posez surement une question : que sont les effets natifs de jQuery ?
Le retour des trois tats

Nous avions parl brivement des trois tats show, hide et toggle, qui pouvaient tre utiliss avec les proprits CSS
directement dans la mthode animate(). C'tait bien jusqu' maintenant, mais sachez que des mthodes spciales existent
justement pour faire cela !
Comme vous l'aurez surement devin, il s'agit des fonctions :
www.siteduzero.com
52/60
show() ;
hide() ;
et toggle().
Ces mthodes fonctionnent toutes de la mme faon, et prennent le mme type d'arguments : duration, qui est, pour rappel, la
dure de droulement en millisecondes, et complete, l'ternelle fonction de retour. Ils sont facultatifs.
Code : JavaScript
$('p').hide('slow'); // cache le paragraphe en 600ms
$('p').show('fast', function(){
alert('Paragraphe affich !');
}); // affiche le paragraphe en 200ms, et lance une alerte la fin
de l'animation
Le cas de toggle()
La mthode toggle() est un peu particulire, tant donn qu'elle agit sur l'objet jQuery en fonction de son tat courant : s'il est
cach, elle l'affiche, s'il est affich, elle le cache. L o vous devez vous rendre compte de son utilit, c'est qu'elle accepte un
argument de condition. Vous pouvez agir dessus grce un boolen, par exemple. Si on lui indique true, elle affichera l'lment,
si on lui indique false, elle fera l'inverse.
Code : JavaScript
$('p').toggle(true); // aura le mme rle que show()
$('p').toggle(false); // aura le mme rle que hide()
Des mthodes plus esthtiques

Afficher et cacher des lments, c'est bien, le faire esthtiquement, c'est mieux ! Ainsi, jQuery propose six mthodes permettant
de faire exactement la mme chose que les fonctions vues prcdemment, mais de faon plus travaille. Comprenons-nous bien :
la finalit est exactement la mme.
Drouler et enrouler
Vous avez sans doute dj vu des sites web utilisant ce genre de chose, pour un systme de drouler / enrouler notamment.
Pour raliser cela, rien de plus simple :
slideDown() droule l'lment pour l'afficher ;
slideUp() enroule l'lment pour le cacher ;
slideToggle() enroule ou droule selon l'tat courant de l'lment.
Les arguments ne changent pas, ils sont les mmes que pour show(), hide() et toggle().
Apparition et disparition
On va jouer ici sur l'opacit de l'lment influenc.
fadeIn() affiche l'lment progressivement ;
fadeOut() cache l'lment, en ajustant l'opacit galement.
fadeToggle() affiche ou cache l'lment, grce l'opacit.
Le framework met galement disposition une fonction permettant de contrler l'opacit finale de l'lment anim. Il s'agit de
fadeTo(), qui prend en argument obligatoire un nombre dcimal (float) entre 0 et 1 indiquant l'opacit.
www.siteduzero.com
53/60
Code : JavaScript
$('p').fadeTo('normal', 0.5); // ajuste l'opacit et la fixe 0.5
L'argument de dure de l'animation est dfinit comme tant facultatif ; nanmoins, vous devez l'indiquer, sans quoi la
mthode ne fonctionnera pas.
Dclencheur d'vnement
Une mthode trs particulire que le dclencheur d'vnement. Vous avez dj vu l'vnement trigger(), dans le chapitre sur
les vnements. Eh bien, la mthode que nous allons tudier maintenant se nomme triggerHandler(), et ralise la mme
chose, quelque diffrences prs.
Cette fonction dclenche l'vnement donn, mais n'associe en aucun cas l'action du navigateur. Par exemple, admettons le code
suivant :
Code : JavaScript
$('#bouton1').click(function(){
$('#champ').trigger('focus');
});
$('#champ').focus(function(){
alert('Bonjour !');
});
Une fois le bouton cliqu, le navigateur, par l'vnement focus(), va associer le curseur de votre souris au champ de texte.
C'est parfois fcheux, et pour viter a, il existe la mthode triggerHandler().
Seconde restriction : seul le premier lment slectionn sera influenc.
Reprenez le contrle des effets

Faire des effets avec jQuery, c'est bien, mais avoir un total contrle sur eux, c'est encore mieux ! Rappelez-vous toujours que la
politique du framework est de vous offrir un maximum de souplesse et de possibilits dans votre code. Ainsi, il existe des
mthodes qui ont pour rle de vous aider matriser vos effets : quand les dclencher, les arrter, les ordonner, et mme les
influencer !
Vous allez voir dans cette partie tout ce qui traite la manipulation des animations.
Le concept de file d'attente

Vous ne le savez peut-tre pas, mais ce systme, vous l'utilisez chaque fois que vous animez un lment d'une page web. Les
mthodes permettant d'animer sont toutes bases dessus : ainsi, si vous avez quatre animations diffrentes, elles se drouleront
dans l'ordre chronologique, en attendant que la prcdente se termine avant de se lancer. C'est ce qu'on appelle les files
d'attente en jQuery. Plus concrtement, en employant le jargon technique, c'est simplement un tableau qui va lister les fonctions
et les excuter une une jusqu' arriver au terme. En anglais, on l'appelera queue.
Manipuler le tableau de fonctions

Il est possible de manipuler le tableau de fonctions, la queue, grce une mthode au nom loquent : queue(). Cette fonction
est utiliser sur un lment qui subit une ou plusieurs animations. En modifiant certains arguments, vous serez ainsi capable de
modifier directement l'array !
Code : JavaScript
$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
www.siteduzero.com
54/60
$('p').slideDown();
var fileAttente = $('p').queue('fx'); // je stocke la file
d'attente, le tableau, dans une variable
alert(fileAttente.length); // renvoie 4
On peut spcifier le nom de la file d'attente, en donnant un argument comme dans l'exemple ci-dessus. Le nom par
dfaut est fx .
Pour rajouter une fonction dans la file d'attente, il suffit de passer ladite fonction en tant qu'argument.
Code : JavaScript
$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();
$('p').queue(function(){
alert('Nouvelle fonction dans la file !'); // alerte s'affichant
la fin de la file
});
Enfin, la dernire chose possible faire est de carrment remplacer le tableau par un nouveau, que vous aurez cr directement.
Cela n'a pas normment d'intrt, mais c'est notamment utile dans le cas o vous voulez vider l'array, ce qui a pour effet
d'annuler toute animation.
Code : JavaScript
$('p').fadeOut();
$('p').fadeIn();
$('p').slideUp();
$('p').slideDown();
$('p').queue('fx', []); // fait disparatre le paragraphe, puis vide
la file d'attente
Ordonner la file d'attente

Prparez votre cerveau rsoudre des casses-tte, parce que la mthode que nous allons voir est un peu difficile utiliser. Il
s'agit de dequeue(), une fonction qui permet de supprimer l'animation en cours de la file d'attente, et de passer la suivante,
avant de remettre la fonction supprime la suite de la queue. Oui, c'est compliqu comprendre la premire fois, on le sait.
Prenons un petit exemple concret :
Code : JavaScript
$('p')
.animate({
fontSize : '+=100px'
})
.queue(function(){
alert('Bonjour !');
$(this).dequeue();
})
.css('color', 'red')
.queue(function(){
alert('Au revoir !');
});
www.siteduzero.com
55/60
Si on analyse l'action de ce code, il se passe ceci :

a.
b.
c.
d.
e.
f.
g.
la taille de la police augmente de 100 pixels,

une nouvelle fonction est ajoute la file,
la mthode dequeue() envoie la fonction excute aprs la fonction suivante ;
la couleur du texte change,
une alerte affiche Bonjour ! ,
une nouvelle fonction est ajoute la file,
une alerte affiche Au revoir ! .
On utilisera le slecteur $(this) pour lancer la mthode dequeue().
Suppression de fonctions non excutes

Pour une raison x ou y, vous pouvez tout fait stopper la file d'attente grce une mthode. Le rle de clearQueue() est de
supprimer toutes les fonctions de la file d'attente qui n'ont pas encore t excutes. Une autre mthode nous permet de faire
cela de faon un peu moins labore, que nous verrons ensuite.
Code : JavaScript
$('p').animate({
fontSize : '100px'
})
.queue(function(){ // on ajoute une fonction la file d'attente
alert('Bonjour !');
})
.clearQueue(); // empche l'alerte de s'afficher
Arrter les animations

Mthode trs utilise s'il en est, stop() a pour fonction premire de... stopper une animation, c'est exactement a.
Elle peut
prendre deux arguments au maximum, zro au minimum. On l'utilisera le plus souvent pour viter de lancer le mme effet plusieurs
fois de suite sans pouvoir l'arrter : un code JavaScript, a fait ce qu'on lui dit de faire sans se soucier d'autre chose. Par exemple,
imaginez qu'un utilisateur, lorsqu'il clique sur un bouton, lancer une animation spcifique. S'il clique plusieurs fois de suite sans
attendre la fin de l'animation, celle-ci va s'excuter autant de fois qu'on le lui aura indiqu !
Arrter une animation est donc une scurit, l'assurance qu'elle ne se lancera pas des dizaines et des dizaines de fois sans
pouvoir rien y faire. Les deux arguments possibles permettent :
de stopper une ou toutes les animations suivantes (boolen indiquer) ;
de laisser l'animation courante se drouler jusqu' son terme (galement un boolen).
Les cas que vous pourriez dfinir sont donc les suivants :
$('p:animated').stop(); arrte l'animation courante ;
$('p:animated').stop(true); annule toutes les animations suivantes, dont l'animation courante ;
$('p:animated').stop(false, true); arrte l'animation courante, mais la laisse aller jusqu' son terme (peu
d'intrt) ;
$('p:animated').stop(true, true); annule toutes les animations suivantes, mais laisse l'animation
courante se terminer.
Le slecteur :animated cible tous les objets jQuery actuellement anims.
Dsactivation
www.siteduzero.com
56/60
Enfin, pour terminer, sachez qu'une proprit permet de dsactiver toutes les animations de la page. Il suffit de passer true la
proprit jQuery.fx.off.
Ouf ! C'tait un chapitre assez consquent, vous ne trouvez pas ?
Les chapitres suivants seront un peu moins difficiles avaler, mais il faudra rester concentr, car nous abordons la manipulation
du DOM.
www.siteduzero.com
57/60
Manier les attributs

Aprs un chapitre assez long, qui concernait les animations, nous vous proposons de voir ce que sont les attributs, et comment
les influencer avec jQuery. C'est une part assez importante galement, donc soyez attentif et n'hsitez pas vous arrter pour
faire quelques essais.
Gestion gnrale des attributs

Avant de se lancer dans une foule d'explications toutes plus passionnantes les unes que les autres, il faut dj savoir ce que l'on
va traiter. Dans notre cas, il s'agit des attributs.
Bref rappel sur les attributs

En HTML, les attributs sont contenus dans des balises. Ils dfinissent en quelque sorte comment le navigateur doit interprter
un lment d'une page web. Pour tre bref et concis :
Citation : M@teo21
Les attributs sont un peu les options des balises. Ils viennent les complter pour donner des informations supplmentaires.
Sachez qu'il est possible d'influencer ces attributs avec jQuery, et donc de raliser une foule de choses rien qu'avec une seule
mthode, au moins aussi utilise que css() et animate() : attr() !
Rcuprer des valeurs

La fonction premire de attr() est de pouvoir rcuprer la ou les valeur(s) d'un attribut d'une balise. Il suffit de passer le nom
de l'attribut souhait en tant qu'argument :
Code : JavaScript
var cheminImage = $('img').attr('src'); // rentre le contenu de
l'attribut src dans une variable
(Re)dfinir un attribut
La seconde utilisation possible de cette mthode est de dfinir, ou redfinir un attribut en passant par un deuxime argument.
Comprenez par l que mme si l'attribut donn n'existe pas dans la balise, il sera cr automatiquement. De mme, la nouvelle
valeur donne crasera celle en place si elle est dj dfinie.
Code : JavaScript
$('img').attr('src', 'nouveauChemin/photo.png'); // change
l'attribut src en crasant l'ancienne valeur
$('img').attr('title', 'Nouvelle photo'); // cr l'attribut title
dans l'lment s'il n'existe pas
L'attribut type des formulaires ne peut pas tre chang, car Internet Explorer l'interdit. La fonction est donc bloque
sur tous les navigateurs.
Passer par un objet

Par soucis de performances, on prfra passe par un objet si l'on a plusieurs attributs influencer en mme temps. Les multiples
appels d'un mme objet jQuery sont viter, car ils sont gourmands et vos visiteurs risquent de ne pas apprcier si l'attente se
rvle trop longue. Il est alors possible de chaner les mthodes pour ne pas rcuprer plusieurs fois de suite le mme objet
jQuery, mais l encore, vous devrez taper plusieurs fois la mme fonction, ce qui au final se rvlera aussi lent.
Il existe alors une solution, qui est utiliser si vous tes dans ce cas-l. Il est possible de donner un objet en tant que paramtre
www.siteduzero.com
58/60
la mthode attr(), qui contiendra chaque attribut modifier et leurs nouvelles valeurs respectives.
Code : JavaScript
$('img').attr('src', 'nouveauChemin/photo.png');
$('img').attr('alt', 'Nouvelle photo');
$('img').attr('title', 'Nouvelle photo');
// mauvaise mthode
$('img').attr({
src : 'nouveauChemin/photo.png',
alt : 'Nouvelle photo',
title : 'Nouvelle photo'
});
// bonne mthode
Utilisation d'une fonction anonyme

Une fonction anonyme peut tre dclare en tant que valeur de l'attribut, c'est--dire en second argument. L'utilit est assez
contextuelle, mais sachez que cette mthode permet de rcuprer deux donnes et d'en faire usage :
l'index de l'lment trait (commence par 0), reprsent par un premier argument dans la fonction de retour ;
la valeur actuelle de l'attribut trait, reprsent par un second argument.
Code : JavaScript
$('img').attr('alt', function(index, valeur){
return index + 'me lment - ' + valeur;
});
Vous devrez obligatoirement retourner la nouvelle valeur de l'attribut.
Supprimer un attribut
Jusque l, il est possible d'craser un attribut en lui affectant une valeur nulle. Ce n'est pas trs propre, mais a fonctionne.
Pourtant, une mthode a t conue spcialement pour raliser cela : removeAttr(). Il suffit de lui passer le nom de l'attribut
en argument, et elle se charge de le supprimer dfinitivement du DOM.
Code : JavaScript
$('img').removeAttr('title'); // supprime l'attribut title des
images
Grer les classes proprement

Il est bien videmment possible de grer les classes des lments de votre page avec la mthode que l'on a vu prcdemment.
Seulement, un problme se pose : comment faire si l'on veut rajouter une classe sans supprimer celle actuellement en place ? Les
dveloppeurs de jQuery se sont penchs sur le sujet, et ont fini par crer des mthodes spcialement adaptes aux classes. On
en dnombre quatre pour le moment, et nous allons les voir ensemble.
Ajouter une classe

La mthode addClass() permet d'ajouter une classe l'lment spcifi. Veillez bien faire la diffrence avec la sous-partie
prcdente : nous avions dfini des attributs, mais pas ajout. L'ajout de classe signifie que la fonction prend en compte la ou les
classe(s) dj en place. Ainsi, vous pouvez donner plusieurs classes dynamiquement un lment, ce qui tait impossible avec
attr() !
De mme, il est possible d'ajouter plusieurs classes en mme temps en les sparant par des espaces.
www.siteduzero.com
59/60
Code : JavaScript
$('.vert').attr('class', 'rouge'); // cet lment aura la classe
.rouge
$('.vert').addClass('rouge'); // cet lment aura les classes .vert
et .rouge
$('.vert').addClass('rouge bleu jaune'); // cet lment aura les
classes .vert, .rouge, .bleu et .jaune
Vous pouvez excuter une fonction anonyme en tant qu'argument de la mme faon que dans la partie prcdente.
Supprimer une classe

La suppression de classe se fait galement avec une mthode adapte, qui ressemble fortement celle permettant de supprimer
un attribut. removeClass() prend le nom d'une ou de plusieurs classe(s) en paramtre, et les supprime de l'lment sans
influencer les autres.
Code : JavaScript
$('p').removeClass('vert'); // supprime la classe .vert de
l'lment
$('p').removeClass('vert rouge bleu'); // supprimer les classes
.vert, .rouge et .bleu
Prsence d'une classe

Pour vrifier qu'un lment possde bien une classe, il existe la fonction hasClass(). ELle ne peut prendre qu'un seul
argument, et malheureusement qu'une seule classe la fois. Elle est beaucoup utilise dans les conditions, car elle retourne un
boolen (soit true, soit false).
Code : JavaScript
if( $('p').hasClass('vert') ){ // si l'lment possde la classe
.vert
alert('Ce paragraphe est vert !'); // on affiche une alerte
}
Switcher une classe

Vous connaissez dj les mthodes telles que toggle(), qui permettent de basculer d'un tat l'autre. Lorsqu'on travaille avec
les classes, il est parfois judicieux d'utiliser ce concept. Ainsi, la fonction toggleClass() permet d'ajouter ou de supprimer
une classe donne !
Code : JavaScript
$('p').toggleClass('vert'); // ajoute la classe .vert si elle
n'existe pas, sinon, la supprime
Vous pouvez contrler l'action de cette mthode grce un second argument, sous la forme de boolen : true permettra
d'ajouter la classe, alors que false la supprimera.
www.siteduzero.com
60/60
Code : JavaScript
// ces deux codes sont quivalents :
$('p').addClass('vert');
$('p').toggleClass('vert', true);
// ces deux codes sont quivalents :
$('p').removeClass('vert');
$('p').toggleClass('vert', false);
Les attributs sont un passage obligatoire sur le chemin de la matrise du framework jQuery. Vous avez vu qu'ils sont extrmement
utiles, et croyez-nous : vous n'avez pas fini de les utiliser.
Dans le prochain chapitre, nous apprendrons nous dplacer dans le DOM, pour exploiter chaque lment d'une page web
dynamiquement !
Nous esprons que ce tutoriel vous a permis de dbuter en jQuery dans les meilleures conditions.
N'hsitez pas nous laisser un petit commentaire pour nous faire part de vos impressions sur ce tutoriel, nous les lirons avec
attention !
Ce tutoriel est sous licence Creative Commons BY-NC-SA 2.0 .
www.siteduzero.com

Web Dyna J Query

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Dyna J Query

Uploaded by

Copyright:

Available Formats

Un site web

Licence Creative Commons BY-NC-SA 2.0

De quels outils a-t-on besoin ? .......................................................................................................................................... 9

Rappels gnraux sur JavaScript ................................................................................................................................... 15

Partie 2 : Les bases du framework ! .................................................................................................. 18

Les slecteurs ................................................................................................................................................................. 26

jQuery et les vnements ............................................................................................................................................... 30

Manipuler le code CSS avec jQuery ............................................................................................................................... 37

TP : le formulaire interactif .............................................................................................................................................. 41

Partie 3 : Manipulation du DOM et animations .................................................................................. 47

Manier les attributs .......................................................................................................................................................... 56

Un site web dynamique avec jQuery !

Un site web dynamique avec jQuery !

Mise jour : 21/05/2012

jQuery, crivez moins, faites plus.

Un site web dynamique avec jQuery !

Partie 1 : Introduction jQuery

Partie 1 : Introduction jQuery

jQuery : l'histoire d'un framework !

Mais... c'est quoi jQuery ?

jQuery, un framework JavaScript

Partie 1 : Introduction jQuery

JavaScript ou... jQuery ?

jQuery, un framework JavaScript

Et oui ! Ce petit fichier, c'est bien jQuery !

jQuery, un framework ou une librairie ?

Partie 1 : Introduction jQuery

Le cas le plus simple : une librairie

Un cas plus complexe : un framework

A quoi va nous servir jQuery ?

Les points forts de jQuery

Partie 1 : Introduction jQuery

jQuery et les animations

jQuery et les formulaires

Partie 1 : Introduction jQuery

Des sites qui utilisent jQuery

Partie 1 : Introduction jQuery

De quels outils a-t-on besoin ?

Le choix du navigateur web

Un navigateur web gratuit et extrmement performant sign par la Mozilla

Partie 1 : Introduction jQuery

Un incontournable : Firebug pour Firefox !

Ajoutez Firebug votre navigateur Firefox !

Dans une optique d'aide au dveloppement, l'extension Firebug se

Utiliser la bote outils Firebug !

Partie 1 : Introduction jQuery

Firebug ouvert dans le navigateur Firefox !

Partie 1 : Introduction jQuery

Un diteur de texte efficace

Un diteur de texte performant et efficace

Le code du framework jQuery ouvert sous Notepad++

Partie 1 : Introduction jQuery

L'diteur Gedit sous GNU/Linux Ubuntu 10.04

Le logo de l'diteur Smultron sous MacOS X

Partie 1 : Introduction jQuery

Partie 1 : Introduction jQuery

Rappels gnraux sur JavaScript

O et quand utiliser JavaScript ?

O placer son code JavaScript ?

Quand et comment l'utiliser ?

Partie 1 : Introduction jQuery

De la dclaration des variables

Cas des fonctions anonymes