Agregar JQuery a tu proyecto web

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:

Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *