Las aplicaciones web cada vez son más complejas, ya que incorporan nuevos efectosvisuales e interacciones dinámicas (Ajax, auto-completar, drag&drop, elementos que aparecen/desaparecen, animaciones, etc.).

Al mismo tiempo, el desarrollo de las aplicaciones web avanzadas es cada vez más complicado, ya que deben funcionar correctamente en al menos 5 navegadores diferentes (Internet Explorer 6 y 7, Firefox, Opera y Safari) y el tiempo de desarrollo se reduce por la necesidad continua de incluir novedades en la aplicación.

Por todo ello, es imprescindible utilizar librerías JavaScript que simplifiquen el desarrollo y permitan crear aplicaciones compatibles con todos los navegadores.

¿Qué es jQuery?

Según sus creadores, jQuery es una “librería JavaScript muy rápida y muy ligera que simplifica el desarrollo de la parte de cliente de las aplicaciones web”. En otras palabras, jQuery incluye muchas utilidades para crear fácilmente las páginas web de las aplicaciones dinámicas complejas.

Conceptos básicos

Para utilizar jQuery, solamente es necesario descargar la librería y enlazar en nuestras páginas el único archivo JavaScript que la forma: 

<script type="text/javascript" src="jquery.js"></script>

La librería se puede descargar en dos versiones: la versión descomprimida ocupa 61 KB y es la mejor opción para desarrollar aplicaciones. La versión comprimida ocupa sólo 20 KB y es la opción ideal en el servidor de producción, para minimizar el tiempo de carga de la aplicación.

Una de las instrucciones más utilizadas en las aplicaciones JavaScript es la siguiente: 

window.onload = function() { ... }

La instrucción anterior permite ejecutar el código JavaScript una vez que la página se ha cargado por completo. Se trata de una instrucción imprescindible en las aplicaciones web complejas, porque cualquier modificación en la página o la selección de cualquier elemento necesita que el árbol DOM de la página se haya construido por completo, y por tanto, que esté disponible el código HTML de la página entera. jQuery dispone de una instrucción muy similar equivalente a la anterior:

$(document).ready( function() { ... } );

La gran ventaja de la función de jQuery, es que la página se puede manipular en cuanto se ha cargado su código HTML (y por tanto, se ha construido el árbol DOM de la página) mientras que la función de JavaScript espera a que se carguen todos los elementos de la página, incluyendo todas las imágenes. De esta forma, las aplicaciones realizadas con jQuery pueden responder de forma mucho más rápida que las aplicaciones JavaScript tradicionales.

Por otra parte, la función getElementById() es posiblemente la más utilizada al desarrollar aplicaciones web, ya que permite seleccionar un elemento a partir de su atributo “id”. Además, existen otras dos funciones relacionadas: getElementsByTagName() y getElementsByName(). jQuery incluye la función $() como una alternativa más rápida y completa para seleccionar cualquier elemento de la página:

Con JavaScript

// Seleccionar un elemento
document.getElementById("miParrafo");
// Seleccionar todos los enlaces
document.getElementsByTagName("a");
// Seleccionar todo lo anterior
?
// Seleccionar mediante la clase CSS
?

Con jQuery

// Seleccionar un elemento
$("#miParrafo");
 // Seleccionar todos los enlaces
$("a");
// Seleccionar todo lo anterior
$("#miParrafo, a")
// Seleccionar mediante la clase CSS
$(".miClase")

Selectores avanzados

Uno de los componentes más impresionantes de jQuery es el de sus selectores, que permiten olvidarse de los aburridos document.getElementById() y del código JavaScript complejo. jQuery utiliza lo mejor de CSS 1, CSS 2, CSS 3 y XPath para seleccionar de forma sencilla cualquier elemento de la página sin necesidad de saturar el código XHTML con atributos “id”. Ejemplos: 

// Seleccionar todos los párrafos de la página que tengan al menos un enlace
$("p[a]")
// Seleccionar todos los "div" que no estén ocultos
$("div:visible")
// Seleccionar todos los radio buttons que han sido seleccionados
$("input[@type=radio][@checked]")
// Seleccionar varios elementos mediante sus "id" y "class" (devuelve un array)
$("p.importante, div#menu, span#introduccion p.especial a")

Además, jQuery soporta muchos de los selectores que define CSS 3, algo que los navegadores actuales sólo pueden soñar con tener algún día, como :nth-child(n), :empty, :not, :disabled. Para los programadores más acostumbrados a trabajar con XML, jQuery también permite utilizar XPath para seleccionar elementos, como por ejemplo: 

// Seleccionar todos los párrafos de la página
$("/html/body//p");
// Seleccionar todos los enlaces cuyo atributo "rel" valga "nofollow"
$("//a[@ref='nofollow']");

jQuery es tan avanzado que incluso añade sus propios selectores que no existen ni en CSS ni en XPath, pero que facilitan mucho el desarrollo de las aplicaciones: 

// Selecciona todos los elementos pares de una lista (":odd" selecciona los impares)
$("ul#menu li:even")
// Selecciona los 4 primeros párrafos de la página
$("p:lt(4) ")
// Selecciona todos los enlaces que contengan el texto "pincha aquí"
$("a:contains('pincha aquí')")

Eventos

Además del evento ready() visto anteriormente, jQuery dispone de varias funciones relacionadas con la gestión de los eventos. El método bind(), por ejemplo, permite asociar un número ilimitado de eventos a un mismo elemento:

// Al pinchar sobre un párrafo de la página, se muestra un alert() con su contenido
$("p").bind("click", function() {
   alert( $(this).text() );
});

El modelo de eventos de jQuery es muy completo, ya que cada evento dispone de dos posibilidades: si no se pasa ninguna función, se ejecuta el evento del elemento; si se pasa una función, se asocia esta función al evento del elemento: 

// Ejecuta el evento "onclick" en todos los párrafos de la página
$("p").click(); 
// Asocia una función al evento "onclick" de todos los párrafos de la página
$("p").click(function() {
   alert( $(this).text() );
});

jQuery dispone de tantas funciones como eventos estándar de JavaScript. El nombre de cada función es el mismo que el del evento, sin el habitual prefijo “on”: focus(), blur(), keyup(), mouseover(), mouseup(), resize(), submit(), etc.

Además, jQuery añade un evento que no existe en JavaScript y que es realmente útil para muchas aplicaciones: toggle(). A este método se le pasan dos funciones, cuya ejecución se alterna en función de las veces que se pincha sobre el elemento.

La primera vez que se pincha sobre el elemento (y todas las veces impares), se ejecuta la primera función y la segunda vez que se pincha el elemento (y todas las veces pares) se ejecuta la segunda función: 

$("p").toggle(function(){
   alert("Me acabas de activar");
},function(){
   alert("Me acabas de desactivar");
});

Interacciones Ajax

Ahora que la mayoría de aplicaciones web deben incorporar interacciones creadas con Ajax, jQuery permite incluirlas sin ningún tipo de dificultad. Los siguientes ejemplos muestran lo sencillo que es realizar algunas interacciones comunes en Ajax: 

// Cargar el contenido de una página HTML en un elemento
$("div#noticias").load("noticias.html"); 
// Descargar un script desde el servidor y ejecutarlo
$.getScript("/ruta/hasta/miScript.js"); 
// Petición GET al servidor con parámetros y función de respuesta
// La petición POST es idéntica, salvo que se cambia $.get por $.post
$.get("/ruta/hasta/el/scriptDelServidor.php",
   { idProducto: "AX00342", cantidad: "3" },
   function(data){
     alert("Se ha añadido al carrito: " + data);
   }
);

Además, jQuery incluye muchas otras funciones para construir peticiones Ajax complejas y para notificar al usuario el inicio/ejecución/finalización de las peticiones Ajax.

Efectos visuales

Todas las aplicaciones web modernas incorporan pequeños efectos visuales y animaciones que, si se utilizan de forma adecuada, mejoran la interacción con la aplicación y su usabilidad. jQuery incluye de serie los efectos visuales más utilizados por los diseñadores, pudiendo controlar mediante sus opciones la duración de cada efecto: 

$("p").hide();        // Ocultar un elemento
$("p").show();        // Mostrar un elemento
$("p").toggle();      // Si estaba oculto, mostrarlo; si era visible, ocultarlo
$("p").show("slow");  // Mostrar el elemento con una animación muy suave
$("p").slideToggle("fast"); // Desplegar/ocultar el elemento con una animación muy rápida
$("p").fadeOut();     // El elemento desaparece con un fundido muy suave

Otras utilidades

jQuery incluye muchas otras funciones para facilitar el desarrollo de las aplicaciones web, entre otras: 

// Obtiene el valor de la propiedad "color" de CSS del primer párrafo de la página
$("p").css("color");
// Establece el valor de la propiedad "color" de CSS
$("p").css("color","red");
// Establece varias propiedades CSS de un elemento
$("p").css({ color: "red", background: "blue", font-weight: "bold" });
// Oculta todos los elementos de un formulario
$(miFormulario.elements).hide();
// Devuelve "true" si el navegador es alguna versión de Internet Explorer
$.browser.msie
// Devuelve "true" si el navegador es alguna versión de Safari
$.browser.safari
// Obtiene o establece el valor del "innerHTML" del elemento
$("#contenidos").html();
$("#contenidos").html("<h1>Contenidos</h1><p>Cargando...</p>");
// Añade la clase CSS a todos los elementos o la quita si ya la tenían establecida
$("p").toggleClass("seleccionado");

Este artículo sólo muestra una mínima parte de las posibilidades de la excelente librería jQuery. Gracias a jQuery, puedes hacer mucho más y mucho mejor pero escribiendo menos código JavaScript, además de tener la garantía absoluta de que tus aplicaciones funcionan igual de bien en cualquier navegador.

Lecturas de referencia

La mayoría de la información y ejemplos de este artículo han sido extraídos de la excelente documentación en inglés de jQuery. Una buena forma de estudiar la API completa de jQuery es acceder a la guía visual.