# jQuery

Hoy hablaremos del rey de las librerías de Javascript, el amado y odiado jQuery (opens new window) 👑. Estoy seguro que ya habrás escuchado de él, ya que a pesar de que en los últimos años ha caído su uso, aún en pleno 2021 sigue siendo una de las librerías más usadas.

King

De hecho, según la encuesta "State of JS 2020" (opens new window), jQuery está en el top 10 de librerías más usadas.

Libraries

Y revisando la tendencia en npm trends (opens new window) me sorprendió que es positiva 🤯.

NPM Trends

Así que veamos algunos conceptos básicos que te pueden servir si algún día requieres usar esta librería.

# Instalación

Dependiendo la configuración de tu proyecto, tienes varias opciones para instalar jQuery pero hoy solo veremos la más sencilla:

Puedes revisar todas las opciones aquí (opens new window).

CDN

Agrega el script con el link al CDN (opens new window) justo antes del script donde usarás jQuery.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Aquí tu script -->

TIP

Es buena práctica poner los scripts de JS justo antes de cerrar la etiqueta <body>.

# Función `$`

jQuery crea una función global con el alias $. Para cualquier cosa que quieras de jQuery necesitarás invocar al signo de pesos.

Te muestro algunos ejemplos:

// Obtener un elemento del DOM por ID.
// Nos regresa un objeto de jQuery con referencia al elemento.
$('#mi-boton');

// Obtener un elemento del DOM y agregarle un evento 'click'.
$('#mi-boton').click(() => console.log('Click en el botón'));

Esta función recibe un selector CSS (opens new window), que son la forma de identificar elementos en el DOM e.g. #un-id, .una-clase, h1. Con este selector, jQuery nos retornará un objeto con referencia a uno o más elementos a los cuales podremos aplicar la gran variedad de funcionalidades que esta librería nos provee.

Sé que suena muy complicado pero con el tiempo será lo más normal del mundo. Solo recuerda esta estructura:

$(selector).metodo(callback);

El callback puede ser opcional dependiendo del método.

# Eventos

Lo más común que podemos hacer con jQuery es el manejo de eventos (click, input, change, etc.) que ocurren en los elementos de nuestro HTML. Esto en Javascript vainilla (nativo) se vería así:

const boton = document.querySelector('#mi-boton');
boton.addEventListener('click', () => console.log('Click en el botón'));

Y en jQuery sería:

$('#mi-boton').click(() => console.log('Click en el botón'));

En este enlace (opens new window) puedes revisar todos los eventos que maneja jQuery.

También podemos trabajar con el elemento que disparó el evento dentro del callback, pero en estos casos no podemos usar funciones flecha (opens new window) por la manera en que manejan el contexto de ejecución.

Javascript vainilla (nativo):

const input = document.querySelector('#mi-input');
input.addEventListener('change', function() {
  // `this` hace referencia al elemento input.
  console.log(this.value);
});

jQuery:

$('#mi-input').change(function() {
  // `$(this)` nos regresa el input pero como objeto de jQuery.
  console.log($(this).val());
});

Aquí puedes aprender más de val() (opens new window).

# Manipular el DOM

Otro caso muy común es agregar, remover o editar elementos HTML. Veamos estos 3 ejemplos:

Agregar un elemento a una lista.

Con append podemos pasar un string con la estructura HTML del elemento o elementos a agregar.

$('ul').append('<li>Nuevo elemento.</li>');

Remover el último elemento de una lista.

remove permite eliminar un elemento del DOM. Para este caso usamos last para obtener el último elemento de una colección.

$('ul li').last().remove();

Editar todos los items de una lista.

each recorre cada elemento dentro una colección y html cambia el contenido dentro del elemento.

$('ul li').each(function() {
  $(this).html('Nuevo contenido');
});

Enlaces a la documentación: append (opens new window), last (opens new window), remove (opens new window), each (opens new window), html (opens new window).

# Peticiones HTTP

Finalmente, también podemos realizar peticiones HTTP (opens new window) usando AJAX (opens new window).

Podemos usar el método ajax y pasar la configuración completa.

// GET
$.ajax({
  url: 'http://misitio.com/empleados',
  method: 'GET',
})
  .done((data) => console.log(data))
  .fail((error) => console.log(error));

// POST
$.ajax({
  url: 'http://misitio.com/empleados',
  method: 'GET',
  data: { nombre: 'Fer' },
  dataType: 'json',
})
  .done((data) => console.log(data))
  .fail((error) => console.log(error));

O los atajos get y post.

$.get('http://misitio.com/empleados')
  .done((data) => console.log(data))
  .fail((error) => console.log(error));

$.post('http://misitio.com/empleados', { nombre: 'Fer' })
  .done((data) => console.log(data))
  .fail((error) => console.log(error));

# Conclusión

Espero te ayude esta pequeña introducción a jQuery, vimos 3 de los principales usos de esta librería pero el ecosistema basado en ella es inmenso, así que revisa la documentación (opens new window) para conocer más.

Aunque no es una librería mala si estás creando proyectos nuevos, te recomiendo ya no usar jQuery. Hace algunos años era la única opción de codificar decentemente en JS pero ahora muchas cosas ya se pueden hacer gracias a las nuevas características de ECMAScript2015.

Además, usando frameworks frontend como Angular (opens new window), React (opens new window), Vue (opens new window) o Svelte (opens new window) se pueden crear aplicaciones usando la programación reactiva de una manera muy elegante. Olvídate de actualizar el DOM manualmente y enfócate en la lógica del negocio.

Happy coding! 🥸

← forEach asíncrono Babel →