JQuery — JS: API del DOM

• Manipulación
• Eventos
• AJAX
• Animación
• Perspectivas

En agosto de 2006, John Resig lanzó la biblioteca JQuery. En poco tiempo, esta biblioteca se volvió extremadamente popular y se convirtió en el estándar para el desarrollo de elementos interactivos en sitios web:

// El signo $ es la función JQuery, a través de la cual se realiza todo
$(() => {
  // Esta función se ejecutará en el evento DOMContentLoaded
});

Mucho de esto ocurrió porque jQuery apareció en el momento y lugar adecuados. En aquellos años, estábamos en transición hacia diseños sin tablas, y el uso de CSS se volvía más activo y diversificado. jQuery permitió reutilizar los mismos selectores para agregar comportamiento.

Además, jQuery implementó características del CSS3 mucho antes de que estuvieran disponibles nativamente en los navegadores. Esta biblioteca también facilitó considerablemente la tarea de asegurar la compatibilidad entre diferentes navegadores. Uno de sus objetivos era garantizar que funcionara correctamente en todas las plataformas:

// Funciona igual que document.querySelectorAll
// document.querySelectorAll('.section span')
// Devuelve una colección especial de JQuery con su propio conjunto de métodos
const spans = $('.section span');

// Además, se puede realizar una selección dentro de un contenedor específico
// Se agrega como segundo argumento
const container = $('.item-box');
const items = $('li', container); // encuentra todos los li dentro del contenedor con 
// la clase item-box

Otra razón del éxito es que la biblioteca JQuery popularizó la separación de la maquetación del comportamiento. Esta técnica se conoce como "JavaScript no intrusivo". La idea es que los controladores de eventos se describen por separado, no en las etiquetas mismas:

const buttons = $('button');
// Asigna un controlador de eventos click a todos los botones de esta colección
buttons.click(() => {
  alert('¡hey!');
});

En lugar de:

<button onclick="alert('¡hey!')">

Además, la biblioteca JQuery es un excelente ejemplo de un lenguaje orientado a objetos.

Por lo general, el código JQuery expresa la tarea en los mismos términos en los que se formula esa tarea:

// Oculta todos los elementos con el selector container.main
$('container.main').hide();

// Elimina el elemento con id=address
$('#address').remove();

Y eso no es todo. Durante mucho tiempo, JQuery proporcionó la única forma adecuada de realizar solicitudes AJAX y animaciones en las páginas. Gracias a su extensibilidad a través de complementos, el ecosistema de la biblioteca ha crecido enormemente en una década. Durante un tiempo, cualquier biblioteca frontend aparecía como un complemento de JQuery. Hasta el punto de que algunas personas ni siquiera saben que existe JavaScript y el DOM. Comenzaron directamente con JQuery y solo ven el mundo a través de él.

Manipulación

La función $ es el punto de entrada para todo. Si se llama y se le pasa una cadena, JQuery la interpretará como un selector y realizará una selección de elementos del DOM. Esta llamada es similar a querySelectorAll(), con la única diferencia de que devuelve una colección especializada.

En general, JQuery trabaja con elementos como colecciones, incluso si es un solo elemento. Y cualquier cambio se aplica a todos los elementos de la colección sin necesidad de iteración:

// Selecciona todos los elementos h1
const headings = $('h1');
// Agrega la clase a todos los encabezados h1
headings.addClass('header');

// Lo mismo sin jquery
const headings = document.querySelectorAll('h1');
headings.forEach((el) => el.classList.add('header'));

A continuación, se muestran algunos ejemplos de funciones que modifican un elemento del DOM y sus descendientes. Aquí se puede ver una de las principales características de JQuery. Si llamamos a estas funciones con argumentos, los valores se cambiarán. Si las llamamos sin argumentos, se devolverán los valores:

// Si se encontró un solo enlace
const link = $('#home');
link.html('link to home'); // establece textContent
link.attr('href', '/about'); // establece el atributo
// Leer el atributo
console.log(link.attr('href')); // => /about

Eventos

JQuery proporciona sus propios métodos para suscribirse a eventos, actuando como una abstracción sobre addEventListener. Por ejemplo, así se manejaría un clic en un botón:

$('button').click(() => {
  // Establece el atributo href en el elemento con el identificador w3c
  // attr puede aceptar una función como segundo argumento
  // Se pasa el valor original del atributo a la función
  $('#w3c').attr('href', (i, origValue) => `${origValue}/jquery`);
});

AJAX

JQuery puede realizar solicitudes AJAX. Sin embargo, aprendió a hacerlo antes de que existieran los estándares, por lo que la interfaz de este mecanismo es diferente a la de las promesas estándar:

// La cadena de llamadas funciona de la misma manera que las promesas
// La diferencia está en los detalles
const jqxhr = $.get('/api/v1/companies.json', (data) => {
  console.log('éxito');
})
.done(() => {
  console.log('éxito');
})
.fail(() => {
  console.log('fracaso');
})
.always(() => {
  console.log('finalizado');
});

Animación

Por un lado, JQuery proporciona un conjunto de animaciones predefinidas, y por otro lado, ofrece un mecanismo para crear efectos más complejos basados en cambios en las propiedades CSS:

<!-- Aparición suave del elemento al hacer clic -->
<div id="clickme">
  Haz clic aquí
</div>
<img id="book" src="book.png" alt="" width="100" height="123">
<script>
  // El elemento #book se carga como oculto y luego aparece lentamente al hacer clic
  $('#clickme').click(() => {
    $('#book').show('slow', () => {
      // Acciones después de la finalización de la animación
    });
  });
</script>

Para la biblioteca JQuery, existe un grupo de complementos llamado JQuery UI. Estos complementos implementan funcionalidades típicas necesarias para el desarrollo de sitios web interactivos, como arrastrar y soltar, autocompletar, cambiar el tamaño, ordenar y mucho más:

Perspectivas

Hace tiempo, jQuery era una excelente opción, pero esa época está llegando a su fin. Esta biblioteca apareció hace más de 15 años y desde entonces, la tecnología ha avanzado mucho.

El estándar DOM se ha desarrollado tanto que ahora muchas cosas son más fáciles de hacer directamente, sin usar jQuery. Además, la mayoría de los navegadores ya soportan el estándar DOM. Si en algún lugar falta soporte, siempre hay polyfills disponibles. Además, han surgido nuevos estándares en los que jQuery no encaja bien. Un claro ejemplo de esto son las promesas (promises) y el propio AJAX.

Todo esto ha llevado a un abandono gradual de jQuery. Para cualquier tarea en el frontend, se pueden encontrar muchas bibliotecas populares que en su nicho son mejores que jQuery.

Por otro lado, se ha escrito tanto en jQuery que sigue siendo mencionado en muchas ofertas de trabajo relacionadas con el frontend. Como puedes ver en los ejemplos anteriores, jQuery no es nada complicado ni fantástico. En primer lugar, debes conocer el DOM, y el resto es simplemente leer atentamente la documentación y los ejemplos de uso.