The ready event

Como lo mencionamos en el capítulo anterior, es una buena práctica esperar que el documento este completamente cargado y listo, antes de trabajar con el. Esto tambièn te permite tener tu código de JavaScript antes del cuerpo del documento, en la sección del head, ya sea directamente a traves de de un enlace externo a un archivo JavaScript. Puedes hacer esto poniendo tu código dentro del bloque del evento document ready. Nosotros usaremos el mismo ejemplo que en el capítulo del "Hello, world!", pero esta vez el còdigo esta dentro del evento ready:

<div id="divTest1"></div>
<script type="text/javascript">
function DocumentReady()
{
	$("#divTest1").text("Hello, world!");	
}

$(document).ready(DocumentReady);
</script>

Lo que nosotros hacemos aqui es crear una función, llamada DocumentReady, la cual debería ejecutarse tan pronto como el documento este listo para la manipulación del DOM. En la última linéa, usamos el método ready() para asignar nuestra función para el evento ready, le decimos a jQuery que tan pronto el documento este listo, nosotros queremos que llame nuestra función.

Sin embargo, nosotros podemos acortar un poco más esto usando una función anónima de JavaScript. Esto bàsicamente significa que en lugar de declarar una función y darle un nombre, nosotros simplemente la creamos e inmediatamente la pasa como referencia para la función ready(). Si tu eres nuevo en JavaScript, esto puede parecer un poco complicado, pero a medida que te acostumbras, puedes apreciar las pocas teclas que debes usar y cuanto espacio menos se necesita para hacer lo mismo:

<div id="divTest2"></div>
<script type="text/javascript">
$(document).ready(function()
{
	$("#divTest2").text("Hello, world!");	
});
</script>

Por supuesto, esto no era lo suficientemente corto para el equipo de jQuery, entonces ellos decidieron crear una version (overload) del constructor jQuery donde toma la function ready como un parametro, para hacerlo más corto:

<div id="divTest3"></div>
<script type="text/javascript">
$(function()
{
	$("#divTest3").text("Hello, world!");	
});
</script>

En el último ejemplo, nuestra función anónima fue pasada directamente para el constructor de jQuery, donde es asignada al evento ready. Como pudiste ver cuando pruebas el código, el evento ocurre tan pronto como la página es cargada, la mayoria del tiempo más rápido de lo que tu puedas notar.

Como ya lo describimos, poniendo tu código dentro de la función de evento ready es la mejor práctica para trabajar con jQuery en su documento y para eso usted puede ver este tutorial usando el enfoque en la mayoria de los ejemplos, a menos que se omita para mantener los ejemplos de tamaño de abajo.