Tutorial de introducción a jQuery

En este tutorial vamos a ver cómo utilizar jQuery, una librería que todavía sigue siendo relevante hoy en día, aunque cierto es que las versiones modernas de JavaScript ya ofrecen funcionalidades similares a las de esta librería.

En este tutorial se asume que nunca has utilizado jQuery. Cuando finalice habrás aprendido a instalar y a utilizar jQuery con cualquier proyecto. También se cubrirán ciertos conceptos como lo que es una API, el DOM o una CDN. Al adentrarnos en jQuery veremos los selectores más utilizados y también aprenderemos a crear eventos y efectos con jQuery, todo ello mientras vemos ejemplos totalmente funcionales.

Sin embargo, existen una serie de requerimientos que deberías tener en cuenta antes de continuar con este tutorial:

Deberás tener ciertos conocimientos básicos de HTML, sabiendo crear y configurar una web, por simple que sea.
Necesitarás conocer ciertos elementos de CSS, como lo que es un id o una clase en este lenguaje.
Finalmente, también deberías tener algunos conocimientos fundamentales de JavaScript y de cómo este interactúa con el DOM. Si bien es cierto que podrás utilizar jQuery sin saber JavaScript, no es lo recomendable, ya que podrías coger algunas malas costumbres que arrastrarás hasta el futuro. Por lo menos deberías estar familiarizado con ciertos tipos de datos y de variables, además de saber cómo funciona la lógica de JavaScript.

Dicho esto, comenzamos.

Contenidos

1 Acerca de jQuery
2 Cómo instalar jQuery
3 Cómo usar jQuery
4 Peticiones AJAX
5 jQuery a día de hoy

Acerca de jQuery

Existen tres lenguajes fundamentales que se utilizan cuando programas o diseñas cualquier sitio o aplicación web y estos son HTML, CSS y JavaScript. Cuando generas las estructura de una web, utilizas HTML, dándole estilos a los elementos HTML mediante CSS. En cuanto a JavaScript, lo utilizas para agregar cierta interacción a los diferentes elementos que creas.

A día de hoy es posible crear animaciones básicas utilizando CSS, como aquellas que sueles ver cuando haces clic en un botón o cuando posas el cursor del ratón sobre algún elemento interactivo. Sin embargo, cuando la cosa se complica un poco, como en el caso del diseño basado en componentes o también cuando creas ciertos efectos como el de scroll, no queda otra que usar JavaScript.

jQuery es una librería de JavaScript que nació con el objetivo de facilitar ciertas tareas de JavaScript, agregando métodos y selectores que permiten hacer más cosas utilizando menos líneas de código. jQuery no es un lenguaje de programación, sino un conjunto de herramientas que simplifican ciertas tareas comunes de JavaScript. Además, jQuery solventaba los posibles problemas de compatibilidad que antes había entre los diferentes navegadores, que a día de hoy no son tantos, pero que antes suponían grandes quebraderos de cabeza. De esta forma, siempre tendrás la seguridad de que el resultado de lo que estás programando será el mismo independientemente del navegador que utilice el usuario.

A continuación tienes un pequeño ejemplo mediante el cual cambiamos el contenido de un elemento que seleccionamos mediante su id. Hemos realizado exactamente lo mismo usando JavaScript puro y usando jQuery para que así puedas ver las diferencias:

document.getElementById('ejemplo').innerHTML = 'Pulpos voladores';

A continuación vamos a ver un ejemplo en el que usamos jQuery:

$('#ejemplo').html('Pulpos voladores');

Tal y como puedes ver, con jQuery es todo mucho más sencillo, ya que nos permite acceder de una forma mucho más directa a cualquier elemento del DOM.

Cómo instalar jQuery

jQuery no es más que un archivo JavaScript al que puedes enlazar desde el código HTML de tu proyecto. Puedes descargarte el archivo e incluirlo localmente o enlazar al archivo externo mediante alguna CDN:

Si prefieres descargarte el archivo de jQuery, basta con que accedes a la página de descargas de jQuery y descargues la última versión de producción de jQuery.
Si prefieres, puedes enlazar directamente al archivo de jQuery desde alguna CDN como la de Google. Una CDN «Content Delivery Network» es un sistema que sirve contenido web en varios servidores localizados alrededor del mundo, de modo que cuando enlaces a algún archivo, este siempre llegue más rápido de lo que lo haría si estuviese en tu servidor. Si el servidor está en España y accedes al recurso desde España no lo notarás, pero sí lo notarás si accedes desde México.

Lo primero que vamos a hacer es crear una plantilla HTML básica:

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Introducción a jQuery</title>
    <link rel="stylesheet" href="css/estilos.css" />
  </head>
  <body>
  </body>
</html>

A continuación vamos a incluir jQuery desde la CDN de Google. Lo haremos justo antes del cierre de la etiqueta </body>, que es el mejor lugar en el que colocar los scripts. Seguidamente agregaremos nuestro archivo de scripts, al que llamaremos scripts.js, que tendrás que crear en tu sistema local, concretamente en el directorio /js de tu proyecto.

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Introducción a jQuery</title>
    <link rel="stylesheet" href="css/estilos.css" />
  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="js/scripts.js"></script>
  </body>
</html>

Es importante que el archivo de scripts esté situado debajo de la línea en la que incluyes jQuery, ya que de lo contrario habrá errores cuando intentes usar jQuery, que todavía no se habrá cargado. Por otro lado, si has optado por descargar jQuery y no usar la CDN, coloca el archivo jquery.min.js en el el directorio /js y luego inclúyelo usando su ruta relativa.

Ahora ya deberías poder usar jQuery, por lo que ya podrás usar todas las funciones de la API de jQuery en tu proyecto.

En caso de que prefieras instalar jQuery desde algún gestor de paquetes o desde otra CDN, consulta el tutorial de instalación de jQuery.

Cómo usar jQuery

jQuery incluye una serie de selectores mediante los cuales puedes conectar con los elementos de un documento HTML que se muestra en un navegador; todo esto se realiza a través del DOM.

El DOM, también conocido como Document Object Model, es el método mediante el cual tanto JavaScript como jQuery interactúan con los elementos HTML del navegador. Cuando inspeccionas el código HTML de una web, lo que ves es el DOM, y cada elemento que lo compone es un nodo al que puedes acceder mediante JavaScript. Además, mediante JavaScript también podrás agregar, modificar y eliminar los nodos del DOM.

jQuery es una capa que se sitúa por encima de JavaScript, por lo que en el fondo, siempre se ejecutan funciones de JavaScript. El componente de más alto nivel del DOM es el objeto document, por lo que antes de que jQuery pueda interactuar con él, tendrás que comprobar que esté listo mediante la función ready().

Teniendo esto en cuenta, crea y edita el archivo /js/scripts.js en tu proyecto y agrega el siguiente código:

$(document).ready(function() {
  // Código jQuery
});

El método ready() acepta una función como callback, en la que vamos a agregar todo el código jQuery del proyecto. En los ejemplos que veremos a continuación, vamos a dar por hecho que todo el código jQuery que vamos agregar está en el interior de esta función, ejecutándose cuando el documento está listo.

Con jQuery puedes acceder al DOM mediante diversos selectores que usan una sintaxis muy parecida a la de CSS. La sintaxis que usa jQuery para seleccionar elementos es la siguiente:

$('selector').metodo();

Vamos a poner como ejemplo el siguiente elemento, que no es más que un bloque vacío.

<p id="ejemplo"></p>

En la introducción hemos visto la siguiente línea, que selecciona el elemento con id ejemplo y agrega el texto 'Pulpos voladores' en su interior:

$('#ejemplo').html('Pulpos voladores');

Mediante el símbolo $ llamamos a jQuery, aunque también funcionaría si usases la función jQuery():

jQuery('#ejemplo').html('Pulpos voladores');

En este caso, seleccionamos el elemento con id ejemplo mediante la expresión '#ejemplo'. El símbolo de la almohadilla, también conocido como sostenido, se usa tanto en CSS como en los selectores jQuery para hacer referencia al elemento cuyo id está escrito a continuación.

Seguidamente aplicamos una acción, que en este caso es el método html(), que sirve para definir el contenido del elemento seleccionado.

Este código se ejecutará tan pronto como el documento esté listo en el navegador. Si todo va correctamente, se debería mostrar el siguiente código HTML:

<p id="ejemplo">Pulpos voladores</p>.

Selectores en jQuery

La gran mayoría de los selectores de jQuery son los mismos que usarías en CSS, con el añadido de algunos selectores adicionales de jQuery. Si quieres, puedes consultar aquí la lista de selectores jQuery.

A continuación tienes también una lista con los selectores más comunes:

