En este artículo, exploraremos los métodos mediante los cuales se puede agregar jQuery a una página web. jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS, o más precisamente, el Modelo de objetos del documento (DOM) y JavaScript. Al elaborar los términos, jQuery simplifica el recorrido y la manipulación de documentos HTML, el manejo de eventos del navegador, las animaciones DOM, las interacciones Ajax y el desarrollo de JavaScript entre navegadores.
Método 1: Descargar la biblioteca jQuery
Paso 1: Necesitamos descargar la versión de desarrollo de la biblioteca jQuery, que usaremos para fines de desarrollo y prueba. Haga clic en el siguiente enlace de descarga . Será redirigido a la página exacta del archivo jQuery, ahora haga clic derecho en la página y guarde el archivo en el almacenamiento local.
Paso 2: Cree un archivo HTML y declare la ruta del archivo jQuery en la etiqueta <script> dentro de la sección de la etiqueta <head> del archivo HTML. Tenga en cuenta que el archivo jQuery debe colocarse dentro del espacio de trabajo.
<script src="jquery-3.6.0.min.js"></script>
Ejemplo: agregar el archivo jQuery a la página web después de descargarlo.
HTML
<!DOCTYPE html> <html> <head> <script src="jquery-3.6.0.min.js"> </script> </head> <body> <h1>Using jQuery by downloading it.</h1> </body> </html>
Producción:
Método 2: usar jQuery a través de un CDN: este método es bastante fácil de usar en comparación con el anterior. Solo tenemos que pegar el siguiente código en la sección de encabezado del archivo HTML.
<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
Ahora entendamos qué es CDN, significa Content Delivery Network, es un grupo de servidores distribuidos en todo el mundo de varios servicios web que brindan contenido de Internet con entrega rápida. Entonces, CDN contiene toda la información esencial de servicios web particulares para que cualquier usuario pueda usarla en todo el mundo, en cualquier momento. Para nuestro caso usaremos el CDN de jQuery, para poder usar jQuery con CDN, tenemos que estar conectados a la red, ya que es un servicio basado en línea.
Ejemplo: en este ejemplo, usaremos el enlace CDN para incluir jQuery en nuestra página web.
HTML
<!DOCTYPE html> <html> <head> <!--jQuery CDN link--> <script src=" https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <p>GeeksforGeeks</p> </body> </html>
Producción:
Los métodos que discutimos anteriormente tienen que ver con las formas de incluir jQuery en la página. Ahora haremos algunas comprobaciones para saber si jQuery está cargado o no. Veremos algunos ejemplos con resultados adecuados para que los usuarios puedan comprenderlos claramente. El siguiente fragmento de código verificará si jQuery está cargado en nuestra página o no. Agregaremos este fragmento de código a nuestra página.
Sintaxis:
window.onload = function () {
if (window.jQuery) {
alert("jQuery is loaded.");
} else {
alert("jQuery is not loaded.");
}
};
Ejemplo 1: En este ejemplo, no agregaremos jQuery intencionalmente por ninguno de los métodos y buscaremos jQuery usando el código anterior. En la imagen de salida, podemos ver claramente que detecta que jQuery no está cargado.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
window.onload = function () {
if (window.jQuery) {
alert("jQuery is loaded.");
} else {
alert("jQuery is not loaded.");
}
};
</script>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, veremos que después de agregar jQuery a la página, detectará el jQuery en la página.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body>
<script>
window.onload = function () {
if (window.jQuery) {
alert("jQuery is loaded.");
} else {
alert("jQuery is not loaded.");
}
};
</script>
</body>
</html>
Salida: Podemos ver que detecta que jQuery está incluido en la página.
Ejemplo 3: Ahora, en este ejemplo, buscaremos jQuery en la página. Si el jQuery está cargado, entonces está bien, sin embargo, si no se carga, agregaremos la biblioteca jQuery a la página.
HTML
<!DOCTYPE html>
<html>
<!--jQuery CDN link-->
<!-- Initially we haven't added the jQuery CDN link -->
<body>
<button onclick="addJQuery()">Add</button>
<button onclick="check()">Check</button>
<script>
function check() {
if (window.jQuery) {
// jQuery is included in the page
alert("jQuery is loaded");
} else {
// jQuery is not included in the page
alert("jQuery is not Loaded, click "
+ "add button to add jQuery");
}
};
function addJQuery() {
// When we click the add button it will
// check for availablity of jQuery
if (window.jQuery) {
alert("jQuery already loaded!");
} else {
// If its not present then these code
// will add jQuery to the page
var script = document.createElement("script");
script.type = "text/javascript";
script.src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName("head")[0]
.appendChild(script);
alert("now jQuery is loaded");
}
}
</script>
</body>
</html>
Producción:
