jQuery clásico: eventos, clases y cambios en el DOM
Patrones de jQuery usados en tiendas de 2015-2019 para reaccionar a formularios, scroll y clics, con su equivalente en JavaScript moderno.
- Revisado
- Compatibilidad
- jQuery 1.7+; patrón original de 2017
- Lectura
- 2 min
- Autor
- Gabriel — infinit8
Durante años jQuery fue la capa práctica para normalizar el DOM entre navegadores. Estas notas muestran un tipo de mantenimiento muy habitual: escuchar un cambio, leer un valor y expresar el estado mediante clases CSS.
Archivo histórico: sigue siendo útil en proyectos que ya cargan jQuery, pero no es razón suficiente para añadir la librería a una web nueva.
El patrón clásico
En vez de escribir estilos en línea desde JavaScript, la interacción añade o elimina una clase. Así el comportamiento queda en JavaScript y la presentación permanece en CSS.
$(function () {
var $notice = $('#delivery-notice').hide();
$('#delivery-zone').on('change', function () {
var needsNotice = ['islands', 'remote'].includes(this.value);
$notice.toggleClass('is-visible', needsNotice);
});
});Los apuntes originales contenían IDs de negocio y textos de clientes concretos. Aquí se conserva el patrón, no esos datos.
Equivalente sin jQuery
Los navegadores actuales ofrecen directamente querySelector, addEventListener y classList. La estructura mental es la misma; cambia la API.
const zone = document.querySelector('#delivery-zone');
const notice = document.querySelector('#delivery-notice');
zone?.addEventListener('change', (event) => {
const needsNotice = ['islands', 'remote'].includes(event.target.value);
notice?.classList.toggle('is-visible', needsNotice);
});Cuándo conservar jQuery
Si una tienda antigua ya depende de plugins jQuery, una corrección pequeña y encapsulada suele tener menos riesgo que una reescritura parcial. En una aplicación nueva, la plataforma o JavaScript nativo suelen cubrir estas operaciones.
Preguntas frecuentes
¿Está jQuery obsoleto?
No: continúa mantenido y hay proyectos que dependen de él. Lo histórico es necesitarlo para operaciones básicas que hoy ofrece el navegador.
¿Debo reemplazar todos los .click() antiguos?
No de forma mecánica. Añade pruebas, revisa plugins y migra por componentes; cambiar la forma de enlazar eventos puede alterar delegación y orden de ejecución.
Referencias y revisión
Contenido contrastado con documentación oficial. Comprueba siempre el comportamiento en un entorno de pruebas antes de desplegar cambios.