Découverte de jQuery

Par neolao le - Javascript

Logo de jQuery En faisant ma veille quotidienne, j'ai encore vu un billet qui citait jQuery. Moi qui pensais que c'était un truc Java, j'me gourais complètement. C'est une librairie Javascript.

Présentation

jQuery fournit plein de méthodes pour manipuler le HTML. Mais ce qu'on remarque en premier, c'est sa méthode $ qui permet de sélectionner rapidement n'importe quoi dans le document.

Par exemple:

// On récupère tous les éléments <p class="note">
var notes = $("p.note");
 
// On récupère tous les éléments <p> qui sont dans un <div>
var list = $("div > p");

La documentation est pas mal. Les manipulations courantes "ajaxiennes" sont là, comme afficher/cacher des éléments ou encore faire des animations et des effets de transparence.

En regardant la source, c'est marqué que l'auteur a cloné moo.fx pour les animations, librairie Javascript que je ne connais pas non plus :) .

Pour commenter cette nouvelle façon de manipuler le HTML que pas mal de gens trouvent géniale, il faudra d'abord que je l'utilise dans un projet. Ca sera le sujet d'un autre billet :) .

Le fichier à inclure pèse un peu moins de 20ko.

La source

Je continue mon investigation dans les sources, histoire de voir comment c'est fait.

Etendre les fonctions

J'ai surtout remarqué le système d'extension. L'auteur a créé une fonction pour étendre ses propres fonctions, et il l'utilise dans sa librairie. Ca lui permet d'avoir des fonctions de base simples, puis d'ajouter d'autres fonctions plus complexes et aussi de modifier les fonctions simples.

Par exemple, il y a une fonction show qui permet d'afficher un élément caché:

show: function(){
	this.style.display = this.oldblock ? this.oldblock : "";
	if ( jQuery.css(this,"display") == "none" )
		this.style.display = "block";
}

Elle est étendue comme ceci:

show: function(speed,callback){
	return speed ? this.animate({
		height: "show", width: "show", opacity: "show"
	}, speed, callback) : this._show();
}

Ca ajoute la possibilité d'animer l'affichage (_show() est l'ancienne fonction).

Bon, ce n'est pas de l'héritage comme on peut en faire en Javascript, c'est juste de l'écrasement en n'oubliant pas de sauvegarder l'ancienne fonction.

Deux types de fonction

J'ai aussi remarqué 2 utilisations différentes des fonctions:

  • les fonctions disponibles par le sélecteur $
  • les fonctions disponibles sans rien sélectionner

Par exemple, pour utiliser la fonction toggle() qui permet d'afficher/cacher un élément, il faut sélectionner quelque chose:

// Je sélectionne <div id="panel"> et je lance toggle() dessus
$("#panel").toggle();

Les fonctions que j'appelle statiques commencent tous par $.. Par exemple:

// On fusionne les 2 listes sans répéter les éléments qui existent déjà
var o = $.merge( [0,1,2], [2,3,4] );

Conclusion

Je trouve l'ensemble bien fait sachant qu'il faut faire le plus court possible.

J'avais tenté d'assimiler d'autres outils qui vante l'AJAX facile, mais je trouvais ca compliqué. Là au moins, c'est juste un ensemble de fonctions annexes qu'on utilise ou pas. Il n'y a pas d'initialisation d'élément ou autre qui rend notre implémentation totalement dépendant de l'outil.

Ce qui pourrait être sympa, ça serait d'exploiter les extensions pour fournir des packs. On a pas forcément envie d'avoir toutes les fonctions de jQuery. On aurait par exemple juste un pack de base pour utiliser le super sélecteur, puis d'autres packs qui ajouteraient les autres fonctions.

Voilà, il faut que je fasse d'avantage de tests. J'espère que je ne me suis pas trop gouré dans mon survol.

Commentaires

7. Le dimanche, janvier 28 2007, 14:37 par arnod'mental

Je me suis penché sur cette librairie à peu près en même temps que toi, à force de la voir citée dans des discussions sur prototype.js
Ayant un peu pratiqué cette dernière, j'ai voulu aller voir ce qu'il en était. Eh ben je suis tombé amoureux de jQuery. Ce que j'apprécie dans cette librairie c'est la façon toute naturelle qu'elle a de te pousser vers un javascript "facultatif" (ou "non-obstrusive javascript", UOJS).
Je n'avais pas encore trouvé dans la programmation JS un cadre de travail aussi facilement assimilable, comme le seraient côté serveur certains frameworks PHP.

8. Le jeudi, février 1 2007, 14:49 par mere-teresa

La méthode $ au lieu du getElementById() vient de prototype.js ! LA librairie qui simplifie l'écriture de ton javascript.

Cela n'enlève rien aux qualités de jQuery, que je vais tester de ce pas.