Sie sind auf Seite 1von 9

I.U.T.

1 de Grenoble Dpartement Rseaux & Tlcommunication Programmation Web

2009 / 2010

Initiation l'utilisation de jQuery


Table des matires
1.Introduction........................................................................................................................... 1 2.Les slecteurs.........................................................................................................................2 3.Les vnements...................................................................................................................... 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 crer 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 premires exprimentations virent le jour en 2005 autour d'un concept de base : offrir JavaScript un moyen simple de slectionner des lments au del du traditionnel getElementById(). Par la suite de nombreuses fonctionnalits ont t ajoutes afin de grer les vnements JavaScript, les attributs, manipuler le DOM, crer 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 prfrences de faon non intrusive. C'est dire bien spar du code HTML, soit dans un script .js, soit dans la balise <head>. Il se prsente sous forme d'une fonction : jQuery(selector, context) jQuery retourne un objet contenant une liste d'lment et une multitude de mthodes permettant d'agir sur ces lments. Afin de rduire au maximum la taille des instructions, un alias de cette fonction est fourni : $(selector, context) Cela peut paraitre un peu droutant 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 diffrentes mais se ressemblent beaucoup dans les concepts. A tels points qu'ils ont tous la fcheuse tendance dfinir le mme alias $. Il est donc prfrable, lors de l'utilisation de plusieurs framework en mme temps, d'utiliser la fonction jQuery() plutt que $(). jQuery fourni, de plus, une mthode noConflict() permettant de dsactiver ou renommer cet alias. c) Utiliser jQuery jQuery est trs 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'excuter 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

I.U.T. 1 de Grenoble Dpartement Rseaux & Tlcommunication Programmation Web

2009 / 2010

2. Les slecteurs
Un des gros avantages de jQuery est sa capacit slectionner un lment ou une liste d'lment de l'arbre DOM bien au del des fonctions JavaScript traditionnelles. Afin de simplifier la prise en main du framework, les dveloppeurs de jQuery ont choisi d'utiliser la mthode de slection de CSS3. Autrement dit, slectionner un lment ou une liste d'lment avec jQuery se fait de la mme manire que dans une feuille de style. La mthode each(fn) permet de parcourir la liste d'lments retourn par un slecteur. Il s'agit d'une mthode de base utilise par beaucoup d'autres mthodes du framework. Elle attend une fonction comme argument soit par rfrence, soit en dclarant la fonction la vole 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'lment HTML courent et $(this) constitue un slecteur partir de cette lment. Documentation de rfrences : http://docs.jquery.com/Selectors a) Javascript vs jQuery Code Javascript
document.getElementById("MyElement") document.getElementsByTagName("input") document.getElementsByName("MyName") document.getElementsByTagName("input")[2]

Equivalent jQuery
$("#MyElement") $("input") $("[name=MyName]") $("input:eq(2)")

b) Exemples Afin de visualiser plus simplement la slection des lments nous allons utiliser une mthode jQuery appele addClass. Son rle est d'ajouter une classe aux lments slectionns. La feuille css comporte des rgles background-color associes chaque classe. Code HTML
<table> <tr id="ligne1"> <td class="colonne1">&nbsp;</td> <td class="colonne2">&nbsp;</td> <td class="colonne3">&nbsp;</td> <td class="colonne4">&nbsp;</td> </tr> <tr id="ligne2"> <td class="colonne1">&nbsp;</td> <td class="colonne2"> <a name="lien" href="#">Lien</a> </td> <td class="colonne3">&nbsp;</td> <td class="colonne4">&nbsp;</td> </tr> <tr id="ligne3"> <td class="colonne1">&nbsp;</td> <td class="colonne2">&nbsp;</td> <td class="colonne3">&nbsp;</td> <td class="colonne4">&nbsp;</td> </tr> <tr id="ligne4"> <td class="colonne1">&nbsp;</td> <td class="colonne2">&nbsp;</td> <td class="colonne3">&nbsp;</td> <td class="colonne4">&nbsp;</td> </tr> </table>

