MooTools - Seletores

Seletores são usados ​​para selecionar elementos HTML. Sempre que quiser criar páginas da web interativas, você precisará selecionar alguns dados ou uma ação dessa página da web. Os seletores nos ajudam a receber dados por meio de solicitação HTML dos elementos.

Seletor básico ($)

o $é o seletor básico na MooTools. Usando isso, você pode selecionar o elemento DOM por seu ID. Por exemplo, suponha que você tenha um elemento HTML (como div) chamadobody_id.

<div id = "body_id">

</div>

Se você deseja selecionar este div, use a seguinte sintaxe -

Sintaxe

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

getElement ()

getElement () é um método que estende o seletor básico ($). Ele permite que você refine sua seleção usando o ID do elemento. getElement () seleciona apenas o único elemento e retornará o primeiro se houver várias opções. Você também pode usar o nome da classe para obter a primeira ocorrência de um elemento. Mas não obterá matriz de elementos.

Seletor múltiplo ($$)

O $$ é usado para selecionar vários elementos e colocá-los em uma matriz. A partir desse array, podemos manipular, recuperar e reordenar a lista de maneiras diferentes. Dê uma olhada na seguinte sintaxe. Ele define como selecionar todos os elementos div de uma coleção de elementos HTML em uma página da web.

Sintaxe

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

Se você deseja selecionar todos os divs, use a seguinte sintaxe -

Sintaxe

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

Se você deseja selecionar vários divs com o mesmo nome de id, use a seguinte sintaxe -

Sintaxe

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

getElements ()

O método getElements () é semelhante ao método getElement (). Este método retorna todos os elementos de acordo com os critérios. Você pode usar qualquerelement name (a, div, input) para selecionar essas coleções ou um elemento particular class name para selecionar uma coleção de elementos da mesma classe.

Incluir e excluir resultados com operadores

MooTools suporta diferentes operadores usados ​​para refinar suas seleções. Você pode usar todos esses operadores no método getElements (). Cada um desses operadores pode ser usado para selecionar um elemento de entrada por nome.

Dê uma olhada na tabela a seguir. Ele define os diferentes operadores que a MooTools suporta.

Operador	Descrição	Exemplo
= (igual a)	Selecione o elemento de entrada por seu nome.	$ ('body_wrap'). getElements ('input [name = phone_number]');
^ = (começa com)	Selecione o elemento de entrada comparando as letras iniciais do nome.	$ ('body_wrap'). getElements ('input [nome ^ = telefone]');
$ = (termina com)	Selecione o elemento de entrada comparando as letras finais do nome.	$ ('body_wrap'). getElements ('input [nome $ = número]');
! = (não é igual a)	Desmarque o elemento de entrada por seu nome.	$ ('body_wrap'). getElements ('input [nome! = endereço]');
* = (Contém)	Selecione o elemento de entrada que contém o padrão de letra específico.	$ ('body_wrap'). getElements ('input [name * = phone]');

Seletores com base na ordem do elemento

Os seletores da MooTools seguem uma ordem específica na seleção de elementos. Os seletores seguem principalmente duas ordens; um é par e o outro é estranho.

Note - Este seletor começa em 0, então o primeiro elemento é par.

Ordem uniforme

Nesta ordem, o seletor seleciona os elementos que são colocados em uma ordem uniforme. Use a seguinte sintaxe para selecionar todos os divs pares em sua página HTML.

Syntax

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

Ordem ímpar

Nesta ordem, o seletor seleciona o elemento colocado em uma ordem ímpar. Use a seguinte sintaxe para selecionar todos os divs ímpares em sua página HTML.

Syntax

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

Example

O exemplo a seguir mostra como funciona um seletor. Suponha que haja uma caixa de texto e uma lista de tecnologias em uma página da web. Se você escolher uma tecnologia da lista digitando esse nome na caixa de texto, a lista mostrará os resultados filtrados com base em sua entrada. Isso é possível usando o seletor MooTools. Usando o seletor, podemos adicionar um evento à caixa de texto. O ouvinte de eventos escolherá os dados da caixa de texto e os marcará na lista. Se estiver na lista, a lista mostra os resultados filtrados. Dê uma olhada no código a seguir.

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

Você receberá a seguinte saída -

Output