JQuery 1. INF2005– Programmation web– A. Obaid JQuery Une librairie JavaScript permettant de faciliter le traitement des documents HTML Permet d'écrire.

Présentation au sujet: "JQuery 1. INF2005– Programmation web– A. Obaid JQuery Une librairie JavaScript permettant de faciliter le traitement des documents HTML Permet d'écrire."— Transcription de la présentation:

1 JQuery 1

2 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

3 INF2005– Programmation web– A. Obaid Utilisation de JQuery On doit télécharger la libraire JQuery On l'enregistre pour s'y référer dans un document HTML: … notre code JavaScript … 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

4 INF2005– Programmation web– A. Obaid 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

5 INF2005– Programmation web– A. Obaid Un premier exemple Premier Exemple $(document).ready(function() { $("div").click(function() { alert("Je suis la !"); } ); }); Si on clique ici, on verra la fenetre d'alarme ! jq2.html 5

6 INF2005– Programmation web– A. Obaid 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

7 INF2005– Programmation web– A. Obaid 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

8 INF2005– Programmation web– A. Obaid Les sélecteurs – $("p") : tous les éléments – $("p.intro") : tous les éléments de classe "intro". – $("p#demo") : l'élément 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 de chaque – $("ul li:last") : le dernier de chaque – $("div#intro.entete"): les éléments de classe "entete" à l'intérieur d'un d'identité="intro" – $(“td”) : tous les éléments dans le document – $("p a"): éléments, descendants de tout élément – $("p > a"): éléments, enfants directs de tout élément 8

9 INF2005– Programmation web– A. Obaid 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

10 INF2005– Programmation web– A. Obaid Les sélecteurs 10.vert { background-color: green;}.gris { background-color: grey; }.gras { font-style: bold;} $(document).ready(function() { $('tr:odd'). addClass('vert'); $('tr:even'). addClass('gris'); $('p:eq(1)'). addClass('gras'); }); Nom Age Salaire Alain 35 65000 Jean 45 80000 Pierre 50 82000 Paul 38 70000 Ceci est un premier paragraphe Ceci est une deuxieme paragraphe

11 INF2005– Programmation web– A. Obaid Exemples de sélecteurs 1. 2. Bonjour la gang ! 3. 4. 5. 6. 7. Les photos de vacances ! 8. 9. #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 ~ img9 p:first + imgaucun :hidden9 img:hidden:not(.image1): acun p:contains('Bonjour'):has(span): 1 11

12 INF2005– Programmation web– A. Obaid Autres sélecteurs JQuery Sélecteurs propres à JQuery permettant de spécifier certains caractéristiques des éléments: – sel::hiddenÉléments invisibles, – sel:visibleÉléments visibles. – sel:parentÉléments qui ont des enfants. – sel:contains(texte)Éléments qui contiennent texte – sel:emptyÉléments dont le contenu est vide – sel:nth(n)n-ème élément – sel:contains('chaine'): éléments qui contiennent chaine – sel:visible: éléments visibles. – sel:hidden : les éléments caches – … 12

