Introduction

La bibliothèque jQuery propose plein de fonctionnalités en Javascript… et bien sûr AJAX.

Utilisation

Allez, il faut s'y mettre!

Installation

Il y a une seule librairie à télécharger sur le site officiel. On peut choisir entre une version “Source”, utile pour le développement ou une version “Pack” qui est compressée pour de meilleurs temps de téléchargement.

Il faut bien comprendre que la version compressée améliore le temps de chargement si on a une connexion internet moyenne, mais, une fois disponible pour le navigateur, ce n'est pas une version zippée à décompresser par le navigateur! Il faut bien voir que c'est le moteur Javascript qui va décompresser le paquet.

Un autre point est que cela doit être fait à chaque chargement de page, puis viendra l'exécution des déclarations et autres instructions.

Alors que pour une version “Source”, le code final est disponible immédiatement, il n'y a donc pas de décompression à chaque fois.

De plus, avec le système de cache du navigateur, le fichier de jquery est en principe chargée une seule fois et ensuite toujours disponible. Le problème de la taille du fichier n'intervient donc qu'une seule fois dans le cas usuel.

Il faut bien voir ces différences quand on vous propose de charger une version “Pack” à 22 Ko et une version “Source” à 62 Ko.

Ce qui est assez impressionnant, c'est que le temps de décompression est tellement rapide qu'il ne se remarque pas vraiment.

FireBug donne plus de 1.5s pour le chargement du paquet de code. Il faudrait mettre un test pour savoir le temps de décompression. A faire… FIXME

Il faut ajouter un code de ce type dans la page HTML, entre les balises <head> … </head>

<script type="text/javascript" src="http://mon.site.net/js/jquery.pack.js">
</script>

Premiers Pas

La syntaxe de jQuery est assez étonnante au premier abord pour un programmeur habitué au code procédural.

Les intructions sont toutes des fonctions et retournent l'objet utilisé. On peut donc arriver à enchaîner les instructions de manière compacte mais très peu lisible et maintenable.

Mais la puissance de jQuery réside -je pense- dans sa syntaxe de style CSS afin d'appliquer une fonction à un ensemble de composants de la page HTML.

Il devient ainsi possible de séparer le code Javascript du contenu HTML de la page. On revient au modèle MVC bien connu:

Modèle → code HTML
Vue → CSS
Contrôle → Javascript

Un site internet sans effet Javascript peut donc facilement évoluer en intégrant jQuery.

Un site internet respectant ce modèle MVC peut être maintenu plus facilement, car tout est bien séparé et factorisé.

Par exemple, ce code ajoute à tous les liens de la page une instruction pour afficher une alerte à chaque clic souris!

<script type="text/javascript">
// <![CDATA[
$(function() {
  $("a").click(function() {
     alert("Hello world!");
  });
});
// ]]>
</script>

Un peu plus loin

function miwa_ready () 
{
  alert('READY;');
}
 
// appelle la fonction lorsque le document est prêt
$(miwa_ready);
 
// on a l'index avec i, on peut utiliser l'objet courant avec this
// return true => continue la boucle
// return false => arrête la boucle
function miwa_change_src (i)
{
   do_next=true;
   alert(i + " " + this.src);
   return do_next;
}
 
// appelle la fonction miwa_change_src pour chaque image
$("img").each(miwa_change_src);

Core functions

http://docs.jquery.com/Core

Effects functions

http://docs.jquery.com/Effects

Quelques exemples

$(".class").fadeIn();
 
$(".class").fadeOut();

Manipulation functions

http://docs.jquery.com/DOM/Manipulation

Quelques exemples

$(".class").append("<div>hello</div>");
 
$(".class").after("<div>action</div>");

Toujours plus loin

niveau avancé