jQuery básico (I)

¿Qué es jQuery?

jQuery es una librería, esto es, un conjunto de funciones preparadas para funcionar basada en Javascript un lenguaje de programación orientado a los navegadores web y a la interfaz de usuario.

Gracias a jQuery vamos a poder simplificar:

- Movernos por el DOM.

Un documento web (página web HTML) tiene una estructura de árbol de forma que cada elemento que compone el documento está identificado y relacionado: párrafos, títulos, imágenes, listas, hipervínculos. Esto es debido a que HTML (Hypertext Markup Language) es un lenguaje de programación de marcas jerárquico. Mediante jQuery vamos a poder movernos (y por movernos entendemos analizar) por todo este árbol jerárquico de componentes del documento HTML.

- Manipular el DOM
- Gestión de eventos.

Por eventos entendemos cualquier interacción entre el usuario y el documento web: desde el típico click sobre un enlace hasta movimientos de ratón o presión de determinadas teclas.

- Efectos de la interfaz de usuario
- AJAX.

Se trata de una tecnología que nos permite introducir comportamientos asíncronos (es decir, lanzados por determinado evento) durante el tiempo que el usuario está en una web lo que, en resumidas cuentas, nos permite realizar cambios en la propia página web sin necesidad de recargarlas aumentando así exponencialmente la capacidad interactiva de las mismas.

Además, algo muy interesante es su funcionalidad en la práctica totalidad de los navegadores actuales.

En esta primera aproximación a jQuery vamos a comprender la estructura básica que debería tener un documento jQuery y vamos a programar una pequeña animación ejemplo.

En primer lugar hemos de comprender varios conceptos sobre las herramientas que vamos a usar:

- Javascript: No requiere instalación porque es inherente a los navegadores. Desde hace ya bastante tiempo todos los navegadores soportan las etiquetas <script> y son capaces de procesar correctamente Javascript.
- jQuery: Es una librería que debemos cargar en nuestro documento HTML y, por tanto, debe residir en nuestro servidor.
- Script: Va a ser nuestro “programa”. Encargado de ejecutar las órdenes y comandos que queramos que nuestro documento HTML interprete.

Animaciones Básicas

- Básico: show(), hide(), toggle(), fadeIn(), fadeOut().
- Avanzado: animate(). CSS parameters.

Ejemplo de documento HTML con jQuery integrado:

...
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/script.js"></script>
...
<a id="show" href="#">Mostrar...</a>
<p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aliquam vulputate cursus eros. Nulla facilisi. Suspendisse sed
nunc ligula, a varius erat. Nam porttitor sapien vitae ante
viverra sed accumsan leo ultricies. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac tur</p>
...

Recomiendo usar un subdirectorio para todos los scripts: “lib”, “script”, “code”…

Ejemplo de script básico:

$(document).ready(function(){
// First version of testing
$('#p1').hide();
$("a#show").click(function(event){
$('#p1').toggle(1000);
});
});

Todas las $(…) son los selectores del DOM y especifican qué elemento del árbol estamos eligiendo. Como veréis, siempre empezaremos con un $(document).ready(… dado que queremos que nuestro programa cargue una vez toda la página HTML y, por ende, el DOM hayan sido cargados.

El primer selector $(‘#p1′) posiciona a nuestro programa sobre el elemento que tenga como atributo “id” el nombre “p1″ y sobre ése aplica la función hide(): lo oculta.

El siguiente selector $(“a#show”) busca el elemento del DOM a (hipervínculo) que tenga como id “show” y escucha el evento click. Cuando el usuario clickea sobre ese elemento lanza el contenido de ese “evento”, que en este caso es una función que busca de nuevo el elemento con id “p1″ y le aplica la función toggle(): si estaba oculto lo muestra y si se mostraba lo oculta.

Probad y me contáis.