jQuery es una biblioteca de JavaScript liviana, «escribe menos, haz más». jQuery ayuda a escribir JavaScript de la manera más sencilla posible. Es eficaz para convertir unas pocas líneas de código en JavaScript en una sola línea. También simplifica tareas como llamadas Ajax y DOM (Document Object Model).
La biblioteca jQuery contiene las siguientes características:
- Manipulación de HTML/DOM
- manipulación de CSS
- Métodos de eventos HTML
- Efectos y animaciones
- AJAX
- Utilidades
Hay varias formas en que puede usar jQuery en su aplicación, siendo una más fácil que las otras. A continuación se muestran algunos de los métodos que puede usar para cargar el archivo jquery local.
Método 1: usar jQuery CDN (red de entrega de contenido)
Ejemplo: en este ejemplo, simplemente incluiremos la línea CDN en la etiqueta del script y, si hace clic en el botón Enviar, verá su nombre como alerta en el navegador.
HTML
<!DOCTYPE html>
<html>
<head>
<!--Script loaded from Google CDN service-->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p>Using the CDN link for jQuery</p>
<input type="text" placeholder="Name...." id="name">
<button id="btn">Submit</button>
<script>
$("#btn").click(function (event) {
// If you click the submit button
// you will see your name coming
// up as alert in the browser
event.preventDefault();
var name = $("#name").val();
alert(name);
});
</script>
</body>
</html>
Producción:
Con enlace CDN
Ahora veremos cómo cargar el archivo jquery local en caso de que el CDN anterior no esté disponible.
Método 2: Descarga jQuery para usarlo localmente.
Descargando la biblioteca jQuery desde aquí . Hay dos versiones de jQuery que puede descargar.
- Versión de producción: esta es para su sitio web en vivo porque ha sido minimizado y comprimido
- Versión de desarrollo: Esto es para pruebas y desarrollo (código sin comprimir y legible)
Descargue el enlace de la biblioteca jquery desde esta página
- El archivo descargado será un único archivo JavaScript al que puede hacer referencia como se muestra. Mientras guarda en su carpeta actual, cámbiele el nombre e incluya el mismo nombre en su sección de encabezado mientras incluye el archivo de la biblioteca.
Ejemplo: en este ejemplo, en lugar de usar CDN, descargaremos el archivo de biblioteca « jquery.min.js» y si hace clic en el botón Enviar, verá su nombre como alerta en el navegador.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js">
</script>
<!--In case cdn fails, local will load up for sure-->
<script>
window.jQuery || document.write(
'<script src="jquery.min.js">\x3C/script>'
)
</script>
<!--'\x3C' has been used so that the script
does not end prematurely. The above
condition checks whether local has
loaded if not then it loads up the
local -->
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<p>
This works with library downloaded
in the current folder
</p>
<input type="text" placeholder="Name...." id="name">
<button id="btn">Submit</button>
<script>
$("#btn").click(function (event) {
// If you click the submit button you
// will see your name coming up as
// alert in the browser
event.preventDefault();
var name = $("#name").val();
alert(name);
});
</script>
</body>
</html>
Producción:
Con una biblioteca jquery descargada
Nota: La ruta en la fuente (src) de la etiqueta del script debe configurarse correctamente. Debe establecerse en la ruta correcta para que jQuery funcione perfectamente.
También puede instalar jQuery como un paquete de Nodes usando npm (instalador de paquetes de Nodes).
npm install jquery
También puede instalarlo usando la CLI de yarn, el comando es el siguiente.
yarn add jquery
Publicación traducida automáticamente
Artículo escrito por amanjha7151 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA