9889575

JQuery
1
JQuery
• Une librairie JavaScript permettant de faciliter le traitement
des documents HTML
• Permet d'écrire du JavaScript avec une syntaxe plus concise.
• Fonctions
– Manipulation des arbres DOM incluant les styles
– Manipulation d'événements
– Effets d'animation
– Support pour le langage AJAX
• Supporté par tous les navigateurs.
2
INF2005– Programmation web– A. Obaid
Utilisation de JQuery
• On doit télécharger la libraire JQuery
• On l'enregistre pour s'y référer dans un document HTML:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
… notre code JavaScript …
</script>
• Plusieurs sites de téléchargement:

– http://docs.jquery.com/Downloading_jQuery#Download_jQuery
– Http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
3
Appel de la librairie
• Toute commande JQuery doit être appelée après que le
document soit chargé.
• On peut y déclarer et utiliser des fonctions.
• Tout doit être appelé dans un script JavaScript au sein de la
fonction $(*).ready().
• On peu stocker le résultat d'une commande JQuery:
– var texte=$("#monDiv").html();
Sélecteur Évènement Fonction

de traitement(anonyme)
$(document).ready(function() {
… Commandes JQuery/JavaScript … jq1.html
});
Objet JQuery
4
Un premier exemple
<html>
<head>
<title> Premier Exemple</title>
$("div").click(function() { alert("Je suis la !");
}
);
});
</script>
jq2.html </head>
<body>
<div id=“monDiv">
Si on clique ici, on verra la fenetre d'alarme !
</div>
</body>
</html>
5
Les identificateurs
• Dans JavaSCript, on peut trouver un élément avec son
identificateur grâce à la méthode getElementById()
• Dans JQuery, on peut tout simplement utiliser un

sélecteur pour retrouver l'élément
vElelement= ... getElementById("maListe")

…..
$("#maListe").addClass("rouge");
});
6
Les sélecteurs
• Ils permettent d'accéder à des éléments du DOM.
– Ensemble très riche
• Utilisent des noms de balises, des identificateurs, des noms
de classe, des valeurs d'attributs, des pseudo-classes, etc.
• Utilisés dans une forme $(sélecteur) où sélecteur peut

prendre plusieurs formes semblables à celles utilisées dans
CSS.
– $(balise)
– $(identificateur)
– $(classe)
– $(expression)
– … 7
Les sélecteurs
– $("p") : tous les éléments <p>
– $("p.intro") : tous les éléments <p> de classe "intro".
– $("p#demo") : l'élément <p> d'identité "demo".
– $("[href]") : les éléments ayant un attribut href.
– $("[href='#']") : les éléments avec un attribut href = "#".
– $("[href$='.jpg']") : tous les éléments ayant un attribut href se
terminant par jpg".
– $("ul li:first") : le premier <li> de chaque <ul>
– $("ul li:last") : le dernier <li> de chaque <ul>
– $("div#intro.entete"): les éléments de classe "entete" à l'intérieur d'un
<div> d'identité="intro"
– $(“td”) : tous les éléments <td> dans le document
– $("p a"): éléments <a> , descendants de tout élément <p>
– $("p > a"): éléments <a>, enfants directs de tout élément <p>
8
Les sélecteurs
• sel:even : séléments en position paire dans une sélection.
• sel:odd: éléments en position dans une sélection..
• sel:eq(n) ou :nth(n) : les éléments qui se trouvent à la
position n. Ca commence à la position 0.
• sel:gt(n) : éléments à la position > n.
• sel:lt(n) : éléments se à la position < n.
• sel:first : équivalent à sel:eq(0).
• sel:last : dernier élément de la liste
• élements:parent : éléments qui ont des enfants.
9
Les sélecteurs
<!—Fichier : selecteur1.html -->
<html>
<head>
<style type="text/css">
.vert { background-color: green;} <body>
.gris { background-color: grey; } <table border=1>
.gras { font-style: bold;} <th> Nom </th> <th> Age </td><th> Salaire</th>
<tr > <td> Alain </td> <td> 35</td> <td> 65000</td></tr>
</style>
<tr> <td> Jean </td> <td> 45</td> <td> 80000</td></tr>
<script type="text/javascript" src="jquery.js"></script><tr> <td> Pierre</td> <td> 50</td> <td> 82000</td></tr>
<script type="text/javascript"> <tr> <td> Paul </td> <td> 38</td> <td> 70000</td></tr>
$(document).ready(function() { </table>
$('tr:odd'). addClass('vert'); <p> Ceci est un premier paragraphe</p>
$('tr:even'). addClass('gris'); <p> Ceci est une deuxieme paragraphe </p>
$('p:eq(1)'). addClass('gras'); </body>
}); </html>
</script>
</head>
10
Exemples de sélecteurs
1. <p id="leTexte">
2. <span class="unTexte"> Bonjour la gang ! </span>
3. <imgsrc="photo1.jpg" class="image1" />
4. </p>
5. <p>
6. <imgsrc="photo2.gif" alt=" image2 />
7. <span class="unTexte"> Les photos de vacances ! </span>
8. </p>
9. <imgsrc="photo3.jpg" style="display: none;" class=" image1" />
#leTexte 1
#leTexte .unTexte: 2
p > span: 2
span + img: 3, 7
span > imgaucun
.img[src$=.jpg] 3,9
.img[src~=photo] 3,6
p ~ img 9
p:first + img aucun
:hidden 9
img:hidden:not(.image1): acun
p:contains('Bonjour'):has(span): 1
11
Autres sélecteurs JQuery
• Sélecteurs propres à JQuery permettant de spécifier
certains caractéristiques des éléments:
– sel::hidden Éléments invisibles,
– sel:visible Éléments visibles.
– sel:parent Éléments qui ont des enfants.
– sel:contains(texte) Éléments qui contiennent texte
– sel:empty Éléments dont le contenu est vide
– sel:nth(n) n-ème élément
– sel:contains('chaine'): éléments qui contiennent chaine
– sel:visible: éléments visibles.
– sel:hidden : les éléments caches
–…
12
Autres sélecteurs JQuery

<html> <head>
<style tye="text/css">
.accentue {
font-style: italic;
background-color: #0f0;
}
</style>
<script type="text/javascript" src="jquery.js" ></script>
<script tyep="text/javascript">
$(document).ready(function() { <p>
$('span:contains(assurance)').addClass('accentue'); <span> Ceci est un texte qui contient le mot
}); assurance.</span>
</script> </head> <span> Ceci est un texte qui ne contient pas ce mot. </span>
<body > </p>
<p>
Le contrat d'assurance <span> est decrit en termes
juridiques</span> </p>
<span> Ici, est question par exemple de l'assurance-
auto</span>
</body>
</html>
13
Événements dans JQuery
• Comme dans JavaScript, un événement est associé à un
élément et pourra être programmé pour effectuer une tache
désignée par une fonction.
• Exemple: click(), mouseover(),…
• Exemple:
– JQuery:
$("a").click(function() {
alert("Bonjour tout le monde ! " );
});
});
– JavaScript:
<a href="javaScript:void(0)" onclick="alert('Bonjour tout le monde ! ')">Lien</a>
14
Événements dans JQuery
• $(document).ready(fonction)
• $(sélecteur).click(fonction)
• $(sélecteur).dblclick(fonction)
• $(sélecteur).focus(fonction)
• $(sélecteur).mouseover(fonction)
• …
15
Les callbacks
• Fonctions appelées dans d'autres.
• Un fonction peut avoir une autre fonction en paramètre qui

sera exécutée à la fin de l’exécution de celle-ci.
– Utilisé (entre autres) pour faire des animations