13 INF2005– Programmation web– A. Obaid 13 Autres sélecteurs JQuery.accentue { font-style: italic; background-color: #0f0; } $(document).ready(function() { $('span:contains(assurance)').addClass('accentue'); }); Ceci est un texte qui contient le mot assurance. Ceci est un texte qui ne contient pas ce mot. Le contrat d'assurance est decrit en termes juridiques Ici, est question par exemple de l'assurance- auto

14 INF2005– Programmation web– A. Obaid Événements dans JQuery Comme dans JavaScript, un événement est associé à un élément et pourra être programmé pour effectuer une tache désignée par une fonction. Exemple: click(), mouseover(),… Exemple: – JQuery: $(document).ready(function() { $("a").click(function() { alert("Bonjour tout le monde ! " ); }); – JavaScript: Lien 14

15 INF2005– Programmation web– A. Obaid Événements dans JQuery $(document).ready(fonction) $(sélecteur).click(fonction) $(sélecteur).dblclick(fonction) $(sélecteur).focus(fonction) $(sélecteur).mouseover(fonction) … 15

16 INF2005– Programmation web– A. Obaid Les callbacks Fonctions appelées dans d'autres. Un fonction peut avoir une autre fonction en paramètre qui sera exécutée à la fin de l’exécution de celle-ci. – Utilisé (entre autres) pour faire des animations $(document).ready(function() { $(".test").fadeOut("slow",function(){ $(this).fadeIn("slow"); }); Jq8.html 16

17 INF2005– Programmation web– A. Obaid 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

18 INF2005– Programmation web– A. Obaid La méthode html() Elle permet d'accéder ou de modifier le contenu d'un élément – selecteur.html() :pour l'accès. – selecteur.html('Code HTML'): pour la modification. Exemples: – alert($('#titre').html()); Affiche le contenuHTML de #titre. – $('#titre').html('Voici mon nouveau contenu'): Change le contenu HTML de #titre. $(document).ready(function() { $(".monPar1").html(" Au revoir ancien paragraphe "); $(".monPar3").html($(".monPar2").html()); }); jq9.html 18

19 INF2005– Programmation web– A. Obaid 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. Bonjour la gang ! $(.premier).text() ramène: Bonjour la gang ! $(.premier).html() ramène: Bonjour la gang ! jq3.html 19

20 INF2005– Programmation web– A. Obaid 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(' Encrageenlevé! '); $('#titre').replaceWith(' '+$('#titre').html()+' '); $('.premier').replaceWith(' Site UQAM '); }); jq11.html 20

21 INF2005– Programmation web– A. Obaid Les méthodes before() et after() Elles permettent d'ajouter du contenu à un élément de la page avant ou après l'élément en question. Exemple: – $('zonetexte').after(' N'oubliez de signer votre texte SVP ! '); – Ajoute un message de rappel après une zone de texte. jq10.html 21

22 INF2005– Programmation web– A. Obaid 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(' ') transformera les en: … – $('div').wrapIn(' ') transformera les en … function colorer() { $('#par.rouge').wrap(' '); $('#par.vert').wrap(' '); $('#par.bleu').wrap(' '); } jq12.html Jq12_1.html 22

23 INF2005– Programmation web– A. Obaid La méthode unwrap() Inverse de wrap(). Elle permet d' enlever la balise parent qui l'enveloppe. … $('#enveloppe').unwrap(); … Ceci est un div enveloppe avec <b> jq12.html 23

24 INF2005– Programmation web– A. Obaid 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 function viderLesBoutons(){ $('#LesBoutons button').empty(); } function viderTout(){ $('body').empty() } … Vider les boutons Un bouton vide ! Vider les le tout … Jq13.html $("button").click(function(){ $("p").remove(); } ); 24

25 INF2005– Programmation web– A. Obaid 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

26 INF2005– Programmation web– A. Obaid addClass() et removeClass() addClass() permet d'ajouter une ou plusieurs classes removeClass() permet d'enlever une ou plusieurs classes Il existe aussi removeAttr(),… pour gérer les propriétés CSS.monDiv { color: red; }.lien:hover { color: yellow; } functionajouteclasse(){ $('div:first').addClass('monDiv'); $('a').addClass('lien'); } Premier div deuxiemediv Ajouter une classe Un lien jq17.html 26

27 INF2005– Programmation web– A. Obaid La méthode css() La méthode css() permet de manipuler les propriétés CSS d'élément du code HTML – css("Propriété") retourne la valeur d'une propriété. – css("Propriété", "valeur",…) affecte la valeur à la propriété. $(#leBouton).css("width"); $("p").css("background-color","yellow"); $("p").css({"background-color":"yellow","display":"box"}); 27

28 INF2005– Programmation web– A. Obaid Modifications de propriétés CSS css() peut s'utiliser de plusieurs façons: – css('propriéte') permet de récupérer la valeur d'une propriété CSS – css('propriété','valeur') permet de définir une propriété CSS – css({apropriete1: valeur1, propriete2: valeur2,…}) permet de définir plusieurs propriétés CSS $('body').css('background-color','#0ff'); $('a').css({ borderBottom: '2px dashed #ff00ff', color: '#4Cb', paddingLeft: '4px', 'float': 'left', margin: '4px', 'letter-spacing': '2px', }) 28

29 INF2005– Programmation web– A. Obaid Modifications de propriétés CSS function accentuer(){ $("dt").addClass("accentue"); } h1 { font-size: 2.5em; margin-bottom: 0;}.accentue { font-style: italic; color:red;} Villes du monde Montreal Large, verte, vivante et dynamqiue New York Dense, pleine de grattes-ciels, passionnante, centre d'affaires Allez-y ! jq6.html 29

30 INF2005– Programmation web– A. Obaid 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..lrouge {background-color: #000; color: #fff; border : 5px solidyellow;} }.encadre { display: block; } functionjouerAvec(){ $('a').toggleClass('encadre'). toggleClass('lrouge'); } jq18.html 30

31 INF2005– Programmation web– A. Obaid Objets JQuery jQuery repose sur la fonction jQuery() appelée aussi $() qui retourne un objet jQuery. Cet objet a plusieurs méthodes: – Manipulation du DOM, de CSS, d’évènements et autres effets visuels. Exemple: – Si on désire masquer progressivement les paragraphes d’une page, on utilise : – $("p").fadeOut(); jq8.html 31

32 INF2005– Programmation web– A. Obaid 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 – $('p')[1] désigne le deuxième paragraphe. before() et after(), etc. utilisent ces indices pour déterminer la place de l'action JavaScript à effectuer. 32

33 INF2005– Programmation web– A. Obaid 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 33

34 INF2005– Programmation web– A. Obaid Sélecteurs et formulaires Il existe des sélecteurs spécifiques aux formulaires : – :checked : les boutons checkbox ou radio cochés – :selected : les options (select) sélectionnées. – :input : les éléments input d'un formulaire. – :button : les boutons. – :reset désigne les boutons reset. – :submit : les boutons submit. – :checkbox : les cases à cocher. – :radio désigne tous les boutons radio. – :text désigne tous les champs de texte. – :password les champs de mots de passes. – :hidden désigne les éléments du formulaire cachés. – … La méthode val() retourne la valeur d'un champ du formulaire. Elle permet aussi de modifier un contenu. jq16.html 34

35 INF2005– Programmation web– A. Obaid Gestion des événements On dispose de méthodes pour écouter des événements par l'utilisation de fonctions Ces méthodes ont pour nom le type de l'événement et comme argument la fonction de traitement de l'événement: element.evenement(function(){ … Code de la fonction… }); … element.evenement(); 35

36 INF2005– Programmation web– A. Obaid É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()); }); 36

37 INF2005– Programmation web– A. Obaid Événements de souris et clavier keydown : enfoncement de la touche keypress : maintien de la touche enfoncée keyup : relâchement de la touche. mousedown : appui sur la souris mouseup : relâchement de la souris click : clic de la souris. mouseenter : la souris entre au-dessus de l'élément mouseleave : la souris quitte l'élément mouseover : la souris entre au-dessus de l'élément mouseout : la souris quitte l'élément mousemove : la souris bouge sur l'élément jq22.html jq23.html 37

38 INF2005– Programmation web– A. Obaid Objet clic Correspond au clic de la souris; Possède des propretés de coordonnées: – pageX: Coordonnée X (gauche vers la droite) – pageY: Coordonnée Y (de haut vers le bas) 38

39 INF2005– Programmation web– A. Obaid Événements de fenêtre scroll : déclenché lorsque l'utilisateur utilise un ascenseur horizontal ou vertical. resize : déclenché lorsque l'utilisateur redimensionne la fenêtre. load : déclenché lorsque l'élément en question a fini de se charger (page, cadre, image, etc.). ready : déclenché lorsque la page est prête. Utilisé avec l'objet document. unload : déclenché lorsque l'utilisateur quitte la page. 39

40 INF2005– Programmation web– A. Obaid Autres événements hover() : déclenché lorsque la souris passe au-dessus d'un élément (mouseover) et quand elle s'en va (mouseout). toggle() : fonction de basculement appelée successivement pour les effets show/hide et slide). jq24.html 40

41 INF2005– Programmation web– A. Obaid 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. 41 $(document).ready(function(){ $("#montrer").click(function(){ $("#tableau").slideDown("slow"); }); jq30.html

42 INF2005– Programmation web– A. Obaid Les fonctions d'animation 42 $(document).ready(function() { $("#bascule").click(function(){ $(".texte").slideToggle( 'slow'); });.texte { width:400px; color: red;border:1px solid black; } #uneImage { width:100px; float: left; margin: 5px; } Appueyz sur le bouton pour faire appareite et disparaitre le bloc ci-dessous Basculer Quam ob rem ut ii qui superiores…. Ideo urbs venerabilis post superbas efferatarum gentium cervices oppressas latasque leges...

43 INF2005– Programmation web– A. Obaid Les méthodes pour l'animation animate() permet d'animer le style CSS. Elle a la forme suivante: animate(style, [durée], [manière], [fin]) style: formé des couples attribut/valeur définissant le style de l'élément à la fin de l'animation. durée : durée en ms de l'animation ou un symbole parmi : slow (600ms), normal (400ms), fast (200ms). manière : chaine qui détermine la façon dont les propriétés vont changer : "swing", "linear". fin: fonction appelée quand l'animation est finie. jq25.html 43

44 INF2005– Programmation web– A. Obaid Animation - Exemples 44 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"); }); Start Animation http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

45 INF2005– Programmation web– A. Obaid Animation - Exemples 45 $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"100px"},"slow"); $("div").animate({fontSize:"3em"},"slow"); }); Start Animation HELLO http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2

46 INF2005– Programmation web– A. Obaid 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 46 $(document).ready(function(){ $(".cacheMoiCa").click(function(){ $(".secret").hide("slow"); }); $(document).ready(function(){ $("p").click(function(){ $(this).hide(); });

47 INF2005– Programmation web– A. Obaid 47 Les effects de visibilité #click1{ margin:10px;padding:12px; border:2px solid blue; width: 80px; height:20px; } $(document).ready(function() { $("#click1").click(function(){ $("#div1").hide(); }); Clickez ici jq26.html jq27.html jq28.html jq29.html jq8.html bouger.html

48 INF2005– Programmation web– A. Obaid La méthode toggle() 48 #go{ border:2px solid #666; width: 40px; } $(document).ready(function() { $("#go").click(function(event){ $("#leDiv").toggle('slow'); }); Vas-y

49 INF2005– Programmation web– A. Obaid 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); });

50 INF2005– Programmation web– A. Obaid Modification de la transparence fadeTo( ) permet de changer l'opacité d'un élément en la faisant passer à un niveau donné. – fadeTo(vitesse, opacite, callback); opacity : valeur entre 0 et 1 (1 : très opaque). 50

51 INF2005– Programmation web– A. Obaid Modification de la transparence 51 $(document).ready(function() { $("#plusOpaque").click(function(){ $(".texte").fadeTo( 'slow', 0.9); }); $("#moinsOpaque").click(function(){ $(".texte").fadeTo( 'slow', 0.1); }); });.texte {width:400px; color: red; border:1px solid black;} #uneImage { width:100px; float: left; margin: 5px; } Appueyz sur le bouton pour faire appareite et disparaitre le bloc ci-dessous Opaciser Eclaircir Quam ob... Ideo urbs venerabilis post superbas...

52 INF2005– Programmation web– A. Obaid Modification de la transparence 52 $(document).ready(function() { $("#p1").fadeOut('slow'); $("#p2").fadeOut(2000, function() { $(this).fadeIn(2000); }); Mon premier paragraphe Hac ex causa conlaticia stipe Valerius humatur ille … Mon second paragraphe: Proinde die funestis interrogationibus praestituto im….

53 INF2005– Programmation web– A. Obaid La méthode animate() Permet d'animer des propriétés CSS – animate(styles, [durée], [manière], [callback]) styles: liste attribut/valeur des éléments style utilisés. durée : slow (600ms), normal (400ms), fast (200ms) ou une durée en ms. manière : façon dont les propriétés vont changer : "linear", "swing", … Le paramètre styles sous forme {propriété: "valeur",…} {width: "100", height: "200px", fontSize: "14pts"} jq25.html 53

54 INF2005– Programmation web– A. Obaid La méthode animate() 54 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"); }); Start Animation Source: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

55 INF2005– Programmation web– A. Obaid Animation - Exemples 55 $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:"100px"},"slow"); $("div").animate({fontSize:"3em"},"slow"); }); Start Animation HELLO http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation2

56 INF2005– Programmation web– A. Obaid Effets animés Pour avoir un animation progressive il faudra donner l'impression de continu Règle générale: – Durée de l'animation d'une boite égale à la différence de hauteur (à la fin de l'animation) divisée par la vitesse – La durée d'animation de la vidéo est de 25 frames/seconde (25 fps). 56