Download ¿Qué es Jquery?

Desarrollo y servicios web
Luisa Fernanda Rincón Pérez
2016-1
¿Qué vimos la clase pasada?
Javascript
Sesión 9. Jquery
Documentación:
http://learn.jquery.com/
http://try.jquery.com/
¿Qué es Jquery?
• Biblioteca JavaScript
para animaciones, y
efectos .
• Simplifica la
interacción con
documentos HTML
usando el DOM
• Soporte para manejo
de eventos.
• Permite manipular
CSS
¿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
¿Cómo se instala JQuery?
¿Cómo se instala JQuery?
¿Cómo se instala JQuery?
Instalación con los CDN
<script
src="https://ajax.googleapis.com
/ajax/libs/jquery/2.2.0/jquery.m
in.js"></script>
http://code.jquery.com
¿Cuál es su arquitectura?
Fuente: http://www.elclubdelprogramador.com/wpcontent/uploads/2012/10/jQuery_Arq.jpg
¿Qué facilita Jquery?
Encontrar
elementos
html
Cambiar
contenido
html
Escuchar lo
que hace el
usuario
Animar el
contenido
¿Qué se requiere para usar jquery en una página?
El código debe correr después de que
el navegador acaba de cargar la
página.
¿Qué es un selector?
Permiten la selección y manipulación de
elementos HTML
Existen tres tipos de selectores elemento, id, y clase
¿De qué otra manera se pueden seleccionar
los elementos?
http://try.jquery.com/
¿De qué otra manera se pueden seleccionar
los elementos?
http://try.jquery.com/
¿De qué otra manera se pueden seleccionar
los elementos?
http://try.jquery.com/
¿Cómo saber cuántos elementos
seleccioné?
• .length
¿Cómo filtrar los selectores?
¿Qué pseudo selectores existen?
• http://learn.jquery.com/using-jquerycore/selecting-elements/
Manipulación DOM
• https://www.safaribooksonline.com/library/view/head-firstjquery/9781449311988/ch04.html
Manipulación DOM
• https://www.safaribooksonline.com/library/view/head-firstjquery/9781449311988/ch04.html
Manipulación DOM
Children trae solo un elemento
• https://www.safaribooksonline.com/library/view/head-firstjquery/9781449311988/ch04.html
Encadenamiento ( con objeto jquery)
• Permite hacer diferentes
funcionalidades sobre el objeto
Callbacks
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
Eventos
Efectos
• 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
• 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
¿Cómo hacer buen codigo Jquery?
Principio DRY
https://learn.jquery.com/code-organization/dont-repeat-yourself/
¿Cómo hacer buen codigo Jquery?
Módulos,
encapsulamiento,
usar objectLiteral
o module pattern
https://learn.jquery.com/code-organization/dont-repeat-yourself/
Jquery vs Javascript
•
https://www.safaribooksonline.com/library/view/head-first-jquery/9781449311988/ch06.html
Guía completa
• http://learn.jquery.com/using-jquerycore/
Referencias
[1] Jquery: http://learn.jquery.com/
[2] Libro de Jquery
https://www.safaribooksonline.com/library/view/head-firstjquery/9781449311988/ch04.html
[3] Tutorial online Jquery http://try.jquery.com/