jQuery, une bibliothèque JavaScript simple et efficace

Actualité par
Créé le , mis à jour le (76452 lectures)

Développeurs JavaScript, ceci est pour vous, réticents au développement JavaScript, ceci est pour vous aussi !

jQuery est une bibliothèque JavaScript permettant de se simplifier la vie à moindre coût pour tout ce qui est manipulation d'une page HTML.

jsquery

Vous n'aimez pas écrire des tartines de code pour faire tout le temps la même chose, gérer les implémentations du dit code sur chacun des navigateurs du marché, copier/coller ces tartines d'un site Web à l'autre, les bibliothèques de code sont vos amies. Mais ce n'est pas le tout d'avoir une bibliothèque qui nous mâche le travail, encore faut-il qu'elle soit bien faite, bien documentée, légère, pratique, efficace en somme, c'est là qu'intervient jQuery.

N.B. Une bibliothèque est tout un ensemble cohérent de fonctions permettant de s'affranchir des tâches rébarbatives et répétitives. Il s'agit ici d'un simple fichier JavaScript à inclure (grâce à la balise <script>) dans votre code HTML avant d'utiliser l'un des éléments de cette bibliothèque (cf l'exemple plus bas).

Il existe d'autres bibliothèques bien sûr, mais au moment de choisir, j'ai regardé sur Internet ce qui existait (on pense bien sûr aussitôt à http://www.prototypejs.org/), et il découle que la tendance est à jQuery ces derniers temps.

Je n'ai pas personnelement testé les différentes bibliothèques existantes, je me suis fié aux différentes sources préconisant jQuery et force est de constater que j'ai eu raison !

Ce que j'ai particulierement apprécié :

  • la possibilité d'utiliser les sélecteurs CSS 2.1 (et même CSS 3) pour accéder aux éléments du document HTML à traiter (il est possible d'utiliser Xpath aussi) ;
  • la simplicité enfantine d'utilisation et d'apprentissage ;
  • la concision du code résultant (une dizaine de ligne pour un effet type fade in/out) ;
  • la légèreté de la bibliothèque en elle même (une vingtaine de kilo-octet compressée (à utiliser en production), une cinquantaine de kilo-octets non compressée) ;
  • l'extrême simplicité d'utilisation d'effets (fade in/out, drag'n'drop, ...) ;
  • la documentation simple et bien faite (API présente sur gotApi pour ceux qui connaissent (attention, version 1.0.3, il y a eu pas mal de changement avec l'arrivée de la version 1.1.x, mais l'API sur gotApi devrait être mise à jour d'ici peu.)) ;
  • les nombreux tutoriels existant ;
  • la possibilité d'intégrer du code JavaScript "classique" en toute transparence.

J'en oublie certainement et je commence seulement à l'utiliser !

Un petit exemple de code pour réaliser un "changement de contenu" avec effet fade in/out

Code JavaScript

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	// des variables pour stocker l'élément
	// en cours d'affichage
	// et celui que l'on voudra afficher au clic
	var current;
	var next;
	// lorsque le document est chargé totalement
	$(document).ready(function() {
	// on masque toutes les divisions de classe partie (sélecteur CSS)
	$("div.partie").hide();
	// on choisit la division à afficher par défaut
	current = $("div#premier");
	// et on la montre
	current.show();
	
	// pour chacun des liens du menu de navigation
	// lorsqu'on clic dessus
	$("div#navigation ul li a").click(function() {
	 	// on stocke la "cible" à afficher
		next = $("div"+this.getAttribute("href"));
	 	// on masque la zone courante
	 	// et une fois ça fait (fonction "callback")
		current.fadeOut(1500, function() {
	 	 	// on affiche la zone "cible"
			current = next;
			current.fadeIn(1500);
			});
	 	// on finit par annuler l'action sur le lien
		return false;
	});
});
</script>

Code HTML

<div id="navigation">
<ul>
 	<li><a href="#premier">premier contenu</a></li>
 	<li><a href="#deuxieme">deuxieme contenu</a></li>
</ul>
</div>

<div id="premier" class="partie">
bla bla
</div>
<div id="deuxieme" class="partie">
bli bli
</div>

N.B. Il y a peut être une meilleure façon de faire, je débute dans l'utilisation de la bête, j'ai pu manquer un point d'amélioration ;)

De cette façon, lorsqu'on cliquera sur un des liens du menu de navigation, au lieu d'arriver à l'ancre correspondante, on affichera la "zone" pointée (préalablement masquée). Je pense que le code est suffisament limpide pour qu'il se passe de tout commentaire ! C'est là qu'est toute la puissance de cette bibliothèque ;) (bon, je commente quand même pour les néophytes, mais aves les commentaires, vous vous rendrez bien compte que le fonctionnement de la bibliothèque est extrêmement cohérent.)

A vous de jouer !

Vous trouverez des explications plus fournies et plus techniques sur ces diverses ressoures :

Commentaires

Thanh a dit le

C'était l'anniversaire de jQuery il y a pas si longtemps et en cadeau hop, un billet sur Alsa :)

