MooTools - Selettori

I selettori vengono utilizzati per selezionare gli elementi HTML. Ogni volta che si desidera creare pagine Web interattive, è necessario selezionare alcuni dati o un'azione da quella pagina Web. I selettori ci aiutano a ricevere i dati tramite la richiesta HTML dagli elementi.

Selettore di base ($)

Il $è il selettore di base in MooTools. Usando questo, puoi selezionare l'elemento DOM in base al suo ID. Ad esempio, supponi di avere un elemento HTML (come div) denominatobody_id.

<div id = "body_id">

</div>

Se vuoi selezionare questo div, usa la seguente sintassi:

Sintassi

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

getElement ()

getElement () è un metodo che estende il selettore di base ($). Ti consente di affinare la selezione utilizzando l'ID elemento. getElement () seleziona solo il singolo elemento e restituirà il primo se ci sono più opzioni. È inoltre possibile utilizzare il nome della classe per ottenere la prima occorrenza di un elemento. Ma non otterrà una serie di elementi.

Selettore multiplo ($$)

$$ viene utilizzato per selezionare più elementi e posizionare questi più elementi in un array. Da quell'array possiamo manipolare, recuperare e riordinare l'elenco in modi diversi. Dai un'occhiata alla seguente sintassi. Definisce come selezionare tutti gli elementi div da una raccolta di elementi HTML su una pagina web.

Sintassi

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

Se desideri selezionare tutti i div, utilizza la seguente sintassi:

Sintassi

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

Se desideri selezionare più div con lo stesso nome ID, utilizza la seguente sintassi:

Sintassi

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

getElements ()

Il metodo getElements () è simile al metodo getElement (). Questo metodo restituisce tutti gli elementi in base ai criteri. Puoi usare entrambielement name (a, div, input) per selezionare quelle raccolte o un particolare elemento class name per selezionare la raccolta di elementi della stessa classe.

Includere ed escludere i risultati con gli operatori

MooTools supporta diversi operatori utilizzati per perfezionare le selezioni. Puoi usare tutti questi operatori nel metodo getElements (). Ciascuno di questi operatori può essere utilizzato per selezionare un elemento di input in base al nome.

Dai un'occhiata alla seguente tabella. Definisce i diversi operatori supportati da MooTools.

Operatore	Descrizione	Esempio
= (uguale a)	Seleziona l'elemento di input in base al nome.	$ ('body_wrap'). getElements ('input [name = phone_number]');
^ = (inizia con)	Seleziona l'elemento di input confrontando le sue lettere iniziali del nome.	$ ('body_wrap'). getElements ('input [nome ^ = telefono]');
$ = (termina con)	Seleziona l'elemento di input confrontando le lettere finali del nome.	$ ('body_wrap'). getElements ('input [nome $ = numero]');
! = (non è uguale a)	Deseleziona l'elemento di input in base al nome.	$ ('body_wrap'). getElements ('input [nome! = indirizzo]');
* = (Contiene)	Seleziona l'elemento di input che contiene un particolare modello di lettera.	$ ('body_wrap'). getElements ('input [nome * = telefono]');

Selettori basati sull'ordine degli elementi

I selettori MooTools seguono un ordine particolare nella selezione degli elementi. I selezionatori seguono principalmente due ordini; uno è pari e l'altro è dispari.

Note - Questo selettore parte da 0, quindi il primo elemento è pari.

Anche ordine

In questo ordine, il selettore seleziona gli elementi che vengono inseriti in un ordine uniforme. Utilizza la seguente sintassi per selezionare tutti i div pari nella tua pagina HTML.

Syntax

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

Ordine strano

In questo ordine, il selettore seleziona l'elemento posizionato in un ordine dispari. Usa la seguente sintassi per selezionare tutti i div dispari nella tua pagina HTML.

Syntax

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

Example

L'esempio seguente mostra come funziona un selettore. Supponiamo che ci sia una casella di testo e un elenco di tecnologie su una pagina web. Se scegli una tecnologia dall'elenco inserendo quel nome nella casella di testo, l'elenco mostra i risultati filtrati in base al tuo input. Ciò è possibile utilizzando il selettore MooTools. Usando il selettore, possiamo aggiungere un evento alla casella di testo. Il listener di eventi sceglierà i dati dalla casella di testo e li controllerà dall'elenco. Se è presente nell'elenco, l'elenco mostra i risultati filtrati. Dai un'occhiata al seguente codice.

<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>

Riceverai il seguente output:

Output