0% ont trouvé ce document utile (0 vote)

40 vues37 pages

Cours L1 JQuery

Le document présente l'utilisation de la bibliothèque JavaScript jQuery pour manipuler le DOM, gérer les événements et appliquer des styles. Il décrit les différentes versions de jQuery, les sélecteurs disponibles pour cibler des éléments, et fournit des exemples de code pour illustrer son utilisation. Les sélecteurs incluent des méthodes pour sélectionner des éléments par classe, ID, attributs et relations dans le DOM.

Transféré par

jeanbaptiste45522

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

0% ont trouvé ce document utile (0 vote)

40 vues37 pages

Cours L1 JQuery

Transféré par

jeanbaptiste45522

Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.

Formats disponibles

Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

RV ENI p.

1
Utilisation de la bibliothèque JavaScript jQuery Par exemple,

1. Introduction <html>
<head>
Les bibliothèques Javascript reconnues : <script type="text/javascript"
• Ext (une bibliothèque Javascript indépendante) src="jquery.min.js"></script>
<script type="text/javascript">
• Dojo
$(document).ready(function()
• Angular_js {
• jQuery $("a").click( function()
{
JQuery est un framework développé en javascript qui alert("Hello world!");
permet notamment de manipuler aisément le contenu }
de votre page (la DOM) , d'utiliser AJAX, de créer des );
animations .Ce framework comme une librairie de });
fonctions, propose des méthodes puissantes pour </script>
parcourir le modèle DOM. Vous pouvez par exemple
récupérer le contenu textuel d'un élément, de <body>
modifier son code HTML, de lui ajouter un autre <a href="#">Lien1</a>
élément avant ou après, de lui incorporer un autre <a href="#">Lien2</a>
élément, de l'envelopper d'un autre élément, ainsi que </body>
de le copier, de le supprimer ou de le vider. </html>

Vous pourrez trouver 3 versions du fichier javascript

JQuery à savoir : Où :
 Minified and Gzipped :: version à utiliser sur • $("a") est un sélecteur jQuery, ici, il sélectionne
votre serveur de production (.min.js) tous les éléments de type lien <a>.
 Uncompressed :: version à utiliser si vous • $ est un alias pour la classe jQuery : $()
souhaitez parcourir le code javascript fabrique un nouvel objet jQuery.
constituant JQuery (.js) • La fonction click() appelée dans la suite est
 Packed : version à utiliser si vous ne pouvez une méthode de l'objet jQuery. Elle associe un
pas appliquer de compression GZip à votre événement à tous les éléments sélectionnés et exécute
code javascript (pack.js). la fonction fournie quand l'événement se déclenche.

Pour intégrer la bibliothèque JQuery de base , on écrit Le code suivant génère le même message :
dans la partie <HEAD> de la page :
<script type="text/javascript" src="jquery.min.js"> <a href="#" onclick="alert('Hello world');">Lien</a>
</script>
La différence est évidente :
Pour pouvoir manipuler le modèle objet du document • on n’a pas besoin d'écrire un événement
(DOM), il faut charger complètement chargé le DOM (le onclick pour chaque élément ;
document). Pour cela, nous enregistrons un • on obtient une séparation claire entre la
événement « document chargé » ou « $ structure (HTML) et le comportement (JavaScript) de la
(document).ready(function(){}) ». même manière que la feuille de style CSS est
La fonction ready permet l'éxécution d'une fonction dissociée du code HTML.
spécifique une fois le document DOM
entièrement chargé,  Passer des fonctions à des méthodes

$(document).ready(function() { La plupart des méthodes jQuery peuvent prendre des

// Traitement à effectuer lorsque le DOM est prêt fonctions anonymes en argument.
});
Ou bien Code javascript:
$(expression).methode(function(){
jQuery(document).ready(function($){ // Action
// Traitement à effectuer lorsque le DOM est prêt });
});
on peut aussi donner en paramètre une référence à
jQuery(function() { une fonction :
// code jquery
} function maFonction(){
$(function() { // Action
// code jquery };
} $(expression).methode(maFonction);

1
RV ENI p. 2
Par exemple, 2. Présentation des sélecteurs
function clickChamp(){
alert('Vous avez cliqué sur un élément '); Les sélecteurs permettent de sélectionner un ou plusieurs
} éléments du DOM grâce à une fonction spéciale nommée
$('a').click(clickChamp); « $ » , ces derniers pouvant être manipulés comme tout
autre objet.
this et les fonctions des méthodes
$('*') // Sélectionne tous les éléments (inclut les éléments
Dans une fonction passée à une méthode, , this est head, body, etc).
l'élément du DOM concerné par la fonction et il faut
utiliser $(this) afin d'utiliser les méthodes jQuery sur  Selecteurs: "element"
les éléments qu'on modifie grâce à la méthode.
Notez le $(this) qui n'aurait pas été possible sans la Sélectionne les éléments en fonction de leur nom.
fonction anonyme !
Exemple : Ajoute une bordure aux DIV
$("p").mouseover( function() { $(this).css("border","3px <html>
solid grey");}); <head>
<script type="text/javascript" src="
Références à des éléments du DOM jquery.min.js"></script>
<script type="text/javascript">
Un objet jQuery contient plusieurs références à des $(document).ready(function(){
éléments du DOM .C'est-à-dire que quand on applique $("div").css("border","7px solid red");
des méthodes jQuery sur un objet jQuery, il y a
modification des éléments du DOM qu'il contient. });
Cette modification se répercute alors directement sur la </script>
page web.
<style>
div,span {
width: 60px;
height: 60px;
float:left;
padding: 10px;
margin: 10px;
background-color: #EEEEEE;
}

</style>
</head>
<body>

 Selecteurs: ".class"
selectionne les éléments selon leur classe.
$(".tata");// retourne tous les éléments d’un document qui
ont la classe CSS "tata".
$('p.first') // Sélectionne les éléments <p> ayant la classe
"first".

Exemple : Assigne une bordure rouge a tous les éléments

contenant la classe maClasse.

});
</script>
2
RV ENI p. 3
</head>
<style> <body>

div,span { <div class="myClass">div class="myClass"</div>

width: 150px; <div class="myOtherClass">div
height: 60px; class="myOtherClass"</div>
float:left; <div class="myClass myOtherClass">div
padding: 10px; class="myClass myOtherClass"</div>
margin: 10px; </body>
background-color: #EEEEEE; </html>
}
 Selecteur : "parent > enfant"
</style>
</head> Recherche tous les éléments définis par le sélecteur
<body> "enfant", fils direct de l'élément parent spécifié par le
sélecteur "parent".
<div class="classeQuelconque">classeQuelconque</div>
<div class="maClasse">maClasse</div> Exemple : Assigne une bordure à tous les fils direct de
<div class="maClasse uneAutreClasse">maClasse l'élément disposant de la classe "main". Les petits fils de
uneAutreClasse</div> cet élément ne sont pas concernés par la modification de
</body> style.
</html>
<script type="text/javascript">
$(document).ready(function(){
 Sélecteur $('#id') : Sélectionne un élément en $("#main > *").css("border", "3px double
fonction de son attribut id. red");

Exemple : assigne une bordure rouge au div disposant });

de l'id </script>

<script type="text/javascript"> <style>

$(document).ready(function(){
$("#myDiv").css("border","3px solid red");// myDiv. body { font-size:14px; }
// ou bien $("div#myDiv").css("border","3px solid span#main { display:block; background:yellow;
red"); height:110px; }
}); button { display:block; float:left; margin:2px;
</script> font-size:14px; }
</head> div { width:90px; height:90px; margin:5px; float:left;
<body> background:#bbf; font-weight:bold; }
div.mini { width:30px; height:30px; background:green; }
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div> </style>
</head>
</body> <body>
</html>
<span id="main">
 Selecteurs: ".class.class" <div></div>
<button>Child</button>
Recherche tous les éléments qui possèdent les classes <div class="mini"></div>
spécifiées. <div>
<div class="mini"></div>
Exemple : Affiche une bordure pour le div contenant la <div class="mini"></div>
classe "myClass" et "myOtherClass". </div>
<div><button>Grand</button></div>
<head> <div><span>A Span <em>in</em> child</span></div>
<script type="text/javascript"> <span>A Span in main</span>
$(document).ready(function(){ </span>
$
(".myClass.myOtherClass").css("border","3px solid </body>
red");
$('div > .enfant') // Sélectionne les éléments ayant la
classe "enfant" enfants d'éléments <div>.
}); $("#titi > span");//retourne tous les éléments SPAN
</script> contenus dans l'élément dont l'identifiant est "titi". On

3
RV ENI p. 4
pourrait écrire cet appel de cette façon également : $  Selecteur: "selecteur1, selecteur2,
("span", $("#titi")); selecteurN"
$("table#tutu > tr:even"); retourne tous les éléments TR
pairs (pour les lignes impaires remplacer "even" par "odd") Retourne le résultat de tous les sélecteurs combinés.
contenus dans l'élément TABLE dont l'identifiant est
"tutu" . Cet appel peut etre extremement utile pour $('ul, ol, dl') // Sélectionne les éléments <ul>, <ol> et <dl>
appliquer une couleur de fond à toutes les lignes paires
par exemple.
Exemple : entourer d’une bordure pour tous les
 Selecteur: "prev+next" éléments de type DIV, SPAN, et les paragraphe dispoant
de la classe myClass
Recherche tous les éléments répondant au sélecteur
"next", et qui se trouvent apres les éléments identifiés par
le sélecteur "prev". <script type="text/javascript">
$(document).ready(function(){
Exemple : Modifie le style des champs INPUT situés apres $
un LABEL. ("div,span,p.myClass").css("border","3px solid red");

<script type="text/javascript"> });

$(document).ready(function(){ </script>
$("label + input").css("color", <body>
"blue").val("Labeled!")
<div>div</div>
}); <p class="myClass">p class="myClass"</p>
</script> <p class="notMyClass">p class="notMyClass"</p>
<span>span</span>
<body> </body>
<form>
<label>Name:</label>  Selecteur: "[attribute=value]"
<input name="name" />
<fieldset> Recherche les éléments pour lesquels l'attribut spécifié
<label>Newsletter:</label> vaut la valeur définie.
<input name="newsletter" />
</fieldset> Exemple : Recherche tous les champs INPUT avec le
</form> nom 'newsletter', et change le texte du SPAN situé à côté.
<input name="none" />
</body> <script type="text/javascript">
Résultat : $(document).ready(function(){
Name: Labeled!" $("input[name=newsletter]").next().text(" is
Newsletter: Labeled!" newsletter");

});
 Selecteur: "prev ~ siblings" </script>

Cible les éléments frères situés après l'élément ciblé par le <body>
sélecteur "prev" ( à noter que "prev" cible uniquement un <div>
seul élément), et qui répondent au sélecteur "siblings". <input type="radio" name="newsletter" value="Hot
Fuzz" />
Exemple : Sélectionne les éléments <div> frères se <span>name?</span>
situant après l'élément dont l'id est "debut". </div>
<div>
<input type="radio" name="newsletters" value="Cold
$("#debut ~ div").css("border", "3px groove blue"); Fusion" />
<span>name?</span>
Code de test: </div>
<div>
<div>div (doesn't match since before #prev)</div> <input type="radio" name="accept" value="Evil
<span id="debut">span#prev</span> Plans" />
<div>div sibling</div> <span>name?</span>
<div>div sibling <div id="small">div </div>
neice</div></div> </body>
<span>span sibling (not div)</span> </html>
<div>div sibling</div>
 Selecteur: "[attribute!=value]"
4
RV ENI p. 5
 Selecteur: "[attribute*=value]"
Recherche les éléments dont l'attribut spécifié n'est pas
égal à la valeur, et les éléments pour lequel l'attribut n'est Recherche les éléments dont la valeur de l'attribut spécifié
pas spécifié. contient entre autre la valeur spécifiée.

Exemple : Recherche tous les input dont l'attribut Name Exemple : Recherche les INPUT dont le nom contient la
n'est pas newsletter, et ajoute du texte en gras dans le chaine "man", et leur ajoute une valeur.
SPAN à coté de l'input.
<script type="text/javascript">
<script type="text/javascript"> $(document).ready(function(){
$(document).ready(function(){
$("input[name!=newsletter]").next().append("<b>; not $("input[name*='man']").val("has man in it!");
newsletter</b>");
}); });
</script> </script>

<body> <body>
<div> <form>
<input type="radio" name="newsletter" value="Hot <input name="man-news" />
Fuzz" /> <input name="milkman" />
<span>name is newsletter</span> <input name="letterman2" />
</div> <input name="newmilk" />
<div> </form>
<input type="radio" value="Cold Fusion" /> </body>
<span>no name</span>
</div>
<div> has man in it!
<input type="radio" name="accept" value="Evil has man in it!
Plans" /> has man in it!
<span>name is accept</span>
</div>
</body>  Selecteurs: "[attribut]"
Résultat Recherche les éléments pour lequel l'attribut spécifié est
• name is newsletter renseigné.
• no name; not newsletter
• name is accept; not newsletter Exemple : Affiche l'id des div qui en ont un au clic.

 Selecteur: "[attribute$=value]" <script type="text/javascript">

$(document).ready(function(){
Recherche les éléments dont l'attribut spécifié n'est pas
nulle, et pour lequel la valeur se termine par la valeur $("div[id]").one("click", function(){
spécifiée. var idString = $(this).text() + " = " + $
(this).attr("id");
Exemple : Ajoute "a letter" comme valeur aux INPUT dont $(this).text(idString);
le nom se termine par "letter" });
});
<script type="text/javascript"> </script>
$(document).ready(function(){
$("input[name$='letter']").val("a letter"); <body>
}); <div>sans id</div>
</script> <div id="hey">avec un id</div>
<div id="there">aussi avec un id</div>
<body> <div>nope</div>
<input name="newsletter" /> </body>
<input name="milkman" />
<input name="jobletter" /> Résultat:
</body> sans id
avec un id = hey
a letter aussi avec un id = there
nope
a letter
 Selecteurs: "[FiltreAttribut1][FiltreAttribut2]
5
RV ENI p. 6
[FiltreAttributN]"
</style>
Recherche les éléments répondant à chacun des filtres </head>
renseignés. <body>

Exemple : Recherche les INPUT qui ont l'attribut ID <table>

renseigné et dont l'attribut NAME vaut "man". <tr><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<html> <tr><td>Row 3</td></tr>
<head> </table>
<script type="text/javascript" src="
jquery.min.js"></script> </body>
<script type="text/javascript">
$(document).ready(function(){  Filtre :last
$("input[id][name$='man']").val("only this one");
}); Retourne le dernier élément de la sélection.
</script>
$('div:last') // Sélectionne le dernier élément <div>.
<body>
<input id="man-news" name="man-news" /> <script type="text/javascript"
<input name="milkman" /> src="jquery.min.js"></script>
<input id="letterman" name="new-letterman" /> <script type="text/javascript">
<input name="newmilk" /> $(document).ready(function(){
</body> $("p:last").addClass("selected");
});
</script>
Remarques
<style>
On peut aussi passer du html à la fonction principale p { margin: 8px; font-size:16px; }
(comme selecteur) avec des balises, des attributs et leurs .selected { color:blue; }
valeurs ainsi que du contenu (qui peut être d'autres </style>
balises).Mais le selecteur ne peut pas être d’une chaîne </head>
de caractères. <body>

3. La sélection par filtre <p>Paragraphe 1</p>

<p>Paragraphe 2</p>
jQuery offre une possibilité de sélectionner d'éléments <p>Paragraphe 3</p>
en fonction de filtres (à partir de certains critères) sur </body>
des collections d'éléments. </html>

 Filtre ":disabled"
Filtres
Sélectionne les éléments qui sont désactivés.
// La notation [a|b] signifie que l'on applique le filtre a
ou le filtre b. <script type="text/javascript">
$(document).ready(function(){
 Le filtre : ":first" $("input:disabled").val("cet
élément est désactivé");
Sélectionne le premier élément de la sélection. });
</script>
$('div:first') // Sélectionne le premier élément <div>.
<script type="text/javascript"> </head>
$(document).ready(function(){ <body>
$("tr:first").css("font-style", "italic");// <form>
Sélectionne la première ligne et lui attribut un style. <input name="email" disabled="disabled" />
// $("tr:first").css({backgroundColor: 'yellow', <input name="id" />
fontWeight: 'bolder'}); </form>
</body>
});
</script> Résultat

<style> cet élément est activé

td { color:blue; font-weight:bold; }
6
RV ENI p. 7
<style>
 Fitre : ":enabled"
table {
Sélectionne tous les éléments qui sont activés background:#eeeeee;
<script type="text/javascript"> }
$(document).ready(function(){
$("input:enabled").val("cet </style>
élément est activé"); </head>
}); <body>
</script>
<table border="1">
<tr><td>Row with Index #0</td></tr>
<body> <tr><td>Row with Index #1</td></tr>
<form> <tr><td>Row with Index #2</td></tr>
<input name="email" disabled="disabled" /> <tr><td>Row with Index #3</td></tr>
<input name="id" /> </table>
</form> </body>
</body>
$('div:[even|odd]') // Sélectionne les éléments
Résultat <div> de rang [pair|impair] (le premier rang est 0).

 Filtre ":has(selector)"
cet élément est activé
Retourne les éléments dont au moins un de leur
élément fils répond au selecteur "selector".
 Filtre ":eq(index)"
<script type="text/javascript">
$(document).ready(function(){
Sélectionne un élément par son index.
$("div:has(p)").addClass("test");//
Applique une bordure rouge aux éléments DIV qui
<script type="text/javascript">
contiennent un élément paragraphe.
$(document).ready(function(){
$("td:eq(2)").css("color", "red"); //
});
le 3è TD est selectionné
</script>
});
</script>
<style>
.test{ border: 3px inset red; }
<body>
</style>
<table border="1">
</head>
<tr><td>TD #0</td><td>TD #1</td><td>TD
<body>
#2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD
<div> <p>Hello in a paragraph</p> </div>
#5</td></tr>
<div>Hello again! (with no paragraph)</div>
<tr><td>TD #6</td><td>TD #7</td><td>TD
</body>
#8</td></tr>
</table>
</body>  Filtre :not(selector)
Filtre tous les éléments qui répondent à la sélection.
 Filtre : ":even" et odd
$('div:not(.ok)') // Sélectionne les <div> n'ayant pas
la classe "ok".
Even : Selectionne les éléments pairs (index à partir
de 0).
<script type="text/javascript" src="
Odd : les éléments impairs
jquery.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$("input:not(:checked) +
$("tr:even").css("background-
span").css("background-color", "yellow");
color", "red");
$("input").attr("disabled", "disabled");
$("tr:odd").css("background-color",
"green");
});
});
</script>
</script>
</head>
7
RV ENI p. 8
<body> Sélectionne les premiers fils des éléments
<div> répondant à la recherche.
<input type="checkbox" name="a" /> <script type="text/javascript">
<span>Mary</span> $(document).ready(function(){
</div> $('div:first-child
<div> ').css("background-color", "green");
<input type="checkbox" name="b" /> });
<span>lcm</span> </script>
</div> <body>
<div> <div> Texte 1
<input type="checkbox" name="c" <p> Paragraphe 1 </p>
checked="checked" /> </div>
<span>Peter</span> <div> Texte 2
</div> <p> Paragraphe2 </p>
</body></html> </div>
<body>

 Filtre ":only-child"
 Filtre : fonction parent
Sélectionne les éléments qui sont le seul fils des
éléments répondant à la sélection. •Parent(expression)
•:parent()
Exemple : Recherche et modifie l'apparence des
boutons qui n'ont pas de frère. Retourne un groupe d'élements contenant les
<script type="text/javascript"> parents des élements recherchés.
$(document).ready(function(){
$("div button:only- Exemple 1: colorer en vert les div ayant des fils
child").text("Alone").css("border", "2px blue solid");
<script type="text/javascript">
}); $(document).ready(function(){
</script> $('div:parent').css("background-
color", "green");
<style> // ou bien $
('div’).parent().css("background-color", "green");
div { width:100px; height:80px; margin:5px;
float:left; background:#b9e }

</style> });
</head> </script>
<body> <body>
<div> Texte </div>
<div> <div> <p> Paragraphe </p> </div>
<button>Sibling!</button> <body>
<button>Sibling!</button>
</div> Exemple 2:
<div>
<button>Sibling!</button> Recherche les élements parents de chaque
</div> paragraphe, et qui dispose de la classe "selected".
<div>
None $("p").parent(".selected")
</div>
<div> Code de test:
<button>Sibling!</button>
<button>Sibling!</button> <div><p>Hello</p></div><div
<button>Sibling!</button> class="selected"><p>Hello Again</p></div>
</div> Résultat:
<div> [ <div class="selected"><p>Hello Again</p></div> ]
<button>Sibling!</button>
</div>
</body>  Filtre: ":selected"
</html>
Sélectionne tous les éléments qui sont sélectionnés.
 Filtre :first-child
<script type="text/javascript">
8
RV ENI p. 9
$(document).ready(function(){ $("div:contains('dvp')")
$("select").change(function () { .css("background-color", "yellow");
var str = "";
$("select option:selected").each(function () });
{ </script>
// Affiche en bas en rouge les éléments qui sont
sélectionnés. <body>
<div> <p> Paragraphe </p> </div>
str += $(this).text() + " "; <div> <p> voila dvp </p> </div>
}); <body>
$("div").text(str);
})
.trigger('change');
}); Les autres filtres
</script>
• :gt(index) ou fonction gt
<style> Recherche tous les éléments qui ont in index supérieur
à celui entré. A noter que le premier élément a pour
div { color:red; } valeur 0 dans l'index.
• :header
</style> Retourne tous les éléments qui sont de type entête les
</head> h1,h2, h3, ...
<body> • :lt(index) ou fonction lt
Retourne les éléments ayant un index inférieur à celui
<select name="garden" multiple="multiple"> entré. A noter que le premier élément dispose de
<option>Flowers</option> l'index 0.
<option selected="selected">Shrubs</option> • :visible
<option>Trees</option> Recherche tous les éléments qui sont visibles.
<option selected="selected">Bushes</option>
<option>Grass</option> L’exemple suivant va colorer en vert les div de rang >1
<option>Dirt</option> et en rouge toutes les entetes
</select> <script type="text/javascript">
<div></div> $(document).ready(function(){
</body> $("div:gt(1)").css("background-color",
</html> "green");
// $("div").gt(1).css("background-color",
 Fitre : fonction empty "green");
// $("div:lt(2)").css("background-color",
Supprime tous les noeuds fils des élements trouvés. "green"); // colorer en vert les div de rang <2
// $("div").lt(2).css("background-color",
Exemple : "green");
$(":header").css("background-color", "red");
$("p").empty() });
</script>
Code de test: <body>
<div> Texte 1 </div>
<div> Bonjour </div> <div> Texte 2 </div>
<p>Hello, <span>Person</span> <a href="#">and <div> Texte 3 </div>
person</a></p> <h1> Bonjour Rabe </h1>
<h2> Bonjour Rabe </h2>
Résultat: <div> Bonjour Koto </div>
<div> Bonjour </div> <body>
[ <p></p> ]

 Filtre : contains(texte)
4. FONCTIONS DE BASE
Recherche les éléments qui contiennent le texte
 fonction each : Boucler sur des éléments d’un
spécifié
objet jQuery
each() est une méthode qui permet d'itérer sur les
Exemple : colorer en jaune les éléments <div>
éléments d'un objet jQuery.
contenant le texte "dvp" (sensible à la casse !)
On lui passe en argument une fonction anonyme qui
s'exécutera pour chaque élément. Si cette fonction
<script type="text/javascript">
retourne false, each() s'arrête d'itérer sinon on
$(document).ready(function(){
passe à l'itération suivante.
9
RV ENI p. 10

Cette fonction peut avoir un argument qui représente Exemples avec des tableaux
l'indice de l'élément en cours (c'est le combien-ème ?)
ou non. La variable commence à zéro et peut être Code : JavaScript
nommée comme on le veut. $.each([ 0,1,1,2,3,5,8,13,21] ,function(n){
this représentera l'élément en question, donc $(this) $('body').append(n+'ème nombre de Fibonacci :
l'objet jQuery en question. '+this+'<br />');
});
Exemple 1:
Ajoute un attribut src aux deux images. Code : JavaScript
$("img").each(function(i){ var tableau = [
this.src = "image" + ( i+1)+ ".jpg"; 'Bonjour, comment vas-tu ?',
}); "Aujourd'hui, il fait beau !",
Code de test: $('q:first').text()
<img/><img/> ]
Résultat: ,chaine = '';
<img src="image1.jpg"/><img src="image2.jpg"/>
$.each(tableau,function(n,texte){
Exemple 2 chaine += 'Texte n°'+(n+1)+' : '+texte+'\n';
Code : JavaScript });
$('a').each(function(i) {
$(this) $('<pre></pre>').html(chaine) .appendTo('#contenu');
.prepend('<small>Lien n°'+(i+1)+' »</small> ')
.append(' <small>« '+$(this).attr('href')+'</small>');  fonction eq
});
Réduit le résultat de la recherche à un élément,
Code : JavaScript correspondant à une position donnée.
$('#checkboxs :checkbox').each(function(i){ L'intervalle des positions commence à 0 et se termine à
if(!$(this).attr('checked')){ taille de l'index-1.
alert(i+" checkboxs décochées "); Exemple 1:
return false; $("p").eq(1) ;
} Code de test:
}); <p>Ceci est un test.</p><p>et un autre</p>
Résultat:
On peut éviter parfois d'utiliser each() ! [ <p>et un autre</p> ]
Exemple 2 :
Donc le premier exemple pourrait s'écrire : $("p").eq(1).css("background-color", "green");

Code : JavaScript  fonction get

$('a') .prepend(function(i){ • get() : Permet d'accéder à tous les élements
return '<small>Lien n°'+(i+1)+' </small> '; recherchés
}) • get(num) : Permet d'accéder à un élement de
.append(function(i){ numero connu
return ' <small> '+$(this).attr('href')+'</small>'; .
}); Exemple :
Sélectionne toutes les images du document et retourne
un tableau d'élements DOM.
 $.each() avec des données $("img").get();
Code de test:
$.each() est une fonction (contenue dans l'objet jQuery) <img src="test1.jpg"/> <img src="test2.jpg"/>
permettant d'itérer sur un tableau ou un objet, passé en Résultat:
premier argument. [ <img src="test1.jpg"/> <img src="test2.jpg"/> ]
Son utilisation est assez simple :
• si la variable passée en paramètre est un  fonction index (element)
tableau, le premier argument de la fonction est
l'index de l'élément courant dans le tableau Recherche chaque élement correspondant a l'objet
(de 0 jusqu'à n-1) et le second argument (ainsi passé en paramètre, et dans le cas ou il trouve,
que le mot-clé this) est la valeur de l'élément ; retourne sa position. Sinon il retourne -1.
• si la variable passée en paramètre est un Exemple 1:
objet, le premier argument de la fonction est Retourne la position de lélement avec l'id "foo".
un attribut et le second argument (ainsi que le $("*").index( $('#foo')[0] )
mot-clé this) est la valeur de cet attribut. Code de test:
<div id="foobar"><b></b><span
id="foo"></span></div>

10
RV ENI p. 11
Résultat: IL était une fois un grand dinosaure...
2 Le titre de la balise "p" est:
Exemple 2: énorme, gigantesque
Retourne la position de l'élement avec l'id "foobar".
$("*").index( $('#foobar')[0] )  Définir les attributs : attr(attribut, valeur)
Code de test:
<div id="foobar"><b></b><span Exemple 1 :
id="foo"></span></div> Code : JavaScript
Résultat: $('div.header_gauche img').attr('title',' Site de Dupont');
0 Exemple 2: Assigne les attributs src et alt à toutes les
images.
 fonction length ou size
Retourne le nombre d'élements trouvés. <script type="text/javascript">
Exemple : $(document).ready(function(){
Retourne le nombre d'élements "img". $("img").attr({ src: "images/hat.gif", alt: "Logo
$("img").length; jQuery!" });
Code de test: $("div").text($("img").attr("alt"));
<img src="test1.jpg"/> <img src="test2.jpg"/>
Résultat: });
2 </script>

Exemple2 : Retourne l'attribut title du premier element on peut définir plusieurs couples attributs / valeurs à la
de type "p" dans la page. fois.
Exemple 1 : Ce code change tous les attributs title, alt
et src de toutes les images.
<script type="text/javascript"> Code : JavaScript
$(document).ready(function(){ $('img').attr({
var title=$("p").attr("title"); title : 'Mes photos de vacances',
$("div").text(title); alt : 'Ceci est une image',
}); src : 'vacances.jpg'
</script> });

</style> <script type="text/javascript">

$(document).ready(function(){
<body> // Assigne des IDs aux divs en se basant sur leur
position dans la page.
<button>Bouton 0</button> $("div").attr("id", function (arr) {
<button>1er Bouton</button> return "div-id" + arr;
<button>2eme Bouton</button> })
<button>3 eme Bouton</button> .each(function () {
</body> $("span",this).html("(ID = '<b>"+this.id+"</b>')");
});
Résultat : les 3 et 4 èmes boutons sont désactivés
});
</script>
 attr(attribut, fonction)
<style>
Il s’agit d’une fonction anonyme qui peut avoir un
argument qui représente l'indice de l'élément en div { color:blue; }
question ( à partir de 0) ou non (il est facultatif). span { color:red; }
La fonction doit retourner la valeur de l'attribut. b { font-weight:bolder; }

Exemple 1 :Code : JavaScript </style>

$('img').attr('title',function(i){
return 'Photo n°'+(i+1)+' : '+$(this).attr('src'); <body>
}); <div>Zero-th <span></span></div>
<div>First <span></span></div>
Notez le $(this) qui n'aurait pas été possible sans la <div>Second <span></span></div>
fonction anonyme ! </body>
Dans une liste de couples attributs / valeurs, on peut
aussi mettre des fonctions anonymes en guise de Résultat :
valeurs.
Zero-th (ID = 'div-id0')
Code : JavaScript First (ID = 'div-id1')
$('img').attr({ Second (ID = 'div-id2')
title : function(i){
return 'Photo n°'+(i+1)+' : '+$(this).attr('src');  Supprimer un attribut
}
}); removeAttr(attribut) est une méthode permettant de
supprimer un seul attribut en paramètre à la fois .
Autre exemple qui permet d' « anonymiser » votre site
des liens que vous publiez : Exemple1 :
Code : JavaScript Code : JavaScript
$('a').attr('href',function(i){ // Tous les éléments de votre page perdront leurs
return 'http://anonym.to/?'+$(this).attr('href'); classes.
}); $('*').removeAttr('class');
Ainsi le site cible ne saura pas que son visiteur provient // Tous les liens de votre page ne s'ouvriront pas dans
de votre site ! une nouvelle fenêtre .
$('a').removeAttr('target');
Remarque : depuis la version 1.4, il y a un second // Décoche toutes les checkbox et tous les boutons
argument à la fonction de retour, qui est la valeur de radio de la page.
l'attribut qu'on défini $(':checkbox').removeAttr('checked');
Exemple 2 :
On peut donc écrire le code ci-dessus plus <script type="text/javascript">
12
RV ENI p. 13
$(document).ready(function(){ hasClass() est une méthode qui permet de déterminer
// Supprime l'attribut "disabled" du champ input si un élément a une classe (renvoie true) ou non
(devenant éditable) qui suit le bouton. (renvoie false). Ne marche pas avec plusieurs classes.
$("button").click(function () { Exemple 1 : si l'élement a la classe "protected",
$ alors lui associe une animation au clic.
(this).next().removeAttr("disabled").focus().val("de
nouveau editable"); <script type="text/javascript">
} $(document).ready(function(){
); $("div").click(function(){
if ( $(this).hasClass("protected") )
}); $(this).animate({ left: -10 }, 75)
</script> .animate({ left: 10 }, 75)
.animate({ left: -10 }, 75)
<body> .animate({ left: 10 }, 75)
<button>Activer</button> .animate({ left: 0 }, 75);
<input type="text" disabled="disabled" value="champ });
non éditable" />
});
</body> </script>
</html>
<body>

 Sélecteurs <span></span><div class="protected"></div>

<span></span><div></div>
Il existe des sélecteurs qui permettent de filtrer les <span></span><div></div>
éléments selon leurs attributs <span></span><div class="protected"></div>
</body>
Expression Retour
</html>
[attr] Éléments qui ont l'attribut attr.
Éléments dont la valeur de l'attribut attr
[attr="val"]
est égale à par val.
Éléments dont la valeur de l'attribut attr
[attr*="val"]
contient val.
Éléments dont la valeur de l'attribut attr ne Exemple 2 :
[attr!="val"] // Si le premier paragraphe a la classe 'important' :
contient pas val.
Éléments dont la valeur de l'attribut attr // changer son attribut title en 'Ce paragraphe est
[attr^="val"] important.' ;
commence par val.
// sinon changer son attribut title en "Ce paragraphe
Éléments dont la valeur de l'attribut attr
[attr$="val"] n'est pas important.".
finit par val.
$('p:first').hasClass('important')
? $('p:first').attr('title','Ce paragraphe est important.')
: $('p:first').attr('title',"Ce paragraphe n'est pas
$('p[title]') //Sélectionne les éléments <p> ayant un important.");
attribut "title". // Renvoie forcément faux.
$('*:not(.salut)').hasClass('salut');
$('p[title="Bonjour"]') // Sélectionne les éléments <p>
dont l'attribut title est "Bonjour".  Attributs: fonction addClass
$('p[title!="Bonjour"]') // Sélectionne les éléments <p> Ajoute une classe pour chaque élement sélectionné si
dont l'attribut title n'est pas "Bonjour". il ne la possèd pas déjà. Pour l’ utiliser avec plusieurs
classes différentes, il suffit de les séparer par des
$('p[title^="H"]') // Sélectionne les éléments dont espaces.
l'attribut title commence par "H".
<script type="text/javascript">
$('p[title$="H"]') // Sélectionne les éléments dont $(document).ready(function(){
l'attribut title fini par "H". //ajoute la classe "selected" au dernier
paragraphe.
$('p[title*="H"]') // Sélectionne les éléments dont $("p:last").addClass("selected");
l'attribut title contient "H". });
</script>

 Attributs: fonction hasClass <style>

p { margin: 8px; font-size:16px; }
.selected { color:blue; }

13
RV ENI p. 14

</style> Code de test:

<p>Hello</p>
<body> <p class="selected">Hello Again</p>
Résultat:
<p>Paragraphe 1</p> <p class="selected">Hello</p> <p>Hello Again</p>
<p>Paragraphe 2</p>
<p>Paragraphe 3</p>
</body> • ToggleClass ( class,switch )
Ajoute la classé spécifiée si switch vaut TRUE, la
supprime si switch vaut FALSE.
 Attributs: fonction removeClass
Exemple 1 :
Permet de supprimer la ou les classes CSS spécifiés
des éléments concernés. Pour l’ utiliser avec plusieurs var count = 0;
classes différentes, il suffit de les séparer par des $("p").click(function(){
espaces. $(this).toggleClass("highlight", count % 3 == 0);
});

Exemple 1: Code de test:

$("p").removeClass("selected highlight")
<p class="blue">Click to toggle</p>
Code de test: <p class="blue highlight">highlight</p>
<p class="blue">on these</p>
<p class="highlight selected first">Hello</p> <p class="blue">paragraphs</p>

Résultat: Exemple 2 : Interchanger des classes

<p class="first">Hello</p>
toggleClass() permet de jongler entre la présence et
Exemple 2: l'absence d'une ou de plusieurs classes.
function interchangerClasseSurligner(){
$("p").removeClass() $('a').toggleClass('surligner');
}
Code de test:
function interchangerClasseRouge(){
<p class="selected">Hello</p> $('a').toggleClass('rouge');
}
Résultat:
<p>Hello</p>
6. Gestion de contenu
Exemple 3:
 La fonction Html ( )
$("p").removeClass("selected")
Récupère le contenu du premier élement trouvé. Ne
Code de test:
fonctionne pas sur les documents XML
<p class="selected first">Hello</p>
•Html ( valeur ) : permet de modifier le contenu d'un
élement
Résultat:
<p class="first">Hello</p>
Exemple 1:
 La fonction toggleClass
Affiche le contenu du premier div trouvé.
Cet appel va alterner les fonctions "addClass" et
"removeClass" c.a.d. permet de jongler entre la
<script type="text/javascript">
présence et l'absence d'une ou de plusieurs
$(document).ready(function(){
classes.
$("p").click(function () {
var htmlStr = $(this).html();
• toggleClass ( classe ) $(this).text(htmlStr);
Ajoute une classe aux élements spécifiés, la supprime });
si elle est déja présente. });
</script>
Exemple :
$("p").toggleClass("selected") <body>
14
RV ENI p. 15
Exemple 1 :
<p>
<b>Cliquez</b>pour changer le <span $("p").text();
id="tag">html</span>
</p> Code de test:
<p> <p><b>Test</b>
en noeud <span id="text">text</span>. Paragraph.</p><p>Paraparagraph</p>
</p>
<p> Résultat:
Ici, un <button name="nada">bouton</button>. TestParagraph.Paraparagraph
</p>
Exemple 2 : Assigne un contenu texte aux élement
</body> concernés par la recherche.
Similaire a la focntion html(), mais échappe les
Résultat : caractères (remplacements de "<" et ">" par leur
équivalent HTML).
<b>Cliquez</b>pour changer le <span
id="tag">html</span> $("p").text("<b>Some</b> new text.");
en noeud <span id="text">text</span>. Code de test:
Ici, un <button name="nada">bouton</button>. <p>Test Paragraph.</p>

Exemple 2 : Permet de modifier le contenu d'un Résultat:

élement. <p><b>Some</b> new text.</p>

Ajoute du contenu pour chacun des éléments div

présents dans la page. La fonction val()
<script type="text/javascript">
$(document).ready(function(){
$("div").html("<b>coucou !</b>"); • val ( )
}); Récupère le contenu de l'attribut "value" du premier
</script> élement de la sélection.

Résultat • val ( valeur )

Coche, ou sélectionne, tous les éléments de type liste
Hello déroulante, radio, les checkbox, et selectionne les
coucou ! options correspondant à l'ensemble des valeurs
coucou ! envoyées.
coucou !

La fonction Text ( ) Exemple :

Retourne le contenu texte de tous les élements $("#single").val("Single2"); // "Single2" est choisie de
concernés par la recherche. Fonctionne avec les la liste déroulante
documents HTML et XML. $("#multiple").val(["Multiple2", "Multiple3"]); //
" Multiple2", "Multiple3 sont choisies
•Text ( valeur ) $("input").val(["check1","check2", "radio1" ]); //
Assigne un contenu texte aux élement concernés par check1","check2", "radio1" deviennent cochés
la recherche.
Code de test:

15
RV ENI p. 16
Résultat:
<select id="single"> <p style="left:30px;">Test Paragraph.</p>
<option>Single</option>
<option>Single2</option> Exemple 4 :
</select> Envoie la couleur et le fond à tous les paragraphes.
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option> $("p").css({ color: "red", background: "blue" });
<option>Multiple2</option> Code de test:
<option selected="selected">Multiple3</option> <p>Test Paragraph.</p>
</select><br/> Résultat:
<input type="checkbox" name="checkboxname" <p style="color:red; background:blue;">Test
value="check1"/> check1 Paragraph.</p>
<input type="checkbox" name="checkboxname"
value="check2"/> check2 Exemple 5: définir plusieurs attributs CSS
<input type="radio" name="r" value="radio1"/> radio1 Code : JavaScript
<input type="radio" name="r" value="radio2"/> radio2 // Couleur de fond cyan.
$('body').css('background-color','#0ff');
7. Style
// Formatage des liens.
La fonction css() peut s'utiliser de plusieurs façons $('a')
différentes, les mêmes que attr(). Pour résumer : .css({
• css('attribut') permet de récupérer la valeur borderBottom: '2px dashed #88d',
d'un attribut CSS color: '#44b',
• css('attribut',valeur) permet de définir un paddingLeft: '4px',
attribut CSS 'float': 'left',
• css({attribut1: valeur1, attribut2: valeur2}) margin: '4px',
permet de définir plusieurs attributs CSS 'letter-spacing': '2px',
• valeur dans les deux lignes précédentes peut textDecoration: function(){
être une fonction qui retourne la valeur de return $(this).attr('decoration');
l'attribut CSS. },
Dans le troisième cas, l'attribut border-left-style par opacity: 0.8
exemple, s'écrira borderLeftStyle ou 'border-left- })
style'. .attr('title',function(){
return 'couleur : '+$(this).css('color')
A retenir : });
1. float est un mot clé du langage JavaScript, il
est donc préférable de l'entourer de guillemets.
2. L'attribut opacity, un nombre (ou chaîne de css: fonction height
caractères) compris entre 0 et 1

Exemple1 : Exemple 1: récupère la hauteur prise par l'élément,

Exemple 1: formatée en pixel.
Permet d'accéder à la couleur du premier paragraphe
trouvé. $("p").height();
$("p").css("color"); Code de test:
Code de test: <p>Ceci est un test.</p>
<p style="color:red;">Test Paragraph.</p> Résultat:
Résultat: 20
"red"
Exemple 2: définir la hauteur d’un l'élément en pixel.
Exemple 2: Modifie la propriété "color" des
paragraphes à "red". $("p").height(200);
$("p").css("color","red"); Code de test:
Code de test: <p>Ceci est un test.<br/>la suite<br/>en une autre
<p>Test Paragraph.</p> suite</p>
Résultat:
<p style="color:red;">Test Paragraph.</p> css: fonction width
• Width()
Exemple 3: Modifie la propriété "left" des paragraphes
à "30px". Exemple 1 : Récupère la largeur prise par l'élement
$("p").css("left",30); formatée en pixels.
Code de test:
<p>Test Paragraph.</p> $("p").width();

16
RV ENI p. 17
Code de test: élément).
<p>This is just a test.</p>
Résultat: $('#boite').offset({
300 left : 28
, top : 45
• Width(valeur) });
Assigne une largeur aux élement spécifiés. Si aucune
unité n'est spécifiée (comme 'em' ou '%'), l'unité px
sera choisie par défaut. var hauteur = $('div.liste:first').outerHeight(true) + 2;

Exemple 2: $('div.liste').offset(function( i , o ){
$("p").width("20em"); return {
Code de test: top : i * hauteur
<p>This is just a test.</p> , left : o.left
Résultat: };
<p style="width:20em;">This is just a test.</p> });

Exemple 3:
$("p").width(20); css: fonction scrollTop
Code de test:
<p>This is just a test.</p> Ascenseurs
Résultat:
<p style="width:20px;">This is just a test.</p> ScrollTop() : Renvoie le décalage en pixel entre le haut du
document et l'élément courant cad le nombre en pixels
Exemple 4: de défilement de l'ascenseur vertical.
scrollLeft() renvoie le nombre en pixels de défilement de
// Pour que le logo prenne presque toute la page. l'ascenseur horizontal.
// (Math.round(x) retourne l'entier le plus proche de x.)
.
$('img#logo').width(Math.round($ Exemple :
('body').width()*0.9)); var p = $("p:first");
$("p:last").text( "scrollTop:" p.scrollTop() );
css: fonction offset (Positions ) Code de test:
Absolue <p>Hello</p><p></p>
Résultat:
offset() est une méthode qui permet de récupérer la <p>Hello</p><p>scrollTop:0</p>
position X et Y d'un élément par rapport à la page.
Elle renvoie un objet contenant left et top : ScrollTop(valeur) scrollLeft(valeur)
• offset().left renvoie la position horizontale (X) Change le décalage en pixels entre le haut du
d'un élément par rapport à la page ; document (caractéristique "top") et l'élément
• offset().top renvoie la position verticale (Y) courant, en prenant la valeur passée en argument.
d'un élément par rapport à la page.
Exemple : Récupère l'offset du second paragraphe.
var p = $("p:last"); Exemple 1 :
var offset = p.offset(); $("div.demo").scrollTop(300);
p.html( "left: " offset.left ", top: " offset.top ); Code de test:
Code de test: <div class="demo"><p>Hello</p></div>
<p>Hello</p><p>2nd Paragraph</p>
Résultat: Exemple 2 :
Hello $('body').animate({
scrollTop : '800px'
left: 10, top: 36 },5000);

Définir la position absolue Ces méthodes ne marchent pas seulement pour le

document, elles sont aussi valables pour les
Il suffit de passer en paramètre de la méthode offset() éléments dont l'overflow n'est pas à visible.
soit un objet contenant les propriétés left et / ou top,
soit une fonction qui va renvoyer cet objet.

Le premier argument de la fonction de retour est l'index 8. Les éléments de formulaire

de l'élément en question, et le second est la position
absolue de cet élément (objet contenant les propriétés jQuery possède quelques filtres spécifiques à la
top et left, soit le résultat de la méthode offset() sur cet sélection d'éléments de formulaires en fonction de leur
nature ou de leur état.
17
RV ENI p. 18
• :button
Sélectionne tous les éléments INPUT de type button. });
• :checkbox </script>
Sélectionne tous les éléments INPUT de type
checkbox. <body>
• :checked <form>
Sélectionne tous les éléments qui sont cochés. <input type="button" value ="OK">
• :enabled <input type="text" value ="Text1">
Sélectionne tous les éléments qui sont activés <input type="text" value ="Text2">
• :file </form>
Sélectionne tous les éléments INPUT de type file. <body>
• :hidden
Sélectionne les éléments qui sont cachés. Récupérer les valeurs avec la fonction val()
• :image
val() renvoie la valeur d'une balise de formulaire. La
Sélectionne tous les élément INPUT de type image.
fonction peut renvoyer différents types d'information.
• :input
• renvoie l'attribut value des éléments
Sélectione tous les éléments de type INPUT,
<input type="text" />, <textarea></textarea>,
TEXTAREA, SELECT et BUTTON.
<input type="radio" /> et <select></select> :
• :password
• renvoie un tableau de chaînes de caractères
Sélectionne tous les éléments INPUT de type
représentant les attributs value: des checkbox
password.
cochées<input type="checkbox" />,, et les
• :radio
contenus des balises option
Sélectionne tous les éléments INPUT de type radio.
sélectionnées<select multiple="multiple"></
• :reset select>.
Sélectionne tous les éléments INPUT de type reset.
• :selected Formulaires simples
Sélectionne tous les éléments qui sont sélectionnés.
• :submit Dans ce bout de code :
Sélectionne tous les éléments INPUT de type submit.
• :text Code : HTML -
Selectionne tous les éléments INPUT de type text. <input type="text" id="texte" value="Salut!" />
• :visible <textarea id="zonetexte">Ceci est une zone de texte !
Recherche tous les éléments qui sont visibles. </textarea>
<input type="radio" name="choixradio" value="Radio 1"
/>Radio 1
Exemples <input type="radio" name="choixradio" value="Radio 2"
/>Radio 2
$(':input') // Tous les éléments <input />, <textarea>, <input type="radio" name="choixradio" value="Radio 3"
<select> et <button>. />Radio 3
<select id="choixselect">
$(':[text|password|radio|checkbox|submit|image|reset| <option>Select 1</option>
button|file|hidden]') // Les <input /> du type choisi. <option>Select 2</option>
<option>Select 3</option>
$(':[enabled|disabled|checked|selected]') // Les </select>
<input /> possédant l'attribut indiqué.
On peut utiliser pour récupérer les valeurs de ces
select est déclenché lorsque du texte est sélectionné éléments :
dans un <input type="text" /> ainsi que dans un
<textarea></textarea>. Code : JavaScript
// Renvoie 'Salut!'.
$(':text,textarea').select(function(){ $("#texte").val();
alert($(this).val());
}); // Renvoie 'Ceci est une\nzone de texte !'.
$("#zonetexte").val();
Exemple 2 : va colorer en rouge toutes les zones de
texte et en vert tous les boutons // Renvoie l'attribut value de la balise sélectionnée.
// Par exemple 'Radio 1'.
<script type="text/javascript"> $('input[name="choixradio"]:checked').val();
$(document).ready(function(){
$(":text").css("background-color",
"red"); // Renvoie le contenu de la balise option sélectionnée.
$(':button').css("background-color", // Par exemple 'Select 1'.
"green"); $('#choixselect').val();

18
RV ENI p. 19

Formulaires compliqués Exemples :

• <input type="text" /> => $
Dans ce bout de code : ('#texte').val('Bonjour!');
• <textarea></textarea> => $
Code : HTML ('#zonetexte').val('Ceci est une grande\nzone
<input type="checkbox" name="choixcheck" de texte !');
value="Choix CheckBox 1" /> Choix Checkbox 1 • <select></select> => $
<input type="checkbox" name="choixcheck" ('#choixselect').val('Select 2'); // select 2 choisi
value="Choix CheckBox 2" /> Choix Checkbox 2 • <input type="checkbox" /> => $
<input type="checkbox" name="choixcheck" ('input[name="choixcheck"]').val(['Choix
value="Choix CheckBox 3" /> Choix Checkbox 3 CheckBox 1','Choix CheckBox 2']); //
<select id="choixmultiple" multiple="multiple"> CheckBox 1 et Choix CheckBox 2 cochés
<option>Select Multiple 1</option> • <select multiple="multiple"></select> => $
<option>Select Multiple 2</option> ('#choixmultiple').val(['Select Multiple 1','Select
<option>Select Multiple 3</option> Multiple 3']); // 'Select Multiple 1' et 'Select
</select> Multiple 3' seléctionnés

On peut utiliser pour récupérer les valeurs de ces On ne peut pas sélectionner un bouton radio avec
éléments : val('valeur') mais changera l'attribut value du radio .
Pour changer les valeurs des <input type="radio" />, on
Code : JavaScript utilise attr('checked','checked') sur un élément :
// checkbox sera différent selon que les checkbox sont
cochées ou non. Code : JavaScript
// Par exemple : // Sélectionne le second.
// '<br />Choix CheckBox 1 : Non Cochée' ; $
// '<br />Choix CheckBox 2 : Cochée' ; ('input[name="choixradio"]:eq(1)').attr('checked','chec
// '<br />Choix CheckBox 3 : Non Cochée'. ked');
var checkbox = "";
$('input[name="choixcheck"]').each(function(){ Exemple 1 : Un petit calculateur
checkbox += <script type="text/javascript">
'<br />'+$(this).attr('value')+' : '+ $(document).ready(function(){
($(this).attr('checked') == true ? '' : 'Non ')+'Cochée'; $("#plus").click( function() { //$
}); (" :button #plus").click( …)
var res = parseInt( $("#a").val())
// ALTERNATIVE : +parseInt( $("#b").val());
// checkbox contiendra une liste de toutes les checkbox $
cochées. ("#resultat").val(res);
// Par exemple "Choix CheckBox 1,Choix CheckBox 2". }
var checkbox = ""; );
$('input[name="choixcheck"]:checked').each(function(i){
checkbox += (i>0 ? ',' : '')+$(this).attr('value'); $("#moins").click( function() {//$
}); (":button#moins").click(…)
var res = parseInt( $("#a").val())-
// Renvoie les contenus des balises option parseInt( $("#b").val());
sélectionnées. $("#resultat").val(res);
// Par exemple "Select Multiple 1,Select Multiple }
2,Select Multiple 3". );
// Si elles sont toutes les trois sélectionnés. });
$('#choixmultiple').val(); </script>

<body>
Définir les valeurs
<form>
val(valeur) permet de définir la ou les valeur(s) des
<input type ="text" id="a" value="" /> <br>
éléments d'un formulaire.
<input type ="text" id="b" value="" /> <br>
• valeur doit être une chaîne de caractères pour <input type ="text" id="resultat" value="" /> <br>
les <input type="text" />, <input type ="button" id="plus" value="plus" />
<textarea></textarea> et <select></select>. <input type ="button" id="moins" value="moins" />
• valeur doit être un tableau de chaînes de </form>
caractères pour les <body>
<input type="checkbox" />, Exemple 2 : les boutons ont le même id
<select multiple="multiple"></select>. <script type="text/javascript">
$(document).ready(function(){
19
RV ENI p. 20
$("#button").click( function() Ajoute un élément DOM à la suite du contenu de
{ var op = $(this).val(); chaque paragraphe.
var res;
if $("p").append( $("#foo")[0] );
(op=="plus")
var res = parseInt( $("#a").val()) Code de test:
+parseInt( $("#b").val()); <p>I would like to say: </p> <b id="foo">Hello</b>
else Résultat:
if <p>I would like to say: <b id="foo">Hello</b></p>
(op=="moins")
var res = parseInt( $("#a").val())-
parseInt( $("#b").val());  fonction prepend (ajout avant)
$
("#resultat").val(res); Ajoute du contenu à l'intérieur des élements
sélectionnés, au début.
}
); Exemple 1:
}); Ajoute un objet jQuery au début de tous les
</script> paragraphes.
<body> $("p").prepend( $("b") );
<form> Code de test:
<input type ="text" id="a" value="" /> <br> <p>I would like to say: </p><b>Hello</b>
<input type ="text" id="b" value="" /> <br> Résultat:
<input type ="text" id="resultat" value="" /> <br> <p> <b>Hello</b>I would like to say: </p>
<input type ="button" id="operation" value="plus" />
<input type ="button" id="operation" value="moins" /> Exemple 2:
</form> Ajoute un Element DOM au début de tous les
paragraphes. A noter que "[0]" permet de sélectionner
9. FONCTIONS DE MANIPULATION le premier élement qui dispose de la classe "foo".

9.1.Insérer objet jQuery ou du contenu html ou du $("p").prepend( $(".foo")[0] );

texte à l'intérieur des éléments spécifiés
avec prepend() et append() Code de test:

<p>I would like to say: </p>

<p>I would like to say: </p>
<b class="foo">Hello</b>
 fonction append (ajout après) <b class="foo">Good By</b>

Ajoute du contenu après à l'intérieur des élements Résultat:

spécifiés.
<p><b class="foo">Hello</b>I would like to say: </p>
Exemple 1: <p><b class="foo">Hello</b>I would like to say: </p>
Ajoute un objet jQuery à la suite du contenu de chaque
paragraphe. Exemple 3:
$("p").append( $("b") ); Ajoute du code HTML au début de tous les
paragraphes.
Code de test:
<p>I would like to say: </p> <b>Hello</b> $("p").prepend("<b>Hello</b>");
Résultat:
<p>I would like to say: <b>Hello</b></p> Code de test:
<p>I would like to say: </p>
Exemple 2: Résultat:
Ajoute du contenu HTML à la suite du contenu de <p><b>Hello</b>I would like to say: </p>
chaque paragraphe.
On peut aussi passer un objet jQuery (tous les
$("p").append("<b>Hello</b>"); éléments contenus dans ce dernier seront insérés) en
paramètre :
Code de test:
<p>I would like to say: </p> $('a').prepend('Lien : ');
Résultat: $('h1:first').prepend('Premier titre : ');
<p>I would like to say: <b>Hello</b></p> $('#titre').append($('#sommaire'));
$('#basdepage').prepend($('h1'));
Exemple 3:
20
RV ENI p. 21
Les méthodes prependTo() et appendTo() qui <b>Hello</b><p>I would like to say: </p>
permettent l'opération inverse
Exemple 3:
 fonction appendTo Insère un élement avant tous les paragraphes.
$("p").before( $("#foo")[0] );
Ajoute tous les élements spécifiés par le sélecteur A à Code de test:
d'autres spécifiés par B, dans l'expression $ <p>I would like to say: </p><b id="foo">Hello</b>
(A).appendTo(B). Est l'équivalent de $(B).append(A). Résultat:
<b id="foo">Hello</b><p>I would like to say: </p>
Exemple :
Ajoute l'ensemble des paragraphes au div portant
l'identifiant "foo".  fonction after

$("p").appendTo("#foo"); Insère du contenu après chaque élément de la

Code de test: sélection.
<p>I would like to say: </p><div id="foo">
bonjour</div> Exemple 1:
Résultat: Insère un élement à la suite des paragraphes.
<div id="foo">bonjour <p>I would like to say: $("p").after( $("#foo")[0] );
</p></div> Code de test:
<b id="foo">Hello</b>
 fonction prependTo <p>I would like to say: </p>

Ajoute les élements désignés par A au début du Résultat:

contenu d'un autre élement désigné par B, dans $ <p>I would like to say: </p><b id="foo">Hello</b>
(A).prependTo(B). Similaire à $(B).prepend(A).
Exemple 2:
Exemple : Insère un objet jQuery à la suite des paragraphes
Ajoute tous les paragraphes au contenu du div portant
l'id "foo". Les paragraphes précèderont le contenu déja $("p").after( $("b") );
existant du div. Code de test:
$("p").prependTo("#foo"); <b>Hello</b><p>I would like to say: </p>
Code de test: Résultat:
<p>I would like to say: </p> <div <p>I would like to say: </p><b>Hello</b>
id="foo"><b>Hello</b></div>
Résultat: Exemple 3:
<div id="foo"> <p>I would like to say: Insère du code HTML après tous les paragraphes.
</p><b>Hello</b></div> $("p").after("<b>Hello</b>");
Code de test:
<p>I would like to say: </p>
Résultat:
9.2. Insérer objet jQuery ou du contenu html ou du <p>I would like to say: </p><b>Hello</b>
texte à l'extérieur avec before() et after()
 fonction before

Insère du contenu avant les élements retournés par la

recherche.

Exemple 1:
Insère un objet jQuery (similaire à un tableau
d'élements DOM) avant tous les paragraphes.
$("p").before( $("b") );
Code de test:
<p>I would like to say: </p><b>Hello</b>
Résultat:
<b>Hello</b> <p>I would like to say: </p>

Exemple 2:
Insère du code HTML avant tous les paragraphes.
$("p").before("<b>Hello</b>");
Code de test:
<p>I would like to say: </p>
Résultat:
21
RV ENI p. 22
o A.before(B) revient au même que
B.insertBefore(A).
o A.after(B) revient au même que
B.insertAfter(A).

 fonction remove

Supprime tous les élements de la DOM répondant aux

critères de sélection.

Exemple 1:
$("p").remove();
Code de test:
<p>Hello</p> how are <p>you?</p>
Résultat:
how are

Exemple 2:
$("p").remove(".hello");
Code de test:
<p class="hello">Hello</p> how are <p>you?</p>
Résultat:
how are <p>you?</p>
Insérer à l'intérieur et à l'extérieur

 fonction insertAfter  fonction replaceAll

Insère tous les éléments définis par A après ceux Remplace les éléments pointés par la fonction par
définis par B dans l'expression $(A).insertAfter(B). l'élément courant.
Equivaut à $(B).after(A).
Exemple :
Exemple : $("<b>Paragraph. </b>").replaceAll("p"); // remplace
$("p").insertAfter("#foo"); tou p par <b>Paragraph. </b>
Code de test: Code de test:
<p>I would like to say: </p><div id="foo">Hello</div> <p>Hello</p>
Résultat: <p>cruel</p>
<div id="foo">Hello</div><p>I would like to say: </p> <p>World</p>
Résultat:
 fonction insertBefore <b>Paragraph. </b>
<b>Paragraph. </b>
Insère tous les éléments définis par A avant ceux <b>Paragraph. </b>
définis par B dans l'expression $(A).insertBefore(B).
Equivaut à $(B).before(A).  fonction replaceWith

Remplace l'élément courant par le contenu spécifié,

Exemple :
sous forme de code HTML ou d'objet DOM. La fonction
$("p").insertBefore("#foo");
retourne l'élément JQuery qui vient juste d'être
Code de test:
remplacé et supprimé de la DOM.
<div id="foo">Hello</div><p>I would like to say: </p>
Résultat:
<p>I would like to say: </p><div id="foo">Hello</div> Exemple :
Un clic sur un des boutons remplacera le bouton par un
Autres exemples div. Le texte sera cependant conservé.
$('#titre').insertBefore($('h1:first'));
$('h1:first').insertAfter($('#titre')); $("button").click(function () {
$('h1:first').insertAfter('#titre'); $(this).replaceWith("<div>" + $(this).text() +
$('h1:first').before($('#titre')); "</div>");
$('#titre').after($('h1:first')); // $(this).replaceWith("<b>" + $(this).text() +
"</div>"); mettre en gras le texte du bouton
Résumé
o A.prepend(B) revient au même que });
B.prependTo(A).
Code de test:
o A.append(B) revient au même que
<button>First</button>
B.appendTo(A).
<button>Second</button>
22
RV ENI p. 23
<button>Third</button> <p><b>Hello</b></p>
<p><b>cruel</b></p>
9.3 Envelopper <p><b>World</b></p>

Les méthodes ci-dessous prennent en argument soit

un objet jQuery, soit du contenu HTML. Exemple 2:
Met le texte de chacun des paragraphes en gras, par le
 Envelopper à l'extérieur avec la fonction biais de l'ajout de la balise B.
wrap
$("p").wrapInner(document.createElement("b"));
wrap( html ou element) permet d'« envelopper » Code de test:
n'importe quel élément entre deux balises ouvrante et <p>Hello</p>
fermante (sans contenu) c'est-à-dire entourer une <p>cruel</p>
structure d'élements par d'autres éléments.. <p>World</p>
Attention: ne marche pas avec des élements contenant Résultat:
du texte. Il faut dans ce cas ajouter le texte après <p><b>Hello</b></p>
l'opération. <p><b>cruel</b></p>
<p><b>World</b></p>
$("p").wrap("<div class='wrap'></div>");
Code de test:
p>Test Paragraph.</p>  Tout envelopper avec la fonction wrapAll

Résultat: wrapAll() est similaire à wrap() à l'exception que si ce

<div class='wrap'><p>Test Paragraph.</p></div> dernier enveloppe chaque élément un par un, wrapAll()
enveloppe tous les éléments d'un coup.
$('span').wrap('<b></b>') transformera <span>Hello $('input.premierFormulaire').wrapAll('<form></form>');
World !</span> en <b><span>Hello World ! 1
$('q').wrapAll('<div
</span></b> 2
class="groupeDeCitations"></div>');
$('#titre').wrap('<h1></h1>');
$('.desactiver').wrap('<pre></pre>'); WrapAll(elements)
// Le contenu sera entre les <div></div>. Entoure tous les éléments de la sélection par un seul
$('.contenu').wrap('<em>le contenu</em> ira là : élément.
<div></div> mais pas <strong>là</strong>'); Exemple :
// Le contenu sera entre les <em></em> mais aussi les Entoure les paragraphes par un DIV.
<q></q>. $("p").wrapAll(document.createElement("div"));
$('span').wrap('<em id="ici"></em> et là <q></q>'); Code de test:
 Envelopper à l'intérieur avec la fonction <p>Hello</p>
wrapInner <p>cruel</p>
<p>World</p>
wrapInner( html / element ) entoure les fils d'un Résultat:
élément (inclut les noeuds textes) par un autre élément <div>
ou du des balises html ouvrantes / fermantes sans <p>Hello</p>
contenu. <p>cruel</p>
<p>World</p>
$('span').wrapInner('<b></b>') transformera </div>
<span>Hello World !</span> en <span><b>Hello
World !</b></span> WrapAll(html)

$('span.italique').wrapInner('<i></i>'); Entoure tous les éléments de la sélection par un seul

$('h1:first').wrapInner('<a élément, défini par du code HTML.
href="http://google.com"></a>');
$('a').wrapInner('<em>Ceci est un lien : Exemple :
</em><u></u>'); Entoure la liste des paragraphes par un DIV.
$("p").wrapAll("<div></div>");
Code de test:
Exemple 1 : Met le texte de chacun des paragraphes
<p>Hello</p>
en gras, par le biais de l'ajout de la balise B.
<p>cruel</p>
$("p").wrapInner("<b></b>");
<p>World</p>
Code de test:
Résultat:
<p>Hello</p>
<div>
<p>cruel</p>
<p>Hello</p>
<p>World</p>
<p>cruel</p>
Résultat:
<p>World</p>
</div>
23
RV ENI p. 24

Exemple 4:
10.EVENEMENTS Annule une action par défaut et empêche le
bouillonnement d'évènements en retournant "false".
En jascript,
element.addEventListener('evenement',function(){ $("form").bind("submit", function() { return false; }) ;
// Action
}); La fonction false
// ou
element.onevenement = function(){ Depuis la version 1.4.3, au lieu de spécifier une
// Action fonction, on peut mettre un booléen false.
}; Il désigne alors la fonction qui renvoie false.
Les événements avec jQuery seront créés grâce à des
méthodes ayant pour nom le type de l'événement, Code : JavaScript
l'argument étant la fonction de retour. $('a').bind('click',false);
// est équivalent à
// Écoute d'un événement $('a').bind('click',function(){
elements_jQuery.evenement(function(){ return false;
// Action });
}); Dans ce cas-là, cela supprime le comportement par
 évènements: fonction bind ( type de défaut du navigateur qui consiste à ouvrir le lien
l'évènement, donnees, fonction liée a l'évènement) (attribut href de la balise <a>).
Permet de lier une action à un évènement particulier.  Attacher plusieurs événements en même
Le gestionnaire d'évènements peut être passé en temps
argument de la fonction à appeler Pour arrêter l'action
par défaut et la remontée des évènements Une des nouveautés de la version 1.4 est de pouvoir
(bouillonnement ) vers tous les parents, la fonction doit donner un objet en argument à bind(), contenant des
retourner "false". couples nom de l'événement / fonction de retour
attachée.
Les donnees (Objet): (optionnel) données
supplémentaires passées au gestionnaire Par exemple : Code javascript
d'évènement accessible avec event.data
$('h1')
Exemple 1: .bind({
Empêche simplement le bouillonnement d'évènement mouseenter: function(){
en utilisant la méthode stopPropagation. $(this).css('color','red');
}
$("form").bind("submit", function(event){ , mouseleave: function(){
event.stopPropagation(); $(this).css('color','green');
}); }
, click: function(){
Exemple 2: $(this).css('color','yellow');
$("p").bind("click", function(){ }
alert( $(this).text() ); });
});
bind() permet de généraliser cela en lui passant en
Code de test: premier argument une chaîne de caractères
<p>Hello</p> représentant tous les événements (séparés par des
espaces) à lier avec la fonction passée en paramètre.
Résultat:
alert("Hello") Code : JavaScript

Exemple 3: $('p,textarea')
Ajoute une donnée supplémentaire au gestionnaire .bind('mouseenter focus',function(){
d'évènement. $(this).css('background-color','red');
})
function handler(event) { .bind('mouseleave blur',function(){
alert(event.data.foo); $(this).css('background-color','green');
} });
$("p").bind("click", {foo: "bar"}, handler)
$('q').bind('dblclick',function(){
Résultat: // Si l'attribut auteur existe...
alert("bar") if($(this).attr('auteur')){
24
RV ENI p. 25
// ... l'afficher. $("p").unbind( "click" )
alert("L'auteur de cette citation est "+$ Code de test:
(this).attr('auteur')+' !'); <p onclick="alert('Hello');">Hello</p>
} Résultat:
}); [ <p>Hello</p> ]

 évènements: fonction blur

Complément d'informations sur bind() Déclenche l'évènement qui se produit lorsque l'élément
perd le focus. Pour éviter cette chaine de
Avec bind , on peut créer nos propres événements déclenchement, il surffit d'ajouter un "return false" dans
et cela va de pair avec l'utilisation de trigger(). une des fonctions.
:
Code : JavaScript Exemple 1 : Force le déclenchement de l'évènement
$('a').bind('lien',function(){ sans intervention de l'utilisateur.
alert('Vous aller vers '+$(this).attr('href')+' !');
}) $("p").blur();
.click(function(){
if(!$(this).hasClass('interne')){ Exemple 2: Ajoute une fonction associée à
$(this).trigger('lien'); l'évènement blur pour les éléments de la sélection.
}
}); $(":text").blur( function() { alert("Hello"); } );
<a href="page.html" class="internex" > Votre lien Code de test:
</a> <input type ="text" value="zone1" /> <br>
<input type ="text" value="zone2" /> <br>
Ce code peut tout aussi bien s'écrire comme suit
depuis la version 1.4 :
Code : JavaScript  évènements: fonction focus
$('a').bind({ Déclenche l'évènement de focus sur les élements
lien : function(){ spécifiés.
alert('Vous aller vers '+$(this).attr('href')+' !');
} Exemple 1 :
, click : function(){ $("p").focus();
if(!$(this).hasClass('interne')){
$(this).trigger('lien');
} Exemple 2 : Associe une fonction a l'évènement focus pour
}); les éléments de la sélection.
Exemple :
 évènements: fonction unbind (type evt, $("p").focus( function() { alert("Hello"); } );
function) Code de test:
<p>Hello</p>
L'opposé de la fonction bind, supprime les actions
associées à un évènement particulier pour les Exemple 3:
élements de la sélection. Si aucun argument n'est $(':input').focus(function(){
spécifié, les actions liées à tous les évènements sont $(this).css('background-color','#00f');
supprimées. Si une fonction est passée en second });
paramètre, seulement les actions du type de la fonction $(':input').blur(function(){
passée en paramètre seront supprimées. $(this).css('background-color','#f00');
});
Exemple 1: // Ne jamais pouvoir accéder
$("p").unbind( "click", function() { alert("Hello"); } ) // à une balise formulaire.
Code de test: $(':input').focus(function(){
<p onclick="alert('Hello');">Hello</p> $(this).blur();
Résultat: });
[ <p>Hello</p> ]
// Ou encore ne jamais pouvoir
// sortir d'une balise formulaire.
Exemple 2:
$(':input').blur(function(){
$("p").unbind()
$(this).focus();
Code de test:
});
<p onclick="alert('Hello');">Hello</p>
Résultat:
[ <p>Hello</p> ]  évènements: fonction change (fonction)

Exemple 3:
25
RV ENI p. 26
L'évènement "change" est déclenché lorsque le Si on clique sur un élément d’id unbind alors le texte
contrôle est modifié. Par exemple lorsque le contenu « Ne fait rien » est affiché dans l’élément d’id theone
d'un objet de formulaire est changé et qu'on quitte cet et l’événement click est supprimé de l’élément d’id
objet, contrairement a l'évènement "blur" qui est theone
déclenché même si l'objet n'a pas été modifié.
function aClick() {
Exemple : $("div").show().fadeOut("slow");
$(":text").change( function() { alert("Hello"); } ); }

$(':input').change(function(){ $("#bind").click(function () {
alert($(this).val()); $("#theone").live("click", aClick)
}); .text("Cliquez pour voir!");
});
Code de test: $("#unbind").click(function () {
<input type ="text" value="zone1" /> <br> $("#theone").die("click", aClick)
<input type ="text" value="zone2" /> <br> .text("Ne fait rien...");
});
 évènements: fonction click <body>
<div id="bind"> Bind </div>
Associe une fonction à l'évènement click des élements <div id="unbind"> Unbind </div>
de la sélection. <div id="theone"> Theone </div>
</body>
Exemple :
$("p").click( function() { alert("Hello"); } ); Exemple 2 : Cloner sans copier les événements mais
Code de test: qui copie les événements live quand même.
<p>Hello</p>
$('#contenu :text')
 évènements: fonction dblclick .live('mouseover',function(){
$(this).css('background-color','#fbf');
})
Exemple : .live('mouseout',function(){
$("p").dblclick( function() { alert("Hello"); } ); $(this).css('background-color','#fff');
})
Code de test: .live('click',function(){
<p>Hello</p> $(this)
// Cloner sans copier les événements mais
 évènements: fonction die et live (type
// qui copie les événements live quand même.
.clone()
evenement, fonction) .insertAfter(this);
});
La fonction live similaire à la fonction bind(), lie un <div id="contenu">
gestionnaire à un évènement pour les éléments <p> Bonjour RIVO </p>
sélectionnés. </div>
< !—Cloner 
Les évènements supportés : click, dblclick, <div id="contenu">
mousedown, mouseup, mousemove, <p> Bonjour RIVO </p>
mouseover, mouseout, keydown, keypress, </div>
keyup. <div id="contenu">
Les évènements non suportés: blur, focus, <p> Bonjour RIVO </p>
mouseenter, mouseleave, change, submit. </div>

La fonction die est l'inverse de la fonction live(). Elle  évènements: fonction load
supprime un évènement lié à un élément. Sans
argument, tous les évènements seront • Load(fonction)
supprimées. load est déclenché lorsque l'élément en question a
complètement fini de se charger : la page, les
Si la fonction associée à l'évènement par live() cadres, les iframes, les objets mais surtout les
est passé en second argument, alors seulement images.
ce gestionnaire d'évènement est supprimé. Exemple1 :
Exemple : la fonction live() et die(). $("p").load( function() { alert("Hello"); } );
Si on clique sur un élément d’id bind alors le texte Code de test:
« Cliquez pour voir! » est affiché dans l’élément d’id <p>Hello</p>
theone. Si on clique sur le texte « Cliquez pour voir! »,
la page actualisée n’affiche pas les div.
26
RV ENI p. 27

Exemple2 : <p>Hello</p>

$("img").load(function(){ Exemple 2
alert("Image loaded.");
}); $(document).unload(function(){
alert('Au revoir et à bientôt !');
Code de test: });

<img src="good-morning.jpg" alt="good morning"> $(window).unload(function(){

Exemple3: alert("Goodbye!");
$('.header_gauche img').load(function(){ });
$(this).attr('title','Ceci est le logo du SdZ !');
}); $(expression).unload(); ne marche pas.
$(expression).load(); ne marche pas.
Clics de souris
• Load(url,params,callback) 1. mousedown : enfoncement de la souris ;
2. mouseup : relâchement de la souris ;
Charge le code HTML à partir d'un fichier appelé et 3. click : clic de la souris.
l'injecte dans la DOM.
Note: Evitez d'utiliser cette fonction pour charger des
scripts, utilisez plutot $.getScript.  évènements: fonction mousedown
(fonction)
Paramétres:
url (String): url du fichier HTML à charger. L'évènement est déclenché lorsque l'utilisateur presse
params (Objet): (optionnel) liste de paires de la forme une touche de la souris.
clé/valeur qui seront envoyées en tant que données au
serveur. Exemple 1:
callback (Fonction): (optionnel) fonction qui sera éxécutée $(":text").keydown( function() { alert("Hello"); } );
à chaque fois qu'une donnée sera chargée Code de test:
(paramètres: responseText, statut et sa réponse). <input type ="text" value=" " /> <br>.
Exemple 1:
$("#feeds").load("feeds.html"); Exemple 2 : Le premier argument de la fonction de
retour passée en paramètre est un objet contenant des
Code de test: informations sur la touche appuyée.
Un attribut which ou keyCode (dépend du navigateur)
<div id="feeds"></div> désigne le numéro de la touche appuyée.

Résultat: $(document).keydown(function(evenement){
// Si evenement.which existe, codeTouche vaut celui-
<div id="feeds"><b>45</b> feeds found.</div> ci.
// Sinon codeTouche vaut evenement.keyCode.
Exemple 2: var codeTouche = evenement.which ||
une fonction de retour sera éxécutée lorsque les evenement.keyCode;
données seront chargées. alert(codeTouche);
});
$("#feeds").load("feeds.html",
{limit: 25},
function() { alert("The last 25 entries in the feed have
been loaded"); } Exemple 3 : on peut récuperer les positions X (pageX )
); et Y (pageY).

évènements: fonction unload (fonction) $(document).mousedown(function(clic){

$('#posX').text('Position X : '+clic.pageX);
Associe une fonction à l'évènement qui se déclenche $('#posY').text('Position Y : '+clic.pageY);
lorsque le naviguateur de l'utilisateur quitte la page en });
cours, pour les élements de la sélection.

Exemple :  évènements: fonction mouseup (fonction)

$("p").unload( function() { alert("Hello"); } );
Cet évènement se produit lorsque l'utilisteur relache le
Code de test: bouton de la souris.
Exemple :
27
RV ENI p. 28
$("p").mouseup( function() { alert("Hello"); } );
Code de test: Cet évènement se déclenche lorsque le curseur de la
<p>Hello</p> souris passe sur l'élement spécifié.
Résultat: Exemple :
<p onmouseup="alert('Hello');">Hello</p> $("p").mousemove( function() { alert("Hello"); } );

 évènements: fonction keypress ( fonction) Code de test:

<p>Hello</p>
Cet évènement se déclenche lorsque l'utilisateur
maintient une touche du clavier enfoncée.
Exemple :  évènements: fonction mouseout ou
$(":text").keypress( function() { alert("Hello"); } ); mouseleave (fonction)

Code de test: Cet évènement se déclenche lorsque le curseur de la

<input type ="text" value=" " /> <br> souris quitte un élément.
Exemple 2: Exemple :
$(document).keypress(function(evenement){ $("p").mouseout( function() { alert("Hello"); } );
// Si evenement.which existe, codeTouche vaut celui-
ci. Code de test:
// Sinon codeTouche vaut evenement.keyCode. <p>Hello</p>
var codeTouche = evenement.which ||
evenement.keyCode;  évènements: fonction mouseover
alert(codeTouche);
}); Cet évènement se déclenche lorsque l'utilisteur
positionne le curseur de la souris au dessus d'un
élement.
 évènements: fonction keyup (fonction)
Exemple 1:
Cet évènement se déclenche lorsque l'utilisteur relache
$("p").mouseover( function() { $(this).css("border","3px
une touche du clavier préalablement enfoncée.
solid grey");});
Exemple :
$("p").keyup( function() { alert("Hello"); } );
Code de test:
Code de test:
<p>Hello</p>
<input type ="text" value=" " /> <br>
Exemple 2:
Mouvements de souris
$(document).mouseover(function(clic){
$('#posX').text('Position X : '+clic.pageX);
• mouseenter : la souris entre au-dessus de $('#posY').text('Position Y : '+clic.pageY);
l'élément ; });
• mouseleave : la souris quitte l'élément ;
• mouseover : la souris entre au-dessus de  évènements: fonction hover
l'élément ou un de ses enfants ;
• mouseout : la souris quitte l'élément ou un de hover() est une méthode permettant d'appeler une
ses enfants ; fonction quand la souris va au-dessus de l'élément en
• mousemove : la souris bouge sur l'élément. question (mouseover) et quand elle s'en va
(mouseout).
 évènements: fonction mouseenter
(fonction) Paramétres:

L'évènement mouseenter se déclanche lorsque le over (Fonction): fonction a éxécuter quand le curseur
pointeur rentre dans un élément. pointe sur l'élement
out (Fonction): fonction à éxécuter lorsque le curseur
Exemple : sortira du cadre de l'élement.
Exemple 1 : Ajoute une classe « hover » au passage
$("p").mouseenter( function() { alert("Hello"); } ); de la souris et l’enleve à la sortie
$("p").hover(function(){
Code de test: $(this).addClass("hover");
},function(){
<p>Hello</p> $(this).removeClass("hover");
});
<style>
 évènements: fonction mousemove .hover {
(fonction) background-color:blue;
28
RV ENI p. 29
}
</style> Exemple :
<body> Déclenche tous les évènements d'envoi contenu dans
<p>Hello</p> les formulaires, et les envoie.
</body>
$("form").submit();
Exemple 2 : Soulignage d'un lien quand la souris
passe dessus. • Submit(fonction) : Associe une fonction à
$('a').hover(function(){ l'évènement d'envoi des élements spécifiés.
$(this).css('text-decoration','underline'); Exemple :
},function(){ Cet exemple permet de vérifier que le champ input
$(this).css('text-decoration','none'); contient bien une valeur. Si ce n'est pas le cas, le
}); formulaire ne sera pas envoyé car la fonction retourne
une valeur false.
Redimensionnement
Exemple 1:
resize est déclenché lorsque l'utilisateur redimensionne $("#myform").submit( function() {
la fenêtre en utilisant les poignées par exemple, mais return $("input", this).val().length > 0;
aussi en réduisant sa fenêtre. } );
Pour l'utiliser sur la fenêtre principale du navigateur il
faut appliquer la méthode sur $(window) et non $ Code de test:
(document) . <form id="myform"><input /></form>

Exemple : Exemple 2:
$(window).resize(function(){
alert('Arrête de me redimensionner !'); $('form[name="inscription"]').submit(function(){
}); if($('form[name="inscription"]
:password:first').val().length < 6){
 évènements: fonction one (type evt, alert('Veuillez rentrer au moins 6 caractères dans
données, fonction) votre mot de passe');
return false;
la fonction associée à l'évènement ne sera éxécuté au }
maximum une fois pour chaque élément de la });
sélection.
 évènements: fonction toggle
donnees (Objet): (optionnel) Données supplémentaires
à passer au gestionnaire d'évènements (enregistrées Variantes:
dans event.data) • Toggle(impair,pair)
Exemple : • Toggle()
Dans cet exemple, une alerte n'apparaitra que lors du Permet de switcher entre deux fonctions à chaque clic
premier clic sur le paragraphe. sur les élements de la sélection. Dès que l'un d'entre
eux est cliqué, la première fonction est éxécutée, et
$("p").one("click", function(){ lors d'un nouveau clic, la seconde sera éxécutée, puis
alert( $(this).text() ); de nouveau la première,etc.
});
Paramétres:
Code de test: • impair (Fonction): fonction à éxécuter lors de
chaque clic impair
<p>Hello</p> • pair (Fonction): fonction à éxécuter lors de
chaque clic pair
 évènements: fonction select (fonction)
Exemple 1 : Basculer entre la couleur jaune et bleue
suite à un click
Associe une fonction à l'évènement de sélection pour $("p").click().toggle(function(){
chaque élément de la sélection. $(this).addClass("selected");
Exemple : },function(){
$(":text").select( function() { alert("Hello"); } ); $(this).removeClass("selected");
Code de test: });
<input type ="text" value="zone1" />
<style>
 évènements: fonction submit
.selected {
• Submit() : Déclenche l'évènement d'envoi pour background-color:blue;
chaque élément de la sélection. }
29
RV ENI p. 30
})
p{ .click(function(){
background-color:yellow; $(this).after(' clic !');
} });
Zone1 Click ! click !

</style>

Exemple2: La couleur d'arrière-plan d'un bouton qu'on

clique sera successivement jaune, puis magenta, puis  fonction triggerHandler (type evt)
cyan et enfin bleu.
Déclenche un évènement particulier pour les éléments
de la sélection. Mais contrairement aà la fonction
$('button').toggle(function(){ trigger(), cette méthode ne déclenche pas l'action par
$(this).css('background-color','#ff0'); défaut du navigateur pour ce type d'évènement, ni le
},function(){ bouillonnement d'évènements, et les évènements live.
$(this).css('background-color','#f0f'); Seconde différence, cette méthode sera appliquée
},function(){ seulement au premier élément de la sélection.
$(this).css('background-color','#0ff');
},function(){ Exemple 1:
$(this).css('background-color','#00f'); Exemple montrant la différence entre trigger et
}); triggerhandler. Pour les deux, un message "Focused!"
va apparaitre. Mais seulement la fonction trigger
déclenchera l'action du naviguateur associée à la
méthode qui place le curseur dans le champ de saisie
Exemple 3 : Bascule l'état d'affichage des éléments du formulaire.
sélectionnés. Si ils sont affichés, la fonction les cache,
et inversement. $("#old").click(function(){
$("input").trigger("focus"); // le message Focused!
$("p").toggle() ; est ajouté 3 fois

Code de test: });

<p>Hello</p><p style="display: none">Hello Again</p> $("#new").click(function(){
<!—masqué  $("input").triggerHandler("focus"); // le message
Focused! est ajouté une seule fois
Résultat: });
<p style="display: none">Hello</p>, <p style="display: $("input").focus(function(){
block">Hello Again</p> <!—affiché  $("<span>Focused!
</span>").appendTo("body").fadeOut(1000);
});
 évènements: fonction trigger (type
evenement)) Code de test:
<button id="old">.trigger("focus")</button>
trigger() permet de déclencher un événement, <button
produisant l'action par défaut du navigateur ainsi que id="new">.triggerHandler("focus")</button><br/><br/>
celle que vous avez définie. <input type="text" value="To Be Focused"/>
Les méthodes pouvant être appelées sans argument <input type="text" value="To Be Focused"/>
sont donc le raccourci d'un appel à trigger() <input type="text" value="To Be Focused"/>

Par exemple $(expression).submit() est équivalent à $

(expression).trigger('submit'). Exemple 2

Exemple 1: Code : JavaScript

$("p").trigger("click") $('#contenu :text').mouseover(function(){
Code de test: // Appelle la fonction que vous avez définie
<p onclick="alert('hello')">Hello</p> // mais ne met pas le curseur de texte.
Résultat: $(this).triggerHandler('focus');
alert('hello') })
.focus(function(){
Exemple 2 : à chaque fois qu’on entre dans la zone de $(this).after(' focus !'); // une seule fois
texte, l’évenement click est exécuté et ajoute un });
message click après la zone
$(':text').focus(function(){  Espaces de noms
$(this).trigger('click');
30
RV ENI p. 31
Les espaces de noms (namespaces en anglais) $("p").fadeIn("slow");
permettent de créer des sortes de classes pour $('div').fadeIn(2000);
les événements.
Il suffit de mettre un point après le nom de l'événement Exemple 2:
lors d'un appel à bind(), unbind(), one(), trigger(), $("p").fadeIn("slow",function(){
triggerHandler(), live() ainsi que die(). alert("Animation Done.");
});
On peut alors créer plusieurs appels à différentes
fonctions pour un même type d'événement, et
mieux manipuler ces différents écouteurs  effets: fonction fadeOut (speed, fonction)
d'événements.
Par exemple, on peut définir plusieurs noms en même Fait disparaitre les élements sélectionnés en ajustant
temps, par exemple bind('fx.hello.world') qui leur opacité et permet de lancer une fonction à la fin de
définit fx.hello et fx.world : l'animation.
Code : JavaScript
$('input').bind('fx.hello.world',function(){ /* action ... */ }); Paramétres:
$('#elt1).click(function(){
$('input').trigger('fx.hello'); speed (String ou entier): (optionnel) chaine de
// action1 ! caractères représentant une des trois vitesses
}); prédéfinies ("slow","normal", ou "fast") ou le nombre en
millisecondes correspondant à la durée de l'animation.
$('#elt2').click(function(){ Fonction: (optionnel) fonction à éxécuter à la fin de
$('input').trigger('fx.world'); //$ l'animation.
('input').trigger('fx.hello.world'); Exemple 1:
// action2 ! $("p").fadeOut("slow");
});
• Vous pouvez utiliser vos propres types Exemple 2:
événements avec des noms, par exemple $("p").fadeOut("slow",function(){
trigger('hello.world') : alert("Animation Done.");
$('input').bind('hello.world',function(){ /* action ... */ });
});
$('#hello').click(function(){ $("p").fadeOut(1000,function(){
$('input').trigger('hello'); alert("Animation Done.");
// action 1! });
});
 effets: fonction fadeTo
$('input').trigger('world');
// action2 ! Modifie l'opacité des élements sélectionnés et permet
}); de lancer une fonction à la fin de l'animation.
$('#helloWorld').click(function(){
$('input').trigger('hello.world');
// action ! Paramétres:
}); speed (String ou entier): (optionnel) chaine de caractères
représentant une des trois vitesses prédéfinies
("slow","normal", ou "fast") ou le nombre en
11.UTILISER LES EFFETS millisecondes correspondant à la durée de l'animation.
opacity (nombre): opacité à atteindre (valeur entre 0 et 1).
Disparition callback (Fonction): (optionnel) fonction à éxécuter à la fin
de l'animation.
 effets: fonction fadeIn (speed, fonction)
Exemple 1:
fadeIn() permet de faire apparaître les éléments $("p").fadeTo("slow", 0.5);
sélectionnés en modifiant l'opacité de manière
progressive et permet de lancer une fonction à la fin de Exemple 2:
l'animation. $("p").fadeTo("slow", 0.5, function(){
alert("Animation Done.");
Paramétres: });
speed (String ou entier): (optionnel) chaine de caractères
représentant une des trois vitesses prédéfinies  effets: fonction fadeToggle()
("slow","normal", ou "fast") ou le nombre en
millisecondes correspondant à la durée de l'animation.
callback (Fonction): (optionnel) fonction à éxécuter à la fin
de l'animation.
Exemple 1:
31
RV ENI p. 32
method utilisée pour basculer entre les méthodes the Paramétres:
fadeIn() et fadeOut(). Si les elements sont faded in, ils • speed (String ou entier): (optionnel) chaine de
seront faded out et vice versa caractères représentant une des trois vitesses
Syntaxe: prédéfinies ("slow","normal", ou "fast") ou le nombre en
• $(selector).fadeToggle(); millisecondes correspondant à la durée de l'animation.
• $(selector).fadeToggle(speed,callback); • callback (Fonction): (optionnel) fonction à
• $(selector).fadeToggle(speed, easing, callback éxécuter à la fin de l'animation.
); Valeur de retour: jQuery

Paramétres:
• show() permet d'afficher les éléments en speed (Strong ou nombre): (optionnel) chaine de
question. caractères représentant une des trois vitesses
• hide() permet de cacher les éléments en prédéfinies ("slow","normal", ou "fast") ou le nombre en
question. millisecondes correspondant à la durée de l'animation.
• toggle() permet de jongler entre la présence ou callback (Fonction): (optionnel) fonction à éxécuter à la fin
l'absence de l'élément (si l'élément est caché, de l'animation.
l'afficher, sinon le cacher). Exemple 1:
$("p").show("slow");
 effets: fonction hide
Exemple 2:
• Hide() $("p").show("slow",function(){
alert("Animation Done.");
Cache chaque élement de la sélection si ils sont });
affichés.

Exemple : Glissement
$("p").hide()
Code de test:
<p>Hello</p> • slideDown() permet de dérouler verticalement
Résultat: les éléments en question.
<p style="display: none">Hello</p> • slideUp() permet d'enrouler verticalement les
éléments en question.
• Hide(speed,callback) • slideToggle() permet de jongler entre la
Cache tous les élements en utilisant une animation et présence ou l'absence de l'élément (si
permet de lancer une fonction à la fin de l'opération de l'élément est caché, le dérouler, sinon
cache. l'enrouler).

 effets: fonction slideDown

32
RV ENI p. 33
millisecondes représentant la durée de
Affiche tous les élements sélectionnés selon un effet l'animation, ou alors "slow" (600
spécifique. Une fonction peut également être assignée millisecondes), "normal" (400 millisecondes)
et sera éxécutée après l'animation. qui est la valeur par défaut, ou enfin "fast" (200
Seulement la hauteur est ajustée pour cette animation, millisecondes).
les élements sélectionnées apparaissent à la manière 3. easing (chaîne de caractères) (évolution) :
d'un "glissement". détermine la façon dont les propriétés vont
changer au cours du temps : "swing" par
Paramétres: défaut, il y a aussi "linear".
speed (String ou entier): (optionnel) chaine de caractères 4. complete (fonction) (fonction de retour) : une
représentant une des trois vitesses prédéfinies fonction (peut bien sûr être anonyme ou une
("slow","normal", ou "fast") ou le nombre en variable) qui va être appelée quand
millisecondes correspondant à la durée de l'animation. l'animation d'un élément est finie. Elle va
callback (Fonction): (optionnel) fonction à éxécuter à la fin être appelée autant de fois qu'il y a d'éléments
de l'animation. concernés par l'animation.
Exemple 1: Exemple 1 :
$("p").slideDown("slow");
Code : JavaScript
Exemple 2:
$("p").slideDown("slow",function(){ // animation avec juste le style
alert("Animation Done."); $('p')
}); .css('width','400px')
 effets: fonction slideUp .animate({
width : '500px'
Cache tous les élements sélectionnés selon un effet });
spécifique de "glissement". Une fonction peut
également être assignée et sera éxécutée après
// animation avec le style, la durée
l'animation.
<script type="text/javascript" src="
Seulement la hauteur est ajustée pour cette animation.
jquery.min.js"></script>
<script type="text/javascript">
Paramétres: $(document).ready(function(){
speed (String ou entier): (optionnel) chaine de caractères
représentant une des trois vitesses prédéfinies $("#go").click(function(){
("slow","normal", ou "fast") ou le nombre en $("#block").animate({
millisecondes correspondant à la durée de l'animation. width: "70%",
callback (Fonction): (optionnel) fonction à éxécuter à la fin opacity: 0.4,
de l'animation. marginLeft: "0.6in",
Exemple 1: fontSize: "3em",
$("p").slideUp("slow"); borderWidth: "10px"
}, 1500 );
Exemple 2: });
$("p").slideUp("slow",function(){ });
alert("Animation Done."); </script>
});
<style>
Animer des éléments
div {
Une animation jQuery est le changement du style background-color:#bca;
CSS d'un élément en un temps donné. width:100px;
animate() est une méthode qui permet d'animer le border:1px solid green;
style CSS de vos éléments ayant des propriétés }
numériques au cours du temps (exemple:
"height","top", ou "opacity" : entre 0 et 1). Vous pouvez </style>
animer les propriétés en utilisant les mesures em et % </head>
<body>
Méthode classique : plein d'arguments
<button id="go">» Run</button>
animate(style, [duration], [easing], [complete]) <div id="block">Hello!</div>
1. style (objet contenant des couples </body>
attribut/valeur CSS) obligatoire : le style de </html>
l'élément à la fin de l'animation.
2. duration (entier ou chaîne de caractères) // animation avec le style, la durée et l'évolution
(durée) : un entier positif qui est le nombre de $('p span').animate({

33
RV ENI p. 34
padding : '50px'
, opacity : 0.4 </style>
},'slow','linear'); </head>
<body>
// animation avec le style, la durée et la fonction de
retour pour augmenter la taille de l’élément <button id="go1">» Animate Block1</button>
$('p strong').animate({ <button id="go2">» Animate Block2</button>
fontSize : '2em' <button id="go3">» Animate Both</button>
, paddingLeft : '50px' <button id="go4">» Reset</button>
},2000,function(){ <div id="block1">Block1</div>
alert('fini ! '); <div id="block2">Block2</div>
}); </body>
</html>
Exemple 2:
Le premier bouton montre un exemple d'animation non
empilé : la première animation élargit le div à 90% Autres ajouts sur le style CSS dans animate()
pendant que la taille de la police (seconde animation)
est éxécutée. La troisième (élargissement de la Les valeurs des attributs CSS donnés à animate()
bordure), n'intervient quant à elle seulement une fois peuvent aussi être "show", "hide" ou encore "toggle".
que les deux autres sotn terminés , due au fait qu'elle
se trouve dans la pile d'éxécution des animations. Code : JavaScript
$('div.boite').animate({
Le second bouton déclenche une animation chainée width : 'toggle'
traditionnel, ou chaque animation attends que la , height : '200px'
précédente soit finie pour s'éxécuter. },5000);

<script type="text/javascript"> $('div.boite').animate({

$(document).ready(function(){ width : 'toggle'
$("#go1").click(function(){ , height : 'toggle'
$("#block1").animate( { width:"90%" }, },5000);
{ queue:false, duration:3000 } )
.animate( { fontSize:"24px" }, 1500 ) Cela marche pour les attributs width, height ainsi que
.animate( { borderRightWidth:"15px" }, 1500); opacity.
});
Méthode plus complète : un objet comme second
$("#go2").click(function(){ argument
$("#block2").animate( { width:"90%"}, 1000 )
.animate( { fontSize:"24px" } , 1000 ) Une autre façon d'appeler la fonction est d'avoir en
.animate( { borderLeftWidth:"15px" }, 1000); second argument un objet : les propriétés sont
}); duration (durée), easing (évolution), complete (fonction
de retour) et deux autres facultatifs :
$("#go3").click(function(){ • step (fonction) (fonction étape par étape) :
$("#go1").add("#go2").click(); fonction qui sera appelée à chaque étape de
}); l'animation, autant de fois qu'il y a d'attributs
de style et d'éléments concernés.
$("#go4").click(function(){ • queue (booléen) (empiler les animations) :
$("div").css({width:"", fontSize:"", borderWidth:""}); détermine si la prochaine animation sur les
}); éléments concernés devra attendre que la
}); première soit finie ou non. Par défaut à true.
</script> Si à false, les animations se déroulent en
même temps. C'est-à-dire que les attributs de
<style> style des éléments touchés par plusieurs
div { animations évolueront chacun de leur côté,
background-color:#bca; selon l'animation qui leur sera affectée.
width:200px; Exemple : Code : JavaScript
height:1.1em; $('div.rouge')
text-align:center; .css('top','0px')
border:2px solid green; .animate({
margin:3px; top : '448px'
font-size:14px; },{
} duration : 2000
button { , easing : 'linear'
font-size:14px; , queue : false
} });
34
RV ENI p. 35

$('div.bleu') Code : JavaScript

.css('left','0px') // Toutes les balises div qui sont
.animate({ // en ce moment animées ont la classe 'anime'.
left : '80%' $('div:animated').addClass('anime');
},{
duration : 2500 // Toutes les balises div qui ne sont pas en ce moment
, queue : true // ici peu importe sa valeur // animées n'ont pas (ou plus) la classe 'anime'.
, complete : function(){ $('div:not(:animated)').removeClass('anime');
$(this).append('<br />finie !');
} Exemple : Ajoute la classe colored à l’élément
}); animé, la supprime si elle est déja présente pour
pouvoir basculer entre jaune et verte.
Dans la première animation, on a mis queue à false,
donc toutes les animations rajoutées après se <script type="text/javascript">
déroulent en même temps. D'où le fait que dans le $(document).ready(function(){
second appel à animate(), peu importe la valeur qu'on $("#run").click(function(){
affecte à queue. $("div:animated").toggleClass("colored");
});
Valeurs relatives function animateIt() {
$("#mover").slideToggle("slow", animateIt); //
Dans les attributs CSS : on peut utiliser des valeurs Modifie la visibilité des élements sélectionnés
relatives et on peut écrire left: '+=40px', ce qui signifie }
« ajouter 40 pixels » et le préfixe -= enlève. animateIt();
});
Code : JavaScript </script>
$('#plus').click(function(){ <style>
$('#rectangle').animate({ div { background:yellow; border:1px solid #AAA;
width : '+=32px' width:80px; height:80px; margin:5px; float:left; }
},1000,'linear'); .colored { background:green; }
}); </style>
</head>
$('#moins').click(function(){ <body>
$('#rectangle').animate({ <button id="run">Voir les éléments animés</button>
width : '-=32px' <div></div>
},1000); <div id="mover"></div>
}); <div></div>
</body>
Animations des ascenseurs

on peut faire des animations avec les ascenseurs des  Désactiver les animations
éléments ! En effet, il suffit de spécifier un attribut
scrollTop et / ou scrollLeft afin de faire défiler le Depuis la version 1.3, on peut désactiver toutes les
contenu de l'élément. animations ainsi que tous les effets avec la simple
Ceci ne marche qu'avec des éléments qui ont un ligne $.fx.off = true; (ou bien jQuery.fx.off = true; ).
ascenseur et qui peuvent défiler jusqu'au nombre de On peut réactiver les animations et les effets avec
pixels désiré. $.fx.off = false; .

Code : JavaScript Code : JavaScript

// un défilement vertical doux de 800px en 5 secondes function desactiverAnimations(){
// (si il y a 800 pixels à défiler, sinon s'arrête avant) $.fx.off = true;
$('body').animate({ }
scrollTop : '800px'
},5000); function activerAnimations(){
$.fx.off = false;
Contrôler les animations }
Nous allons passer en revue dans ce sous-chapitre
tout ce qui nous permet de manipuler les animations. Stopper les animations

 Sélecteur d'animations  effets: fonction stop

La méthode stop([ viderLaQueue, allerALaFin ]) arrête
Le sélecteur :animated permet de filtrer les éléments toutes les animations en cours pour les éléments
qui sont animés au moment où la fonction sélectionnés.
s'exécute. Si des animations sont dans la pile d'éxécutions (et que
35
RV ENI p. 36
l'argument clearQueue n'est pas passé à true), alors dequeue()
ces animations seront déclenchées.
La méthode dequeue() doit être utilisée à la fin de
Paramétres: toute fonction présente dans la queue, et ceci afin
que les autres fonctions de la queue s'exécutent.
clearQueue (booléen): passé à true, vide la pile d'éxécution dequeue() supprime de la queue la fonction finie (en
des animations, ce qui stoppe leur éxécution. cours), puis exécute la suivante dans la queue (on
gotoEnd (booléen): passé à true, force l'animation en cours passe à la suivante).
à se terminer, en incluant la réinitialisation des styles et Son utilisation à l'intérieur d'une fonction de retour est
en appelant la fonction de callback tout simplement $(this).dequeue(); .
Par exemple, dans une animation, avant d'appeler la
// Donc les seules vraies utilisations de stop() sont : fonction de retour définie, jQuery utilise cette méthode.
$('div:animated').stop(); // Stopper la première
animation.
$('div:animated').stop(true); // Stopper toutes les Exemple :
animations. <div id="carre"> Ceci est un carré </div>
$('div:animated').stop(false,true); // Stopper la première Code : JavaScript
animation et la fait aller jusqu'à sa fin. $('#carre')
$('div:animated').stop(true,true); // Stopper toutes les .text('commencé !')
animations à venir et fait aller la première jusqu'à sa .animate({
fin. top : '100px'
, left : '128px'
Exemple : } , 2000
Fait bouger le div de class "block" en fonction des , function(){
actions sur les boutons "go", "stop", and "back". alert('fini !');
// Start animation $(this).text('fini !')
$("#go").click(function(){ })
$(".block").animate({left: ' =100px'}, 2000); // ajout à la queue d'une fonction
}); .queue(function(){
alert('blabla !');
// Stop animation when button is clicked $(this).dequeue();
$("#stop").click(function(){ })
$(".block").stop(); .css('color','#f00')
}); .queue(function(){
alert('blabla 2 !');
// Start animation in the opposite direction });
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000); Voici dans l'ordre ce que fait le code :
}); 1. changement du contenu textuel,
Code de test: 2. ajout d'une animation avec fonction de retour
<button id="go">Go</button> "fini !" ,
<button id="stop">STOP!</button> 3. ajout d'une fonction à la queue "blabla !" , avec
<button id="back">Back</button> dequeue() à la fin,
<div class="block"> TEXTE BRUT</div> 4. changement de la couleur de la police,
5. ajout d'une autre fonction à la queue "blabla
2 !", sans dequeue().
Manipuler les files d'attente
Retarder une file d'attente
On peut manipuler les files d'attente avec deux
méthodes : queue() ainsi que dequeue(). delay() est une méthode qui permet de retarder
queue() pendant un temps donné une file d'attente d'un
élément.
Les utilisations de queue() sont : Le premier argument est le nombre en millisecondes
• queue() appelée sans argument renvoie la file avant que l'élément suivant dans la file d'attente ne
d'attente (sous forme d'un tableau de soit exécuté.
fonctions) des éléments concernés. $(selector).delay (speed, queueName)
• queue() peut prendre en argument une speed: slow, fast ou milliseconds.
fonction qui va s'ajouter à la queue. Cette queueName: le nom de la queue par defaut "fx" :
fonction ne doit pas forcément être une queue standard.
animation, vous pouvez exécuter n'importe
quelle action. Le second argument désigne la file d'attente (par
• queue() peut aussi prendre en argument un défaut fx).
tableau de fonctions qui viendra remplacer la
file d'attente existante. Exemple 1 : Code : JavaScript
36
RV ENI p. 37
$('#logo')
.slideDown(500)
.delay(2000)
.fadeOut(800)
;
Exemple 2:
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").delay("slow").fadeIn();
});
});
</script>
</head>
<body>
<button>Click me</button><br>
<div id="div1" style="width:90px;height:90px;display:n
one;background-color:black;"></div><br>
</body>

Exemple 3 : delay avec differentes valeurs : fast,

slow et milliseconds values.

Vous aimerez peut-être aussi

Initiation à jQuery et Sélecteurs
Pas encore d'évaluation
Initiation à jQuery et Sélecteurs
9 pages
Atelierframeworkcc (1) - Déverrouillé PDF
Pas encore d'évaluation
Atelierframeworkcc (1) - Déverrouillé PDF
135 pages
Jquery PDF
Pas encore d'évaluation
Jquery PDF
83 pages
JAVASCRIPT - Jquery
Pas encore d'évaluation
JAVASCRIPT - Jquery
34 pages
7 Jquery
Pas encore d'évaluation
7 Jquery
26 pages
Cours - L1 - Jquery - Fonctions de Base
Pas encore d'évaluation
Cours - L1 - Jquery - Fonctions de Base
55 pages
Introduction à jQuery pour Débutants
Pas encore d'évaluation
Introduction à jQuery pour Débutants
12 pages
JQuery
Pas encore d'évaluation
JQuery
15 pages
Introduction et Sélecteurs jQuery
Pas encore d'évaluation
Introduction et Sélecteurs jQuery
4 pages
JQUERY - Cours
Pas encore d'évaluation
JQUERY - Cours
51 pages
Guide Complet sur jQuery et AJAX
Pas encore d'évaluation
Guide Complet sur jQuery et AJAX
36 pages
Les Principales Fonctions Jquery
Pas encore d'évaluation
Les Principales Fonctions Jquery
7 pages
J Query
Pas encore d'évaluation
J Query
24 pages
Introduction à JavaScript et jQuery
Pas encore d'évaluation
Introduction à JavaScript et jQuery
11 pages
Cours Jquery
100% (1)
Cours Jquery
34 pages
Mod5 Jquery New 2023
Pas encore d'évaluation
Mod5 Jquery New 2023
23 pages
S5-Cours Jquery
Pas encore d'évaluation
S5-Cours Jquery
32 pages
Support Cours Jquery 16 12 21
Pas encore d'évaluation
Support Cours Jquery 16 12 21
23 pages
Introduction à jQuery pour Débutants
Pas encore d'évaluation
Introduction à jQuery pour Débutants
17 pages
J Query
Pas encore d'évaluation
J Query
24 pages
Guide jQuery pour Débutants en SI
Pas encore d'évaluation
Guide jQuery pour Débutants en SI
26 pages
Créer un site web dynamique avec jQuery
Pas encore d'évaluation
Créer un site web dynamique avec jQuery
149 pages
Introduction à jQuery pour le web dynamique
Pas encore d'évaluation
Introduction à jQuery pour le web dynamique
27 pages
Le Blog de NicoLargo-Tutorial Jquery
Pas encore d'évaluation
Le Blog de NicoLargo-Tutorial Jquery
2 pages
TP Sin Création Page html5 Jquery (Cours)
Pas encore d'évaluation
TP Sin Création Page html5 Jquery (Cours)
20 pages
JQuery PDF
Pas encore d'évaluation
JQuery PDF
27 pages
Découvrez Comment Fonctionnent Les Balises de Script Et Document Ready
Pas encore d'évaluation
Découvrez Comment Fonctionnent Les Balises de Script Et Document Ready
16 pages
JQuery
Pas encore d'évaluation
JQuery
26 pages
Manipulation du DOM avec JavaScript
Pas encore d'évaluation
Manipulation du DOM avec JavaScript
12 pages
Jquery 03 - Chapitre 03
Pas encore d'évaluation
Jquery 03 - Chapitre 03
5 pages
Jquery
Pas encore d'évaluation
Jquery
98 pages
Seance 11 - Intro en JQuery
Pas encore d'évaluation
Seance 11 - Intro en JQuery
19 pages
Partie 3 - 2 Manipuler Les Éléments D'une Page Avec DOM-1
Pas encore d'évaluation
Partie 3 - 2 Manipuler Les Éléments D'une Page Avec DOM-1
18 pages
Évènements Et Effets JQUERY
Pas encore d'évaluation
Évènements Et Effets JQUERY
7 pages
Introduction à jQuery pour Débutants
Pas encore d'évaluation
Introduction à jQuery pour Débutants
20 pages
Technologies Web-Javascript - Séance 3
Pas encore d'évaluation
Technologies Web-Javascript - Séance 3
19 pages
TP2 - Jquery
Pas encore d'évaluation
TP2 - Jquery
2 pages
Jquery
Pas encore d'évaluation
Jquery
38 pages
Js CM 4 MP
Pas encore d'évaluation
Js CM 4 MP
10 pages
Ajax NFE102
Pas encore d'évaluation
Ajax NFE102
117 pages
Partie 3 - Jqueryv3
Pas encore d'évaluation
Partie 3 - Jqueryv3
46 pages
Jquery Dynamisez Vos Pages Plus Simplement
Pas encore d'évaluation
Jquery Dynamisez Vos Pages Plus Simplement
30 pages
JQuery
Pas encore d'évaluation
JQuery
34 pages
14 - WEB - IV) Javascript
Pas encore d'évaluation
14 - WEB - IV) Javascript
13 pages
Examen Blanc Web
Pas encore d'évaluation
Examen Blanc Web
5 pages
Chapitre4 Jquery
Pas encore d'évaluation
Chapitre4 Jquery
14 pages
Cours L1 JQuery UI
Pas encore d'évaluation
Cours L1 JQuery UI
22 pages
Le Jquery
Pas encore d'évaluation
Le Jquery
6 pages
5 Jquery
Pas encore d'évaluation
5 Jquery
11 pages
M105 - Documentation - Partie5 - Manipuler JQUERY
Pas encore d'évaluation
M105 - Documentation - Partie5 - Manipuler JQUERY
11 pages
Introduction à JavaScript et DOM
Pas encore d'évaluation
Introduction à JavaScript et DOM
4 pages
JQuery - Votre Guide Complet Pour Tout Savoir Sur JQuery (French Edition)
Pas encore d'évaluation
JQuery - Votre Guide Complet Pour Tout Savoir Sur JQuery (French Edition)
80 pages
Introduction à jQuery et AJAX
Pas encore d'évaluation
Introduction à jQuery et AJAX
4 pages
Fiche JS JQuery L1
Pas encore d'évaluation
Fiche JS JQuery L1
3 pages
04 Javascript DOM Even 012824
Pas encore d'évaluation
04 Javascript DOM Even 012824
40 pages
DOM Ajax IndexedDB
Pas encore d'évaluation
DOM Ajax IndexedDB
107 pages
Objets et Tableaux en JavaScript
Pas encore d'évaluation
Objets et Tableaux en JavaScript
12 pages
Regl Int 050723
Pas encore d'évaluation
Regl Int 050723
9 pages
JAVA Support Part 1
Pas encore d'évaluation
JAVA Support Part 1
33 pages
L2 Cours CPP 2023
Pas encore d'évaluation
L2 Cours CPP 2023
125 pages
Intro Mcu l2
Pas encore d'évaluation
Intro Mcu l2
19 pages
Comptabilite Analytique L2 GB Eni
Pas encore d'évaluation
Comptabilite Analytique L2 GB Eni
25 pages
Exercice Sma Q Plus
Pas encore d'évaluation
Exercice Sma Q Plus
2 pages
Épopée Comique : Bataille Grenouilles-Rats
Pas encore d'évaluation
Épopée Comique : Bataille Grenouilles-Rats
7 pages
Introduction Aux Techniques Islamiques de Financement Bid1
Pas encore d'évaluation
Introduction Aux Techniques Islamiques de Financement Bid1
206 pages
IChap 6 Tome 2 B
Pas encore d'évaluation
IChap 6 Tome 2 B
26 pages
KANBAN
Pas encore d'évaluation
KANBAN
22 pages
Cours Robot I Quem I Sea Jour 2015
Pas encore d'évaluation
Cours Robot I Quem I Sea Jour 2015
68 pages
Cours de Sociologie Urbaine
Pas encore d'évaluation
Cours de Sociologie Urbaine
26 pages
Banques Marocaines en Afrique
50% (2)
Banques Marocaines en Afrique
25 pages
FICHE DE Poste DU CHEF SERVICE DES TRAVAUX ET DE L'environnement
Pas encore d'évaluation
FICHE DE Poste DU CHEF SERVICE DES TRAVAUX ET DE L'environnement
3 pages
La Méthode ALARP
Pas encore d'évaluation
La Méthode ALARP
11 pages
Introduction aux réseaux informatiques
Pas encore d'évaluation
Introduction aux réseaux informatiques
93 pages
Révision Ingénieur Environnement Climat Kada Harchaoui
100% (1)
Révision Ingénieur Environnement Climat Kada Harchaoui
3 pages
Modele Contrat de Vente de Marchandises
67% (6)
Modele Contrat de Vente de Marchandises
3 pages
EL GHAFIRI Yassine 5 GC FCD-Demande Validation PFE
Pas encore d'évaluation
EL GHAFIRI Yassine 5 GC FCD-Demande Validation PFE
3 pages
Chapitre 5
Pas encore d'évaluation
Chapitre 5
39 pages
Ordonnancement RTOS : Priorités et RR
Pas encore d'évaluation
Ordonnancement RTOS : Priorités et RR
14 pages
Data Analysis Guide Apprenant Sept 2023
Pas encore d'évaluation
Data Analysis Guide Apprenant Sept 2023
7 pages
Maj Newsletter Inscrits
Pas encore d'évaluation
Maj Newsletter Inscrits
8 pages
Corrigé Examen NOISE Janvier 2012
Pas encore d'évaluation
Corrigé Examen NOISE Janvier 2012
17 pages
Catalogo BAYA
Pas encore d'évaluation
Catalogo BAYA
9 pages
Gestion financière des chantiers BTP
Pas encore d'évaluation
Gestion financière des chantiers BTP
6 pages
Les Garanties Du Proces Equitable
Pas encore d'évaluation
Les Garanties Du Proces Equitable
3 pages
Gestionnaire Comptable au Mali : Profil et Compétences
Pas encore d'évaluation
Gestionnaire Comptable au Mali : Profil et Compétences
3 pages
Contenu Des Jeux de Donnees Standard Vehicules PDF
Pas encore d'évaluation
Contenu Des Jeux de Donnees Standard Vehicules PDF
26 pages
Effets Du Commerce International Sur L'environnement - Wikipédia
Pas encore d'évaluation
Effets Du Commerce International Sur L'environnement - Wikipédia
12 pages
Président de La République Démocratique Du Congo - Wikipédia
Pas encore d'évaluation
Président de La République Démocratique Du Congo - Wikipédia
8 pages
JO 8.742 - 11 Avril 2025
Pas encore d'évaluation
JO 8.742 - 11 Avril 2025
76 pages
Invitation FORUM
Pas encore d'évaluation
Invitation FORUM
7 pages
Sequenceur Bac
Pas encore d'évaluation
Sequenceur Bac
14 pages
Guide des Réseaux Sanitaires
100% (1)
Guide des Réseaux Sanitaires
28 pages