jQuery es una biblioteca Javascript de código abierto rica en funciones que está diseñada para la simplificación del recorrido y la manipulación del árbol DOM de HTML, el manejo de eventos y la animación CSS. Es bastante popular por sus características como peso ligero, rápido, pequeño, etc., que lo hacen más fácil de usar. El propósito de usar jQuery es hacer que el código javascript sea fácil de ejecutar en el sitio web, ya que jQuery envuelve las muchas líneas de código escritas en javascript en un método que se puede llamar con una sola línea de código. Por esta razón, jQuery puede realizar muchas tareas comunes que requieren javascript.
En este artículo veremos cómo ejecutar el código jQuery para nuestra página web. Ejecutar el código jQuery es bastante fácil, solo hay que seguir unos pocos pasos y luego estamos listos para comenzar. Antes de pasar al tema principal, primero veremos cómo podemos agregar y usar jQuery en nuestra página web. Hay dos formas de agregar jQuery a nuestra página web/sitio web:
Vayamos a nuestro primer método, es decir, descargar la biblioteca del sitio web.
Método 1: Descarga la biblioteca jQuery
Descarga la biblioteca. Necesitamos descargar la versión de desarrollo para nuestros propósitos de desarrollo y prueba. El resto de las versiones está destinado a la producción. Una vez que hizo clic para descargar , lo llevará a la página con los enlaces disponibles, haga clic en el enlace requerido, luego haga clic con el botón derecho en la página y guarde el archivo. Tenga en cuenta que el archivo que estamos usando es un archivo javascript, podemos verificarlo mirando su extensión. Ahora, veremos cómo podemos agregar jQuery a nuestro archivo HTML. Asegúrese de que el archivo jQuery debe colocarse dentro del espacio de trabajo. Después de completar estos muchos pasos, se verá como la siguiente imagen.
Declare la ruta del archivo jQuery en la etiqueta <script> dentro de la sección de la etiqueta <head>.
<script src="jquery-3.6.0.min.js"></script>
Ejemplo 1: Cree un archivo HTML y agregue el siguiente código en su archivo HTML.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="jquery-3.6.0.min.js"></script> </head> <body> <p>GeeksforGeeks</p> </body> </html>
Producción:
GeeksforGeeks
En el código anterior, agregamos el archivo jQuery usando una etiqueta <script>. Básicamente, eso es todo lo que necesitamos hacer para agregar jQuery a nuestra página web. Ahora podemos escribir algo de código jQuery y usarlo.
Ejemplo 2: en este ejemplo, escribiremos un código jQuery y veremos cómo podemos ejecutarlo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<!-- jQuery code starts from here, the
code will change the color of text
when button is pressed -->
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css("color", "green");
});
});
</script>
<button>
Change the color of the text to Green
</button>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
Salida: En este ejemplo, hemos escrito código para cambiar el color del texto. Para ejecutar este código, abra este archivo HTML en el navegador.
Al descargar el archivo jQuery
Pasemos a nuestro siguiente método para agregar jQuery, es decir, mediante el uso de jQuery CDN.
Método 2: usar el enlace jQuery CDN
Este método de usar jQuery es bastante fácil, no necesitamos descargar nada, pero tengamos una breve información sobre CDN. CDN significa red de entrega de contenido, básicamente, es un grupo de servidores distribuidos en todo el mundo para diferentes tipos de servicios web que proporciona contenido de Internet con una entrega rápida. Por ejemplo, jQuery CDN tiene toda la información necesaria relacionada con jQuery y cualquier usuario puede acceder directamente desde sus servidores en cualquier momento. Este método es bastante confiable y actualizado, para poder trabajar con CDN de jQuery o cualquier otra biblioteca, debemos estar conectados a la red. Ahora veamos cómo podemos usarlo. Tenemos que agregar la etiqueta <script> en nuestro archivo HTML como se muestra a continuación. Pegue el siguiente código CDN en la sección de encabezado en HTML.
Enlace CDN de jQuery:
<guión src=”https://code.jquery.com/jquery-3.6.0.min.js” integridad=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anónimo”></script>
Ejemplo: Usaremos el ejemplo 2 aquí con el enlace jQuery CDN para ver el cambio.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!--jQuery CDN link-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<!--jQuery code-->
<script>
$(document).ready(function () {
$("button").click(function () {
$("p").css("color", "green");
});
});
</script>
<button>
Change the color of the text to Green
</button>
</head>
<body>
<p>GeeksforGeeks</p>
</body>
</html>
Producción:
Usando el enlace jQuery CDN
Hemos agregado el código CDN, ahora estamos listos para trabajar con jQuery una vez más. Entonces, así es como podemos ejecutar nuestro jQuery con algunos métodos fáciles.