Taller de Jquery
-
Upload
rebecca-casais -
Category
Technology
-
view
1.247 -
download
2
description
Transcript of Taller de Jquery
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()