Explico que son los selectores en Mootools
En este post tratare de explicar como funcionan los selectores en Mootools y como interpretar las diferentes formas de utilizar el simbolo de dolar.
La function $
La mayoria de las personas que utilizamos este libreria al inicio pensamos que este simbolo significa una especia de link o enlace hacia document.getElementById(), pero realmente no lo es. “$()” es una funcion que toma un argumento, este argumento es como un tipo de dato mezcla que puede ser una cadena o un elemento DOM. Un ejemplo sencillo para entenderlo seria algo como:
1 2 3 4 | var w3cEl = document.getElementById('miDiv'); var mooEl = $('miDiv'); var mooEl2 = $(w3cRef); var mooEl3 = $(mooEl2); |
La funcion $$
La funcion doble dolar o $$ esta mas orientado a seleccionar las etiquetas de los elementos y crear un arreglo con todas las encontradas en el documento, por ejemplo:
1 2 | var w3cArr = document.getElementsByTagName('div'); // estandarizado por la w3c var mooArr = $$('div'); // la forma en que lo hace mootools |
Pero eso no es todo, $$ puede hacer aun mucho mas, esta funcion puede aceptar uno o mas selectores de css y retornar o almacenar la salida en un arreglo.
1 2 3 | $$('a.external'); // retornara un arreglo de todos los enlaces con la clase external $$('a[href=#]'); // retornara un arreglo con todos los enlaces que tengan por destino # $$('form input[disabled]'); // retorna un arreglo de los elementos de un formulario con el atributo disabled |
Hasta donde se, la funcion $$ de mootools no soporta todos los selectores por lo que hay que investigar y leer las especificaciones de la W3C al respecto.
Otras funciones que utilizan $
Hay algunas otras funciones en mootools y que utilizan el prefijo de $:
$chk: Retorna true si el objeto/valor existe.$clear: Limpia un tiempo de espera o un intervalo de tiempo iniciado. Mas utilizado con periodical creo.$defined: Retorna true si el valor/objeto pasado ha sido definido, falso seria undefined.$extend: Copia todas las propiedades del segundo objeto de un objeto a otro como herencia.$random: Retorna un aleatorio de numeros entre 2 valores pasados a la fx.$type: Retorna el tipo de objeto pasado a un elemento.$each: Usado para iterar sobre un arreglo, creado por llamadas a getElementsByTagName.$H: Enlace para crear el Hash de un objeto.$RGB: Enlace para crear un nuevo color usando la paleta RGB como valores.$HSV: Enlace para crear un nuevo color usando la paleta HSV como valores.
