jquery - labunixlabunix.uqam.ca/~obaid/inf2005/a2016/pdf/jquery.pdf · • on doit télécharger la...

30/11/2016

1

JQuery

1

INF2005– Programmation web– A. Obaid

JQuery

• Une librairie JavaScript permettant de faciliter le traitement des documents HTML

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

• Fonctions – Manipulation des arbres DOM incluant les styles – Manipulation d'événements – Effets d'animation – Support pour le langage AJAX

• Supporté par tous les navigateurs.

2

30/11/2016

2


Utilisation de JQuery

• On doit télécharger la libraire JQuery

• On l'enregistre pour s'y référer dans un document HTML: <script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

… notre code JavaScript …

</script>

• Plusieurs sites de téléchargement: – http://docs.jquery.com/Downloading_jQuery#Download_jQuery

– Http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js

3


Appel de la librairie

• Toute commande JQuery doit être appelée après que le document soit chargé.

• On peut y déclarer et utiliser des fonctions.

• Tout doit être appelé dans un script JavaScript au sein de la fonction $(*).ready().

• On peu stocker le résultat d'une commande JQuery:

– var texte=$("#monDiv").html();

jq1.html

$(document).ready(function() { … Commandes JQuery/JavaScript … });

Sélecteur Évènement Fonction de traitement(anonyme)

4

Objet JQuery

30/11/2016

3


Un premier exemple

<html> <head> <title> Premier Exemple</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("div").click(function() { alert("Je suis la !"); } ); }); </script> </head> <body> <div id=“monDiv"> Si on clique ici, on verra la fenetre d'alarme ! </div> </body> </html>

jq2.html

5


Les identificateurs

• Dans JavaSCript, on peut trouver un élément avec son identificateur grâce à la méthode getElementById()

• Dans JQuery, on peut tout simplement utiliser un sélecteur pour retrouver l'élément

vElelement= ... getElementById("maListe") …..

$(document).ready(function() { $("#maListe").addClass("rouge"); });

6

30/11/2016

4


Les sélecteurs

• Ils permettent d'accéder à des éléments du DOM. – Ensemble très riche

• Utilisent des noms de balises, des identificateurs, des noms de classe, des valeurs d'attributs, des pseudo-classes, etc.

• Utilisés dans une forme $(sélecteur) où sélecteur peut prendre plusieurs formes semblables à celles utilisées dans CSS. – $(balise)

– $(identificateur)

– $(classe)

– $(expression)

– … 7


Les sélecteurs

– $("p") : tous les éléments <p>

– $("p.intro") : tous les éléments <p> de classe "intro".

– $("p#demo") : l'élément <p> d'identité "demo".

– $("[href]") : les éléments ayant un attribut href.

– $("[href='#']") : les éléments avec un attribut href = "#".

– $("[href$='.jpg']") : tous les éléments ayant un attribut href se terminant par jpg".

– $("ul li:first") : le premier <li> de chaque <ul>

– $("ul li:last") : le dernier <li> de chaque <ul>

– $("div#intro.entete"): les éléments de classe "entete" à l'intérieur d'un <div> d'identité="intro"

– $(“td”) : tous les éléments <td> dans le document

– $("p a"): éléments <a> , descendants de tout élément <p>

– $("p > a"): éléments <a>, enfants directs de tout élément <p> 8

30/11/2016

5


Les sélecteurs

• sel:even : séléments en position paire dans une sélection.

• sel:odd: éléments en position dans une sélection.. • sel:eq(n) ou :nth(n) : les éléments qui se trouvent

à la position n. Ca commence à la position 0. • sel:gt(n) : éléments à la position > n. • sel:lt(n) : éléments se à la position < n. • sel:first : équivalent à sel:eq(0). • sel:last : dernier élément de la liste • élements:parent : éléments qui ont des enfants.

9


Les sélecteurs

10

<!—Fichier : selecteur1.html --> <html> <head> <style type="text/css"> .vert { background-color: green;} .gris { background-color: grey; } .gras { font-style: bold;} </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $('tr:odd'). addClass('vert'); $('tr:even'). addClass('gris'); $('p:eq(1)'). addClass('gras'); }); </script> </head>

