Mes notes sur jQuery

4 - Objets jQuery

18 février 2014

Dans cette page, je différencie entre les objets classiques des langages orientés-objets comme C++ et Delphi qui ont besoin d'un constructeur explicite comme "new" pour exister et les objets jQuery qui sont créés par la fonction $(). J'enchaîne ensuite avec ce que sont les objets jQuery et comment on peut s'en servir.

En C++, en Delphi ou en Java, lorsqu'on parle d'objets, on fait référence aux instances de classes. Les objets disposent de différentes propriétés et méthodes, selon le modèle (autrement dit, les classes) qui a servi à en créer une instance. Généralement, une classe est instanciée en utilisant le mot-clé new comme dans

MonObjet = new MaClasse();

Ce n'est pas le cas pour les objets JavaScript. Dans JavaScript, les objets sont simplement des collections de paires nom/valeur, c'est à dire, des tableaux. Les éléments du DOM sont des objets, les fonctions sont des objets et, il va sans dire, $() produit lui aussi un objet d'un type particulier qu'on appelle "objet jQuery". En fait, une expression comme $("ul") ne retourne pas tous les éléments <ul> de la page mais bien un objet jQuery qui est une enveloppe autour de ces élément <ul>.

Objet jQuery

Ainsi, un objet jQuery est un objet assez particulier qui ne nécessite pas le mot-clé new pour son instanciation. Il est instancié par la fonction $(). Comme jQuery manipule des éléments du DOM ou une chaîne définie par un sélecteur CSS, il retourne un objet jQuery qui est un tableau de type liste de noeuds DOM auxquels on peut accéder comme des éléments de tableaux, soit avec la notation [].

À quoi ressemble donc un objet jQuery?

Rappelons nous que le DOM est une représentation d'une page Web qui contient un nombre indéterminé d'éléments du DOM. Comme tout objet Javascript, chacun de ces éléments a des propriétés (comme tagName) et des méthodes (comme append()) et ces propriétés sont la seule façon qu'a Javascript pour interagir avec la page Web. Il faut aussi noter que travailler directement avec les éléments du DOM s'avère difficile car chaque fureteur les interprète souvent de façons différentes (ici, Internet Explorer est un très mauvais élève).

Voilà où jQuery facilite les choses. jquery() ou $() génère un objet jQuery lorsqu'il est utilisé et cet objet est doté de plusieurs méthodes qui opèrent de la même façon sur tous les fureteurs. Ces méthodes sont ce que le site "jQuery, write less, do more" qualifie de méthodes DOM pures. En enveloppant l'élément cible dans un objet jQuery, on s'occupe alors de ces cas marginaux de mauvaise interprétation et le résultat attendu est obtenu sur tous les fureteurs.

Lorsque $() est appelé avec un sélecteur, il renvoie un objet jQuery enveloppant tous les éléments répondant aux critères de sélection. Ainsi, dans ce code

// Selection de toutes las balises <h1>.
var headings = $( "h1" );

la variable headings devient ainsi un objet jQuery contenant tous les éléments <h1> de la page. On peut le vérifier en examinant la propriété length de l'objet.

Propriétés

L'objet jQuery a une propriété numérique length qui va de 0 à length-1. Ça signifie qu'on peut accéder aux éléments du tableau en utilisant la notation [] comme suit:

MonPremierElement = $("#ident")[0];

En plus de la propriété length, les objets jQuery ont trois autres propriétés intéressantes:

selector - c'est le texte de la chaîne utilisé pour effectuer la sélection;
context - c'est l'objet contexte passé comme deuxième argument de $(); et
jQuery - qui permet de distinguer un objet jQuery de tout autre tableau. En fait, sa valeur est la version de la bibliothèque jQuery qui est utilisée.

Voici maintenant un exemple de l'utilisation de ces propriétés:

var bodyscripts = $("script", document.body);
bodyscripts.selector   // => "script"
bodyscripts.context    // => document.body
bodyscripts.jquery     // => "1.4.2"

Dans le code qui précède, tous les éléments <scripts> de la balise <body> du document sont assignés la variable bodyscript qui devient un objet jQuery dont on peut extraire la valeur des propriétés selector, context et jQuery.

Si on désire balayer tout les éléments d'un objet jQuery, on utilise la méthode .each() de l'objet et non pas une boucle for. Par exemple, pour insérer l'index de chaque élément <div> incluant l'élément div#last au début de chaque <div>, on utilise le code qui suit:

$("div").each(function(index) { // instructions de la fonction anonyme
    $(this).prepend(index + ": "); // Insérer l'index
    if (this.id === "last") return false; // on s'arrête à l'élément #last
});

Dans ce code, on utilise une fonction anonyme pour gérer l'insertion.

La méthode .each() n'est utilisée que lorsqu'on désire manipuler les éléments sélectionnés de façons individuelles et différentes car jQuery itère implicitement sur tous les éléments sélectionnés.

Maintenant que nous avons un objet jQuery, il va falloir l’utiliser. Et pour cela toute une palette de méthodes sont disponibles dans la bibliothèque pour la manipulation du DOM, des CSS, des événements et autres effets visuels. Elles retournent elles aussi des objets jQuery. Grossièrement, il s’agit d’actions qu’un objet sait accomplir.

Dans la page qui suit, on va voir ce que sont les événements, lesquels peuvent se produire et, dans la page qui suivra, comment les connecter pour que jQuery puisse y répondre.