Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery Ing. A. Lorena Ruhl Universidad Tecnológica Nacional Facultad Regional Córdoba Dep. Ing. en Sistemas de Información “Diplomatura Superior en Desarrollo de Páginas Web Dinámicas en PHP ” Versión 2.0 Abril de 2010 Módulo 5: Interacción de PHP con el Diseño Web

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  jQuery: Hace más escribiendo menos.  “jQuery es una rápida y concisa Librería de JavaScript que simplifica el recorrido de un documento HTML, el manejo de eventos, animaciones, e interacciones Ajax para el desarrollo rápido de aplicaciones web. jQuery esta diseñado para cambiar el modo en que tú programas en JavaScript”. Fuente:  Liviano en tamaño, compatible con CSS3, Cross-browser, completamente documentado, gran comunidad, muchos plugins.  Versión actual: 1.4.4

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  Encontrar uno o más elementos HTML. $("div") $("#cualquierID") $(".miClaseCss")  Hacer algo con los elementos encontrados. $("div").addClass("special"); $("#cualquierID").hide();

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  jQuery soporta todos los selectores de CSS 1 al 3.  jQuery también tiene algunos selectores propios como: :first, :last, :has(), :visible, :hidden $("li:first") : obtiene el primer item de la lista. $("tr:odd") : obtiene las filas impares de una tabla. $("a[target=_blank]") $("input[id=^mi]") : obtiene todos los inputs cuyo id comienza con “mi”.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery   Contiene la documentación de todo lo que se puede hacer con la librería jQuery.

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  Ya que nuestro código consiste en manipular elementos de HTML, es deseable que nuestro código se ejecute cuando todo el HTML este cargado. $(document).ready(function(){ //Tú código va aquí });

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  Que permiten manipular Atributos. css(), attr(), html(), val(), addClass()  Que permiten manipular Eventos. bind(), trigger(), unbind(), click()  Que permiten agregar Efectos. show(), fadeOut(), toggle(), animate()

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  Obtener el valor de un atributo:.css("color").attr("checked").html().val()  Asignar un valor a un atributo:.css("color","blue").attr("checked","checked").html(" hola ").val("algún valor")

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  Se pueden capturar los eventos de esta forma: $("button").click(function(){ //Aquí tu código para el click });  O de esta forma: $("button").bind("click", function(){ //Aquí tu código para el click });

Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  Información actualizada el 09/11/2010.