Taller de jQuery

22 de Febrero de 2012

Jairo Chapela-Martínez

¿Qué es jQuery?

● Librería en JavaScript● Rápida, ligera y con muchas “features”● Sirve para:

– Recorrer y manipular documentos HTML desde el navegador.

– Tratamiento de eventos.– Animación.– AJAX.

Historia● 14/01/2006 → Anuncio de la primera versión.● Creador: John Resig.● En la actualidad:

– Existe la jQuery foundation.– Equipo de más de 10 personas.

● Proyectos paralelos:– jQuery UI– jQuery Mobile

Para Empezar…

Para cargar la librería jQuery hay dos opciones:

• Opción A:

Descargar la librería de http://www.jquery.com

Incorporarla al proyecto y cargarla con: <script src="jquery-1.9.1.min.js"></script>

• Opción B:

• Utilizar los CDN: http://code.jquery.com/jquery-1.9.1.min.js

http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

Versiones de la librería● Se pueden obtener todas las versiones en http://code.jquery.com

● De cada versión existen dos variantes:– Normal: jquery-1.9.1.js– Compacta (minified): jquery-1.9.1.min.js

● Se recomienda la versión normal para la fase de desarrollo y la versión compacta para su uso en producción.

El núcleo (core) de jQuery

● La función jQuery() o $()– Sirve para seleccionar un elemento del

documento HTML.– Se pueden aplicar diversos métodos sobre el

resultado para llevar a cabo multitud de funcionalidades.

Ejemplo:

$(document).ready(function() {$("body").html("Hola caracola!");

});

Selectores● ¿Cómo indicarle a la función $() qué

elementos queremos seleccionar?– * (para seleccionar todo)– .clase– #identificador– [atributo=”valor”]– :checked– :disabled– Un objeto (ej: document)

Ejemplo:

$("div#texto").fadeOut("slow");

Acceso a los elementos● La función $() devuelve un objeto que puede

ser:– Un descriptor propio de un elemento del

documento.– Una lista de dichos descriptores.

● Para manejar esas listas:– Acceso al primer elemento de la lista: .first()– Comprobar si la lista está vacía: .empty()– Procesar individualmente cada elemento: .each()

Funciones para manipular el DOM● DOM = Document Object Model● Funciones de jQuery:

– Manipulación de contenido: .append(), .appendTo(), .html(), …

– Aplicación de clases CSS: .addClass(), .removeClass(), .hasClass(), .toggleClass(), …

– Acceso a atributos: .attr()– Valores de campos en formularios: .val()

AJAX con jQuery● AJAX = Asynchronous Javascript And XML

– Son peticiones asíncronas al servidor HTTP desde una página ya cargada.

● En jQuery existe la función jQuery.ajax()– Se le indica el URL del recurso a descargar.– Es posible utilizar GET o POST (con sus variables).– Métodos .done(), .fail() y .always() para programar –

respectivamente– comportamientos en caso de éxito, error o en cualquier caso.

Efectos visuales

● La librería jQuery incorpora diversos efectos visuales:– Efectos de fundido: .fadeIn(), .fadeOut(), ...– Mostrar u ocultar: .show(), .hide(), .toggle(), ...– Deslizar: .slideUp(), .slideDown(), ...

Tratamiento de eventos

● Con jQuery se pueden atender diversos eventos:– Movimientos de ratón: .click(), .hover(), ...– Eventos de teclado: .keypress(), .keyup(), ...– Foco de un componente: .focus(), …– Modificación de un campo: .change()