Les navigateurs supportés sont :
- Firefox 1.5+
- Internet Explorer 6+
- Safari 2.0.2+
- Opera 9+
La bibliothèque est utilisée par exemple sur des sites comme :
- Dell
- Google Code
- Digg
- NBC
- Amazon
- Mozilla
- Wordpress
- Drupal
- SPIP
- The Zend Framework
- etc
I ) Bases
1 ) Appel
Typiquement, l’appel à la bibliothèque se fera de la manière suivante :
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />
<title>Exemple</title>
<script type="text/javascript" src="./js/lib/jquery.js"></script>
<script type="text/javascript" src="./js/exemple.js"></script>
</head>
<body>
...
</body>
</html> [/html]On charge dans un premier temps la bibliothèque, puis notre fichier exemple.js qui contiendra nos scripts.
2 ) Compression
jQuery est disponible sous trois formats :
- Sans compression (93 Ko)
- Compressée à l’aide de packer (28 Ko)
- Compressée à l’aide de JSMin puis de gzip (15 Ko)
Il conviendra d’appeler le format le plus léger dans un environnement de production, mais il reste possible de parcourir la bibliothèque dans sa version non compressée.
3 ) La fonction jquery()
jQuery repose sur une seule fonction : jQuery() ou $(). Comme toutes les fonctions JavaScript, elle accepte des paramètres, et retourne un objet, que nous appellerons par la suite “objet jQuery”.
Concernant les paramètres acceptés, nous pouvons passer :
Une fonction
Dans ce cas, jQuery va exécuter cette fonction lorsque la page sera chargée par le navigateur. Plus précisément, lorsque le DOM sera chargé.
C’est pourquoi on en-capsule souvent l’ensemble du code écrit en jQuery dans :
- Code: Tout sélectionner
$(function(){
// ...
});
Contrairement à l’évènement window.onload, le chargement complet des images de la page n’est pas nécessaire.
Une chaine de caractères (query)
Les sélecteurs CSS
Une des grandes forces de jQuery est d’intégrer la syntaxe des sélecteurs CSS. Il est alors facile de cibler facilement les nœuds DOM qui nous intéressent.
Par exemple :
- Code: Tout sélectionner
var mon_objet_jQuery = $("#mon_image");
var mon_objet_jQuery = $("#menu a");
- Code: Tout sélectionner
var mon_objet_jQuery = $("#id > .classe, #id td:last-child");
Les sélecteurs jQuery
Il existe des sélecteurs spécifiques à jQuery qui ne trouvent pas d’équivalences en CSS. Ils sont toutefois très pratiques. Par exemple :
- Code: Tout sélectionner
var mon_objet_jQuery = $('tr:odd td'); // les `td` dans les `tr` impairs
var mon_objet_jQuery = $("p:eq(4)"); // le quatrième paragraphe
var mon_objet_jQuery = $("p:lt(8)"); // les sept premiers paragraphes
etc.
Maintenant que nous avons un objet jQuery, il va falloir l’utiliser. Et pour cela toute une palette de méthodes sont disponibles dans la bibliothèque : manipulation du DOM, des CSS, des évènements et autres effets visuels.
Si on désire par exemple masquer progressivement les paragraphes d’une page, on utilise :
- Code: Tout sélectionner
$("p").fadeOut();
Deux autres exemples :
- Code: Tout sélectionner
$("li").html("lorem <strong>ipsum</strong> dolor");
$("#menu a").click(function(){
window.open($(this).attr("href"));
return false;
});
this en objet jQuery avec $(this).
III ) Callback
Certaines fonctions (comme la fonction fadeOut()) acceptent une autre fonction en paramètre. Cette dernière sera exécutée
à la fin de l’exécution de la première. C’est ce qu’on appelle un callback.
Cela permet par exemple de créer des animations :
- Code: Tout sélectionner
$(".test").fadeOut("slow",function(){
$(this).fadeIn("slow");
});
On l’a vu les méthodes jQuery retournent un objet jQuery. Cela permet de “chainer” les fonctions.
Ainsi au lieu d’écrire :
- Code: Tout sélectionner
$(".toto").apppend(" un texte");
$(".toto").css("border","1px solid red");
$(".toto").addClass("titi");
$(".toto").removeClass("toto");
- Code: Tout sélectionner
$(".toto").apppend(" un texte").css("border","1px solid red").addClass("titi").removeClass("toto");
Parmi les méthodes jQuery on trouve quelques fonctions très pratiques qui seront employées assez souvent.
1 ) length et size
Ces deux techniques sont équivalentes (mais attention à la syntaxe qui diffère). Elles retournent le nombre d’éléments d’un objet jQuery.
C’est très pratique pour tester la présence d’un élément dans la page également.
- Code: Tout sélectionner
if($("#form").length)
{
// ...
}
- Code: Tout sélectionner
$("img").size();
Là encore jQuery permet de se simplifier les tâches les plus courantes en JS. Pour boucler sur une liste d’éléments, il suffira donc d’écrire :
- Code: Tout sélectionner
$("img").each(function(){
console.log($(this).attr("src"));
});
Pour tester facilement quel navigateur est utilisé et sa version on utilisera par exemple :
- Code: Tout sélectionner
if($.browser.msie)
{
if($.browser.version > 6)
{
// ...
}
}
On trouve aussi d’autres utilitaires comme trim qui permet de supprimer les espaces en début et fin de chaine.
- Code: Tout sélectionner
$.trim(" une chaine ");
Regardons à travers un exemple concret les concepts évoqués plus haut. Il s’agit ici de créer des onglets.
1 ) Structure HTML
[html]<div id="onglets">
<h1>Onglets</h1>
<ul>
<li><a href="#onglet_1">Lorem ipsum</a></li>
<li><a href="#onglet_2">Pan</a></li>
<li><a href="#onglet_3">Onglet 3</a></li>
</ul>
<div class="onglet" id="onglet_1">
<h3>Onglet 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="onglet" id="onglet_2">
<h3>Onglet 2</h3>
<p>Portez ce vieux whisky au juge blond qui fume.</p>
</div>
<div class="onglet" id="onglet_3">
<h3>Onglet 3</h3>
<p>Voix ambigüe d'un cœur qui, au zéphyr, préfère les jattes de kiwis.</p>
</div>
</div> [/html]Trois onglets, ainsi qu’un menu composé d’ancres afin de rendre cette structure accessible lorsque JavaScript est désactivé.
2 ) Initialisation
- Code: Tout sélectionner
$(function(){
$("#onglets .onglet").hide();
$("#onglets .onglet:eq(0)").show();
});
Notez que $("#onglets .onglet:eq(0)") à pour équivalent $("#onglets .onglet:first"). Notez également que la méthode not permet de simplifier la syntaxe :
- Code: Tout sélectionner
$(function(){
$("#onglets .onglet").not(":first").hide();
});
- Code: Tout sélectionner
$(function(){
$("#onglets ul a").click(function(){
$("#onglets .onglet").hide();
$(this.hash).show();
this.blur();
return false;
});
});
…Et c’est terminé !
4 ) Améliorations
Pour aller un peu plus loin, on peut envisager quelques améliorations.
Animations
En changeant quelques méthodes, on peut facilement animer nos onglets :
- Code: Tout sélectionner
$(function(){
$("#onglets .onglet").not(":first").hide();
$("#onglets ul a").click(function(){
$("#onglets .onglet").slideUp("slow");
$(this.hash).slideDown("slow");
this.blur();
return false;
});
});
Onglet courant
Bien souvent, il va être important de faire ressortir graphiquement, quel onglet est activé.
- Code: Tout sélectionner
$(function(){
$("#onglets .onglet").not(":first").hide();
$("#onglets .onglet:first").addClass("actif");
$("#onglets ul a").click(function(){
$("#onglets ul a").parent("li").removeClass("actif");
$("#onglets .onglet").hide();
$(this.hash).show();
$(this).blur().parent("li").addClass("actif");
return false;
});
});
On y associe par exemple cette feuille de style :
- Code: Tout sélectionner
#onglets .onglet
{
border:1px solid #000;
clear:left;
padding:5px;
zoom:1 /* ie */
}
#onglets ul
{
border-right:1px solid #000;
float:left;
margin:0;
padding:0
}
#onglets li
{
position:relative;
margin-bottom:-1px;
list-style-type:none;
padding:5px;
border-top:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #000;
float:left
}
#onglets li.actif
{
border-bottom-color:#FFF
}
#onglets li.actif a
{
text-decoration:none
}
#onglets h3
{
margin-top:0
}
On peut aussi préférer générer le menu nécessaire au fonctionnement des onglets et ne pas le voir apparaitre si JavaScript est désactivé.
- Code: Tout sélectionner
$(function(){
$("#onglets .onglet:first").before(''
+'<ul>'
+' <li class="actif"><a href="#onglet_1">Lorem ipsum</a></li>'
+' <li><a href="#onglet_2">Pangrammes</a></li>'
+' <li><a href="#onglet_3">Pangrammes (accentué)</a></li>'
+'</ul>'+
'');
$("#onglets ul a").click(function(){
$("#onglets .onglet").hide();
$(this.hash).show();
this.blur();
return false;
});
});
Il pourrait facilement être envisageable de laisser à l’utilisateur la possibilité d’activer l’onglet qu’il désire par défaut. En passant l’ancre qu’il désire dans l’url par exemple.
- Code: Tout sélectionner
$(function(){
if((window.location.hash) && ($("#onglets").children(window.location.hash).length))
{
$("#onglets .onglet").hide();
$(window.location.hash).show();
}
else
{
$("#onglets .onglet").not(":first").hide();
}
$("#onglets ul a").click(function(){
$("#onglets .onglet").hide();
$(this.hash).show();
$(this).blur();
return false;
});
});
Affichage au survol
Dernier exemple avec la méthode hover qui accepte deux fonctions en paramètre, une pour le mouseover, une pour le mouseout :
- Code: Tout sélectionner
$(function(){
$("#onglets .onglet").hide();
$("#onglets ul a").hover(function(){
$("#onglets .onglet").hide();
$(this.hash).show();
$(this).blur().parent("li").toggleClass("actif");
return(false);
},function(){
$("#onglets .onglet").hide();
$("#onglets li").removeClass("actif");
});
});
VII ) Plugins
Une des autres forces de jQuery, c’est le nombre important de personnes actives dans la communauté. Notamment, ceux qui réalisent des plugins. Les plugins sont en fait des extensions qui vont venir se greffer sur la bibliothèque initiale afin d’en étendre les possibilités.
Il ne sera pas question dans ce tutoriel d’expliquer en détail le fonctionnement de chaque plugin mais plutôt d’en étudier sommairement quelques-un afin de comprendre globalement les mécanismes qui permettent de les mettre en place.
1 ) Appel
Pour utiliser un plugin, il faudra l’appeler dans l’entête de notre document. Attention d’ailleurs à l’ordre d’appel qui est important.
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=iso-8859-15" />
<title>Exemple</title>
<script type="text/javascript" src="./js/lib/jquery.js"></script>
<script type="text/javascript" src="./js/lib/plugin.js"></script>
<script type="text/javascript" src="./js/exemple.js"></script>
</head>
<body>
…
</body>
</html> [/html]Parmis les nombreux plugins, voici une sélection des plus utiles :
2 ) jQuery Flash Plugin
Ce plugin (qui est une adaptation de SWFObject en jQuery) permet de charger simplement vos animations Flash. Le tout de manière accessible et transparente.
- Code: Tout sélectionner
$("#exemple").flash({
src:"./swf/flash.swf,
width:250,
height:350,
wmode:"transparent",
flashvars:{
param_1:"oui",
param_2:"non"
}},{
version:8
}
);
C’est donc dans ce conteneur que se trouvera l’alternative au contenu Flash.
3 ) Tooltip
Il s’agit ici de créer dynamiquement une infobulle personnalisée en fonction de l’attribut title d’un élément.
En appliquant ce script :
- Code: Tout sélectionner
$(".infobulle[title]").Tooltip({
track:true,
delay:0,
showURL:false,
showBody:" - ",
fixPNG:true,
opacity:0.95,
left:0;
top:0
});
[html]<span title="Titre - Paragraphe" class="infobulle">exemple</span> [/html]Sera “transformé” en :
[html]<div id="tooltip">
<h4>Titre</h4>
<div class="body">Paragraphe</div>
<div class="url" style="display:none"></div>
</div> [/html]Et sera affiche au survol de l’élement.
Comme pour la plupart des plugins, une documentation est fournie, et présente une liste exhaustive des options disponibles. Des exemples illustrent souvent l’utilisation typique également.
4 ) Validation
Ce plugin permet de valider un formulaire côté client. Il sera bien sûr fortement recommandé de doubler cette vérification côté serveur toutefois.
Il s’initialise ainsi (avec ici, un exemple de formulaire d’inscription typique) :
- Code: Tout sélectionner
f($("#mon_formulaire").length)
{
$.validator.methods.telephone_fr = function(value, element, param){
return this.required(element) || /^0dsddsddsddsdd$/.test(value);
};
$("#mon_formulaire").validate({
errorContainer:$("#mon_formulaire #message""),
showErrors:function(errorMap,errorList){
$("#mon_formulaire #message").html("Votre formulaire comporte des erreurs.");
this.defaultShowErrors();
},
rules:{
adresse_email:{
required:true,
email:true
},
mot_de_passe:"required",
mot_de_passe_verification:{
required:true,
equalTo:"#mot_de_passe_inscription"
},
nom:"required",
telephone:{
telephone_fr:true
}
},
messages:{
adresse_email:{
required:"Votre courriel est requis.",
email:"Votre courriel est mal complété."
},
mot_de_passe:"Un mot de passe est requis.",
mot_de_passe_verification:{
required:"Ce champs doit être complété.",
equalTo:"Les deux champs ne sont pas identiques."
},
nom:"Votre nom est requis.",
telephone:{
telephone_fr:"Le numéro ne respecte pas le format français (0× ×× ×× ×× ××)."
}
}
});
}
5 ) Interface
Il s’agit d’un ensemble de plugins spécialements dédiés aux effets d’animations. On y trouve : sliders, carroussels, infobulles, drag’n’drop, etc. À noter, la page de téléchargement qui permet de sélection précisement les éléments que l’on souhaite.
6 ) User Interface
Une nouvelle approche pour les effets d’animation là encore. La collection semble très prometteuse, mais souffre encore de quelques défauts de jeunesse (documentation incomplète et toujours wip).
7 ) Datepicker
L’indispensable aide à la saisie de date. Personnalisable à souhait : langue, dates, apparence, etc.
- Code: Tout sélectionner
$("input.calendar').attachDatepicker({
showOn:"both",
buttonImage:"img/calendar.gif",
buttonImageOnly:true
});
8 ) Autres plugins intéressants
On le voit, la philosophie de chaque plugin est sensiblement la même. Il faut simplement bien lire la documentation associée, prendre le temps de tester la mise en place et éventuellement bien vérifier l’évolutivité et l’accessibilité de chaque.
En voici quelques autres :
Vous aurez peut-être remarqué que parfois certains plugins nécessitent l’appel d’autres plugins annexes pour fonctionner (comme c’est le cas de Metadata par exemple).
jQuery permet de créer en quelques lignes des requêtes AJAX sans se soucier de l'inter-compatitibilité des navigateurs. Également, à l'aide de paramètres simples, il est possible de personnaliser le formatage de ses requêtes.
VIII ) La méthode $.ajax()
1 ) Fonction de base
Cette fonction est sûrement celle que vous utiliserez le plus avec jQuery. Déterminez les trois paramètres de base : la méthode utilisée (POST ou GET), l'URL de la page appelée et l'action à effectuer.
- Code: Tout sélectionner
$.ajax({
type: "POST",
url: "test.html",
success: function(retour){
alert("Données retournées : " + retour );
}
});
Généralement, on utilise des requêtes AJAX sur des liens hypertextes (balise <a>) afin d'avoir des pages tout de même accessible si le Javascript est désactivé. Ainsi, on peut automatiser la mise en place de requêtes en récupérant l'attribut href de chaque lien avec l'appel $(this).attr("href").
Dans cet exemple, lorsque l'on clique sur un lien possédant la classe CSS "test", le code HTML de la page liée s'affiche dans la balise possédant l'id "recipient".
- Code: Tout sélectionner
$("a.test").click(function() {
$.ajax({
type: "POST",
url: $(this).attr("href"),
success: function(retour){
$("#recipient").empty().append(retour);
}
});
return false;
});
De la même façon, on peut envoyer un formulaire en AJAX lors de sa soumission :
- Code: Tout sélectionner
$("form.test").submit(function() { s = $(this).serialize();
$.ajax({
type: "POST",
data: s,
url: $(this).attr("action"),
success: function(retour){
$("#recipient").empty().append(retour);
}
});
return false;
});
4 ) Paramètres de la fonction $.ajax()
datatype
- xml: Retourne un document XML pouvant être réutilisé via jQuery.
- html: Retourne un document HTML comme du text sans mise en formee où les scripts sont interprétrés.
- script: Retourne une réponse JS comme du texte sans mise en forme.
- json: Interpréte une réponse JSON et retourne un objet Javascript.
url
L'URL à cibler.
type
Le type de requête POST or GET (GET par défaut).
dataType
Format de réponse attendu.
ifModified
Autorise la response si elle a changé depuis la dernière requête (false par défaut).
timeout
Redéfini le temps de réponse maximum.
global
Utilisation automatique des déclencheurs d'événements (true par défaut).
error
Fonction appelée en cas d'erreur.
success
Fonction appelée en cas de succès.
complete
Fonction appelée en fin de requête, peu importe le succès ou non.
data
Données envoyées en GET.
contentType
Type de contenu envoyé (application/x-www-form-urlencoded par défaut).
processData
Option à passer en false si vous souhaitez envoyer des DOMDocuments.
async
Option d'asynchronisation (true par défaut).
beforeSend
Fonction appelée avant la requête.
5 ) Les fonctions-raccourcis
Il existe aussi plusieurs fonctions prédéfinies ayant pour but d'éviter de configurer ses requêtes AJAX de manière hasardeuse. Ainsi vous pouvez utiliser :
$.post("test.php");
Effectue un requête en POST sur la page "test.php".
$.get("test.php");
Effectue un requête en GET sur la page "test.php".
$.getIfModified("test.php");
Effectue un requête en GET sur la page "test.php" si elle a changé.
$.getJSON("test.js", function(json){alert(json);});
Effectue un requête en JSON sur le script "test.js".
$.getScript("test.js");
Va cherche le script "test.js".
6 ) Les fonctions solitaires
À l'aide de quelques fonctions ésseulées, il est possible de faire corréler des éléments HTML avec l'AJAX. Ainsi, on peut appliquer des comportements à des éléments HTML lors de l'execution de requêtes AJAX. Ceci sert par exemple pour afficher une boîte de dialogue à chaque requête de l'utilisateur.
ajaxComplete()
Affiche un contenu lorsque la requête est terminée.
- Code: Tout sélectionner
$("#msg").ajaxComplete(function(request, settings){
$(this).append("Requête terminée.");
});
Affiche un contenu lorsque la requête retourne une erreur.
- Code: Tout sélectionner
$("#msg").ajaxError(function(request, settings){
$(this).append("Erreur de retour.");
});
Affiche un contenu lors du début du lancement de la requête.
- Code: Tout sélectionner
$("#msg").ajaxSend(function(request, settings){
$(this).append("Début du lancement de la requête.");
});
Affiche un contenu lorsque la requête est lancée.
- Code: Tout sélectionner
$("#msg").ajaxStart(function(){
$(this).show();
});
Affiche un contenu lorsque la requête est arrêtée.
- Code: Tout sélectionner
$("#msg").ajaxStop(function(){
$(this).hide();
});
Affiche un contenu lorsque la requête est exécutée avec succès.
- Code: Tout sélectionner
$("#msg").ajaxSuccess(function(request, settings){
$(this).append("Requête réussie.");
});
Charge un contenu externe.
- Code: Tout sélectionner
$("#msg").load("test.html");
Charge un contenu externe s'il a été modifé.
- Code: Tout sélectionner
$("#msg").loadIfModified("test.html");
jQuery, nous l’avons vu, est une excellente bibliothèque JavaScript. Cependant, on oublie trop souvent qu’elle présente aussi quelques défauts.
Défauts inhérents à la notion de bibliothèque
Comme pour toutes les bibliothèques (JS, CSS ou autres), le but est de simplifier à l’utilisateur la tâche. Simplification, raccourcis, comportements automatiques… il faut bien l’avouer, cela donne aussi moins de contrôle sur le code produit. Aussi à moins de pouvoir parcourir les entrailles de jQuery en détail, il faut s’attendre à faire quelques concessions sur vos méthodes habituelles de travail.
De la même manière, savoir utiliser de jQuery ne fait pas tout. S’il vous manque des bases importantes sur le HTML, le CSS ou même l’accessibilité, jQuery ne fera qu’empirer tout ça. Il faut avant tout savoir ce que l’on fait et ce que ça implique.
Donc tien de tel qu’une bonne expérience en JS ou autre avant d’appréhender au mieux la bibliothèque.
Défauts de la bibliothèque jQuery
La projet est porté par une grande communauté, nous l’avons vu. Revers de la médaille, il va être très difficile d’organiser tout se petit monde. Ainsi, au fil de l’évolution de la bibliothèque, on pourra trouver des incompatibilités avec les plugins, des méthodes qui jusqu’alors marchaient très bien qui sont abandonnées, etc.
Projet dynamique implique aussi réactivité de votre part. Prenez également bien soin à choisir les bons plugins.
Alternatives
Bon nombre de bibliothèques fleurissent actuellement, de la très simple à la très complexe. Et parfois bien documentées. Aussi n’hésitez pas à tester, ne serait-ce que pour vous faire une idée :
Site officiel
News
Plan de site
SitemapIndex
Flux RSS