Mootools en 30 jours : jour 2 - les sélecteurs

I. Introduction aux sélecteurs de Mootools 1.2

Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu le tutoriel d'hier Mootools en 30 jours : jour 1. Maintenant nous allons voir comment installer Mootools 1.2 et comment appeler vos scripts dans l'évènement domready.

Bienvenue dans ce deuxième jour des tutoriels Mootools 1.2 en 30 jours. Dans ce tutoriel, nous allons apprendre plusieurs méthodes pour sélectionner des éléments HTML. Dans tout les cas, c'est la base de ce qui est le plus souvent utilisé dans Mootools. Après tout, pour créer un site avec des éléments HTML intéractifs, vous devrez d'abord savoir bien les manipuler.

II. Explications

Les bases

$();

La fonction $ est le sélecteur de base de Mootools. Avec ça, vous pouvez sélectionner un élément DOM par son ID.

//selection de l'element dont l'ID est 'body_wrap'
$('body_wrap');
 

.getElement();

.getElement(); étend $, vous permettant d'affiner votre sélection. Par exemple, vous pouvez sélectionner l'ID "bodywrap" avec $, puis sélectionner le premier anchor (balise "a") enfant. .getElement(); sélectionne un seul élément et ne renverra que le premier s'il y a plusieurs possibilités. Si vous ajouter un nom de classe dans .getElement();, vous obtiendrez la première occurence d'un élément qui utilise ce nom de classe, et non un tableau de plusieurs éléments. Pour sélectionner plusieurs éléments, utilisez getElements(); que nous verrons plus loin.

//selectionne le premier anchor (a) enfant de élément qui a l'ID 'body_wrap'
$('body_wrap').getElement('a');
 
//selectionne l'élément qui a l'ID 'special_anchor' dans l'élément 'body_wrap'
$('body_wrap').getElement('#special_anchor');
 
//selectionne le premier élément enfant avec la class 'special_anchor_class'
//dans 'body_wrap'

$('body_wrap').getElement('.special_anchor_class');

$$();

Le $$ vous permet de sélectionner simplement plusieurs éléments et de les placer dans un tableau (une sorte de liste qui vous permet de manipuler, récupérer, et réorganiser la liste de plusieurs façons). Vous pouvez sélectionner des éléments par nom (comme les div, a, img) ou par ID, et vous pouvez même combiner. Et comme un lecteur l'a signalé, vous pouvez faire bien plus avec $$ que ce que nous couvrons ici.

//tous les div d'une page
$$('div');
 
//selectionne l'élément avec l'id 'id_name' et tous les div
$$('#id_name', 'div');

a div

a span

.getElements();

.getElements(); est similaire à .getElement();, sauf qu'il renvoie tous les éléments qui correspondent à un critère, et les place dans un tableau. Vous pouvez utiliser .getElements(); de la même façon que vous utiliseriez .getElement();.

//selectionne tous les anchors enfants contenus dans l'element avec l'ID 'body_wrap'
$('body_wrap').getElements('a');
 
//selectionne tous les enfants avec la classe 'special_anchor_class'
//dans l'element 'body_wrap'

$('body_wrap').getElements('.special_anchor_class');

Inclure et exclure des résultats avec les Operateurs

Opérateurs

Mootools 1.2 est compatible avec plusieurs opérateurs qui vous permettent d'affiner vos sélections. Vous pouvez utiliser des opérateurs dans .getElements(); et ainsi inclure ou exclure certains résultats. Mootools supporte 4 opérateurs, chacun d'eux peut être utilisé pour sélectionner un élément input par son nom :

  • = : égal à
  • //selectionne le champ dont le nom est 'phone_number'
    $('body_wrap').getElements('input[name=phone_number]');
  • ^= : commence par
  • //selectionne le champ dont le nom commence par 'phone'
    $('body_wrap').getElements('input[name^=phone]');
  • $= : se termine par
  • //selectionne le champ dont le nom se termine par 'number'
    $('body_wrap').getElements('input[name$=number]');
  • != : est différent de
  • //selectionne le champ dont le nom est différent de address
    $('body_wrap').getElements('input[name!=address]');
 



Pour utiliser les opérateurs, défnissez d'abord le type de l'élément (input), puis définissez la propriété de cet élément sur laquelle vous souhaitez filtrer (name), placez votre opérateur, puis choisissez la chaine de caractères qui sert de filtre.

Les sélecteurs basés sur l'Ordre des éléments

even

Utilisez ce sélecteur simple pour choisir des éléments dont la position est paire (even). Note: ce sélecteur commence à 0, donc la position du premier élément est paire.

// selectionne tous les divs dont la position est paire
$$('div:even');
Even

Odd

Even

Odd

odd

Comme le even ci-dessus, sauf qu'il sélectionne les éléments dont la position est impaire.

// selectionne tous les divs dont la position est impaire
$$('div:odd');
Even

Odd

Even

Odd

.getParent();

Avec .getParent(); vous pouvez obtenir, comme son nom l'indique, l'élement parent.

// selectionne le parent d'un élément dont l'ID est 'child_id'
$('child_id').getParent();

Even

Exemples

Tous les développement d'interfaces avec Mootools commenceront avec les sélecteurs. Voici quelques exemples très simples sur l'utilisation des sélecteurs pour manipuler les éléments DOM.

//règle la couleur de fond de tous les spans sur #eee
$$('span').setStyle('background-color', '#eee');
 
//règle la couleur de fond de tous les éléments enfants impairs de #body_wrap sur #eee
$$('span:odd').setStyle('background-color', '#eee');
 
//règle la couleur de fond de tous les éléments
//dont la classe est .middle_spans sur #eee

$('body_wrap').getElements('.middle_spans').setStyle('background-color', '#eee');

Even
Odd
Even
Odd

Téléchargez le fichier zip et essayez le

Le fichier zip contient un fichier html simple, le noyau de mootools 1.2, est un fichier js externe contenant les exemples que nous avons vu ci-dessus.

III. Conclusion du tutorial

Pour en savoir plus…

Ce tutoriel ne contient en aucun cas une liste complète des sélecteurs Mootools 1.2, il permet juste de vous aider à débuter et de vous donner une idée de ce que Mootools permet de faire. Pour en savoir plus à propos des sélecteurs, vous pouvez lire les sections suivantes de la doc :

Sujet sur les sélecteurs dans le blog de Mootools

Voici un sujet intéressant sur mootools.net à propos des $$ selector et de leurs diversités. Vous pouvez faire un tas de choses incroyables avec ces sélecteurs, donc ça vaut le coup d'y jeter un oeil.

Test de vitesse des Sélecteurs

Voici une expérience initiée par les personnes de Mootools qui mesure et compare la vitesse d'exécution de différentes librairies dans la sélection des éléments. C'est pas mal, mais encore mieux avec les exemples fournis ici dans les exemples de sélecteurs. Tous les sélecteurs proposés ici doivent fonctionner avec $$.

Sélecteurs W3C

Mootools se sert également de la puissance des pseudo sélecteurs (comme sur la démonstration du test de vitesse). Voici un sujet de w3c sur les sélecteurs, qui vaut vraiment un coup d'oeil. Je ne sais pas vous dire si tous les sélecteurs de cette page sont compatibles avec le sélecteur $$ de Mootools, mais la plupart le sont en tout cas. Si quelqu'un peut me donner plus de détails là-dessus, ce sera avec plaisir.

Le tutoriel Mootools 1.2 de demain

Vous pouvez continuer avec le tutoriel de demain : Jour 3 - Utiliser les Tableaux.