This article is currently in the process of being translated into Spanish (~25% done).


Hello, world!

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!");

Okay, so we have a div tag with the id of "divTest1". In the JavaScript code we use the $ shortcut to access jQuery, then we select all elements with an id of "divTest1" (there is just one though) and set its text to "Hello, world!". You may not know enough about jQuery to understand why and how this works, but as you progress through this tutorial, all of the elements will be explained in detail.

Even such a simple task as this one would actually require quite a few extra keystrokes if you had to do it in plain JavaScript, with no help from jQuery:

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

And it would be even longer if our HTML element didn't have an ID, but for instance just a class.

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.

This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!