Cours2 JS JQuery

Langages ct Client
JavaScript - jQuery
Introduction
JavaScript
Qualits :
Disponible sur les navigateurs actuels et gratuit
Dfauts :
A. Belad
Langage de script incorpor dans le HTML

Historiquement, premier langage de script pour le Web
Apporte des amliorations au HTML
HTML permet d'crire
JavaScript permet de programmer, c'est--dire de
grer l'information
Interprt et donc trs lent, pas de dbogueur
Introduction
A quoi ressemble un script ?
A. Belad
Cest une portion de code qui vient s'insrer dans une

page HTML
Le code du script n'est toutefois pas visible dans la
fentre du navigateur car il est compris entre des balises
(ou tags) spcifiques qui signalent au navigateur qu'il
s'agit d'un script crit en langage JavaScript
Balises annonant le code Javascript :
<SCRIPT language="Javascript">
Placez ici le code de votre script
</SCRIPT>
Variables
Dclaration
<script language="JavaScript">
var date; // Dclaration sans affectation
var compteur=0; // Dclaration avec affectation
toto='coucou'; // Dclaration implicite par affectation
var prem, second; // variables spares par des virgules
monNombre = new Number(); // Dclaration type sans
affectation
e = new Number(2.71828); // Dclaration type avec
affectation
var maChaine = new String(); //Dclaration de chane
var toto = new Boolean(true); //Dclaration de boolen
</script>
A. Belad
Tableau
Array
A. Belad
Le type des lments : nombres, chanes, boolens, ...

La dimension 1, 2, ou 3, ... : tab(7) ; tab(x,y) ; tab(A,B,C) ; ...
Les indices : souvent des nombres entiers
<script language=JavaScript>
// Tableau de chanes, de dimension 1, indic de 0 6 :
Jour=new Array(7);
Jour[0]='Dimanche' ;
Jour[1]='Lundi' ;
Jour[2]='Mardi' ; //...
Jour[6]='Samedi' ;
// En numrant les lments :
jour=new Array('dimanche','lundi','mardi', ...
,'vendredi','samedi');
</script>
Exemple
temp=new Array(30);
function relever() {
for (i=1;i<=30;i++) {
temp[i-1]=17+Math.floor(5*Math.random()); // Math.floor
donne l'entier le plus proche
};
};
function moyenner() {
som=0;
for (i=1;i<=30;i++) {
som+=temp[i-1];
};
return Math.round(som/30);
};
relever();
alert('la moyenne du tableau est ='+ moyenner());
A. Belad
Association avec un formulaire
Utilisation dans un formulaire
A. Belad
Schma dutilisation
body :
Contient la dfinition du formulaire
Il fait appel aux variables et fonctions dfinies
dans le head
head :
Contient les fonctions

Lire/crire
Exemple 1 : appel une fonction de lecture en cliquant sur

un bouton du formulaire
<html>
<head>
<title>Programme In2</title>
<script language="JavaScript">
function lireAnnee() {
annee=prompt('En quelle anne sommes-nous ? ', 2000);
alert('Vous avez rpondu : ' + annee) }
</script>
</head>
<body>
<form>
<input type="button" value="En quelle annee ? "
onClick="lireAnnee()">
</form>
</body>
</html>
A. Belad

Lire/crire : lire-ecrire-form0.html
A. Belad
Exemple 1 :
DOM
Notion dobjet en Javascript
A. Belad
Le Javascript traite les lments qui s'affichent dans

votre navigateur comme des objets, c'est--dire des
lments :
classs selon une hirarchie pour pouvoir les
dsigner prcisment
auxquels sont associes des proprits et des
actions (mthodes)
10
Les objets
Comment JavaScript dfinit les objets ?
A. Belad
Javascript divise la page du navigateur en lments (objets),

afin de permettre d'accder n'importe lequel d'entre eux et de
pouvoir les manipuler par l'intermdiaire de leurs proprits
On commence gnralement par l'objet le plus grand (celui
contenant tous les autres) puis on descend dans la hirarchie
jusqu' arriver l'objet voulu
L'objet le plus grand est l'objet fentre : window
Dans la fentre s'affiche une page, c'est l'objet document
Cette page peut contenir plusieurs objets, comme
des formulaires,
des images, etc.
11
Les objets
Lobjet Navigator
A. Belad
a plusieurs proprits concernant votre navigateur

appName :
connatre le nom : Netscape, IE, Mozilla
appVersion :
connatre la version
language :
FR, AN
platform :
windows, Linux
Pour le savoir : excuter :
<script language="Javascript">
document.write(navigator.proprit); //o proprit =
//platform
</script>
12
Lobjet Navigator
Exemple dutilisation de Navigator

Nom = navigator.appName;
if (Nom == 'Netscape') {
placer ici les instructions excuter s'il s'agit de
Netscape Navigator 4 ou suprieur }
if (Nom == 'Microsoft Internet Explorer') {
placer ici les instructions excuter s'il s'agit de
Microsoft Internet Explorer 4 ou suprieur
}
A. Belad
13
Les objets
Lobjet Window
A. Belad
est l'objet par excellence dans Javascript, car il est le

