jQuery es una librería de JavaScript opensource mantenida por la fundación jquery.org. Su lema resume muy bien lo que nos aporta esta librería: “Write less, do more, js library”. Escribe menos, haz más, y es que esta librería nos facilita la ardua tarea de manipular los elementos del DOM de HTML que hasta ahora habíamos visto como hacerlo con JavaScript.
Entre sus características podemos destacar la facilidad para manipular el contenido de un documento, la independencia del navegador para gestionar los eventos, la enorme posibilidad que encontramos para añadir atractivos efectos y transiciones y la facilidad en la utilización de la técnica AJAX.
Si accedemos a la página de jQuery podemos descargar dos versiones: la versión 1.11.3 y la 2.1.4. La principal diferencia es que la versión 2.x deja de dar soporte a las versiones 6, 7 y 8 de Internet Explorer.
A la hora de descargar la versión en la que estemos interesados, podemos bajar uno de los dos siguientes scripts. Un script que no está comprimido y que nos permite consultar el código, pero que ocupa más y otro que está comprimido (minificado) y que se usa en producción para reducir la carga de la página.
Una vez elegida la versión que mejor nos convenga, la incluiremos dentro de nuestro código, teniendo en cuenta que deberíamos cargarla tras los archivos CSS y antes de todas las librerías que dependan de jQuery:
|
1 2 3 4 |
<link rel="stylesheet" type="text/css" href="estilos.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="miScript.js" /> |
Donde miScript.js es donde incluiremos nuestro código jQuery.
Uno de los puntos fuertes de jQuery es que reduce el número de instrucciones que usaríamos con JavaScript, y nos acorta esta sintaxis. La forma de interactuar con el DOM de nuestro HTML es a través de la función $( ), un alias de jQuery ( ), que recibe como parámetro una expresión CSS o el nombre de una etiqueta HTML y devuelve todos los nodos que indique dicho parámetro que llamaremos selector.
Lo primero que incluiremos en nuestro archivo JavaScript, donde utilizaremos jQuery (en nuestro caso miScript.js) será la siguiente instrucción:
|
1 2 3 |
$(document).ready(function(){ /* Todo el código */ }); |
Esta instrucción espera a que nuestro documento este preparado para ejecutar nuestro código jQuery.
Como hemos comentado en líneas anteriores, la función $ ( ) recibe como parámetro unos selectores. Aprovechando el conocimiento que ya tenemos sobre CSS, no nos costara mucho trabajo entender la sintaxis que utiliza de los selectores. Os dejamos una tabla con los más comunes:
| Selector | Tipo de selector |
| «p» | Por etiqueta HTML |
| «#elemto1» | Por identificador. Atribtuo id de HTML |
| «.clase1» | Por clase. Atributo class de HTML |
| «a.clase1» | Por elemento y clase |
| «[atributo]» | Por tipo de atributo especifrico |
| «*» | Todos los elementos |
| this | Elemento actual |
|
1 2 3 4 5 6 7 8 9 10 |
$("p"); // Devolverá una matriz con todos los elementos p (párrafo) $("#elemento1"); // Devolverá el único elemento con id="elemento1" $(".amarillo"); // Devolverá una matriz con elementos con class="amarillo" $("p.amarillo"); // Devolverá una matriz con todos los p (párrafos) con class="amarillo" $("[href]"); // Devolverá una matriz con todos los elementos que tengan declarado el atributo href |
Una vez obtenidos los nodos que queremos seleccionar se podrá aplicar cualquiera de las funciones que facilita la librería.
|
1 |
$("a").hide(); //Esconde todos los enlaces |
Como ya vimos en el artículo anterior de JavaScript vamos a ver los eventos con jQuery y como simplifica su tratamiento. Para empezar os dejamos una tabla con los principales eventos:
| Eventos de Raton | Teclado | Formulario | Documento |
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
Una vez ya tenemos seleccionado el elemento o los elementos con los que queremos interactuar le asociamos un manejador de eventos que más nos convenga. Veámoslo en el siguiente ejemplo:
|
1 |
<button id="BotonMedir" onclick="alert('Arduino no esta preparado')">Mide el ph ahora!</button |
|
1 2 3 |
$("#BotonMedir").click(function(){ //Código a realizar }) |
Para un botón con id=»BotonMedir» cuando lo pulsemos lanzara el manejador del evento click() y entrara a realizar el código que pretendamos. Este código puede ser código JavaScript puro o cualquier función que nos trae la librería como pudiera ser esconder un determinado elemento de nuestro HTML:
|
1 2 3 |
$("#BotonMedir").click(function(){ $("#Elemento1").hide(); }) |
En el próximo artículo os comentaremos todas las funciones que nos trae esta librería para realizar efectos, manipular el DOM, modificar el CSS… y también os mostraremos como jQuery utiliza la técnica de AJAX. Y daremos un repaso a diferentes bibliotecas que le aportan añadido a la librería. No faltéis a la cita y sed felices.
