JQuery, une librairie javascript performante (5393 lectures)

200815/03

jqueryParmi les meilleures librairies Javascript open source, on trouve ExtJS, Prototype et JQuery.

Nous allons faire une courte présentation de cette dernière qui réconcilie les développeurs les plus réfractaires avec le javascript pour enrichir leurs pages web.

JQuery, qui fêtait ses 2 ans en janvier 2008, présente plusieurs avantages sur ses concurrents :

  • une version compressée de 14 Ko seulement (contre 100 Ko pour Prototype et 400 Ko pour ExtJS),
  • un apprentissage très rapide, sous réserve de posséder les bases du DOM( Document Object Model),
  • une documentation précise, exhaustive, et complète,

L'article n'a pas pour vocation a se substituer aux nombreux tuturiaux existants déjà, vers lesquels le développeur devra se tourner de préférence. Il veut juste montrer que le javascript peut servir à enrichir les pages web, dès lors qu'il n'est pas obstructif et qu'il permet d'améliorer l'ergonomie des sites web.

$ et la magie jQuery s'opère

Pas de faute de frappe dans le titre, le $ constitue toute la "magie" de jQuery.

Un objet jQuery est une boîte contenant un ensemble de noeuds du DOM.

Pour trouver tous les paragraphes du DOM, il suffit d'écrire :

  1. $('p')

Pour trouver tous les paragraphes qui ont la classe 'plop' du DOM, on écrira :

  1. $('p.plop')

Simple, non ? C'est le credo de jQuery : write less, do more.

Allons un peu plus loin, avec une structure HTML telle que :

 

Un exemple avec une liste
  1. <ul id="menu">
  2. <li><a href="#l" id="item1" clas="current">lien 1</a></li>
  3. <li><a href="#" id="item2">lien 2</a></li>
  4. <li><a href="#" id="item3">lien 3</a></li>
  5. <li><a href="#" id="item4">lien 4</a></li>
  6. </ul>
  7.  
  8. <div id="content1"><p>contenu</p></div>
  9. <div id="content2"><p>contenu</p></div>
  10. <div id="content3"><p>contenu</p></div>
  11. <div id="content4"><p>contenu</p></div>

 

Il va falloir au chargement de la page masquer les contenus content2, content3 et content4 via javascript et non via la CSS afin de rester non-obstructif ; ceci s'effectue très simplement grrâce à Jquery et se passe de tous commentaires :

  1. $("div#content1").css({ display: "none"});
  2. $("div#content2").css({ display: "none"});
  3. $("div#content3").css({ display: "none"});
  4. $("div#content4").css({ display: "none"});

 

L'idée est de pouvoir récupérer l'id du lien cliqué, de lui appliquer une classe CSS définie, et d'afficher le contenu relatif au lien tout en masquant le contenu relatifs aux autres liens.

  1. $(document).ready(function() {
  2.    // on masque les contenus
  3.    $("div#content1").css({ display: "none"});
  4.    $("div#content2").css({ display: "none"});
  5.    $("div#content3").css({ display: "none"});
  6.    $("div#content4").css({ display: "none"});   

  8.   // à l'évènement onclick sur un lien du menu
  9.   $("ul#menu > li > a").click(function() {
  10.     // id du lien cliqué
  11.     var idLink = $(this).attr("id");
  12.    
  13.     // on récupère le nombre uniquement
  14.     var NumberLink = idLink.split('item');
  15.    
  16.     // nombre de li total
  17.     var NumberofLi = $("ul#menu li").length;
  18.  
  19.     // on masque tous les contenus sauf celui du lien appelé
  20.     for (i=1; i <= NumberofLi; i++) {
  21.       $("#content"+i).not(idLink).hide();
  22.     }
  23.    
  24.     // on montre le contenu du lien appelé
  25.     $("#content"+NumberLink[1]).show();
  26.    
  27.     // on enlève la class current de la li la possédant
  28.     $("ul#menu > li.current").removeClass("current");
  29.    
  30.     // on ajoute la class current à la li parente cliquée
  31.     $(this).parents("li").addClass("current");
  32.   });
  33.  
  34. });

 

 Ce qu'on voit très bien avec Jquery, c'est qu'on a aucune injection de javascript dans la page HTML.

A partir du moment où le code HTML est bien structuré, sémantique, Jquery peut parcourir le DOM très simplement, de manière non-obstructive, avec une syntaxe très rapide d'apprentissage. 

Dernière modification : 01/10/2008

Catégorie : Web - Jquery -

A découvrir également :

 

Le phishing ou hameçonnage

Validation des données avec CakePHP

Commentaires

2.  posté le 07/07/2009 par h1fra

Merci beaucoup, c'est exactement ce que je cherchais !

3.  posté le 13/06/2010 par elo

Pour le $('p'), la fonction document.getElementByClassName fait aussi bien et plus rapide (car standard).

Pour le côté instrusif (et non "obstructif"), ça n'a rien à voir avec jQuery, le javascript peut être "intrusif"ou pas. C'est une fonctionnalité.

On peut en effet écrire en JS standard :
document.getElementById('objet').onclick=function() {};

Le pb avec jQuery est qu'il est orienté débutant (il diffère un peu trop de la logique Javascript (et de programmation), comme par exemple appliquer une méthode d'un objet renvoie l'objet lui-même est illogique.
Quand on sait que ce genre de programmation peut varier (regardez prototype qui est de plus en plus abandonné), on se pose des questions sur la maintenance du code dans le temps (qui fera du jQuery dans 5 ans ?)

Ajouter un commentaire

Les champs en gras sont obligatoires.

Commentaire:

Anti-spam :
Veuillez répondre à la question suivante avant de valider votre commentaire.

La somme de 18 plus 11 est égale à