Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2016-1.

Presentación del tema: "Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2016-1."— Transcripción de la presentación:

1 Desarrollo y servicios web Luisa Fernanda Rincón Pérez 2016-1

2 ¿Qué vimos la clase pasada? Javascript

3 Sesión 9. Jquery Documentación: http://learn.jquery.com/ http://learn.jquery.com/ http://try.jquery.com/

4 Biblioteca JavaScript para animaciones, y efectos. Simplifica la interacción con documentos HTML usando el DOM Soporte para manejo de eventos. Permite manipular CSS ¿Qué es Jquery?

5 ¿Quién lo inventó? Creador: John Resig - Primera versión: 26 de Agosto del 2006 - Sorprendió porque simplificaba la programación de código de JavaScript

6 ¿Cómo se instala JQuery?

7

8

9 Instalación con los CDN http://code.jquery.com

10 ¿Cuál es su arquitectura? Fuente: http://www.elclubdelprogramador.com/wp- content/uploads/2012/10/jQuery_Arq.jpg

11 Encontrar elementos html Cambiar contenido html Escuchar lo que hace el usuario Animar el contenido ¿Qué facilita Jquery?

12 El código debe correr después de que el navegador acaba de cargar la página. ¿Qué se requiere para usar jquery en una página?

13 Permiten la selección y manipulación de elementos HTML ¿Qué es un selector?

14 Existen tres tipos de selectores elemento, id, y clase

15 ¿De qué otra manera se pueden seleccionar los elementos? http://try.jquery.com/

16 ¿De qué otra manera se pueden seleccionar los elementos? http://try.jquery.com/

17 ¿De qué otra manera se pueden seleccionar los elementos? http://try.jquery.com/

18 .length ¿Cómo saber cuántos elementos seleccioné?

19 ¿Cómo filtrar los selectores?

20 ¿Qué pseudo selectores existen? http://learn.jquery.com/using-jquery- core/selecting-elements/

21 https://www.safaribooksonline.com/library/view/head-first- jquery/9781449311988/ch04.html Manipulación DOM

22 https://www.safaribooksonline.com/library/view/head-first- jquery/9781449311988/ch04.html Manipulación DOM

23 https://www.safaribooksonline.com/library/view/head-first- jquery/9781449311988/ch04.html Manipulación DOM Children trae solo un elemento

24 Permite hacer diferentes funcionalidades sobre el objeto Encadenamiento ( con objeto jquery)

25 Función que se pasa como argumento de otra para hacer que se ejecute una función hija cuando termine de ejecutarse la función padre( la que la llamó). NO genera bloqueos Callbacks

26 Eventos

27 show() y hide(): Muestra u oculta elementos. show(speed, callback): Especifica el tiempo de duración y el otro se llama cuando se termina. toggle(): Si está oculto se muestra o viceversa. fade(): Desvanece y aparece objetos. Efectos

28 Toggle http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_toggle Hide & Show http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show Fade in http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadein Efectos

29 Principio DRY ¿Cómo hacer buen codigo Jquery? https://learn.jquery.com/code-organization/dont-repeat-yourself/

30 Módulos, encapsulamiento, usar objectLiteral o module pattern ¿Cómo hacer buen codigo Jquery? https://learn.jquery.com/code-organization/dont-repeat-yourself/

31 https://www.safaribooksonline.com/library/view/head-first-jquery/9781449311988/ch06.html Jquery vs Javascript

32 http://learn.jquery.com/using-jquery- core/ Guía completa

33 [1] Jquery: http://learn.jquery.com/http://learn.jquery.com/ [2] Libro de Jquery https://www.safaribooksonline.com/library/view/head-first- jquery/9781449311988/ch04.html https://www.safaribooksonline.com/library/view/head-first- jquery/9781449311988/ch04.html [3] Tutorial online Jquery http://try.jquery.com/ Referencias