$(".test").fadeOut("slow",function(){ Jq8.html
$(this).fadeIn("slow");
});
});
</script>
16
Chainage des fonctions
• On peut mettre des fonctions en chaine appliquées à un
objet.
• Au lieu d'écrire:
– $(".toto").append(" un texte");
$(".toto").css(border,’1px solid red');
$(".toto").addClass("titi");
$(".toto").removeClass("toto");
On écrirait:
– $(".toto").append(" un texte").css("border","1px solid red")
.addClass("titi").removeClass("toto");
17
La méthode html()
• Elle permet d'accéder ou de modifier le contenu d'un élément
– selecteur.html() : pour l'accès.
– selecteur.html('Code HTML'): pour la modification.
• Exemples:
– alert($('#titre').html());
• Affiche le contenuHTML de #titre.
– $('#titre').html('Voici mon nouveau contenu'):
• Change le contenu HTML de #titre.

<script type="text/javascript"> jq9.html
$(".monPar1").html("<h2> Au revoir ancien paragraphe </h2>");
$(".monPar3").html($(".monPar2").html());
});
</script>
18
La méthode text()
• Permet de manipuler le contenu d'un élément en tant que
texte.
• Le contenu est considéré comme du texte et non comme du

HTML.
<p id="premier">
<span class="texte"> Bonjour la gang !
</span> jq3.html
<img src="photo1.jpg" />
</p>
$(.premier).text() ramène: Bonjour la gang !

$(.premier).html() ramène:
<span class="texte"> Bonjour la gang ! </span>
<img src="photo1.jpg" /></p>
19
La méthode replaceWith()
• html() et text() permettent de changer le contenu d'une
balise.
• replaceWith() permet de remplacer la balise et son contenu.