izo a dit le

à noter que jquery est en standart dans SPIP 1.9.2 beta 3 et dans Dotclear 2

il existe aussi ce site : www.jquery.info/

Kaoru a dit le

Je vais me faire taper mais library ne se traduit pas par bibliothèque ?

Winny a dit le

Très bien vu, Kaoru !

Je parlais il y a quelques jours dans les commentaires de ce même blogue de la responsabilité linguistique des intervenants d'Alsacréation (oui moi je l'écris avec un accent et sans S ;-)) qui, s'ils reprochent aux internautes leurs fautes de français, diffusent parfois des anglicismes "gros comme le bras" sans même s'en apercevoir !

En voici une preuve supplémentaire !

Olivier a dit le

@izo > Merci pour le complément de ressources, je l'ajoute au billet !
@Kaoru > oui désolé, écrit un peu vite sur ce coup :), je corrige.

@Winny > on a compris ton discours je crois hein, pas la peine de rajouter une louche de confiture. Chaque rédacteur du weblog écrit encore comme il l'entend, si on préfère utiliser un anglicisme, c'est encore nous que ça regarde, Alsacréations par contre, c'est avec un "s" et point barre, c'est ainsi et pas autrement, ce sont "les créations" donc tu peux bien faire comme tu veux pour les leçons de morale ou je sais pas quoi, mais quand c'est un nom type "nom de marque", tu n'as aucun droit de rectification sur l'orthographe.

p.s. pas la peine de pourrir les commentaires de remarques linguistiques, nous sommes ici bien loin de ce genre de considérations.

Cerebral a dit le

jQuery est un excellent outil qui m'a donné envie de redonner sa chance au JS. Sa facilité d'utilisation et son intégration du "vrai onload" comme je l'appelle (Domcontentloaded via document.ready) en sont les grands atouts. Note: il y a moyen d'utiliser une version compressée (19ko), c'est d'ailleurs recommandé sur le site officiel.

giz404 a dit le

Je ne me suis pas encore penché dessus, mais il est vrai que ces frameworks font tout pour nous réconcilier avec JavaScript. Rien que le fait de ne pas à avoir à se soucier de la compatibilité inter-navigateurs, c'est royal.

Je vais me plonger dans jQuery très prochainement, car je dois mettre en place une sorte de pseudo-popup pour un client, et je compte me baser sur ThickBox (script basé sur jQuery).

dunjl a dit le

"à noter que jquery est en standart dans SPIP 1.9.2 beta 3 et dans Dotclear 2"
jquery est également incluse dans Drupal 5.0

Winny a dit le

Olivier > Oula ! Très limite comme réponse. T'es fatigué ? Je crois qu'il y avait un petit clin d'oeil dans ma parenthèse concernant Alsacreations. C'était une blague !!!!!

