Agregar JQuery en HTML

1. Use JQuery CDN para incluir JQuery en HTML
2. Descarga el JQuery e inclúyelo en HTML

Este artículo lo guiará para agregar o escribir código jQuery en una página HTML.

Use JQuery CDN para incluir JQuery en HTML

JQeury es una de las bibliotecas de JavaScript más populares.

La biblioteca simplifica mucho el trabajo en un sitio web con funciones como el recorrido y la manipulación de DOM, la manipulación de CSS, el manejo de eventos, las animaciones y las llamadas AJAX. Podemos escribir menos y hacer más usando jQuery, que es la principal ventaja.

Podemos hacer operaciones con menos código usando jQuery en lugar del JavaScript normal. Ahora, abordaremos cómo podemos usar jQuery en una página HTML.

La forma más común de incluir jQuery en un documento HTML es mediante la red de entrega de contenido (CDN). Una CDN es una red de servidores que sirve el contenido solicitado a los usuarios finales almacenando el contenido en la ubicación de la red más cercana al usuario.

De esta forma, el usuario recibirá los datos solicitados de forma rápida y precisa. Podemos obtener jQuery CDN de varias fuentes como Google CDN y Microsoft CDN.

Podemos incluir la URL de jQuery CDN en la etiqueta script y usar jQuery en HTML. Podemos escribir el jQuery en un archivo .js separado e incluirlo en el archivo HTML o escribir el jQuery dentro de la etiqueta script.

Primero, vaya al sitio web JQuery CDN y elija la última versión estable de jQuery. Para demostración, estamos usando la versión sin comprimir.

Luego, el sitio web generará la etiqueta que se muestra a continuación.

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

A continuación, copie la etiqueta y colóquela en el archivo HTML. Luego, crea una etiqueta p con el id text y no escribas nada entre las etiquetas.

Debajo de la etiqueta p, cree un botón con el id button y escriba el texto Click here en el atributo value. La parte de HTML ha terminado, y ahora vamos a escribir el jQuery.

Dentro de una etiqueta script, escribe el método jQuery ready(). Seleccione la identificación del button y llame al método click() dentro del método.

De nuevo, dentro del método click(), seleccione el id text y llame al método html(). Escriba el texto clic como parámetro html().

En esta sección, aprenderemos sobre estos diversos métodos de jQuery. El método ready() contiene todos los demás métodos.

El otro contenido dentro del método se ejecutará cuando el DOM se cargue por completo. De manera similar, el método click() se ejecuta cuando se hace clic en el elemento seleccionado. El método html() establece el contenido del elemento seleccionado.

En el ejemplo de abajo, aparecerá un texto diciendo click cuando se haga clic en el botón. De esta manera, podemos usar jQuery en un documento HTML usando el CDN.

Código de ejemplo:

<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>

Descarga el JQuery e inclúyelo en HTML

La otra forma de escribir jQuery en HTML es descargar el archivo jQuery e incluirlo en el archivo HTML.

Podemos descargar el archivo desde el enlace aquí. Escribiremos el código jQuery en HTML después de incluir el archivo .js descargado en la etiqueta script.

Por ejemplo, descargue el archivo jQuery desde el enlace anterior. A continuación, en el archivo HTML, escriba la ruta del archivo jQuery en el atributo src de la etiqueta script.

Este es el único cambio que tenemos que hacer del ejemplo en el método anterior. Usaremos el mismo código HTML y jQuery para la demostración.

Cuando hacemos clic en el botón, dará como resultado el texto clic como en el ejemplo anterior. De esta forma, podemos descargar el archivo jQuery e incluirlo en HTML.

Código de ejemplo:

<script src="jquery-3.6.0.min.js"></script>
<p id="text"> </p>
<input type='button' id='button' value='Click here' />

<script>
$(document).ready(function(){
 $('#button').click(function(){
 $('#text').html("clicked");
 });
});
</script>