Manipuler le document HTML pour dynamiser et optimiser les interfaces, simplifier la mise en oeuvre des appels Ajax ou Ahah dans les applications… Cette librairie Javascript est définitivement LE choix des développeurs E SYSTEMES…
Dans cet article nous partons à la découverte du framework Javascript jQuery. Nous verrons comment rechercher des éléments du DOM, les modifier et enfin comment faire interagir notre code avec les actions de l’utilisateur
A) Ciblage des élements du DOM
La première étape est d’attendre que le DOM soit constitué (inutile d’essayer d’interagir avec des éléments qui sont encore inexistants !) Pour se faire on utilise la fonction suivante:
$(document).ready(function() {// le code ici...});Cette fonction, que vous allez retrouver bien souvent, précise au navigateur Web d’attendre que le DOM soit chargé avant d’exécuter les commandes qu’elle contient.
Maintenant que le document est chargé, on peut aller chercher les élements qu’il contient, par exemple : Combien de DIV y a t-il dans le document ? :
alert ($('div').length) ;Dans cet exemple on vient d’utiliser une notion fondamentale: Les sélecteurs. Ces expressions permettent de cibler des éléments par type, attribut, id, class, etc… Ces sélecteurs ressemblent très fortement à ceux des CSS auquels jQuery ajoute une série de fonctionnalités de filtrage très utiles. Les plus couremment utilisés sont :
//cible et retourne le ou les élément(s) correspondant au nom 'BALISE'$('BALISE') //cible et retourne l'élément correspondant à cet identifiant (idem CSS)$('#id') //cible et retourne le ou les élément(s) à cette classe (idem CSS)$('.class') A la manière des CSS, on peut également préciser un chemin :
$('div span.green') // Retournera les spans ayant la classe "green"et dont le noeud parent est un DIVjQuery permet d’aller beaucoup plus loin avec les sélecteurs, on peut filtrer très précisement afin d’obtenir exactement le noeud recherché. Exemple:
$('#navigation ul:first li a[href="index.php"]')B) Manipulation des noeuds
Maintenant que nous sommes capables d’aller chercher des élements du DOM on peut désormais les manipuler.
$('#content').html('Hello World')Ce code va placer le contenu Hello World dans l’élement ayant pour ID content.
Avec jQuery c’est bien souvent la même méthode qui va permettre d’assigner ou de retourner une valeur. Ainsi le code précédent nous permet d’assigner le contenu HTML de l’élement, le code suivant va nous retourner le contenu HTML :
$('#content').html()Les manipulations les plus courantes consistent à modifier le contenu HTML du noeud comme on l’a vu ci dessus, à modifier les attributs (ex: href) avec la méthode attr ou encore les styles css via la méthode css. Il existe encore beaucoup d’outils pour manipuler les noeuds que je vous laisse découvrir dans la documentation.
C) Gestion des événements
Maintenant qu’on a vu comment trouver et manipuler les éléments du DOM, on peut entrer en interaction avec les actions de l’utilisateur, on parle ici des événements. La méthode qui permet d’assigner des comportements à des éléments s’appelle Bind.
$('#btn').bind('click', function(){ alert("Clic !") ; $(this).css('color', 'red') ;});Ce bout de code déclenche une alerte lorsqu’on clique sur l’élément ayant l’identifiant #btn et change la couleur du texte en rouge.
Il existe de nombreux types d’événements que l’ont peut intercepter avec jQuery :
blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,mouseleave, change, select, submit, keydown, keypress, keyup, error, ready
Conclusion
J’espère que cette modeste introduction à jQuery vous a montré les capacités et la simplicité de mise en oeuvre de ce framework. L’objectif étant de poser les bases de l’utilisation des méthodes à savoir sélection, manipulation et interaction avec les événements.
Le site du framework jQuery (anglais).
Découverte jQuery (français)
Qui utilise jQuery (anglais)