$("*"): Selecciona cualquier elemento.
$("etiqueta"): Selecciona cualquier instancia de la etiqueta <etiqueta>. Por ejemplo, podrías usar el selector $("p") para seleccionar todos los elementos de tipo <p>.
$(".clase"): Selecciona cualquier elemento que contenga la clase indicada. Por ejemplo, podrías usar el selector $(".ejemplo") para seleccionar todos los elementos que tengan asignada la clase .ejemplo.
$("#identificador"): Selecciona el elemento con el id indicado. Por ejemplo, podrías usar el selector $("#ejemplo") para seleccionar el elemento que tenga asignado el id ejemplo.
$("[atributo='valor']"): Selecciona cualquier elemento que tenga un determinado valor en el atributo definido. Por ejemplo, podrías usar el selector $("[name='nombre']") para seleccionar el elemento cuyo valor para el atributo name sea nombre.
$("elemento:first-of-type"): Selecciona el primer elemento del selector anterior. Por ejemplo, podrías usar el selector $("li:first-of-type") para seleccionar el primer elemento <li> de una lista.
$("elemento:last-of-type"): Selecciona el último elemento del selector anterior. Por ejemplo, podrías usar el selector $("li:last-of-type") para seleccionar el último elemento <li> de una lista.

En general, lo más habitual es que te encuentres selectores de ids y de clases. Los ids se utilizan cuando quieres seleccionar un único elemento y las clases cuando quieres seleccionar conjunto de elementos.

jQuery también te permite concatenar selectores CSS como por ejemplo $("ul li.ejemplo"), que seleccionará todos los elementos li que tengan la clase .ejemplo en el interior de las listas ul. En caso de que necesites seleccionar el nodo ancestro al elemento que has seleccionado, también puedes usar el método parent(). Por ejemplo, el selector $("li.ejemplo").parent() seleccionará la lista ul en la que está el elemento 'li.ejemplo'.

Además, también es habitual que te encuentres con la expresión $(this), que seleccionará aquel elemento con el que se está trabajando en la función actual.

Eventos en jQuery

El código de nuestro ejemplo anterior se ejecutará nada más estar listo el documento, sin requerir ningún tipo de interacción por nuestra parte. De hecho el ejemplo es un tanto inútil, ya que el efecto es el mismo que si hubiésemos escrito directamente la el texto en el código HTML, sin necesidad de usar jQuery.

Sin embargo, sí tendrías que usar o bien JavaScript o bien jQuery si quisieras hacer que el texto se muestre en la página cuando haces clic en un botón. Para ello, vamos a agregar un botón a nuestro código HTML:

<button id="mi-boton">Clic aquí</button>
<p id="ejemplo"></p>

Ahora podríamos usar el método click() de jQuery en el elemento #mi-boton para agregar una acción que se ejecutará cuando el usuario haga clic en el botón. Este método, al igual que todos los que sirven para asignar acciones a los diferentes eventos, acepta una función como callback, en la que incluiremos el código que muestra el texto deseado:

$('#mi-boton').click(function() {
  $('#ejemplo').html('Pulpos voladores');
});

Si ahora haces clic en el botón, deberías ver que el texto aparece.

Los eventos suceden cada vez que el usuario interactúa con el navegador. El evento click() se inicia cuando el usuario hace clic en cualquier elemento. Si quieres, puedes consultar la lista completa de los métodos de jQuery que se usan para crear eventos en este enlace.

A continuación tienes también una lista con los métodos de eventos de jQuery más utilizados:

click(): Este evento se inicia cuando se hace clic en algún elemento.
hover(): Este evento se inicia cuando el cursor del ratón se posa sobre algún elemento.
mousenter(): Este evento se inicia cuando el cursor del ratón entra en el espacio ocupado por algún elemento.
mouseleave(): Este evento se inicia cuando el cursor del ratón sale del espacio ocupado por algún elemento.
submit(): Este evento se inicia cuando se envía un formulario
keydown(): Este evento se inicia cuando el usuario pulsa alguna tecla.
keyup(): Este evento se inicia cuando el usuario deja de pulsar una tecla.

Todavía no hemos terminado, ya que mediante jQuery también podrás agregar una gran cantidad de efectos.

Efectos en jQuery

Los efectos de jQuery se suelen aplicar cuando ocurre algún evento. Permiten crear animaciones y manipular automáticamente ciertos elementos de la página, ahorrándote un gran cantidad de tiempo en comparación con la adición del efecto mediante JavaScript puro.

Vamos a proponer el siguiente ejemplo en el que vamos a mostrar o a ocultar una ventana que se muestre por encima del resto del contenido. He usado el nombre de ventana, pero no me refiero a una nueva ventana de navegador, sino a un elemento que si sitúa sobre los demás, a modo de overlay. Este tipo de elemento suele usarse cuando se quiere mostrar algún tipo de aviso al usuario. Para ello, vamos a crear un botón que sirva para mostrar la ventana y otro que permita cerrarla, estando este último en el interior de la propia ventana:

<button id="abrir">Open</button>

<section id="ventana">
  <button id="cerrar">Close</button>
</section>

Vamos a asignar el siguiente código CSS a la ventana para que se muestre superpuesta en el centro de la pantalla y, además, también le asignaremos la propiedad display: none para que por defecto esté oculta:

