« retourner à la page principale du blog
Introduction à jQuery
Vous devez trouver que je fais beaucoup d’articles « Introduction à … »! Je veux simplement m’assurer que tout le monde sait au moins de quoi je parle avant d’aller plus loin.
Libraire JavaScript
jQuery est une librairie JavaScript légère et de plus en plus populaire. Il couvre, entre autres, la modification du DOM, avec ou sans animation, la gestion des évènements et le AJAX. Il ne pèse que 15Kb lorsque gzippée par le serveur. Même Microsoft est en train de l’intégrer dans sa suite Visual Studio !
Avantages d’utiliser jQuery
Pourquoi utiliser une librairie JavaScript alors qu’on pourrait tout coder à la main? Il y a plusieurs bonnes raisons, et je n’en n’énumererai que quelques unes.
Premièrement, c’est beaucoup plus rapide de programmer une fonctionnalité avec jQuery que de l’écrire à partir de rien. Il permet donc de rehausser la valeur de vos projets de conception web en diminuant le temps consacré ou bien en vous permettant d’implémenter des fonctionnalités plus poussées.
Ensuite, il est conçu pour fonctionner dans tous les navigateurs récents (ainsi qu’Internet Explorer 6). Si vous programmez souvent en JavaScript vous savez à quel point chaque navigateur offre une version différente de JavaScript et à quel point ça peut rendre le code complexe et illisible.
Aussi, le fait d’utiliser une librairie aussi poussée peut vous éviter d’avoir recours à Flash, qui est une technologie propriétaire. Flash est, encore aujourd’hui, un « gâcheur de party » lorsque le site est visionné à partir d’un téléphone.
Télécharger jQuery
Allez chercher le fichier JavaScript de production sur le site officiel de jQuery. Ensuite, il suffit de l’insérer dans votre <head> comme avec un autre script normal:
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>Utilisation de base
Dans jQuery, il y a la fonction $ et le namespace $ qui contient toutes les autres fonctions.
La fonction $ a plusieurs utilitées différentes dépendemment des paramètres qu’on lui passe. Si on lui passe une fonction en paramètre, jQuery exécutera cette fonction lorsque le DOM sera chargé (sans pour autant attendre que toutes les images soient chargées). Exemple:
$(function(){ /* faire quelque chose */ });Si on lui passe une chaîne de caractère qui contient un sélecteur CSS, il va retourner l’ensemble des noeuds qui répondent aux conditions. Exemple (qui en soit ne sert à rien):
$('ul#nav');On peut affecter cet ensemble de noeuds avec des méthodes de jQuery. Si on voulait faire disparaître comme un panneau à glissière l’ensemble retourné de l’exemple précédent, on ferait:
$('ul#nav').slideUp('fast');La fonction $ peut également recevoir du code HTML en paramètre. Elle créera alors un noeud (DOM element). Encore une fois, employé seul, ça ne sert pas à grand chose, mais on pourra utiliser ce noeud ailleurs. Exemple:
$("<li>déconnexion</li>").appendTo("ul#nav");Le namespace $ contient les fonctions qui ne sont pas nécessairement attachées à un noeud. Il y a entre autres certaines fonctions AJAX et les fonctions utilitaires (utilities). Exemple:
$.post('/handler.php',
{'action': 'achat', 'produit': 434},
function(data){/* faire quelque chose */}
);La fonction et le namespace $ sont en fait des racourcis vers la fonction et le namepsace jQuery. Les deux lignes de code suivantes sont donc équivalentes:
$('ul#nav').slideUp('fast');
jQuery('ul#nav').slideUp('fast');Le racourci $ a été ajouté pour accélerer le codage. Par contre, certaines autres librairies JavaScript l’utlisent aussi. Si vous faite la conception d’un site internet qui utilise plusieurs librairies, vous pouvez dire à jQuery de libérer $; il suffit d’utiliser la fonction $.noConflict().
Gestion des évènements
Vous pouvez attacher des évènements à des ensembles de noeuds retournés par la fonction $. L’avantage d’utiliser jQuery pour gérer les évènements est, encore une fois, qu’il armonise la syntaxe pour ne plus avoir à se soucier des différences entre les navigateurs. Pour associer une fonctionnalité à un clic, on utilise .click(fonction). Pour générer un clic, on peut aussi utiliser .click() (sans paramètre). Exemple:
$('#bouton').click(function(){/* faire quelque chose */});Exemple
Avant de conclure, on va regrouper tout ce qu’on vient de voir pour faire un petit exemple. Lorsque le DOM est chargé, on va donner vie à un bouton qui permet de cacher et afficher la navigation.
$(function(){ // exécuté lorsque "DOM ready"
$('#bouton').click(function(){
$('ul#nav').slideToggle('fast');
});
});Résumé
jQuery est une librairie légère dont le coeur ne comprends pas une tonne de fonctions. Cette caractéristique rend son apprentissage plutôt rapide et sa documentation très concise. Beaucoup de plugins sont disponibles et il est facile d’en créer soi-même. Elle est donc une librarie de choix pour la conception de sites internet « web 2.0″.
30 juin 2009 à 15:41
[...] Introduction à jQuery – Hooba Studios [...]
25 mars 2011 à 0:02
[...] : http://www.snoupix.com/initiation-a-ajax-avec-jquery-partie-1_tutorial_20.html – Hooba (FR) : http://www.hooba.ca/blog/2008/introduction-a-jquery/ Catégories : AJAX et Javascript, ASP, Autres, CMS, Développement, PHP, Référencement, [...]