<body> <table border=1> <th> Nom </th> <th> Age </td><th> Salaire</th> <tr > <td> Alain </td> <td> 35</td> <td> 65000</td></tr> <tr> <td> Jean </td> <td> 45</td> <td> 80000</td></tr> <tr> <td> Pierre</td> <td> 50</td> <td> 82000</td></tr> <tr> <td> Paul </td> <td> 38</td> <td> 70000</td></tr> </table> <p> Ceci est un premier paragraphe</p> <p> Ceci est une deuxieme paragraphe </p> </body> </html>

30/11/2016

6


Exemples de sélecteurs

1. <p id="leTexte"> 2. <span class="unTexte"> Bonjour la gang ! </span> 3. <img src="photo1.jpg" class="image1" /> 4. </p> 5. <p> 6. <img src="photo2.gif" alt=" image2 /> 7. <span class="unTexte"> Les photos de vacances ! </span> 8. </p> 9. <img src="photo3.jpg" style="display: none;" class=" image1" />

#leTexte 1 #leTexte .unTexte: 2 p > span: 2 span + img: 3, 7 span > imgaucun .img[src$=.jpg] 3,9 .img[src~=photo] 3,6 p ~ img 9 p:first + img aucun :hidden 9 img:hidden:not(.image1): acun p:contains('Bonjour'):has(span): 1

11


Autres sélecteurs JQuery

• Sélecteurs propres à JQuery permettant de spécifier certains caractéristiques des éléments: – sel:hidden : Éléments invisibles,

– sel:visible : Éléments visibles.

– sel:parent : Éléments qui ont des enfants.

– sel:contains(texte) : Éléments qui contiennent texte

– sel:empty : Éléments dont le contenu est vide

– sel:nth(n) : n-ème élément

– sel:contains('chaine'): éléments qui contiennent chaine

– …

12

30/11/2016

7

INF2005– Programmation web– A. Obaid 13

Autres sélecteurs JQuery

 <html> <head> <style tye="text/css"> .accentue { font-style: italic; background-color: #0f0; } </style> <script type="text/javascript" src="jquery.js" ></script> <script tyep="text/javascript"> $(document).ready(function() { $('span:contains(assurance)').addClass('accentue'); }); </script> </head> <body >

<p> <span> Ceci est un texte qui contient le mot assurance.</span> <span> Ceci est un texte qui ne contient pas ce mot. </span> </p> <p> Le contrat d'assurance <span> est decrit en termes juridiques</span> </p> <span> Ici, est question par exemple de l'assurance-auto</span> </body> </html>


Événements dans JQuery

• Comme dans JavaScript, un événement est associé à un élément et pourra être programmé pour effectuer une tache définie dans une fonction.

• La fonction peut être anonyme: – $(sel).evenement(function() {

Commandes Jquery ou JavaScript … });

• Exemple d’évènements: click(), mouseover(),…

• Exemple:

– JQuery:

$(document).ready(function() { $("a").click(function() { alert("Bonjour tout le monde ! " ); }); });

– Équivalent JavaScript:

<a href="javaScript:void(0)" onclick="alert('Bonjour tout le monde ! ')">Lien</a>

14

30/11/2016

8


Événements dans JQuery

• $(document).ready(fonction)

• $(sélecteur).click(fonction)

• $(sélecteur).dblclick(fonction)

• $(sélecteur).focus(fonction)

• $(sélecteur).mouseover(fonction)

• …

15


Les callbacks

• Fonctions appelées dans d'autres.

• Un fonction (anonyme) peut avoir une autre fonction en paramètre qui sera exécutée à la fin de l’exécution de celle-ci. – Utilisé (entre autres) pour faire des animations

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".test").fadeOut("slow",function(){ $(this).fadeIn("slow"); }); }); </script>

Jq8.html

16

30/11/2016

9


Chainage des fonctions

• On peut mettre des fonctions en chaine appliquées à un objet.

• Au lieu d'écrire: – $(".toto").append(" un texte");

$(".toto").css("border","1px solid red"); $(".toto").addClass("titi"); $(".toto").removeClass("toto");

On écrirait: – $(".toto").append(" un texte").css("border","1px solid red") .addClass("titi").removeClass("toto");

17


La méthode html()

• Elle permet d'accéder ou de modifier le contenu d'un élément – sel.html() : pour l'accès.

