Via le biais des plugins, tout le monde a pu commencer à faire des effets « wahou » en deux secondes et a pu commencé à vouloir écrire ses propres plugins… Rendons à César ce qui est à César et remercions jQuery pour avoir apporté une idée différente du framework javascript. Dans une discussion future, je me ferai peut-être moins respectueux en évoquant les différents maux que cette librairie a pu apporter.

Rapidité < Qualité

Ce qui reste très agaçant, surtout lorsqu’on commence à prendre un peu de niveau dans son métier, c’est quand un chef de projet vous pose cette question: « pourquoi tu n’as pas utilisé un plugin tout fait à la place ? »; alors que vous auriez bien aimé tout de même avoir la chance de pouvoir démontrer que vous pouviez faire mieux et surtout : plus adapté au projet.
Qui ne s’est jamais arraché les cheveux à faire rentrer un plugin dans un projet en bidouillant l’impossible, ajoutant des options dans l’objet d’options même si ce n’était pas vraiment le meilleur endroit…

Mais plus loin encore, est-ce là un vrai travail responsable que d’accepter l’utilisation de plugins par son équipe technique ?
Non seulement l’équipe ne risque pas de prendre du niveau et très certainement se ramollir, voir se démotiver, mais en plus, vous rendez votre travail dépendant de ce qui se passe ailleurs, chez les autres… dépendant donc de la veille « plugin ».
C’est un peu comme à l’époque du designers que les intégrateurs bridaient afin de pouvoir avoir des maquettes intégrables « comme on l’a toujours fait depuis des années« , à force on obtenait presque toujours les mêmes briefs: « A gauche donc, on aura une sidebar, à droite.. le contenu et puis au milieu, un jQuery Carousel de chez bidule »; Grisant.
D’ailleurs, la version 2013 de ces pratiques sera « en haut, le header, au milieu… et bah un bon gros jQuery mansonry hein ? t’en dis quoi ? le footer ? Oh y’en a pas besoin... »

Donnez-vous une année comme cela, sans faire un peu de programmation chez vous et vous allez vite voir que vous allez très rapidement perdre vos compétences.

Petite blague à part: Vous n’avez jamais remarqué que sur stackoverflow, à chaque question en js natif il y a toujours une armée de réponses type « pourquoi tu n’utilises pas jQuery« . Et si demain vous ne deviez pas l’utilisez, pour des raisons d’optimisations ? Et si sans jQuery vous vous rendiez compte que vous ne compreniez qu’une partie de la DOM API et donc, à votre métier ? True story que cela et je vous la raconterai peut-être en temps voulu… mais autre sujet, autre journée.

L’artisanat français

Oui monsieur…

Il reste aussi le problème de l’honnêteté.
La plupart de ces plugins sont souvent réalisés à des fins de promotion personnelle, donner à ceux qui ne savent pas programmer l’occasion d’avoir un petit plus sur leur blog ou de réutiliser plusieurs fois un travail réalisé pour un client ou encore simplement démontrer un concept, une idée simple.

Il est évident qu’à un certain niveau de la hiérarchie, on ne se préoccupe pas trop de comment un projet est commencé et fini, il faut tout simplement qu’il soit fini.
Là où cela devient préoccupant, c’est lorsque le chef de projet technique ne s’en préoccupe pas non plus… et encore plus préoccupant d’entendre ce genre de propos dans la bouche d’un développeur front-end.

C’est peut-être du au fait qu’en France, au delà de 8 à 10 ans en tant que technicien, il est inconcevable de ne pas rechercher ou accepter un magnifique poste de manager et / ou de chef de projet, poste qui fera systématiquement, si on n’y prête pas garde, perdre le fil de la veille technologique (en fait plutôt les compétences que la veille).
Quelle belle récompense pour tant d’année de bon et loyaux services, mais ça, c’est déjà un sujet assez récurrent sur ce blog et je n’y reviendrais plus (promis juré !)

Cela est peut-être aussi du au fait que depuis les plugins à tout va, on sait qu’ un site Internet coutera moins cher et sera surtout réalisé plus rapidement. Par conséquent, « on » est toujours plutôt gagnant… enfin sauf pour les « techos » mais eux, ils attendent patiemment leur 8 à 10 ans pour devenir chef de projet (quoi, vous voulez pas être CP ou manager ? Mais puisqu’on vous dit que vous n’avez pas le choix !)

La seule question qui restent à mes yeux importante :  Est-ce un service que nous rendons au métier ?
Je m’étonne bien souvent de notre retard sur les points de l’UX, de l’UI et du design de site Internet mais n’est-ce pas avant tout parce que nous travaillons presque toujours à l’inspiration en regardant un peu ce qui a déjà été fait et finalement très peu en workshop ? Que les commerciaux vendent d’office des promesses impossibles à tenir ? Ou, peut-être est-ce parce qu’on s’obstine à rechercher des ninjas en PHP/MYSQL/AS3/CSS3/HTML5/JS/ASP au lieu de profils spécialisés dans l’interface utilisateur… Ou pire, que certains bloggeurs influents parlent partout de webresponsive sans exactement comprendre les implications (encore un bon sujet potentiel que celui-ci)

Be open! Oui mais…

Alors, au final, merci jQuery mais par pitié, vous, développeurs de plugins, soyez fermes avec vos licences d’utilisations et menez la vie dure aux entreprises qui utilisent vos plugins sans en avoir l’autorisation. De cette manière, nous pourrons ainsi tous combattre l’utilisation de plugins en entreprise tout en permettant aux gens de s’inspirer et/ou regarder directement le code via GitHub pour apprendre sans pour autant réutiliser… sinon dans quelques années, il faudra ajouter la ligne « google-isation de plugins » sur nos CVs.

Il serait d’ailleurs intéressant de savoir ce que pense certaines personnes de l’utilisation de leurs plugins pour des projets professionnels vendus à quelques dizaines voir centaines de milliers de brouzoufs… qui se souvient encore de l’utilisation d’un blog Dotclear pour un site Internet vivant à promouvoir certaines lois que l’état était désireux de passer ? Et qui se souvient du prix à laquelle ce Dotclear avait été vendu ?

Après avoir tenu ce discours : «Non les formulaires, on ne peut pas les styler, désolé» pendant des années, les webdesigners les plus tenaces sont revenus avec des exemples de sites en nous disant : «Tu me dis que c’est pas possible, mais là sur tel site, ils l’ont fait.»”

Ok, reprenons : styler des éléments de fomulaire html, ça ne donne pas un résultat terrible, mais… avec javascript on arrive à voir un résultat plutôt satisfaisant. La question est : faut-il utiliser du JS pour faire de la cosmétique ? Parce que la seule chose qu’on fait avec JS ce n’est pas styler des éléments de formulaires, mais au mieux cacher des éléments de formulaires (ou les rendre invisibles) pour leur substituer des éléments graphiques, au pire remplacer des éléments de formulaires par d’autres balises html qui elles pourront être stylées avec CSS. Par exemple, remplacer un select par une liste non ordonnée. Est-ce que le jeu en vaut la chandelle ? Est-ce qu’on va alourdir les pages et retarder leur affichage pour quelques effets que l’utilisateur ne remarquera même pas ?

La question que tout le monde se pose (ou peut-être qu’il n’y a que moi qui me la pose), c’est pourquoi on ne peut pas styler les éléments de formulaire ? Ok pour les input de type texte (et encore pas avec tous les navigateurs), mais pourquoi pas les listes déroulantes de type select, les cases à cocher ou autres boutons radio ? Y-a-t-il une raison à ça ou les fabricants de navigateurs, se sont dit : «oups, on a oublié les formulaires !» «Laisse tomber on va dire que c’est fait exprès.»

Argumentons dans le sens où c’est fait exprès : les internautes ont l’habitude de leur système d’exploitation, du coup ils vont toujours identifier ces éléments quelque soit le navigateur dans lequel ils sont, et ça en terme d’utilisabilité c’est imbattable ! Mouais, pas vraiment convaincant tout ça…

Est-ce qu’on se posait la question avant ? «Fais moi ça en flash c’est plus joli». Ce serait de la faute de flash, alors ? Toujours est-il qu’on trouve de plus en plus de plugins qui permettent de faire ça facilement, tentant, non ? J’en ai essayé deux ou trois, je vous donne mon avis :

jQuery UI selectmenu

Pas des plus facile à manipuler, mais très complet, il couvre largement le spectre des utilisations de menus avec des listes déroulantes. Trop de styles inline qui complique le skinning des css externes. A noter que ce plugin utilise les attributs ARIA pour l’accessibilité.

jQuery UI checkbox

Simplissime. Par exemple pour une case à cocher il suffit d’initialiser le script de cette façon $('input').checkBox();
Et la case à cocher est remplacée par un span avec la classe “ui-checkbox”, il ne reste plus qu’à appliquer les CSS.

jQuery Stylish select

Je ne l’ai pas testé personnellement, mais ça a été utilisé sur un projet récent dans ma boîte. Complètement customisable en CSS et ultra light.

Uniform

Je suis tombé sur celui-ci il y a quelques jours, il me parait assez complet et facilement skinnable, une image sprite pour tous les éléments (vous pouvez créer des thèmes et les proposer sur le site), une fois les éléments stylés la navigation au clavier me parait correcte, reste juste à mettre plus en avant le focus sur les éléments.

Après c’est vous qui voyez… Personnellement, je ne trouve pas ça indispensable, mais pourquoi pas si les contraintes de conception ne sont pas trop draconiennes.

Bon je repose ma question aux concepteurs de navigateurs : Pourquoi les éléments de formulaire ne peuvent être stylés de la même façon que les autres balises html ?

Le but est bien sûr d’optimiser jQuery pour ces nouvelles plates-formes, mais ce n’est pas tout : une version mobile de jQuery UI est également prévue !

Et plutôt que d’adapter jQuery UI à ces nouvelles contraintes, le projet consiste dans un premier temps à réfléchir sur les évolutions possibles du framework, de manière à ce qu’il prenne nativement en compte ces nouvelles interfaces.

Un des problèmes posés actuellement par jQuery UI est son système de gestion des thèmes graphiques, Theme Roller, qui est trop « simple » pour permettre de créer des interfaces complexes.

Prototype d’interface pour jQuery UI Mobile

Évidemment, une évolution en ce sens profiterait également au web « classique ».

Mon petit doigt me dit que ce qui va en sortir risque bien de s’appeler jQuery UI 2, librairie à la fois adaptée au mobile et au desktop, de manière évolutive selon la plate-forme de destination.

Vous pouvez voir quelques prototypes et suivre les étapes de développement sur cette page : http://wiki.jqueryui.com/Mobile

jQuery UI suit donc la même direction que ExtJS, qui vient récemment de sortir en « version » mobile : Sencha Touch.

Mais pourquoi associe-t-on systématiquement tactile (nouvelles possibilités d’interaction) et mobile (espace d’affichage réduit, bande passante et puissance limitées − pour l’instant) ?
Les deux problématiques (nouveau type d’interaction, et nouvelles dimensions d’écran) sont différentes, et existent aussi indépendamment l’une de l’autre.

Tout ceci me donne l’impression que le domaine des applications web (HTML5 Apps en buzz-language ;-) ) est dans une période de transition, et se dirige doucement vers une unification de ces « multiples web », tout en respectant les spécificités et contraintes de chaque interface.

Rendez-vous dans 10 5 2 ans !

Vous connaissez certainement jQuery, l’excellente bibliothèque Javascript. Non ? Alors c’est ici.

Le développement DOM/Javascript repose en grande partie sur les événements. Vous savez certainement qu’il est possible d’affecter un événement à un objet jQuery, c’est à dire qu’une fonction se déclenchera lors d’un événement sur l’objet sélectionné.

jQuery propose deux manières de définir les événements : nous allons les analyser.

Les « Event Helpers »

Joli nom. Pas très causant, mais sympa comme tout.

Il s’agit d’une série de méthodes, reprenant le nom des événements DOM. Elles prennent comme unique paramètre une fonction, et leur nom correspond à celui de l’événement DOM, allégé de son préfixe « on » (onclick, onmouseout, etc. ).

Si aucun paramètre n’est passé, cette méthode déclenche l’événement.

Si une fonction est passée en paramètre, elle s’exécutera lorsque l’événement sera déclenché (depuis le code comme vu juste au-dessus, ou « naturellement »).

Vous trouverez la liste complète de ces méthodes sur la page de documentation des événements : http://docs.jquery.com/Events.

Définir un événement

Commençons par un exemple. Tout le monde aime les exemples !

L’événement onclick peut être défini sur un objet jQuery à l’aide de la méthode click() à laquelle est passée une fonction :

$("a#test1").click(function(){
  window.alert("Clic sur a#test1.");
});

La fonction passée en paramètre peut attendre un paramètre. Il représente l’objet événement, et possède plusieurs propriétés et méthodes. J’ai l’habitude d’utiliser une variable nommée « e » (event), mais on peut évidemment utiliser un autre nom.

La méthode preventDefault() de cet objet permet d’empêcher le navigateur de déclencher son comportement par défaut.
Sur un lien, cette méthode empêchera simplement le navigateur de le suivre.

Exemple.

$("a#test1").click(function(e){
  e.preventDefault(); // Empêche le navigateur de suivre le lien.
  window.alert("Clic sur a#test1.");
});

Démonstration : a#test1

