Introduction à la bibliothèque javascript : jQuery

Nous allons dans cet article, effectuer une introduction à la bibliothèque javascript : jQuery. Il va sans dire que pour comprendre tant soit peu l'article qui suit, qu'il vous faut un minimum de connaissance Javascript et du modèle objet des documents (DOM). Nous verrons donc la base en vous donnant les détails nécessaires à votre apprentissage afin que vous soyez en mesure de progresser par vous même facilement.

Pour démarrer, il vous faudra une la bibliothèque jQuery. La version la plus récente se trouve ici : http://jquery.com/src/

Hello world!

Comme presque tout ce que nous faisons avec jQuery, ce dernier lit ou manipule le modèle objet du document (DOM). Il faut donc être sûr que nous n'ajoutons des événements ou autres que lorsque le DOM (le document) est complètement chargé. Pour cela, nous enregistrons un événement « document chargé » ou « $(document).ready(function() ».

$(document).ready(function() {
       // Traitement à effectuer lorsque le DOM est prêt
});

Mettre un message d'alerte dans cette fonction n'a pas beaucoup de sens, puisqu'un message n'a pas besoin que le DOM soit chargé. Alors poussons l'exemple un peu plus loin et essayons d'afficher un message lorsqu'un lien est cliqué.

$(document).ready(function() {
   $("a").click(function() {
      alert("Hello world!");
   });
});

Cela devrait afficher le message si vous cliquez sur un lien de votre page.

Un coup d'œil sur notre script :

• $("a") est un sélecteur jQuery, ici, il sélectionne tous les éléments de type lien <a>.
• $ Alias pour la classe jQuery : $() fabrique un nouvel objet jQuery.
• La fonction click() appelée dans la suite est une méthode de l'objet jQuery. Elle associe un événement à tous les éléments sélectionnés et exécute la fonction fournie quand l'événement se déclenche.

Le code suivant génère le même message :

<a href="http://www.pckult.net/#" onclick="alert('Hello world');">Lien</a>

La différence est évidente :

• Nous n'avons pas besoin d'écrire un événement onclick pour chaque élément.
• Nous obtenons une séparation claire entre la structure (HTML) et le comportement (JS) de la même manière que votre feuille de style CSS est discocié de votre code HTML.

---

Utilisation des sélecteurs et des événements

JQuery nous propose 2 approches afin de sélectionner des éléments. La première utilise une combinaison de sélecteurs CSS et XPath passés comme chaîne de caractères au constructeur jQuery (comme par exemple $("div > ul a")). La seconde méthode quant à elle, se sert de différentes fonctions de l'objet jQuery. Les deux approches peuvent être combinées.

Pour essayer certains de ces sélecteurs, sélectionnons et modifions par exemple, une liste ordonné <ol> inséré dans une page.

Tout d'abord, sélectionnons la liste elle-même. Cette liste a comme id « listeOrdonne ». En javascript classique vous pourriez la sélectionner avec document.getElementById("listeOrdonne"). Avec jQuery, cela devient :

$(document).ready(function() {
   $("#listeOrdonne").addClass("rouge");
});

Admettons que notre feuille de style propose une classe « rouge » qui ajoute simplement un fond rouge. Donc, si vous rechargez la page dans votre navigateur, vous devriez voir que la première liste ordonnée obtient un fond rouge. Travaillons maintenant avec les enfants de cette liste.

$(document).ready(function() {
   $("#listeOrdonne > li").addClass("blue");
});

Ce dernier, sélectionnne tous les enfants <li> de l'élément avec l'id « listeOrdonne » et leur ajoute la classe « bleu ».Quelque chose d'un peu plus complexe maintenant : Nous voulons ajouter et enlever la classe quand l'utilisateur survole l'élément <li>, mais seulement pour le dernier élément de la liste.

$(document).ready(function() {
   $("#listeOrdonne li:last").hover(function() {
      $(this).addClass("Rouge");
   }, function() {
      $(this).removeClass("Rouge");
   });
});

