Muchas plataformas y frameworks están optando por no depender más de jQuery, por ejemplo el famoso Bootstrap que en su versión 5 ya no la incluirá consiguiendo así ser más ligera.
Punto y aparte, darle las gracias a jQuery que en su momento impulsó el uso de javascript hasta en sistemas muy complejos, haciéndonos la vida más fácil.
Un amigo me preguntó hace poco: “Y si ya no voy a usar jQuery, cómo selecciono un elemento, o cómo le agrego un atributo, o un evento?”
Por ello decidí hacer este bloc de notas en con los códigos equivalentes a jQuery. Te recomiendo guardar este post para que te sirva de guía de bolsillo cada vez que lo necesites.
Vamos a ello:
Document ready
Ejecutar algo cuando la página esté lista.
Seleccionando elementos
Para seleccionar un elemento en el HTML
Buscando elementos
Un script común es el de buscar un elemento dentro de otro elemento utilizando .find()
Atributos
Agregar un atributo a un elemento
Esto también es muy útil por ejemplo para agregar un ID a un elemento:
También se puede obtener el atributo de un elemento:
Trabajando con clases
Otra práctica común es agregar o eliminar clases a un elemento
Validar si un elemento tiene una clase
Lo conocíamos como .hasClass()
Textos
Cuando queremos agregar u obtener el texto de un elemento.
Agregando elementos
Para crear y agregar un elemento
Bucle forEach()
Muchas veces necesitamos recorrer un grupo de elementos para extraer algún dato, lo podemos hacer con el método forEach()
Manejo de estilos
Muy práctico para cosas sencillas.
.hide() y .show()
Un .hide() en jQuery no era más que un ‘display: none’
⚠️Actualización: Ocultar/eliminar el elemento padre
//HTML
<div class="popover popover-bottom">
<ul class="nav">
<li class="nav-item"><a href="/account">Perfil</a></li>
<li class="nav-item"><a href="/orders">Mis órdenes</a></li>
<li class="nav-item"><a href="/wishlist">Favoritos</a></li>
<li class="nav-item"><a href="/profile">Cuenta</a></li>
<li class="nav-item"><a href="/Login-Logout">Cerrar sesión</a></li>
</ul>
</div>
//Ocultar elemento
const liToHide = document.querySelector('a[href="/wishlist"]').parentElement;
liToHide.style.display = 'none';
//Eliminar elemento
const liToRemove = document.querySelector('a[href="/orders"]').parentElement;
liToRemove.remove();Trabajando con eventos
Cómo manejar eventos como el famoso .click() de jquery
Trigger
Utilizado para lanzar eventos manualmente
Estaré actualizando esta lista a medida que me encuentre con casos especiales para que tengas a la mano lo necesario para independizarte de esta famosa librería.
Sin más, un gusto escribir nuevamente y como siempre, nunca dejes de aprender y ponlo en práctica.
👨🏻💻 Enjoy code!
