> Manuales > Manual de jQuery

Veremos hasta qué punto jQuery puede aportar mayor sencillez y mantenibilidad al código que Javascript Vanilla. Explicamos los contextos donde jQuery podría tener o no tener sentido en la actualidad.

Cúando usar jQuery

Mucho ha llovido desde que se presentó la librería jQuery. En todos estos años tanto los navegadores como el mundo del desarrollo en Internet ha sufrido una fuerte transformación, pero la librería sigue ahí, aportando valor para una gran comunidad de desarrolladores frontend.

Es verdad que en todo este tiempo muchas otras propuestas para el desarrollo del área del cliente en la web han innovado y conseguido mejorar la experiencia de desarrollo, por ejemplo gracias a la programación declarativa. Por ese motivo hoy la librería jQuery no se encuentra entre las más alternativas "mejor vistas". Pero a pesar de todo, sigue teniendo una increíble cuota de uso y ofrece muchas ventajas sobre el desarrollo con Javascript "nativo".

jQuery es la librería más usada en Javascript para el navegador. Actualmente tiene casi 7 veces más cuota de uso en sitios web que la segunda colocada.

Con intención de ver hasta qué punto nos puede ayudar todavía hoy jQuery vamos a realizar una comparativa con el uso de VanillaJS (Javascript sin librerías). Para ello vamos a mostrar varios ejemplos sencillos, con cosas relevantes podríamos querer hacer en páginas web, presentando variantes de códigos donde se ha usado solo Javascript y Javascript con jQuery.

Además, al final del todo ofreceremos unas conclusiones y los casos en los que pensamos que todavía tiene sentido usar jQuery.

Este artículo no pretende ofrecer explicaciones detalladas sobre cuáles son las funcionalidades que se han desempeñado. Simplemente se pretende poner en comparación diversos códigos fuente. Si deseas aprender jQuery tienes a todo disposición el manual de jQuery.

Eventos

Con jQuery tenemos una manera muy resumida para conseguir asociar manejadores de eventos a los elementos de la página.

En la siguiente página puedes ver cómo se define un manejador de evento en JavaScript nativo y con jQuery.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Definir un evento</title>
</head>
<body>
  <button id="btn1">Clic 1</button>
  <button id="btn2">Clic 2</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    document.getElementById('btn1').addEventListener('click', function() {
      console.log('VanillaJS: Has hecho clic!');
    })

    $("#btn2").on('click', function() {
      console.log('jQuery: Has hecho clic!');
    })
  </script>
</body>
</html>

Aunque con jQuery se escriba menos, en realidad los dos códigos son bastante parecidos. Existen otros eventos donde puede ser más notable la diferencia. Por ejemplo, en la siguiente página mostramos cómo se define el evento que permite especificar un código que debe ejecutarse cuando el navegador tenga listo el árbol DOM.

<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document ready</title>
</head>
<body>

  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    function ready(fn) {
      if (document.readyState !== 'loading') {
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }
    ready(function() {
      console.log('El documento está listo (JS)');
    })


    $(document).ready(function () {
      console.log('El documento está listo (jQuery)');
    });
  </script>
</body>
</html>

Seleccionar elementos de la página

Una de las áreas interesantes donde jQuery nos ofrece bastantes utilidades es a la hora de seleccionar elementos de la página para poder realizar acciones con ellos de una manera unificada.

Por ejemplo, en la página siguiente se seleccionan todos los párrafos que hay en el documento y se realiza un cambio de una de sus clases de CSS de manera individual en cada párrafo. Mientras que jQuery nos permite hacerlo con una única línea de código en JavaScript tendremos que hacer un recorrido a todos los elementos de tipol párrafo.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Recorrer párrafos</title>
  <style>
    p {
      border-radius: 1rem; 
      padding: 1rem;
      color: #fff;
      background-color: #ddd;
    }
    .rojo {
      background-color: red;
    }
    .azul {
      background-color: blue;
    }
  </style>
</head>
<body>

  <p>item 1</p>
  <p>item 2</p>
  <p>item 3</p>
  
  <button id="rojo">Rojo</button>
  <button id="azul">Azul</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    document.getElementById('rojo').addEventListener('click', function() {
      document.querySelectorAll('p').forEach( function(parrafo) {
        parrafo.classList.add('rojo')
        parrafo.classList.remove('azul')
      })
    })

    $('#azul').on('click', function() {
      $('p').addClass('azul');
      $('p').removeClass('rojo');
    })

  </script>
</body>
</html>

Ajax

Una utilidad donde jQuery se utiliza con mucha frecuencia es la realización de solicitudes asíncronas al servidor, lo que se conoce como Ajax.

Si bien es cierto que con la interfaz fetch que existe en la actualidad en los navegadores se ha reducido mucho el código para hacer solicitudes, con jQuery todavía podemos obtener un poquito más de facilidad.

En el siguiente ejemplo se muestra como realizar una solicitud a un API para traernos datos que nos devuelve en formato JSON.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Acceso a API</title>
</head>
<body>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    // No funciona en IE 11
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => console.log(json))

    $.getJSON('https://jsonplaceholder.typicode.com/todos/1', function (data) {
      console.log(data);
    });
  </script>
</body>
</html>

Combinando varias funcionalidades del cliente

Cuando vemos ejemplos un poco más complejos en los que no se realiza una única operación, sino varias conjuntas para resolver un problema mayor, encontramos todavía más relevante el uso de jQuery.

En este ejemplo un poco más elaborado se combinan varias características de JavaScript. Lo que hacemos en el código siguiente es acceder a los datos que nos vienen de un API y luego mostrar esos datos elementos creados al vuelo en la página.

Dado que son ejemplos bastante más complejos los preferimos ver en páginas independientes.

Esta sería la alternativa Javascript para realizar esa tarea:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Recuperar datos y mostrarlos</title>
  <style>
    section {
      padding: 1rem;
      background-color: beige;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <button id="load">load</button>
  

  <script>
    function ready(fn) {
      if (document.readyState !== 'loading') {
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }

    ready(function() {
      document.getElementById('load').addEventListener('click', function() {
        fetch('https://jsonplaceholder.typicode.com/todos')
          .then(response => response.json())
          .then(data => showElements(data))
      });
    });

    function generateElements(html) {
      const template = document.createElement('template');
      template.innerHTML = html.trim();
      return template.content.children;
    }

    function showElements(data) {
      data.forEach(element => {
        console.log(element);
        let html = generateElements(`<section><h1>${element.title}</h1><p>Usuario: ${element.userId}</p></section>`);
        console.log(html);
        Array.from(html).forEach(element => {
          document.body.appendChild(element);
        });
      });
    }

  </script>
</body>
</html>

Y ahora podemos ver la alternativa para realizar el mismo ejercicio exactamente pero utilizando la librería jQuery.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Recuperar datos y mostrarlos</title>
  <style>
    section {
      padding: 1rem;
      background-color: beige;
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>
  <button id="load">load</button>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script>
    $(document).ready( function() {
      $('#load').on('click', () => $.getJSON('https://jsonplaceholder.typicode.com/todos/', showTodos));
    });

    function showTodos(data) {
      data.forEach( element => {
        let html = $(`<section><h1>${element.title}</h1><p>Usuario: ${element.userId}</p></section>`);
        $(document.body).append(html);
      })
    }

  </script>
</body>
</html>

Como puedes apreciar salta a la vista la diferencia en el código de ambas soluciones y la complejidad que tiene si lo tienes que realizar únicamente con JavaScript sin valerte de alguna librería.

Obviamente, cuando tienes problemas un poco más grandes puedes realizar funciones o clases con Javascript nativo. Gracias a ellas puedes llegar a tener un código similar en términos de complejidad al que se consigue con jQuery. Es decir, podrías conseguir que el código hecho con JavaScript nativo tuviese mejor cara que lo que se ha visto en el anterior ejemplo, pero siempre te va a dar más trabajo. También podríamos usar micro librerías que nos aporten funcionalidades sin tener que recurrir a toda una gran librería como jQuery que sirve para hacer muchas cosas y diversas.

Quizás haya faltado por explicar con detalle qué hace cada código. Puedes aprender mucho más en adelante en el Manual de jQuery o en el Manual de Javascript. La idea era ver ver las ventajas que nos puede ofrecer jQuery todavía a día de hoy.

Otras utilidades de jQuery

Por supuesto en este artículo nos hemos dedicado únicamente a mostrar algunos pedazos de código de una dificultad muy elemental. En realidad las necesidades del día a día pueden ir mucho más allá y jQuery te puede aportar muchos beneficios.

Uno de los puntos destacables son los plugins, con los que podemos conseguir funcionalidades reutilizables, sin invertir nada de tiempo en desarrollarlas, gracias a los aportes de la comunidad. Existen librerías como jQuery UI que nos ofrecen diversos plugins de jQuery para hacer muchos tipos de interfaces de usuario como datepickers, acordeones, cajas de diálogo, etc. Además la comunidad ha liberado miles de plugins basados en jQuery que puedes utilizar para tus desarrollos.

jQuery está en más lugares de los que te imaginas

Finalmente queremos comentar que jQuery está presente en una inmensa cantidad de proyectos en la web. Por ejemplo forma parte de CMS como Magento, así como está presente en la mayor parte de los temas que puedes llegar a instalar mediante WordPress.

Es por ello que si tienes unas nociones de jQuery podrás utilizar la librería usando las mismas herramientas que ya tienes disponibles de casa en muchos tipos de proyectos y sin recargar más tu sitio ni afectar a la optimización.

Cuándo tiene sentido usar jQuery y cuándo no

Ahora vamos a ver algunos puntos que nos pueden ayudar a entender cuándo es una buena idea usar jQuery y cuando no.

Ventajas y desventajas de jQuery

Como habrás podido deducir de la lectura de este artículo hasta el momento, jQuery nos puede ofrecer algunas ventajas relevantes:

Pero es totalmente cierto que tenemos algunas desventajas que también es importante mencionar.

Contextos donde jQuery podría ser muy recomendable

Algunos contextos dentro del desarrollo web donde podría ser totalmente lógico usar jQuery.

### Dónde no usaría jQuery

Algunos contextos donde pensamos que la librería jQuery se puede quedar un poco corta y combine pensar en otras alternativas.

Seguir comparando código jQuery con Javascript Vanilla

Ya para concluir este artículo queremos dejarte una referencia a un sitio que ofrece muchas más comparativas de código entre JavaScript Vanilla y jQuery. Se trata de "You might not need jQuery". Te recomendamos que le eches un vistazo porque es una fuente muy interesante para poder entender las ventajas y desventajas de la librería jQuery con respecto a hacer las cosas con JavaScript nativo.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual
Demo muy simple de uso de jQuery
Pasos para utilizar jQuery en tu página web
¿Alguna duda?
Pregunta y ayuda en la comunidad con tus respuestas en la sección de FAQ
Hacer una pregunta