jQuery, la libreria de javascript

Existen diversas librerías javascript disponibles para utilizar en tus proyectos web sin necesidad de empezar desde cero. Por nombrar algunas de las más extendidas: jquery, MooTools, prototype, script.aculo.us, YUI tools o Dojo. Existen muchas más; unas cuantas búsquedas por google te traerán listados más amplios que este. Sin embargo estas son quizás las más recomendables o las que quizás necesites conocer para hacerte una buena idea de las opciones que tienes disponibles.

En este artículo comentaré la filosofía y las características principales de jQuery. No entraré a hacer una comparativa entre las distintas librerías del tipo: jQuery vs prototype vs YUI etc, etc, etc. Sólo indicar que aunque muchas tengan el pomposo nombre de framework, yo no se lo voy a atribuir. Para mi un framework es un concepto más amplio que involucra desde el desarrollo del software en si pasando por la gestión del versionado de su código, los procesos asociados a su desarrollo (gestión de incidencias, subidas a producción) y llegando hasta el control de calidad (test unitarios y funcionales), incluyendo las herramientas utilizadas para llevar a cabo todo esto, editores de código, gestores de workflow, etc. Un framework debería tener, incluir o al menos tener en mente todas o varias de estas características.

Bueno volviendo a jQuery empezaré comenzando por una pequeña característica que permite emplear esta librería con cualquier otra. O sea que si tienes dudas entre jQuery y YUI, por ejmplo, ten en cuenta que puedes emplear las dos pues jQuery ya ha pensado en esto. Lo explico: jQuery emplea su propio namespace para evitar colisionar con otras librerías, el nombre de este namespace es obviamente jQuery (incluso los plugins basados en jQuery emplean casi todos este namespace). Sin embargo, hay un pequeño asunto a solucionar y es que jQuery emplea como alias el identificado $. Por ejemplo:

jQuery(«div»).hide(); //Oculta todos los div del documento

es igual a:

$(«div»).hide();

Y como muchos sabréis hay otras librerías javascript que también lo emplean. Para solucionarlo basta con llamar a la siguiente función:

jQuery.noConflict();

Teniendo en cuenta que esta llamada ha de hacerse después de cargar las dos librerías que colisionan:

<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script>
jQuery.noConflict();

// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div").hide();
});

// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>

Bien, con este tema aclarado pasemos a la filosofía de jQuery. jQuery emplea selectores CSS para referirse a uno o a un grupo de elementos sobre los que actúa. Emplea incluso selectores que no están completamente implementados en los más modernos navegadores pero si estandarizados (selectores CSS3) y añade incluso algunos más para añadir más versatilidad a la librería. jQuery trabaja principalmente con el DOM de los documentos XHTML. La sintaxis básica es:

$(selector)

por ejemplo

$(«a»)

Hace referencia a todos los enlaces del documento actual

$(«p a»)

Hace referencia a todos los enlaces dentro de párrafos (etiqueta p).

Lo que devuelven estas funciones es un objeto Javascript especial que contiene un array de elementos DOM que verifican el selector. Este objeto tiene un elevado número de funciones predefinidas que, de ser llamadas, actuan sobre todo el grupo de elementos. Por ejemplo si quieres que añadir una clase especial llamada «enlace» a todos los enlaces de tu documento bastaría con poner:

$(«a»).addClass(«enlace»);

Otra propiedad es que estas funciones al terminar de actuar devuelven a su vez el mismo array de elementos DOM. Así que puedes agregar un método tras otro, por ejemplo:

$(«a»).addClass(«enlace»).append(«<strong>[ ENLACE ]</strong>»);

Que añade la clase enlace a todos los enlaces y además les añade el fragmento de código html «<strong>[ ENLACE ]</strong>» después de su contenido normal.

Estas cadenas de funciones pueden continuar indefinidamente. Además de este módo de trabajo jQuery también tiene otras funciones, digamos, de propósito general que no actúan sobre elementos DOM. Son funciones tradicionales por ejemplo

$.trim(» Elimina espacios sobrantes del principio y final de la cadena «);

Un poco raro ¿no? Pero recordemos que $ es un alisas de jQuery

jQuery.trim(» Elimina espacios sobrantes del principio y final de la cadena «);

Ahora parece más normal esta llamada.

Estas funciones aumentan las funcionalidades disponibles (que no tiene javascript) sin tener que crearlas tu mismo.

Ahora que sabemos cual es la filosofía de trabajo de jQuery basado en emplear selectores del DOM cobra especial importancia esta pregunta. Cuando se carga una página ¿Cuando tenemos disponible el DOM del documento?. La respuesta podría ser cuando el navegador lance el evento onload. Pero no, esto no es correcto, pues el DOM se completa antes de lanzarse este evento. El evento onload se lanza cuando la página se ha cargado completamente, esto involucra no sólo la carga del documento html y su procesamiento para formar el árbol DOM sino también la carga de las imágenes y otros recursos necesarios para mostrar la página. Por otro lado javascript comienza a ejecutarse antes de que se haya completado el DOM. ¿Como podemos ejecutar una sentencia de jQuery asegurándonos que los elementos del DOM estén completos?

Pues jQuery tiene la solución a través de su función ready que se ejecuta cuando el árbol DOM esté completamente formado. Pongámoslo en un ejemplo:

$(document).ready(function() {$(«table»).slideDown(«slow»)})

Esto hace que cuando se cargue el DOM de la página todas las tablas ocultas se muestren poco a poco de arriba a abajo (ajustando su altura). Si a la función $() le pasamos una función esta se ejecutará también cuando el DOM este listo. Es pues un alias de la función ready

$(function() {$(«table»).slideDown(«slow»)})

Una pregunta. Porqué empleamos estas funciones anónimas en lugar de escribir directamente:

$(document).ready($(«table»).slideDown(«slow»))

La respuesta procede de la forma de trabajar de javascript y es que si utilizamos esta última forma, Javascript va a evaluar el argumento de la llamada a la función al ejecutar esta línea de código, es decir, antes de que esté listo el DOM. Empleando la función anónima sólo se evaluará una vez que tengamos el DOM listo

Bueno pues jQuery tiene muchas otras características. Por ejemplo, puedes extenderlo fácilmente. Mira este código:

<script type="text/javascript">
$.fn.idle = function(time)
{
var o = $(this);
o.queue(function()
{
setTimeout(function()
{
o.dequeue();
}, time);
});
return this;
}
</script>

Añade la función idle que puedes encadenar en las llamadas a jQuery para poner una pausa entre los efectos que añadas a los elementos. Ejemplo:

$(function() {$(«a»).hide(1000).idle(2000).show(1000);});

Hace que se oculten los enlaces lentamente (en un segundo) y tras dos segundos vuelvan a aparecer lentamente (en otro segundo).

Comentar por último que la funcion jQuery o $ también puede ser empleada para crear nuevos elementos DOM a través de html, por ejemplo:

$(‘<div>Hola mundo</div>’);

Con sólo parsarle como argumento a la función un fragmento de html podemos crear nuevos elementos DOM. Si queremos agregar este elemento DOM al documento actual podríamos por ejemplo escribir:

$(‘<div>Hola mundo</div>’).insertAfter(‘#identificador’);

Que hará que se agrege el fragmento después de la capa con id=»identificador»

Espero que haya sido de utilidad esta pequeña introducción a jQuery.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *