SlideShare une entreprise Scribd logo
1  sur  9
Télécharger pour lire hors ligne
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
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">&nbsp;</td>              $(".colonne1").addClass("myClassYellow");
    <td class="colonne2">&nbsp;</td>              $("#ligne1 > .colonne1").addClass("myClassGreen");
    <td class="colonne3">&nbsp;</td>              $("td:last").addClass("myClassRed");
    <td class="colonne4">&nbsp;</td>              $("a[name=lien]").addClass("myClassRed");
  </tr>
  <tr id="ligne2">                                Résultat
    <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>




B.P.                                                                                                     2/9
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
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
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
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
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
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
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>&nbsp;</td><td>&nbsp;</td>          $(this).children("tr:even > td:odd, tr:odd >
    <td>&nbsp;</td><td>&nbsp;</td>            td:even").css("background-color", color);
  </tr>                                   }
  <tr>                                    $("table").damier("lightGray");
    <td>&nbsp;</td><td>&nbsp;</td>
    <td>&nbsp;</td><td>&nbsp;</td>        Résultat
  </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>




B.P.                                                                                              9/9

Contenu connexe

Tendances (20)

Swing
SwingSwing
Swing
 
Crs javascript
Crs javascriptCrs javascript
Crs javascript
 
PHP &amp; MySQL
PHP &amp; MySQLPHP &amp; MySQL
PHP &amp; MySQL
 
JQuery
JQueryJQuery
JQuery
 
La puissance des pseudo-éléments
La puissance des pseudo-élémentsLa puissance des pseudo-éléments
La puissance des pseudo-éléments
 
Javascript
JavascriptJavascript
Javascript
 
Chap10
Chap10Chap10
Chap10
 
Formation JPA Java persistence API
Formation JPA Java persistence APIFormation JPA Java persistence API
Formation JPA Java persistence API
 
Notions de base de JavaScript
Notions de base de JavaScriptNotions de base de JavaScript
Notions de base de JavaScript
 
Scrapez facilement et gratuitement
Scrapez facilement et gratuitementScrapez facilement et gratuitement
Scrapez facilement et gratuitement
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
Formation Jquery
Formation JqueryFormation Jquery
Formation Jquery
 
jQuery mobile [Part1]
jQuery mobile [Part1]jQuery mobile [Part1]
jQuery mobile [Part1]
 
Pratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMOPratique de javascript KOUAMI DJOMO
Pratique de javascript KOUAMI DJOMO
 
Le Tracking sur Internet
Le Tracking sur InternetLe Tracking sur Internet
Le Tracking sur Internet
 
Ch06
Ch06Ch06
Ch06
 
Foramtion Js
Foramtion JsForamtion Js
Foramtion Js
 
Uml: Diagrammes de classes -- Concepts De Base 41
Uml: Diagrammes de classes -- Concepts De Base 41Uml: Diagrammes de classes -- Concepts De Base 41
Uml: Diagrammes de classes -- Concepts De Base 41
 
Cours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxyCours design pattern m youssfi partie 6 proxy
Cours design pattern m youssfi partie 6 proxy
 
Presentation de gwt maven
Presentation de  gwt mavenPresentation de  gwt maven
Presentation de gwt maven
 

En vedette

Equipo5 actividad 3.5-proyecto educativo
Equipo5 actividad 3.5-proyecto educativoEquipo5 actividad 3.5-proyecto educativo
Equipo5 actividad 3.5-proyecto educativoduartes29
 
Marches et-emplois-lies-a-efficacite-energetique-et-enr-situation 2012-2013-r...
Marches et-emplois-lies-a-efficacite-energetique-et-enr-situation 2012-2013-r...Marches et-emplois-lies-a-efficacite-energetique-et-enr-situation 2012-2013-r...
Marches et-emplois-lies-a-efficacite-energetique-et-enr-situation 2012-2013-r...Pôle Réseaux de Chaleur - Cerema
 
Télécom ParisTech infos #9 - septembre 2013
Télécom ParisTech infos #9 - septembre 2013Télécom ParisTech infos #9 - septembre 2013
Télécom ParisTech infos #9 - septembre 2013Télécom Paris
 
