jQuery es una librería JavaScript que facilita tareas habituales como son acceso al DOM, manipulación de CSS, manejo de eventos, desarrollo de efectos y animaciones, interacciones con AJAX, etc. Es de software libre y de código abierto y su objetivo es ahorrar tiempo y espacio en desarrollo en comparación con el uso de JavaScript directamente.
«Write less, do more.»
Eslogan de jQuery
Además, tiene la ventaja de ser una librería ampliamente usada, muy amigable y dispone de una gran cantidad de plugins para todo tipo de tareas (formularios, widgets, animaciones…).
Para hacer este estudio nos basamos en las estadísticas del servicio de W3Techs. Según los datos ofrecidos, alrededor del 75% de todos los sitios de Internet usan librerías de JavaScript. De ellas las más populares son las siguientes: jQuery (74,3%), Bootstrap (20,4%), Modernizr (10,7%), Underscore (3,3%), Popper (2,1%), MooTools…
jQuery es un lenguaje muy extenso, pero en esta unidad nos centraremos en todo lo relacionado con la integración de contenido interactivo en una interfaz web.
Para usar jQuery debemos referenciar a la librería:
Podemos referenciar jQuery de manera local a nuestra aplicación descargando el fichero correspondiente desde su página oficial: jquery.com
<script type="text/javascript" src="jquery.js"></script>
También podemos usar algunos de los CDN habituales para la carga de librerías. Por ejemplo con el CDN de Google funciona muy bien, la única desventaja es que se necesita Internet. Ver CDN de Google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Una de las primeras instrucciones que todo código jQuery debe tener es:
$(document).ready( function() { ... } ); //accedemos al DOM y cuando todo el código haya cargado ejecuta lo que hay dentro de esta función.
** En JavaScript: document.addEventListener(«load», function load() { … } );
De esta forma podemos poner el script dentro de la etiqueta <head> de nuestro documento y no al final.
La versión abreviada de la instrucción anterior es:
$(function() { ... } ); //versión abreviada
La función más usada en jQuery es $(). Esta función se utiliza para seleccionar un elemento del árbol DOM. Recibe como parámetro un selector o el nombre de una etiqueta HTML.
La sintaxis es la siguiente: $(selector).accion();
Como se ha comentado en el punto anterior, la función $() recibe como parámetro un selector o una etiqueta HTML. En la página oficial de jQuery puedes ver todos los selectores disponibles: api.jquery.com/category/selectors. Veamos los más utilizados.
Ver selectores CSS y selectores de atributos.
Ver más ejemplos de selección de elementos.
default
Para utilizar los eventos de jQuery debemos seleccionar el elemento, indicar el tipo de evento y la función que determine su comportamiento. Por ejemplo:
$("p").click(function() { alert( 'Hola jQuery!');});
En la página oficial de jQuery puedes ver la lista completa de eventos disponibles: api.jquery.com/category/events. Veamos ahora los eventos de ratón, de teclado y de ventana más utilizados.
$(".click").click(function() { alert("click sobre un elemento"); });
$(".dblclick").dblclick(function() { alert("doble click sobre un elemento"); });
$(".mouseenter").mouseenter(function() { $(this).css("color","red"); });
$("#mouseleave").mouseleave(function() { $(this).css("color","blue"); });
$("#hover").hover(function() { $(this).css("color","yellow"); }, function() { $(this).css("color","green"); });
$("#mousedown").mousedown(function() { $(this).html("<b>mousedown</b>") });
$("#mouseup").mouseup(function() { $(this).html("<b>mouseup</b>") });
.keydown() : El evento se produce en el momento que se presiona una tecla, independientemente de si se libera o se mantiene la presión. Se produce una única vez en el momento exacto de la presión.
.keypress() : Se produce al tener pulsada una tecla. Si se mantiene pulsada la tecla, el evento se produce varias veces.
.keyup() : El evento se produce en el momento de dejar de presionar una tecla que teníamos pulsada.
Los eventos de teclado se suelen aplicar al documento (document), y no a un elemento concreto. Veamos un ejemplo:
$(document).keydown(function(){ $("#teclado").html("tecla pulsada"); }); $(document).keyup(function(){ $("#teclado").html("tecla sin pulsar"); });
Gracias a jQuery podemos crear diferentes efectos sobre los elementos de nuestra página web para mejorar la usabilidad y la experiencia de usuario.
Ver todos los efectos en la página oficial: api.jquery.com/category/effects/
Ejemplo:
$('.caja').hide(); //oculta el elemento con la clase caja
Además, podemos cambiar la duración de los efectos:
$('.caja').fadeIn(300); //La caja se va desvaneciendo durante 3 segundos
También podemos ejecutar una función cuando el efecto finalice:
SINTAXIS: $(selector).efecto(velocidad, callback); //callback se ejecuta después de que se haga el efecto
$('.caja').hide(3000, function(){ //tarda 3 segundos en desaparecer y luego se muestra lo que hay en callback alert('Caja oculta'); });
bind() y unbind(): Este método permite asociar a un elemento un número ilimitado de
eventos, todo de una vez. Gracias a este método se facilita la asignación de eventos a los elementos, haciendo un código más legible y una ejecución más óptima.
$("p").bind("click mouseenter mouseleave", function(e){ $(this).css("color", "rgb(0, 0, 255)"); })
.delay( duración [, NombreCola] )
$(document).ready(function(){ $("#boton").click(function() { $(".caja1").fadeIn(100); $(".caja1").delay(800); $(".caja1").fadeOut(800); }); });
.animate (propiedades, duración, callback)
El método animate nos ofrece muchas posibilidades. En la página oficial de jQuery se pueden ver diferentes ejemplos y sus propiedades: api.jquery.com/animate/#animation-properties.
default
jQuery ofrece diferentes métodos para manipular el CSS. Puedes ver la información completa en la página oficial: api.jquery.com/category/manipulation/class-attribute. A continuación se comentan los métodos más destacados.
$("p").css("color"); $("p").css("color","red"); $("p").css({ "color" : "red", "background-color" : "blue", "font-weight" : "bold" });
Podemos enriquecer nuestras interfaces mediante diferentes librerías. Veamos algunas de ellas:
Recursos:
Bibliografía:
Cursos: