10 funcionalidades de jQuery que puedes reemplazar con APIs nativas

¿Sigues cargando jQuery por un puñado de métodos de conveniencia? Los navegadores modernos incluyen APIs nativas que manejan la mayoría de los patrones de jQuery directamente—a menudo con mejor rendimiento y capacidades que jQuery nunca ofreció.

Esta guía cubre diez funcionalidades comunes de jQuery que puedes reemplazar con confianza usando JavaScript vanilla. Cada reemplazo funciona en todos los navegadores evergreen, no requiere polyfills y te da una dependencia menos que mantener.

Selección del DOM con querySelector

El selector $() de jQuery simplificó las consultas al DOM. JavaScript nativo ahora iguala esa simplicidad:

// jQuery
$('.menu-item')
$('#header')

// Native
document.querySelectorAll('.menu-item')
document.querySelector('#header')

Los métodos nativos aceptan cualquier selector CSS válido. Usa querySelector para elementos individuales, querySelectorAll para colecciones. Ambos funcionan en cualquier elemento, no solo en document, haciendo las consultas con ámbito específico sencillas.

Manipulación de clases con classList

La API classList reemplaza los métodos de clases de jQuery con una sintaxis más limpia:

// jQuery
$el.addClass('active')
$el.removeClass('active')
$el.toggleClass('active')
$el.hasClass('active')

// Native
el.classList.add('active')
el.classList.remove('active')
el.classList.toggle('active')
el.classList.contains('active')

classList nativo también soporta múltiples clases en una sola llamada: el.classList.add('active', 'visible'). El método replace() intercambia clases de forma atómica—algo que jQuery requería dos llamadas para lograr.

Manejo de eventos con addEventListener

Reemplaza el binding de eventos de jQuery con addEventListener:

// jQuery
$el.on('click', handler)
$el.off('click', handler)

// Native
el.addEventListener('click', handler)
el.removeEventListener('click', handler)

El manejo de eventos nativo ofrece capacidades que jQuery no expone de forma clara. La opción passive mejora el rendimiento del scroll, y once elimina automáticamente el listener después de la primera invocación:

el.addEventListener('scroll', handler, { passive: true })
el.addEventListener('click', handler, { once: true })

Navegación del DOM con closest

El método closest() de jQuery encuentra el ancestro más cercano que coincida con un selector. El equivalente nativo funciona de forma idéntica:

// jQuery
$el.closest('.container')

// Native
el.closest('.container')

Combínalo con optional chaining para una navegación más segura: el.closest('.container')?.querySelector('.child').

Peticiones de red con fetch

La API Fetch reemplaza los métodos AJAX de jQuery con una interfaz basada en promesas:

// jQuery
$.ajax({ url: '/api/data' }).done(callback)

// Native
fetch('/api/data')
  .then(response => response.json())
  .then(callback)

Fetch proporciona cancelación de peticiones mediante AbortController—funcionalidad que jQuery nunca ofreció de forma nativa.

Datos de formularios con la API FormData

Serializar formularios ya no requiere jQuery:

// jQuery
$('form').serialize()

// Native
const formData = new FormData(formElement)

La API FormData maneja la carga de archivos directamente y se integra perfectamente con fetch. Si necesitas una cadena de consulta similar al serialize() de jQuery, pasa la instancia de FormData a URLSearchParams.

Eliminación de elementos con remove()

Eliminar elementos se volvió más simple con el remove() nativo:

// jQuery
$el.remove()

// Native
el.remove()

Se acabaron las acrobacias de parentNode.removeChild(el).

Iteración de colecciones

jQuery itera automáticamente sobre colecciones. JavaScript nativo usa métodos estándar de arrays:

// jQuery
$('.items').each(function() { /* ... */ })

// Native
document.querySelectorAll('.items').forEach(el => { /* ... */ })

NodeList.forEach() funciona directamente. Para métodos de arrays como map o filter, expande a un array: [...document.querySelectorAll('.items')].

Animación con CSS y la API Web Animations

Las transiciones CSS manejan la mayoría de las necesidades de animación. Para control programático, la API Web Animations proporciona lo que ofrecía el animate() de jQuery—además de mejor rendimiento:

// jQuery
$el.animate({ opacity: 0 }, 300)

// Native
el.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 300 })

La API nativa puede ejecutar animaciones fuera del hilo principal cuando son compatibles con el compositor.

Document Ready

Reemplaza el manejador ready de jQuery con DOMContentLoaded:

// jQuery
$(document).ready(handler)

// Native
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', handler)
} else {
  handler()
}

O coloca los scripts al final de <body> con el atributo defer y omite las verificaciones de ready por completo.

Conclusión

Eliminar jQuery de una base de código no requiere una reescritura completa. Comienza con código nuevo—usa APIs nativas por defecto. Para el uso existente de jQuery, herramientas como You Might Not Need jQuery ayudan a identificar reemplazos directos.

Las APIs modernas del DOM no son solo alternativas a jQuery—a menudo son la mejor opción. Son más rápidas, ofrecen más control y vienen incluidas en cada navegador que tus usuarios ya tienen.

Preguntas frecuentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.