Code jQuery
$("#ligne1").addClass("myClassBlue"); $(".colonne1").addClass("myClassYellow"); $("#ligne1 > .colonne1").addClass("myClassGreen"); $("td:last").addClass("myClassRed"); $("a[name=lien]").addClass("myClassRed");

Rsultat

B.P.

2/9

I.U.T. 1 de Grenoble Dpartement Rseaux & Tlcommunication Programmation Web

2009 / 2010

3. Les vnements
jQuery fourni dans son API tout un jeu de mthodes permettant de lier des actions des vnements particuliers : par exemple au survol de la souris, lors d'un click ou la pression d'une touche. On pourra facilement faire le parallle avec les attributs HTML onclick, onmouseover, onkeypress etc. Ces fonctions s'utilisent en association avec les slecteurs sous la forme : $("#MyElement").click(); Cet exemple place un vnement onclick sur l'lment dont l'id est MyElement. Tous les vnements grs par JavaScript on leur quivalent dans l'API de jQuery mais pas seulement. La mthode hover() permet de grer en une seule fois les vnements onmouseover et onmouseout. De mme la mthode toggle() permet d'alterner 2 fonctions sur un vnement onclick. Enfin one() permet de dclencher un vnement qu'une seule fois. Autre diffrence notable, les mthodes jQuery permettent plusieurs scripts diffrents de dfinir un vnement sur le mme lment. Par exemple en JavaScript, si excute 2 fois l'instruction .onclick = ... sur un mme lment, la 2ime excution va remplacer la 1re alors qu'avec jQuery les instructions .click( ... ) s'ajoutent. On pourra aussi supprimer toutes les actions placs sur un vnement grce la fonction unbind(). Documentation de rfrences : http://docs.jquery.com/Events a) Javascript vs jQuery Code Javascript
document.getElementById("MyElement").onclick = function() { alert("welcome"); }

