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>

Bueno, tenemos una etiqueta div con el id de "divTest1". En el código de JavaScript usamos el atajo $ para acceder a JQuery, después seleccionamos todos los elementos con un id "divTest1" (aunque solo hay uno) y se establece su texto a "Hola mundo!". Podrías no saber lo suficiente sobre JQuery para entender por que y como trabaja esto, pero a medida que progresas en este tutorial, todos los elementos serán explicados 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.

Normally though, you should wait for the document to enter the READY state before you start manipulating its content. The above examples will work in most browsers and likely even work when you do more advanced stuff, but certain tasks may fail if you try to do them before the document is loaded and ready. Fortunately, jQuery makes this very easy as well, as we will see in the next chapter. After that, we will start looking into one of the most important aspects of jQuery, which has already been used in the above example: Selectors.