jQuery, une bibliothèque JavaScript simple et efficace

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 :

Par Olivier PATRY - mercredi 24 janvier 2007 à 18:42

Conception Web - #329 - Lu 25051 fois - Intérêt du billet: 2.23(47) - Fil RSS

Trackbacks

Le jeudi 25 janvier 2007 à 13:55, de Sutekidane, le blog de Thanh Nguyen :: #

Liste francophone pour JQuery

Pour faire suite à mon billet sur jQuery et à celui d'Alsacréations, voici

Le samedi 3 février 2007 à 12:04, de Le blog d'Aozeo :: #

jQuery, la seule bibliothèque JavaScript

Au début, il y a eu Prototype. La bibliothèque web 2.0 qui nous réconciliait enfin avec le JavaScript injustement mal-aimé. Une syntaxe malgré tout assez complexe et peu extensible, d'où la création de Script.aculo.us, qui s'y greffe pour lui...

Les trackbacks pour ce billet sont fermés.

Evaluez ce billet

Commentaires

Le mercredi 24 janvier 2007 à 19:12, par Thanh :: site :: #

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

Le mercredi 24 janvier 2007 à 19:34, par izo :: site :: #

à 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/

Le mercredi 24 janvier 2007 à 19:51, par Kaoru :: site :: #

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

Le mercredi 24 janvier 2007 à 20:12, par Winny :: #

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 !

Le mercredi 24 janvier 2007 à 20:18, par Olivier :: #

@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.

Le mercredi 24 janvier 2007 à 20:23, par Cerebral :: site :: #

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.

Le mercredi 24 janvier 2007 à 20:32, par giz404 :: site :: #

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).

Le mercredi 24 janvier 2007 à 20:34, par dunjl :: #

"à 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

Le mercredi 24 janvier 2007 à 20:38, par Winny :: #

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 !

Le mercredi 24 janvier 2007 à 21:03, par piouPiouM :: site :: #

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...

Le mercredi 24 janvier 2007 à 21:57, par nako :: #

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 ?

Le mercredi 24 janvier 2007 à 22:50, par Mobman02 :: site :: #

@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.

Le mercredi 24 janvier 2007 à 22:51, par Olivier :: #

@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

Le jeudi 25 janvier 2007 à 00:06, par Nicolas :: #

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

Le jeudi 25 janvier 2007 à 00:08, par Olivier :: #

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

Le jeudi 25 janvier 2007 à 01:32, par Olivier :: #

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

Le jeudi 25 janvier 2007 à 05:47, par Jérémie :: site :: #

«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 :)

Le jeudi 25 janvier 2007 à 07:59, par piouPiouM :: site :: #

@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.

Le jeudi 25 janvier 2007 à 09:10, par Mobman02 :: site :: #

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

Le jeudi 25 janvier 2007 à 09:48, par Hadrien :: site :: #

À 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 ;)

Le jeudi 25 janvier 2007 à 09:50, par Hadrien :: site :: #

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

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

Le jeudi 25 janvier 2007 à 10:15, par piouPiouM :: site :: #

@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... )

Le jeudi 25 janvier 2007 à 10:42, par Hadrien :: site :: #

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 !!)

Le jeudi 25 janvier 2007 à 10:55, par Pierre6020 :: #

- "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/

Le jeudi 25 janvier 2007 à 11:20, par Hadrien :: site :: #

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à.

Le jeudi 25 janvier 2007 à 11:29, par piouPiouM :: site :: #

@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...

Le jeudi 25 janvier 2007 à 11:53, par Hadrien :: site :: #

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.

Le jeudi 25 janvier 2007 à 12:13, par Olivier :: #

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.

Le jeudi 25 janvier 2007 à 12:28, par Olivier G. :: site :: #

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...

Le jeudi 25 janvier 2007 à 12:44, par Hadrien :: site :: #

$("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

Le jeudi 25 janvier 2007 à 12:56, par Raphael :: site :: #

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

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

Le jeudi 25 janvier 2007 à 13:06, par Olivier :: #

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...

Le jeudi 25 janvier 2007 à 13:30, par Bman02 :: site :: #

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 ?

Le jeudi 25 janvier 2007 à 13:39, par Olivier :: #

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é ;)

Le jeudi 25 janvier 2007 à 13:54, par Thanh :: site :: #

Olivier : split est aussi ton ami :)

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

Le jeudi 25 janvier 2007 à 14:09, par Jérémie :: site :: #

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...

Le jeudi 25 janvier 2007 à 16:23, par Eldebaran :: site :: #

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/...

Le jeudi 25 janvier 2007 à 18:55, par FlorentG :: #

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é...

Le jeudi 25 janvier 2007 à 19:03, par Olivier :: #

@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.

Le vendredi 26 janvier 2007 à 09:19, par FlorentG :: #

Effectivement :jap:

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

Le jeudi 1 février 2007 à 03:25, par Zzz. :: #

@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)

Ajouter un commentaire

Les commentaires pour ce billet sont fermés.