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