 |
Como funciona jquery
jQuery también simplifica muchas de las cosas complicadas de JavaScript, como las llamadas AJAX y la manipulación DOM.
La biblioteca jQuery contiene las siguientes características:
- Manipulación HTML / DOM
- Manipulación CSS
- Métodos de eventos HTML
- Efectos y animaciones
- AJAX
- Utilidades
Cuando uno utiliza una librería debe adaptarse a sus mecanismos de uso, el tratar de llevar los conocimientos que tenemos sobre un tema y aplicarlos a la fuerza en dicha librería puede ser frustrante. Lo más adecuado es ir viendo cual es la mecánica de trabajar con dicha librería con problemas muy sencillos e ir complicándolo a medida que entendemos su funcionamiento.
Dispongamos el problema trivial de capturar el evento de un control HTML de tipo button, lo desarrollaremos utilizando la metodología tradicional accediendo directamente a las funciones del DOM y luego empleando la librería jQuery:
eje2_1.html
<!DOCTYPE html> <html> <head> <title>Ejemplo de JavaScript</title> <meta charset="UTF-8"> </head> <body> <h2>Captura del evento click de un control HTML de tipo button.</h2> <a href="eje2_2.html">Método tradicional con las funciones del DOM </a><br> <a href="eje2_3.html">Utilizando la librería jQuery</a><br> </body> </html>
eje2_2.html
<!DOCTYPE html> <html> <head> <title>Ejemplo de JavaScript</title> <meta charset="UTF-8"> </head> <body> <input type="button" id="boton1" value="presioname"> <script src="funciones1.js"></script> </body> </html>
func1.js
addEventListener('DOMContentLoaded', inicializarEventos);
function inicializarEventos() {
let boton1 = document.getElementById('boton1');
boton1.addEventListener('click', presionBoton);
}
function presionBoton(e) {
alert('se presionó el botón');
}
Todo lo anterior no debería haber problemas de entendimiento, en caso de estar olvidado del manejo del DOM sería conveniente refrescar los conceptos en el tutorial de JavaScript.
eje2_3.html
<!DOCTYPE html> <html> <head> <title>Ejemplo de jQuery</title> <meta charset="UTF-8"> </head> <body> <input type="button" id="boton1" value="presioname"> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="funciones2.js"></script> </body> </html>
Lo primero que tenemos en cuenta es que debemos importar la librería jQuery:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
Utilizamos un CDN donde se localiza el jQuery.
Siempre debemos disponer esta inclusión de la librería antes de incluir los otros archivos *.js que utilizan esta librería, es por eso el orden:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="funciones2.js"></script>
func2.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("#boton1");
x.click(presionBoton)
}
function presionBoton() {
alert("Se presionó el botón");
}
En este archivo (func2.js) comienza nuestro estudio de la librería jQuery
La función principal de esta librería se llama $.
A la función $ le podemos pasar distintos valores como veremos (en la primer llamada le pasamos la referencia del objeto document del DOM y en la segunda el id del control button):
let x = $(document);
...
let x = $("#boton1");
Esta función nos devuelve un objeto de tipo jQuery.
El primer método que nos interesa de esta clase es el ready:
let x = $(document); x.ready(inicializarEventos);
El método ready tiene como parámetro un nombre de función. Esta función se ejecutará cuando todos los elementos de la página estén cargados. Es importante notar que solo pasamos el nombre de la función y no disponemos los paréntesis abiertos y cerrados al final.
El código de esta función:
function inicializarEventos() {
let x = $("#boton1");
x.click(presionBoton)
}
Utilizamos nuevamente la función $ para crear un objeto de la clase jQuery pero ahora asociándolo al botón, esto lo hacemos pasando el id del control button precediéndolo por el carácter # y encerrado entre paréntesis. Finalmente llamamos al método click pasándo como parámetro el nombre de la función que se ejecutará al presionar dicho botón.