cours jquery

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



Plan du cours

#. #n$roduc$ion

##. %es sélec$eurs

###. %es é&ènemen$s#'. (uel)ues e*e$s

'. Manipula$ion du +,M

2



I. Introduction

1. Principe

2. Utilisationa. Chargement de la bibliothèque

b. Lancement au chargement de la page

3. Utilisation de plugins

3



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

http://jquery.com/

http://jquery.com/



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

;



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



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

http://plugins.jquery.com/






II. Les sélecteurs

1. #$lecteurs de base

2. Kiltragea. Kiltre sur larborescence

b. Kiltre de contenu

c. Kiltre de "isibilit$

d. Kiltre dattributs



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



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



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



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



III. Les évènements

1. ?"$nements du =>:

2. ou"eau@ $"$nements

3. Festionnaires d$"ènements4. ?@ercice Premiers e)ets

;. ?@ercice #$lecteurs

13




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




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;




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




&. 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




). 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



I+. ,uel-ues e((ets

1. Ipparition( disparition

2. ?)ets personnalis$s( contrZle

3. ?@ercice ?)ets

1N



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



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



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



+. !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




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/

http://www.gchagnon.fr/cours/dhtml/modifs.html







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




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$butde 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





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





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




&. 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




&. 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




). 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



,uestion5

32

cours jquery

Documents