Introducción a jQuery.

2
31419

Introducción a jQuery.

0. Índice de contenidos.

1. Introducción

jQuery es una librería javascript ligera, rápida y
concisa que simplifica el tratamiento de documentos HTML, el manejo de eventos, la creación de animaciones y
las interacciones vía Ajax, para agilizar el desarrollo de aplicaciones web.

Sus puntos fuertes son los siguientes:

  • mejora la interacción entre javascript y HTML: esto es, el manejo del árbol DOM en el cliente,
  • es plugable, existen gran número de plugins que extienden su funcionalidad y cualquiera puede crear sus propios plugins,
  • tiene un módulo de widgets que proporcionan componentes predefinidos y efectos visuales a la interfaz de usuario: jQuery UI, y
  • es Cross browser, de modo que está testada en los siguientes navegadores: I.E. 6.0+, FF2+, Safari 2.0+, Opera 9.0+, Chrome.

Está diseñado para cambiar la manera en la que escribimos Javascript y, siguiendo el camino y la
filosofía de prototypejs (puesto
que nace como una posible mejora para la misma), se puede decir que hoy día es el framework javascript más usado:

  • muchos desarrollos la tienen como base: Life Ray Portal, Drupal, WordPress,… y
  • es la librería corporativa de Google, Dell, Nokia, Microsoft (está incluida en Visual Studio),…

jQuery nos va a ayudar a escribir un código más limpio, separando el comportamiento del contenido, lo que se
denomina javascript no obstrusivo. De esta manera, tendremos la impresión de estar «inyectando» comportamiento en
componentes identificables del árbol DOM.

Todo lo dicho no implica que con jQuery tengamos mucha más funcionalidad de la que teníamos con prototypejs, la ventaja es que es más simple, potente y plugable,
y hay un gran número de plugins en torno a jQuery que permiten añadir comportamientos, widgets y efectos visuales a nuestra interfaz de una manera muy sencilla
(ya hemos visto en adictos alguno de ellos: jcarrusel y jtip).

2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17′ (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM).
  • Sistema Operativo: Mac OS X Snow Leopard 10.6.1
  • jQuery 1.3.2.

3. Instalación.

Tenemos disponibles dos versiones: para desarrollo (120 Kb) y producción (19 Kb, comprimida).

Podemos descargarnos la última versión de la siguiente url:
http://docs.jquery.com/Downloading_jQuery#Current_Release

Y, para hacer uso de la misma, en nuestras páginas html, no hay más que incluir una referencia a esta en una etiqueta script, en la cabecera:

En el atributo src de la etiqueta script se asume que la librería se encuentra en un directorio lib, relativo a la ubicación de la página html.

4. jQuery en la práctica.

Sin el soporte de jQuery, el código javascript necesario para decorar las filas de una tabla con distinto color
de fondo en impares y pares, lo que se denomina un «zebra tables» en css, sería el siguiente:

El código anterior hace uso de los métodos de la especificación DOM para obtener todas las filas de todas las tablas,
recorrerlas una a una, para comprobar el orden dentro de la tabla y modificar el estilo css de las impares.

Con el soporte de jQuery el código anterior se reduce a una sola línea:

Hacemos uso de la función dolar que permite obtener un componente o un array de componentes del árbol en función
de un selector, y jQuery incluye selectores propios para, por ejemplo, recuperar solo los impares dentro del array.
A cada uno de los componentes de la colección obtenida se añadirá el estilo css indicado.

5. Funciones y métodos básicos.

La función central de jQuery es la función dolar $(«») con la que se accede a los nodos del árbol DOM.
Es como la función homónima de prototypejs, si bien amplía su funcionalidad puesto que permite el uso de selectores css
dentro de la misma (en prototypejs se requiere el uso de la función doble dolar $$(«») para ello).

La función dolar es un alias de la función jQuery(«»), que es una factoría de objetos jQuery, puesto que puede devolver
como resultado un objeto jQuery o un array de ellos.

A continuación unos ejemplos de uso:

La función jQuery o $(») admite distintos parámetros

Dentro de los selectores CSS, además:

  • tiene sus propias variantes css (ascendientes, descendientes, hermanos…),
  • selectores xpath (descendencia de nodos, que contiene un nodo o atributo con posibilidad de operadores lógicos) y
  • selectores propios (pares, impares, contiene, visible|oculto…).

6. Funciones de eventos y de modificación del atributos de DOM.

jQuery provee métodos para asignar manejadores de eventos a elementos obtenidos o creados:

  • click() y dbclick(): añade un evento al click del ratón,
  • keypress() y keydown(): añade un evento a la pulsación del teclado,
  • hover(): añade un evento a la acción de pasar el puntero del ratón sobre un componente,
  • toogle(): intercambia entre un comportameiento u otro cuando se produce el evento.

Además, incorpora métodos para modificar los atributos asociados a los componentes o nodos del árbol DOM:

  • text() y html(): devuelven o asignan el texto como un String o el html como si trabajásemos con innerHTML.,
  • attr() y removeAttr(): accede, modifica y elimina un atributo de un nodo,
  • addClass(), removeClass() y toogleClass(): añade, elimina o intercambia las clases css indicadas,
  • css(): devuelve o asigna una propiedad css a un nodo.

Con la conjunción de ambos tipos de funciones, se puede escribir código como el que sigue:

7. Funciones Ajax.

jQuery tiene un excelente soporte para Ajax que se traduce en las siguientes funciones:

También dispone de una serie de métodos que permiten enganchar con el ciclo de vida de una petición Ajax:

Un ejemplo que combinaría el soporte para Ajax con todo lo visto anteriormente, podría ser el siguiente:

En el ejemplo se puede ver además:

  • la posibilidad de iterar por una colección de objetos obtenida con la función dolar, mediante el método each, que
    puede recibir como parámetro una función.
  • el método append, que permite añadir código html a un nodo del árbol.

8. Referencias.

9. Conclusiones.

La sombra que se esconde entre las luces ha dejado de ser prototypejs y ahora jQuery es la apuesta por el caballo ganador.
Mira que me costaba, pero hay que rendirse a la evidencia y voy a intentar ir demostrándolo en siguientes tutoriales.

Para concluir, comentaros que en Autentia nos dedicamos, además de a la consultoría,
desarrollo y soporte a desarrollo, a impartir cursos de formación de las tecnologías con las que trabajamos. Si estáis interesados en el contenido de nuestros tutoriales
y tenéis una necesidad formativa al respecto no dudeis en poneros en contacto con nosotros.

Un saludo.

Jose

jmsanchez@autentia.com

2 Comentarios

  1. Buenos días José Manuel.
    Me parece interesante lo que comentas… hay que rendirse a la evidencia, y, el que no se va actualizando, va quedándose atrás….

Dejar respuesta

Please enter your comment!
Please enter your name here