#ventana{
  display: none;
  position: fixed;
  height: 250px;
  width: 250px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #e5e5e5;
}

Y finalmente, vamos a agregar el código jQuery, que el que seleccionaremos el elemento #abrir, al agregaremos una función que abra la ventana cuando ocurra el evento click(). En dicha función seleccionaremos la ventana y usaremos con ella el método show(), para cambiar la propiedad CSS display denone a block, mostrando la ventana cuando hagamos clic en el botón:

$('#abrir').click(function() {
  $('#ventana').show()
});

Luego seleccionaremos el elemento #cerrar, al que agregaremos una función que cierre la ventana cuando ocurra el evento click(). Usaremos el método hide(), para establecer el valor de la propiedad CSS display del elemento #ventana como none:

$('#abrir').click(function() {
  $('#ventana').hide()
});

Ahora ya podrás mostrar u ocultar la ventana usando estos botones. Otro método que también se usa para este tipo de caso es el efecto toggle(), que simplemente alterna el valor de la propiedad display del elemento seleccionado entre block y none.

Aquí tienes una lista con algunos de los efectos más utilizados:

show(): Muestra el elemento o los elementos seleccionados.
hide(): Oculta el elemento o los elementos seleccionados.
fadeIn(): Muestra el elemento o los elementos seleccionados mediante un efecto de opacidad.
fadeOut(): Oculta el elemento o los elementos seleccionados mediante un efecto de opacidad.
slideUp(): Muestra el elemento o los elementos seleccionados mediante un efecto de sliding.
slideDown(): Oculta el elemento o los elementos seleccionados mediante un efecto de sliding.
toggle(): Muestra u oculta los elementos seleccionados.
fadeToggle(): Muestra u oculta los elementos seleccionados mediante un efecto de opacidad.
slideToggle(): Muestra u oculta los elementos seleccionados mediante un efecto de sliding.
animate(): Ejecuta una animación personalizada en base a las propiedades CSS de los elementos seleccionados.

Si quieres puedes consultar la lista completa de efectos aquí.

También existe un plugin de jQuery mediante el cual podrás agregar muchísimos efectos más. Se trata de jQuery UI, una librería mediante la cual podrás agregar efectos de acordeón, barras de progreso e incluso efectos mediante los cuales podrás arrastrar y soltar elementos.

Peticiones AJAX

jQuery facilita también la creación de peticiones AJAX, que en su día, antes la aparición de la API Fetch de JavaScript, eran bastante complejas. En el ejemplo que ves a continuación, crearemos una petición GET a la URL /api/ejemplo de nuestro servidor:

$.ajax({
  url: '/api/ejemplo',
  type: 'GET'
  success:function (respuesta) {
    console.log(respuesta);
  },
});

Como ves, resulta muy sencillo obtener el resultado. En caso de que quieras gestionar los posibles errores, podrías definir también la función error:

$.ajax({
  url: '/api/ejemplo',
  type: 'GET'
  success: function (respuesta) { 
    console.log(respuesta);
  },
  error: function (jqXHR, exception) {
    console.log(jqXHR.status + ': ' + exception);
  }
});

jQuery a día de hoy

Sin duda, jQuery ha estado presente en el mundo del desarrolla JavaScript durante un largo tiempo, sobreviviendo a la aparición de muchos otros competidores. Si bien su uso estaba mucho más extendido hace años, todavía se sigue utilizando, aunque lo cierto es que muchas de sus funcionalidades han sido ya implementadas por los navegadores modernos.

Sin embargo, todavía son muchas las herramientas y frameworks que usan jQuery, como por ejemplo Bootstrap o WordPress, al igual que muchas plantillas HTML que podrías adquirir en algún marketplace.

En mi opinión, siempre es preferible aprender alguna otra herramienta como React, Vue o Svelte, pero conocer jQuery y saber utilizarlo tampoco es una mala idea. De hecho, ya lo has aprendido y tal y como puedes ver, no te ha llevado demasiado tiempo.

En este tutorial has aprendido a usar jQuery. También has aprendido lo que es el DOM, además de otros conceptos como el uso de una CDN o lo que es una API. Espero que te haya sido de ayuda.

1 comentario en “Tutorial de introducción a jQuery”

Cristino Reyes dice:

22 mayo, 2022 a las 5:48 pm

Cambiar el nombre del selector a #cerrar

Luego seleccionaremos el elemento #cerrar, al que agregaremos una función que cierre la ventana cuando ocurra el evento click(). Usaremos el método hide(), para establecer el valor de la propiedad CSS display del elemento #ventana como none:

$(‘#abrir’).click(function() {
$(‘#ventana’).hide()
});

Responder