– sel.html('Code HTML'): pour la modification.

• Exemples: – alert($('#titre').html());

• Affiche le contenuHTML de #titre.

– $('#titre').html("<h2>Voici mon nouveau contenu</h2>'):

• Change le contenu HTML de #titre.

$(document).ready(function() { $(".monPar1").html("<h2> Au revoir ancien paragraphe </h2>"); $(".monPar3").html($(".monPar2").html()); });

jq9.html

18

30/11/2016

10


La méthode text()

• Permet de manipuler le contenu d'un élément en tant que texte.

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

<p id="premier">

<span class="texte"> Bonjour la gang ! </span> <img src="photo1.jpg" /> </p>

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

jq3.html

19


La méthode replaceWith()

• html() et text() permettent de changer le contenu d'une balise.

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

$(document).ready(function() { $('a').replaceWith('<h3>Encrageenlevé! </h3>'); $('#titre').replaceWith('<h1>'+$('#titre').html()+'</h1>'); $('.premier').replaceWith('<a href="http://www.uqam.ca"> Site UQAM</a>'); });

jq11.html

20

30/11/2016

11


Les méthodes before() et after()

• Elles permettent d'ajouter du contenu à un élément avant ou après l'élément en question.

• Exemple: – $('zonetexte').after('<p> N'oubliez de signer votre texte SVP ! </p>');

– $('zonetexte').after("<p class='petit'> N'oubliez de signer! </p>");

jq10.html

21


Les méthodes wrap() et wrapIn()

• wrap() permet d'ajouter une balise (ouvrante et fermante) autour d'un élément. – En fait on passe en paramètres une balise ouvrante et sa fermante

(sans contenu !).

• wrapIn() entoure un contenu.

• Exemple: – $('div').wrap('<em></em>') transformera les <div>en:

• <em><div> …</div></em>

– $('div').wrapIn('<em></em>') transformera les <div> en

• <div><em> … </em></div>

function colorer() { $('.rouge').wrap('<span style="color:red"></span>'); $('.vert').wrap('<span style="color:green"></span>'); $('.bleu').wrap('<span style="color:blue"></span>'); }

jq12.html

Jq12_1.html

22

30/11/2016

12


La méthode unwrap()

• Inverse de wrap().

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

… $('#enveloppe').unwrap(); … <b> <div id="enveloppe"> Ceci est un div enveloppe avec <b> </div> </b>

jq12.html

23


Les méthodes remove() et empty()

• remove() permet de supprimer des éléments. – On lui passe un sélecteur de l'élément à supprimer.

• empty() permet de vider le contenu d'un l'élément

<script type="text/javascript"> function viderLesBoutons(){ $('#LesBoutons button').empty(); } function viderTout(){ $('body').empty() } </script> … <body> <div id="LesBoutons"> <button onClick="viderLesBoutons();">Vider les boutons</button><br /> <button > Un bouton vide !</button> </div> <button onClick="viderTout();">Vider les le tout </button> …

Jq13.html

$("button").click(function(){ $("p").remove(); } );

24

30/11/2016

13


JQuery et CSS

• On dispose de méthodes pour la manipulation des classes CSS: addclass(), removeClass(), etc.

$(document).ready(function() { $("#maListe"). hover(function() { $(this).addClass("vert"); }, });

$(document).ready(function() { $("#maListe"). hover(function() { $(this).removeClass("vert"); }; });

25


addClass() et removeClass()

• addClass() permet d'ajouter une ou plusieurs classes

• removeClass() permet d'enlever une ou plusieurs classes

• Il existe aussi removeAttr() pour gérer les propriétés CSS

<style type="text/css"> .monDiv { color: red; } .lien:hover { color: yellow; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> functionajouteclasse(){ $('div:first').addClass('monDiv'); $('a').addClass('lien'); } </script> </head> <body> <div> Premier div</div> <div>deuxiemediv</div> <buttononclick="ajouteclasse();"> Ajouter une classe </button> <br/><a href="page1.html"> Un lien </a> </body></html>

jq17.html

26

30/11/2016

14


Modifications de propriétés CSS

• css() peut s'utiliser de plusieurs façons: – Css("propriéte") permet de récupérer la valeur d'une propriété CSS

– Css("propriété","valeur") permet de définir une propriété CSS

– css({"apropriete1": "valeur1", "propriete2": "valeur2",…}) permet de définir plusieurs propriétés CSS

$('body').css('background-color','#0ff'); $('a') .css({ borderBottom: '2px dashed #ff00ff', color: '#4Cb', paddingLeft: '4px', 'float': 'left', margin: '4px', 'letter-spacing': '2px', })

27


Modifications de propriétés CSS <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function accentuer(){ $("dt").addClass("accentue"); } </script> <style type="text/css"> h1 { font-size: 2.5em; margin-bottom: 0;} .accentue { font-style: italic; color:red;} </style> </head> <body > <h1>Villes du monde </h1> <dl> <dt> Montreal </dt><dd> Large, verte, vivante et dynamqiue</dd> <dt> New York </dt><dd> Dense, pleine de grattes-ciels , passionnante, centre d'affaires </dd> </dl> <a href="#" onMouseOver="accentuer()">Allez-y ! </a> </body> </html>

jq6.html

28

30/11/2016

15


Modifications de propriétés CSS

• La méthode toggleClass() permet d’ajouter et d'enlever des classes (par jonglage !) – Les classes peuvent être appliquées en série.

<style type="text/css"> .lrouge { background-color: #000; color: #fff; border : 5px solidyellow;} } .encadre { display: block; }

</style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function jouerAvec(){ $('a').toggleClass('encadre'). toggleClass('lrouge'); } </script> </head> <body>

jq18.html

29


Objets JQuery

• jQuery repose sur la fonction jQuery() appelée aussi $() qui retourne un objet jQuery.

• Cet objet a plusieurs méthodes: – Manipulation du DOM, de CSS, d’évènements et autres

effets visuels.

• Exemple: – Si on désire masquer progressivement les paragraphes

d’une page, on utilise : – $("p").fadeOut(); jq8.html

30

30/11/2016

16


JQuery et DOM

• La fonction $() retourne un tableau d'objets DOM. • Les éléments de ces tableaux sont accessibles grâce à leurs

indices. • Exemples:

– $('body'): retourne un tableau à un élément. – $('a') : retourne un tableau d' éléments <a> – $('p')[1] désigne le deuxième paragraphe.

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

place de l'action JavaScript à effectuer.

31


JQuery et DOM

• On peut consulter des propriétés de ces objets tels que tagName, length, etc.

• On a aussi des méthode de parcours de l'arbre DOM. – parent() renvoie l'élément parent direct d'un élément. – children() renvoie les éléments enfants directs d'un élément

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

les méthodes prependTo(), appendTo(), insertBefore(), insertAfter()

function lister(){ alert($('.bouton').length); alert($('#bouton1')[0].tagName); alert($('body').parent()[0].tagName); }

Jq14.html

32

30/11/2016

17


Sélecteurs et formulaires

• Il existe des sélecteurs spécifiques aux formulaires : – :checked : les boutons checkbox ou radio cochés – :selected : les options (select) sélectionnées. – :input : les éléments input d'un formulaire. – :button : les boutons. – :reset : les boutons reset. – :submit : les boutons submit. – :checkbox : les cases à cocher. – :radio : les boutons radio. – :text : les champs de texte. – :password : les champs de mots de passes. – :hidden : les éléments cachés du formulaire. – …

• La méthode val() retourne la valeur d'un champ du formulaire. Elle permet aussi de modifier un contenu.

jq16.html

33


Événements de formulaires

• select: déclenché lorsque du texte est sélectionné dans un champ de type text ou un texteara.

• change: déclenché lorsque le texte d'un champ de type text, password ou texteara a été modifié.

• submit : déclenché lorsqu'un formulaire est soumis

• focus : déclenché lorsque le focus est mis sur un élément d'un formulaire

jq21.html

$(document).ready(function() { $(':text, textarea').select(function(){ alert("Champ texte selctionne : "+$(this).val()); }); $(':input').change(function(){ alert("Champ input modifie : "+$(this).val()); }); });

34

30/11/2016

18


Événements de souris et clavier

• keydown : enfoncement de la touche

• keypress : maintien de la touche enfoncée

• keyup : relâchement de la touche.

• mousedown : appui sur la souris

• mouseup : relâchement de la souris

• click : clic de la souris.

• mouseenter : la souris entre au-dessus de l'élément

• mouseleave : la souris quitte l'élément

• mouseover : la souris entre au-dessus de l'élément

• mouseout : la souris quitte l'élément

• mousemove : la souris bouge sur l'élément

jq22.html

jq23.html 35


Objet clic

• Correspond au clic de la souris;

• Possède des propretés de coordonnées: – pageX: Coordonnée X (gauche vers la droite)

– pageY: Coordonnée Y (de haut vers le bas)

36

30/11/2016

19


Événements de fenêtre

• scroll : déclenché lorsque l'utilisateur utilise un ascenseur horizontal ou vertical.

• resize : déclenché lorsque l'utilisateur redimensionne la fenêtre.

• load : déclenché lorsque l'élément en question a fini de se charger (page, cadre, image, etc.).

• ready : déclenché lorsque la page est prête. Utilisé avec l'objet document.

• unload : déclenché lorsque l'utilisateur quitte la page.

37


Autres événements

• hover() : déclenché lorsque la souris passe au-dessus d'un élément (mouseover) et quand elle s'en va (mouseout).

• toggle() : fonction de basculement appelée successivement pour les effets show/hide et slide).

jq24.html

38

30/11/2016

20


Les fonctions d'animation

• Les méthodes slideDown() et slideUp() changent la hauteur et le largeur d'éléments – $(sélecteur).slideDown(vitesse, fonction)

– $(sélecteur).slideUp(vitesse, fonction)

• La méthode slideToggle() permet de faire un basculement. – $(sélecteur).slideToggle(vitesse, fonction)

• La vitesse peut être: "slow", "fast", "normal" ou une durée en millisecondes. La fonction (si elle est présente) sera exécutée à la fin de l'effet.

39

<script type="text/javascript"> $(document).ready(function(){ $("#montrer").click(function(){ $("#tableau").slideDown("slow"); }); }); </script>

jq30.html


Les fonctions d'animation

40

 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#bascule").click(function(){ $(".texte").slideToggle( 'slow'); }); }); </script> <style> .texte { width:400px; color: red;border:1px solid black; } #uneImage { width:100px; float: left; margin: 5px; } </style>

<body> <p> Appueyz sur le bouton pour faire appareite et disparaitre le bloc ci-dessous</p> <button id="bascule">Basculer</button> <div class="texte"> Quam ob rem ut ii qui superiores…. <img id="uneImage" src="ete.jpg"> <br> Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges ... </div> </body> </html>

30/11/2016

21


Les méthodes pour l'animation

• animate() permet d'animer le style CSS.

• Elle a la forme suivante:

• animate(style, [durée], [manière], [fin]) • style: formé des couples attribut/valeur définissant le style de

l'élément à la fin de l'animation.

• durée : durée en ms de l'animation ou un symbole parmi : slow (600ms), normal (400ms), fast (200ms).

• manière : chaine qui détermine la façon dont les propriétés vont changer : "swing", "linear".

• fin: fonction appelée quand l'animation est finie.

jq25.html

41


Animation - Exemples

42

script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); }); }); </script> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:100px;width:100px; position:relative"> </div> </body> </html>

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

