MooTools - Sélecteurs

Les sélecteurs sont utilisés pour sélectionner des éléments HTML. Chaque fois que vous souhaitez créer des pages Web interactives, vous devez sélectionner des données ou une action à partir de cette page Web. Les sélecteurs nous aident à recevoir des données via une requête HTML à partir d'éléments.

Sélecteur de base ($)

le $est le sélecteur de base de MooTools. En utilisant cela, vous pouvez sélectionner l'élément DOM par son ID. Par exemple, supposons que vous ayez un élément HTML (tel que div) nommébody_id.

<div id = "body_id">

</div>

Si vous souhaitez sélectionner ce div, utilisez la syntaxe suivante -

Syntaxe

//selects the element with the ID 'body_id'
$('body_id');

getElement ()

getElement () est une méthode qui étend le sélecteur de base ($). Il vous permet d'affiner votre sélection à l'aide de l'ID d'élément. getElement () sélectionne uniquement l'élément unique et renvoie le premier s'il y a plusieurs options. Vous pouvez également utiliser le nom de la classe pour obtenir la première occurrence d'un élément. Mais il n'obtiendra pas de tableau d'éléments.

Sélecteur multiple ($$)

Le $$ est utilisé pour sélectionner plusieurs éléments et placer ces éléments multiples dans un tableau. À partir de ce tableau, nous pouvons manipuler, récupérer et réorganiser la liste de différentes manières. Jetez un œil à la syntaxe suivante. Il définit comment sélectionner tous les éléments div dans une collection d'éléments HTML sur une page Web.

Syntaxe

<div>
   <div>a div</div>
   <span id = "id_name">a span</span>
</div>

Si vous souhaitez sélectionner tous les div, utilisez la syntaxe suivante -

Syntaxe

//all divs in the page
$$('div');

Si vous souhaitez sélectionner plusieurs div avec le même nom d'identifiant, utilisez la syntaxe suivante -

Syntaxe

//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');

getElements ()

La méthode getElements () est similaire à la méthode getElement (). Cette méthode retourne tous les éléments selon les critères. Vous pouvez utiliser soitelement name (a, div, input) pour sélectionner ces collections ou un élément particulier class name pour sélectionner une collection d'éléments de la même classe.

Inclure et exclure les résultats avec des opérateurs

MooTools prend en charge différents opérateurs utilisés pour affiner vos sélections. Vous pouvez utiliser tous ces opérateurs dans la méthode getElements (). Chacun de ces opérateurs peut être utilisé pour sélectionner un élément d'entrée par son nom.

Jetez un œil au tableau suivant. Il définit les différents opérateurs pris en charge par MooTools.

Opérateur	La description	Exemple
= (égal à)	Sélectionnez l'élément d'entrée par son nom.	$ ('body_wrap'). getElements ('input [name = phone_number]');
^ = (commence par)	Sélectionnez l'élément d'entrée en comparant ses lettres de départ du nom.	$ ('body_wrap'). getElements ('input [nom ^ = téléphone]');
$ = (se termine par)	Sélectionnez l'élément d'entrée en comparant ses lettres de fin du nom.	$ ('body_wrap'). getElements ('input [nom $ = nombre]');
! = (n'est pas égal à)	Désélectionnez l'élément d'entrée par son nom.	$ ('body_wrap'). getElements ('input [nom! = adresse]');
* = (Contient)	Sélectionnez l'élément d'entrée qui contient un modèle de lettre particulier.	$ ('body_wrap'). getElements ('input [nom * = téléphone]');

Sélecteurs basés sur l'ordre des éléments

Les sélecteurs MooTools suivent un ordre particulier dans la sélection des éléments. Les sélecteurs suivent principalement deux ordres; l'un est pair et l'autre est impair.

Note - Ce sélecteur commence à 0, donc le premier élément est pair.

Même ordre

Dans cet ordre, le sélecteur sélectionne les éléments qui sont placés dans un ordre pair. Utilisez la syntaxe suivante pour sélectionner tous les divs pairs dans votre page HTML.

Syntax

// selects all even divs
$$('div:even');

Ordre impair

Dans cet ordre, le sélecteur sélectionne l'élément placé dans un ordre impair. Utilisez la syntaxe suivante pour sélectionner tous les div impairs dans votre page HTML.

Syntax

// selects all odd divs
$$('div:odd');

Example

L'exemple suivant montre comment fonctionne un sélecteur. Supposons qu'il y ait une zone de texte et une liste de technologies sur une page Web. Si vous choisissez une technologie dans la liste en saisissant ce nom dans la zone de texte, la liste affiche les résultats filtrés en fonction de votre saisie. Ceci est possible en utilisant le sélecteur MooTools. En utilisant le sélecteur, nous pouvons ajouter un événement à la zone de texte. L'écouteur d'événement choisira les données dans la zone de texte et les vérifiera dans la liste. S'il est présent dans la liste, la liste affiche les résultats filtrés. Jetez un œil au code suivant.

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready',function(){
            var input = $('filter');
            
            // set the title attribute of every element
            // to it's text in lowercase
            $$('ul > li').each(function(item){
               item.set('title', item.get('text').toLowerCase());
            });
            
            // the function we'll call when the user types
            var filterList = function(){
               var value = input.value.toLowerCase();
               $$('li').setStyle('display','none');
               
               // check the title attribute if it contains whatever the user is typing
               $$('ul > li[title*=' + value + ']').setStyle('display','');
            };
            
            // make it happen
            input.addEvent('keyup', filterList);
         });
      </script>
   </head>
   
   <body>
      <p><input id = "filter" type = "text" /></p>
      <ul>
         <li>C</li>
         <li>Cpp</li>
         <li>Java</li>
         <li>JavaScript</li>
         <li>Hadoop</li>
         <li>Hive</li>
         <li>CouchDB</li>
      </ul>
   </body>
   
</html>

Vous recevrez la sortie suivante -

Output