Hola Mundo!

Cada tutorial de programación decente comenzará con un "¡Hola, mundo!" ejemplo y este tutorial es otro de ellos. En el capítulo anterior, aprendimos cómo incluir jQuery en nuestra página, para que podamos comenzar a usar todas sus excelentes funciones. Necesita saber un poco más sobre cómo funciona jQuery, antes de poder comenzar a escribir su propio código, pero solo para asegurarse de que todo funcione y para que vea cuán simple es jQuery, comencemos con un pequeño ejemplo:

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

Bien, entonces tenemos una etiqueta 'div' con el id 'divTest1'. En el código JavaScript usamos el símbolo '$' para acceder a jQuery, luego seleccionamos todos los elementos con el id 'divTest1' (me parece que solo hay uno) y asignamos su texto a "Hola, mundo". Puede que no sepas lo suficiente acerca de jQuery para comprender por qué y cómo esto funciona, pero a medida que avances a través de este tutorial, todos los elementos serán explicado en detalle.

Incluso una simple tarea como esta normalmente requeriría bastantes pulsaciones de teclas adicionales si tuvieras que hacerlo en JavaScript plano, sin ayuda de JQuery.

<div id="divTest2"></div>
<script type="text/javascript">
document.getElementById("divTest2").innerHTML = "Hello, world!";
</script>

Y sería incluso más largo si tu elemento HTML no tuviera un ID, por ejemplo una sola clase.

Normalmente deberías esperar a que el documento esté LISTO antes de comenzar a manipular su contenido. El ejemplo de arriba funcionará en la mayoría de los navegadores y probablemente incluso cuando hagas cosas más avanzadas, pero algunas características pueden fallar si tratas de hacerlos antes que el documento esté cargado y listo. Afortunadamente, jQuery hace esto muy fácil también, como veremos en el siguiente capítulo. Después revisaremos uno de los aspectos más importantes de jQuery, el cual ya ha sido usado en el ejemplo de arriba: Selectores.