$('a').replaceWith('<h3>Encrageenlevé! </h3>'); jq11.html
$('#titre').replaceWith('<h1>'+$('#titre').html()+'</h1>');
$('.premier').replaceWith('<a href="http://www.uqam.ca"> Site UQAM</a>');
});
20
Les méthodes before() et after()
• Elles permettent d'ajouter du contenu à un élément de la
page avant ou après l'élément en question.
• Exemple:
– $('zonetexte').after('<p> N'oubliez de signer votre texte SVP ! ');
– Ajoute un message de rappel après une zone de texte.
jq10.html
21
Les méthodes wrap() et wrapIn()
• wrap() permet d'ajouter une balise (ouvrante et fermante)
autour d'un élément.
– En fait on passe en paramètres une balise ouvrante et sa fermante
(sans contenu !).
• wrapIn() entoure un contenu.
• Exemple:
– $('div').wrap('<em></em>') transformera les <div>en:
• <em><div> …</div></em>
jq12.html
– $('div').wrapIn('<em></em>') transformera les <div> en
• <div><em> … </em></div> Jq12_1.html
function colorer() {
$('#par .rouge').wrap('<span style="color:red"></span>');
$('#par .vert').wrap('<span style="color:green"></span>');
$('#par .bleu').wrap('<span style="color:blue"></span>');
} 22
La méthode unwrap()
• Inverse de wrap().
• Elle permet d' enlever la balise parent qui l'enveloppe.
…
$('#enveloppe').unwrap();
jq12.html
…
<b>
<div id="enveloppe"> Ceci est un div enveloppe avec <b> </div>
</b>
23
Les méthodes remove() et empty()
• remove() permet de supprimer des éléments.
– On lui passe un sélecteur de l'élément à supprimer.
• empty() permet de vider le contenu d'un l'élément
$("button").click(function(){
$("p").remove();
}
);
function viderLesBoutons(){ $('#LesBoutons button').empty(); }
function viderTout(){ $('body').empty() }
</script>
… Jq13.html
<body>
<div id="LesBoutons">
<button onClick="viderLesBoutons();">Vider les boutons</button><br />
<button > Un bouton vide !</button>
</div>
<button onClick="viderTout();">Vider les le tout </button> …
24
JQuery et CSS
• On dispose de méthodes pour la manipulation des classes
CSS: addclass(), removeClass(), etc.
$("#maListe"). hover(function() { $(this).addClass("vert"); },
});
$("#maListe"). hover(function() { $(this).removeClass("vert"); };
});
25
addClass() et removeClass()
• addClass() permet d'ajouter une ou plusieurs classes
• removeClass() permet d'enlever une ou plusieurs classes
• Il existe aussi removeAttr(),… pour gérer les propriétés CSS
.monDiv { color: red; }
.lien:hover { color: yellow; }
</style>
functionajouteclasse(){
$('div:first').addClass('monDiv'); jq17.html
$('a').addClass('lien');
}
</script>
</head>
<body>
<div> Premier div</div>
<div>deuxiemediv</div>
<buttononclick="ajouteclasse();"> Ajouter une classe </button>
<br/><a href="page1.html"> Un lien </a> 26
INF2005– Programmation web– A. Obaid </body></html>
La méthode css()
• La méthode css() permet de manipuler les propriétés CSS
d'élément du code HTML
– css("Propriété") retourne la valeur d'une propriété.
– css("Propriété", "valeur",…) affecte la valeur à la propriété.
$(#leBouton).css("width");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","display":"box"});
27
Modifications de propriétés CSS
• css() peut s'utiliser de plusieurs façons:
– css('propriéte') permet de récupérer la valeur d'une propriété CSS
– css('propriété','valeur') permet de définir une propriété CSS
– css({apropriete1: valeur1, propriete2: valeur2,…}) permet de définir
plusieurs propriétés CSS
$('body').css('background-color','#0ff');
$('a') .css({
borderBottom: '2px dashed #ff00ff',
color: '#4Cb',
paddingLeft: '4px', 'float': 'left',
margin: '4px', 'letter-spacing': '2px',
})
28
<html>
<head>
function accentuer(){ $("dt").addClass("accentue"); }
</script>
h1 { font-size: 2.5em; margin-bottom: 0;}
.accentue { font-style: italic; color:red;}
</style>
</head> jq6.html
<body >
<h1>Villes du monde </h1>
<dl>
<dt> Montreal </dt><dd> Large, verte, vivante et dynamqiue</dd>
<dt> New York </dt><dd> Dense, pleine de grattes-ciels , passionnante, centre d'affaires
</dd>
</dl>
<a href="#" onMouseOver="accentuer()">Allez-y ! </a>
</body>
</html> 29
• La méthode toggleClass() permet d’ajouter et d'enlever des
classes (par jonglage !)
– Les classes peuvent être appliquées en série.
.lrouge { background-color: #000;
color: #fff;
border : 5px solidyellow;}
}
.encadre { display: block; }
</style> jq18.html
functionjouerAvec(){
$('a').toggleClass('encadre'). toggleClass('lrouge');
}
</script>
</head>
<body>
30
Objets JQuery
• jQuery repose sur la fonction jQuery() appelée aussi
$() qui retourne un objet jQuery.
• Cet objet a plusieurs méthodes:

– Manipulation du DOM, de CSS, d’évènements et autres
effets visuels.
• Exemple:
– Si on désire masquer progressivement les paragraphes
d’une page, on utilise :
– $("p").fadeOut(); jq8.html
31
JQuery et DOM
• La fonction $() retourne un tableau d'objets DOM.
• Les éléments de ces tableaux sont accessibles grâce à leurs
indices.
• Exemples:
– $('body'): retourne un tableau à un élément.
– $('a') : retourne un tableau d' éléments <a>
– $('p')[1] désigne le deuxième paragraphe.
• before() et after(), etc. utilisent ces indices pour déterminer la

place de l'action JavaScript à effectuer.
32
JQuery et DOM
• On peut consulter des propriétés de ces objets tels que
tagName, length, etc.
• On a aussi des méthode de parcours de l'arbre DOM.

– parent() renvoie l'élément parent direct d'un élément.
– children() renvoie les éléments enfants directs d'un élément
• On peut ajouter des éléments à des endroits spécifiques avec