30/11/2016

22



43

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"100px"},"slow"); $("div").animate({fontSize:"3em"},"slow"); }); }); </script> </head> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div> </body> </html>

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2


Les effets de visibilité

• Les méthodes hide() et show() donnent un effet d'animation en jouant sur la visibilité (attribut visibility) des éléments : – hide (vitesse[, callback])

– show(vitesse[, callback])

• vitesse peut être: "slow", "fast", "normal" ou une durée en millisecondes. Callback sera exécutée à la fin de l'effet.

• Ces méthodes sont souvent combinées.

• La méthode toggle (vitesse[, callback]) est utilisée pour passer entre l'absence et la présence d'un élément

jq27.html

44

$(document).ready(function(){ $(".cacheMoiCa").click(function(){ $(".secret").hide("slow"); }); });

$(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); });

30/11/2016

23

INF2005– Programmation web– A. Obaid 45

Les effects de visibilité

 <html> <head> <style> #click1{ margin:10px;padding:12px; border:2px solid blue; width: 80px; height:20px; } </style> <script type="text/javascript" src="jquery.js" ></script> <script tyep="text/javascript"> $(document).ready(function() { $("#click1").click(function(){ $("#div1").hide(); }); }); </script> </head>

<body> <div> <div id="click1"> Clickez ici </div> <div id="div1"> <img src="ete.jpg" width=300px/> </div> </div> </body> </html>

jq26.html

jq27.html

jq28.html

jq29.html

jq8.html

bouger.html


La méthode toggle()

46

 <html> <head> <style type="text/css"> #go{ border:2px solid #666; width: 40px; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#go").click(function(event){ $("#leDiv").toggle('slow'); }); }); </script> </head>

<body> <div id="go">Vas-y</div> <div id="leDiv"> <img src="ete.jpg" width=120px /> </div> </body> </html>

30/11/2016

24


Modification de la transparence

• Les méthodes fadeIn() /fadeOut() permettent de faire apparaître/ disparaitre les éléments progressivement en jouant sur le transparence. – fadeIn(vitesse[, callback])

– fadeOut(vitesse[, callback])

• Des fois, on inclut une de ces méthodes comme callback de l'autre:

$("#p2").fadeOut(2000, function() {

$(this).fadeIn(2000);

});



• fadeTo( ) permet de changer l'opacité d'un élément en la faisant passer à un niveau donné.

– fadeTo(vitesse, opacite, callback);

• opacity : valeur entre 0 et 1 (1 : très opaque).

48

30/11/2016

25



49

 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("#plusOpaque").click(function(){ $(".texte").fadeTo( 'slow', 0.9); }); $("#moinsOpaque").click(function(){ $(".texte").fadeTo( 'slow', 0.1); }); }); </script> <style> .texte {width:400px; color: red; border:1px solid black;} #uneImage { width:100px; float: left; margin: 5px; } </style> </head>