Equivalent jQuery
$("#MyElement").click( function() { 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 / Dsactiver alert() keycode</button>

Code jQuery
$("#button1").dblclick(function(){ alert( "Double Click !" ); }); $("#button2").one("click",function(){ alert( "One click !" ); }); $("#button3").toggle( function(){ alert( "Appuyer sur une touche" ); $("body").keydown(function(e){ alert( 'keyCode = ' + e.keyCode ); return false; }); }, function(){ $("body").unbind("keydown"); } );

Rsultat

- Le double click sur le 1er bouton affiche un message d'alerte - Le 1er click sur le 2ime bouton affiche un message d'alerte, les suivants n'affiche rien - Le click sur le dernier bouton active et dsactive alternativement un bind sur la pression d'une touche o que l'on soit dans la page (si actif, chaque pression de touche un message d'alerte affiche le keyCode correspondant).

4. Manipulation des attributs


La mthode jQuery attr() permet de lire et crire les attributs HTML du/des lment(s) slectionn(s) grce aux slecteurs : attr( myAttr ) permet de rcuprer la valeur de l'attribut myAttr. attr( myAttr, myValue ) permet de dfinir la valeur de l'attribut myAttr avec la valeur myValue.
3/9

B.P.

I.U.T. 1 de Grenoble Dpartement Rseaux & Tlcommunication Programmation Web

2009 / 2010

Une fois encore l'API de jQuery permet d'aller plus loin dans la gestion des attributs. Nous avons prcdemment utilis la fonction addClass(). Cette mthode fait parti d'une srie (removeClass, toggleClass) permettant de manipuler l'attribut class: . L'utilisation de ces fonctions permet d'ajouter ou supprimer des classes a un lment sans se soucier de son tat initial. Ainsi l'lment <p class="myClass1"> associ au code $("p").addClass("myClass2") est quivalent l'lment <p class="myClass1 myClass2"> alors qu'en l'associant au code $ ("p").attr("class","myClass2") cela quivaudrait l'lment <p class="myClass2"> De mme la mthode css() permet de manipuler l'attribut style : css( styleName ) permet de rcuprer la valeur du style styleName. css( styleName, myValue ) permet de dfinir la valeur du style styleName avec la valeur myValue.

La rcupration de la valeur du style est particulirement intressante car jQuery rcupre la valeur relle du style en tenant compte des feuilles de style et des styles hrits. Enfin la mthode val() permet de manipuler la valeur des champs de formulaire, soit l'attribut HTML value : val() permet de rcuprer la valeur d'un champ de formulaire. Elle retourne un tableau de valeur si l'lment est un select multiple. val( myValue ) permet de dfinir la valeur d'un champ de formulaire. Val( [ myValue1, myValue2 ] ) permet de dfinir plusieurs valeurs d'un champ de formulaire par exemple pour les checkbox ou les select multiple.

Attention ! Curieusement cette mthode ne permet pas de rcuprer la valeur des checkbox et des boutons radio slectionn. Il faudra pour cela utiliser la pseudo-classe : checked au niveau slecteur par exemple : $("input[name=radio1]:checked").val(). Documentation de rfrences : http://docs.jquery.com/Attributes / http://docs.jquery.com/CSS a) Javascript vs jQuery Code Javascript
document.getElementById("MyElement").value = "myValue" document.getElementById("MyElement").class = "myClass" document.getElementById("MyElement").setAttribute("align" ,"center")

Equivalent jQuery
$("#MyElement").val("myValue") $("#MyElement").addClass("myClass") $("#MyElement").attr("align","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")) $("#exemples p").css("height", height + "px"); var width = parseInt($("#exemples p").css("width")) $("#exemples p").css("width", width + "px"); }); $("#button2").click(function(){ var height = parseInt($("#exemples p").css("height")) $("#exemples p").css("height", height + "px"); var width = parseInt($("#exemples p").css("width")) + $("#exemples p").css("width", width + "px"); }); 20; 20;

+ 20; 20;

B.P.

4/9

I.U.T. 1 de Grenoble Dpartement Rseaux & Tlcommunication Programmation Web

2009 / 2010

$("#button3").toggle( function(){ $("#exemples p").attr("align", function(){ $("#exemples p").attr("align", function(){ $("#exemples p").attr("align", function(){ $("#exemples p").attr("align", ); $("#button4").click(function(){ $(this).toggleClass("myBold"); $("#exemples p").toggleClass("myBold"); });

"center"); }, "right"); }, "justify"); }, "left"); }

Rsultat

- 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 grce la slection ais d'un lment (vu prcdemment) et d'autre part en fournissant la mthode html() permettant de lire et crire le contenu de cet lment : $("#myElement").html() retourne le contenu de l'lment dont l'id est myElement. $("#myElement").html( myHTML ) remplace le contenu de l'lment dont l'id est myElement avec le code HTML myHTML.

text() est une mthode variante de html(), elle s'utilise de la mme manire 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 mthodes tel que append(), prepend(), after() et before() permettant non pas de replacer mais d'ajouter du contenu respectivement la fin, au dbut, aprs et avant le/les lment(s) slectionn(s). Traverser le DOM consiste parcourir des parents / enfants de l'arbre DOM partir d'un point prcis. Ainsi la mthode parent() retourne l'lment parent d'un slecteur donn et la mthode children( mySelector ) les enfants sachant qu'il est possible de filtrer les enfants grce un slecteur mySelector. find() fonctionne de la mme manire que children() la diffrence qu'elle retourne tous les descendants et pas seulement les enfants. next() et prev() quand elle retourne respectivement l'lment juste aprs et juste avant. Documentation de rfrences : http://docs.jquery.com/Manipulation / http://docs.jquery.com/Traversing a) Javascript vs jQuery Code Javascript
document.getElementById("MyDiv").innerHTML = "myHTML" document.getElementById("MyDiv").firstChild.nodeValue = "myText" var myText = document.createTextNode(texte); document.getElementsByTagName("body")[0].appendChild(myText);