De nombreux autres sélecteurs à la syntaxe similaire à CSS ou XPath existent. Des exemples supplémentaires et une liste de toutes les expressions disponibles se trouvent ici, sur le site web de jQuery. Pour chaque événement existant — tel onclick, onchange, onsubmit, etc. — il existe un équivalent jQuery. D'autres événements comme ready et hover sont fournis par commodité pour certaines tâches afin de vous rendre la vie plus facile. Vous pouvez trouver une liste complète des événements sur Visual jQuery dans la section Events du site web. Grace à ces sélecteurs et ces événements vous pouvez déjà faire plein de choses, mais il y a mieux soyez en sur.

$(document).ready(function() {
   $("#listeOrdonne").find("li").each(function(i) {
      $(this).html( $(this).html() + " WOW! " + i );
   });
});

• find() vous permet des recherches supplémentaires parmi les descendants de l'élément déjà sélectionné. Ainsi, $("#listeOrdonne).find("li") est tout à fait similaire à $("#orderedlist li").
• each() parcours chacun des éléments et permet des traitements supplémentaires. La plupart des méthodes tel que addClass(), utilisent each() elles-même. Dans cet exemple, html() est utilisée pour récupérer le texte de chaque élément <li>, lui ajouter du texte et le réaffecter comme texte de ces éléments.

Une autre tâche que vous avez fréquemment à effectuer est d'appeler des méthodes sur des éléments DOM non couverts par jQuery. Imaginez un formulaire que vous voudriez réinitialiser lorsqu'il a été traité correctement par soumission AJAX.

$(document).ready(function() {
   // Réinitialiser un formulaire unique
   $("#reset").click(function() {
      $("#form")[0].reset();
   });
});

Le code précédent, sélectionne l’élément ayant l’ID « form » et appelle la méthode reset() du premier élément sélectionné. Si vous aviez plusieurs formulaires, vous pourriez aussi faire ceci :

$(document).ready(function() {
   // Réinitialiser plusieurs formulaires
   $("#reset").click(function() {
      $("form").each(function() {
         this.reset();
      });
   });
});

Cela sélectionne tous les formulaires au sein de votre document, les parcours et appele la méthode reset() pour chacun d’entre eux.

Un autre besoin que vous pouvez rencontrer est de ne pas sélectionner certains éléments. jQuery fournit filter() et not() pour cela. Alors que filter() réduit la sélection aux éléments qui correspondent à l’expression du filtre, not() fait le contraire et enlève tous les éléments correspondant à l’expression. Imaginez une liste non ordonnée où vous voudriez sélectionner tous les éléments <li> qui n’ont pas d’enfant <ul>.

$(document).ready(function() {
   $("li").not("[ul]").css("border", "1px solid black");
});

Cela sélectionne tous les éléments <li> puis retire de cette sélection tous ceux qui ont un <ul> comme enfant. Ainsi, tous les éléments <li> récupèrent une bordure, hormis ceux qui ont un enfant <ul>. La syntaxe de [expression] est issue de XPath et peut être utilisée pour filtrer par éléments enfants et par attributs.
D'une autre part, il y a des situations où l’on a besoin de sélectionner les éléments précédents ou suivants, dénommés « siblings » (frères et sœurs : enfants du même parent). Imaginez une page de FAQ, où toutes les réponses sont cachées au départ, et affichées lorsque la question est cliquée.

$(document).ready(function() {
   $('#faq').find('dd').hide().end().find('dt').click(function() {
      var answer = $(this).next();
      if (answer.is(':visible')) {
         answer.slideUp();
      } else {
         answer.slideDown();
      }
   });
});

Nous utilisons des enchaînements pour réduire la taille du code et obtenir de meilleures performances, puisque #faq ne sera sélectionné qu’une seule fois. En utilisant end(), le premier find() est annulé, ainsi nous pouvons nous mettre à chercher avec le prochain find() pour notre élément #faq plutôt que les enfants <dd>. À l’intérieur de l'événement « click » nous utilisons $(this).next() pour trouver le « sibling » suivant à partir du <dt> courant. Cela nous permet de sélectionner rapidement la réponse suivant la question cliquée.