<body> <p> Appueyz sur le bouton pour faire appareite et disparaitre le bloc ci-dessous</p> <button id="plusOpaque">Opaciser</button> <button id="moinsOpaque">Eclaircir</button> <div class="texte"> Quam ob... <img id="uneImage" src="ete.jpg"> <br> Ideo urbs venerabilis post superbas ... </div> </body> </html>



50

 <html> <head> <script type="text/javascript" src="jquery.js" ></script> <script tyep="text/javascript"> $(document).ready(function() { $("#p1").fadeOut('slow'); $("#p2").fadeOut(2000, function() { $(this).fadeIn(2000); }); }); </script> </head>

<body> <p id="p1"> Mon premier paragraphe Hac ex causa conlaticia stipe Valerius humatur ille …</p> <p id="p2"> Mon second paragraphe: Proinde die funestis interrogationibus praestituto im…. </p> </body> </html>

30/11/2016

26


La méthode animate()

• Permet d'animer des propriétés CSS

– animate(styles, [durée], [manière], [callback])

• styles: liste attribut/valeur des éléments style utilisés.

• durée : slow (600ms), normal (400ms), fast (200ms) ou une durée en ms.

• manière : façon dont les propriétés vont changer : "linear", "swing", …

• Le paramètre styles sous forme {propriété: "valeur" ,…}

• {width: "100", height: "200px", fontSize: "14pts"}

jq25.html

51


La méthode animate()

52

script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({height:300},"slow"); $("div").animate({width:300},"slow"); $("div").animate({height:100},"slow"); $("div").animate({width:100},"slow"); }); }); </script> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:100px;width:100px; position:relative"> </div> </body> </html>

Source: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

30/11/2016

27



53

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"100px"},"slow"); $("div").animate({fontSize:"3em"},"slow"); }); }); </script> </head> <body> <button>Start Animation</button> <br /><br /> <div style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div> </body> </html>

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2


Effets animés

• Pour avoir un animation progressive il faudra donner l'impression de continu

• Règle générale:

– Durée de l'animation d'une boite égale à la différence de hauteur (à la fin de l'animation) divisée par la vitesse

– La durée d'animation de la vidéo est de 25 frames/seconde (25 fps).

54

jquery - labunixlabunix.uqam.ca/~obaid/inf2005/a2016/pdf/jquery.pdf · • on doit télécharger la...

Documents