Au-delà du ton, il ne s'agit "d'une leçon de morale" comme tu le dis, loin de là... mais vous consacrez des billets à des "remarques linguistique(s)" et, puisqu'il s'agit d'un blogue, les membres de la communauté sont, je crois, en droit de vous répondre...

Quant à mes commentaires, s'ils t'emmerdent, tans pis ! Je crois que mon propos est de circonstance puisque ton billet et celui de Raphael datent tous les deux d'aujourd'hui !

piouPiouM a dit le

jQuery est une bonne librairie/bibliothèque ( :-p ) JavaScript qui permet de réaliser des projets complexes plus simplement qu'auparavant, notamment grâce à sa syntaxe simple, l'enchainement des actions et bien évidemment grâce aux sélecteurs CSS et XPath ^_^


@Olivier : pour gagner en performances, préfère utiliser le sélecteur $('#premier') à la place de $('div#premier'). En effet jQuery se base sur getElementById pour sélectionner un élément par son Id. Hors, lorsque l'on précise la balise, il devra ensuite réaliser une recherche sur cette dernière en plus.

Une suggestion de code :
mehdi.gimp4you.eu.org/BAS...

nako a dit le

jQuery a l'air en effet très sympathique.
Cependant, dans le cadre d'une utilisation professionelle, je me posais la question de la licence. Je n'ai pas réussi à trouver ma réponse.
Sous quelle licence est distribué jQuery ?

Mobman02 a dit le

@nako : C'est écrit dans les sources :
Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.

Sinon j'ai découvert cette librairie avec Dotclear 2, et depuis je ne peux plus m'en passer.

Je vous conseille aussi d'aller voir ces plugin : interface.eyecon.ro/demos
C'est un peu dans le style de script.aculo.us mais c'est basé sur jQuery et c'est très bien fait.

Olivier a dit le

@piouPiouM > ahh merci pour cette précision ! En effet c'est bon à savoir ;)

J'ai procédé ainsi parceque je le fais en CSS :)
Je vais regarder ton code de plus près pour me perfectionner.

@nako > après un rapide coup d'oeil, je n'ai rien vu non plus sur le site, mais dans le fichier jquery.js on peut lire ceci :
----------------
* Copyright (c) 2006 John Resig (jquery.com)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
----------------

@Winny > ""Je crois que mon propos est de circonstance""
Non, bien au contraire, il est question de jQuery ici, pas de français.
Si tu veux poursuivre la discussion, j'ai une adresse email à laquelle tu peux me contacter :
olivier.patry@gmail.com

Nicolas a dit le

Bonjour, je connais bien votre site mais c'est une première pour les billets de forum... Jquery est très bien fait, c'est l'équivalent du wiki de mediabox pour CSS !

NB : parce que j'aime faire du mauvais esprit, je note la perle suivante dans l'article : "se simplifier la vie à moindre coup..."

Du coût, on repense au billet de Raphaël Gotter sur le comme-même ;-D

Olivier a dit le

@Nicolas > corrigé, semaine dure, désolé :s (j'ai pourtant relu ^^)

Olivier a dit le

Re au sujet des licences d'utilisation :
docs.jquery.com/Licensing

Jérémie a dit le

«la légèreté de la librairie en elle même (une cinquantaine de kilo-octets)»

Heu, 50ko chargés arbitrairement, ce n'est pas rien, mais alors pas rien du tout.

Je ne critique pas jQuery, effectivement je n'en entends que du bien. Et pour ce genre d'usage générique, de simili API générique, 50ko c'est peu. Seulement, rajouter 50ko à chaque page (modulo le cache de l'UA), ça rend la citation ci-dessus un peu ubuesque :)

piouPiouM a dit le

@Jérémie : il est disponible une version compressée (jquery.pack.js) qui ne pèse « que » 19 Ko, ce qui en fait une librairie relativement légère, à la vue des fonctionnalités offertes.

Mobman02 a dit le

Surtout que jQuery permet de séparer complètement le xhtml du javascript (fini les onclick et onload etc...).

Hadrien a dit le

À ce que je l'ai testé, jQuery ne fonctionne pas sous Safari, mais surtout il n'apporte rien de plus que ses "concurrents". Du coup, j'ai du mal à comprendre l'engouement général pour cette bibliothèque depuis ces dernières semaines. Sûrement une mode…
Personnellement, je conseille de jeter un œil à Yahoo User Interface. Une API Javascript complète avec une excellente documentation et sous licence BSD qui plus est. Vous pouvez jeter un œil à ce que ça donne sur la version 2 d'OverBlog disponible ici : www.over-blog-v2.com puis sans le '-v2' à partir de Mardi prochain. Créez vous un blog et allez jeter un œil à l'administration ;)

Hadrien a dit le

@ Mobman02 : Pas besoin de bibliothèque pour ça… Javascript tout seul le permet :

tonElement.onclick = function() {};
ou
tonElement.addEventListener('click', function() {}, null);

piouPiouM a dit le

@Hadrien : jQuery fonctionne sous Safari...

La limitation de fonctionnalités est lié à Safari lui même ; par exemple la gestion de certains évènements souris sur des champs de formulaires comme checkbox/radio (cf www.quirksmode.org/js/eve... )

Hadrien a dit le

Ben la moitié des exemples que j'ai pu voir ne fonctionnent pas du tout sur Safari. Dire que c'est la faute à Safari n'est pas la bonne chose à faire quand on se vante d'être une bibliothèque cross platform. Pour le cross platform, YUI et proto font très bien l'affaire. Alors pourquoi une énième lib ?

(Attention, ceci est un avis personnel. Chacun utilise les logiciel qu'il souhaite !!)

Pierre6020 a dit le

- "Alors pourquoi une énième lib ?"

Le mieux est d'essayer : après avoir utilisé Prototype, jQuery est vraiment très intéressant dans son approche (et je n'ai jamais eu de problème avec Safari ou Konqueror).

Je te renvoie vers deux liens, tu devrais mieux t'en rendre compte :
jquery.com/blog/2006/08/2...
www.visualjquery.com/maga...

J'en profite pour parler de Fork Javascript, à surveiller de très près :
forkjavascript.org/

Hadrien a dit le

Erf…

In Prototype:

new Insertion.After('myId', 'Arbitrary HTML');
In jQuery:

$('#myId').after('Arbitrary HTML');

Hm… C'est la même chose hein. Si jQuery c'est Proto mais en changeant le nom des fonctions, c'est pas génial.

Enfin bon de toute façon, je préfère YUI qui n'a rien à voir avec ceux là.

piouPiouM a dit le

@Hadrien : un très bon exemple de la syntaxe légère mais tout aussi puissante de jQuery (merci le support des sélecteurs CSS 3) -> jquery.com/blog/2006/10/1...

Hadrien a dit le

Mwé… Ça me parait quand même très déboussolant quand on fait du javascript. Je comprends que le but est d'avoir très peu de code à écrire, mais ça demande à mon avis autant d'apprentissage, voire plus que pour du javascript pur. Je suis pas sur que ça rende son accès plus aisé aux débutants. Le seul gain dans l'affaire sera d'alléger nos scripts de quelques lignes.

Olivier a dit le

Hadrien > les sélecteurs CSS, c'est extrèmement simple et répandu, ça me paraît bien plus facile que de connaître les équivalent JS classiques.

Rien que pour les classes !
Et niveau longueur d'écriture, se farcir du getElementById("..").getElementsByTagName("...") à tout va, à la fin c'est pénible, d'autant qu'il faut ensuite boucler dessus et j'en passe.

Olivier G. a dit le

Attention, attention, Fil (du projet SPIP) vient d'annoncer (article.gmane.org/gmane.c...) sur les listes SPIP la création de la ML jQuery-fr : listes.rezo.net/mailman/l...

Hadrien a dit le

$("tr:nth-child(odd)").addClass("odd");

'tr:nth-child(odd)' c'est un sélecteur CSS ? Si c'est le cas, ok, ça peut être intéressant. :p

Raphael a dit le

Je n'y connais rien en JS, mais "nth-child" est un sélecteur CSS3, oui.

www.w3.org/TR/2001/CR-css...

Olivier a dit le

Il y a un mélange sélecteur CSS/XPATH.
Ce choix est motivé par la volonté de fournir un système de sélection simple et puissant qui se base sur des choses connues.
Par ailleurs, il est tout à fait possible de combiner sélecteur full CSS ou full JS "classique".

docs.jquery.com/DOM/Trave...

Bman02 a dit le

Hello,
Avec IE 6 (sous win2k), c'est loin d'être top...
L'exemple donné, ainsi que l'autre "ptt code" (mehdi.gimp4you.eu.org/BAS... ne fonctionne pas...
La fonction element.getAttribute("href") renvoie en effet "urldemapage#ancre" au lieu de juste "#ancre"...

Y a t'il à votre connaissance d'autres bugs de ce type avec cette librairie ? ou peut être un patch téléchargeable quelque part ?

Olivier a dit le

Bman02, oui piouPiouM a relevé ce bug suite à la remarque du non fonctionnement sous IE, il a indiqué le bug sur le site de jQuery.

En attendant, il suffit de procéder à un petit substring sur le lastIndexOf("#") et le tour est joué ;)

Thanh a dit le

Olivier : split est aussi ton ami :)

PS : quelle est la capitale de la France ? Hilton?

Jérémie a dit le

Effectivement, 19ko c'est un peu plus raisonnable (pas tant que ça parce que gzipé ça ne perd plus rien, alors que l'autre version perdait plus).

Et oui, si je ne suis pas technicien javascript et ne peut donc pas juger des pros et cons de jQuery face à d'autres biblio de ce type, pas mal de softs y sont passés. SPIP comme cité plus haut (même si en général SPIP c'est plutôt l'exemple de ce qu'il ne faut pas faire), Textpattern, il me semble aussi qu'on s'y approche chez MODx, et quelques softs de forums.

Après, si c'est de la mode ou pas, il suffira de voir comment la chose tient la route sur la durée...

Eldebaran a dit le

Soit dit en passant, il est amusant de constater cette mode de la fonction "$", sachant que les identifiants commençant par ce caractère sont normalement réservés aux outils de génération de code :
safari.oreilly.com/059610...
javascript.crockford.com/...

FlorentG a dit le

Oula oula oula oula oula

S'il-vous-plaît, pas de billet de ce genre O_o !

Ou alors mettez au moins un mot à la fin sur l'énorme discussion "pour ou contre les librairies JS", y'a énormément de débat sur l'utilité réelle de ce genre de lib. Souvent on a uniquement besoin d'une ou deux fonctions, pas de l'ensemble proposé...

Olivier a dit le

@FlorentG, certes mais il est bien d'en parler pour ceux qui ont besoin de beaucoup des fonctionnalités proposées ;)

Pour une bibliothèque plus paramétrable, il y a moofx que je n'ai pas testée mais qui propose différentes choses. Je ne sais pas jusqu'à quel point c'est comparable à jQuery par exemple, il me semble que c'est plus pour les effets concernant moofx.

FlorentG a dit le

Effectivement :jap:

Sinon y'a Robert Nyman qui a sorti un truc très sympa : www.robertnyman.com/domas...

Zzz. a dit le

@Jérémie : "pas mal de softs y sont passés. SPIP comme cité plus haut (même si en général SPIP c'est plutôt l'exemple de ce qu'il ne faut pas faire),"
------

Aah attention à ce que tu dis toi hein ? :D C'est pas parce que je viens troller chez toi et que par hasard on va lire/poster au même endroit que ça t'autorise à être vulgaire !!! :D ;)

(Zzz. spip-contribien défendant son bifteack et s'excusant pour le HS)