Premiers pas avec jQuery

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é parmi les divers groupes de développeurs, jQuery.
La documentation et les tutoriels présents sur le site sont complets et suffisent amplement à prendre en main la librairie. 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 clic droit > Enregistrer la cible du lien… sur la version Minified de la Current release.

Il est également possible d’user d’un des réseaux de mise à disposition, CDN

(Content Delivery Network), qui sont en fait des serveurs continuellement en activité et de grande capacité de réactivité et de performances. En ce qui concerne jQuery il en existe trois principaux qui sont référent en la matière :

• Media Temple
• Microsoft
• Google

Il est donc alors possible de directement pointer vers la distribution de notre choix (généralement minimisée) sans avoir à télécharger quelques fichiers que ce soit …

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 nœuds 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 paragraphes 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 rafraichir la mémoire sur les sélecteurs de niveau 2, les sélecteurs de niveau 3 et les sélecteurs de niveaux 4 que nous avons à disposition pour les CSS traditionelles, en se reportant sur les pages du w3c ou encore la page dédié aux sélecteurs spécifiques à jQuery et accessibles 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. 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, peut ne pas interprèter correctement certaines compositions avancées que propose ce genre de gymnastique.

Les commandes peuvent s’enchaîner

Une fois les éléments 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. Intéressant et efficace, non !

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 œuvre, ceci grâce 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.