DESCARGA Y UTILIZACIÓN
JQuery es una librería JavaScript que nos permite acceder a los objetos del DOM de manera simple creada por John Resig (Mozilla).
Como los desarrollos web son cada vez más complejos, con funcionalidades de autocompletar, drag & drop, validaciones y un largo etcétera; se necesitan algunas herramientas que no nos las hagan desarrollar desde cero. Esto son las librerías de terceros, entre ellas JQuery, que están hechas para simplificar y aclarar nuestro código JavaScript. Adicionalmente nos suelen resolver los problemas de códigos que funcionen de manera diferente en distintos navegadores. Para utilizarla primeramente debemos descargar la librería del sitio oficial (https://jquery.org/) Después, debemos incluirla en nuestras páginas web mediante esta línea:
<script type="text/javascript" src="jquery.js"></script>
Del sitio oficial de JQuery podemos descargar la versión descomprimida que ocupa alrededor de 60 Kb que es el archivo jquery.js que vemos en el atributo “src”, sin embargo cuando la incluyamos en nuestra aplicación (y por motivos de peso) deberíamos descargar la versión comprimida que pesa 20 Kb.
VENTAJAS DE USAR JQUERY
•Ahorra muchas líneas de código.
•Transparenta el soporte de nuestra aplicación para los principales navegadores.
•Provee un mecanismo para capturar los eventos.
•Provee un conglomerado de funciones para hacer animaciones en la página de una manera muy simple.
• Integra funcionalidades para trabajar con AJAX.
MANERAS DE DESARROLLAR CON JQUERY
En las librerías de terceros (como en muchas otras materias) debemos adaptarnos a sus mecanismos de uso ya que intentar desarrollar como lo hacemos habitualmente podría hacer que nuestro código no tuviera el nivel que fuera de esperar. Lo adecuado sería ir viendo cual es la mecánica al trabajar con dicha librería mediante problemas sencillos e ir complicándolo a medida que entendemos la propia librería.
La función principal de JQuery se llama $. A la función $ le podemos pasar distintos valores:
x=$(document);
x=$("#boton1");
En el primer caso le estamos pasando todo el documento (nuestra página) y en el segundo caso le estamos pasando el identificador (id) de un componente de nuestra página mediante un selector (como veremos en el apartado siguiente). La función $ nos devuelve un objeto de tipo JQuery. Vamos a ver este código de ejemplo que nos servirá de base para los siguientes:
var x;
x=$(document);
x.ready(iniEventos);
Inicialmente nos creamos una variable en JavaScript a la que llamamos x. La inicializamos una línea más tarde dándole el valor de todo el documento y, por tanto, la variable x contiene como valor nuestro documento. En la tercera línea llamamos al método ready de JQuery y le pasamos como parámetro el nombre de la función a la que queremos llamar. El método ready tiene una funcionalidad: cuando todos los elementos de nuestro documento se carguen en el navegador llamará a la función que le hemos pasado mediante parámetro.
El código de esta función:
function iniEventos (){var x; x=$(“#b1”);
x.click(presionB1); }
Usamos de nuevo la función $ para crear un objeto de la clase JQuery pero ahora asociándolo a un botón que se encuentra en el documento y que tiene el identificador (id) de b1. Por último llamamos al método click pasando como parámetro el nombre de la función que se ejecutará al presionar dicho botón.