Programmation Web Avancee
JQuery
Thierry Hamon
Bureau H202 - Institut Galilee
Tel. : 33 [Link].53
Bureau 150 LIM&BIO EA 3969
Universite Paris 13 - UFR Leonard de Vinci
74, rue Marcel Cachin, F-93017 Bobigny cedex
Tel. : 33 [Link].07, Fax. : 33 [Link].55
[Link]@[Link]
[Link]
1/27
Introduction
Biblioth`eque Javascript
Developpee par John Resig
[Link]
Utilisation plus facile des fonctionnalites Javascript
Encapsulation de code Javascript pour en ecrire moins
Compatible avec la plupart des navigateurs
Exemple : JQuery g`ere les particularites de chaque navigateur
Possibilite dextensions `a laide de plugins
2/27
Exemples de sites Web
Google Code ([Link]
Amazon ([Link]
IBM ([Link]
Dell ([Link]
Microsoft
([Link]
NBC ([Link]
EDF ([Link])
Minist`ere de la Recherche
([Link]
...
3/27
Introduction
Objectifs :
Sabtraire des specicites des navigateurs
Eviter les manipulations rebarbatives et repetitives en
Javascript
Simplier lecriture du code et de certaines fonctionnalites
(gestion des menus, AJAX, animations, etc.)
// De f i l e me nt v e r t i c a l d un di v
$ ( . cont ent ) . s l i de Up ( ) ;
$ ( . cont ent ) . s l i deDown ( ) ;
Contrainte :
Javascript doit etre active
4/27
Utilisation
Inclusion de la librairie :
Developpement :
[Link]
Production (version miniale) :
[Link]
<s c r i p t type= t e x t / j a v a s c r i p t
s r c= ht t p : // code . j que r y . com/ j quer y 1. 6. 4. j s >
</s c r i p t >
<s c r i p t type= t e x t / j a v a s c r i p t >
// Code JQuery
</s c r i p t >
<s c r i p t type= t e x t / j a v a s c r i p t s r c= . / j s / j quer y 1. 6. 4. j s ></s c r i p t >
<s c r i p t type= t e x t / j a v a s c r i p t >
// Code JQuery
</s c r i p t >
5/27
Principe de fonctionnement
Denition dune fonction : jquery() ou $() (raccourci)
Remarques :
Accepte des param`etres (en general, un semecteur)
Retourne un objet JQuery
Est executee au cours du chargement de larbre DOM de la
page
Sinon, il faut utiliser [Link]
Utilisation de selecteurs CSS et JQuery pour acceder et
manipuler les elements de larbre
6/27
Selecteurs CSS
Similaires aux elements dune feuille de style, ou XPath
Exemples : #menuid, h2, .onglet, *, etc.
Syntaxe compl`ete : [Link]
Traversing/Selectors#CSS_Selectors
Exemple :
$ ( body )
7/27
Selecteurs JQuery
Selecteurs supplementaires nexistant pas en CSS ou XPath
(ou raccourcis)
Exemples : :visible, :first, etc
Syntaxe compl`ete : [Link]
Traversing/Selectors#Custom_Selectors
Exemple :
$ ( img : v i s i b l e )
NB : la documentation est assez variable `a ce sujet
8/27
Methodes
Chaque methode renvoie lobjet courant
Acc`es/modication au contenu dun objet : html()
Exemple :
$ ( body ) . html ( h e l l o wor l d ) ;
Forcer lutilisation de la fontion jquery() (`a la placede $() :
noConflict()
$ . n o Co n f l i c t ( )
ou
j que r y . n o Co n f l i c t ( )
9/27
Exemple complet
<html>
<head>
<t i t l e >Exempl e1</t i t l e >
<s c r i p t type= t e x t / j a v a s c r i p t
s r c= ht t p : // code . j que r y . com/ j quer y 1. 6. 4. j s >
</s c r i p t >
</head>
<body>
He l l o Worl d
<s c r i p t type= t e x t / j a v a s c r i p t >
$ ( body ) . html ( bonj our t out l e monde ) ;
</s c r i p t >
</body>
</html>
10/27
Methodes
Boucle : each(fonction)
Element courant dans la boucle : this
Acc`es aux elements precedents ou suivants : before(),
after(),
Eets : sildeDown, slideUp, etc.
Liste des methodes : [Link]
Possibilite denchaner les methodes :
$ ( #i t em1 ) . a f t e r ( a j out apr `e s ) . be f or e ( a j out avant ) ;
11/27
Execution du JQuery
apr`es chargement de larbre DOM
Par defaut, execution du JQuery lors du chargement
Probl`eme : tous les elements de la page ne sont pas
accessibles dans larbre DOM (meme `a la n de body)
Solution :
Utilisation de lev`enement onload ([Link])
Utilisation de la syntaxe specique Jquery
12/27
Exemple
Utilisation de onload
<html>
<head>
<t i t l e >Exempl e1</t i t l e >
<s c r i p t type= t e x t / j a v a s c r i p t
s r c= ht t p : // code . j que r y . com/ j quer y 1. 6. 4. j s >
</s c r i p t >
<s c r i p t type= t e x t / j a v a s c r i p t >
window . onl oad = f u n c t i o n ( ) {
$ ( body ) . html ( bonj our t out l e monde ) ;
}
</s c r i p t >
</head>
<body>
He l l o Worl d
</body>
</html>
13/27
Exemple
Syntaxe Jquery
<html>
<head>
<t i t l e >Exempl e1</t i t l e >
<s c r i p t type= t e x t / j a v a s c r i p t
s r c= ht t p : // code . j que r y . com/ j quer y 1. 6. 4. j s >
</s c r i p t >
<s c r i p t type= t e x t / j a v a s c r i p t >
$ ( f u n c t i o n ( ) {
$ ( body ) . html ( bonj our t out l e monde ) ;
}) ;
</s c r i p t >
</head>
<body>
He l l o Worl d
</body>
</html>
14/27
Variables
Declaration :
var n o m d e l a v a r i a b l e = V a l e u r i n i t i a l e ;
var body = $ ( body ) ;
Variables standards :
selector : Expression utilisee pour selectionner lelement
JQuery courant
$ ( img : v i s i b l e ) . s e l e c t o r ; // r e t our ne img : v i s i b l e
length ou size : Nombre delements contenus dans lobjet
JQuery courant
$ ( f u n c t i o n ( ) {
var bodycont ent = $ ( di v ) ;
$ ( #i d2 ) . html ( I l y a + bodycont ent . l e ngt h + el ement s di v
( s e l e c t e u r + bodycont ent . s e l e c t o r + ) ) ;
}) ;
15/27
text() vs. html()
html() : Remplacement du contenu dun element
(les balises sont considerees comme des balises)
text() : Remplacement du contenu dun element en
considerant le tout comme du texte
(les caract`eres < et > des balises sont remplaces par les
entites XML (> et <)
Idem pour les textes retournes par ces methodes
(Voir exemple 6)
16/27
Remplacement delement
replaceWith() : Remplacement de lelement courant (balise
et contenu) par lelement en param`etre (pas de duplication)
(voir exemple 7)
Param`etre : un objet JQuery ou une chane de caract`eres
replaceAll() : Remplacement de lelement en param`etre
(balise et contenu) par lelement sur laquelle est appliquee la
methode (pas de duplication)
(voir exemple 7b)
Param`etre : un objet JQuery ou un selecteur JQuery
17/27
Insertion / suppression
NB : permet aussi les deplacements delement
A linterieur :
prepend() (avant), append() (apr`es)
Param`etre : un objet JQuery ou une chane de caract`eres
(voir exemple 8)
prependTo() (avant), appendTo() (apr`es)
Param`etre : un objet JQuery ou un selecteur JQuery
(voir exemple 8b)
A lexterieur
before() (avant), after() (apr`es)
Param`etre : un objet JQuery ou une chane de caract`eres
(voir exemple 9)
insertBefore() (avant), insertAfter() (apr`es)
Param`etre : un objet JQuery ou un selecteur JQuery
(voir exemple 9b)
18/27
Encapsulation/Decapsulation
Ajout de balises :
A linterieur : wrap(), wrapAll()
$ ( #i d2 ) . wrap ( <b></b> ) ;
A lexterieur : wrapin()
$ ( #i d1 ) . wr apI nner ( <h1></h1> ) ;
Suppression de la balise parent : unwrap()
$ ( #i d4 ) . unwrap ( ) ;
(voir exemple 10)
19/27
Manipulation delements
Copie delement : clone()
$ ( #i d1 ) . c l one ( ) . i n s e r t Af t e r ( h2 ) ;
Suppression delement : remove()
$ ( #i d3 ) . remove ( ) ;
Suppression de tous les elements : empty()
$ ( #i d2 ) . empty ( ) ;
20/27
JQuery vs. DOM
$(body) : objet JQuery (methodes jquery applicables -
html())
$(body)[0] : objet DOM (les methodes jquery ne peuvent
pas etre appliquees)
$ ( #i d3 ) . html ( $ ( #i d1 ) . tagName ) ;
$ ( #i d4 ) . html ( $ ( #i d1 ) [ 0 ] . tagName ) ;
Un objet JQuery peut contenir 0, 1 ou plusieurs objets DOM
21/27
Manipulation de larbre DOM
Variables et Methodes
Variable tagName : nom de lelement DOM
Methodes :
methodes DOM standards
attr(attribut) : Recuperation dun attribut dans lobjet
DOM courant
attr(attribut, fonction/valeur) : Association dune
valeur ou dune fonction `a un attribut dans lobjet DOM
courant
removeAttr(attribut) : Suppression de lattribut dans
lobjet DOM courant
22/27
AJAX (1)
Methode : ajax(param`etres dans un tableau)
Param`etres :
url: + adresse de la page `a laquelle est envoyee la requete
type: + type de la requete (GET ou POST)
async: (true|false) connexion asynchrone ou non
data : + Tableau de cles/valeur (param`etres de la requete)
success: + fonction (anonyme) executee en cas de succ`es
complete: + fonction (anonyme) executee `a la n de lenvoi
de la reponse par le serveur (en cas de succ`es ou derreur)
23/27
AJAX (1)
Exemple
$ . aj ax ({
ur l : I n v e r s e r . php ,
type : GET ,
dat a : { s t r : s t r } ,
s uc c e s s : f u n c t i o n ( msg) {
$ ( #t x t Hi nt ) . html ( msg ) ;
}
} ) ;
24/27
AJAX (2)
Methode : get(url, param`etres, fonction)
url : adresse de la page `a laquelle est envoyee la requete
param`etres : Tableau de cles/valeur (param`etres de la requete)
fonction fonction (anonyme) executee en cas de succ`es
25/27
AJAX (2)
Exemple
$ . get ( I n v e r s e r . php ,
{ s t r : s t r } ,
f u n c t i o n ( dat a ){
$ ( #t x t Hi nt ) . html ( dat a ) ;
}
) ;
26/27
Autres biblioth`eques
Mootools
Scriptaculous
Prototype
Yahoo UI
Mochikit
ExtJS
Dojo
27/27
