Le framework jQuery

JQuery est, aujourd'hui, le framework incontournable pour "dynamiser" un site internet. Il facilite grandement l'utilisation de javascript en s'occupant des problèmes de compatibilité entre les navigateurs. De plus, sa syntaxe est vraiment très simple.

Le script se présente en 2 versions : une version minifiée et compressée (à privilégier sur un site en production) et une version de développement.

Intégration du script dans une page web

Pour pouvoir utiliser jQuery dans une page web, il faut, bien-sûr, commencer par appeler le script dans la partie <head> de la page. 2 solutions sont possibles : utiliser l'API de Google ou héberger soi-même le script.

1/ Utiliser l'API de Google :

Ici, on va utiliser la version 1.6.4. Il suffit de changer le numéro de version dans l'URL pour utiliser une autre version de jQuery. Attention : certaines versions plus anciennes de jQuery peuvent ne pas être hébergées par Google.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"> </script>

2/ Héberger soi-même le script jQuery

Il est également tout à fait possible de télécharger le script et de l'installer sur son propre serveur.
Ici, on a mis le script dans un dossier nommé "jquery" et situé à la racine du serveur :

<script src="jquery/jquery.min.js" type="text/javascript"> </script>

Utilisation basique

Voici comment utiliser jQuery. Le principe est simple : on choisi un élément à l'aide d'un sélecteur et on lui applique une ou plusieurs fonctions. La sélection d'un élément fonctionne comme dans les CSS et supportent mêmes les sélecteurs CSS3.

Le code suivant va ajouter dynamiquement la class "first" à tous les premiers éléments de liste.

$("li:first-child").addClass("first");

/* $("li:first-child") est le sélecteur */
/* addClass() est la fonction */ 

La liste des sélecteurs et des fonctionnalités sont disponibles sur le site officiel. Je ne m'étendrais pas sur le sujet car la documentation du site est déjà bien complète et bien faite.

Un dernier point important pour utiliser jQuery est le "lanceur". En effet, il est recommandé, dans la plupart des cas, d'attendre le chargement complet de la page avant de commencer l'éxécution de scripts. jQuery possède pour cela un snippet tous simple qui va envelopper nos fonctionnalités et déclencher leur éxécution seulement quand la page sera chargée.

$(document).ready(function(){
   // Mettre les fonctions ici
});

Un exemple concret

Voici une page HTML prête à l'emploi pour faire des tests et expérimenter la puissance de jQuery !

<!DOCTYPE html>
<html lang="fr">
<head>
<title>Dynamiser une page avec jQuery</title>

<!-- ajout de jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function(){
alert('La première ligne va rougir');
$("li:first-child").addClass("first");
});
</script>

<!-- un peu de CSS -->
<style type="text/css">
.first{ color: #f00;}
</style>

</head>
<body>

<ul>
<li>1e ligne</li>
<li>2e ligne</li>
<li>3e ligne</li>
<li>4e ligne</li>
</ul>

</body>
</html>

Liens utiles

Site officiel : http://jquery.com/

Script minifié (1.6.4) : http://code.jquery.com/jquery-1.6.4.min.js

Documentation : http://docs.jquery.com/Main_Page

jQuery, les bases : http://docs.jquery.com/How_jQuery_Works

Toutes les catégories

Rechercher dans les ressources

Dans la même catégorie...

Comment rendre cliquable une &lt;div&gt;?

Quelle utilité ? Prenons par exemple le sommaire d'un blog dont le code HTML pourrait ressembler à ça[...]

Bouton 'Page précédente' en javascript

Le web est constitué de millions (et de millions) de pages. Les internautes se déplacent généralement sur la toile[...]

Le framework jQuery

JQuery est, aujourd'hui, le framework incontournable pour "dynamiser" un site internet. Il facilite grandement l'utilisation de javascript en s'occupant[...]