Tutoriales de Informática y Dispositivos Móviles
Tutoriales de Informática y Dispositivos Móviles
Enlazar proyecto con Jquery

Enlazar proyecto con jquery

Enlazar proyecto con jquery

En este tutorial aprenderemos cómo enlazar nuestro documento html con jQuery para poder utilizar las funciones de este estupendo lenguaje.

Lo primero que tenemos que hacer es enlazar con jQuery en el header de nuestro documento html.

Descargar jQuery

La primera opción para añadir jQuery a nuestra página consiste en descargar la última versión de la librería e integrarla a nuestro proyecto.

Nos vamos a la página https://jquery.com y hacemos click en “Download jQuery

Página de descarga de jQuery
Página de descarga
Enlazar proyecto con jquery 1

Descargamos la última versión de jquery

Descargar la última versión de jQuery
Descargar jQuery
Enlazar proyecto con jquery 2

Al hacer click en el enlace se abre el fichero en nuestro navegador. Debemos hacer click con el botón derecho y seleccionar “Guardar como”, y guardarlo en la carpeta de nuestro proyecto.

Enlace con el js de jQuery

Una vez que tenemos el fichero debemos enlazar con él con un script en el head.

//Debemos poner en el src la ruta completa del archivo
<script src="jquery/jquery-3.3.1.min.js"></script>

Nuestro head debería quedar así

Ejemplo de código header con el enlace a jQuery
Ejemplo código
Enlazar proyecto con jquery 3

Libreria jQuery

Hay otra opción pero requiere tener conexión a internet para que funcione, que es enlazando con la librería de jquery

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

Quedaría de esta manera

Añadir link a jQuery online en el header
Link con jQuery
Enlazar proyecto con jquery 4

Tanto si hemos elegido uno u otro método, nuestro proyecto está listo para comenzar a utilizar jquery. Podemos comprobar si todo está bien con una sencilla instrucción que mostrará un alert cuando la página termine de cargarse.

$(document).ready(function(){
alert("Hola mundo");
});
Código de alert de prueba de jQuery
Código de alert

Más tutoriales de jQuery

Si te ha gustado no olvides compartir en redes sociales.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »