Que nos applications web soient basées sur l'utilisation d'AJAX ou pas, l'emploi d'une librairie ou d'un Framework Javascript en simplifie grandement le développement.
Il existe divers outils disponibles en accès libre, et le choix d'un outil en particulier peut parfois être complexe. Nous allons explorer un de ces acteurs qui monte de plus en plus en popularité parmis les divers groupes de développeurs, jQuery.
La documentation et les tutoriaux présents sur le site sont complets et suffisent amplement à prendre en main la librarire. Nous allons donc nous concentrer au travers de cet article à faire ressortir et à mettre à plat un certain nombre de concepts pour exploiter au mieux jQuery.
Installation et mise en place
Commençons par récupérer la librairie sur le site de jQuery.com. Il existe deux versions de la librairie, production et développement. S'il n'existe aucune différence de fonctionnalités entre les deux, leur poids quant à lui, différe : 29 Ko pour la première et 207 Ko pour l'autre.
Il faut donc sélectionner production et ensuite cliquer sur le bouton de téléchargement. Une fois téléchargé, il suffit de placer ce fichier dans l'arborescence de votre site. Vous pouvez garder le nom, à savoir jquery-1.5.min.js et faire pointer une balise script de la page HTML vers ce fichier.
<script language="javascript" type="text/javascript" src="/jquery-1.5.min.js"></script>
Si vous rencontrez un soucis lors du téléchargement, passez directement par la page de téléchargement de jQuery et faites un click droit > Enregistrer la cible du lien... sur la version Minified de la Current release.
Principe d'utilisation
jQuery fournit un certain nombre de commandes qui permettent de rapidement accéder à des méthodes ou des propriétés du document et de chacun des noeuds qui le compose. Le principe est simple : au moyen de règles de ciblage utilisées par les sélecteurs de CSS, il est possible d'agir sur l'élément.
Que cet élément soit unique (document, #id...) ou multiple (.classe, p, div...) l'action sera affectée à l'ensemble du résultat. Il est donc facile de comprendre l'importance de l'utilisation optimale de ces sélecteurs.
Pour utiliser les commandes à appliquer aux éléments, il suffit de passer par l'instruction $() et de placer l'élément à cibler comme argument, par exemple :
$(document)
$('#id')
$('.classe')
$('p > a[href$=.xls]')
Quand et comment appliquer ces commandes ?
Comme lors de toute manipulation du DOM, il faut attendre que le code HTML du document soit intégralement chargé pour être modifiable. En général, en Javascript nous utilisons le gestionnaire d'évènement .onload().
Ici avec jQuery cela est très proche, il s'agit de .ready() qui peut recevoir directement une fonction anonyme comme paramètre.
$(document).ready(function(){
$('p').click(function( ){
alert('Vous venez de cliquer sur un paragraphe');
});
});
Si vous testez la page d'illustration de cet exemple, vous constaterez que l'ensemble des paragraphes du document est affecté par cette instruction. Si maintenant nous souhaitons n'affecter que certaines balises <p>, par exemple uniquement celles contenues dans la balise <div id="special">, il suffit alors de passer un second paramètre qui va redéfinir la portée de la commande.
$(document).ready(function(){
$('p','#special').click(function( ){
alert('Vous venez de cliquer sur un paragraphe de la balise <div> ciblée');
});
});
Cette fois-ci, lors du test sur la page d'illustration on peut constater que seul les paragarphes de la balise ciblée sont affectés.
Quelques ciblages intéressants
Sans entrer dans une approche globale sur les sélecteurs CSS, il est quand même toujours bon de se raffraichir la mémoire sur les sélecteurs de niveau 2 et les sélecteurs de niveau 3 que nous avons à disposition, en se repportant sur les pages du w3c ou encore la page dédié aux sélecteurs sur jQuery.com.
Ceci nous permettra de pouvoir écrire des ciblages qui se veuillent plus fin et qui donc nous permettront toujours d'éviter des surcharges de structures HTML inutiles ou encore un grand nombre de lignes de code tout cela pour arriver aux mêmes résultats. Prenons comme exemple les sélecteurs suivants :
$('tr:nth-child(2n+1)','tbody').addClass('row');
$('td:first-child','tbody').addClass('col');
$('td:only-child','table').addClass('rowlarge');
$('td[title]').addClass('type');
$('td[title$=C]').addClass('BC');
Vous pouvez consulter le résultat sur la page d'illustration et constater que même dans certains vieux navigateurs, les sélecteurs de niveaux 3 sont également interprétés. Bon, 6 bien qu'annoncé comme supporté dans la doc de jQuery, n'interprète pas correctement ce genre de gymnastique.
Les commandes peuvent s'enchaîner
Une fois les élements ciblés, jQuery en crée un pointeur en ressources. Il est possible de chaîner les instructions, afin de naviguer dans l'information depuis ce pointeur.
Par ailleurs, et du fait que la syntaxe javascript de jQuery permet l'utilisation de retour chariot, et autres espaces invisibles, sans casser la finalité du jeu d'instruction, cela permet d'écrire des blocs de code optimal en clarté tout en économisant des ressources.
Le plus simple reste de mettre un exemple d'illustration uniquement composé de trois paragraphes <p>, ces paragraphes contiennent tous des éléments <strong>. Vous pouvez visualiser la page d'illustration et consulter ci-dessous le code utilisé. les commentaires détaillés sont plus bas.
$(document).ready(function(){
$('p')
.append('<hr/>')
.find('+ p')
.css('color', '#c60')
.find('strong')
.css('font-style','italic')
.end()
.end()
.find('strong')
.addClass('souligne')
.end()
})
Dans un premier temps, on cible tous les paragraphes du document et on ajoute après chacun de ces éléments une balise <hr>. Jusque là rien de bien sorcier.
Maintenant imaginons que nous souhaitions changer la couleur d'écriture de tous les paragraphes sauf du premier. Nous pourrions alors mettre en place un nouveau sélecteur en repartant du document et ajouter l'instruction adéquate.
Mais, grâce au chaînage des instructions, il est également possible de partir de ce premier résultat et d'affiner la sélection en ne recherchant, au sein de ce résultat, que les balises <p> déjà précédées d'une autre balise <p>.
D'où l'instruction find('+p') que l'on ajoute à la première instruction en les séparant d'un point. En fait si nous n'indentions pas le code, l'instruction s'écrirait :
$('p').append('<hr/>').find('+ p')
... mais encore une fois grâce à l'utilisation de caractères invisibles qui ne gênent pas le fonctionnement du code, il est possible de le présenter de la manière suivante, qui est beaucoup plus claire humainement parlant :
$('p')
.append('<hr/>')
.find('+ p')
Il ne nous reste donc plus qu'à affecter le résultat de ce sélecteur imbriqué en colorant la couleur d'écriture des éléments concernés. Optons pour un orange brun de type #c60.
Poursuivons l'exemple en imaginant cette fois-ci que nous souhaitions écrire en italique toutes les balises <strong> de ces éléments, à savoir toutes celles contenus dans les paragraphes, hormis celle du premier.
Et bien, ne cherchons pas très loin. Il ne reste qu'à chercher les balises <strong> du sélecteur en cours.... il suffit donc tout simplement d'ajouter une instruction .find('strong') et d'affecter ce résultat en lui appliquant un font-style de valeur italic. Simple non ?
Poursuivons en décidant cette fois, de récupérer l'ensemble des balises <strong>, celles de l'intégralité des paragraphes, pour leur appliquer la classe .souligne. Le soucis c'est que notre sélecteur en cours n'est plus celui de départ, en fait si on regarde le chemin parcouru depuis le premier sélecteur, nous sommes descendu, si l'on peut dire, de deux niveaux.
Il nous faut donc remonter de deux sélecteurs. Il existe pour cela l'instruction end() qui permet de revenir au pointeur du sélecteur précédent. Donc employons cette instruction deux fois consécutivement, et nous pouvons alors exécuter à nouveau la requête find('strong') qui cette fois ci retournera l'ensemble des balises <strong> de tous les paragraphes. Interessant et efficace, non !
Interactions utilisateurs
jQuery permet d'ajouter tout un certain nombre d'écouteurs sur le document ou les éléments qu'il contient. Le principe est indentique à tout ce que nous avons vu précédemment, il suffit de cibler un ou plusieurs éléments en usant du sélecteur et ensuite de lui appliquer un d'écouteur.
Par exemple, dans les exemples précédents nous avons utilisé, deux ajouts d'écouteurs :
$(document).ready()
$('p').click()
Le premier est sollicité une fois le document prêt à être utilisé, c'est à dire, une fois l'ensemble de l'information HTML chargée, et le second ajoute un écouteur de click sur l'ensemble des éléments de type <p> du document. Cette manière d'ajouter des écouteurs aux éléments est un raccourci de la méthode bind().
S'il est vrai qu'il n'y a aucune distinction particulière pour utiliser l'une ou l'autre, la seconde a l'avantage de permettre de très simplement ajouter plusieurs types d'écouteurs sur un même élément et toujours en usant d'une seule instruction :
$('p').click()
$('p').bind('click',function(){})
$('p').bind('mousedown mouseup',function(){})
| blur | focus | focusin | focusout | load |
| resize | scroll | unload | click | dblclick |
| mousedown | mouseup | mousemove | mouseover | mouseout |
| mouseenter | mouseleave | change | select | submit |
| keydown | keypress | keyup | error |
Interactions imbriquées
Le tableau qui illustre le chapitre précédent est en fait basé uniquement sur HTML. Chaque cellule contient un lien de type <a href="/">. Il serait complètement envisageable de le réaliser intégralement en jQuery et pour cela avoir recours à un bout de code du type :
$('td').click()
Bien que cela soit totalement fonctionnel, le système de boucles mis en place par jQuery pourrait rapidement devenir gourmand en ressources dès lors que le tableau augmenterait en volume. Pour contourner cette problématique, il sera alors plus judicieux d'utiliser les particularités de la propagation évènementielle et notamment son principe de 'bulle' qui permet d'intégrer, de manière individuelle, chacun des enfants de l'élément auquel l'écouteur est attaché.
jQuery nous aide en cela dans le sens où il nous propose la propriété target qui renvoi un pointeur vers l'élément qui a intercepté l'action.
De ce fait, en plaçant un écouteur sur la balise <table>, il est très facile d'identifier la cellule qui a intercepté le click. Le code n'est pas plus court, certes, mais grandement plus économe en ressources. Vous pouvez consulter la page d'illustration et visualiser ci-dessous le code utilisé :
$(document).ready(function(){
$('table').click(function(){
alert(event.target.firstChild.nodeValue)
});
});
Interactions multiples
De la même manière qu'il est possible d'ajouter un écouteur sur un élément, il est possible de retirer ce même écouteur. Cependant, et du fait que plusieurs actions peuvent être affectées au même écouteur, il peut y avoir des fonctionnements inattendus qui se produisent.
Pour le mettre en évidence, imaginons la situation suivante :
Ajoutons à l'ensemble des balises <p> du document un écouteur 'click' qui applique une action A. Ajoutons maintenant un écouteur 'cilck' uniquement à la première balise <p> du document, qui cette fois-ci applique une action B.
Utilisons un tierce élément qui a pour fonction de retirer l'écouteur 'click' de cette même première balise <p>. Il est facile de constater depuis la page d'illustration que par cette action, les deux actions A et B sont retirées.
$(document).ready(function(){
$('p:not(#retrait)').bind('click',function(){
alert('Action A');
});
$('p:first-child').bind('click',function(){
alert('Action B');
});
$('p:first-child').addClass('special');
$('p#retrait').bind('click',function(){
$('p:first-child').unbind('click')
$('p:first-child').removeClass('special')
});
});
Si notre objectif dans l'exemple précédent serait de ne retirer que l'action B de la première balise <p>, jQuery nous propose l'utilisation d'espace de nomage lors de la mise en place de nos écouteurs. Les espaces de nomage se mettent en place tout simplement en indiquant sous forme de propriété un nom d'identification à l'écouteur ajouté.
$('p').bind('click.identificateur',function(){});
Dans l'exemple précédent, il nous suffit donc d'identifier les écouteurs lors de leur mise en place et de ne supprimer que l'écouteur désiré pour atteindre les objectifs que nous nous étions fixés. Vous pouvez consulter la page d'illustration et visualiser le nouveau code à mettre en place ci dessous :
$(document).ready(function(){
$('p:not(#retrait)').bind('click.actionA',function(){
alert('Action A');
});
$('p:first-child').bind('click.actionB',function(){
alert('Action B');
});
$('p:first-child').addClass('special');
$('p#retrait').bind('click',function(){
$('p:first-child').unbind('click.actionB')
$('p:first-child').removeClass('special')
});
});
Interactions composées
jQuery nous propose d'autres types d'écouteurs très intéressants à explorer. Par exemple, nous sommes souvent amené à utiliser des interactions à bascule. C'est à dire une interaction qui active / désactive une fonctionnalité à chaqu'un des cliks. Une fois oui, une fois non.
Il existe une mécanique intégrée qui permet de traiter directement cela; toggle(). L'instruction accepte deux fonctions comme paramètres, chacune étant la fonction devant être utilisée en alternance :
$('p').toggle(function(){}, function(){})
En parrallèle de cela, certaines autres fonctionalités sont également intégrées à jQuery, qui permettent de rapidement mettre en place ce genre de besoins. Par exemple, nous avons vu qu'il était possible d'ajouter, ou retirer, une classe CSS d'un élément, en usant de addClass('') et removeClass('').
En utilisant conjointement l'instruction toggle(), cela nous permet de prendre en charge l'affichage / masquage d'un élément. Mais il y a plus simple, il existe une autre instruction qui permet en une seule manoeuvre d'ajouter ou retirer une classe donnée : toggleClass('laclasse').
En allant encore plus loin, et si l'utilisation d'une classe n'est pas strictement nécessaire, il existe encore d'autres jeux instructions qui permettent cette fois-ci d'user d'une d'animation pour obtenir l'effet. Il s'agit des instructions show() / hide() et fadeIn() / fadeOut(). Ces dernières acceptent un paramètre fixe ayant pour valeur slow, normal ou fast.
Mettons cela en pratique afin de mieux évaluer les articulations. Imaginons un document composé de citations courtes <q> et de citations longues <blockquote>. Il peut être intéressant alors de n'afficher que les citations courtes et de n'afficher / masquer les citations longues, qu'à la demande, par click utilisateur sur les citations courtes.
Paradoxalement, la complexité ne vient pas du code jQuery, mais de la mise en relation des citations courtes, avec les citations longues qui leurs correspondent. Pour cela, nous userons de l'attibut title qui sera identique entre les diverses citations en relation. Ceci dit, le plus simple reste encore de laisser parler la page d'illustration et le code qui lui est associé :
$(document).ready(function(){
$('blockquote').hide()
$('q').toggle(function(){
$('blockquote[title="'+this.title+'"]').fadeIn('slow')
},function(){
$('blockquote[title="'+this.title+'"]').fadeOut('slow')
})
})
et nous pourrions même avoir recourt à une autre instruction de la panoplie jQuery qui est fadeToggle et qui réduit encore plus le code, voir la page d'illustration et constater encore une fois la simplicité et la réduction du code :
$(document).ready(function(){
$('blockquote').hide()
$('q').click(function(){
$('blockquote[title="'+this.title+'"]').fadeToggle("slow", "linear");
})
})
Avec cette illustration, nous venons de mettre le pied dans un univers sur lesquels les librairies apportent énormément, l'animation et les effets. Bien que l'une des premières librairies à avoir placer ses marques sur l'animation et/ou les effets soit script.aculo.us, très proche de prototype dont elle est le complément, jQuery, de son coté, n'est pas sans reste sur le sujet et propose de nombreuses possibilités.
Nous n'allons pas déborder outre mesure sur le sujet, mais simplement faire mention de l'une des composantes intéressantes de l'animation avec l'instruction animate(). Cela fera certainement l'objet d'un billet dédié et plus approprié.
Pour aller plus loin
Comme nous venons de le voir au travers de cette première excursion dans l'univers de jQuery, les maîtres mots restent d'une grande simplicité de mise en oeuvre, ceci grace aux sélecteurs CSS, et d'une réelle facilité d'utilisation sur la manière d'employer Javascript pour décrire les actions à mener.
Ceci dit, il faut savoir que nous n'avons fait qu'effleurer le sujet, il reste encore bien des secteurs sur lesquels nous aurions pu nous pencher, tel que la gestion du glissé-déposé, la prise en compte des médias, la manipulation des tableaux, l'application de propriétés, CSS, la gestion et l'utilisation de plugins ou encore l'utilisation de AJAX.
Bref, jQuery reste une des librairies des plus opérationnelles dans nos développements d'applications et sites web. Vous trouverez de plus amples informations et tutoriaux sur les sites suivants :
