En este artículo, veremos cómo agregar código jQuery a un archivo HTML. Puede agregar fácilmente jQuery a HTML utilizando varios métodos, como agregar jQuery desde CDN o descargar directamente archivos jQuery e incluirlos en sus proyectos. Varios métodos se discuten en este artículo.
Métodos:
- Descargar e incluir el archivo jQuery
- Incluyendo jQuery de CDN.
Enfoque 1: descargue e incluya el archivo jQuery
Siga la información a continuación para incluir jQuery en su archivo HTML.
- Use este enlace para descargar el archivo jQuery del sitio web oficial de JQuery. (descargue archivos comprimidos o sin comprimir según su necesidad).
- Después de la descarga, simplemente mueva el archivo descargado al archivo HTML al que desea agregar su jQuery.
- Finalmente, use la siguiente sintaxis para incluir jQuery en el archivo HTML. es decir, agregue el nombre del archivo jQuery entre las etiquetas del script.
<script type="text/javascript" src="jquery-3.5.1.min.js"> </script>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("h2").html("Complete Portal for Geeks</b>");
});
});
</script>
</head>
<body>
<center>
<h2>GeeksforGeeks</h2>
<button>Click here</button>
</center>
</body>
</html>
Producción:
Enfoque 2: Siga el paso a continuación para incluir Jquery en el archivo HTML.
- En esto, solo necesita agregar el enlace a continuación con la etiqueta de secuencia de comandos a su archivo HTML, ya sea CDN proporcionado por Google o Microsoft.
- CDN de Google
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
- CDN de Microsoft
<secuencia de comandos src=’http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js’></secuencia de comandos>
- CDN de Google
Ejemplo:
HTML
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<title>Added Jquery into HTML</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks</h1>
<button id="trigger">Click me</button>
<h3 id="demo"></h3>
<script type="text/javascript">
$(document).ready(function () {
$("#trigger").click(function () {
$("#demo").html("Complete portal for Geeks");
});
});
</script>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA