jQuery, integración de contenido interactivo

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.

Contenidos del artículo

«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…).

Wikipedia. Google, Netflix, Amazon y WordPress usan jQuery.

Librerías JavaScript más populares en Internet en 2021: Según W3Techs, 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.

Test

¿Qué compañías usan jQuery?

Google, Netflix, Amazon y Wordpress

Oracle, HP, Acer, Unix y Apple

¡Bien! ¡Has fallado!

¿Cuál es la sintaxis básica de jQuery?

$(selector).action()

$(method).selector.action()

$(selector).method.action()

¡Bien! ¡Has fallado!

¿Cuál es la función del símbolo $?

Define el acceso a jQuery

Define un método

Define una animación

Define una variable

¡Bien! ¡Has fallado!

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

¿Qué hace este código: $("div.miClase")?

Seleccionar todos los divs con la clase .miClase

Selecciona todos los elementos con la clase .miClase

Selecciona todos los divs y todos los elementos con la clase .miClase

¡Bien! ¡Has fallado!

¿Qué hace este código: $(“#elemento, a”)?

Selecciona todos los divs con el id elemento que contengan enlaces

Selecciona el id "elemento" y todas las etiquetas a

Selecciona todos los elementos que contengan una etiqueta a

¡Bien! ¡Has fallado!

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.

En los eventos .mouseenter() ¿se ejecuta una función cuando el puntero se sitúa encima del elemento?

Verdadero

Falso

¡Bien! ¡Has fallado!

En el evento .hover ¿se manejan los dos eventos over y out mediante funciones separadas por una coma?

Verdadero

Falso

¡Bien! ¡Has fallado!

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

¿Qué efecto nativo de jQuery muestra un elemento seleccionado?

.hide();

.show();

.slideUp();

.fadeIn();

¡Bien! ¡Has fallado!

¿Qué efecto nativo de jQuery muestra un elemento si está oculto y lo oculta si está visible?

.toggle();

.fadeOut();

.hide();

slideUp();

¡Bien! ¡Has fallado!

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" });

¿Cómo se establece de color rojo el fondo de todos los párrafos?

$("p").css(background-color : "red");

$("p").css("background-color", "red");

$("p").css("background-color : red");

¡Bien! ¡Has fallado!

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-/