MooTools - Selectores

Los selectores se utilizan para seleccionar elementos HTML. Siempre que desee crear páginas web interactivas, debe seleccionar algunos datos o una acción de esa página web. Los selectores nos ayudan a recibir datos a través de solicitudes HTML de elementos.

Selector básico ($)

los $es el selector básico de MooTools. Con esto, puede seleccionar el elemento DOM por su ID. Por ejemplo, suponga que tiene un elemento HTML (como div) llamadobody_id.

<div id = "body_id">

</div>

Si desea seleccionar este div, use la siguiente sintaxis:

Sintaxis

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

getElement ()

getElement () es un método que extiende el selector básico ($). Le permite refinar su selección usando el ID de elemento. getElement () solo selecciona el elemento único y devolverá el primero si hay varias opciones. También puede utilizar el nombre de la clase para obtener la primera aparición de un elemento. Pero no obtendrá una matriz de elementos.

Selector múltiple ($$)

El $$ se usa para seleccionar múltiples elementos y colocar esos múltiples elementos en una matriz. Desde esa matriz podemos manipular, recuperar y reordenar la lista de diferentes formas. Eche un vistazo a la siguiente sintaxis. Define cómo seleccionar todos los elementos div de una colección de elementos HTML en una página web.

Sintaxis

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

Si desea seleccionar todos los divs, use la siguiente sintaxis:

Sintaxis

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

Si desea seleccionar varios divs con el mismo nombre de identificación, use la siguiente sintaxis:

Sintaxis

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

getElements ()

El método getElements () es similar al método getElement (). Este método devuelve todos los elementos según los criterios. Puedes usar cualquieraelement name (a, div, input) para seleccionar esas colecciones o un elemento en particular class name para seleccionar colección de elementos de la misma clase.

Incluir y excluir resultados con operadores

MooTools admite diferentes operadores utilizados para refinar sus selecciones. Puede utilizar todos estos operadores en el método getElements (). Cada uno de estos operadores se puede utilizar para seleccionar un elemento de entrada por su nombre.

Eche un vistazo a la siguiente tabla. Define los diferentes operadores que admite MooTools.

Operador	Descripción	Ejemplo
= (igual a)	Seleccione el elemento de entrada por su nombre.	$ ('body_wrap'). getElements ('input [name = phone_number]');
^ = (comienza con)	Seleccione el elemento de entrada comparando las letras iniciales del nombre.	$ ('body_wrap'). getElements ('entrada [nombre ^ = teléfono]');
$ = (termina con)	Seleccione el elemento de entrada comparando las letras finales del nombre.	$ ('body_wrap'). getElements ('entrada [nombre $ = número]');
! = (no es igual a)	Deseleccione el elemento de entrada por su nombre.	$ ('body_wrap'). getElements ('entrada [nombre! = dirección]');
* = (Contiene)	Seleccione el elemento de entrada que contiene un patrón de letras particular.	$ ('body_wrap'). getElements ('entrada [nombre * = teléfono]');

Selectores basados ​​en el orden de los elementos

Los selectores de MooTools siguen un orden particular en la selección de elementos. Los selectores siguen principalmente dos órdenes; uno es par y el otro es impar.

Note - Este selector comienza en 0, por lo que el primer elemento es par.

Incluso orden

En este orden, el selector selecciona los elementos que se colocan en un orden uniforme. Utilice la siguiente sintaxis para seleccionar todos los divs pares en su página HTML.

Syntax

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

Orden impar

En este orden, el selector selecciona el elemento colocado en un orden impar. Utilice la siguiente sintaxis para seleccionar todos los divs impares en su página HTML.

Syntax

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

Example

El siguiente ejemplo muestra cómo funciona un selector. Supongamos que hay un cuadro de texto y una lista de tecnologías en una página web. Si elige una tecnología de la lista ingresando ese nombre en el cuadro de texto, entonces la lista muestra los resultados filtrados según su entrada. Esto es posible usando el selector de MooTools. Usando el selector, podemos agregar un evento al cuadro de texto. El detector de eventos seleccionará los datos del cuadro de texto y los comprobará en la lista. Si está en la lista, la lista muestra los resultados filtrados. Eche un vistazo al siguiente código.

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

Recibirá el siguiente resultado:

Output