Manualjquery

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

Programmation Web

2. Les sélecteurs

Un des gros avantages de jQuery est sa capacité à sélectionner un élément ou une liste d'élément
de l'arbre DOM bien au delà des fonctions JavaScript traditionnelles.

Afin de simplifier la prise en main du framework, les développeurs de jQuery ont choisi d'utiliser
la méthode de sélection de CSS3. Autrement dit, sélectionner un élément ou une liste d'élément avec
jQuery se fait de la même manière que dans une feuille de style.

La méthode each(fn) permet de parcourir la liste d'éléments retourné par un sélecteur. Il s'agit
d'une méthode de base utilisée par beaucoup d'autres méthodes du framework. Elle attend une fonction
comme argument soit par référence, soit en déclarant la fonction à la volée comme il est de coutume
dans l'utilisation de jQuery. Voici la syntaxe :

$(selector).each(function(){
// Code here
});

Au sein de cette fonction, this contient l'élément HTML courent et $(this) constitue un sélecteur à
partir de cette élément.

Documentation de références : http://docs.jquery.com/Selectors

a) Javascript vs jQuery

Code Javascript Equivalent jQuery
document.getElementById("MyElement") $("#MyElement")
document.getElementsByTagName("input") $("input")
document.getElementsByName("MyName") $("[name=MyName]")
document.getElementsByTagName("input")[2] $("input:eq(2)")

b) Exemples

Afin de visualiser plus simplement la sélection des éléments nous allons utiliser une méthode
jQuery appelée addClass. Son rôle est d'ajouter une classe aux éléments sélectionnés. La feuille css
comporte des règles background-color associées à chaque classe.

Code HTML Code jQuery
<table>
<tr id="ligne1"> $("#ligne1").addClass("myClassBlue");
<td class="colonne1"> </td> $(".colonne1").addClass("myClassYellow");
<td class="colonne2"> </td> $("#ligne1 > .colonne1").addClass("myClassGreen");
<td class="colonne3"> </td> $("td:last").addClass("myClassRed");
<td class="colonne4"> </td> $("a[name=lien]").addClass("myClassRed");
</tr>
<tr id="ligne2"> Résultat
<td class="colonne1"> </td>
<td class="colonne2">
<a name="lien" href="#">Lien</a>
</td>
</tr>
<tr id="ligne3">
</tr>
<tr id="ligne4">
</tr>
</table>

B.P. 2/9

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


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

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


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

Programmation Web

function(){ $("#exemples p").attr("align", "center"); },
function(){ $("#exemples p").attr("align", "right"); },
function(){ $("#exemples p").attr("align", "justify"); },
function(){ $("#exemples p").attr("align", "left"); }
);
$(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


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

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>

$("#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

Programmation Web

a) Exemples

Code HTML
<input type="text">
<button id="button1">Traduire !</button>
<button id="button2">Ajax Erreur 404</button>

Code jQuery
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");
}
});
});
$.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

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>

$("#exemples div").animate({"left": "-=50px"}, "slow");
});
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

Programmation Web

ajoute une class myClassBlue à tous les éléments sélectionnés. Il s'utilise comme ceci :

$("myElement").test();

Documentation de références : http://docs.jquery.com/Plugins/Authoring

a) Exemples

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

B.P. 9/9

Manualjquery

Contenu connexe

Tendances

En vedette

Similaire à Manualjquery

Manualjquery