les méthodes prependTo(), appendTo(), insertBefore(),
insertAfter()
function lister(){
alert($('.bouton').length); Jq14.html
alert($('#bouton1')[0].tagName);
alert($('body').parent()[0].tagName);
}
33
Sélecteurs et formulaires
• Il existe des sélecteurs spécifiques aux formulaires :
– :checked : les boutons checkbox ou radio cochés
– :selected : les options (select) sélectionnées.
– :input : les éléments input d'un formulaire.
– :button : les boutons.
– :reset désigne les boutons reset.
– :submit : les boutons submit.
– :checkbox : les cases à cocher.
– :radio désigne tous les boutons radio.
– :text désigne tous les champs de texte. jq16.html
– :password les champs de mots de passes.
– :hidden désigne les éléments du formulaire cachés.
– …
• La méthode val() retourne la valeur d'un champ du formulaire.
Elle permet aussi de modifier un contenu.
34
Gestion des événements
• On dispose de méthodes pour écouter des événements par
l'utilisation de fonctions
• Ces méthodes ont pour nom le type de l'événement et

comme argument la fonction de traitement de l'événement:
element.evenement(function(){
… Code de la fonction…
});
…
element.evenement();
35
Événements de formulaires
• select: déclenché lorsque du texte est sélectionné dans un
champ de type text ou un texteara.
• change: déclenché lorsque le texte d'un champ de type text,
password ou texteara a été modifié.
• submit : déclenché lorsqu'un formulaire est soumis
• focus : déclenché lorsque le focus est mis sur un élément d'un
formulaire
$(':text, textarea').select(function(){
alert("Champ texte selctionne : "+$(this).val());
}); jq21.html
$(':input').change(function(){
alert("Champ input modifie : "+$(this).val());
});
});
36
Événements de souris et clavier
• keydown : enfoncement de la touche
• keypress : maintien de la touche enfoncée
• keyup : relâchement de la touche.
• mousedown : appui sur la souris
• mouseup : relâchement de la souris
• click : clic de la souris.
• mouseenter : la souris entre au-dessus de l'élément
• mouseleave : la souris quitte l'élément
• mouseover : la souris entre au-dessus de l'élément
• mouseout : la souris quitte l'élément
• mousemove : la souris bouge sur l'élément jq22.html
jq23.html
37
Objet clic
• Correspond au clic de la souris;
• Possède des propretés de coordonnées:
– pageX: Coordonnée X (gauche vers la droite)
– pageY: Coordonnée Y (de haut vers le bas)
38
Événements de fenêtre
• scroll : déclenché lorsque l'utilisateur utilise un ascenseur
horizontal ou vertical.
• resize : déclenché lorsque l'utilisateur redimensionne la
fenêtre.
• load : déclenché lorsque l'élément en question a fini de se
charger (page, cadre, image, etc.).
• ready : déclenché lorsque la page est prête. Utilisé avec
l'objet document.
• unload : déclenché lorsque l'utilisateur quitte la page.
39
Autres événements
• hover() : déclenché lorsque la souris passe au-dessus d'un
élément (mouseover) et quand elle s'en va (mouseout).
• toggle() : fonction de basculement appelée successivement

pour les effets show/hide et slide).
jq24.html
40
Les fonctions d'animation
• Les méthodes slideDown() et slideUp() changent la hauteur et le
largeur d'éléments
– $(sélecteur).slideDown(vitesse, fonction)
– $(sélecteur).slideUp(vitesse, fonction)
• La méthode slideToggle() permet de faire un basculement.
– $(sélecteur).slideToggle(vitesse, fonction)
• La vitesse peut être: "slow", "fast", "normal" ou une durée en millisecondes. La
fonction (si elle est présente) sera exécutée à la fin de l'effet.
$(document).ready(function(){
$("#montrer").click(function(){
$("#tableau").slideDown("slow");
});
}); jq30.html
</script>
41
Les fonctions d'animation

