Introducción a jQuery.
0. Índice de contenidos.
- 1. Introducción.
- 2. Entorno.
- 3. Instalación.
- 4. jQuery en la práctica.
- 5. Funciones y métodos básicos.
- 6. Funciones de eventos y de modificación del atributos de DOM.
- 7. Funciones Ajax.
- 8. Referencias.
- 9. Conclusiones.
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:
|
1 |
<script type="text/javascript" src="lib/jquery-1.3.2.js"></script> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
function zebra_tables(){ var tables = document.getElementsByTagName('table'); for (var t = 0; t < tables.length; t++) { var rows = tables[t].getElementsByTagName('tr'); for (var r = 0; r < rows.length; r++) { if (r%2 != 0) { rows[r].className = "odd"; } } } } |
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:
|
1 2 3 |
function jQuery_zebra_tables(){ $("table tr:nth-child(odd)").addClass("odd"); } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$("div"); // obtiene todos los nodos DIV del árbol DOM $("#layout"); // obtiene el nodo con el atributo id = "layout" del árbol DOM $(".myStyle"); // obtiene los nodos cuyos atributos class tengan el valor "myStyle" dentro del árbol DOM // La función $("") nos permite: // * Crear u obtener "algo": $("<li>home</li>"); // crea un nodo de tipo li con un texto embebido "home" $("div#content"); // obtiene el nodo de tipo div cuyo identificador sea "content" // * Hacer "algo" con lo creado u obtenido: $("<li>home</li>").wrapInner("<a>"); // crea un nodo li e inserta un anchor $("div#content").text("Este es el nuevo contenido de la capa"); // obtiene el nodo div con id = content y modifica el texto que contiene la capa. // * Y, todo ello, se puede realizar de forma encadenada: $("<li>home</li>").wrapInner("<a>").appendTo("#nav"); // podemos añadir lo creado a un nodo con id = nav del árbol |
La función jQuery o $(») admite distintos parámetros
|
1 2 3 4 5 6 7 8 |
// Selectores CSS: $("li"); // Elementos DOM: $(document); // HTML: $("<li>home<li>"); // Una función: $(function(){}); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> // con la función ready asociada al documento nos aseguramos que el código se ejecuta cuando la página esté totalmente cargada en el cliente // sustituye al atributo onload del nodo body. $(document).ready(function() { // obtenemos todos los hiperenlaces y les asociamos una función al evento onclick $("a").click(function(event){ // cuando se produzca el evento asignamos un estilo css de color de fondo al enlace $(this) $(this).css({backgroundColor:'red'}); }); }); </script> |
7. Funciones Ajax.
jQuery tiene un excelente soporte para Ajax que se traduce en las siguientes funciones:
|
1 2 3 4 5 6 7 8 9 10 11 |
// carga un html de una url remota y lo inyecta en el elemento. $('#content').load('/content.html'); // carga una página remota realizando una petición HTTP GET. $.get('/some_url',params,callback): // carga una página remota realizando una petición HTTP POST. $.post('/some_url',params,callback): // carga un objeto JSON de una ubicación remota realizando una petición HTTP GET. $.getJSON('/some_url',params,callback): |
También dispone de una serie de métodos que permiten enganchar con el ciclo de vida de una petición Ajax:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// añade una función de callback que se ejecutará cada vez que se completa una petición Ajax. $.ajaxComplete(callback) // añade una función de callback que se ejecutará cada vez que se produce un error en una petición Ajax. $.ajaxError(callback) // añade una función de callback que se ejecutará cada vez que se produzca un petición Ajax con una respuesta satisfactoria. $.ajaxSuccess(callback) // añade una función de callback que se ejecutará antes de que se envíe una petición Ajax. $.send(callback) |
Un ejemplo que combinaría el soporte para Ajax con todo lo visto anteriormente, podría ser el siguiente:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript"> $(document).ready(function() { // es una url relativa al contexto de la aplicación que podría funcionar en local, para probar, // sin necesidad de despliegue en un servidor var surl = "./news.xml"; // petición ajax vía get $.get(surl, function(data){ // parseo del resultado a través de una función de callBack, iterando por cada uno de los párrafos del xml $("p",data).each(function (i,item){ // añadimos a un nodo contenedor cada uno de los párrafos $("#container").append(item); }); }); }); </script> |
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.
- Documentación de jQuery
- Introducción a jQuery para desarrolladores
- Comparativa entre jQuery y prototypejs
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
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….
Buenos días de nuevo, en una segunda pasada, creo que JQuery es un framework excelente para el desarrollo web….