Module M2105 Programmation jquery IUT de Béziers, dépt. R&T 2015-2017 http://www.borelly.net/ Christophe.BORELLY@iutbeziers.fr
Généralités jquery est une bibliothèque JavaScript libre et multi-plateforme Facilite l'écriture de scripts côté client Créée par John RESIG (janvier 2006) Taille environ 100 Ko (minifyed) 20/04/17 M2105 - cb@iutbeziers.fr 2/30
Utilisation <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <script src="jquery-x.yy.z.min.js"></script> <link rel="stylesheet" href="style.css"/> </head> <body>... <script> $(document).ready(function(){ // Le code jquery se place ici! }); </script> </body> </html> 20/04/17 M2105 - cb@iutbeziers.fr 3/30
Syntaxe $(selecteur) ou jquery(selecteur) permet d'obtenir des objets jquery auxquels on peut appliquer des méthodes cumulables (toutes les méthodes renvoient un objet jquery) $(this) est l'objet «courant» (souvent utilisé dans des fonctions) $(document) représente le document $(window) représente la fenêtre du navigateur 20/04/17 M2105 - cb@iutbeziers.fr 4/30
Sélecteurs (1) Si le sélecteur est une chaîne, permet de récupérer les éléments comme en CSS $("div") correspond à tous les tags div du document $("#msg") correspond au tag dont l'attribut id="msg" du document $(".val") correspond à tous les tags dont l'attribut class="val" 20/04/17 M2105 - cb@iutbeziers.fr 5/30
Sélecteurs (2) $("*") tous les éléments $("a[href]") tous les éléments a possédant un attribut href $("[size=20]") tous les éléments possédant un attribut size="20" $("input:radio") tous les éléments input de type="radio" $("p:first") Le premier paragraphe $("tr:even") Toutes les lignes paires $("ul li:first-child") Le premier enfant li de toutes les listes ul $("p > span") Tous les span à l intérieur d'un paragraphe p $("p + div") Tous les div suivants un paragraphe p 20/04/17 M2105 - cb@iutbeziers.fr 6/30
Objet(s) sélectionné(s) La propriété length permet de connaître le nombre d'éléments sélectionnés par jquery (s'il y en a plusieurs) On peut aussi utiliser la méthode size() Pour obtenir un DOMNode (pas un objet jquery), on peut soit utiliser la méthode get() soit se servir des [] : var obj=$("p"); console.debug("nombre de paragraphes : " +obj.length); // $(obj).size() var p1=$(obj).get(0); // Premier paragraphe var p2=obj[2]; // 3ème paragraphe... 20/04/17 M2105 - cb@iutbeziers.fr 7/30
Attributs attr() utilisée avec un seul argument permet d'obtenir la valeur de l'attribut du premier élément sélectionné var src1=$("#img1").attr("src"); Avec 2 arguments, cela ajoute/modifie l'attribut $("#img1").attr("title","titre de l'image"); removeattr() permet de supprimer un attribut $("#img1").removeattr("title"); 20/04/17 M2105 - cb@iutbeziers.fr 8/30
Les classes addclass() ajoute une valeur à l'attribut class removeclass() enlève la valeur à l'attribut class toggleclass() ajoute/supprime une valeur à l'attribut class hasclass() détermine si la valeur est présente dans l'attribut class $("div").toggleclass("select"); 20/04/17 M2105 - cb@iutbeziers.fr 9/30
Style CSS css() permet de récupérer (ou modifier) les attributs CSS. var color=$("#div1").css("background-color"); $("p").css({"font-familly":"sans-serif", "color":"red", "background-color":color}); 20/04/17 M2105 - cb@iutbeziers.fr 10/30
Valeurs text() renvoi le texte concaténé de tous les éléments et descendants (ou change le texte) html() renvoi tout le contenu HTML (ou change le contenu) val() renvoi la valeur de l'attribut value (ou modifie la valeur) var user=$("#user").val(); $("#btn").text("déconnecter "+user); 20/04/17 M2105 - cb@iutbeziers.fr 11/30
Propriétés Utile pour les éléments sélectionnables (checkbox, radio, select, ) Avant jquery 1.6, possible différence entre attr() et prop(). if ($("#chk1").prop("checked")) Autre écriture avec is() : if ($("#chk1").is(":checked")) Effacement avec removeprop() 20/04/17 M2105 - cb@iutbeziers.fr 12/30
Tailles width() et height() renvoient (ou modifient) la largeur ou la hauteur de l'élément innerwidth() et innerheight() intègrent le padding mais pas border outerwidth() et outerheight() intègrent le padding et border (margin en option) 20/04/17 M2105 - cb@iutbeziers.fr 13/30
Position offset() renvoie (ou modifie) la position dans le document Le résultat (ou le paramètre) est un objet avec les propriétés left (valeur x) et top (valeur y) var pos=$("#div").offset(); $("#div").offset({left:50,top:80}); position() renvoie (ou modifie) la position relativement au parent 20/04/17 M2105 - cb@iutbeziers.fr 14/30
Modifications Opération sur les éléments sélectionnés : after(), before(), append(), prepend() replacewith(), wrap(), wrapall(), wrapinner() clone() copie l'élément (en option, copie aussi les données et événements jquery) remove(), detach() (garde les associations jquery en vue d'une réinsertion) empty() vide le contenu $("#msg").append("hello<br/>"); 20/04/17 M2105 - cb@iutbeziers.fr 15/30
Opérations inverses Opération sur les éléments spécifiés en paramètre : insertafter(), insertbefore(), appendto(), prependto() replaceall() $("<br/>").appendto("#msg"); $("<img/>").text("src","pdf.jpg").insertafter("p"); $("<h3/>").replaceall("li"); 20/04/17 M2105 - cb@iutbeziers.fr 16/30
Événements On peut définir les actions réalisées pour un événement particulier (Voir aussi on()) : Souris : click(), dblclick(), mouseenter(), mouseleave(),... Clavier : keypress(), keydown(), keyup() Formulaires : submit(), change(), focus(), blur(), Fenêtre : load(), unload(), resize(), scroll(),... 20/04/17 M2105 - cb@iutbeziers.fr 17/30
Exemples $("#target").click(cbclick); $("#target2").click(function() { console.log("click sur "+$(this).text()); }); $("#target3").click(function(){ cbclick3($(this)); });... function cbclick() { console.log("click!"); } function cbclick3(obj) { console.log("click "+$(obj).text()); } 20/04/17 M2105 - cb@iutbeziers.fr 18/30
Objet event Permet d'obtenir la position de la souris lors de l'événement : $(window).click(function(event) { console.log("pos. : "+ event.pagex+","+event.pagey); }); D'autres propriétés sont accessibles suivant le contexte : altkey, bubbles, button, cancelable, charcode, clientx, clienty, ctrlkey, currenttarget, data, detail, eventphase, metakey, offsetx, offsety, originaltarget, pagex, pagey, relatedtarget, screenx, screeny, shiftkey, target, view, which,... 20/04/17 M2105 - cb@iutbeziers.fr 19/30
filtrage filter(), has(), eq(), not(), slice() permettent de réduire le nombre d'éléments sélectionnés : var ligne1sur2=$("tr").filter(":even"); On peut sélectionner en fonction de l'indice quand la fonction renvoi «vrai» : var ligne1sur3=$("tr").filter( function(index) {return index%3===0;}); 20/04/17 M2105 - cb@iutbeziers.fr 20/30
Recherche find() permet de rechercher dans les descendants first(), last(), next(), prev() renvoi le premier, le dernier, le suivant ou le précédent élément parent(), parents(), children(), siblings() var objs=$("div").find("span.code").next().children(); 20/04/17 M2105 - cb@iutbeziers.fr 21/30
Itérations each() permet d'appliquer une fonction à chaque élément sélectionné : $("div").each(function(){ console.log("id : "+$(this).attr("id")); }); Possibilité d'utiliser 2 arguments (this==element) : $("div").each(function(index,element){... }); 20/04/17 M2105 - cb@iutbeziers.fr 22/30
Animations hide(), show() et toggle() cache ou affiche les éléments sélectionnés slideup(), slidedown(), slidetoggle() idem avec un effet de glissement fadein(), fadeout(), fadeto(), fadetoggle() idem avec un effet de transparence animate() permet de modifier les propriétés CSS (possibilité de +=, -=, etc) 20/04/17 M2105 - cb@iutbeziers.fr 23/30
AJAX Asynchronous JavaScript And XML Requête HTTP Asynchrone permettant d'envoyer ou recevoir des données pour «dynamiser» le document Utilise l'objet XMLHttpRequest Créé en 1998 par Microsoft comme un composant ActiveX et ajouté au JavaScript des navigateurs (ECMAScript - European Computer Manufacturers Association) à partir de 2002 20/04/17 M2105 - cb@iutbeziers.fr 24/30
AJAX et JSON Maintenant, on utilise plutôt le format JSON (JavaScript Object Notation) pour recevoir des données à la place de XML. Un objet JavaScript est défini avec des {} et contient des propriétés et des valeurs : var obj={prenom:"john",nom:"doe"}; obj.age=42; obj.infos=[5.2,10,"10h45"]; //Tableau 20/04/17 M2105 - cb@iutbeziers.fr 25/30
AJAX en JS var request=new XMLHttpRequest(); request.onreadystatechange=function() { console.log("ajax("+request.readystate +","+request.status+")..."); if (request.readystate==4 && request.status==200) { var type=request.getresponseheader("content-type"); console.log("content-type ["+type+"]"); if (type.match(/application\/json/)) { var jsonobj=json.parse(request.responsetext);... } } } request.open("get","http://example.com/ajax.php"); request.send(); 20/04/17 M2105 - cb@iutbeziers.fr 26/30
AJAX avec jquery var jsonquery={"lang":"fr"}; $.ajax({ url : "http://example.com/ajax.php", data : jsonquery, method : "GET", datatype : "json" }).done(function(jsonobj) { console.log("ajax OK...");... }).fail(function() {... }); 20/04/17 M2105 - cb@iutbeziers.fr 27/30
JSON en PHP <?php header('access-control-allow-origin: *'); header('content-type: application/json; charset=utf-8'); $data=array('i1'=>1,'i2'=>2, 'i3'=>array('i4'=>4, 'i5'=>array('i6'=>6) )); echo json_encode($data); exit(0);?> 20/04/17 M2105 - cb@iutbeziers.fr 28/30
Cross-Origin Resource Sharing Permet d'ajouter l'entête CORS pour l'url fournie dans le paramètre q : <?php header('access-control-allow-origin: *'); header('content-type: application/json; charset=utf-8'); if (array_key_exists('q',$_get)) { $content=file_get_contents($_get['q']); if ($content!=false) echo $content; } exit(0);?> 20/04/17 M2105 - cb@iutbeziers.fr 29/30
Références https://jquery.com/ http://api.jquery.com/ http://www.w3schools.com/jquery/ http://www.w3schools.com/jquery/trysel.asp 20/04/17 M2105 - cb@iutbeziers.fr 30/30