Agregar JQuery a tu proyecto web

16/08/20210 comentarios

Hola a todos, hoy os voy a explicar como podemos agregar JQuery a nuestro proyecto web.

JQuery es una biblioteca de Javascript que nos facilita mucho la programación en Javascript. Hoy en día, no es muy utilizado a nivel usuario, pero es la base de otras muchas bibliotecas o aplicaciones, por lo que no viene mal saber como funciona.

Nos vamos a la página de descarga de jquery.

Elegimos la primera opción:

Verás mucho código junto, no te asustes, es normal.

Lo único que debes hacer es pulsar botón secundario y darle a guardar como…

Y ahora nos pedirá guardarlo en algún sitio:

Ya que tenemos JQuery guardado, vamos a crearnos un proyecto base donde lo agregaremos. Nos creamos una carpeta donde queramos y copiamos el archivo que hemos guardado.

Nos creamos un main.js con el siguiente contenido:


jQuery(function() {
   // Nuestro codigo
})

Nos creamos un index.html con el siguiente contenido:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="main.js"></script>
</head>
<body>
    
</body>
</html>

Otra forma de hacer todo esto sin necesidad de descargar nada seria agregando en nuestro html esta linea:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Quedando así:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="main.js"></script>
</head>
<body>
    
</body>
</html>

Lo malo de esta forma es que depende de tu internet, sino tienes no podrás utilizarlo.

Os dejo un video donde hago ese proyecto base: