7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 1/32
Cours jQuery
Module: Technologie web 2.0
Préparé par: Up WebClasse: 3ème année !P"#T
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 2/32
Plan du cours
#. #n$roduc$ion
##. %es sélec$eurs
###. %es é&ènemen$s#'. (uel)ues e*e$s
'. Manipula$ion du +,M
2
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 3/32
I. Introduction
1. Principe
2. Utilisationa. Chargement de la bibliothèque
b. Lancement au chargement de la page
3. Utilisation de plugins
3
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 4/32
I. Introduction
1.Principe
• jQuery est une bibliothèque !a"a#cript qui a pour butde soulager le d$"eloppeur des t%ches &astidieuses degestion de compatibilit$ inter'na"igateurs( ainsi que delui &ournir des e)ets classiques * cle& en main +.
• Une &onction incontournable de cette bibliothèque estla &onction jQuery,- ou son alias -/( qui a demultiples usages comme nous allons le "oir.
• Le but de ce chapitre nest pas de donner une listed$taill$e de toutes les propri$t$s et m$thodes d$/niespar cette bibliothèque. Le site o0ciel de !queryhttpjquery.com le &ait bien plus complètement ilsagit simplement de &ournir les bases permettant desaisir le principe de &onctionnement de la bibliothèque.
4
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 5/32
I. Introduction
2.Utilisation
a. Chargement de la bibliothèque
• Pour commencer( il &aut $"idemmentt$l$charger la bibliothèque( qui est disponible
sur le site o0ciel. 5l su0t ensuite delincorporer 6 laide dun $l$ment script danslent7te du document 89:L
• Le script doit 7tre pr$sent sur le ser"eur a/nde limiter les risques de rejet du code li$ 6 la
protection contre les scripts inter'domaines.
scrip$ $pe4text/javascript 4 src4CheminRelatifVerse!ichi
erjQuery.js456scrip$5
;
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 6/32
I. Introduction
2.Utilisation
b. %ancemen$ au chargemen$ de la page• Pour ne lancer un script que lorsque lon est s<r que
lint$gralit$ du =>: a $t$ charg$e. jQuery o)re unem$thode plus souple( 6 laide de la m$thode read
• >n peut ainsi $crire
• >u bien
• ?n g$n$ral une $criture jQuery suit le synta@e sui"ant -selec$eur/.ac$ion/7
• 5l su0t de placer cette ligne de code entre les balisesAscriptB et AscriptB dans lent7te du document 89:L.
-,document-.read,GestionnaireALa
ncer - -,document-.read,&unction,-D...E-
-,document-.read,Festionnaire- 8unc$ion Festionnaire,e"t-D...E
G
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 7/32
I. Introduction
3.Utilisation des plugins
• jQuery est très utile en combinaison a"ec des e@tensions( ouplugins. 5l en e@iste de toutes sortes( disponibles sur lesite o0ciel des plugins ,httpplugins.jquery.com-( oH desd$monstrations sont possibles. I"ant de r$aliser un e)et( il estsou"ent judicieu@ de "$ri/er sil ne@iste pas d$j6 un plugin quipermet de le r$aliser( sou"ent a"ec des options attracti"es.
• Pour utiliser un plugin( il su0t de charger au pr$alable labibliothèque( puis le /chier !a"a#cript de le@tension.
J
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 8/32
II. Les sélecteurs
1. #$lecteurs de base
2. Kiltragea. Kiltre sur larborescence
b. Kiltre de contenu
c. Kiltre de "isibilit$
d. Kiltre dattributs
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 9/32
II. Les sélecteurs
1. Les sélecteurs de base
• La &onction M permet de s$lectionner directement des $l$ments 6 laidede la synta@e C## . =u coup on distingue
-49iden$4/ documen$.ge$lemen$#d4iden$4/ en plus court
a; !élec$eur na$i8:-4h24/<=; cible le deu@ième $l$ment h2 du document.
-4p4/.leng$h donne le nombre de paragraphes dans un document.
-4p4/ s$lectionne tous les $l$ments p du document.
b; !élec$eur de id:-4 9$ruc4/ s$lectionne l$l$ment portant lidenti/ant truc.
c; !élec$eur de class:-4 .$ruc4/ s$lectionne les $l$ments portant la classe truc.
• -4>4/ s$lectionne tous les $l$ments.
• 5l est possible dindiquer plusieurs s$lecteurs( 6 la manière des C## -4.$ruc? di&? 9machin4/ s$lectionne tous les $l$ments de classe truc(
tous les $l$ments di" et l$l$ment didenti/ant machin. N
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 10/32
II. Les sélecteurs
2. Filtrage
a. @il$res sur lAarborescence
• :Brs$ s$lectionne le premier $l$ment dune collection( :las$ ledernier. Par e@emple( M,O.truclastO- s$lectionne le dernier$l$ment de classe truc dans le document.
• :no$selec$eur/ permet de retirer de la s$lection tous les$l$ments sp$ci/$s. Par e@emple( -4.$ruc:no$.machin/4/ permet de s$lectionner tous les$l$ments de classe truc ne poss$dant pas la classe machin.
• :header s$lectionne tous les titres ,h1( h2( etc.-
• :odd et :e&en s$lectionne tous les $l$ments dordrerespecti"ement impair et pair dune collection. Par e@emple( M,tre"en- s$lectionne les lignes de tableau n( 2( 4( etc.
1
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 11/32
II. Les sélecteurs
2. Filtrage
b. @il$res de con$enu
• :con$ains$e$e/ s$lectionne tous les $l$mentscontenant un te@te donn$ ,par e@emple-4p:con$ainsD$es$D/4/ cible tous les paragraphes
contenant le te@te OtestO.
• :hassélec$eur/ s$lectionne les $l$ments contenantau moins un $l$ment s$lectionn$ par s$lecteur. Par
e@emple( M,Olihas,ul-O- s$lectionne les $l$ments ditemde liste ,li- contenant au moins une liste.
• :emp$ s$lectionne les $l$ments "ides.
11
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 12/32
II. Les sélecteurs
2. Filtrage
c. @il$res de &isibili$é
• :&isible s$lectionne les $l$ments qui sont "isibles
• :hidden s$lectionne les $l$ments qui ont $t$ cach$s ,"oir ci'après-
d. @il$res dAa$$ribu$s
• <a$$ribu$; s$lectionne les $l$ments poss$dantlattribut attribut.
• <a$$ribu$e&aleur; s$lectionne les $l$ments poss$dant un
attribut attribut "alant valeur . Par e@empleM,OtdRcolspanS2TO-s$lectionne les cellules de tableau@ s$tendant sur deu@colonnes.
12
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 13/32
III. Les évènements
1. ?"$nements du =>:
2. ou"eau@ $"$nements
3. Festionnaires d$"ènements4. ?@ercice Premiers e)ets
;. ?@ercice #$lecteurs
13
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 14/32
III. Les évènements
1. Evènements du D!
• Les $"$nements de la sp$ci/cation du =>:sont baptis$s simplement en enle"ant lepr$/@e OonO delattribut 89:L correspondant on obtientalors le nom de la m$thode 6 appliquer 6l$l$ment s$lectionn$.
•
Par e@emple( M,OpO-.clicV,&unction,-Dalert,OsalutWO-E-
14
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 15/32
III. Les évènements
2. "ouveau# Evénements
• jQuery d$/nit de nou"eau@ $"$nements. ?n "oiciquelques'uns
• mouseen$er est lanc$ quand la souris p$nètre
* au'dessus + dun $l$ment. 5l nest acti& qu6lentrée de la souris( contrairement aumouseo&er qui( lui( est lanc$ aussi quand lasouris sur"ole l$l$ment. 5l est associ$
6 mouselea&e( qui est acti& quand la sourisquitte l$l$ment.
• scroll est lanc$ quand lutilisateur &ait d$/ler lapage.
1;
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 16/32
III. Les évènements
3. $estionnaires d%événements
• Pour m$moire( un gestionnaire d$"$nement est une &onction destin$e 67tre lanc$e en r$ponse 6 une action de lutilisateur ,par e@emple un clic desouris sur un $l$ment donn$-. =e la m7me manière qua"ec le=>:( jQuery &ournit deu@ manières de d$/nir un gestionnaired$"$nement
• soit en indiquant le nom du gestionnaire( par e@emple...
• -,OpO-.clicE ,Festionnaire-
8unc$ion Festionnaire,e"t-Daler$,OCeci est un paragrapheO- E
• soit en codant directement le gestionnaire( par e@emple...
• -,OpO-.clicE ,&unction,-Dalert,OCeci est un paragrapheO-E-
1G
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 17/32
III. Les évènements
&. E#ercice' Premiers e((ets
• 5ns$rer deu@ paragraphes dans unepage html
• I)ecter au@ deu@ paragraphes legestionnaire clicVP associ$ au clic.Cette &onction change la couleur de
l$l$ment cliqu$ en rouge.
1J
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 18/32
III. Les évènements
). E#ercice' *électeurs
• Iu chargement de la page( a)ecter au@deu@ paragraphes de classe rouge legestionnaire clicVXouge associ$ au clic.
• Ce gestionnaire associe ensuite au clicsur chacun des paragraphes qui ne sont
pas de classe rouge le
gestionnaire clicVP( qui a0chelidenti/ant de l$l$ment cliqu$ dansune boYte dalerte.
1
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 19/32
I+. ,uel-ues e((ets
1. Ipparition( disparition
2. ?)ets personnalis$s( contrZle
3. ?@ercice ?)ets
1N
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 20/32
I+. ,uel-ues e((ets
1. pparition/ disparition
• show/ et hide/ permettent respecti"ement de montrer et cacher des$l$ments. Par e@emple( M,OpO-.hide,- cache tous les paragraphes dudocument.
• show&i$esse/ et hide&i$esse/ permettent respecti"ement de montrer etcacher des $l$ments a"ec une certaine "itesse. Cette "itesse est indiqu$epar des mots'cle&s ,4slow4?4normal4 ou 48as$4- ou le nombre de
millisecondes que doit durer lanimation.• $oggle/ et $oggle&i$esse/ permettent de basculer dun mode da0chage
6 un autre ,un $l$ment cach$ de"ient "isible( ou un $l$ment "isible de"ientcach$-.
• slide+own/ et slideUp/ permettent de &aire apparaYtre ,respecti"ementdisparaYtre- un $l$ment 6 la manière dun store se d$roulant ou senroulant.
• slideToggle/ permet de basculer dun mode da0chage 6 un autre.• 8ade#n&i$esse/ et 8ade,u$&i$esse/ permettent de &aire progressi"ement
apparaYtre ,ou disparaYtre- un $l$ment en jouant sur sa transparence.
2
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 21/32
I+. ,uel-ues e((ets
2. E((ets personnalisés/ contr0le
• anima$eparamè$res/ permet decontrZler une animation( "ia pare@emple les propri$t$s C##.
• s$op/ arr7te toutes les animations encours sur le document
• F(uer.8.o* $rue7 permet ded$sacti"er toutes les animations dundocument.
• F(uer.8.o* 8alse7 les r$acti"e.21
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 22/32
I+. ,uel-ues e((ets
3. E#ercice' E((ets
• Iu chargement de la page( associer lesgestionnaires clicVPair et clicV5mpair respecti"ementau@ items de liste num$rot$s par des nombres
respecti"ement pair et impair ,attention( lanum$rotation commence 6 ...-.
• Le gestionnaire clicV5mpair permet da0cher et demasquer lautre liste. Par e@emple( si on clique sur
O5tem 1.1O( la seconde liste disparaYt elle r$apparaYtcependant si on clique sur( par e@emple( O5tem 1.3O.
• Le gestionnaire clicVPair &ait la m7me chose( maisa"ec un e)et de d$roulement.
22
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 23/32
+. !anipulation du D!
1. Cr$ation des noeuds
2. :odi/cation des noeuds
3. 5nsertion de contenua' 5nsertion 6 lint$rieur dun $l$ment donn$e
b' 5nsertion 6 le@t$rieur dun $l$ment donn$e
c'5nsertion autour dun $l$ment donn$e
4. Xemplacement et suppression;. ?@ercice :anipulation du =>:
23
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 24/32
+. !anipulation du D!
1. réation des noeuds
• La &onction M permet de &acilementcr$er des n[uds. par e@emple
cr$e un $l$ment di" contenant un
paragraphe.
• Ittention cependant( un tel $l$mentreste * en suspens + tant quil na pas
$t$ e@plicitement rattach$ au =>:( dem7me quun $lement cr$$ a"ec lam$thode create?lement,-.
24
-4di&5p5Un peu de$e$e6p56di&54/
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 25/32
+. !anipulation du D!
2. !odi(ication des noeuds
• jQuery &acilite laccès et la modi/cation des contenus des n[uds.
• Le code 89:L est accessible "ia la m$thode html,-. #i cette m$thode estappel$e sans argument( elle ren"oie le contenu 89:L de l$l$ments$lectionn$. Iinsi( si on a
• aler$-49p=4/.h$ml//7
a0chera Un peu de $e$e em5impor$an$6em5
• #i cette m$thode est appel$e a"ec argument( alors elle permet de modi/er lecontenu 89:L. 9oujours a"ec le m7me code source 89:L(
• aler$-49p=4/.h$ml4Un peu de $e$e s$rong5$rès
impor$an$6s$rong5.4//a pour e)et de remplacer le code source initial.
• La m$thode te@t,- permet( elle( de lire ou de modi/er le contenu te@tuel des$l$ments au@quels elle est appliqu$e. -49id=4/.$e$/ lit ainsi le contenu del$l$ment didenti/ant id=( alors que -4li4/.$e$4salu$4/7 permet demodi/er le contenu de tous les $l$ments li en OsalutO.
2;
p id4p=45Un peu de$e$eem5impor$an$6em5.6p5
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 26/32
+. !anipulation du D!
3. Insertion de contenu
a. #nser$ion G lAin$érieur dAun élémen$ donné
• Les m$thodes appendcon$enu/ et prependcon$enu/
ajoutent contenu 6 l$l$ment s$lectionn$( respecti"ement 6sa /n et 6 son d$but.
•
Lesm$thodes appendTosélec$eur/ et prependTosélec$eur/
ajoutent l$l$ment s$lectionn$ 6 la /n ,respecti"ement aud$but- de l$l$ment sp$ci/$ par s$lecteur. Par e@emple
Ijoute un $l$ment span 6 la /n de tous les paragraphes dudocument.
2G
-4span5@in deparagraphe/6span54/.appendTo-4p4//7
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 27/32
+. !anipulation du D!
3. Insertion de contenu
b. #nser$ion G lAe$érieur dAun élémen$ donné• a8$ercon$enu/ et be8orecon$enu/ sont des
m$thodes qui ajoutent contenu respecti"ement aprèset a"ant l$l$ment s$lectionn$.
• inser$H8$ersélec$eur/ et inser$e8oresélec$eur/
sont deu@ m$thodes qui ajoutent l$l$ment s$lectionn$après ,respecti"ement a"ant- l$l$ment sp$ci/$par s$lecteur. Par e@emple
Ijoute un paragraphe a"ant tous les titres dudocument( 6 le@ception des titres h1.
2J
-4p5@in de sec$ion/6p54/.inser$e8ore-4>:header:no$h=/4//7
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 28/32
+. !anipulation du D!
3. Insertion de contenu
c. #nser$ion au$our dAun élémen$ donné
• wraph$ml/ permet dint$grer l$l$ments$lectionn$ dans le code 89:L sp$ci/$.
• wrapélémen$/ permet dint$grer l$l$ments$lectionn$ dans l$l$ment sp$ci/$.
• Par e@emple
Permettent dentourer tous les paragraphespar un $l$ment di".
2
-4p4/.wrap-4di&56di&54//7-
4p4/.wrapdocumen$.crea$elemen$di&//7
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 29/32
+. !anipulation du D!
&. emplacement et bsuppression14
• replaceHllsélec$eur/ permet de remplacerl$l$ment indiqu$ par s$lecteur par le contenusp$ci/$( e@emple
Xemplace tous les titres de ni"eau 3 par desparagraphes a"ec le m7me contenu.
• replaceWi$hcon$enu/ permet de remplacerl$l$ment s$lectionn$ par contenu
remplace ainsi au clic un $l$ment em par un$l$ment strong.
2N
-4p5Paragraphe6p54/.replace
Hll4h34/7
-4em4/.clicE8unc$ion/I-
$his/.replaceWi$h4s$rong54J-$his/.$e$/J46s$rong54/K/7
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 30/32
+. !anipulation du D!
&. emplacement et bsuppression24
• Pour "ider un $l$ment s$lectionn$( on &aitappel 6 la m$thode emp$/. Par e@emple
laisse pr$sent l$l$ment didenti/ant p1( maissupprime tous ses en&ants.
• La m$thode remo&eepression/ supprimede l$l$ment s$lectionn$ le contenu indiqu$
par e@pression Par e@emple
supprime tous les paragraphes contenant lachaYne de caractères OtestO.
3
-49p=4/.emp
$/
-4p4/.remo&e-4:con$ainsA$es$A/4//7
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 31/32
+. !anipulation du D!
). E#ercice' !anipulation du D!
• Iu chargement de la page( a)ecter les gestionnairessui"ants au clic sur les listes
• Le gestionnaire ajoute associ$ 6 la première liste luiajoute un $l$ment ditem de liste ,li-. Cet item contient
le te@te O5temO sui"i du num$ro de litem ,par e@emple(au premier clic( on obtient une liste dont le troisièmeitem contient O5tem 3O-.
• Le gestionnaire retire associ$ 6 la deu@ième liste enlè"ele dernier item de la première liste.
• Le gestionnaire remplace associ$ 6 la troisième listeremplace son premier item par le dernier de la premièreliste. Que se passe't'il quand on utilise replace\ith ]
31
7/21/2019 Cours Jquery
http://slidepdf.com/reader/full/cours-jquery 32/32
,uestion5
32