Vous êtes sur la page 1sur 32

Cours jQuery

Module: Technologie web 2.0


Prpar par: Up Web
Classe: 3me anne ESPRIT

Plan du cours
I. Introduction
II. Les slecteurs
III. Les vnements
IV. Quelques effets
V. Manipulation du DOM

I. Introduction
1. Principe
2. Utilisation
a. Chargement de la bibliothque
b. Lancement au chargement de la page

3. Utilisation de plugins

I. Introduction
1.Principe
jQuery est une bibliothqueJavaScriptqui a pour but
de soulager le dveloppeur des tches fastidieuses de
gestion de compatibilit inter-navigateurs, ainsi que de
lui fournir des effets classiques clef en main.
Une fonction incontournable de cette bibliothque est
la fonction jQuery() ou son alias $(), qui a de
multiples usages comme nous allons le voir.
Le but de ce chapitre n'est pas de donner une liste
dtaille de toutes les proprits et mthodes dfinies
par cette bibliothque. Le site officiel de Jquery
http://jquery.com/le fait bien plus compltement; il
s'agit simplement de fournir les bases permettant de
saisir le principe de fonctionnement de la bibliothque.
4

I. Introduction
2.Utilisation
a. Chargement de la bibliothque
Pour commencer, il faut videmment
tlcharger la bibliothque, qui est disponible
sur le site officiel. Il suffit ensuite de
l'incorporer l'aide d'un lmentscriptdans
l'entte du documentHTML:
<scripttype="text/javascript"src="CheminRelatifVersLeFichi
erjQuery.js"></script>

Le script doit tre prsent sur le serveur afin


de limiter les risques de rejet du code li la
protection contre les scripts inter-domaines. 5

I. Introduction
2.Utilisation
b. Lancement au chargement de la page
Pour ne lancer un script que lorsque l'on est sr que
l'intgralit duDOMa t charge. jQuery
offre une
$
mthode plus souple, l'aide
de la mthodeready:
(document).ready(GestionnaireALa

On peut ainsi crire :

Ou bien :

ncer) ;
$(document).ready(function()
{...}) ;
$(document).ready(Gestionnaire) ;
functionGestionnaire(evt){...}

En gnral une criture jQuery suit le syntaxe suivant: $


(selecteur).action();
Il suffit de placer cette ligne de code entre les balises
<script> et </script> dans lentte du document HTML.
6

I. Introduction
3.Utilisation des plugins
jQueryest trs utile en combinaison avec des extensions, ou
plugins. Il en existe de toutes sortes, disponibles sur le
site officiel des plugins (http://plugins.jquery.com/), o des
dmonstrations sont possibles. Avant de raliser un effet, il est
souvent judicieux de vrifier sil nexiste pas dj un plugin qui
permet de le raliser, souvent avec des options attractives.
Pour utiliser un plugin, il suffit de charger au pralable la
bibliothque, puis le fichierJavaScriptde lextension.

II. Les slecteurs


1. Slecteurs de base
2. Filtrage
a.
b.
c.
d.

Filtre
Filtre
Filtre
Filtre

sur larborescence
de contenu
de visibilit
dattributs

II. Les slecteurs


1. Les slecteurs de base
La fonction$permet de slectionner directement des lments laide
de la syntaxeCSS. Du coup on distingue:
$("#ident")document.getElementById("ident")en plus court

a] Slecteur natif:
$("h2")[1]cible le deuxime lmenth2du document.
$("p").lengthdonne le nombre de paragraphes dans un document.
$("p")slectionne tous les lmentspdu document.

b] Slecteur de id:
$(" #truc")slectionne llment portant lidentifianttruc.

c] Slecteur de class:
$(" .truc")slectionne les lments portant la classetruc.

$("*")slectionne tous les lments.


Il est possible d'indiquer plusieurs slecteurs, la manire desCSS:$
(".truc, div, #machin")slectionne tous les lments de classetruc,
tous les lmentsdivet l'lment d'identifiantmachin.

II. Les slecteurs


2. Filtrage
a. Filtres sur l'arborescence
:firstslectionne le premier lment d'une collection,:lastle
dernier. Par exemple,$(".truc:last")slectionne le dernier
lment de classetrucdans le document.
:not(selecteur)permet de retirer de la slection tous les
lments
spcifis.
Par
exemple,$
(".truc:not(.machin)")permet de slectionner tous les
lments de classetrucne possdant pas la classemachin.
:headerslectionne tous les titres (h1,h2, etc.)
:oddet:evenslectionne
tous
les
lments
d'ordre
respectivement impair et pair d'une collection. Par exemple,$
(tr:even)slectionne les lignes de tableau n0, 2, 4, etc.
10

II. Les slecteurs


