Manualjquery

1. I.U.T. 1 de Grenoble Département Réseaux & Télécommunication 2008 / 2009 Programmation Web Initiation à l'utilisation de jQuery Table des matières 1.Introduction...........................................................................................................................1 2.Les sélecteurs.........................................................................................................................2 3.Les événements......................................................................................................................3 4.Manipulation des attributs........................................................................................................3 5.Manipuler et traverser le DOM...................................................................................................5 6.Ajax......................................................................................................................................6 7.Les effets et jQuery UI.............................................................................................................8 8.Utiliser et créer un plugin jQuery...............................................................................................9 1. Introduction a) Qu'est-ce que jQuery ? jQuery est un framework qui a pour vocation de simplifier l'utilisation du langage JavaScript. Créé par John Resig, les premières expérimentations virent le jour en 2005 autour d'un concept de base : offrir à JavaScript un moyen simple de sélectionner des éléments au delà du traditionnel getElementById(). Par la suite de nombreuses fonctionnalités ont été ajoutées afin de gérer les événements JavaScript, les attributs, manipuler le DOM, créer des effets, utiliser AJAX... La liste des sites utilisant ce framework est assez impressionnante, pour n'en citer que quelques uns : Google, Twitter, Amazon, Intel, Sourceforge. jQuery s'utilise de préférences de façon non intrusive. C'est à dire bien séparé du code HTML, soit dans un script .js, soit dans la balise <head>. Il se présente sous forme d'une fonction : jQuery(selector, context) jQuery retourne un objet contenant une liste d'élément et une multitude de méthodes permettant d'agir sur ces éléments. Afin de réduire au maximum la taille des instructions, un alias de cette fonction est fourni : $(selector, context) Cela peut paraitre un peu déroutant mais le $ est bien autorisé dans le nommage des fonctions JavaScript. b) jQuery et les autres framework jQuery est loin d'être le seul framework JavaScript open source disponible sur Internet, les plus connus sont MooTools, Prototype, Dojo. Ils ont parfois des approches un peu différentes mais se ressemblent beaucoup dans les concepts. A tels points qu'ils ont tous la fâcheuse tendance à définir le même alias $. Il est donc préférable, lors de l'utilisation de plusieurs framework en même temps, d'utiliser la fonction jQuery() plutôt que $(). jQuery fourni, de plus, une méthode noConflict() permettant de désactiver ou renommer cet alias. c) Utiliser jQuery jQuery est très facile à utiliser. Il est disponible sous forme d'un script .js à charger dans le <head> : <script type="text/javascript" src="jquery.js"></script> Afin d'exécuter son code qu'une fois le chargeur DOM jQuery fourni les instructions suivantes : <script type="text/javascript"> $(document).ready(function(){ // Your code here }); </script> B.P. 1/9

2. I.U.T. 1 de Grenoble Département Réseaux & Télécommunication 2008 / 2009 Programmation Web 2. Les sélecteurs Un des gros avantages de jQuery est sa capacité à sélectionner un élément ou une liste d'élément de l'arbre DOM bien au delà des fonctions JavaScript traditionnelles. Afin de simplifier la prise en main du framework, les développeurs de jQuery ont choisi d'utiliser la méthode de sélection de CSS3. Autrement dit, sélectionner un élément ou une liste d'élément avec jQuery se fait de la même manière que dans une feuille de style. La méthode each(fn) permet de parcourir la liste d'éléments retourné par un sélecteur. Il s'agit d'une méthode de base utilisée par beaucoup d'autres méthodes du framework. Elle attend une fonction comme argument soit par référence, soit en déclarant la fonction à la volée comme il est de coutume dans l'utilisation de jQuery. Voici la syntaxe : $(selector).each(function(){ // Code here }); Au sein de cette fonction, this contient l'élément HTML courent et $(this) constitue un sélecteur à partir de cette élément. Documentation de références : http://docs.jquery.com/Selectors a) Javascript vs jQuery Code Javascript Equivalent jQuery document.getElementById("MyElement") $("#MyElement") document.getElementsByTagName("input") $("input") document.getElementsByName("MyName") $("[name=MyName]") document.getElementsByTagName("input")[2] $("input:eq(2)") b) Exemples Afin de visualiser plus simplement la sélection des éléments nous allons utiliser une méthode jQuery appelée addClass. Son rôle est d'ajouter une classe aux éléments sélectionnés. La feuille css comporte des règles background-color associées à chaque classe. Code HTML Code jQuery <table> <tr id="ligne1"> $("#ligne1").addClass("myClassBlue"); <td class="colonne1"> </td> $(".colonne1").addClass("myClassYellow"); <td class="colonne2"> </td> $("#ligne1 > .colonne1").addClass("myClassGreen"); <td class="colonne3"> </td> $("td:last").addClass("myClassRed"); <td class="colonne4"> </td> $("a[name=lien]").addClass("myClassRed"); </tr> <tr id="ligne2"> Résultat <td class="colonne1"> </td> <td class="colonne2"> <a name="lien" href="#">Lien</a> </td> <td class="colonne3"> </td> <td class="colonne4"> </td> </tr> <tr id="ligne3"> <td class="colonne1"> </td> <td class="colonne2"> </td> <td class="colonne3"> </td> <td class="colonne4"> </td> </tr> <tr id="ligne4"> <td class="colonne1"> </td> <td class="colonne2"> </td> <td class="colonne3"> </td> <td class="colonne4"> </td> </tr> </table> B.P. 2/9

3. I.U.T. 1 de Grenoble Département Réseaux & Télécommunication 2008 / 2009 Programmation Web 3. Les événements jQuery fourni dans son API tout un jeu de méthodes permettant de lier des actions à des événements particuliers : par exemple au survol de la souris, lors d'un click ou la pression d'une touche. On pourra facilement faire le parallèle avec les attributs HTML onclick, onmouseover, onkeypress etc. Ces fonctions s'utilisent en association avec les sélecteurs sous la forme : $("#MyElement").click(); Cet exemple place un événement onclick sur l'élément dont l'id est MyElement. Tous les événements gérés par JavaScript on leur équivalent dans l'API de jQuery mais pas seulement. La méthode hover() permet de gérer en une seule fois les événements onmouseover et onmouseout. De même la méthode toggle() permet d'alterner 2 fonctions sur un événement onclick. Enfin one() permet de déclencher un événement qu'une seule fois. Autre différence notable, les méthodes jQuery permettent à plusieurs scripts différents de définir un événement sur le même élément. Par exemple en JavaScript, si exécute 2 fois l'instruction .onclick = ... sur un même élément, la 2ième exécution va remplacer la 1ère alors qu'avec jQuery les instructions .click( ... ) s'ajoutent. On pourra aussi supprimer toutes les actions placés sur un événement grâce à la fonction unbind(). Documentation de références : http://docs.jquery.com/Events a) Javascript vs jQuery Code Javascript Equivalent jQuery document.getElementById("MyElement").onclick = function() $("#MyElement").click( function() { alert("welcome"); } { alert("welcome"); } ) b) Exemples Code HTML <button id="button1">alert() à chaque double click</button> <button id="button2">alert() au premier click</button> <button id="button3">Activer / Désactiver alert() keycode</button> Code jQuery Résultat $("#button1").dblclick(function(){ alert( "Double Click !" ); }); $("#button2").one("click",function(){ alert( "One click !" ); - Le double click sur le 1er bouton affiche un message }); d'alerte $("#button3").toggle( function(){ alert( "Appuyer sur une touche" ); - Le 1er click sur le 2ième bouton affiche un message $("body").keydown(function(e){ d'alerte, les suivants n'affiche rien alert( 'keyCode = ' + e.keyCode ); return false; - Le click sur le dernier bouton active et désactive }); }, alternativement un bind sur la pression d'une touche où que function(){ l'on soit dans la page (si actif, à chaque pression de touche $("body").unbind("keydown"); un message d'alerte affiche le keyCode correspondant). } ); 4. Manipulation des attributs La méthode jQuery attr() permet de lire et écrire les attributs HTML du/des élément(s) sélectionné(s) grâce aux sélecteurs : • attr( myAttr ) permet de récupérer la valeur de l'attribut myAttr. • attr( myAttr, myValue ) permet de définir la valeur de l'attribut myAttr avec la valeur myValue. B.P. 3/9

4. I.U.T. 1 de Grenoble Département Réseaux & Télécommunication 2008 / 2009 Programmation Web Une fois encore l'API de jQuery permet d'aller plus loin dans la gestion des attributs. Nous avons précédemment utilisé la fonction addClass(). Cette méthode fait parti d'une série (removeClass, toggleClass) permettant de manipuler l'attribut class: . L'utilisation de ces fonctions permet d'ajouter ou supprimer des classes a un élément sans se soucier de son état initial. Ainsi l'élément <p class="myClass1"> associé au code $("p").addClass("myClass2") est équivalent à l'élément <p class="myClass1 myClass2"> alors qu'en l'associant au code $ ("p").attr("class","myClass2") cela équivaudrait à l'élément <p class="myClass2"> De même la méthode css() permet de manipuler l'attribut style : • css( styleName ) permet de récupérer la valeur du style styleName. • css( styleName, myValue ) permet de définir la valeur du style styleName avec la valeur myValue. La récupération de la valeur du style est particulièrement intéressante car jQuery récupère la valeur réelle du style en tenant compte des feuilles de style et des styles hérités. Enfin la méthode val() permet de manipuler la valeur des champs de formulaire, soit l'attribut HTML value : • val() permet de récupérer la valeur d'un champ de formulaire. Elle retourne un tableau de valeur si l'élément est un select multiple. • val( myValue ) permet de définir la valeur d'un champ de formulaire. • Val( [ myValue1, myValue2 ] ) permet de définir plusieurs valeurs d'un champ de formulaire par exemple pour les checkbox ou les select multiple. Attention ! Curieusement cette méthode ne permet pas de récupérer la valeur des checkbox et des boutons radio sélectionné. Il faudra pour cela utiliser la pseudo-classe : checked au niveau sélecteur par exemple : $("input[name=radio1]:checked").val(). Documentation de références : http://docs.jquery.com/Attributes / http://docs.jquery.com/CSS a) Javascript vs jQuery Code Javascript Equivalent jQuery document.getElementById("MyElement").value = "myValue" $("#MyElement").val("myValue") document.getElementById("MyElement").class = "myClass" $("#MyElement").addClass("myClass") document.getElementById("MyElement").setAttribute("align" $("#MyElement").attr("align","center") ,"center") b) Exemples Code HTML <button id="button1">-</button> <button id="button2">+</button> <button id="button3">Permutter l'alignement</button> <button id="button4">Bold</button> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quam orci, rutrum eu rutrum quis, tincidunt vitae risus. Donec tempus ipsum in turpis aliquet sit amet malesuada eros accumsan. Vestibulum ipsum elit, auctor in suscipit non, dictum at eros. Vestibulum bibendum eros vel eros fermentum vitae egestas lectus dignissim. Donec sagittis ultrices mollis.</p> Code jQuery $("#button1").click(function(){ var height = parseInt($("#exemples p").css("height")) – 20; $("#exemples p").css("height", height + "px"); var width = parseInt($("#exemples p").css("width")) – 20; $("#exemples p").css("width", width + "px"); }); $("#button2").click(function(){ var height = parseInt($("#exemples p").css("height")) + 20; $("#exemples p").css("height", height + "px"); var width = parseInt($("#exemples p").css("width")) + 20; $("#exemples p").css("width", width + "px"); }); B.P. 4/9

5. I.U.T. 1 de Grenoble Département Réseaux & Télécommunication 2008 / 2009 Programmation Web $("#button3").toggle( function(){ $("#exemples p").attr("align", "center"); }, function(){ $("#exemples p").attr("align", "right"); }, function(){ $("#exemples p").attr("align", "justify"); }, function(){ $("#exemples p").attr("align", "left"); } ); $("#button4").click(function(){ $(this).toggleClass("myBold"); $("#exemples p").toggleClass("myBold"); }); Résultat - Les boutons « + » et « - » augmente et diminue la taille de la balise <p>. - Le bouton suivant permute l'alignement du texte. - Le dernier alterne mise en en gras ou non du texte. 5. Manipuler et traverser le DOM jQuery simplifie grandement la manipulation du DOM, d'une part grâce à la sélection aisé d'un élément (vu précédemment) et d'autre part en fournissant la méthode html() permettant de lire et écrire le contenu de cet élément : • $("#myElement").html() retourne le contenu de l'élément dont l'id est myElement. • $("#myElement").html( myHTML ) remplace le contenu de l'élément dont l'id est myElement avec le code HTML myHTML. text() est une méthode variante de html(), elle s'utilise de la même manière avec la particularité de supprimer toutes les balises HTML du contenu. Afin d'aller un peu plus loin dans la manipulation du DOM jQuery fournit des méthodes tel que append(), prepend(), after() et before() permettant non pas de replacer mais d'ajouter du contenu respectivement à la fin, au début, après et avant le/les élément(s) sélectionné(s). Traverser le DOM consiste à parcourir des parents / enfants de l'arbre DOM à partir d'un point précis. Ainsi la méthode parent() retourne l'élément parent d'un sélecteur donné et la méthode children( mySelector ) les enfants sachant qu'il est possible de filtrer les enfants grâce à un sélecteur mySelector. find() fonctionne de la même manière que children() à la différence qu'elle retourne tous les descendants et pas seulement les enfants. next() et prev() quand à elle retourne respectivement l'élément juste après et juste avant. Documentation de références : http://docs.jquery.com/Manipulation / http://docs.jquery.com/Traversing a) Javascript vs jQuery Code Javascript Equivalent jQuery document.getElementById("MyDiv").innerHTML = "myHTML" $("#MyDiv").html("myHTML") document.getElementById("MyDiv").firstChild.nodeValue = "myText" $("#MyDiv").text("myHTML") var myText = document.createTextNode(texte); $("body").append("myText") document.getElementsByTagName("body")[0].appendChild(myText); B.P. 5/9

6. I.U.T. 1 de Grenoble Département Réseaux & Télécommunication 2008 / 2009 Programmation Web b) Exemples Code HTML <p><b><i>Lorem ipsum</i></b> dolor sit amet, consectetur adipiscing elit.</p> <p>Ut quam orci, rutrum eu rutrum quis, <i>tincidunt vitae risus.</i></p> <p><i>Donec tempus ipsum</i> in turpis aliquet sit amet malesuada <i>eros accumsan</i>.</p> <p><b>Vestibulum ipsum</b> elit, <i>auctor in suscipit non</i>, dictum at eros.</p> Code jQuery Résultat $("#exemples").dblclick(function(){ if($("#exemples pre")[0]){ $(this).html( $(this).text() ); } else { $(this).text( $(this).html() ); $(this).wrapInner("<pre></pre>"); } }); - Le double click sur le texte affiche la source $("#exemples p b").hover( html et vise versa. function(){ $(this).parent().append("<b> <--</b>"); - Au survol des textes en gras, une flèche est }, affichée en gras juste avant la balise </p> function(){ - Au survol de chaque ligne, les textes en $(this).parent().children("b:last").remove(); italique à l'intérieur de la ligne sont transformé } en majuscule. ); $("#exemples p").mouseenter(function(){ $(this).find("i").each(function(){ $(this).html($ (this).html().toUpperCase()); }); }); 6. Ajax AJAX est un acronyme signifiant Asynchronous JavaScript and XML. Il ne s'agit pas d'une technologie mais d'une méthodologie qui consiste, au travers de l'objet JavaScript XMLHttpRequest, de créer un dialogue XML entre une page HTML et un serveur PHP (ou autres) sans à avoir à recharger la page. Le format XML étant un peu fastidieux à traiter avec JavaScript il est souvent remplacé par le format de sérialisation JSON ou plus simplement par des échanges PLAIN TEXT. Au final, Ajax a lancé une mode mais la méthodologie est rarement suivie à la lettre. Pour des raisons de sécurités l'objet XMLHttpRequest ne permet pas de faire des requêtes en dehors de son domaine. Afin de contourner se problème jQuery utilise la balise <script> qui permet de charger du code JavaScript venant d'un autre domaine mais le code retourné par le serveur doit impérativement être du code JavaScript. Récemment une méthodologie, appelée JSONP, à vu jour pour rendre transparent l'utilisation de la balise <script> dans le cas d'un retour de chaine JSON. Cela nécessite un support au niveau serveur avec appel d'une fonction de callback mais au final la méthode ajax() retourne une chaine comme si le script était sur le même domaine. Comme toujours, jQuery fourni un certain nombre de méthodes permettant d'utiliser Ajax en toute simplicité. La méthode ajax() permet de répondre à la plus part des besoins. Cette dernière provient directement de $ et non d'un sélecteur. Elle s'utilise simplement par un appel de type $.ajax(). De nombreux paramètres sont disponible, voici les principaux : • type défini la méthode d'envoi : "POST", "GET" • dataType défini le type de donnée retourné par le serveur : "xml", "html", "script", "json", "jsonp", "text" • url défini la page du serveur à appeler : "script.php" • data défini les valeurs à envoyer : "param1=valeur1&param2=valeur2" ou {param1:valeur1, param2:valeur2} • success défini une fonction de callback exécutée au succès de la requête : function(data, textType) où data contient les données retournés par le serveur et textType le type de ces données. • error défini une fonction de callback exécutée en cas d'erreur de la requête : function(XMLHttpRequest, textStatus, errorThrown) où textStatus contient le type d'erreur et errorThrown un object de type exception. Documentation de références : http://docs.jquery.com/Ajax B.P. 6/9

7. I.U.T. 1 de Grenoble Département Réseaux & Télécommunication 2008 / 2009 Programmation Web a) Exemples Code HTML <input type="text"> <button id="button1">Traduire !</button> <button id="button2">Ajax Erreur 404</button> Code jQuery $("#button1").click(function(){ var texte = encodeURIComponent( $("#exemples input[type=text]").val() ); $.ajax( { type: "GET", url: "http://ajax.googleapis.com/ajax/services/ language/translate", data: "v=1.0&langpair=fr|en&q=" + texte, dataType: "jsonp", success: function(retour){ $("#exemples div").remove(); $("#exemples").append( "<div>" + retour['responseData']['translatedText'] + "</div>" ); $("#exemples div").css("font-weight","bold"); } }); }); $("#button2").click(function(){ $.ajax( { type: "GET", url: "naz.php", error: function(XMLHttpRequest){ var message = ''; for( i in XMLHttpRequest ) message += i + ' = ' + XMLHttpRequest[i] + 'n'; alert(message); } }); }); Résultat - Le bouton « Traduire ! » traduit en anglais le texte rentré dans le champ texte. - Le bouton « Ajax Erreur 404 » appel une page inexistant et affiche le contenu de l'objet XMLHttpRequest sur le retour d'erreur. 7. Les effets et jQuery UI Jusqu'à lors, les méthodes présentées étaient en lien direct avec JavaScript, leurs but étant de simplifier les choses. Mais au final, le résultat n'était pas si éloigné de ce que l'on peut faire en JavaScript traditionnel. Dans cette partie, les méthodes sont beaucoup plus atypiques. On pourrait presque les apparenter à des minis applications : elles ont, pour la plus part, des paramètres de configuration et le point commun de bousculer les règles de l'esthétisme et de l'ergonomie. C'est en général ce genre de méthodes qui font la réputation d'un tel framework. jQuery permet de réaliser des effets visuels lors du changement d'état d'un élément ( affichage, masquage, déplacement... ) : fadeIn(), fadeOut() et fadeTo() réalisent des effets de fondu sur un élément respectivement lors de l'affichage, du masquage et vers un état personnalisé. De même slideUp() et sildeDown() réalisent des effets de glissières sur les éléments. Enfin la méthode animate() permet, d'une façon plus générale, de réaliser automatiquement des effets de transition entre 2 états d'un élément. Cette méthode est beaucoup plus complète de part sa multitude de paramètres de configuration mais aussi beaucoup plus complexe à utiliser. jQuery UI est un projet annexe qui a pour vocation de compléter l'api de jQuery au niveau des effets visuel et des interactions utilisateurs. Il fournit de plus un certain nombre de widgets d'utilisation courante. Son utilisation nécessite le chargement d'une librairie supplémentaire. B.P. 7/9

8. I.U.T. 1 de Grenoble Département Réseaux & Télécommunication 2008 / 2009 Programmation Web Les méthodes d'interactions utilisateurs permettent de déplacer, trier, redimensionner des éléments simplement avec la souris, au même titre qu'on peut le faire avec les fenêtres de son système d'exploitation. Ainsi draggable() permet en toute simplicité à un élément d'être déplacé à l'aide de la souris. droppable() permet de déclencher une fonction de callback au contact d'un élément draggable avec lui-même. Enfin resizable() permet à un élément d'être redimensionner. La méthode sortable() quand à elle interagi avec des listes HTML de type <ul> et <ol> pour les rendre triable. Au niveau des effets, jQuery UI fourni une méthode effect() disposant d'une quinzaine d'effets plus ou moins originaux à passer en paramètre. Cela permet notamment de faire exploser, clignoter ou bouger un élément. Documentation de références : http://docs.jquery.com/Effects / http://docs.jquery.com/UI a) Exemples Code HTML <button id="button1"><<</button> <button id="button2">Masquer</button> <button id="button3">>></button> <div></div> Code jQuery Résultat $("#button1").click(function(){ $("#exemples div").animate({"left": "-=50px"}, "slow"); }); $("#button2").toggle( function(){ $("#exemples > div").fadeOut("slow"); $(this).html("Afficher"); }, function(){ $("#exemples div").fadeIn("slow"); $(this).html("Masquer"); } ); - Le 1er et le dernier bouton déplacent le $("#button3").click(function(){ div à gauche et à droite $("#exemples div").animate({"left": "+=50px"}, "slow"); }); - Le bouton du milieu affiche ou masque $("#exemples div").draggable(); le div avec un effet de fondu - Enfin le div peut être déplacé n'importe où grâce à la souris. 8. Utiliser et créer un plugin jQuery jQuery référence sur son site internet des centaines de plugins poussant javascript au plus loin de ses capacités. Ils sont triés par catégories et dispose bien souvent de démonstration. Il s'avère assez intéressant de les parcourir pour ce rendre compte de toutes les capacités du framework et parfois donner des idées. Les plugins ajoutent des méthodes aux sélecteurs ou agissent directement sur le DOM. Selon leur complexité, ils peuvent disposer d'une documentation propre. Leur installation est souvent simple : un script js à charger dans le <head> et éventuellement une css et des images. jQuery est structuré de telle sorte que les plugins ne rentrent rarement en conflit, à moins qu'ils ajoutent une méthode du même nom. Il est important, avant d'utiliser un plugin, de s'assurer que ce dernier est bien maintenu par ses développeurs : jQuery est un projet très actif et il n'est pas rare de voir des vieux plugins être incompatibles avec les nouvelles versions du framework. La création d'un plugin jQuery est relativement simple. Il suffit de rajouter une méthode à l'objet jQuery.fn ou $.fn pour que cette dernière devienne disponible via n'importe quel sélecteur. Ainsi, par exemple, le plugin : $.fn.test = function(){ $(this).addClass("myClassBlue"); } B.P. 8/9

9. I.U.T. 1 de Grenoble Département Réseaux & Télécommunication 2008 / 2009 Programmation Web ajoute une class myClassBlue à tous les éléments sélectionnés. Il s'utilise comme ceci : $("myElement").test(); Documentation de références : http://docs.jquery.com/Plugins/Authoring a) Exemples Code HTML Code jQuery <table> $.fn.damier = function(color){ <tr> if(!color) color = "blue"; <td> </td><td> </td> $(this).children("tr:even > td:odd, tr:odd > <td> </td><td> </td> td:even").css("background-color", color); </tr> } <tr> $("table").damier("lightGray"); <td> </td><td> </td> <td> </td><td> </td> Résultat </tr> <tr> <td> </td><td> </td> <td> </td><td> </td> </tr> <tr> <td> </td><td> </td> <td> </td><td> </td> </tr> </table> B.P. 9/9

Manualjquery

Manualjquery

Manualjquery

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Destacado

Destacado(20)

Similar a Manualjquery

Similar a Manualjquery(20)

Manualjquery