Si vous ne savez pas ce qu'est jQuery, sachez qu'il s'agit d'une "bibliothèque" Javascript, et passez votre chemin! Sinon vous n'ignorez pas que ce framework permet d'ajouter une couche d'interactivité à vos pages, de façon non intrusive de part la séparation du code dans un fichier dédié. Le Javascript n'est donc plus une usine à gaz grâce à jQuery, qui de plus bénéficie d'une forte popularité et donc d'une large communauté, d’une documentation de grande qualité, d'une quantité phénoménale de plugins ainsi qu'un ensemble performant de fonctions Ajax...
Bien sûr jQuery n'est pas la seule bibliothèque javascript; on peut citer par exemple Prototype ou Mootool qui fonctionnent à peu près selon les même principes. Cependant je l'ai choisi pour les avantages cités plus haut.
Certains estiment que ces framework ne feront pas le poid à l'avenir face aux applications Flash/Flex en AIR (adobe) ou en Silverlight (Microsoft); rien n'est moins sûr puisque selon moi les deux approches ne s'opposent pas mais sont simplement différentes, et ont à voir avec la "philosophie" d'un projet web...
Dans cette 1ère partie nous allons étudier les bases du fonctionnement du framework: l'inclusion des fichiers dans le html, la syntaxe, la façon de sélectionner ou récupérer un élément. Par la suite viendront des exemples et codes d'effets, une sélection de plugins incontournables et leur fonctionnement, Ajax, l'extension Firebug pour Firefox et le bonheur qu'ils procurent! Entre autre...
Heuu... jQuery!?
Au commencement il y avait le Javascript, un code côté client (interprété par les navigateurs) à la mauvaise réputation, utilisé pour ajouter des effets ou de l'interactivité aux pages web mais lourd, intrusif, et d'une complexité parfois repoussante...
Puis il y a le développeur (ou web designer, ou les 2) qui parfois a besoin d'égayer ses pages mais qui hésite ou ne sait pas utiliser Javascript...
Et un jour est né un framework javascript nommé jQuery, sorte d'interface entre le developpeur et le code javascript, fournissant la boite à outil idéale pour utiliser javascript proprement, sans se tâcher, facilement.
Manipuler le DOM
Basiquement, on peut dire que jquery sert à manipuler les éléments du DOM, voire à en créer de nouveaux sans rechargement de page.
Pour faire simple, une page Html est un ensemble de noeuds qui constituent le DOM. Chaque nouvelle balise ouverte est un nouveau noeud, un nouvel élément du DOM. Un noeud peut contenir du texte ou un autre élément (un élément <p></p> contient en général du texte et pourquoi pas des liens...), ou être vide (<img .../> ne contient rien si ce n'est un lien vers une image).
Ces éléments entretiennent des liens de parenté. Un élément A qui en contient un B est dit "parent" de celui-ci. L'élément B est donc "fils" du A. Si l'élément A contient 2 éléments B et C, on dit aussi que B et C sont frères.
Bref tout ça n'est que logique, mais a son importance car jQuery se sert (entre autre) de cette architecture pour "trouver" les éléments sur lesquels il doit agir.
En savoir plus sur le DOM.
Détecter des évènements
jQuery permet de détecter des évènements sur les éléments du DOM (comme un clic de souris), ce qui permet ensuite de déclencher des actions sur cet élément (on parle d'objet) ou sur d'autres. C'est la base de la "programmation objet", en l'occurrence de la programmation orientée DOM. On y reviendra en détail plus tard!
Manipuler les styles CSS
Un preuve de plus de l'efficacité de jQuery, c'est qu'il est tout à fait possible d'agir sur les styles CSS définis sur les éléments du DOM, sans recharger la page. Par exemple une action courante est d'attribuer un classe différente à un élément au passage de la souris ou au clic.
Puisqu'on parle CSS, sachez qu'une grande force de jQuery est d'utiliser les sélecteurs CSS placés dans le Html comme moyen de sélection d'un élément. Ca n'a pas l'air comme ça mais c'est énorme!
Allez, 2 - 3 exemples...
Une petite mise en bouche pour voir à quoi ça ressemble.
- Déclencher quelque chose sur un clic; en l'occurence, un clic sur un élément
h2fera disparaitre celui-ci lentement:$('h2').click(function(){ $(this).hide('slow'); }); - Ajouter une classe à un élément (tâche très courante, de même que supprimer une classe):
$('a').addClass('nomDeLaClasse');
La doc' jQuery
Avant de rentrer dans le vif du sujet, je vous invite à jetter un oeil à la documentation officielle jQuery, très bien faite et toujours d'un grand secours! Dans le menu "API Reference" sont classés les sélecteurs CSS supportés, les expressions pour traverser le DOM, les fonctions Ajax, etc...
Télécharger et inclure la bibliothèque
Avant toutes choses il faut télécharger une version de jQuery, sur le site "officiel" par exemple.
Vous constaterez qu'il existe plusieurs formats, qui diffèrent principalement par leur poid. Le plus léger sera utilisé pour un environnement de production, le plus lourd pour une utilisation locale de développement. Une autre solution consiste à mettre un lien vers une version hébergée en ligne; solution qui ne peut qu'être temporaire.
Une fois ce téléchargement effectué et stocké, on charge la bibliothèque puis le fichier qui contiendra notre code jquery.
Cela s'effectue entre les balises <head></head>:
<!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="includes_js/lib/jquery.js"></script>
<script type="text/javascript" src="includes_js/exemple.js"></script>
</head>
<body>
</body>
</html>
On peut aussi choisir de placer son code directement dans le fichier HTML, bien que cette solution ne soit pas appropriée dès que le code jquery devient volumineux. Voici un exemple:
<!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="includes_js/lib/jquery.js"></script>
<script type="text/javascript">
$(function(){
// ...
});
</script>
</head>
<body>
</body>
</html>
La syntaxe jQuery
Elle est si simple que ca peut faire peur!
jQuery repose sur une seule fonction: $(). Voilà, chiao!
La fonction $()
Cette unique fonction jQuery peut s'écrire des façons suivantes: $() ou jQuery().
Comme toute fonction qui se respecte, elle accepte des paramètres, et retourne un objet, qu'on appelle objet jQuery.
L'objet jQuery
De fait vous pouvez considérer un objet jQuery comme une boîte qui contient un ensemble d’éléments du DOM.
Une fois l’objet jQuery défini, on peut appliquer d’un coup toutes sortes d’opérations sur l’ensemble de ses éléments.
NB: en "programmation orientée objet", on appelle "objet" un élément isolé sur lequel on applique ensuite des "méthodes".
Les paramètres pour $() :
C'est en fonction des types de paramètres qu'on lui passe que la fonction $() réagit.
» une fonction
Très fréquent, le passage d'une fonction à un objet nécessite que le document (fichiers Html et Css, images, etc...) soit complètement chargé. Il serait en effet compliqué de manipuler un élément inexistant! C'est pourquoi on encapsule l'ensemble du script afin qu'il ne soit exécuté que lorsque la page est prête:
$(document).ready(function(){
// le code ici
});
» un élément du DOM
Pour passer un élément du DOM à $(), il suffit de nommer celui-ci, d'après son identifiant (#id).
En lui passant des éléments du DOM, la fonction $() va nous renvoyer un objet jQuery qui va contenir les éléments qui lui ont été passés, et sur lesquels on va pouvoir user et abuser de toute la puissance de jQuery.
$(document).ready(function(){
// sélection de "mon_element"
var mon_objet = $('#mon_element');
});
» une chaîne de caractères (sélection des objets) :
Les sélecteurs CSS
Si vous lisez ces lignes, vous savez qu'un document HTML dit moderne est truffé de class (
.class) et d'id (#id) CSS permettant la sélection des éléments facilement dans les feuilles de styles.Et bien jQuery permet l'utilisation de cette même syntaxe pour traverser le DOM! C'est énorme, très intuitif, et c'est une des grandes forces de jQuery!
Il est alors très facile de cibler un élément pour agir dessus, d'autant que le framework comprend l'ensemble de la syntaxe CSS, pseudos-classes (:hoverpar exemple) et pseudos-éléments compris! Énorme on vous dit! Petit exemple:$(document).ready(function(){ // sélection des liens de la classe .yo var links = $('a.yo'); // sélection du dernier des liens de la classe .yo var last_link = $('a.yo:last'); });Cependant, l'utilisation des sélecteurs CSS dans jQuery est d'une simplicité telle qu'il ne faut pas trop s'enflammer et respecter quelques règles de façon à optimiser le temps de traitement du script; plus précisément, pour ne pas interroger tout le DOM à chaque sélection d'objet!
Autant que possible, il ne faut pas utiliser de sélecteurs vagues, toujours mettre un id (#id) en tête de sélecteur, utiliser au maximum les objets natifs (firstChild, childNodes etc.) qui évitent d’interroger tout le DOM.Les sélecteurs jQuery
Il existe une série de sélecteurs propres à jQuery qui s'avèrent bien pratiques, par exemple pour sélectionner des champs de formulaire ou des balises div qu'on aurait préalablement masquées:
$(document).ready(function(){ // sélection des champs input de #mon_formulaire var mon_objet = $('#mon_formulaire :input'); // sélection des div masqués var mon_objet = $('div:hidden'); });
Et après !?
Maintenant que cette partie théorique pas franchement funky et encore un peu abstraite est terminée, maintenant que l'on sait construire un objet en le sélectionnant, la seconde partie de ce tuto sera orientée sur la pratique et l'expérimentation, sur ce qu'on fait d'un objet jQuery, sur les méthodes qu'on lui applique!
Avec des exemples de codes et leurs effets, puis une sélection de plugins indispensables...
BIGGY SMALLS, le Jeudi 24 Juin 2010 à 11h33 :