2. Filtrage
b. Filtres de contenu
:contains(texte)slectionne
tous
les
lments
contenant
un
texte
donn
(par
exemple:$
("p:contains(test)")cible tous les paragraphes
contenant le texte "test".
:has(slecteur)slectionne les lments contenant
au moins un lment slectionn parslecteur. Par
exemple,$("li:has(ul)")slectionne les lments d'item
de liste (li) contenant au moins une liste.
:emptyslectionne les lments vides.
11

II. Les slecteurs


2. Filtrage
c. Filtres de visibilit
:visibleslectionne les lments qui sont visibles
:hiddenslectionne les lments qui ont t cachs (voir ciaprs)
d. Filtres d'attributs
[attribut]slectionne les lments possdant
l'attributattribut.
[attribute=valeur]slectionne les lments possdant un
attributattributvalantvaleur. Par exemple:$("td[colspan=2]")
slectionne les cellules de tableaux s'tendant sur deux
colonnes.

12

III. Les vnements


1.
2.
3.
4.
5.

Evnements du DOM
Nouveaux vnements
Gestionnaires dvnements
Exercice: Premiers effets
Exercice: Slecteurs

13

III. Les vnements


1. Evnements du DOM
Les vnements de la spcification du DOM
sont baptiss simplement en enlevant le
prfixe"on"de
l'attributHTMLcorrespondant: on obtient
alors le nom de la mthode appliquer
l'lment slectionn.
Par
exemple,$("p").click(function()
{alert("salut!")})

14

III. Les vnements


2. Nouveaux Evnements
jQuery dfinit de nouveaux vnements. En voici
quelques-uns:
mouseenterest lanc quand la souris pntre
au-dessus d'un lment. Il n'est actif qu'
l'entrede
la
souris,
contrairement
au
mouseoverqui, lui, est lanc aussi quand la
souris
survole
l'lment.
Il
est
associ
mouseleave, qui est actif quand la souris
quitte l'lment.
scrollest lanc quand l'utilisateur fait dfiler la
page.
15

III. Les vnements


3. Gestionnaires dvnements
Pour mmoire, un gestionnaire dvnement est une fonction destine
tre lance en rponse une action de lutilisateur (par exemple un clic de
souris sur un lment donn). De la mme manire quavec le
DOM,jQueryfournit deux manires de dfinir un gestionnaire
dvnement:
soit en indiquant lenomdu gestionnaire, par exemple...
$("p").click(Gestionnaire) ;
functionGestionnaire(evt)
{
alert("Ceci est un paragraphe") ;
}
soit en codant directement le gestionnaire, par exemple...
$("p").click(function(){alert("Ceci est un paragraphe");}) ;

16

III. Les vnements


4. Exercice: Premiers effets
Insrer deux paragraphes dans une
page html
Affecter aux deux paragraphes le
gestionnaireclickPassoci au clic.
Cette fonction change la couleur de
l'lment cliqu en rouge.

17

III. Les vnements


5. Exercice: Slecteurs
Au chargement de la page, affecter aux
deux paragraphes de classerougele
gestionnaireclickRougeassoci au clic.
Ce gestionnaire associe ensuite au clic
sur chacun des paragraphesqui ne sont
pasde
classerougele
gestionnaireclickP,
qui
affiche
l'identifiant de l'lment cliqu dans
une bote d'alerte.
18

IV. Quelques effets


1. Apparition, disparition
2. Effets personnaliss, contrle
3. Exercice: Effets

19

IV. Quelques effets


1. Apparition, disparition
show()ethide()permettent respectivement de montrer et cacher des
lments. Par exemple,$("p").hide()cache tous les paragraphes du
document.
show(vitesse)ethide(vitesse)permettent respectivement de montrer et
cacher des lments avec une certaine vitesse. Cette vitesse est indique
par des mots-clefs ("slow","normal"ou"fast") ou le nombre de
millisecondes que doit durer l'animation.
toggle()ettoggle(vitesse)permettent de basculer d'un mode d'affichage
un autre (un lment cach devient visible, ou un lment visible devient
cach).
slideDown()etslideUp()permettent de faire apparatre (respectivement
disparatre) un lment la manire d'un store se droulant ou s'enroulant.
slideToggle()permet de basculer d'un mode d'affichage un autre.
fadeIn(vitesse)etfadeOut(vitesse)permettent de faire progressivement
apparatre (ou disparatre) un lment en jouant sur sa transparence.

20

IV. Quelques effets


2. Effets personnaliss, contrle
animate(paramtres)permet de
contrler une animation, via par
exemple les propritsCSS.
stop()arrte toutes les animations en
cours sur le document
jQuery.fx.off = true;permet de
dsactiver toutes les animations d'un
document.
jQuery.fx.off = false;les ractive.
21

IV. Quelques effets


3. Exercice: Effets
Au
chargement
de
la
page,
associer
les
gestionnairesclickPairetclickImpairrespectivement
aux items de liste numrots par des nombres
respectivement pair et impair (attention, la
numrotation commence 0...).
Le gestionnaireclickImpairpermet d'afficher et de
masquer l'autre liste. Par exemple, si on clique sur
"Item 1.1", la seconde liste disparat; elle rapparat
cependant si on clique sur, par exemple, "Item 1.3".
Le gestionnaireclickPairfait la mme chose, mais
avec un effet de droulement.
22

V. Manipulation du DOM
1. Cration des noeuds
2. Modification des noeuds
3. Insertion de contenu
a- Insertion lintrieur dun lment donne
b- Insertion lextrieur dun lment donne
c-Insertion autour dun lment donne

4. Remplacement et suppression
5. Exercice: Manipulation du DOM
23

V. Manipulation du DOM
1. Cration des noeuds
La fonction$permet de facilement
peu de
crer des nuds. par $("<div><p>Un
exemple:
texte</p></div>")
cre un lmentdivcontenant un
paragraphe.
Attention cependant, un tel lment
reste en suspens tant qu'il n'a pas
t explicitement rattach au DOM, de
mme qu'un lement cr avec la
mthodecreateElement().
24

V. Manipulation du DOM
2. Modification des noeuds
jQuery facilite l'accs et la modification des contenus des nuds.
Le codeHTMLest accessible via la mthodehtml(). Si cette mthode est
appele sans argument, elle renvoie le contenuHTMLde l'lment
slectionn. Ainsi, si on a:

<p id="p1">Un peu de


texte<em>important</em>.</p>
alert($("#p1").html());
afficheraUn peu de texte <em>important</em>
Si cette mthode est appele avec argument, alors elle permet de modifier le
contenuHTML. Toujours avec le mme code sourceHTML,
alert($("#p1").html("Un peu de texte <strong>trs
important</strong>."))
a pour effet de remplacer le code source initial.
La mthodetext()permet, elle, de lire ou de modifier le contenu textuel des
lments auxquels elle est applique.$("#id1").text()lit ainsi le contenu de
l'lment d'identifiant id1, alors que$("li").text("salut");permet de
modifier le contenu de tous les lmentslien "salut".

25

V. Manipulation du DOM
3. Insertion de contenu
a. Insertion l'intrieur d'un lment donn
Les mthodesappend(contenu)etprepend(contenu)
ajoutentcontenu l'lment slectionn, respectivement
sa fin et son dbut.
Les
mthodesappendTo(slecteur)etprependTo(slecteur)
ajoutent l'lment slectionn la fin (respectivement au
dbut) de l'lment
spcifi parslecteur.
Par exemple:
$("<span>(Fin
de
paragraphe)</span>").appendTo($("p"));

Ajoute un lmentspan la fin de tous les paragraphes du


document.

26

V. Manipulation du DOM
3. Insertion de contenu
b. Insertion l'extrieur d'un lment donn
after(contenu)etbefore(contenu)sont
des
mthodes qui ajoutentcontenurespectivement aprs
et avant l'lment slectionn.
insertAfter(slecteur)etinsertBefore(slecteur)
sont deux mthodes qui ajoutent l'lment slectionn
aprs (respectivement avant) l'lment spcifi
parslecteur. Par exemple:
$("<p>(Fin de section)</p>").insertBefore($
("*:header:not(h1)"));

Ajoute un paragraphe avant tous


document, l'exception des titresh1.

les

titres

du

27

V. Manipulation du DOM
3. Insertion de contenu
c. Insertion autour d'un lment donn

wrap(html)permet d'intgrer l'lment


slectionn dans le codeHTMLspcifi.
wrap(lment)permet d'intgrer l'lment
slectionn dans l'lment spcifi.
$("p").wrap($("<div></div>"));
Par exemple:
$
("p").wrap(document.createEle
ment(div));

Permettent d'entourer tous les paragraphes


par un lmentdiv.
28

V. Manipulation du DOM
4. Remplacement et bsuppression(1)
replaceAll(slecteur)permet
de
remplacer
l'lment indiqu parslecteurpar
le contenu
$
spcifi,("<p>Paragraphe</p>").replace
exemple:

All("h3");

Remplace tous les titres de niveau 3 par des

paragraphes avec le mme contenu.


replaceWith(contenu)permet
de
remplacer
l'lment slectionn
parcontenu:
$("em").click(function(){$

(this).replaceWith("<strong>"+$
(this).text()+"</strong>")});
remplace ainsi
lmentstrong.

au

clic

un

lmentempar

un
29

V. Manipulation du DOM
4. Remplacement et bsuppression(2)
Pour vider un lment slectionn, $on fait
appel la mthodeempty(). Par("#p1").emp
exemple:
ty()
laisse prsent l'lment d'identifiantp1, mais
supprime tous ses enfants.
La mthoderemove(expression)supprime
de l'lment slectionn le contenu indiqu
parexpression$("p").remove($
Par exemple:
(":contains('test')"));

supprime tous les paragraphes contenant la


chane de caractres"test".
30

V. Manipulation du DOM
5. Exercice: Manipulation du DOM
Au chargement de la page, affecter les gestionnaires
suivants au clic sur les listes:
Le gestionnaireajouteassoci la premire liste lui
ajoute un lment d'item de liste (li). Cet item contient
le texte "Item" suivi du numro de l'item (par exemple,
au premier clic, on obtient une liste dont le troisime
item contient "Item 3").
Le gestionnaireretireassoci la deuxime liste enlve
le dernier item de la premire liste.
Le gestionnaireremplaceassoci la troisime liste
remplace son premier item par le dernier de la premire
liste. Que se passe-t-il quand on utilisereplaceWith?

31

Question?

32