Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. JavaScript

Hoja de referencia esencial: convierte jQuery a JavaScript

by
Length:LongLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

A pesar de que jQuery sigue siendo una popular biblioteca de JavaScript y tiene un lugar en el desarrollo web, las APIs web nativas han evolucionado mucho en los últimos años. Ya que los navegadores modernos son compatibles con una amplia gama de funciones de JavaScript, ya no necesitamos una biblioteca de terceros para manipular el DOM con relativa facilidad. Como resultado, muchos desarrolladores front-end han decidido pasar de jQuery a JavaScript para disminuir la cantidad de dependencias y, por lo tanto, los tiempos de carga de las páginas.

Para ayudarte con el cambio, aquí tienes una hoja de referencia de jQuery a JavaScript que incluye los equivalentes en JavaScript de las funciones de jQuery usadas con más frecuencia.

jQuery vs. JavaScript

jQuery es una biblioteca de JavaScript que ayuda a los desarrolladores web a manipular el modelo de objetos del documento (DOM) para reaccionar dinámicamente a las acciones del usuario y a los cambios de estado. Su mayor ventaja es que te permite seleccionar fácilmente cualquier elemento DOM de la página y agregarle acciones de usuario usando la "notación de puntos", por ejemplo:

El JavaScript nativo requiere más instrucciones, no puedes simplemente añadir acciones a cualquier elemento DOM; primero necesitas enviarlo a una variable, luego puedes realizar diferentes acciones en él. Por ejemplo, así es como se ve el código anterior en JavaScript:

Aunque JavaScript requiere más instrucciones, no es necesario que utilices una biblioteca de terceros, ya que la API DOM (a la que puedes llamar con tu código de JavaScript) está integrada en tu navegador web. Como resultado tendrás una dependencia menos, y en la mayoría de los casos tu página también cargará más rápido que con jQuery. Sin embargo, es necesario que juzgues por ti mismo si vale la pena hacer el cambio a JavaScript nativo, ya que necesitarás escribir más código para lograr el mismo resultado. Por lo tanto, el compromiso entre elegir jQuery y JavaScript es tener que escribir más código personalizado en comparación con el uso de menos dependencias.

Ahora veamos los 20 equivalentes de jQuery con respecto a JavaScript que se usan con más frecuencia.

1. Selecciona elementos

jQuery:

La función jQuery(), o $() en versión corta, es la función global de jQuery que puedes usar para seleccionar cualquier elemento en el DOM.

Obtén más información en la documentación de la API de jQuery: la función global jQuery().

JavaScript:

Obtén más información en la documentación de la API DOM: el método .querySelectorAll().

2. Selecciona el primer elemento

jQuery:

Obtén más información en la documentación de la API de jQuery: el método first().

JavaScript:

Obtén más información en la documentación de la API DOM: el método .querySelector().

3. Localiza elementos

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .find().

JavaScript:

Consulta la demostración del código:

Obtén más información en la documentación de la API DOM: el método .querySelector(), el método .querySelectorAll().

4. Selecciona hijos

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .children().

JavaScript:

Consulta el código de prueba:

Obtén más información en la documentación de la API DOM: la propiedad .children. Recuerda que, si bien la versión de JavaScript es una propiedad, la versión de jQuery era un método precedido por un paréntesis.

5. Selecciona un padre

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .parent().

JavaScript:

Obtén más información en la documentación de la API DOM: la propiedad .parentNode.

6. Selecciona hermanos

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .siblings().

JavaScript:

Consulta la demostración de prueba:

Obtén más información en la documentación de la API DOM: la propiedad .parentNode, el método .querySelectorAll(), la pseudoclase :scope (consulta la sección "Hijos directos").

7. Selecciona el hermano siguiente

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .next().

JavaScript:

Obtén más información en la documentación de la API DOM: la propiedad .nextElementSibling.

8. Selecciona el hermano anterior

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .prev().

JavaScript:

Obtén más información en la documentación de la API DOM: la propiedad .previousElementSibling.

9. Agrega una clase

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .addClass().

JavaScript:

Obtén más información en la documentación de la API DOM: la propiedad .classList y el método .add().

10. Elimina una clase

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .removeClass().

JavaScript:

Obtén más información en la documentación de la API DOM: la propiedad .classList, el método .remove().

11. Cambia de clase

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .toggleClass().

JavaScript:

Obtén más información en la documentación de la API DOM: la propiedad .classList, el método .toggle().

12. Verifica si un elemento tiene una clase

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .hasClass().

JavaScript:

Obtén más información en la documentación de la API DOM: la propiedad .classList, el método .contains().

13. Obtén un atributo

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .attr().

JavaScript:

Obtén más información en la documentación de la API DOM: el método .getAttribute().

14. Establece el valor de un atributo

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .attr() (es necesario que uses el mismo método .attr() que se usa para obtener el valor de un atributo, pero con dos parámetros en lugar de uno).

JavaScript:

Obtén más información en la documentación de la API DOM: el método .setAttribute().

15. Elimina un atributo

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .removeAttr().

JavaScript:

Obtén más información en la documentación de la API DOM: el método .removeAttribute().

16. Obtén o establece contenido HTML

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .html().

JavaScript:

Obtén más información en la documentación de la API de jQuery: la propiedad .innerHTML.

17. Obtén o establece una propiedad CSS

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .css().

JavaScript:

Obtén más información en la documentación de la API DOM: referencia para las propiedades CSS (para nombres de JavaScript de propiedades de CSS) y .style property.

18. Oculta un elemento

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .hide().

JavaScript:

Obtén más información en la documentación de la API DOM: la propiedad .style.

19. Muestra un elemento

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .show().

JavaScript:

Obtén más información en la documentación de la API DOM: la propiedad .style.

20. Agrega un oyente de eventos

jQuery:

Obtén más información en la documentación de la API de jQuery: el método .on().

JavaScript:

Consulta el código de prueba:

Obtén más información en la documentación de la API DOM: el método .addEventListener() y una referencia para eventos DOM.

Los siguientes pasos

Esta hoja de referencia de jQuery a JavaScript incluye las funciones más importantes que necesitarás para crear un sitio web. Puedes hacer el cambio de jQuery a JavaScript familiarizándote con estas propiedades y métodos. Sin embargo, probablemente necesitarás saber más si quieres crear funciones más complejas.

Hay otros dos recursos que puedo recomendar para encontrar el equivalente de jQuery en JavaScript que necesites: el sitio web You Might Not Need jQuery y el repositorio jQuery-to-JavaScript de Jack O’Connor en GitHub.

Si bien utilicé el clásico bucle for para recorrer los resultados coincidentes de querySelectorAll(), el JavaScript moderno también te proporciona otras opciones: Chris Coyier muestra algunas de ellas en este artículo sobre los bucles en JavaScript.

Experimentar y crear tus propios fragmentos de código también puede ayudar mucho si quieres usar JavaScript nativo y la API DOM con confianza durante tu flujo de trabajo diario.

Aprende más JavaScript con Tuts+

Si recién estás comenzando con JavaScript, estos cursos de Tuts+ te indicarán la dirección correcta:

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.