<html>
<head>
<script type="text/javascript" language="javascript">
$("#bascule").click(function(){ <body>
$(".texte").slideToggle( 'slow'); <p> Appueyz sur le bouton pour faire appareite et
}); disparaitre le bloc ci-dessous</p>
}); <button id="bascule">Basculer</button>
<div class="texte">
</script>
Quam ob rem ut ii qui superiores….
<style> <img id="uneImage" src="ete.jpg">
.texte { width:400px; color: red;border:1px solid black; } <br>
#uneImage { width:100px; float: left; margin: 5px; } Ideo urbs venerabilis post superbas efferatarum gentium
</style> cervices oppressas latasque leges ...
</div>
</body>
</html>
42
Les méthodes pour l'animation
• animate() permet d'animer le style CSS.
• Elle a la forme suivante:
• animate(style, [durée], [manière], [fin])
• style: formé des couples attribut/valeur définissant le style de
l'élément à la fin de l'animation.
• durée : durée en ms de l'animation ou un symbole parmi : slow
(600ms), normal (400ms), fast (200ms).
• manière : chaine qui détermine la façon dont les propriétés vont
changer : "swing", "linear".
• fin: fonction appelée quand l'animation est finie.
jq25.html
43
Animation - Exemples
script type="text/javascript">
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
}); http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation
});
</script>
<body>
<button>Start Animation</button>
<br /><br />
<div style="background:#98bf21;height:100px;width:100px; position:relative">
</div>
</body>
</html>
44
<html>
<head>
$("div").animate({left:"100px"},"slow");
$("div").animate({fontSize:"3em"},"slow");
});
});
</script> http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2
</head>
<body>
<br /><br />
<div style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div>
</body>
</html>
45
Les effets de visibilité
• Les méthodes hide() et show() donnent un effet d'animation
en jouant sur la visibilité (attribut visibility) des éléments :
– hide (vitesse[, callback])
– show(vitesse[, callback])
• vitesse peut être: "slow", "fast", "normal" ou une durée en
millisecondes. Callback sera exécutée à la fin de l'effet.
• Ces méthodes sont souvent combinées.
• La méthode toggle (vitesse[, callback]) est utilisée pour
passer entre l'absence et la présence d'un élément jq27.html
$(document).ready(function(){ $(document).ready(function(){
$(".cacheMoiCa").click(function(){ $("p").click(function(){
$(".secret").hide("slow"); $(this).hide();
}); });
}); });
46
Les effects de visibilité
jq26.html
<html> <head> jq27.html
<style>
#click1{
jq28.html
margin:10px;padding:12px; border:2px solid blue;
width: 80px; height:20px;
} jq29.html
</style>
<script type="text/javascript" src="jquery.js" ></script> jq8.html
bouger.html
$("#click1").click(function(){
$("#div1").hide(); <body>
}); <div>
}); <div id="click1"> Clickez ici </div>
</script> <div id="div1"> <img src="ete.jpg" width=300px/> </div>
</head> </div>
</body>
</html>
47
La méthode toggle()
<html>
<head>
#go{
border:2px solid #666; width: 40px;
}
</style>
$("#go").click(function(event){ <body>
$("#leDiv").toggle('slow'); <div id="go">Vas-y</div>
}); <div id="leDiv"> <img src="ete.jpg" width=120px /> </div>
}); </body>
</script> </html>
</head>
48
Modification de la transparence
• Les méthodes fadeIn() /fadeOut() permettent de faire
apparaître/ disparaitre les éléments progressivement en
jouant sur le transparence.
– fadeIn(vitesse[, callback])
– fadeOut(vitesse[, callback])
• Des fois, on inclut une de ces méthodes comme callback de

l'autre:
$("#p2").fadeOut(2000, function() {
$(this).fadeIn(2000);
});