Upline daily du 03 02 2012 ( niveau d'évidende haussier ou baissier d'un pane...
Upline daily du 03 02 2012 ( niveau d'évidende haussier ou baissier d'un pane...Upline daily du 03 02 2012 ( niveau d'évidende haussier ou baissier d'un pane...
Upline daily du 03 02 2012 ( niveau d'évidende haussier ou baissier d'un pane...www.bourse-maroc.org
 
Clase 9 presencial - contra 01 de octubre
Clase 9   presencial - contra 01 de octubreClase 9   presencial - contra 01 de octubre
Clase 9 presencial - contra 01 de octubrecefic
 
Presentación institucional
Presentación institucionalPresentación institucional
Presentación institucionalDaniel Jaloff
 
República bolivariana de venezuela
República bolivariana de venezuelaRepública bolivariana de venezuela
República bolivariana de venezuelakeinnydamary
 
Atrapados en las redes sociales
Atrapados en las redes socialesAtrapados en las redes sociales
Atrapados en las redes socialescechu-46
 
Modulo2
Modulo2Modulo2
Modulo2cefic
 
Presentación2 redes
Presentación2 redesPresentación2 redes
Presentación2 redesmaza-mazita
 
Reflexiones de un nobel
Reflexiones de un nobelReflexiones de un nobel
Reflexiones de un nobeladefloresita64
 
Ley de portabilidad numerica
Ley de portabilidad numericaLey de portabilidad numerica
Ley de portabilidad numericaDiana Bernal
 
Diapositivas tema 2
Diapositivas tema 2Diapositivas tema 2
Diapositivas tema 2cefic
 
Les petits réseaux de chaleur bois-énergie et l&rsquo;optimisation des réseaux
Les petits réseaux de chaleur bois-énergie et l&rsquo;optimisation des réseauxLes petits réseaux de chaleur bois-énergie et l&rsquo;optimisation des réseaux
Les petits réseaux de chaleur bois-énergie et l&rsquo;optimisation des réseauxPôle Réseaux de Chaleur - Cerema
 
Las computadoras
Las computadorasLas computadoras
Las computadoras2389527
 

En vedette (20)

Equipo5 actividad 3.5-proyecto educativo
Equipo5 actividad 3.5-proyecto educativoEquipo5 actividad 3.5-proyecto educativo
Equipo5 actividad 3.5-proyecto educativo
 
Marches et-emplois-lies-a-efficacite-energetique-et-enr-situation 2012-2013-r...
Marches et-emplois-lies-a-efficacite-energetique-et-enr-situation 2012-2013-r...Marches et-emplois-lies-a-efficacite-energetique-et-enr-situation 2012-2013-r...
Marches et-emplois-lies-a-efficacite-energetique-et-enr-situation 2012-2013-r...
 
Télécom ParisTech infos #9 - septembre 2013
Télécom ParisTech infos #9 - septembre 2013Télécom ParisTech infos #9 - septembre 2013
Télécom ParisTech infos #9 - septembre 2013
 
El chocó
El chocóEl chocó
El chocó
 
Upline daily du 03 02 2012 ( niveau d'évidende haussier ou baissier d'un pane...
Upline daily du 03 02 2012 ( niveau d'évidende haussier ou baissier d'un pane...Upline daily du 03 02 2012 ( niveau d'évidende haussier ou baissier d'un pane...
Upline daily du 03 02 2012 ( niveau d'évidende haussier ou baissier d'un pane...
 
Clase 9 presencial - contra 01 de octubre
Clase 9   presencial - contra 01 de octubreClase 9   presencial - contra 01 de octubre
Clase 9 presencial - contra 01 de octubre
 
Webquest tecnicas de mobillizacion
Webquest  tecnicas de mobillizacionWebquest  tecnicas de mobillizacion
Webquest tecnicas de mobillizacion
 
Presentación institucional
Presentación institucionalPresentación institucional
Presentación institucional
 
República bolivariana de venezuela
República bolivariana de venezuelaRepública bolivariana de venezuela
República bolivariana de venezuela
 
Atrapados en las redes sociales
Atrapados en las redes socialesAtrapados en las redes sociales
Atrapados en las redes sociales
 
Modulo2
Modulo2Modulo2
Modulo2
 
Presentación2 redes
Presentación2 redesPresentación2 redes
Presentación2 redes
 
Reflexiones de un nobel
Reflexiones de un nobelReflexiones de un nobel
Reflexiones de un nobel
 
Ley de portabilidad numerica
Ley de portabilidad numericaLey de portabilidad numerica
Ley de portabilidad numerica
 
Lesflors
LesflorsLesflors
Lesflors
 
Diapositivas tema 2
Diapositivas tema 2Diapositivas tema 2
Diapositivas tema 2
 
Les petits réseaux de chaleur bois-énergie et l&rsquo;optimisation des réseaux
Les petits réseaux de chaleur bois-énergie et l&rsquo;optimisation des réseauxLes petits réseaux de chaleur bois-énergie et l&rsquo;optimisation des réseaux
Les petits réseaux de chaleur bois-énergie et l&rsquo;optimisation des réseaux
 
Ag rapport cs_rink
Ag rapport cs_rinkAg rapport cs_rink
Ag rapport cs_rink
 
Metodologia
MetodologiaMetodologia
Metodologia
 
Las computadoras
Las computadorasLas computadoras
Las computadoras
 

Similaire à Manualjquery

1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptxlaabid1
 
Utilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérienceUtilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expériencelouschwartz
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantHugo Hamon
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web5pidou
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript FrenchVlad Posea
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2dhugomallet
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.pptPROFPROF11
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.pptPROFPROF11
 
Cycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidCycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidHoussem Lahiani
 
Cycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidCycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidHoussem Lahiani
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++coursuniv
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09Claude Coulombe
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans DrupalAdyax
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basiczineblahib2
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)DNG Consulting
 
Jquery
JqueryJquery
Jquerykrymo
 

Similaire à Manualjquery (20)

1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 
Utilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérienceUtilisation de ZK avec Java - Retour d’expérience
Utilisation de ZK avec Java - Retour d’expérience
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
Quelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application webQuelle place pour le framework Rails dans le développement d'application web
Quelle place pour le framework Rails dans le développement d'application web
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
Cours yeoman backbone box2d
Cours yeoman backbone box2dCours yeoman backbone box2d
Cours yeoman backbone box2d
 
Tp-jquery
Tp-jqueryTp-jquery
Tp-jquery
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
 
Cours JavaScript 2.ppt
Cours JavaScript 2.pptCours JavaScript 2.ppt
Cours JavaScript 2.ppt
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
Cycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidCycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'Android
 
Cycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'AndroidCycle de vie d'activité Android et les composant d'Android
Cycle de vie d'activité Android et les composant d'Android
 
iTunes Stats
iTunes StatsiTunes Stats
iTunes Stats
 
programmation orienté objet c++
programmation orienté objet c++programmation orienté objet c++
programmation orienté objet c++
 
react-fr.pdf
react-fr.pdfreact-fr.pdf
react-fr.pdf
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
react-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basicreact-slides.ppx (2) (1).pptx react presentation basic
react-slides.ppx (2) (1).pptx react presentation basic
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
 
Jquery
JqueryJquery
Jquery
 

Dernier

GUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalGUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalNicolas Georgeault
 
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...Faga1939
 
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAMilo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAUGAIA
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...OCTO Technology
 
Intelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationIntelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationTony Aubé
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudOCTO Technology
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...OCTO Technology
 
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfEtude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfsnapierala
 

Dernier (8)

GUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalGUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
 
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
 
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAMilo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
 
Intelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationIntelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imagination
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
 
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfEtude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
 

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">&nbsp;</td> $(".colonne1").addClass("myClassYellow"); <td class="colonne2">&nbsp;</td> $("#ligne1 > .colonne1").addClass("myClassGreen"); <td class="colonne3">&nbsp;</td> $("td:last").addClass("myClassRed"); <td class="colonne4">&nbsp;</td> $("a[name=lien]").addClass("myClassRed"); </tr> <tr id="ligne2"> Résultat <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> 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>&nbsp;</td><td>&nbsp;</td> $(this).children("tr:even > td:odd, tr:odd > <td>&nbsp;</td><td>&nbsp;</td> td:even").css("background-color", color); </tr> } <tr> $("table").damier("lightGray"); <td>&nbsp;</td><td>&nbsp;</td> <td>&nbsp;</td><td>&nbsp;</td> Résultat </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> B.P. 9/9