La función dólar $() es una de las mas populares en Javascript por que permiten acceder a elementos del HTML de forma sencilla y utilizando poco código. Originalmente fue implementada en Prototype y ahora disponible en la mayoría de librerías como Mootools, jQuery.
Veamos como implementar nuestra propia función $, esto para evitar incluir librerías como Mootools, jQuery o Prototype las cuales tienes los cuales tienes funciones adicionales que en muchas ocaciones no vamos a utilizar, con ello disminuimos el tamaño de nuestros archivos html.
Función $() básica
El objetivo primario de esta función es la seleccionar elementos basados en un identificador, es decir un alias de la función getElementById, entonces podemos crear nuestra primera función dolar.
function $(el) {
return document.getElementById(el);
}
Función $() extendida
La función anterior permite seleccionar un sólo elemento, pero podemos extenderla para pasarle multiples parámetros y que nos devuelva un array con los elementos seleccionados, ello nos permitirá obtener y manipular múltiples elementos de forma rápida.
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == "string") {
element = document.getElementById(element);
}
if (arguments.length == 1) {
return element;
}
elements.push(element);
}
return elements;
}
[/js]
Esta función recorre uno por uno los parámetros que se les pasa y va agregándolo a un array que posteriormente lo devuelve.
Como utilizar la función $
El uso es sencillo, por ejemplo si tenemos un formulario y deseamos verificar si el campo esta vacio podemos hacerlos de la siguiente forma:
[js]
if ($('username').value == '') {
alert('Error: nombre de usuario vacio.');
}
Personalmente utilizo la primera versión pues me permite seleccionar los elementos que necesito y ahorrando muchas línes de código comparado con el uso del método getElementById.
Comentarios Total 8 comentarios
Publicado: 08/11/2009 8:54 am
Nada que ver con la que usan las librerias como MooTools, jQuery…
En esta solo tienes ID, pues en las otras tienes TAGS (a, em, strong, div), CLASES (.algo .white .lala) y IDs (#lala #id)
Publicado: 08/11/2009 9:37 am
Tambien se puede usar alguna libreria, como por ej: http://sizzlejs.com/ que es la que utiliza jquery y otros frameworks. El js SIN comprimir pesa ~25K y se tiene la misma potencia que en jquery.
Saludos.
Publicado: 08/11/2009 1:07 pm
Pues a mí me ha parecido genial! obviamente no es para sustituir las avanzadas funciones de selección de jQuery y análogos. Pero sin embargo es un conocimiento muy básico que es necesario saber si programas con javascript y que realmente te puede ahorrar mucho código si en un momento dado tienes que hacer un uso intensivo de document.getElementById, que la verdad es bastante engorroso de escribir y además alarga mucho las líneas de código. Es decir, como alias me parece estupendo usar una versión simple de $() si no tienes opción o necesidad de carahar un framework javascript entero!
Además, desconocía lo que hay detrás del $ , jejeje, gracias! Como siempre muy bien explicado y con ejemplos fáciles de entender.
SERGI
Publicado: 05/01/2010 7:03 am
[…] Via: blog.unijimpe.net […]
Publicado: 22/02/2010 10:44 pm
:D. Muy interesante, sin embargo esperaba algo más completito para tener una buena función que procese xPath. Podríamos sin dificultad añadirle algunos de los algoritmos getElementsByClassName; recuerdo haber visto unos muy interesantes en lo de aNieto2k, y también hacer algo similar para filtrar por tags, ayudados de la propiedad tagName. ¡Suerte!
Publicado: 07/05/2010 8:49 am
En la segunda función:
No entiendo de donde se saca la variable arguments.
Como se deduce su length?
Publicado: 07/05/2010 8:19 pm
Hola Eduardo, arguments es una palabra reservada de javascript que se puede utilizar dentro de cualquier función y devuelve un objeto (que se puede utilizar como un array) el cual contiene todos los argumentos pasados a la función.
Mas información: http://www.seifi.org/javascript/javascript-arguments.html
Publicado: 17/12/2013 1:06 am
Excelente! voy a utilizar la primera función ahora mismo. La verdad, y con respeto, no entiendo a los que piden algo más completo, la función hace lo que se le pide y además es muy corta. Si queremos algo más completo ya no sería para lo mismo, sería para otro objetivo y no para lo que es esta función: ahorrar código y alivianar scrips.