Equivalent jQuery
$("#MyDiv").html("myHTML") $("#MyDiv").text("myHTML") $("body").append("myText")

B.P.

5/9

I.U.T. 1 de Grenoble Dpartement Rseaux & Tlcommunication Programmation Web

2009 / 2010

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
$("#exemples").dblclick(function(){ if($("#exemples pre")[0]){ $(this).html( $(this).text() ); } else { $(this).text( $(this).html() ); $(this).wrapInner("<pre></pre>"); } }); $("#exemples p b").hover( function(){ $(this).parent().append("<b> <--</b>"); }, function(){ $(this).parent().children("b:last").remove(); } ); $("#exemples p").mouseenter(function(){ $(this).find("i").each(function(){ $(this).html($ (this).html().toUpperCase()); }); });

Rsultat

- Le double click sur le texte affiche la source html et vise versa. - Au survol des textes en gras, une flche est affiche en gras juste avant la balise </p> - Au survol de chaque ligne, les textes en italique l'intrieur de la ligne sont transform en majuscule.

6. Ajax
AJAX est un acronyme signifiant Asynchronous JavaScript and XML. Il ne s'agit pas d'une technologie mais d'une mthodologie qui consiste, au travers de l'objet JavaScript XMLHttpRequest, de crer 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 srialisation JSON ou plus simplement par des changes PLAIN TEXT. Au final, Ajax a lanc une mode mais la mthodologie est rarement suivie la lettre. Pour des raisons de scurits l'objet XMLHttpRequest ne permet pas de faire des requtes en dehors de son domaine. Afin de contourner se problme 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 imprativement tre du code JavaScript. Rcemment une mthodologie, appele JSONP, vu jour pour rendre transparent l'utilisation de la balise <script> dans le cas d'un retour de chaine JSON. Cela ncessite un support au niveau serveur avec appel d'une fonction de callback mais au final la mthode ajax() retourne une chaine comme si le script tait sur le mme domaine. Comme toujours, jQuery fourni un certain nombre de mthodes permettant d'utiliser Ajax en toute simplicit. La mthode ajax() permet de rpondre la plus part des besoins. Cette dernire provient directement de $ et non d'un slecteur. Elle s'utilise simplement par un appel de type $.ajax(). De nombreux paramtres sont disponible, voici les principaux : type dfini la mthode d'envoi : "POST", "GET" dataType dfini le type de donne retourn par le serveur : "xml", "html", "script", "json", "jsonp", "text" url dfini la page du serveur appeler : "script.php" data dfini les valeurs envoyer : "param1=valeur1&param2=valeur2" ou {param1:valeur1, param2:valeur2} success dfini une fonction de callback excute au succs de la requte : function(data, textType) o data contient les donnes retourns par le serveur et textType le type de ces donnes. error dfini une fonction de callback excute en cas d'erreur de la requte : function(XMLHttpRequest, textStatus, errorThrown) o textStatus contient le type d'erreur et errorThrown un object de type exception.

Documentation de rfrences : http://docs.jquery.com/Ajax


B.P. 6/9

I.U.T. 1 de Grenoble Dpartement Rseaux & Tlcommunication Programmation Web

2009 / 2010

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); } }); });

Rsultat

