Estableciendo el ciclo de vida de la funcionalidad cliente por medio del evento ready: El uso del alias $ cuando trabajamos con JQuery.

El día 29, Scott Guthrie (y muchos otros bloggers) anuncio la relación de colaboración entre JQuery y Microsoft, siendo esta distribuida con Visual Studio y el ide dotado de intellisense para que el desarrollo sea más sencillo.

Pues bien, hoy vamos a ver algún aspecto básico de esta (fabulosa) librería que seguro que de ahora en adelante nos va a ser tremendamente útil y nos va a facilitar la vida.

La función $.

El “$” de JQuery no viene a ser nada más que un alias para usar el objeto jQuery().

Esta función generalmente vamos a ver que se usa para seleccionar elementos del DOM, pero reamente las funciones que realiza son:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Veamos ahora el primero de los usos.

La función $ para establecer el ciclo de vida del código.

Cuando John Resig y sus chavales desarrollaron JQuery, enfocaron esta librería a que permitirá trabajar de manera que el Javascript que generara, no fuera intrusivo. Bien, si trabajamos bajo esta filosofía, nos vamos a ver en la tesitura de tener que realizar algunas operaciones una vez que se haya cargado el árbol del DOM.

Antiguamente, lo normal era usar el evento onload del objeto window, pero esto tiene un problema que es que este evento salta cuando ha cargado completamente el árbol del DOM (y esto está muy bien), las imágenes y todos los recursos externos por lo tanto, cuando al usuario le puede parecer que está cargada la página, nosotros no hemos podido ejecutar nuestro código y nuestra página no está dotada de la funcionalidad cliente necesaria o del comportamiento necesario.

La sintaxis del evento onload del objeto window es la siguiente:

window.onload = function() {
alert("cargado");
}

JQuery lo resuelve esto por medio del Ready Handler. Este evento, espera a que el árbol del DOM este cargado y luego se levanta y al contrario que el onload del objeto window, no espera a que se carguen imágenes ni objetos externos.

La sintaxis de este evento es la siguiente:

$("document").ready(function() {
alert("cargado");
});

O:

jQuery("document").ready(function() {
alert("cargado sin alias");
});

Primero, usamos el alias $, para seleccionar un elemento del DOM (en este caso document), la función $, nos devuelve una colección de elementos a los cuales les podemos asignar comandos (suscribimos un evento) y cada uno de estos comandos nos vuelve a devolver la colección seleccionada anteriormente, de ahí que se puedan ir encadenando.

Hay que tener en cuenta, que esta es la sintaxis formal ya que también podríamos suscribir el evento ready de la siguiente forma:

$(function() { alert("re - cargado"); });

Aunque mejor, nos vamos a acostumbrar al primer caso y así empezamos ya con las buenas prácticas.

Descargas – Downloads

• Descargate el código fuente que he usado en este ejemplo y así podras ver esto en real.

Como no podía ser de otra forma, cuando he escrito este post he escuchado a Joy Division,  una estrella que se apago demasiado pronto, así que mis druguitos, aqui os dejo con ellos.

Anuncio publicitario