Dizque

Queridos niños, creo que ya es hora de que hable un poquito fondo de la librería de mis amores, jQuery, una librería javascript ligera y sumamente útil, desarrollada por el incansable John Resig.

Como se explica en el sitio web correspondiente:

jQuery is a new type of Javascript library. It is not a huge, bloated, framework promising the best in AJAX - nor is just a set of needlessly complex enhancements - jQuery is designed to change the way that you write Javascript.

(Traduzco: jQuery es un nuevo tipo de librería de javascript. No es un extenso e inflado framework que prometa lo mejor en AJAX, ni un conjunto de innecesarias y complicadas mejoras: jQuery ha sido diseñado para cambiar tu forma de escribir javascript. [N. del T. Si hay algún traductor en la sala, le pido mil perdones.])

Y bueno, la mía si la ha cambiado. Echemos un vistazo a una línea de código escrito utilizando jQuery:

$('tbody tr:even').addClass('alt');

Dicho código se patea todos los tbody de nuestras tablas y añade a las filas impares (even) la clase alt, que nos permitirá dibujar nuestras tablas cual si cebras fueren. (Por supuesto, necesitaremos añadir el estilo a nuestro CSS, con un tr.alt { background: #ddd; } será suficiente.)

En resumen: jQuery sirve para seleccionar elementos del DOM y manipularlos.

Selección de elementos

El núcleo de jQuery es la función $, que permite recoger en una colección cualquier conjunto de elementos DOM utilizando selectores CSS o, si lo preferimos, XPath (ojo que en algunos casos la sintaxis es un pelín distinta, revisa la documentación al respecto).

Algunos ejemplos:

// todos los elementos de tipo `e`
$('e');

// elementos de tipo `e` que son descendientes
// de elementos de tipo `f`
$('f e');

// elementos de tipo `e` que son hijos
// de elementos de tipo `f`
$('f > e');

// elementos con clase `cwt`
$('.cwt');

// elementos con identificador `contacts`
$('#contacts');

// elementos de tipo `e` que contienen
// un atributo `foo`
$('e[@foo]');

// elementos de tipo `e` que contienen
// un atributo `foo` con valor `bar`
$('e[@foo="bar"]');

// y por supuesto...
$('h2 a, h1 + *, #error-holder.error, #sidebar h3');

Manipulación

¿Qué interés tendría acceder a los elementos si no pudiéramos hacer perrerías con ellos? He aquí algunos ejemplos de lo que puedes hacer una vez tienes la colección en tus manos:

Jugar con los estilos

// añadir y quitar clases
$('tbody tr:even').addClass('alt');
$('body').removeClass('fixedWidth');

// asignar reglas de estilo
$('.cwt').css({'border': '4px solid red', 'color': 'red'});

// leer valores computados
$('body').css('height'); 
// devuelve la altura _computada_ del elemento body

Encontrarás la documentación pertinente en BaseStyle.

Asignar manejadores de eventos

Los métodos bind y unbind sirven pasa asignar y deasignar manejadores de eventos. En el módulo de eventos avanzados, disponemos de algunos extras, como click, unclick, oneclick…

// al hacer clic sobre la cabecera de una tabla
// se disparará la función `$.sortableTable.onclickSort`
$('thead th').bind('click', $.sortableTable.onclickSort);

// lo mismo en otras palabras
$('thead th').click($.sortableTable.onclickSort);

// si queremos disparar el manejador una sola vez
$('thead th').oneclick($.sortableTable.onclickSort);

// por supuesto, también podemos eliminar manejadores
('thead th').unbind('click', $.sortableTable.onclickSort);

Otro método súmamente útil, de nombre hover, acepta como parámetros dos funciones, dos. La primera de ellas se ejecutará cuando el ratón se posicione sobre el elemento, la segunda, cuando salga de él.

$('tbody tr').hover(
    function(e) {
        $(this).addClass('over');
    },
    function(e) {
        $(this).removeClass('over');
    }
);

Y el colmo de los colmos, ready nos permite comenzar a trabajar con el DOM cuando se completa la carga del documento, sin necesidad de esperar (como sucede si utilizamos window.onload) a que se complete también la carga de las imágenes:

$(document).ready(function(e) {
    alert('Tonto el que espere a cargar las imágenes');
});

Importante: el uso de $(document).ready(f) es incompatible con scripts que utilicen el infame `document.write`, lo que lo deja fuera de circulación si tu sitio incluye anuncios de Google (como es mi caso). Como alternativa, siempre nos quedará `load`.

Encontrarás la información sobre asignación básica de manejadores en BaseEvents. Los eventos avanzados se tratan en event

Utilizar efectos

Otro tema que jQuery resuelve con sencillez es el de los efectos. Los métodos hide, show, slideDown, slideUp, fadeIn y fadeOut añaden algo de dinamismo visual a la presentación del sitio. Puedes ver algunas demos en jQuery to the Rescue.

Filtrar la colección

En BaseTraverse encontrarás todos los métodos. Como adelanto:

// `find` nos sirve para localizar elementos
// dentro de un contexto. Por ejemplo:
$('#paraque')
    .find('a')
        .click(function(e) {
            alert('paraguayo');
        });
// como ves, los métodos de jQuery son encadenables

// también podemos buscar en un contexto
// pasándolo como segundo parámetro a `$`
var pq = $('#paraque');
$('a', pq)
    .click(function(e) {
        alert('paraguayo');
    });

// `filter` elimina de la colección
// los elementos que casan con la expresión
$('p').filter('.notme');

// `not` mantiene en la colección
// únicamente los elementos que la cumplen
$('p').not('.me');

Dejaré para una segunda entrega los métodos de jQuery para manipular el DOM a conciencia y trabajar con AJAX, la iteración con each, las instrucciones para crear plugins y unas cuantas cosillas más. Te sugiero echar un vistazo al tutorial de John, pero no terminaré esta anotación, no señor, sin poner algún ejemplo práctico como pequeña recapitulación de lo visto hasta ahora.

Mejorando las tablas, estilo jQuery

Manos a la obra: crearemos un script que nos permita agregar a las tablas de datos un poco de gracia. Sean una o más tablas convenientemente marcadas con su thead, su tbody y su canesú, sea incluida la última versión de jQuery (siempre disponible en http://jquery.com/src/latest.js) y sea un poquito de CSS. En unas poquitas líneas vamos a:

• añadir a las filas pares una clase alt que nos permita pintar los registros en colores alternos y

• añadir a todas las filas un manejador para la entrada de ratón que les añadirá la clase over y un manejador para la salida del ratón (que eliminará la clase).

Pasen y vean:

$(document).ready(function(e) {
    $('tbody tr:even').addClass('alt');
    $('tbody tr').hover(
        function(e) {
            $(this).addClass('over');
        },
        function(e) {
            $(this).removeClass('over');
        }
    );
});

Actualización: He preparado una demo con una tablita cebreada gracias a un primohermano de este script (y la filmografía de Luis Buñuel).

Se aceptan (y ruegan) sugerencias para próximos artículos sobre el tema. Hasta la próxima.