Agenda

• Introducción
• Jquery
• Capturar el evento de un control HTML
Introducción

• JQuery simplifica enormemente la programación de JavaScript.

• jQuery nos facilitan el desarrollo de la aplicación.
• Con jQuery nos despreocupamos al codificar por la
compatibilidad de navegadores, ya que la librería resolverá esto.
JQuery

• jQuery es una biblioteca de JavaScript rápida y concisa que

simplifica el documento HTML, manejo de eventos, animación, y
las interacciones Ajax para el desarrollo web rápido.
jQuery

• Hay muchos otros frameworks de JavaScript por ahí, pero jQuery

parece ser el más popular, y también el más extensible.

Muchas de las compañías más grandes en la Web utilizan

jQuery, tales como:

Google
Microsoft
IBM
Netflix
jQuery

• Para utilizar la librería debemos descargarla del sitio oficial y en

cada página que lo requiera agregar:

<script src="jquery-3.1.1.min.js"></script>

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.
min.js"></script>
Ventajas de jQuery

• Nos ahorra muchas líneas de código.

• Nos hace transparente el soporte de nuestra aplicación para los
navegadores principales.
• Nos provee de un mecanismo para la captura de eventos.
• Mejora la eficiencia del desarrollador.
• Integra funcionalidades para trabajar con AJAX.
Capturar el evento de un control HTML
Capturar el evento de un control HTML
Capturar el evento de un control HTML
Capturar el evento de un control HTML
Capturar el evento de un control HTML
Capturar el evento de un control HTML
Capturar el evento de un control HTML
Capturar el evento de un control HTML
Eventos
Conceptos Simples
• Find something
• Do something
Find Something
• "Selecciona" elementos en el documento

• $(selector).action()

• $ define /accede jQuery

• (selector) “encuentra" elementos HTML
• action() que se ejecuta en los elementos
Do Something
1. Los elementos “escuchan" por algo que sucede…
• El documento está listo
• El usuario hace algo
• Otro "oyente" actúa
• Transcurre una cierta cantidad de tiempo
Do Something
2.… y luego hace algo
a.Manipula los elementos
b.Anima los elementos
c. Se communica con el servidor
Ejemplos
• $(this).hide() – esconde el elemento actual.
• $("p").hide() – esconde todos los elementos <p>.
• $(".test").hide() - esconde todos los elementos class="test".
• $("#test").hide() - esconde el elemento id="test".
Efectos JQuery
• hide(), show()
Efectos JQuery
fadeIn
fadeIn
fadeIn
fadeTo
fadeTo
Slide
• Los métodos de slide deslizan los elementos hacia
arriba y hacia abajo.
• jQuery tiene los siguientes metodos:
• slideDown()
• slideUp()
• slideToggle()
Slide
Slide
Slide
Slide
Slide
animate
animate
animate
Jquery.ajax
• AJAX es el arte de intercambiar datos con un servidor
y actualizar partes de una página web, sin recargar la
página entera.
Jquery.ajax