JQuery: une librairie impressionnante

---

Suite à l'écriture du script phpTliste je me suis intéressé à la librairie jQuery pour rendre ce script plus dynamique en n'alourdissant pas le code. Avant de réaliser mes tests le choix de jQuery était du principalement à :

• Sa taille réduite : 15Ko dans sa version "Gzipped"
• Son utilisation dans Wordpress
• Différentes lectures sur le Web

Premiers contacts

Pour simplifier on peut dire que jQuery se résume à une fonction : jQuery() et bien sur son raccourci $() . Cela est un peut réductif mais c'est le coeur de cette librairie. Si l'on passe à la fonction jQuery() une chaine de caractère en paramètre on va récupérer un ensemble d'élément du DOM répondant à la requête (query) spécifié. Ceci semble tout simple mais je trouve cela fantastique au niveau de la simplicité et de la clarté du codage. Nous avons trois styles de notation pour ces "query" :

• Les selecteurs CSS : ils permettent de sélectionner des éléments via leurs "noms d'éléments HTML" (p, div, img, ...) leurs ID (#monid) leurs class (.maclass) et bien sur on peut combiner cela. Exemple :

  // selection des images ayant comme class c1)
  var e1 = jQuery('img.c1') ;
   
  // selection des liens (a href) ayant comme class jq et 
  //  enfant de l'élément ayant l'ID monid
  var e2 = jQuery('#monid a.jq') ;
   
  // Selection des element  P ayant un attribut "foo" qui commence par "bar"
  var e3 = jQuery('P[@foo^=bar]') ;
   
  // selection des paragraphes ayant comme class c1) ainsi que la division ayant l'ID monid
  var e1 = jQuery('p.c1, div#monid') ;

• Les selecteurs XPath : Personnellement j'utilise pas ce formalisme (que je trouve moins lisible) mais il existe également si cela vous dis. Exemple :

   var e1 = jQuery("/html/body//p") ;
   var e2 = jQuery("body//p") ;
   var e3 = jQuery("p/../div") ;

• Les selecteurs spécifiques : pour enrichir cela il existe des "custom selectors" qui permettent de sélectionner les éléments pair et impair, les element cachés, et bien d'autre Exemple :

  // Selection des lignes impaires du tableau ayant l'ID matable et change leurs styles
   jQuery("#matable TR:event").css({ "background-color":"yellow", "font-weight":"bolder" }) ;

• Pour plus d'information sur les possibilités de ces sélecteurs je vous invite à consulter la documentation officielle http://docs.jquery.com/DOM/Traversing/Selectors

On peut également passer une fonction en paramètre (dans ce cas elle sera exécutée dès que possible) mais cela m'a moins intéressé.

attention ! si la commande jQuery.noConflict() est présente (souvent à la fin du script jquery.js) cela désactive le raccourci $() pour éviter les conflits avec d'autre librairies. Personnelement je conseille de rester à jQuery().

Creusons un peu

Les sélecteurs sont déjà très puissant mais en plus de cela jQuery propose une API très riche permettant de réaliser un grand nombre des actions de bases que nous souhaiterions (Gestion des évènements, effets graphiques, manipulation du DOM, ...).

Exemples :
• code / fadeIn - fadeOut : de la zone bleue ci dessous
• code / show / hide : de la liste dans la zone bleue
• code / ajout d'un élément

Test dans une division

• eee
• ccc

Code Javascript Code HTML

Conclusion

Vous pouvez remarquer que j'ai tout de suite accroché à jQuery. Ma première application utilisant jQuery est PhpTliste Que j'ai adapté en moins de 3 heures (rien de génial vu le très faible nombre de lignes de code). Je vous invite donc à tester cette librairie et je pense proposer prochainement d'autre articles concernant jQuery. jquery.com Le site officiel
la documentation
visualjquery