Déclencher un événement depuis le code

Il est parfois utile de déclencher un événement depuis le code. Pour cela, les mêmes méthodes seront appelées, mais cette fois sans paramètre.

Un exemple. « 例 », dirait un japonais, mais vous n’êtes pas obligé de me croire.

Nous allons réutiliser l’événement précédemment défini dans le premier exemple, en le déclenchant depuis le code.

Lorsque le lien du second exemple ( « a#test2 » ) sera cliqué, un clic sera déclenché sur le lien du premier exemple ( « a#test1 » ).

Exemple.

$("a#test2").click(function(e){
  e.preventDefault();
  window.alert("Clic sur a#test2, déclenchement du clic sur a#test1...");
  $("a#test1").click();
});

Démonstration : a#test2

La méthode ready()

Vous avez certainement déjà utilisé la méthode ready() d’un objet jQuery contenant l’objet DOM document.

Si un script est défini et exécuté dans la partie <head> d’une page et qu’il essaie de manipuler des éléments, le navigateur se comportera comme s’ils n’existaient pas.

Le script est exécuté au moment où il est lu par le navigateur (sauf avec l’attribut defer). Puisque la suite du document n’a pas encore été chargée, le navigateur n’a pas connaissance de ces éléments.

Pour remédier à cela, il est possible d’attacher un événement onload sur l’objet window, qui sera déclenché lorsque la page et tous ses éléments seront chargés.

Exemple.

$(window).load(function(){
  // Le code placé ici sera déclenché
  // au chargement complet de la page.
});

Il s’agit de l’équivalent jQuery du célèbre window.onload = function(){}. Évidemment, si un élément appelé sur votre page met un certain temps à répondre (une image hébergée ailleurs, ou votre outil d’analyse de statistiques basé sur un script externe), un long moment peut s’écouler avant que votre script ne soit exécuté.

C’est pourquoi la méthode ready() de l’élément document a été créée : la fonction affectée à cet événement sera déclenchée dès que le document HTML et les CSS seront chargés.

Le mécanisme de cet événement jQuery est plutôt intéressant. Il ne s’agit pas d’un événement natif DOM, ou pas tout à fait : Mozilla Firefox, Opera et les dernières versions de Webkit déclenchent bien un événement DOMContentLoaded lorsque le document HTML est chargé, mais Opera n’attend pas que les styles soient chargés pour le déclencher. On ne peut pas vraiment lui donner tort, puisque sur le brouillon de la spécification HTML5 rien n’est précisé à propos du chargement des styles.

jQuery résout ce problème sur Opera en attendant que chaque feuille de style soit disponible. Pour cela, la propriété disabled de chacun des objets contenus dans document.styleSheets (chaque fichier CSS) est testée jusqu’à ce qu’elle renvoie false, c’est à dire lorsque la CSS est chargée.

Pour Internet Explorer, l’astuce consiste à tester la méthode document.documentElement.doScroll("left"); jusqu’à ce qu’elle ne retourne plus d’erreur. Dès que c’est le cas, cela signifie que les styles sont chargés.

Pour Webkit, c’est la propriété document.readyState qui est testée, puis un test similaire à celui utilisé pour Opera se charge de vérifier le chargement complet des CSS.

Certains navigateurs supportent l’événement document.DOMContentLoaded (Mozilla Firefox), c’est donc ce dernier qui est utilisé.

Pour les navigateurs ne supportant pas document.DOMContentLoaded et n’entrant pas dans les cas particuliers traités par jQuery (Opera, Webkit, Internet Explorer), c’est un simple événement window.onload qui est utilisé.

Voilà, vous oubliez ça, jQuery le fait pour vous :

function bindReady(){
	if ( readyBound ) return;
	readyBound = true;

	// Mozilla, Opera (see further below for it) and webkit nightlies currently support this event
	if ( document.addEventListener && !jQuery.browser.opera)
		// Use the handy event callback
		document.addEventListener( "DOMContentLoaded", jQuery.ready, false );

	// If IE is used and is not in a frame
	// Continually check to see if the document is ready
	if ( jQuery.browser.msie && window == top ) (function(){
		if (jQuery.isReady) return;
		try {
			// If IE is used, use the trick by Diego Perini
			// http://javascript.nwbox.com/IEContentLoaded/
			document.documentElement.doScroll("left");
		} catch( error ) {
			setTimeout( arguments.callee, 0 );
			return;
		}
		// and execute any waiting functions
		jQuery.ready();
	})();

	if ( jQuery.browser.opera )
		document.addEventListener( "DOMContentLoaded", function () {
			if (jQuery.isReady) return;
			for (var i = 0; i < document.styleSheets.length; i++)
				if (document.styleSheets[i].disabled) {
					setTimeout( arguments.callee, 0 );
					return;
				}
			// and execute any waiting functions
			jQuery.ready();
		}, false);

	if ( jQuery.browser.safari ) {
		var numStyles;
		(function(){
			if (jQuery.isReady) return;
			if ( document.readyState != "loaded" && document.readyState != "complete" ) {
				setTimeout( arguments.callee, 0 );
				return;
			}
			if ( numStyles === undefined )
				numStyles = jQuery("style, link[rel=stylesheet]").length;
			if ( document.styleSheets.length != numStyles ) {
				setTimeout( arguments.callee, 0 );
				return;
			}
			// and execute any waiting functions
			jQuery.ready();
		})();
	}

	// A fallback to window.onload, that will always work
	jQuery.event.add( window, "load", jQuery.ready );
}

Vous l’aurez compris, il s’agit d’un extrait du code de jQuery.

Il existe deux autres « Event Helpers » particuliers, appelés « Interaction Helpers ». Les deux fonctionnent de la même manière, à la différence qu’ils attendent deux fonctions en paramètre plutôt qu’une.

La méthode hover() permet de spécifier deux événements, pour l’entrée et la sortie du curseur souris dans la zone que couvre le ou les éléments de notre objet jQuery. Mon vieil ami Superman appelle ce comportement le « survol ».

Ils ne sont pas tout à fait équivalents aux événements onmouseover et onmouseout, existant nativement en DOM.
En utilisant ces derniers, lorsque le curseur se déplace d’un élément à un autre au sein de l’élément sur lequel est attaché l’événement (par exemple lorsqu’il passe sur une image se trouvant à l’intérieur d’un élément <div>), onmouseover sera déclenché sur l’image (sur laquelle aucun événement n’est défini), et « remontera » jusqu’à son conteneur, pour déclencher une seconde fois l’événement. La cible de l’événement va également changer, ce sera l’image et non le conteneur.
En sortant le curseur de l’image, même problème : c’est cette fois l’événement onmouseout qui sera déclenché sur le conteneur, mais avec l’image pour cible.

Pour en savoir plus, c’est ici : http://www.quirksmode.org/js/events_mouse.html

Si nous ne voulons pas de ce comportement, il faut vérifier que l’élément survolé au déclenchement de l’événement corresponde bien à l’élément sur lequel l’événement a été défini. C’est fastidieux. jQuery s’en charge automatiquement lorsque vous utilisez hover().

La seconde méthode est toggle(). Elle est équivalente à la méthode click(), mais la deuxième fonction passée sera déclenchée une fois sur deux à la place de la première, ce qui est très intéressant, par exemple pour faire apparaître et disparaître en alternance un élément à chaque clic sur un bouton. Vous pouvez également passer plus de deux fonctions, elles seront alors exécutées les unes à la suite des autres, à chaque clic.

Les méthodes bind et trigger (affecter et déclencher)

La méthode bind()

Vous pouvez utiliser la méthode bind() pour affecter un ou plusieurs événements à un objet jQuery. Voici une première différence avec les « Event Helpers » vus au-dessus. Le premier paramètre doit être une chaîne de caractère, représentant les événements (séparés par des espaces) sur lesquels sera exécutée la fonction passée en deuxième paramètre. Allez !

Exemple.

$("a#test3").bind("mouseover mouseout", function(e){
  $(this).text( "-- " + $(this).text() + " --" );
});

Démonstration : a#test3

Deux événements « spéciaux » sont disponibles avec la méthode bind() : mouseenter et mouseleave.
Ils correspondent à l’entrée la sortie du curseur sur un élément, sans déclencher l’événement lorsqu’un élément enfant est survolé. Ces événements correspondent à ceux définis par la méthode hover().

La méthode trigger()

Comme pour les « Event Helpers », il est possible de déclencher depuis le code un événement défini sur un élément. La méthode trigger() sera utilisée.

Exemple.

$("a#test4").bind("click", function(e){
  e.preventDefault();
  jQuery("a#test3").trigger("mouseover");
});

Démonstration : a#test4 : un clic sur ce lien déclenchera un survol sur l’élément a#test3 (démonstration précédente)

Supprimer un événement avec unbind()

Supprimer un événement est trivial. Il suffit d’appeler la méthode unbind() en lui passant en paramètre le ou les événements à supprimer. Si aucun événement n’est passé en paramètre, tous les événements affectés à cet objet jQuery seront supprimés.

Vous avez également la possibilité de passer en second paramètre une référence vers une fonction en particulier, de manière à ne pas supprimer toutes les fonctions attachées à cet événement.

Exemple.

function affiche1(){
  window.alert('1');
};
function affiche2(){
  window.alert('2');
};

$("#test").bind("click", affiche1);
$("#test").bind("click", affiche2);

// Si le script s'arrêtait ici, un clic sur l'élément afficherait "1" puis "2"

$("#test").unbind("click", affiche1);

// Mais la première fonction attachée à l'événement a été supprimée en passant sa référence, seul "2" est affiché

Passer des données à un événement

La méthode trigger() permet également d’envoyer des données à la fonction déclenchée par l’événement. On passera alors ces données en second paramètre, après le nom de l’événement. Elles seront regroupées dans un tableau, sauf si un seul paramètre est passé : vous avez alors la possibilité de le passer directement.

$("a#test5").trigger("click", ["paramètre 1", 2, {parametre: "3"}]);

Lors de la définition de l’événement avec la méthode bind(), la fonction passée en paramètre devra définir ces paramètres pour pouvoir les utiliser.
Tous les paramètres supplémentaires sont ajoutés après le premier, qui représente toujours l’objet événement (« e » dans l’exemple suivant).

Exemple.

$("a#test5").bind("click", function(e, param1, param2, param3){
  e.preventDefault();
  window.alert(param1); // Affiche "paramètre 1"
  window.alert(param2); // Affiche "2"
  window.alert(param3["parametre"]); // Affiche "3" (cet argument est un tableau associatif)
});

Démonstration (cliquez sur le bouton) : Déclencher un clic sur a#test5, a#test5

Essayez maintenant de cliquer sur le lien juste au-dessus, vous verrez que les paramètres ont la valeur undefined la boîte de dialogue déclenchée par window.alert ne s’affiche même pas pour le troisième paramètre : le fait d’appeler une clé inexistante (param3["parametre"]) déclenchera une erreur Javascript.

Comme dit plus haut, si un seul paramètre est passé, vous pouvez l’utiliser directement :

Exemple.

$("a#test5").trigger("click", "paramètre 1");

Bien entendu, la fonction n’attend qu’un paramètre dans ce cas :

$("a#test5").bind("click", function(e, param1){
  e.preventDefault();
  window.alert(param1); // Affiche "paramètre 1"
});

Les événements « sur mesure »

Il est possible d’utiliser bind() pour affecter un événement personnalisé. Cet événement ne pourra être déclenché qu’avec la méthode trigger().

– A quoi ça sert, exactement ?
– Principalement, à découper certaines parties d’un script, liées à un objet jQuery, en événements. Mais c’est quoi ces questions ? C’est pour me déstabiliser, c’est ça ?

Prenons un lien, auquel nous attacherons l’événement « StyleFunky ». Lorsque cet événement sera déclenché, notre lien va naturellement s’imposer dans le page, montrer à tous qu’il n’est pas le genre de lien qu’il fait bon prendre pour une ancre. En réalité, un ensemble de propriétés CSS seront définies sur cet élément, ainsi qu’un window.setInterval() pour changer sa couleur de fond, mais ce sera transparent pour nous, une fois notre fonction définie. Seul l’événement « StyleFunky » sera ensuite déclenché.

Nous attacherons également un autre événement à ce lien, « StyleNormal », qui annulera les effets de l’événement précédent (y compris le window.setInterval) :

Exemple.

$("a#test6").bind("StyleFunky", function(){
  var jElt = $(this);
  jElt
  .css({
    "display": "block",
    "padding": "20px",
    "fontSize": "300%",
    "fontWeight": "bold",
    "textAlign": "center",
    "color": "#fff",
    "background": "#f00"
  });
  jElt.data("redBackground", true);
  jElt.data("interval", window.setInterval(function(){
    if (jElt.data("redBackground")) {
      jElt.css("background", "#f0f")
    } else {
      jElt.css("background", "#f00");
    }
    jElt.data("redBackground", ! (jElt.data("redBackground")) );
  }, 500));
});
$("a#test6").bind("StyleNormal", function(e){
  var jElt = $(this);
  window.clearInterval(jElt.data("interval"));
  jElt.css({
    "display": "inline",
    "padding": "0",
    "fontSize": "100%",
    "fontWeight": "normal",
    "textAlign": "left",
    "color": "#7F89A6",
    "background": "none"
  });
});

Demostración (c’est de l’espagnol) :
$(« a#test6 »).trigger(« StyleFunky ») $(« a#test6 »).trigger(« StyleNormal »)

a#test6

Les Namespaced Events (événements nommés)

Nous avons vu qu’il était possible avec unbind() de supprimer une seule des fonctions attachées à un événement, mais cette méthode est peu élégante, puisqu’elle n’autorise pas l’utilisation de fonctions anonymes.

Pour remédier à cela, jQuery permet de nommer une fonction attachée à un événement.
Une notation similaire à celle des classes CSS est utilisée, accolée au nom de l’événement (« .action1 », « .action2 » et « .action3 » ici) :

$(element).bind("click.action1", function(){ /* Action 1 */ });
$(element).bind("click.action2", function(){ /* Action 2 */ });
$(element).bind("click.action3", function(){ /* Action 3 */ });

Il sera alors possible de déclencher un événement en particulier en ciblant une fonction événement en particulier, ou toutes les fonctions attachées, en déclenchant simplement l’événement « click » :

$(element).trigger("click.nom1"); /* Déclenche l'action 1 */
$(element).trigger("click"); /* Déclenche les actions 1, 2 et 3 */

Évidemment, il sera possible de les supprimer, individuellement, ou non.

$(element).unbind("click.nom1"); /* Supprime l'action 1 */
$(element).trigger("click"); /* Déclenche les actions 2 et 3 (la 1 vient d'être supprimée, sois attentif) */

La méthode .triggerHandler()

Pour finir, la méthode triggerHandler() permet de déclencher les différentes fonctions attachées à un événement, sans déclencher l’action par défaut du navigateur.

Prenons l’événement focus sur un champ texte de formulaire. Si vous lui affectez une action particulière (comme afficher une bulle d’information), vous pourrez alors déclencher cette action sans déplacer le curseur de l’utilisateur dans le champ :

$(input[type=text]).bind("focus", function(){ /* Affichage de la bulle d'information */ });
$(input[type=text]).trigger("focus"); /* Déplacement du curseur dans le champ texte, affichage de la bulle d'information */
$(input[type=text]).triggerHandler("focus"); /* Affichage de la bulle d'information seulement */

Voilà, c’est fini.

T’aimes pas les accroches interrogatives

Voici donc la suite de notre série d’articles consacrés à jQuery, avec aujourd’hui : le plugin !

La conception de jQuery, centrée sur un même objet, permet d’étendre naturellement notre bibliothèque en créant de nouvelles méthodes. Un plugin sera alors utilisé de cette façon :

$("p").monplugin();

Nous créerons pour l’exemple un plugin qui fait danser les éléments sélectionnés, appelons-le « jQuery Dance ».

On pourra éventuellement lui passer des options : le tempo, et la taille de la piste de danse bien entendu !

Il sera utilisé ainsi :

$("p").dance();

Ah, vous l’aviez certainement noté : la sonorité de jQuery est proche de celle de charcuterie. Et comme pour la rosette, certaines règles sont à respecter pour créer un plugin de qualité, les voici.

Nommez votre fichier

Un plugin doit toujours se nommer ainsi, de manière à ce qu’il soit immédiatement identifiable : jquery.nom_du_plugin.js
Notre fichier se nommera donc jquery.dance.js.

Isolez votre code

Dans ce fichier nouvellement créé, nous allons commencer par englober tout ce qui va être écrit dans une fonction anonyme qui sera immédiatement executée. De cette manière, toutes les variables que vous créerez ne rentrerons pas en collision avec les autres scripts présents sur la page.

(function(){
	// Code
})()

Nous allons en profiter pour passer la variable jQuery (dont $ n’est qu’un alias) à cette fonction, de cette manière :

(function($){
	// Code
})(jQuery)

Cela permettra d’utiliser la variable $ à l’intérieur de notre fonction.
Pourquoi, puisque $ est déjà un alias de jQuery ?

jQuery permet de renommer cette fonction à l’aide de jQuery.noConflict().
Il est donc possible de faire cohabiter jQuery et l’une des nombreuses librairies utilisant la fonction $() (comme Prototype), en renommant l’alias comme bon nous semble :

var $j = jQuery.noConflict();

Nous devons donc nous assurer que la fonction $() existe bien, et que nous n’utilisons pas une autre librairie à la place de jQuery.

Ajoutez votre nouvelle méthode à jQuery.fn

Après avoir créé notre environnement, nous sommes prêts à écrire notre plugin.
Nous voulons donc ajouter une nouvelle méthode aux objets jQuery. Il faut pour cela ajouter une nouvelle fonction à l’objet jQuery.fn. Dans cette fonction, le mot-clé this représente l’objet jQuery sélectionné par l’utilisateur de votre plugin.

Dans le cas où notre plugin serait défini de cette façon :

(function($){
	$.fn.dance = function(){
		alert(this == ma_selection);
	};
})(jQuery)

Et qu’une variable globale (absence du mot var) ma_selection soit définie ainsi :

// Au chargement...
$(function(){
	ma_selection = $("p");
	ma_selection.dance();
});

Le message affiché par la fonction alert() serait true.

Bouclez sur les éléments sélectionnés

Vous devez toujours considérer que plusieurs éléments ont été sélectionnés avant d’appeler votre méthode.

Pour traiter chacun de ces éléments, la méthode each() de jQuery sera utilisée. cette méthode prend en paramètre une fonction, qui sera executée pour chaque élément. Dans cette boucle, le mot this correspondra cette fois à chacun des éléments DOM de cette sélection.
Pour obtenir un objet jQuery, il faudra passer cet élément à la fonction $().

(function($){
	$.fn.dance = function(){
		this.each(function(){
		  // this : élément DOM classique
		  // $(this) : élément jQuery
		});
	};
})(jQuery)

Gardez à l’esprit que cette fonction est executée pour chacun des éléments de la sélection. Il est donc préférable de ne placer dans cette fonction que les traitements liés à chaque élément en particulier.

(function($){
	$.fn.dance = function(){

		// Le tempo est le même pour tous les éléments,
		// inutile de le redéfinir à chaque  fois.
		var tempo = 300;

		// Cette fonction n'est définie qu'une fois,
		// puis appelée par chacun des éléments.
		function move(jElt){
			// Nous placerons ici le code permettant
			// de faire danser le Boogie Woogie à un élément
		};

		this.each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Retournez l’objet sélectionné

Cette pratique permettra d’utiliser plusieurs méthodes en chaîne :

$("p").dance().css("color", "red");

Evidemment, si votre plugin renvoie une information, il ne sera alors pas possible de chaîner plusieurs méthodes (comme avec la méthode width() par exemple).

Il faudra donc que votre méthode retourne this avant de se terminer.

(function($){
	$.fn.dance = function(){

		// Code...

		return this;
	};
})(jQuery)

Et puisque la méthode each() de jQuery renvoie l’élément sélectionné, vous pouvez retourner votre sélection en bouclant sur chacun des éléments :

(function($){
	$.fn.dance = function(){

		// Code...

		return this.each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Bien, nous avons vu les bases de la création d’un plugin. Le plugin « jQuery Dance » peut maintenant être utilisé de cette façon :

$("p").dance().css("border","1px");

Passez des paramètres à votre méthode

Comme nous l’avons vu au début de cet article, la méthode dance() prendra deux paramètres : tempo et dancefloorArea, correspondant respectivement à la fréquence d’execution de chaque mouvement(en millisecondes), et à la surface que pourra utiliser cet élément (en pixels).

Définir des paramètres pour notre méthode est très simple :

(function($){
	$.fn.dance = function(tempo, dancefloorArea){

		// Code...

	};
})(jQuery)

La méthode pourra donc être appelée de cette façon :

$("p").dance(300, 400)

Etendez vos paramètres optionnels

Avant d’avancer dans la réalisation de jQuery Dance et de permettre à nos éléments de se déhancher sur le dancefloor, nous allons voir une dernière technique, permettant de passer des paramètres optionnels à une méthode jQuery.

Nos paramètres ne seront alors plus passés directement, mais à l’aide d’un tableau associatif :

$("p").dance({tempo: 300, danceFloorArea: 400})

La fonction jQuery.extend(a, b) permet d’étendre un objet a avec un objet b, en écrasant les propriétés redéfinies.
Voici un exemple :

var objet_a = {
	param_1: "Bonjour",
	param_2: "les p'tits gars"
};
var objet_b = {
	param_2: "tout le monde",
	param_3: "ça va ?"
};

$.extend(objet_a, objet_b);

alert(objet_a.param_1); // Bonjour
alert(objet_a.param_2); // tout le monde
alert(objet_a.param_3); // ça va ?

En plus de l’étendre, cette fonction renvoie le premier objet modifié, ce qui est très pratique lorsque le premier objet est défini en paramètre :

var objet_b = {
	param_2: "tout le monde",
	param_3: "ça va ?"
};

var objet_a = $.extend({
	param_1: "Bonjour",
	param_2: "les p'tits gars"
}, objet_b);

Nous utiliserons cette technique pour étendre nos paramètres par défaut avec ceux passés à la méthode, de cette façon :

(function($){
	$.fn.dance = function(params){

		// Si aucun paramètre n'est passé
		// et que params est vide, alors $.extend()
		// renverra simplement le premier objet passé
		var params = $.extend({
			tempo: 300,
			dancefloorArea: 400
		},params);

		function move(jElt){
			// Boogie Woogie
		};

		return this.each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Voulez-vous danser mademoiselle ?

Chacun de nos éléments sera déplacé, au hasard, sur la surface définie par dancefloorArea (400px par défaut). Chacun de ces déplacements sera déclenché selon l’intervalle définie par tempo (300 millisecondes par défaut).

Nous allons définir une nouvelle fonction (tirée de la documentation Mozilla), permettant d’obtenir un nombre entier situé entre les deux passés en paramètres.

Nous allons également définir les variables minPosition et maxPosition d’après params.dancefloorArea

(function($){
	$.fn.dance = function(params){

		// Paramètres
		var params = $.extend({
			tempo: 300,
			dancefloorArea: 400
		},params);

		// Renvoie un entier situé entre min et max
		function getRandomInt(min, max){
		  return Math.floor(Math.random() * (max - min + 1)) + min;
		};

		// Positions minimales et maximales
		// que pourra prendre un élément
		var minPosition = -(params.dancefloorArea/2);
		var maxPosition = params.dancefloorArea/2;

		// Mouvement d'un élément
		function move(jElt){
			var topPos = getRandomInt(minPosition, maxPosition);
			var leftPos = getRandomInt(minPosition, maxPosition);
		};

		return this.each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Pour chaque élément, une position sera définie à l’aide des variables leftPos et topPos.

Il nous reste donc à animer notre élément vers cette position pendant le temps défini par tempo, puis à appeler cette fonction, encore et encore, jusqu’au bout de la nuit. Nous utiliserons la méthode animate() de jQuery. Les éléments seront également positionnés en relatif pour être déplacés par rapport à leur position, sans gêner les voisins parce que bon, ils n’ont rien demandé eux.

(function($){
	$.fn.dance = function(params){

		// Paramètres
		var params = $.extend({
			tempo: 300,
			dancefloorArea: 400
		},params);

		// Renvoie un entier situé entre min et max
		function getRandomInt(min, max){
		  return Math.floor(Math.random() * (max - min + 1)) + min;
		};

		// Positions minimales et maximales
		// que pourra prendre un élément
		var minPosition = -(params.dancefloorArea/2);
		var maxPosition = params.dancefloorArea/2;

		// Mouvement d'un élément
		function move(jElt){
			var topPos = getRandomInt(minPosition, maxPosition);
			var leftPos = getRandomInt(minPosition, maxPosition);

			// Préfixer une variable par la lettre j
			// (ou ce qui vous semblera pertinent)
			// permet d'identifier facilement un objet jQuery.
			jElt.animate(

				// Premier paramètre : les nouvelles propriétés CSS
				// vers lesquelles l'élément va être animé.
				{
					top: topPos + "px",
					left: leftPos + "px"
				},

				// Deuxième paramètre : le temps que durera l'animation
				params.tempo,

				// Troisième paramètre, la fonction qui sera appelée
				// lorsque l'animation sera terminée.
				function(){
					move(jElt); // Nous appelons à nouveau la fonction move()
				}
			);
		};

		return this.css("position", "relative").each(function(){
			move( $(this) );
		});
	};
})(jQuery)

Vous trouverez une démonstration de notre plugin à cette adresse : /demos/jquery/dance.html

Je dois avouer, et vous le reconnaîtrez sûrement, que le résultat est affligeant. Mais bon, hein.

Nous allons maintenant voir ce qu’il est possible de faire à partir de cet objet.

Méthodes de jQuery

L’objet jQuery, comme tout objet, dispose de méthodes. Grossièrement, il s’agit d’actions qu’un objet sait accomplir.
Pour comparaison, si notre objet était une grosse voiture rouge (on vend du rêve sur lesintegristes.net), elle aurait la faculté d’avancer vite.

Ca pourrait donner en français la syntaxe suivante :
Voiture, avance (vite) !

jQuery dispose de la méthode fadeOut(), pour masquer les éléments englobés dans notre objet jQuery avec un effet de fondu certifié « Ouais bah deux pouin zéro. »
– « Hein ? »
– « Ouais bah j’dis c’que j’veux. »

Prenons pour exemple ce petit morceau de HTML, qui ne se doute de rien :

<p class="outi">Lalalala, je me balade dans la forêt...</p>

Nous allons maintenant sélectionner ce paragraphe, et le faire disparaître avec un effet de fondu :

$("p.outi").fadeOut();

Notre objet est $("p.outi"), à qui nous demandons de disparaître ( .fadeOut() ).

La méthode fadeOut() accepte un paramètre qui permet de modifier la vitesse de l’effet : on peut lui passer le temps, en millisecondes, ou les chaînes « slow », « normal » et « fast » :

$("p.outi").fadeOut("slow");
$("p.outi").fadeOut(300);

Il est également possible de passer un deuxième paramètre, appelé callback. Il s’agit d’une fonction qui va être appelée lorsque l’effet sera terminé. Essayons !

// Au chargement du DOM...
$(function(){
	// On sélectionne notre paragraphe
	$("p.outi")
	// On lui applique l'effet fadeOut()
	.fadeOut(
		// Avec "slow" en premier paramètre
		"slow",
		// Et une fonction de "callback"
		// en deuxième paramètre
		function(){$(this).fadeIn("slow");}
	);
});

Dans notre callback, nous utilisons this, qui correspond dans ce contexte à l’objet DOM sur lequel l’effet est appliqué.
Nous le transformons donc en objet jQuery avant de lui appliquer la méthode fadeIn(), qui va comme vous l’avez deviné faire exactement l’inverse de fadeOut(), et faire apparaître de nouveau notre paragraphe.

Les méthodes en chaîne

La plupart des méthodes de jQuery ont une particularité : elles renvoient l’objet jQuery lui-même.
Prenons un exemple, à l’aide de Mozilla Firefox et de son excellent plugin Firebug, qui permet (entre autres) d’afficher n’importe quel objet à l’aide de l’objet console.
Nous allons utiliser la méthode css(), qui permet de modifier une ou plusieurs propriétés CSS des éléments sélectionnés :

$(function(){
	console.log( $("p.outi") );
	// Affiche [p.outi]

	console.log( $("p.outi").css("color", "red") );
	// Affiche [p.outi], la méthode css()
	// renvoie bien notre objet.
});

Ainsi, il va être possible de réutiliser notre objet, pour lui appliquer tout ce que l’on veut.

Pour illustrer ceci, nous allons créer notre premier script « utile ».
Notre client s’est réveillé cette nuit pour noter une idée, qui va à coup sûr donner un énorme avantage technologique à son site sur la concurrence :
– « Le texte de ce paragraphe apparaîtra en… glissant, après avoir survolé le bouton rouge : Survolez-moi ! »
– « Ha »
– « Imaginez la tête du visiteur ! »
– « … »
– « Sinon ça va, vous ? »
– « … O… Oui, ça va. »

Bon, il est temps d’enfiler notre costume de Superman pour trouver une solution accessible avec ça.

–  » Ca gratte un peu, mais bon.  »

Pour que ce texte reste accessible à tout ce qui n’utilise pas Javascript, il va devoir être masqué au chargement de la page, en Javascript.
Le bouton qui permettra de l’afficher n’ayant aucun sens sans script, nous allons également le générer. Il nous restera ensuite à créer l’effet voulu.
Hop :

$(function(){
	$("p.outi").before("<span>Survolez-moi !</span>").hide();
});

Nous avons sélectionné le paragraphe, ajouté un élément <span> qui va nous servir de bouton, puis nous avons masqué notre paragraphe, car la méthode before(), qui permet d’ajouter un élément avant celui sélectionné, va retourner l’objet jQuery.

Nous allons maintenant modifier notre sélection jQuery, à l’aide de la méthode prev(), qui permet de sélectionner l’élément précédent (le <span>).
Nous voyons donc ici notre première méthode qui ne retourne pas l’objet jQuery premièrement sélectionné.
C’est très intéressant, car cela va nous permettre de continuer à « chaîner » nos méthodes à partir de l’élément <span> nouvellement créé.

Nous lui appliquerons ensuite un style à l’aide de la méthode css() que nous avons vu précédemment.
Mais plutôt que de modifier une seule propriété en passant deux chaînes de caractère, nous allons lui passer un tableau associatif, contenant toutes les propriétés CSS que nous voulons définir.

$(function(){
	$("p.outi").before("<span>Survolez-moi !</span>").hide()
	.prev().css({
		display: "block",
		height: "30px",
		width: "100px",
		lineHeight: "30px",
		textAlign: "center",
		border: "1px solid #f00",
		cursor: "pointer"
	});
});

Facile, non ?

Il ne nous reste plus qu’à attacher un événement au survol de cet élément. jQuery propose un tas de méthodes, permettant d’associer des événements à des éléments. Leur nom reprend ceux de DOM, sans le préfixe « on ». Ils prennent en paramètre une fonction.
Nous allons donc utiliser la méthode mouseover() :

$(function(){
	$("p.outi").before("<span>Survolez-moi !</span>").hide()
	.prev().css({
		display: "block",
		height: "30px",
		width: "100px",
		lineHeight: "30px",
		textAlign: "center",
		border: "1px solid #f00",
		cursor: "pointer"
	})
	.mouseover(function(){
		$(this).next().slideDown();
	});
});

A l’intérieur de cette fonction, qui va se déclencher au survol, nous avons englobé notre <span>, représenté par this, dans un objet jQuery, puis sélectionné l’élément suivant à l’aide de next(), et finalement affiché notre paragraphe à l’aide de la méthode slideDown().

Vous avez remarqué ?
Nous sommes partis d’une unique sélection, $("p.outi").

Oui, c’est beau. Oui, c’est propre. C’est jQuery.

Eric, Gafour et moi-même, à travers l’expérience que nous accumulons chaque jour, allons essayer de faire quelque chose d’intelligent ici, et c’est loin d’être gagné !

Nous y parlerons standards, accessibilité, technique, organisation et méthodes de travail.

Commençons technique, avec cette bibliothèque Javascript que j’apprécie particulièrement :

jQuery

Il existe déjà quelques tutoriels et présentations sur jQuery, mais je vais essayer d’en expliquer les bases à ma façon, en espérant que ça puisse aider quelqu’un.

jQuery repose sur une seule fonction, c’en est d’ailleurs effrayant de simplicité : $(). C’est tout.
Mmm… d’accord, je vais développer un peu.

Selon les paramètres que l’on va lui passer, cette fonction va réagir de différentes manières. Voici les types de paramètres que l’on peut lui passer :

Une fonction

Dans ce cas, jQuery va charger cette fonction lorsque la page sera chargée par le navigateur.

Mais pourquoi ne pas utiliser le classique window.onload = function(){} ?

Principalement parce que window.onload attend que la page et les éléments qu’elle contient soient complètement chargés, ce qui peut être très long.

Pour reprendre le processus :

1. Le fichier html est téléchargé.
2. Il est lu par le navigateur.
3. Le navigateur commence à télécharger les éléments auxquels le fichier html fait référence (images, css…).
4. Le code situé dans $(function(){}) est exécuté dès que possible.
5. Lorsque tout est téléchargé, le code situé dans window.onload = function(){} est exécuté, en dernier.

Théoriquement, ce code devrait même être exécuté avant l’affichage, mais en réalité le navigateur peut commencer à afficher la page avant qu’elle ne soit complètement téléchargée.
De plus, les téléchargements ne se font pas un par un, car le navigateur n’attend pas qu’une image arrive pour en télécharger une autre, heureusement !

Voilà qui facilite le côté non-intrusif du Javascript :
Si un élément ne doit apparaître qu’au survol de la souris, par exemple, il faut bien que cet élément soit visible lorsque Javascript n’est pas activé : il peut alors simplement être placé dans le code de la page, et dissimulé en Javascript au chargement, pour réapparaître au survol, en une animation à couper le souffle !

On peut l’utiliser en stockant la fonction dans une variable pour la passer ensuite à jQuery :

var ma_fonction = function(){
	// Tout ce qui est ici sera exécuté au chargement du DOM.
};
$(ma_fonction);

Ou, plus directement, en passant simplement une fonction anonyme à jQuery :

$(function(){
	// Tout ce qui est ici sera exécuté au chargement du DOM.
});

Un élément, ou un tableau d’éléments DOM

Vous vous en doutiez, jQuery, cet insolent, n’est pas qu’un « super loader ».
En lui passant des éléments du DOM, la fonction $() va nous renvoyer un objet jQuery qui va contenir les éléments qui lui ont été passés, et sur lesquels on va pouvoir user et abuser de toute la puissance de jQuery.

Un peu comme une grosse boîte magique, dans laquelle on va mettre tout ça.

Il est possible de passer un élément, ou un tableau d’éléments à jQuery.
Il va sans dire que le code suivant doit être placé dans le « chargeur » jQuery, vu juste au-dessus, pour être exécuté :

var mon_element = document.getElementById("id_de_mon_element_html");
var mon_objet_jquery = $(mon_element);

Une chaine de caractères

Notre formidable sens de la déduction nous a immédiatement permis de comprendre la raison du « j ». Mais pourquoi « Query » ?

En passant une chaine de catactères à la fonction $(), nous allons lui demander de nous retourner un objet jQuery rempli d’éléments, sans même avoir à sélectionner préalablement les objets DOM.

– Sorcellerie !

Ecoutez, calmez vous et posez cette fourche, sinon nous allons avoir du mal à avancer.

Plusieurs possibilités vous permettront de sélectionner les éléments désirés : les sélecteurs CSS de niveaux 1 à 3, XPath, ainsi que quelques sélecteurs jQuery.

Les sélecteurs CSS

J’imagine que si vous lisez ceci, vous avez au moins une vague connaissance du langage CSS, et c’est merveilleux !

Prenons cette structure HTML :

<div id="fixe">
<h2>Je suis un titre, j'ai de l'importance.</h2>
<p class="ique">Ca va les chevilles là-haut ?</p>
<p>Lorem ipsum sont des mots qui vont très bien ensemble, très bien ensemble.</p>
</div>

Nous voulons sélectionner le premier élément <p>.
Voici différentes possibilités :

// Sélection des éléments ayant pour classe "ique", dans l'élément ayant pour id "fixe"
var mon_objet_jquery = $("#fixe .ique");      

// Sélection du premier élément <p> de l'élément <div>.
var mon_objet_jquery = $("div p:first-child");      

// Sélection des éléments <p>, enfants directs d'un élement <div> et ayant pour classe "ique".
var mon_objet_jquery = $("div > p.ique");

Le langage CSS offre suffisamment de flexibilité pour permettre une sélection fine et souple.

Que se passe-t-il dans la boîte ? Comme vous vous en doutiez, ces sélecteurs CSS n’ont aucun rapport avec l’interprétation CSS de votre navigateur.

jQuery va lire cette phrase et la transformer en sélection DOM, mixer cette joyeuse troupe d’une façon dont vous n’aurez absolument pas à vous préoccuper, pour vous retourner précisément le résultat de votre requête, et le tout soigneusement emballé dans un objet jQuery, poil au nombril.

Imaginez le cas suivant : vous souhaitez sélectionner tous les éléments p ayant pour classe « ique ».
On peut alors utiliser la méthode getElementsByTagName("p"), qui va nous retourner un tableau d’éléments p.
Nous pourrons ensuite trier ce tableau à l’aide d’une boucle, pour ne garder que ceux ayant pour classe « ique ». On imagine sans peine les quelques lignes nécessaires à une sélection pourtant triviale.

Avec jQuery, une ligne suffit : $("p.ique");.
C’est beau, c’est simple, et cette phrase a un parfum de slogan minable.

Il est bien sûr possible, comme en CSS, d’utiliser plusieurs sélecteurs à la fois :

var mon_objet_jquery = $("#fixe .ique, #fixe :last-child");

Vous trouverez sur la documentation de jQuery une liste des sélecteurs supportés par jQuery, ceux dont la syntaxe diffère légèrement de la spécification CSS, ceux qui n’auraient aucun sens pour jQuery (E:visited, E:first-letter), et ceux qui ne sont pas supportés en raison d’un manque d’utilité réelle :
Documentation des sélecteurs jQuery

XPath

jQuery ajoute à cela une implémentation basique de XPath.

Voici comment sélectionner les éléments p enfants de body, lui-même enfant de html :

$("/html/body//p");

Documentation XPath de jQuery

Les sélecteurs jQuery

Il existe également une série de sélecteurs n’ayant aucun équivalent CSS ou XPath ; ces derniers peuvent se révéler très pratiques comme dans les exemples suivants :

Sélection des éléments impairs :

$("div p:odd");

Sélection des éléments inférieurs à (less than) 4 :

$("div p:lt(4)");

Ou encore la sélection des éléments d’un formulaire (input, select, textarea, button) :

$("div p:input");

Vous trouverez l’intégralité des exemples sur la documentation. Contrairement à XPath que j’utilise finalement assez rarement, ces derniers sont utiles dans de nombreuses situations, pensez-y :
Documentation des sélecteurs propres à jQuery

Chemise sous le chapeau, il est possible de combiner les différents types de sélecteurs que nous venons de voir, dans une même requête !

Voilà, nous avons vu comment remplir notre boîte magique, nous verrons lors du prochain article comment remuer tout ça !

Quelques jQueryfiseries :

• Site de jQuery
• Documentation de jQuery
• Blog officiel de jQuery
• Tutoriels jQuery