• fadeTo( ) permet de changer l'opacité d'un élément
en la faisant passer à un niveau donné.
– fadeTo(vitesse, opacite, callback);
• opacity : valeur entre 0 et 1 (1 : très opaque).
50
<html> <head>
<script type="text/javascript" language="javascript">
$("#plusOpaque").click(function(){ $(".texte").fadeTo( 'slow', 0.9); });
$("#moinsOpaque").click(function(){ $(".texte").fadeTo( 'slow', 0.1); });
}); <body>
</script> <p> Appueyz sur le bouton pour faire appareite
<style> et disparaitre
.texte {width:400px; color: red; border:1px solid black;} le bloc ci-dessous</p>
#uneImage { width:100px; float: left; margin: 5px; } <button id="plusOpaque">Opaciser</button>
</style> <button id="moinsOpaque">Eclaircir</button>
</head> <div class="texte">
Quam ob... <img id="uneImage" src="ete.jpg">
<br> Ideo urbs venerabilis post superbas
...
</div>
</body>
</html>
51


<html>
<head>

<script type="text/javascript" src="jquery.js" ></script>

$(document).ready(function() { <body>
$("#p1").fadeOut('slow'); <p id="p1"> Mon premier paragraphe Hac ex
$("#p2").fadeOut(2000, function() { causa conlaticia stipe
$(this).fadeIn(2000); Valerius humatur ille …</p>
}); <p id="p2"> Mon second paragraphe:
}); Proinde die funestis interrogationibus
</script> praestituto im…. </p>
</head> </body>
</html>
52
La méthode animate()
• Permet d'animer des propriétés CSS
– animate(styles, [durée], [manière], [callback])
• styles: liste attribut/valeur des éléments style utilisés.
• durée : slow (600ms), normal (400ms), fast (200ms) ou
une durée en ms.
• manière : façon dont les propriétés vont changer :
"linear", "swing", …
• Le paramètre styles sous forme {propriété: "valeur" ,…}
• {width: "100", height: "200px", fontSize: "14pts"}
jq25.html
53
La méthode animate()
script type="text/javascript">
});
Source: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation
});
</script>
<body>
<br /><br />
<div style="background:#98bf21;height:100px;width:100px; position:relative">
</div>
</body>
</html>
54
<html>
<head>
$("div").animate({left:"100px"},"slow");
$("div").animate({fontSize:"3em"},"slow");
});
});
</script> http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2
</head>
<body>
<br /><br />
<div style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div>
</body>
</html>
55
Effets animés
• Pour avoir un animation progressive il faudra donner
l'impression de continu
• Règle générale:
– Durée de l'animation d'une boite égale à la différence de
hauteur (à la fin de l'animation) divisée par la vitesse
– La durée d'animation de la vidéo est de 25 frames/seconde
(25 fps).
56

9889575

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

9889575

Transféré par

Droits d'auteur :

Formats disponibles

JQuery

• Permet d'écrire du JavaScript avec une syntaxe plus concise.

• Supporté par tous les navigateurs.

• On l'enregistre pour s'y référer dans un document HTML:

• Plusieurs sites de téléchargement:

Sélecteur Évènement Fonction

• Dans JQuery, on peut tout simplement utiliser un

vElelement= ... getElementById("maListe")

• Utilisés dans une forme $(sélecteur) où sélecteur peut

• Exemple: click(), mouseover(),…

• Un fonction peut avoir une autre fonction en paramètre qui

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="jquery.js"></script>

• Le contenu est considéré comme du texte et non comme du

$(.premier).text() ramène: Bonjour la gang !

• replaceWith() permet de remplacer la balise et son contenu.

• Elle permet d' enlever la balise parent qui l'enveloppe.

• Cet objet a plusieurs méthodes:

• before() et after(), etc. utilisent ces indices pour déterminer la

• On a aussi des méthode de parcours de l'arbre DOM.

• On peut ajouter des éléments à des endroits spécifiques avec

• Ces méthodes ont pour nom le type de l'événement et

• toggle() : fonction de basculement appelée successivement

• Des fois, on inclut une de ces méthodes comme callback de

INF2005– Programmation web– A. Obaid

Vous aimerez peut-être aussi