parent de chaque objet qui compose la page web
il contient donc :
l'objet document :
la page elle-mme
l'objet location :
le lieu de stockage de la page
l'objet history :
les pages visites prcdemment
l'objet frames :
les cadres (division de la fentre en sousfentres)
14
Lobjet Window
Lobjet Window
A. Belad
Proprits :
Frames[] : tableau de cadres contenus
Length : nombre de cadres (nombre d'lments du tableau
frames
Name : nom de la fentre dans laquelle on se trouve
Parent : fentre qui englobe celle dans laquelle on se
trouve
Mthodes :
alert(), confirm() et prompt() : font apparatre une bote de
dialogue
open(), et close() : permettent l'ouverture et la fermeture de
fentres
Plusieurs exemples sous :
http://fr.selfhtml.org/javascript/objets/window.htm
15
Lobjet Window
Proprit defaultStatus
affiche dans la barre d'tat de la fentre d'affichage la valeur

"Ma page d'accueil"
Exemple
<html>
<head>
<title>Test</title>
<script type="text/javascript">
window.defaultStatus = "Ma page d'accueil";
</script>
</head>
<body>
</body>
</html>
A. Belad
http://fr.selfhtml.org/javascript/objets/window.htm#closed
16
Lobjet Window
Proprits innerHeight, innerwidth
A. Belad
permettent de fixer au cours de lexcution la hauteur et

la largeur de la fentre
<html>
<head><title>Test</title>
window.innerHeight = 300;
</script>
</head>
<body>
</body>
</html>
17
Lobjet Window
La mthode open ()
Cette fonction ouvre une nouvelle fentre
window.open(" test.html","nom_de_la_fenetre","options_de_la_fenetre")
Ouvre secondefenetre et y affiche le fichier test.html.
Secondefenetre peut tre utilis comme target pour laffichage de
lextrieur
Exemple
<html>
<head>
<title>Test</title>
function nouvellefenetre() {
mafenetre = window.open("window0.html",
"secondefenetre", "width=300, height=200, scrollbars"); }
</script>
</head>
<body>
<a href="javascript:nouvellefenetre()"> nouvelle fentre </a><br>
</body>
</html>
A. Belad
Pour ouvrir une fentre une position donne : ajouter les attributs:
top=px, et left=px
18
Lobjet Window
la mthode close () :
A. Belad
<a href="javascript:mafenetre.close()">fermer la
fentre</a>
En cliquant sur ce lien, cela ferme la fentre
prcdemment ouverte avec le nom mafenetre
19
Lobjet Window
Vrification de ltat de la fentre
Exemple
<html><head><title>Test</title>
<!-var InfoWin = window.open("fichier1.htm", "secondefenetre");
function CheckOpen() {
if(InfoWin.closed == true) alert("La fentre a t ferme"); else
alert("La fentre est encore ouverte"); }
//-->
</script>
</head>
<body>
<a href="javascript:CheckOpen()">La fentre est-elle
ferme?</a>
</body>
</html>
A. Belad
20
Lobjet Window
Fermeture automatique dune fentre, aprs 2

<html>
<head>
<title>Test</title>
var InfoWin = window.open("exercice1.html",
"secondefenetre");
InfoWin.setTimeout("top.close()",2000);
</script>
</head>
<body>
</body>
</html>
A. Belad
21
Les objets
Lobjet document
A. Belad
lment majeur, permet de rcuprer des informations d'un

formulaire, crer des calques et les dplacer, crire du texte...
Proprits :
document.fgColor, permet de rcuprer et de changer la
couleur du texte de votre page HTML
document.fgColor = "#993333";
document.bgColor, permet de rcuprer et de changer la
couleur de fond de votre page HTML
document.lastModified, permet de savoir quand la page
html a t modifie
document.lastModified;
Internet explorer renvoie : 11/07/2000 19:41:00
Netscape renvoie : Tuesday, November, 7 /2000
19:41:00
22
Lobjet document
A. Belad
document.linkColor
permet de rcuprer et de changer la couleur des liens de
votre page HTML
document.location
permet de rcuprer et changer l'url de votre page HTML,
ce qui revient charger une autre page HTML
document.location = "URL/monDoc.HTML";
document.write()
permet d'crire dans votre page HTML
document.images[ ]
permet de rcuprer et changer les images de votre page
HTML
document.forms[ ]
permet de rcuprer et changer les informations de votre
formulaire
23
Lobjet document
Dernire date de modification
A. Belad
Donne la date de la dernire modification du document

<html>
<head><title>Test</title></head>
<body>
document.write("dernire mise jour: " +
document.lastModified);
</script>
</body>
</html>
24
Lobjet document
Contenu dune balise
A. Belad
Permet de rcuprer le contenu de la balise <title>

<html>
<head>
<title>Test</title>
</head>
<body>
<h1>
<!-document.write(document.title);
//-->
</script>
</h1>
</body>
</html>
25
Lobjet document
Rcupration de lURL o se trouve le document

<html>
<head>
<title>Test</title>
</head>
<body>
<!-document.write("Ce fichier: " + document.URL);
//-->
</script>
</body>
</html>
A. Belad
26
Le formulaire
Lobjet : forms
A. Belad
Avec l'objet forms, qui se trouve sous l'objet document

dans la hirarchie JavaScript, vous avez accs aux
formulaires dfinis dans un fichier HTML
Syntaxe :
document.forms["nom_formulaire"].proprit
document.forms["nom_formulaire"].mthode
Plusieurs exemples sous :
http://fr.selfhtml.org/javascript/objets/forms.htm
27
Le formulaire
Exemple
A. Belad
Il sagit daccder la case cocher pour modifier le

contenu de la zone du texte en inscrivant : case coche ou
case non coche
La modification se fera par la fonction ModifChamp();
On dclare la case cocher et la zone texte comme suit :
<form name="form1"> <br>
<input type="checkbox" name="checkbox"
onClick="ModifChamp();"> <br>
<input type='TEXT' name='champ_text' value='Essai du
javascript' size='24'>
</form>
28
Le formulaire
A. Belad
Ensuite, on se rfre la case cocher et la zone de

texte travers forms :
<script language="Javascript">
function ModifChamp() {
if (document.forms["form1"].checkbox.checked) {
document.forms["form1"].champ_text.value='Bouton
coch' }
else {
document.forms["form1"].champ_text.value='bouton
non coch' } }
</script>
29
Le formulaire
Le champ form a plusieurs proprits :
A. Belad
Action ()
Dfinit l'URL o le formulaire sera envoy
Elements
Tableau reprsentant les lments du formulaire
Length
Nombre d'lments l'intrieur du formulaire
Method
Dfinit le type d'envoi du formulaire (get ou post)
Name
Dfinit le nom du formulaire
Target
Dfinit la page (fentre ou frame) de rponse
Parent
Indique une fentre d'un cadre (frame)
30
Le formulaire
La proprit action ()
A. Belad
Pour raliser laction qui accompagne le formulaire

<html>
function confirmation() {
window.confirm("Ce formulaire est envoy
" + document.formulaire_test.action); }
</script>
</head>
<body>
<form name="formulaire_test" action="mailto:toimeme@cheztoi.com" onSubmit="confirmation()">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
</body>
</html>
31
Le formulaire
La proprit length
A. Belad
donne le nombre de formulaires dfinis

<body>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com">
<input type="hidden" value="Daniel">
<input type="submit" value="Daniel">
</form>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com">
<input type="hidden" value="Antoine">
<input type="submit" value="Antoine">
</form>
document.write(document.forms.length + " formulaires");
</script>
</body>
32
Le formulaire
La proprit method :
A. Belad
Sauvegarde la valeur qui figure lors de la dfinition du formulaire dans

l'attribut method, en principe gale "get" ou "post"
Si l'utilisateur envoie le formulaire en cliquant sur le bouton d'envoi la
fonction Methode() est appele
<body>
function Methode() {
if(document.formulaire_test.action.indexOf("@") > 0)
document.formulaire_test.method = "post";
else
document.formulaire_test.method = "get";
return true;
}
<form name="formulaire_test" action="mailto:toimeme@cheztoi.com" onSubmit="return Methode()">

</form>
33
Le formulaire
La proprit name :
A. Belad
Sauvegarde le nom dun formulaire

<html>
</head>
<body>
<form name="formulaire_test" action="mailto:toimeme@cheztoi.com">
</form>
<!-document.formulaire_test.saisie.value =
document.formulaire_test.name;
//-->
</script>
</body>
</html>
34
Le formulaire
Lenvoi de mail :
A. Belad
On ne peut pas envoyer un formulaire tel quil est par mail (il
faut utiliser php)
Cependant, on peut utiliser la formule suivante pour composer
totalement un mail :
window.open("MAILTO:" + sDestinataire + " ?subject= " +
sObjet + " &body=" +
document.forms[0].elements["ta_commentaires"]) ;
mailto : pour ladresse
?subject : pour le sujet
&body : pour le texte du mail
ta_commentaires : est une chane de caractres qui
rassemble linformation mettre dans le corps du ml
35
Le formulaire
La proprit target :
A. Belad
Prcise la cible (cadre) dans laquelle laffichage sera fait :

<html>
function cible() {
document.formulaire_test.target = "bas";
return true; }
</script>
</head>
<body>
<form name="formulaire_test" action="fichier.htm"
onSubmit="return cible()">
</form>
</body>
</html>
36
Le formulaire
Laction submit() :
A. Belad
Permet lenvoi du formulaire : JavaScript lance un compte rebours

avec la mthode setTimeout(). Aprs 60000 millimes de secondes,
donc aprs une minute, la fonction on_y_va() est appele. Celle-ci
envoie le formulaire avec submit()
<html>
<head><title>Test</title></head>
<body>
<form name="formulaire_test" action="/cgi-bin/estime.pl"
method="get">
<input type="text" size="40" name="champ1"><br>
<input type="text" size="40" name="champ2"><br>
</form>
function on_y_va() {
document.formulaire_test.submit(); }
window.setTimeout("on_y_va()",60000);
</script>
</body></html>
37
Les elements
Le champ elements : sous-objet de forms
A. Belad
Proprits :
checked (coch)
defaultChecked (coch par dfaut)
defaultValue (valeur entre par dfaut)
form (nom du formulaire)
name (nom de l'lment)
type (type de l'lment)
value (valeur/contenu de l'lment)
Mthodes :
blur() (quitter l'lment)
click() (cliquer sur l'lment)
focus() (positionner sur l'lment)
handleEvent() ((traiter l'vnement)
select() (slectionner du texte)
38
Le formulaire
Checked : exemple: Sauvegarde si oui ou non une case cocher ou une

case d'option est active. Les valeurs possibles sont true ou 1 ou false ou 0.

</script>
</head><body>
<form name="formulaire_test" action="">
<input type="radio" name="mode" value="avec"> avec cadres
<input type="radio" name="mode" value="sans"> sans cadres <br>
<input type="button" value="Lancer" onClick="Ensuite()">
</form>
</body>
</html>
A. Belad
39
Le formulaire
defaultValue : Sauvegarde le texte par dfaut d'un champ de saisie

<html><head><title>Test</title> </head>
<body>
<form name="formulaire_test" action=""> uri: <input size="40" name="uri"
value="http://www.xy.fr/">
<input type="button" value="Vas-y"
onClick="window.location.href=document.formulaire_test.uri.value">
</form>
<!-if(navigator.userAgent.indexOf("en") > 0) {
document.formulaire_test.url.defaultValue = "http://www.xy.com/";
document.formulaire_test.url.value =
document.formulaire_test.url.defaultValue; }
//-->
</script>
</body>
</html>
A. Belad
40
Javascript
Gestion des vnements
A. Belad
41
Les vnements
Prsentation
Pour cela, on prcise :
A. Belad
Les vnements sont lintrt du JS en matire de

programmation Web
Ils donnent une interactivit la page que vous consultez, ce
qui nexiste pas avec le HTML, si on excepte bien entendu le
lien hypertexte
Le JS permet de ragir certaines actions de lutilisateur
Lvnement (Event)
Clic de souris, survol de zones, chargement de la page

Le gestionnaire de lvnement (OnEvent)
OnClick, onMouseOver : appel de fonction pour agir en

consquence
42
Les vnements
Syntaxe du gestionnaire dvnement :

onEvent="Action_Javascript_ou_Fonction();"
Lorsqu'il est utilis dans un lien hypertexte, par

exemple, la syntaxe sera la suivante :
<a href="URL"
"onEvenement='Action_Javascript_ou_Fonction();'">
Lien
</a>
A. Belad
43
Les vnements
Le clic de souris
A. Belad
Gestionnaire dvnement
onClick
Exemple :
<input type=button onClick=alert(vous avez cliqu sur

le bouton) ;">
Balises supportes :
<input type="button">
<input type="checkbox">
<input type="radio">
<input type="reset">
<input type="submit">
<a href..>
44
Les vnements
Le chargement
A. Belad
onLoad
Exemple :
<body onLoad="alert(la page est charge !) ;">

Balises supportes :
<body>
<frameset>
Effets :
Au chargement, raliser tel vnement
45
Les vnements
Error
A. Belad
onError
Exemple :
<img src="pix.gif" onError="alert(Erreur de

chargement !) ;">
Balises supportes :
<body>
<frameset>
<img>
Effets :
Prvient lerreur au chargement
46
Les vnements
Abort
A. Belad
onAbort
Exemple :
<img src="pix.gif" onAbort=alert(Vous avez

interrompu le chargement de limage !) ;">
Balises supportes :
<img>
Effets :
Prvient lerreur au chargement
47
Les vnements
Le passage de la souris
onMouseOver
Exemples : onmouseover.html
<div style="width:50; height:50; background:lightsteelblue;"
onMouseOver="alert('Le curseur entre dans la zone
bleue');"></div>
<div> <P onMouseOver="this.style.color='red'"
onmouseout="this.style.color='black'"> Move the mouse pointer
over this text, then move it elsewhere in the document.</div>
<a href="http://www.google.fr" onMouseOver="alert('Pour aller sur
google.fr, cliquer ici');">http://www.google.fr</a><a
href="http://www.google.fr" onMouseOver="alert(Pour aller sur
google.fr, cliquer ici) ;">http://www.google.fr</a>
Balises supportes :
Effets :
A. Belad
Presque toutes
Prvient quand on survole la cible : zone, texte, lien
48
Les vnements
Le passage de la souris
Exemples :
A. Belad
onMouseOut
<a href="http://www.google.fr" onMouseOut=alert(Vous
ne voulez pas y aller ?) ;">http://www.google.fr</a>
Balises supportes :
Presque toutes
Effets :
Prvient quand on sloigne de la cible
49
Les vnements
Le focus
onFocus
se dclenche lorsque l'lment reoit le focus (devient actif) soit
par action de l'outil de pointage (souris), soit par la navigation
tabule (touches du clavier)
L'vnement onfocus est l'oppos de l'vnement onblur
Exemple :
<input type="text" size="40" maxlength="50" name="pharma_name"
onFocus='javascript:this.style.backgroundColor="yellow"'
onMouseOver='javascript:this.style.background="yellow"'
onMouseOut='javascript:this.style.background="white";this.style.bord
er="1"' onBlur='javascript:this.style.backgroundColor="white"'>
Balises supportes :
A. Belad
Button, Checkbox, FileUpload, Layer, Password, Radio, Reset,

Select, Submit, Text, TextArea, window
Effets : tester
50
Les vnements
Le blur :
Exemple :
<input type="text">
<select>
<textarea>
<input type="password">
Effets :
A. Belad
<input type="text" onblur="this.size = 20"

onfocus="this.size = 50">
Balises supportes :
onBlur
onBlur : permet de savoir lorsque le champ perd le focus

onFocus : permet de savoir lorsque le champ a le focus
51
Les vnements
Les changements
onChange
Exemples :
<input type="text" value="votre nom" name="nom"
onChange="alert('vous avez chang votre nom')">
Balises supportes :
Effets :
A. Belad
<input type="text">
<select>
<textarea>
<input type="password">
Avertit du changement par rapport ce quil y avait dcrit dans
la zone dcriture
52
Les vnements
La slection
onSelect
Exemples :
<form>
Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')">
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert('You have selected some of the text.')">
Hello world!</textarea>
</form>
Balises supportes :
Effets :
A. Belad
<input type="text">
<textarea>
Avertit de la slection dun champ
53
Les vnements
Lenvoi
onSubmit
Exemple :
<form name="testform" action=function()" onsubmit="alert('Hello ' +
testform.fname.value +'!')"> What is your name?<br />
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
Balises supportes :
Effets :
A. Belad
<input type="submit">
Lvnement se produit quand le bouton de soumission est
actionn
54
Les vnements
Le reset
Exemple :
<input type="reset">
Effets :
A. Belad
<input type="reset" value="Effacer" name=effacer

onSubmit=alert(On efface tout !) ;">
Balises supportes :
onReset
En appuyant sur le bouton effacer, il remet dans la

zone de texte : votre nom
55
jQuery
lments du langage
http://www.siteduzero.com/tutoriel-3-160885-manipuler-le-contenu.html
A. Belad
56
jQuery
Introduction
A. Belad
Bibliothque JavaScript libre

Permet de traverser et de manipuler facilement l'arbre
DOM des pages web l'aide d'une syntaxe fortement
similaire celle de Xpath
Permet par exemple de changer/ajouter une classe
CSS, crer des animations, modifier des attributs, etc.
Gre les vnements JavaScript
Fait des requtes AJAX simplement
57
jQuery
Installation
A. Belad
jQuery est tout simplement un fichier JavaScript

Il vous suffit donc de le tlcharger sur le site officiel
http://jquery.com
Intgration dans la page Web
<script type="text/javascript" src="jquery.js"></script>
Ou directement sur Google code
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jqu
ery.min.js">
</script>
58
Squelette du fichier HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Titre</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>

<script type="text/javascript" src="jquery.js"></script>
// c'est ici que l'on va tester jQuery
</script>
</body>
</html>
A. Belad
59
Exemple : helloworld.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Hello World avec jQuery</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
</head>
<body>
Salut tout le monde !
<script type="text/javascript" src="jquery-1.3.2.js"></script>
$('body').html('Hello World');
</script>
</body>
</html>
A. Belad
60
Commentaires
A. Belad
Si Hello World s'affiche, tout va bien

Si Salut tout le monde ! s'affiche, JavaScript est peut
tre dsactiv, jquery.js n'est pas dans le mme dossier
que le code HTML, ou vous avez fait une erreur en
recopiant
61
jQuery
Fonction principale
C'est une fonction cl
A. Belad
jQuery repose sur une seule fonction :

jQuery() (abrge $())
C'est une fonction JavaScript
Elle accepte des paramtres
Elle retourne un objet
Elle focalise le traitement sur l'objet en paramtre :
permet de le trouver
d'appliquer dessus des proprits et des mthodes
62
jQuery
$('tout-objet')
A. Belad
$ accepte un slecteur CSS en argument

Le slecteur peut tre un identifiant :
$('#nomID') // retourne un lment
document.getElementById
Le slecteur peut tre une classe slecteur
$('.nomClasse') //retourne tous les lments qui
correspondent cette classe
$ accepte plusieurs classes
$('.article,.nouvelles,.edito') //retourne tous les
lments qui correspondent ces classes
63
jQuery
A. Belad
$ accepte des slecteurs spcifiques

$(':radio'), $(':header'), $(':first-child')
des slecteurs en forme de filtres
$(':checked'), $(':odd'), $(':visible')
Plus fort :
$(':contains(du texte)')
des attributs
$('a[href]'), $('a[href^=http://'), $('img[src$=.png]'
64
Exemple
A. Belad
65
Manipulation du contenu
Quelques mthodes sur l'objet slectionn
A. Belad
html()
permet d'accder au contenu de l'objet si on l'appelle
sans aucun argument,
et permet de modifier le contenu de l'objet si on
l'appelle avec comme premier argument une chane
de caractres (reprsentant le contenu)
66
Exemple
A. Belad
Pour ce code :
<div id="titre">J'aime les frites.</div> :
La mthode suivante :
$('#titre'); // Slectionne notre balise mais ne fait rien
alert($('#titre').html()); // Affiche le contenu "J'aime les
frites."
$('#titre').html('Je mange une pomme'); // Remplace
le contenu ("J'aime les frites.") par "Je mange une
pomme"
$('#titre').html($('title').html()); // Remplace le contenu
par le titre de la page (contenu dans la balise <title>)
67
text() :
soit le code HTML suivant
<p id="premier">
<span class="texte">
Salut tout le monde
</span>
<img src="photo_1.jpg" alt="Premiere Photo !" />
</p>
A. Belad
$('#premier').text()
renvoie "Salut tout le monde" (avec tous les
retours la ligne et les espaces)
$('#premier').text('<strong>les pommes</strong>')
change le contenu du paragraphe en :
<strong>les pommes</strong>
68
A. Belad
replaceWith()
permet de remplacer la balise et son contenu
On peut lui passer du code html ou encore un objet
jQuery
Ainsi
$('div').replaceWith('<span>Salut!</span>')
transformera
<div>Bonsoir.. :)</div>
en
<span>Salut!</span>.
69
A. Belad
replaceWith()
Plus complet !
// Remplace les liens <a>...</a> par <em>censur</em>
$('a').replaceWith('<em>censur</em>');
$('h1').replaceWith($('.titre:first'));
$('#titre').replaceWith('<h1>'+$('#titre').html()+'</h1>');
$('.recherche').replaceWith('<a
href="http://google.com">Google</a>');
replaceAll
// Tous les <h1> vont tre remplacs
$('#titre').replaceAll($('h1'));
// Revient faire :
$('#titre').replaceAll('h1');
70
A. Belad
Insertion l'intrieur et l'extrieur : prepend() et append()

$('span').prepend('balise span ') transformera
<span>Hello World!</span>
en
<span>balise span Hello World !</span>
$('span').append(' balise span') : transformera
<span>Hello World !</span>
en
<span>Hello World ! balise span</span>.
71
A. Belad
append ( contenu )
Ajoute du contenu l'intrieur des lments spcifis
Exemple 1
Ajoute un objet jQuery la suite du contenu de chaque
paragraphe
$("p").append( $("b") );
Code de test:
<p>I would like to say: </p><b>Hello</b>
Rsultat:
<p>I would like to say: <b>Hello</b></p>
Exemple 2
Ajoute du contenu HTML la suite du contenu de
chaque paragraphe
$("p").append("<b>Hello</b>");
Code de test:
<p>I would like to say: </p>
Rsultat:
<p>I would like to say: <b>Hello</b></p>
72
A. Belad
After ( contenu )
Insre du contenu aprs chaque lment de la slection
Exemple 1
Insre un lement la suite des paragraphes.
$("p").after( $("#foo")[0] );
Code de test:
<b id="foo">Hello</b><p>I would like to say: </p>
Rsultat:
<p>I would like to say: </p><b id="foo">Hello</b>
Exemple 2
Insre un objet jQuery a la suite des paragraphes
$("p").after( $("b") );
Code de test:
<b>Hello</b><p>I would like to say: </p>
Rsultat:
73
A. Belad
Before /after
Insre du contenu avant les lments retourns par la
recherche
Exemple
Insre un objet jQuery (similaire un tableau
d'lements DOM) avant tous les paragraphes
$("p").before( $("b") );
Code de test:
Rsultat:
<b>Hello</b><p>I would like to say: </p>
74
A. Belad
insertAfter()/insertBefore()
Insre tous les lments dfinis par A aprs ceux dfinis
par B dans l'expression $(A).insertAfter(B). Equivaut
$(B).after(A)
Exemple
$("p").insertAfter("#foo");
Code de test:
<p>I would like to say: </p> <div id="foo">
Hello</div>
Rsultat:
<div id="foo">Hello</div><p>I would like to say: </p>
75
A. Belad
remove
Supprime tous les lements de la DOM rpondant aux
critres de slection. Mais ne supprime PAS les lements
de l'objet jQuery, ce qui permet une utilisation de ces
lements mme si ceux ci ne figurent plus dans le
document
Exemple
$("p").remove();
Code de test:
<p>Hello</p> how are <p>you?</p>
Rsultat:
how are
76
A. Belad
Exemple : contenu-jquery-correction.html
Soit le document HTML : contenu-jquery.html
Proposez du code jQuery pour faire ces manipulations
enlever les liens ;
enlever le texte en gras ;
enlever le texte en italique ;
enlever le texte dcor ;
vider les boutons ;
voir le code ;
transformer les liens en boutons ;
dupliquer le texte ;
regrouper les liens ;
mettre des titres ;
regrouper les titres ;
colorer le texte ;
organiser smantiquement le texte ;
77
A. Belad
<button onclick="semantique()">Organiser smantiquement le

texte</button>
<button onclick="colorer()">Colorer le texte</button>
<button onclick="mettreTitres()">Mettre des titres</button>
<button onclick="liensEnBoutons()">Transformer les liens en
boutons</button>
<button onclick="dupliquerTexte()">Dupliquer le texte</button>
<button onclick="regrouperTitres()">Regrouper les titres</button>
<button onclick="regrouperLiens()">Regrouper les liens</button>
<button onclick="viderBoutons()">Vider les boutons</button>
<button onclick="enleverLiens()">Enlever les liens</button>
<button onclick="enleverGras()">Enlever le texte en
gras</button>
<button onclick="enleverItalique()">Enlever le texte en
italique</button>
<button onclick="enleverDecor()">Enlever le texte
dcor</button>
<button onclick="voirCode()">Voir le code</button>
78
function enleverLiens() {
$('#contenu a').remove();
}
function enleverGras() {
$('#contenu strong,#contenu b').remove();
}
function enleverItalique() {
$('#contenu em,#contenu i').remove();
}
function enleverDecor() {
$('#contenu *:not(html):not(body):not(p):not(button)').remove();
}
A. Belad
function viderBoutons() {
$('#contenu button').empty();
}
79
function voirCode() {
$('#contenu p').text($('p').html());
}
function liensEnBoutons() {
$('#contenu a').wrap('<button></button>');
}
function dupliquerTexte() {
$('#contenu p').clone().appendTo('#contenu');
}
function regrouperLiens() {
$('#contenu a').wrapAll('<div></div>');
}
A. Belad
function mettreTitres() {
$('#contenu .titre1').wrap('<h1></h1>');
$('#contenu .titre2').wrap('<h2></h2>');
}
80
function regrouperTitres() {
$('h1').wrapAll('<div></div>');
$('h2').wrapAll('<div></div>');
}
function colorer() {
$('#contenu .rouge').wrap('<span style="color:red"></span>');
$('#contenu .vert').wrap('<span style="color:green"></span>');
$('#contenu .orange').wrap('<span style="color:orange"></span>');
$('#contenu .bleu').wrap('<span style="color:blue"></span>');
}
function semantique() {
$('#contenu .italique').wrap('<i></i>');
$('#contenu .gras').wrap('<b></b>');
$('#contenu .souligne').wrap('<u></u>');
$('#contenu .barre').wrap('<del></del>');
}
A. Belad
81
jQuery et le DOM
Objet jQuery
lment du DOM
A. Belad
La fonction principale ($()) renvoie un objet jQuery

partir duquel on peut naviguer dans l'arborescence
$('body')[0] dsigne le premier lment de l'objet
jQuery rsultant de l'appel la fonction principale
Exemple
// Renvoie 'body'
$('body')[0].tagName.toLowerCase();
82
Exemple complet
// Dclaration d'un objet
var objet = {};
// Dclaration d'attributs
objet.variable1 = 'Hello';
objet['variable2'] = 'World';
// Affiche 'Hello World'.
alert(objet.variable1+' '+objet.variable2);
// On ne peut pas utiliser le point
// car une variable ne commence
// jamais par un chiffre
objet[0] = 'premier lment';
// [0] ou ['0'] reviennent au mme
objet['1'] =
document.getElementById('titre');
// Affiche 'premier lment'.
alert(objet[0]);
// Affiche 'titre' si la balise existe
alert(objet[1].id);
A. Belad
// Ce sont des variables comme les autres

// donc je mets ce que je veux !
objet.length = 'Moi aimer frites !';
objet.selector = 89;
Les lments ([0], [1] etc.) contenus dans
un objet jQuery sont donc des attributs
de cet objet
83
Quelques mthodes
Parents et enfants
A. Belad
parents() renvoie l'ensemble des lments parents

parent() l'lment parent direct
children() renvoie les lments enfants directs
84
Exemple
<html>
<head>
src="http://ajax.googleapis.com/aj
ax/libs/jquery/1.3.2/jquery.min.js">
</script>
<style type="text/css" media="all">
</style>
</head>
<body>
<div id="contenu">
</div>
</body>
</html>
A. Belad
// Affiche 'HTML'.
alert($('body').parent()[0].tagName);
// Affiche 'HEAD'.
alert($('title').parents()[0].tagName);
85
jQuery et le DOM
Crer des lments
A. Belad
Au lieu de
document.createElement('balise') ;
On utilise
$('<balise/>')
Par exemple
$('<h1 />') cre un titre de niveau 1
86
Exemple
<html>
<head>
src="http://ajax.googleapis.com/ajax/lib
s/jquery/1.3.2/jquery.min.js"></script>
</style>
</head>
<body>
<div id="contenu">
<button onclick="essai1();">Essai
1</button>
2</button>
3</button>
4</button>
</div>
</body>
</html>
A. Belad
$(function(){
document._createElement =
document.createElement;
document.createElement = function(balise){
alert(balise+' cre !');
document._createElement(balise);
};
});
function essai1(){
$('<span/>');
}
function essai2(){
$('<span />');
}
function essai3(){
$('<span></span>');
}
function essai4(){
$('<span>Super contenu :p </span>');
}
87
jQuery et le DOM
Les attributs
// Renvoie l'attribut 'title'
// de l'lment ayant comme id 'titre'
$('#titre').attr('title');
// crit aprs #titre son attribut 'title'
$('#titre').after($('#titre').attr('title'));
//donne la valeur 'le site' l'attribut 'title'
$('div.header_gauche img').attr('title','le Site du Zr0');
A. Belad
88
jQuery et le DOM
Les formulaires
<input type="text" id="texte" value="Salut!" />
<textarea id="zonetexte">Ceci est une
zone de texte !</textarea>
<input type="radio" name="choixradio" value="Radio 1" />Radio 1
<select id="choixselect">
<option>Select 1</option>
</select>
A. Belad
89
jQuery et le DOM
Les formulaires
// Renvoie 'Salut!'.
$("#texte").val();
// Renvoie 'Ceci est une\nzone de texte !'.
$("#zonetexte").val();
// Renvoie l'attribut value de la balise slectionne.
// Par exemple 'Radio 1'.
$('input[name="choixradio"]:checked').val();
// Renvoie le contenu de la balise option slectionne.
// Par exemple 'Select 1'.
$('#choixselect').val();
A. Belad
90
jQuery et le DOM
Boucler sur des lments
A. Belad
each() sur un objet jQuery

Exemple
91
A. Belad
Exemple
<html>
<head>
</style>
</head>
<body>
<div id="contenu">
<a href="http://www.google.fr">Google
France</a>
<a href="http://www.siteduzero.fr">Site du
Zro</a>
<p>Paragraphe.<br />Comment allezvous ?
<q>petite citation</q>
</p>
<a href="http://jquery.com">Faites un tour
sur jQuery.com !</a>
</div>
</body>
</html>
//fonction anonyme
$(function(){
$('#contenu a').each(function(i){
$(this)
.prepend('<small>Lien n'+(i+1)+'
</small> ')
.append(' <small>
'+$(this).attr('href')+'</small>');
});
});
92
Exemple
<html>
<head>
</style>
</head>
<body>
<div id="contenu">
</div>
</body>
</html>
A. Belad
//each() avec des donnes

$.each([
0,1,1,2,3,5,8,13,21
],function(n){
$('#contenu').append(n+'me nombre
de Fibonacci : '+this+'<br />');
});
//Rsultats
0me nombre de Fibonacci : 0
93
Exemple
<html>
<head>
</style>
</head>
<body>
<div id="contenu">
<q>Un petit pas pour
l'<strong>homme</strong> !</q>
<q>Et un grand pas pour
l'<strong>humanit</strong> !</q>
</div>
</body>
</html>
A. Belad
/each() avec un tableau

var tableau = [
'Bonjour, comment vas-tu ?',
"Aujourd'hui, il fait beau !",
$('q:first').text()
]
,chaine = '';
$.each(tableau,function(n,texte){
chaine += 'Texte n'+(n+1)+' :
'+texte+'\n';
});
$(function(){
$('<pre></pre>')
.html(chaine)
.appendTo('#contenu');
});
//Rsultat
Un petit pas pour l'homme ! Et un
grand pas pour l'humanit !Texte
n1 : Bonjour, comment vas-tu ?
Texte n2 : Aujourd'hui, il fait beau !
Texte n3 : Un petit pas pour
l'homme !
94
Les vnements
Fonctionnement
A. Belad
jQuery dispose de mthodes simples pour attacher des

vnements des fonctions (ou couter un
vnement )
95
Les vnements
Ce qu'on utilisait avant :

element.addEventListener('evenement',function(){
// Action
});
// ou
element.onevenement = function(){
// Action
};
En jQuery
Les vnements seront crs grce des mthodes ayant pour nom
le type de l'vnement, l'argument tant lafonction de retour
// coute d'un vnement

elements_jQuery.evenement(function(){
// Action
});
A. Belad
96
Les vnements
Toutes les fonctions que l'on va voir sont sans argument
Utilisation dans un formulaire
A. Belad
Slection
select est dclench lorsque du texte est slectionn
dans un <input type="text" /> ainsi que dans
un <textarea></textarea>
Exemple
$(':text,textarea').select(function(){
alert($(this).val());
});
97
A. Belad
Changement
Change est dclench lorsque un champ <input > est
chang
Exemple
$(':input').change(function(){
alert($(this).val());
});
98
Soumission du formulaire
submit est dclench lorsqu'un formulaire est soumis par,
par ex. <input type="submit" />
Exemple
$('form[name="inscription"]').submit(function(){
if($('form[name="inscription"] :password:first').val().length < 6){
alert('Veuillez rentrer au moins 6 caractres dans votre mot de
passe');
return false;
}
});
A. Belad
99
Focalisation
A. Belad
focus est dclench lorsqu'un lment d'un formulaire est

focalis par l'utilisateur, soit en cliquant dessus, soit grce
aux raccourcis du navigateur qui permettent de parcourir la
page (les tabulations par exemple)
Syntaxe
$(':input').focus(function(){
$(this).css('background-color','#00f');
});
$(':input').blur(function(){
$(this).css('background-color','#f00');
});
100
vnements
Touches
A. Belad
L'appui sur une touche se dcompose en trois tapes successives :

keydown : enfoncement de la touche
keypress : maintien de la touche enfonce
keyup : relchement de la touche
Le premier argument de la fonction de retour passe en paramtre est
un objet contenant des informations sur la touche appuye
Un attribut which ou keyCode (dpend du navigateur) dsigne le
numro de la touche appuye
Syntaxe
$(document).keypress(function(evenement){
// Si evenement.which existe, codeTouche vaut celui-ci.
// Sinon codeTouche vaut evenement.keyCode.
var codeTouche = evenement.which || evenement.keyCode;
alert(codeTouche);
});
101
vnements
Souris
A. Belad
Clics de souris
Un clic de souris se dcompose en trois tapes
successives :
mousedown : enfoncement de la souris
mouseup : relchement de la souris ;
click : clic de la souris
Le premier argument de la fonction de retour passe en
paramtre est un objet contenant des informations sur la
touche appuye, pageX pour la position X et pageY pour la
position Y
102
Exemple
Rcuprer la position du clic
A. Belad
jQuery
$(function(){
$(document).mousedown(function(clic){
$('#posX').text('Position X : '+clic.pageX);
$('#posY').text('Position Y : '+clic.pageY);
});
});
HTML
<span id="posX"></span>
<span id="posY"></span>
103
Autre exemple
<html>
<head>
src="http://ajax.googleapis.com/a
jax/libs/jquery/1.3.2/jquery.min.js"
></script>
<style type="text/css"
media="all">
</style>
</head>
<body>
<div id="contenu">
$(function(){
$(document).mousedown(function(c
lic){
$('#posX').text('Position X :
'+clic.pageX);
$('#posY').text('Position Y :
'+clic.pageY);
});
});
Rsultat
Position X : 238 Position Y : 157
</div>
</body>
</html>
A. Belad
104
A. Belad
$(function(){
$('*')
<html>
.mousedown(function(){
<head>
$('#contenu')
.css('background-color','#f00')
src="http://ajax.googleapis.com/ajax/l
ibs/jquery/1.3.2/jquery.min.js"></scrip
.append('<span style="color: #f00">
t>
Down!</span>'); })
.mouseup(function(){
body{cursor: pointer;}
$('#contenu')
#contenu{padding: 24px;
.css('background-color','#00f')
cursor: pointer;}
.append('<span style="color: #00f">
Up!</span>');})
#contenu span{
.click(function(){
background-color: #fff;}
$('#contenu')
</style>
.css('background-color','#f0f')
</head>
.append('<span style="color: #f0f">
<body>
Clique!</span>');})
<div id="contenu">
.dblclick(function(){
</div>
$('#contenu')
</body>
.css('background-color','#0ff')
</html>
.append('<span style="color: #0ff">
Double Clique!</span>');
});
Autre exemple
105
A. Belad
Rsultat
106
Mouvements de souris
A. Belad
La souris peut entrer au dessus d'un lment, bouger sur cet

lment et enfin partir de cet lment.
On distingue donc :
mouseenter : la souris entre au-dessus de l'lment ;
mouseleave : la souris quitte l'lment
mouseover : la souris entre au-dessus de l'lment ou un de
ses enfants
mouseout : la souris quitte l'lment ou un de ses enfants
mousemove : la souris bouge sur l'lment
Le premier argument de la fonction de retour passe en paramtre
est un objet contenant des informations sur la touche
appuye, pageX pour la position X et pageY pour la position Y
107
Exemple
<html>
<head>
src="http://ajax.googleapis.co
m/ajax/libs/jquery/1.3.2/jquery.
min.js"></script>
<style type="text/css"
media="all">
</style>
</head>
<body>
<div id="contenu">
jQuery
$(function(){
$(document).mousemove(functio
n(clic){
$('#posX').text('Position X :
'+clic.pageX);
$('#posY').text('Position Y :
'+clic.pageY);
});
});
</div>
</body>
</html>
A. Belad
108
Grer des vnements
Fentre
Dfilement
A. Belad
scroll est dclench lorsque l'utilisateur utilise un ascenseur

horizontal ou vertical
$(document).scroll(function(){
alert('Arrte de me dfiler !');
});
Redimensionnement
resize est dclench lorsque l'utilisateur redimensionne la
fentre en utilisant les poignes par exemple, mais aussi
en rduisant sa fentre
Pour l'utiliser sur la fentre principale du navigateur il faut
appliquer la mthode sur $(window) et non $(document)
$(window).resize(function(){
alert('Arrte de me redimensionner !');
});
109
D'autres vnements utiles
Quand le document est prt
Code
$(document).ready(function(){
alert('Le document est prt !');
});
Quand on quitte la page
unload est dclench lorsque l'utilisateur quitte la page.
Vous ne pouvez pas faire grand chose ce stade l au
niveau de l'utilisateur part envoyer une alerte
Code
$(document).unload(function(){
alert('Au revoir et bientt !');
});
A. Belad
110
Crer des animations
animate(style, [duration], [easing], [complete])
Permet d'animer le style CSS de vos lments

Paramtres
style (objet contenant des couples attribut/valeur CSS) :

le style de l'lment la fin de l'animation
duration (entier ou chane de caractres) (dure) :
un entier positif qui est le nombre de millisecondes
reprsentant la dure de l'animation
easing (chane de caractres) (volution) :
"swing" , "linear"
complete (fonction) (fonction de retour) :
une fonction appele quand l'animation d'un lment
est finie
Exemple : animate.html, animate-jq.html
A. Belad
111
jQuery
$('#anim1').click(function(){
$('#contenu p')
.css('width','400px')
.animate({width : '500px'});
});
$('#contenu p span').animate({
padding : '50px', opacity : 0.4},
'slow','linear');
});
$('#contenu p strong')
.animate({fontSize : '2em',
paddingLeft : '50px' },
2000,function(){
alert('fini ! ');
});
});
A. Belad
HTML
<html>
<head>
<script type"></script>
#contenu p{
width: 400px;font-size: 20px;color: #d22;
line-height: 30px;border: 1px dashed #00f;}
#contenu p span{ padding: 2px;
background-color: #aaa;color: #000;}
#contenu p strong {text-decoration:
underline;
padding: 0;border-left: 2px solid #00f;}
</style>
</head>
<body>
<div id="contenu">
<p>jQuery est une <span>bibliothque
<strong>JavaScript</strong>
</p>
<button id="anim1">Animation 1</button>
</div>
</body>
112
</html>
Crer des animations
Agir sur le style CSS
A. Belad
On peut agir sur les paramtres CSS pour les modifier

dynamiquement
113
Agir sur le style CSS

On peut agir sur les paramtres CSS pour les modifier
dynamiquement
jQuery
$('#plus').click(function(){
$('#rectangle').animate({
width : '+=32px'
},1000,'linear');
});
$('#moins').click(function(){
$('#rectangle').animate({
width : '-=32px'
},1000,'linear');
});
A. Belad
HTML
#rectangle
{
position: relative; display: block;
width: 512px;height: 48px;
padding: 8px;color: #fff;
background-color: rgb(144,96,128);
}
</style>
</head>
<body>
<div id="contenu">
<div id="rectangle">Salut
!</div><br />
<button id="plus">Plus !</button>
<button id="moins">Moins
!</button>
</div>
114
A. Belad
Animer des ascenseurs

Utiliser attributscrollTop et / ou scrollLeft afin de faire
dfiler le contenu de l'lment
Ceci ne marche qu'avec des lments qui ont un
ascenseur et qui peuvent dfiler
115
jQuery
$('body')
.animate({ scrollTop : '800px'},
5000);
A. Belad
HTML
<html>
<head>
<script "></script>
<style type="text/css" media="all"></style>
</head>
<body>
<div id="contenu">
Salut !<br />Salut !<br />Salut !<br />Salut !<br
/>Salut !<br />Salut !<br />Salut !<br />Salut
!<br />Salut !<br />Salut !<br />Salut !<br />
</div>
</body>
116
Crer des animations
Agir sur l'volution d'une animation
On agit sur les attributs de styles pour les faire voluer au

cours du temps
linear :
les attributs voluent proportionnellement par
rapport au temps
swing :
les attributs dmarrent de faon moins
brusque que linear pendant la premire moiti de
l'animation puis arrivent de faon moins
brusque vers leurs valeurs finales
A. Belad
117
jQuery
$('#go').click(function(){
$('#linear')
.css('width','0px')
.animate({ width : '90%' },
4000,'linear'
);
$('#swing')
.css('width','0px')
.animate({ width : '90%' },
4000,'swing'
);
});
A. Belad
HTML
<html>
<head>
<script "></script>
#conteneur{position: relative;display: block;
margin: 24px;}
#conteneur div{position: relative; display: block;
width: 100%;margin: 0;color: #fff;width: 90%;
border: 1px solid #000;}
#linear{background-color: rgb(144,96,128);
padding: 16px;}
#swing{background-color: rgb(96,128,144);
padding: 16px;}
</style>
</head>
<body>
<div id="contenu">
<div id="conteneur">
<div id="linear">Linear</div>
<div id="swing">Swing</div>
</div>
<button id="go">Lancer les animations
</button>
</div>
</body>
118
Crer des animations
Agir sur la dure
A. Belad
En jQuery, la dure de l'animation est toujours

dfinie (sinon c'est "normal", soit 400 millisecondes)
Pour modifier cette dure, il faut agir sur l'attribut
correspondant
On appelle cela : volution par l'attribut
Une des nouveauts de la version 1.4 est de
pouvoir attribuer une volution chaque attribut CSS
119
Crer des animations
Agir sur la dure
Exemple
$('p')
.css('width','400px')
.animate({
width : [ '800px' , 'linear' ], opacity : 0.5
},
'linear');
$('p span')
.animate({padding : '50px', fontSize : '28px'},
{ duration : 'slow', easing : 'swing',
specialEasing : {fontSize : 'linear'}
});
A. Belad
120
Grer les animations
Utiliser les effets
A. Belad
Tous les effets utilisent l'volution swing

Visibilit
show()
permet d'afficher les lments en question
hide()
permet de cacher les lments en question
toggle()
permet de jongler entre la prsence ou l'absence de
l'lment (si l'lment est cach, l'afficher, sinon le
cacher)
Exemple
// Utilis pour afficher / cacher une balise secret.
$('blockquote.secret').toggle('normal');
121
Ces trois mthodes peuvent

ne prendre aucun argument
pas d'animation et tout se fait de faon brute
ou les arguments classiques cits plus haut :
la hauteur, la largeur et l'opacit changent de
manire progressive
On peut utiliser toggle() avec les arguments classiques
ou avec un seul argument, un boolen qui, true affiche
l'lment avec show(), mais qui false cache l'lment
avec hide()
Exemple
A. Belad
$('a').toggle( true ); // affiche les liens

$('textarea').toggle( false ); // cache les zones de texte
// affiche ou cache les paragraphes selon que la checkbox
soit coche ou non
$('p').toggle( $('#afficherParagraphes').attr( 'checked' ) );
122
Glissement
Disparition
A. Belad
slideDown() permet de drouler verticalement les

lments en question
slideUp() permet d'enrouler verticalement les lments
en question
slideToggle() permet de jongler entre la prsence ou
l'absence de l'lment (si l'lment est cach, le
drouler, sinon l'enrouler)
fadeIn() : fait apparatre les lments en modifiant
l'opacit de manire progressive
fadeOut() : fait disparatre les lments en modifiant
l'opacit de manire progressive
fadeTo() : modifie l'opacit des lments slectionns et
permet de lancer une fonction la fin de l'animation
123
Exemple sur les

paramtres CSS
jQuery
$('#boite').animate({
// width ? => width 0
width : 'toggle'
// height ? => height 200
, height : '200px'
},4000);
$('#boite').animate({
// width 0 => width 800
width : 'toggle'
// height 0 => height 200
, height : 'toggle'
},2000);
A. Belad
HTML
<html>
<head>
<script "></script>
#boite{width: 800px;
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div id="contenu">
<div id="boite">Une boite
!</div>
</div>
</body>
</html>
124
Contrler les animations
Slecteur d'animations
A. Belad
Le slecteur :animated permet de filtrer les lments qui

sont anims au moment o la fonction s'excute
125
jQuery
function ajouterEtEnleverClasseAnime(){
// ajouter la classe 'anime' aux lments
anims
$('#contenu
div:animated').addClass('anime');
$('#contenu
div:not(:animated)').removeClass('ani
me');
}
function animerBoite( n ){
var
x = Math.floor( Math.random() * 500 )
// nombres alatoires entre 0 et 499,
y = Math.floor( Math.random() * 500);
$( '#boite' + ~~n ).animate({
top : y, left : x
} , 2000 ); // l'animation dure 2 secondes
}
// met jour tous les 500 millisecondes
setInterval(
ajouterEtEnleverClasseAnime , 500 );
A. Belad
HTML
#contenu div{
background-color: #fff; position: absolute;
width: auto;height: 64px; top: 200px;left: 200px;
border: 1px solid #000;z-index: 50;}
#contenu div button {width: 100%; height: 40px;
margin: 12px 0; color: #000; padding: 0 12px;
cursor: pointer;}
#contenu div.anime{ background-color: #00f;
border-color: #fff;}
#contenu div.anime button{ background-color: #00f;
border-color: #00f; color: #fff;}
</style>
</head>
<body>
<div id="contenu">
<button
onclick="ajouterEtEnleverClasseAnime();">Mettre
jour</button>
<div id="boite1"><button onclick="animerBoite( 1
);">Animer!</button></div>
</div>
126
Grer les animations
Stopper les animations
stop([ viderLaQueue, allerALaFin ])

viderLaQueue (boolen) :
Si true : stoppe l'animation en cours et celles venir

(qui sont prsentes dans la queue)
Si false : (par dfaut), stoppe seulement la premire
animation de la queue. Les autres animations dans la
queue commenceront tout de suite
allerALaFin (boolen) :
Si true : ne stoppe pas l'animation, mais la fait aller

sa fin : l'lment concern aura donc son style final et
la fonction de retour sera appele
Si false (par dfaut) : stoppe l'animation et ne fait
rien de spcial
Exemple : stpper-anim.html
A. Belad
127
Grer les animations
Gestion de files d'attente
A. Belad
On peut grer une ou plusieurs files d'attentes par lancement,

mise en attente de plusieurs animations
Explorer cela par vous-mmes
128
Grer les vnements
Vocabulaire des vnements
A. Belad
Quand un vnement est dclench sur un lment, et qu'il

faut associer une fonction appeler lors de ce
dclenchement, on dit qu'on coute un vnement
On lie, ou on attache ( to bind ) une fonction un type
d'vnement bien dtermin sur un lment. L'lment en
question est alors cout sur ce type d'vnement
On supprime, on dlie ou on dtache ( to unbind ) une
fonction un type d'vnement sur un lment lorsqu'on
enlve l'appel la fonction lors du dclenchement de
l'vnement sur cet lment
La fonction de retour est appele un couteur d'vnement
(addEventListener() signifie ajouter un couteur d'vnement
!).
129
Grer les vnements
couter
A. Belad
Les mthodes vues, comme click() ou mouseenter(),

permettent de lier un vnement une fonction :
on appelle a un couteur d'vnement.
bind() permet de gnraliser cela en lui passant en
premier argument une chane de caractres
reprsentant tous les vnements (spars par des
espaces) lier avec la fonction passe en
paramtre
130
jQuery
$(function(){
$('#contenu p, #contenu textarea')
.bind('mouseenter focus',function(){
$(this).css('border-color','#222');
})
.bind('mouseleave blur',function(){
$(this).css('border-color','#bbb');
});
$('#contenu q').bind('dblclick',function(){
if($(this).attr('auteur')){
alert("L'auteur de cette citation est
"+$(this).attr('auteur')+' !');
}
});
});
A. Belad
HTML
<html>
<head>
<script ></script>
<style >
#contenu p, #contenu textarea{
border: 1px solid #bbb;}
</style>
</head>
<body>
<div id="contenu">
<p>Yipii!</p>
<q auteur="Martin Luther King">I
have a dream</q>
<br /><br />
Appuyer sur
<code>[TAB]</code><br />
<textarea>
</div>
</body>
</html>
131
Grer les vnements
Supprimer
A. Belad
unbind() permet d'enlever l'couteur d'vnement cr

pralablement avec bind()
nom de l'vnement ( unbind('click')) : supprime tous les
couteurs du type de l'vnement
nom de l'vnement et fonction ( unbind('click',fonction)):
supprime juste un couteur bien prcis pour ce type
d'vnement
132
jQuery
$(function(){
$('#contenu a:not(.interne)').click(function(){
alert('adresse du lien : '+$(this).attr('href'));
$(this).unbind('click');
return false;});
$('#contenu textarea')
.focus(zoneTexte)
.focus(function(){$(this).after('<br />Clic !'); })
.blur(function(){$(this).css('backgroundcolor','#ff8');})
.one('dblclick',function(){$(this).after('<br
/>Double Clic !');
$(this)
.unbind('focus',zoneTexte)
.unbind('blur');});});
function zoneTexte(){
$(this).css('background-color','#f8f');
}
function unbindZoneTexte(){
$('#contenu textarea').unbind();
}
A. Belad
HTML
<html>
<head>
t>
</style>
</head>
<body>
<div id="contenu">
<button
onclick="unbindZoneTexte()">$('#con
tenu textarea').unbind() !</button><br
/>
<a
href="http://www.siteduzero.com/">Si
te du Zr0</a><br />
<textarea>
</div>
</body>
</html>
133
Grer des vnements
Attacher plusieurs vnements en mme temps
Une des nouveauts de la version 1.4 est de pouvoir

donner un objet en argument bind(), contenant
des couples nom de l'vnement / fonction de retour
attache
Exemple
$('h1')
.bind({ mouseenter: function(){$(this).css('color','#000');
}
, mouseleave: function(){$(this).css('color','#00f');
}
, click: function(){ $(this).css('color','#ff0');
}
});
A. Belad
134
Grer des vnements
Dclencher
A. Belad
On peut dclencher virtuellement des vnements

sur des lments sans avoir pour autant l'aval de
l'utilisateur
trigger()
trigger() permet de dclencher un vnement,
produisant l'action par dfaut du navigateur ainsi
que celle que vous avez dfinie
Les mthodes utilises plus haut qui pouvaient tre
appeles sans argument sont donc le raccourci
d'un appel trigger()
135
jQuery
$(function(){
$('#contenu :text')
.focus(function(){
$(this).trigger('click');
})
.click(function(){
$(this).after('<br />clic !');
});
});
HTML
<html>
<head>
t>
</style>
</head>
<body>
<div id="contenu">
Appuyer sur <code>[TAB]</code><br />
<input type="text" value="essai !" />
</div>
</body>
</html>
A. Belad
136
Grer des vnements
A. Belad
triggerHandler()
triggerHandler() agit presque de la mme manire
que trigger() sauf qu'elle n'actionne pas le
mcanisme par dfaut du navigateur (par exemple
quand un champ gagne le focus , le texte du
champ est slectionn et on peut crire), mais
appelle seulement la fonction qu'on a dfinie
137
Grer des vnements
Nos propres vnements
A. Belad
On peut crer nos propres vnements
138
jQuery
$(function(){
$('#contenu a')
.bind('lien',function(){
alert('Vous aller vers '+$(this).attr('href')+' !');
})
.click(function(){
if(!$(this).hasClass('interne')){
$(this).trigger('lien');
}
});
});
A. Belad
HTML
<html>
<head>
<script "></script>
</style>
</head>
<body>
<div id="contenu">
<a
href="http://www.siteduzero.com">Sit
e du Zr0</a><br />
<a href="http://www.jquery.com">Site
officiel de jQuery</a>
<a href="http://www.google.fr">Google.fr
!</a> <a class="interne"
href="http://moi.free.fr">Mon
site!!!</a>
</div>
</body>
</html>
139

Cours2 JS JQuery

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours2 JS JQuery

Transféré par

Droits d'auteur :

Formats disponibles

Langages ct Client

Disponible sur les navigateurs actuels et gratuit

Langage de script incorpor dans le HTML

Interprt et donc trs lent, pas de dbogueur

A quoi ressemble un script ?

Cest une portion de code qui vient s'insrer dans une

Le type des lments : nombres, chanes, boolens, ...

Association avec un formulaire

Utilisation dans un formulaire

Association avec un formulaire

Exemple 1 : appel une fonction de lecture en cliquant sur

Association avec un formulaire

Notion dobjet en Javascript

Le Javascript traite les lments qui s'affichent dans

Comment JavaScript dfinit les objets ?

Javascript divise la page du navigateur en lments (objets),

a plusieurs proprits concernant votre navigateur

Exemple dutilisation de Navigator

est l'objet par excellence dans Javascript, car il est le

affiche dans la barre d'tat de la fentre d'affichage la valeur

Proprits innerHeight, innerwidth

permettent de fixer au cours de lexcution la hauteur et

Cette fonction ouvre une nouvelle fentre

Vrification de ltat de la fentre

Fermeture automatique dune fentre, aprs 2

lment majeur, permet de rcuprer des informations d'un

Dernire date de modification

Donne la date de la dernire modification du document

Contenu dune balise

Permet de rcuprer le contenu de la balise <title>

Rcupration de lURL o se trouve le document

Avec l'objet forms, qui se trouve sous l'objet document

Il sagit daccder la case cocher pour modifier le

Ensuite, on se rfre la case cocher et la zone de

Le champ form a plusieurs proprits :

Pour raliser laction qui accompagne le formulaire

donne le nombre de formulaires dfinis

Sauvegarde la valeur qui figure lors de la dfinition du formulaire dans

<form name="formulaire_test" action="mailto:toimeme@cheztoi.com" onSubmit="return Methode()">

Sauvegarde le nom dun formulaire

Prcise la cible (cadre) dans laquelle laffichage sera fait :

Permet lenvoi du formulaire : JavaScript lance un compte rebours

Le champ elements : sous-objet de forms

Checked : exemple: Sauvegarde si oui ou non une case cocher ou une

defaultValue : Sauvegarde le texte par dfaut d'un champ de saisie

Pour cela, on prcise :

Les vnements sont lintrt du JS en matire de

Clic de souris, survol de zones, chargement de la page

OnClick, onMouseOver : appel de fonction pour agir en

Syntaxe du gestionnaire dvnement :

Lorsqu'il est utilis dans un lien hypertexte, par

<input type=button onClick=alert(vous avez cliqu sur

<body onLoad="alert(la page est charge !) ;">

Au chargement, raliser tel vnement

<img src="pix.gif" onError="alert(Erreur de

Prvient lerreur au chargement

<img src="pix.gif" onAbort=alert(Vous avez

Prvient lerreur au chargement

Prvient quand on sloigne de la cible

Button, Checkbox, FileUpload, Layer, Password, Radio, Reset,

<input type="text" onblur="this.size = 20"

onBlur : permet de savoir lorsque le champ perd le focus

<input type="reset" value="Effacer" name=effacer

En appuyant sur le bouton effacer, il remet dans la