Cómo instalar jQuery

jQuery

En este tutorial vamos a ver cómo puedes instalar jQuery, la famosa librería de JavaScript. La mayor parte de las veces se opta por incluir el script de jQuery desde una CDN, aunque también es habitual descargarlo e incluirlo desde los archivos locales e incluso instalarlo mediante algún gestor de paquetes.

Descarga el script de jQuery

Este es uno de los métodos de instalación más sencillos, pues bastará con que te descargues la última versión de jQuery desde aquí y la incluyas en tu plantilla HTML. Debes descargarte la última versión comprimida de producción. Por ejemplo, podrías situar el archivo en el directorio /js de tu proyecto.

Lo recomendable es que incluyas jQuery justo antes de la etiqueta <\body>.

<!DOCTYPE html>
<html lang="es">
  <head>
    <title>Instalación de jQuery</title>
  </head>
  <body>
    ...
    <script src="js/jquery-3.5.1.min.js"></script>
  </body>
</html>

En caso de que haya más scripts que usen jQuery, deberías incluirlos después de jQuery. También es habitual incluir jQuery en la cabecera, aunque en este caso debes asegurarte de que el DOM está listo antes de realizar cualquier tipo de tarea, ya que de lo contrario, si por ejemplo intentas obtener algún elemento mediante su id, este podría no estar todavía presente.

Incluye jQuery desde una CDN

También puedes incluir jQuery desde alguna CDN, y de hecho es recomendable hacer esto cuando tu web está en producción, ya que de este modo te asegurarás de que el script se cargue lo más rápido posible. Esto es debido a que las redes CDN «Content Delivery Network» disponen de varios servidores alrededor del mundo, por lo que de este modo la latencia a la hora de obtener archivos siempre será más baja.

Existen diferentes CDN que podrías utilizar. A continuación tienes algunas de ellas:

En este ejemplo usaremos la CDN de Google. Para incluir jQuery desde cualquier CDN basta con que enlaces a la versión de jQuery que quieres incluir, tal que así:

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

En este ejemplo hemos agregado la versión 3.5.1 de jQuery. Además, siempre puedes guardar una copia local de jQuery en tu sistema para usarla como fallback.

Instala jQuery mediante npm

Para instalar jQuery en tu proyecto mediante npm sigue estos pasos:

  1. Abre una ventana de línea de comandos y sitúate en el directorio de tu proyecto.
  2. Luego introduce el siguiente comando:
    npm install jquery
  3. Ahora ya podrás hacer referencia a la versión de jQuery que hayas instalado. jQuery estará en el directorio /node_modules/jquery/dist/jquery.min.js.
  4. También puedes importar jQuery de esta forma
    import $ from "jquery";

En caso de que lo quieras importar mediante Webpack, edita el archivo webpack.config.js y agrega lo siguiente:

...
plugins: [
  new webpack.ProvidePlugin({
    "$":"jquery",
    "jQuery":"jquery",
    "window.jQuery":"jquery"
    }),
...

Instala jQuery mediante Yarn

Para instalar jQuery mediante Yarn sigue estos pasos:

  1. Abre una ventana de línea de comandos y sitúate en el directorio de tu proyecto.
  2. Introduce el siguiente comando para instalar jQuery:
    yarn add jquery
  3. Importa jQuery en tu proyecto:
    import * as jQuery from 'jquery';

Y con esto ya debería estar instalado.

Instala jQuery mediante Bower

jQuery también soporta la instalación mediante el gestor de paquetes Bower. Vamos a dar por hecho que ya tienes Bower instalado. Para instalar jQuery usando Bower debes seguir estos pasos:

  1. Abre una ventana de línea de comandos y sitúate en el directorio de tu proyecto.
  2. Introduce el siguiente comando para instalar jQuery:
    bower install jquery
  3. El comando anterior descargará e instalará el script de jQuery, por lo que ahora ya podrás encontrar jQuery en el directorio bower_components, en concreto, en el directorio bower_components/jquery/dist/, en donde encontrarás tanto la versión comprimida de jQuery como la minimizada.

En caso de que no quieras instalar todo los archivos extra que se instalan con Bower, también puedes instalar jQuery introduciendo este comando en la terminal de comandos:

bower install http://code.jquery.com/jquery-3.5.1.min.js

Y esto ha sido todo.


Avatar de Edu Lazaro

Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.

👋 Hola! Soy Edu, me encanta crear cosas y he redactado esta guía. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirla en Twitter 😊

Si quieres conocer mis proyectos, sígueme en Twitter.

1 comentario en “Cómo instalar jQuery

Deja una respuesta

“- Hey, Doc. No tenemos suficiente carretera para ir a 140/h km. - ¿Carretera? A donde vamos, no necesitaremos carreteras.”