Presentación utilizada en el taller de Jquery, realizado el 22 de febrero de 2013 en la E.T.S.E.T, organizado por el GDG Vigo.

1. 22 de Febrero de 2012

2. ● 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.

3. ● 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

4. 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

5. ● 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.

6. ● 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!");
});

7. ● ¿Cómo indicarle a la función $() qué
elementos queremos seleccionar?
– * (para seleccionar todo)
– .clase
– #identificador Ejemplo:
– [atributo=”valor”] $("div#texto").fadeOut("slow");
– :checked
– :disabled
– Un objeto (ej: document)

8. ● 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()

9. ● 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()

10. ● 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.

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

12. ● 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()