- 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 mthodes prsentes taient en lien direct avec JavaScript, leurs but tant de simplifier les choses. Mais au final, le rsultat n'tait pas si loign de ce que l'on peut faire en JavaScript traditionnel. Dans cette partie, les mthodes sont beaucoup plus atypiques. On pourrait presque les apparenter des minis applications : elles ont, pour la plus part, des paramtres de configuration et le point commun de bousculer les rgles de l'esthtisme et de l'ergonomie. C'est en gnral ce genre de mthodes qui font la rputation d'un tel framework. jQuery permet de raliser des effets visuels lors du changement d'tat d'un lment ( affichage, masquage, dplacement... ) : fadeIn(), fadeOut() et fadeTo() ralisent des effets de fondu sur un lment respectivement lors de l'affichage, du masquage et vers un tat personnalis. De mme slideUp() et sildeDown() ralisent des effets de glissires sur les lments. Enfin la mthode animate() permet, d'une faon plus gnrale, de raliser automatiquement des effets de transition entre 2 tats d'un lment. Cette mthode est beaucoup plus complte de part sa multitude de paramtres de configuration mais aussi beaucoup plus complexe utiliser. jQuery UI est un projet annexe qui a pour vocation de complter 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 ncessite le chargement d'une librairie supplmentaire.
B.P. 7/9

I.U.T. 1 de Grenoble Dpartement Rseaux & Tlcommunication Programmation Web

2009 / 2010

Les mthodes d'interactions utilisateurs permettent de dplacer, trier, redimensionner des lments simplement avec la souris, au mme titre qu'on peut le faire avec les fentres de son systme d'exploitation. Ainsi draggable() permet en toute simplicit un lment d'tre dplac l'aide de la souris. droppable() permet de dclencher une fonction de callback au contact d'un lment draggable avec lui-mme. Enfin resizable() permet un lment d'tre redimensionner. La mthode 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 mthode effect() disposant d'une quinzaine d'effets plus ou moins originaux passer en paramtre. Cela permet notamment de faire exploser, clignoter ou bouger un lment. Documentation de rfrences : 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

Rsultat

$("#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 dplacent le $("#button3").click(function(){ div gauche et droite $("#exemples div").animate({"left": "+=50px"}, "slow"); - Le bouton du milieu affiche ou masque }); le div avec un effet de fondu $("#exemples div").draggable();

- Enfin le div peut tre dplac n'importe o grce la souris.

8. Utiliser et crer un plugin jQuery


jQuery rfrence sur son site internet des centaines de plugins poussant javascript au plus loin de ses capacits. Ils sont tris par catgories et dispose bien souvent de dmonstration. Il s'avre assez intressant de les parcourir pour ce rendre compte de toutes les capacits du framework et parfois donner des ides. Les plugins ajoutent des mthodes aux slecteurs 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 mthode du mme nom. Il est important, avant d'utiliser un plugin, de s'assurer que ce dernier est bien maintenu par ses dveloppeurs : jQuery est un projet trs actif et il n'est pas rare de voir des vieux plugins tre incompatibles avec les nouvelles versions du framework. La cration d'un plugin jQuery est relativement simple. Il suffit de rajouter une mthode l'objet jQuery.fn ou $.fn pour que cette dernire devienne disponible via n'importe quel slecteur. Ainsi, par exemple, le plugin : $.fn.test = function(){ $(this).addClass("myClassBlue"); }

B.P.

8/9

I.U.T. 1 de Grenoble Dpartement Rseaux & Tlcommunication Programmation Web

2009 / 2010

ajoute une class myClassBlue tous les lments slectionns. Il s'utilise comme ceci : $("myElement").test(); Documentation de rfrences : http://docs.jquery.com/Plugins/Authoring a) Exemples Code HTML
<table> <tr> <td>&nbsp;</td><td>&nbsp;</td> <td>&nbsp;</td><td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td><td>&nbsp;</td> <td>&nbsp;</td><td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td><td>&nbsp;</td> <td>&nbsp;</td><td>&nbsp;</td> </tr> <tr> <td>&nbsp;</td><td>&nbsp;</td> <td>&nbsp;</td><td>&nbsp;</td> </tr> </table>

Code jQuery
$.fn.damier = function(color){ if(!color) color = "blue"; $(this).children("tr:even > td:odd, tr:odd > td:even").css("background-color", color); } $("table").damier("lightGray");

Rsultat

B.P.

9/9

Das könnte Ihnen auch gefallen