Antes de nada
Esta primera parte del tutorial explica los conceptos más básicos de jQuery necesarios para poder entender luego todo lo demás. En este artículo no hay todavía ejemplos que puedan ser llevados a la práctica, pero es necesario revisar primero estos conceptos. A partir de la segunda parte del tutorial, estaremos listos para comenzar a hacer scripts realmente complejos con jQuery.
Instalación
Para poder comenzar a trabajar con jQuery, lo primero que necesitamos es descargar una copia de la librería.
Puedes descargar la última versión de jQuery desde jquery.com. Una vez tengas la copia de la librería ya tendrás todo lo necesario para comenzar a trabajar.
Lo más básico
Lo primero que tienes que hacer para poder utilizar jQuery, es añadir la librería en el archivo HTML en el que quieras utilizarlo. Para ello, añade la siguiente línea en el HEAD de tu HTML.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
…
</html>
Aquí estamos suponiendo que el archivo jquery.js está en el mismo sitio que el archivo HTML.
Dado que todo la mayoría de cosas que vamos a hacer con jQuery están relacionadas con manipular el DOM, lo primero que solemos hacer con jQuery es registrar el evento que nos indica que el DOM está listo. Para ello escribimos,
$(document).ready(function() {
// Hacer cosas
});
Esto es similar a la típica llamada “window.onload” que se hace en Javascript cuando queremos que algo se ejecute al terminar de cargar la página.
Aunque quizás sea adelantarme un poco, jQuery está pensado para escribir poco código. De forma que existe un método que hace lo mismo que el código anterior y mucho más corto,
$(function() {
// Hacer cosas
});
El código anterior es simplemente una notación más corta para expresar lo mismo.
Lo que pongamos dentro de la función que acabamos de declarar se ejecutará cuando el documento esté listo. Jquery está muy orientado a eventos. Lo normal es asociar eventos que se ejecutan cuando el usuario realiza alguna acción. De esta forma podemos separar el comportamiento del contenido, de la misma forma que separamos el contenido de la presentación con las CSS.
Es muy sencillo asociar eventos a elementos con jQuery. Por ejemplo, el siguiente código asocia al evento onclick de cualquier enlace de la página el mostrar un alert con el mensaje “Hola”.
$(document).ready(function() {
$("a").click(function() {
alert("Hola");
});
});
Si pegáramos el código anterior en cualquier HTML con varios enlaces, al pinchar en cualquiera de los enlaces obtendríamos un mensaje diciendo “Hola”.
$(“a”) es un selector de jQuery, que devuelve todos los enlaces de la página actual. La función click es un método del objeto jQuery. Lo que hace es enlazar a todos los elementos seleccionados por $(“a”) un evento onclick que ejecutará la función pasada entre paréntesis.
Todo esto que acabamos de hacer es el equivalente a la siguiente línea de código
<a href="" onclick="alert('Hello world')">Link</a>
Evidentemente, la ventaja de usar jQuery es la separación entre contenidos (HTML) y los comportamientos (Javascript), esto nos da un código mucho más limpio.
Selectores
Lo primero que vamos a hacer cuando trabajamos con jQuery es seleccionar elementos sobre los que trabajar. Por ejemplo, si queremos ejecutar una acción cuando un usuario pincha en un botón, lo primero es seleccionar el botón e indicar que acción se ejecutará al pinchar sobre él. O si deseamos que suceda algo cuando el usuario pasa el ratón encima de una imagen, lo primero será seleccionar dicha imagen.
jQuery tiene dos formas para seleccionar elementos de una página. Mediante una combinación de selectores CSS y XPATH que podemos pasar al constructor de jQuery, y mediante varios métodos del objeto jQuery. Las dos formas pueden usarse por separado o de forma conjunta.
En la primera de las aproximaciones puedes utilizar cualquier expresión de selección CSS o XPATH. Por ejemplo, si deseas seleccionar los elementos que tienen la clase CSS “.rojo”, podrías hacer lo siguiente
$(“.rojo”)...
Lo que devolvería todos los elementos que tienen la clase .rojo. Si queremos seleccionar un elemento que tiene el identificador “formulario_noticias”, escribiríamos
$(“#formulario_noticias”)
No tenemos porque limitarnos a expresiones tan sencillas ni en CSS. Podemos utilizar expresiones más sofisticadas tanto de CSS como de XPATH. Por ejemplo, el siguiente código
$("#lista li:last")
Devolvería el último elemento li que se encontrara dentro de otro elemento con identificador lista. O este otro,
$("#lista > li")
que devolvería todos los elementos li dentro de un elemento con identificador lista.
Podemos utilizar cualquier expresión XPATH o CSS válida. La lista de selectores actuales puede encontrarse en la documentación de selectores de jQuery.
Además de los selectores CSS y XPATH, jQuery pone a nuestra disposición una serie de métodos que nos permiten seleccionar de forma sencilla elementos de una página. Por ejemplo,
$("#lista").find("li")
El método find permite seleccionar todos los elementos que cumplen el criterio pasado como parámetro. El resultado de la línea de código anterior es devolver todos los elementos li que hayan dentro del elemento con indentificador lista. Es el mismo efecto que conseguíamos antes con CSS.
Pero jQuery permite ir mucho más allá y realizar operaciones más complejas. Imagina que necesitas seleccionar ciertos elementos de un grupo con características similares, como podría ser seleccionar todos los elementos li de una lista, que no contengan ningún elemento ul dentro. Podríamos hacerlo así,
$("li").not(":has(ul)")...
Para filtrar resultados tenemos dos funciones. Una de ellas es “not”, que seleccionaría todos los elementos que no cumplen el criterio, y la otra es “filter”, que hace justo lo contrario.
Otro método bastante potente de seleccionar elementos es utilizando la sintaxis [expresión]. Por ejemplo, si deseas seleccionar todos los enlaces de una página que tengan un atributo “name”, podríamos hacer,
$("a[name]")...
O incluso si necesitamos seleccionar enlaces que contengan una cierta dirección de enlace en su “href”, jQuery nos proporciona un método para hacerlo.
$("a[href*=/imagenes/demo]")....
El operador “*=” significa “que contiene”, en lugar de “es exactamente igual”. De esta forma la expresión anterior devuelve los enlaces que contienen la dirección “/imagenes/demo”. La dirección no tiene que se exacta, sino simplemente contener dicha dirección.
Otras operaciones que suelen ser comunes cuando trabajamos con jQuery es acceder a los elementos contiguos, a los padres e hijos de otros elementos. Por ejemplo, si tenemos este HTML
<ul>
<li>texto 1</li>
<li id=”inicio”>texto 2</li>
<li>texto 3</li>
<li><ul>
<li>texto 4</li>
</ul></li>
</ul>
Por comodidad he puesto el identificador “inicio”. De esta forma, para acceder al elemento con identificador “inicio”, hacemos;
$(“inicio”)...
Si deseamos acceder al elemento con el texto “Texto 3” haríamos,
$(“inicio”).next()
Y al de “Texto 1” haríamos
$(“inicio”).previous()
Si necesitamos acceder al elemento padre del de identificador “inicio”, el padre (ul), haríamos
$(“inicio”).parents()
Y si queremos acceder al ul hijo del cuarto li, haríamos,
$(“inicio”).next().next().children()
Que nos daría el elemento ul dentro del cuarto li.
Todo esto que hemos visto son sólo los aspectos más básicos de jQuery. Todavía no podemos hacer mucho, pero es necesario ver primero esto porque parte muy importante del trabajo va a ser la selección de elementos para trabajar con ellos.
En la siguiente parte del tutorial veremos en profundidad el trabajo con eventos. El conocimiento de los selectores junto de los eventos de jQuery es la base necesaria para poder realizar casi cualquier cosa de las que deseemos con jQuery.
