Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery Ing. A. Lorena Ruhl Universidad Tecnológica Nacional Facultad Regional.

Presentación del tema: "Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery Ing. A. Lorena Ruhl Universidad Tecnológica Nacional Facultad Regional."— Transcripción de la presentación:

1 Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery Ing. A. Lorena Ruhl lruhl@bbs.utn.edu.ar 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

2 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: http://jquery.comhttp://jquery.com  Liviano en tamaño, compatible con CSS3, Cross-browser, completamente documentado, gran comunidad, muchos plugins.  Versión actual: 1.4.4

3 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();

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

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

6 Ing. Lorena Ruhl - Marco Rapallini - Javier FabiánMódulo 5: jQuery  http://www.learningjquery.com/ http://www.learningjquery.com/  http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery http://www.learningjquery.com/2010/07/great-ways-to-learn-jquery

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

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

9 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")

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

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