Referencias y recursos Bootstrap
06/12/2019
Diseño y desarrollo de webs accesibles, accesibilidad web
08/12/2019
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…).
Las librerías JavaScript más populares en Internet
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…
1. jQuery, integración de contenido interactivo
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.
2. Puesta en marcha de jQuery
Para usar jQuery debemos referenciar a la librería:
- Minified: para entorno de producción ya que está reducida al máximo para que el tiempo de descarga sea mínimo.
- “Normal”: para el entorno de desarrollo.
2.1. jQuery: referencia local
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>
2.2. jQuery: CDN
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>
3. Ejecución del código jQuery
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
Función $()
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();
- $ – Indicamos que vamos a acceder a jQuery.
- selector – Indicamos el selector o etiqueta HTML con el que queremos trabajar.
- accion() – Lo que queremos hacer con el elemento seleccionado.
Comprueba tu aprendizaje
¿Qué compañías usan jQuery?
¿Cuál es la sintaxis básica de jQuery?
¿Cuál es la función del símbolo $?
4. Selección de elementos del DOM
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.
- id: $(«#ID»)
- Etiqueta: $(«a»), $(«li»)
- Clase: $(«.miClase»), $(«li.miClase»), $(«div.miClase»)
- Atributo: $(«a[rel]»)
- Acceso por un valor para un atributo: $(«input[@type=radio]»), $(«input[name=username]»)
- Selectores: $(«p a»), $(«*»)
- Selección de varios elementos separados por comas: $(«#miParrafo, a»)
- Pseudo-selectores: $(«p[img]») //selección de todos los párrafos que contienen una imagen.
Ver selectores CSS y selectores de atributos.
Ver más ejemplos de selección de elementos.
Ejemplo
default
Comprueba tu aprendizaje
¿Qué hace este código: $("div.miClase")?
¿Qué hace este código: $(“#elemento, a”)?
5. Eventos
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.
5.1. Eventos del ratón
- .click() : pulsar una vez con el puntero sobre un elemento:
$(".click").click(function() {
alert("click sobre un elemento");
});
- .dblclick() : pulsar dos veces seguidas con el puntero sobre un elemento:
$(".dblclick").dblclick(function() {
alert("doble click sobre un elemento");
});
- .mouseenter() : el puntero se sitúa encima de un elemento:
$(".mouseenter").mouseenter(function() {
$(this).css("color","red");
});
- .mouseleave() : el puntero sale de un elemento:
$("#mouseleave").mouseleave(function() {
$(this).css("color","blue");
});
- .hover(): admite dos funciones, que se definen separadas por una coma. La primera de ellas se produce cuando el puntero entra sobre el elemento, y la segunda cuando sale de él:
$("#hover").hover(function() {
$(this).css("color","yellow");
},
function() {
$(this).css("color","green");
});
- .mousedown() : pulsar el botón del ratón, independientemente de si se suelta o no. Válido para el botón izquierdo y para el derecho.
$("#mousedown").mousedown(function() {
$(this).html("<b>mousedown</b>")
});
- .mouseup() : soltar un botón del ratón después de hacer click. El evento tiene lugar cuando se suelta el botón.
$("#mouseup").mouseup(function() {
$(this).html("<b>mouseup</b>")
});
5.2. Eventos del teclado
.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");
});
5.3. Eventos de ventana
- .scroll(). Este evento se atiende cuando sobre un elemento que tiene barras de desplazamiento se mueve una de ellas.
- .resize(). El evento se lanza cuando a un elemento tipo ventana se le cambia el tamaño.
Comprueba tu aprendizaje
En los eventos .mouseenter() ¿se ejecuta una función cuando el puntero se sitúa encima del elemento?
En el evento .hover ¿se manejan los dos eventos over y out mediante funciones separadas por una coma?
6. Efectos
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/
6.1. Efectos básicos
- .show Muestra el elemento seleccionado.
- .hide Oculta el elemento seleccionado.
- .toogle Muestra u oculta un elemento seleccionado.
- .fadeIn Cambia la opacidad del elemento seleccionado al 100%.
- .fadeOut Cambia la opacidad del elemento seleccionado al 0%.
- .slideUp Oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
- .slideDown Muestra el elemento seleccionado con un movimiento de deslizamiento vertical.
- .slideToggle Muestra u oculta el elemento seleccionado con un movimiento de deslizamiento vertical.
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');
});
6.2. Otros efectos
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.
Ejemplo
default
Comprueba tu aprendizaje
¿Qué efecto nativo de jQuery muestra un elemento seleccionado?
¿Qué efecto nativo de jQuery muestra un elemento si está oculto y lo oculta si está visible?
7. Manipulación de CSS
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.
- .addClass(): añade una o más clases a los elementos seleccionados.
- .removeClass(): elimina uno o más clases a los elementos seleccionados.
- .toggleClass(): cambia entre la adición/eliminación de las clases de los elementos seleccionados.
- .css(): cambia las propiedades de un elemento.
$("p").css("color");
$("p").css("color","red");
$("p").css({ "color" : "red", "background-color" : "blue", "font-weight" : "bold" });
Comprueba tu aprendizaje
¿Cómo se establece de color rojo el fondo de todos los párrafos?
8. Librerías jQuery
Podemos enriquecer nuestras interfaces mediante diferentes librerías. Veamos algunas de ellas:
9. Referencias
Recursos:
- Web oficial: jquery.com
- Selectores: api.jquery.com/category/selectors
- Eventos: api.jquery.com/category/events
- Efectos: api.jquery.com/category/effects
- Resumen de eventos, métodos, efectos, etc: woorkup.com/wp-content/uploads/2016/01/jQuery-1.6-Visual-Cheat-Sheet.pdf
- Tutoriales en español: tutorialesenpdf.com/jquery
- Tutorial W3Schools: w3schools.com/jquery
- Manual de jQuery: desarrolloweb.com/manuales/manual-jquery.html
- CDN de Google: developers.google.com/speed/libraries/#jquery
- Ejemplos en CodePen: codepen.io/collection/nkGMmE
- Test online: cibertest.com/examen-online/676/examen-jquery
- Resumen: htmlcheatsheet.com/jquery
- Cheat Sheet: websitesetup.org/wp-content/uploads/2017/01/wsu-jquery-cheat-sheet.pdf
Bibliografía:
- HTML5, CSS3 y jQuery. Curso práctico. Juan Antonio Recio García, ed. RA-MA.
- Curso de Programación web: JavaScript, Ajax y jQuery. Alberto Ayoze Castillo.
Cursos:
- Curso en Codeacademy: codecademy.com/learn/learn-jquery
- Curso en Miriadax: miriadax.net/web/desarrollo-en-html5-css-y-javascript-de-apps-web-android-ios-8-ed-/
