Hoja de referencia esencial: convierte jQuery a JavaScript

Spanish (Español) translation by Ana Paulina Figueroa (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 últimos añ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 páginas.

Para ayudarte con el cambio, aquí tienes una hoja de referencia de jQuery a JavaScript que incluye los equivalentes en JavaScript de las funciones de jQuery usadas con má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 dinámicamente a las acciones del usuario y a los cambios de estado. Su mayor ventaja es que te permite seleccionar fácilmente cualquier elemento DOM de la página y agregarle acciones de usuario usando la "notación de puntos", por ejemplo:

/* Adds the .active class to the toggle button */
$('#toggle').addClass('active');

El JavaScript nativo requiere más instrucciones, no puedes simplemente añadir acciones a cualquier elemento DOM; primero necesitas enviarlo a una variable, luego puedes realizar diferentes acciones en él. Por ejemplo, así es como se ve el código anterior en JavaScript:

let toggle = document.querySelector('#toggle');
toggle.classList.add('active');

Aunque JavaScript requiere más instrucciones, no es necesario que utilices una biblioteca de terceros, ya que la API DOM (a la que puedes llamar con tu código de JavaScript) está integrada en tu navegador web. Como resultado tendrás una dependencia menos, y en la mayoría de los casos tu página también cargará más rá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 necesitarás escribir más código para lograr el mismo resultado. Por lo tanto, el compromiso entre elegir jQuery y JavaScript es tener que escribir más código personalizado en comparación con el uso de menos dependencias.

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

1. Selecciona elementos

jQuery:

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

/* Syntax */

jQuery();
$();        // shortcut

/** 
 * Example
 * 
 * Selects all the links among the descendants of the 'my-class' class
 */
 
jQuery('.my-class a');
$('.my-class a');

Obtén más información en la documentación de la API de jQuery: la función global jQuery().

JavaScript:

/* Syntax */

Document.querySelectorAll();

/* Example */

document.querySelectorAll('.my-class a');

Obtén más información en la documentación de la API DOM: el método .querySelectorAll().

2. Selecciona el primer elemento

jQuery:

/* Syntax */

.first();

/**
 * Example
 * 
 * Selects the first link among the descendants of the 'my-class' class
 */

$('.my-class a').first();

Obtén más información en la documentación de la API de jQuery: el método first().

JavaScript:

/* Syntax */

Document.querySelector();

/* Example */

document.querySelector('.my-class a');

Obtén más información en la documentación de la API DOM: el método .querySelector().

3. Localiza elementos

jQuery:

/* Syntax */

.find();

/**
 * Example
 * 
 * Find all the span tags that are descendants of links within 
 * the 'my-class' class
 * 
 * Note: searches for all descendants not just for children
 */
 
$('.my-class a').find('span');

$('.my-class a').find('span').css('color', 'red');  // for testing

Obtén más información en la documentación de la API de jQuery: el método .find().

JavaScript:

/* Syntax */

// to find the first element (also if there's only one)
Document.querySelector();

// to find all elements
Document.querySelectorAll();

/**
 * Example
 * 
 * At first querySelectorAll() returns a NodeList, so we have to loop
 * through it to find all the span tags we want
 * 
 * For the sake of testing, I made the selected elements red, 
 * you can find the 'style.color' property below in this cheat sheet 
 */

// finds all '.my-class a'
let nodes = document.querySelectorAll('.my-class a');

// loops through all '.my-class a'
for (let i = 0; i < nodes.length; i++) {
    
    // checks if the individual '.my-class a' element has a 
    // 'span' descendant to avoid 'undefined' error
    if (nodes[i].querySelector('span')) {
        
      // colors span tags that are desdendants of '.my-class a'
      nodes[i].querySelector('span').style.color = 'red';
   
   }

}

Consulta la demostración del código:

Obtén más información en la documentación de la API DOM: el método .querySelector(), el método .querySelectorAll().

4. Selecciona hijos

jQuery:

/* Syntax */

.children();
.children('selector');

/**
 * Example
 * 
 * (1) Finds all the children of all '.my-class a' elements on the age
 * 
 * (2) Finds all the 'span' elements that are the children of 
 * any '.my-class a' element on the page
 * 
 * Note: searches only for children (first-level of descendants)
 */
 
$('.my-class a').children();

$('.my-class a').children('span');

$('.my-class a').children('span').css('color', 'blue'); // for testing

Obtén más información en la documentación de la API de jQuery: el método .children().

JavaScript:

/* Syntax */

ParentNode.children;

/**
 * Example 
 * 
 * 2nd example of the jQuery version above, plus makes the selected span 
 * tags blue for the sake of easy testing
 * 
 * for 1st example, only leave out the if check at the end (we need this 
 * because the JS version is not a method but a property, so we 
 * need to check which children are 'span')
 * 
 */

// selects all the elements with 'my-class a' on the page
let items = document.querySelectorAll('.my-class a');

// loops through all the elements with '.my-class a'
for (let i = 0; i < items.length; i++) {
    
        // finds the children of the current '.my-class a' element
        let kids = items[i].children;
        
                // loops through the children of the current '.my-class a' element
        for (let j = 0; j < kids.length; j++) {
            
            // checks if the child element is a span tag
            if (kids[j].tagName == 'SPAN') {
        
                              kids[j].style.color = 'blue';
      
            }
                
                }

}

Consulta el código de prueba:

Obtén más información en la documentación de la API DOM: la propiedad .children. Recuerda que, si bien la versión de JavaScript es una propiedad, la versión de jQuery era un método precedido por un paréntesis.

5. Selecciona un padre

jQuery:

/* Syntax */

.parent();

/**
 * Example
 * 
 * Selects the parent elements of ALL elements with 'my-class a' 
 * on the page
 */
 
$('.my-class a');

Obtén más información en la documentación de la API de jQuery: el método .parent().

JavaScript:

/* Syntax */

Node.parentNode;

/** 
 * Example 
 * 
 * Selects the parent of the FIRST element with 'my-class a' on the page 
 * (for the sake of less repetition)
 * 
 * For looping through all '.my-class a' elements, use the looping 
 * solution and querySelectorAll() from the two examples above.
 */

let item = document.querySelector('.my-class a');
item.parentNode;

Obtén más información en la documentación de la API DOM: la propiedad .parentNode.

6. Selecciona hermanos

jQuery:

/* Syntax */

.siblings();

/**
 * Example
 * 
 * Selects the siblings of ALL elements with the 'find-siblings' 
 * class on the page
 */
 
$('.find-siblings').siblings();

Obtén más información en la documentación de la API de jQuery: el método .siblings().

JavaScript:

/* Syntax */

Node.parentNode.querySelectorAll(":not(#elem)");

/**
 * Example
 * 
 * Selects the siblings of the FIRST element with the
 * 'find-siblings' class
 * 
 * For looping through all 'find-siblings' elements, see examples #3 and #4
 * 
 * the ':scope' pseudoclass is necessary for preventing the child 
 * elements of 'item' from being selected (otherwise querySelectorAll() 
 * searches through all descendants of 'item', with ':scope >' it loops 
 * through just the first level)
 * 
 */

let item = document.querySelector('.find-siblings');
let siblings = item.parentNode.querySelectorAll(':scope > :not(.find-siblings)');

Consulta la demostración de prueba:

Obtén más información en la documentación de la API DOM: la propiedad .parentNode, el método .querySelectorAll(), la pseudoclase :scope (consulta la sección "Hijos directos").

7. Selecciona el hermano siguiente

jQuery:

/* Syntax */

.next();

/**
 * Example
 * 
 * Selects the next siblings of all elements with 'my-class a' 
 * on the page
 */
 
$('.my-class a').next();

Obtén más información en la documentación de la API de jQuery: el método .next().

JavaScript:

/* Syntax */

NonDocumentTypeChildNode.nextElementSibling;

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 
 * 'my-class a' on the page, see examples #3, #4, #5
 */
item.nextElementSibling;

Obtén más información en la documentación de la API DOM: la propiedad .nextElementSibling.

8. Selecciona el hermano anterior

jQuery:

/* Syntax */

.prev();

/**
 * Example
 * 
 * Selects the previous siblings of all elements with 'my-class a' 
 * on the page
 */
 
$('.my-class a').prev();

Obtén más información en la documentación de la API de jQuery: el método .prev().

JavaScript:

/* Syntax */

NonDocumentTypeChildNode.previousElementSibling;

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 
 * 'my-class a' on the page, see examples examples #3, #4, #5
 */
item.previousElementSibling;

Obtén más información en la documentación de la API DOM: la propiedad .previousElementSibling.

9. Agrega una clase

jQuery:

/* Syntax */

.addClass();

/**
 * Example 
 * 
 * Adds the 'second-class' class to every 'my-class' element
 * 
 */
$('.my-class').addClass('second-class');

Obtén más información en la documentación de la API de jQuery: el método .addClass().

JavaScript:

/* Syntax */

Element.classList.add();

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 'my-class' 
 * on the page, see examples examples #3, #4, #5
 */

item.classList.add('second-class');

Obtén más información en la documentación de la API DOM: la propiedad .classList y el método .add().

10. Elimina una clase

jQuery:

/* Syntax */

.removeClass();

/**
 * Example 
 * 
 * (1) Removes the 'second-class' class from every 'my-class' element
 * 
 * (2) Removes 'second-class', then add 'third-class' to 
 * every 'my-class' element
 */
$('.my-class').removeClass('second-class');
$('.my-class').removeClass('second-class').addClass('third-class');

Obtén más información en la documentación de la API de jQuery: el método .removeClass().

JavaScript:

/* Syntax */

Element.classList.remove();

/**
 * Example 
 * 
 * For declaring the 'item' variable by selecting elements with 'my-class' 
 * on the page, see examples examples #3, #4, #5
 */
 
item.classList.remove('second-class');

// To use it together with add(), you need two separate statements
item.classList.remove('second-class');
item.classList.add('third-class');

Obtén más información en la documentación de la API DOM: la propiedad .classList, el método .remove().

11. Cambia de clase

jQuery:

/* Syntax */

.toggleClass();

/** Example
 * 
 * Adds the 'active' class to elements with 'my-class' if they don' have it
 * remove it if they have it
 * 
 */
 
$('.my-class').toggleClass('active');

Obtén más información en la documentación de la API de jQuery: el método .toggleClass().

JavaScript:

/* Syntax */

Element.classList.toggle();

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.classList.toggle('active');

Obtén más información en la documentación de la API DOM: la propiedad .classList, el método .toggle().

12. Verifica si un elemento tiene una clase

jQuery:

/* Syntax */

.hasClass();

/**
 * Example
 * 
 * Checks if any element with 'my-class' has the 'active' class
 * 
 * Returns true or false
 * 
 * If there's at least one element with 'active' it's true,
 * otherwise false.
 * 
 */

$('.my-class').hasClass('active');

Obtén más información en la documentación de la API de jQuery: el método .hasClass().

JavaScript:

/* Syntax */

Element.classList.contains();

/**
 * Example 
 * 
 * Similar to the jQuery version, this one also checks if any element
 * in the whole classList has the 'active' class
 * 
 * If at least one element has 'active', it's true, otherwise false
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.classList.contains('active');

Obtén más información en la documentación de la API DOM: la propiedad .classList, el método .contains().

13. Obtén un atributo

jQuery:

/* Syntax */

.attr('attr-name');

/**
 * Example
 * 
 * Returns the value of the href property of the FIRST occurrence of 
 * an element with 'my-class'
 * 
 */
 
$('.my-class').attr('href');

Obtén más información en la documentación de la API de jQuery: el método .attr().

JavaScript:

/* Syntax */

Element.getAttribute('attr-name');

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
 item.getAttribute('href');

Obtén más información en la documentación de la API DOM: el método .getAttribute().

14. Establece el valor de un atributo

jQuery:

/* Syntax */

.attr('attr-name', value);

/**
 * Example
 * 
 * Sets the value of the href property for ALL contact links that
 * have the 'contact-link' class
 * 
 */
 
$('.contact-link').attr('href', 'contact.html');

Obtén más información en la documentación de la API de jQuery: el método .attr() (es necesario que uses el mismo método .attr() que se usa para obtener el valor de un atributo, pero con dos parámetros en lugar de uno).

JavaScript:

/* Syntax */

Element.setAttribute();

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
 item.setAttribute('href', 'contact.html');

Obtén más información en la documentación de la API DOM: el método .setAttribute().

15. Elimina un atributo

jQuery:

/* Syntax */

.removeAttr('attr-name');

/**
 * Example
 * 
 * Removes 'target' attributes from contact links
 */
 
$('.contact-link').removeAttr('target');

Obtén más información en la documentación de la API de jQuery: el método .removeAttr().

JavaScript:

/* Syntax */

Element.removeAttribute();

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
 item.removeAttribute('target');

Obtén más información en la documentación de la API DOM: el método .removeAttribute().

16. Obtén o establece contenido HTML

jQuery:

/* Syntax */

.html();
.html('html-string');

/**
 * Example
 * 
 * (1) Gets the HTML content of the FIRST element that matches 'my-class'
 * 
 * (2) Sets/resets the HTML content of EACH element that matches 'my-class'
 * 
 */
 
$('.my-class').html();

$('.my-class').html('<em>Hello</em>');

Obtén más información en la documentación de la API de jQuery: el método .html().

JavaScript:

/* Syntax */

Element.innerHTML;

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.innerHTML;                         // gets the value
item.innerHTML = '<em>Hello</em>';      // sets the value

Obtén más información en la documentación de la API de jQuery: la propiedad .innerHTML.

17. Obtén o establece una propiedad CSS

jQuery:

/* Syntax */

.css('property-name');
.css('property-name', value);

/**
 * Example
 * 
 * (1) Gets the 'color' value of the FIRST element
 * that has 'my-class'
 * 
 * (2) Sets the 'color' value to 'white' for EVERY element that has 
 * 'my-class'
 */
 
$('.my-class').css('color');

$('.my-class').css('color', 'white');

Obtén más información en la documentación de la API de jQuery: el método .css().

JavaScript:

/* Syntax */

ElementCSSInlineStyle.style.{propertyName};

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.style.color;               // getting value

item.style.color = 'white';     // setting value

Obtén más información en la documentació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:

/* Syntax */

.hide();

/**
 * Example
 * 
 * Hides all elements with 'my-class'
 */
 
$('.my-class').hide();

Obtén más información en la documentación de la API de jQuery: el método .hide().

JavaScript:

/* Syntax */

ElementCSSInlineStyle.style.display = 'none';

/**
 * Example 
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */
 
item.style.display = 'none';

Obtén más información en la documentación de la API DOM: la propiedad .style.

19. Muestra un elemento

jQuery:

/* Syntax */

.show();

/**
 * Example
 * 
 * Displays all elements with 'my-class'
 */

$('.my-class').show()

Obtén más información en la documentación de la API de jQuery: el método .show().

JavaScript:

/* Syntax */

ElementCSSInlineStyle.style.display = '';

/**
 * Example  
 * 
 * For declaring the 'item' variable, see examples #3, #4, #5
 */

item.style.display = '';            // resets default
item.style.display = 'block';       // sets display as block
item.style.display = 'flex';        // sets display as flex

Obtén más información en la documentación de la API DOM: la propiedad .style.

20. Agrega un oyente de eventos

jQuery:

/* Syntax */

.on();

/**
 * Example
 * 
 * Adds or removes the 'active' class to/from all elements with 
 * '.submenu' when #toggle is clicked
 */
 
$('#toggle').on('click', function(){
    $('.submenu').toggleClass('active');
});

Obtén más información en la documentación de la API de jQuery: el método .on().

JavaScript:

/* Syntax */

EventTarget.addEventListener('event', functionName);

/**
 * Example  
 * 
 * The code below only selects the FIRST element with the 
 * 'submenu' class.
 * 
 * To select all submenus, use the 'for' loop in Example #3 and #4
 */

let toggle = document.querySelector("#toggle");
let submenu = document.querySelector(".submenu");

toggle.addEventListener('click', function() {
   submenu.classList.toggle('active'); 
});

Consulta el código de prueba:

Obtén más información en la documentación de la API DOM: el método .addEventListener() y una referencia para eventos DOM.

Los siguientes pasos

Esta hoja de referencia de jQuery a JavaScript incluye las funciones más importantes que necesitarás para crear un sitio web. Puedes hacer el cambio de jQuery a JavaScript familiarizándote con estas propiedades y métodos. Sin embargo, probablemente necesitarás saber más si quieres crear funciones má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 utilicé el clásico bucle for para recorrer los resultados coincidentes de querySelectorAll(), el JavaScript moderno también te proporciona otras opciones: Chris Coyier muestra algunas de ellas en este artículo sobre los bucles en JavaScript.

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

Aprende más JavaScript con Tuts+

Si recién estás comenzando con JavaScript, estos cursos de Tuts+ te indicarán la dirección correcta: