En este artículo, veremos cómo usar la biblioteca jQuery en un proyecto. Hay dos métodos para agregar la biblioteca jQuery en un proyecto que son:
- Incluir la biblioteca jQuery desde el enlace CDN
- Descargue la biblioteca jQuery del sitio web oficial
Incluya la biblioteca jQuery del enlace CDN: CDN significa Red de entrega de contenido, que es básicamente un conjunto de servidores utilizados para almacenar y entregar datos. Básicamente, estos archivos de la biblioteca jQuery ya están cargados en varios CDN y podemos usarlos directamente en nuestra página web. Entonces, no necesitamos descargar ningún archivo en nuestra máquina local.
<secuencia de comandos src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></secuencia de comandos>
Podemos ver el enlace CDN dentro del atributo «src». Hemos agregado con éxito jQuery a nuestra página web. Podemos usar todas las características de jQuery en nuestra página. Mientras carga la página, el navegador descargará automáticamente los archivos de la biblioteca jQuery desde el enlace CDN.
Ejemplo:
HTML
<!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">
<!-- Including jQuery -->
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Include jQuery library from CDN link
</h3>
<h2>Welcome to GeeksforGeeks</h2>
<button id="id_attr">Add Style</button>
<script>
$(document).ready(function() {
$('#id_attr').click(function() {
$('h2').css("color", "green");
});
});
</script>
</body>
</html>
Producción:
Descargar la biblioteca jQuery: En esta sección, primero descargamos la biblioteca jQuery desde el enlace descargable . Después de descargar los archivos, agregaremos los archivos descargados a nuestra página web de esta manera.
<script src=”file_name_with_full_path”></script>
Ejemplo:
HTML
<!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">
<!-- Including jQuery -->
<script src="jquery-3.6.0.js">
</script>
</head>
<body style="text-align: center;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
Download the jQuery library
</h3>
<h2>Welcome to GeeksforGeeks</h2>
<button id="id_attr">Add Style</button>
<script>
$(document).ready(function() {
$('#id_attr').click(function() {
$('h2').css("color", "green");
});
});
</script>
</body>
</html>
Producción:
