06 JQuery Eventos y Efectos

E
Eventos y Efectos
Ef
El objeto Event
j
y El objeto Event es pasado a todos los eventos que se lanzan y pone a nuestra disposición una serie de atributos muy útiles a la h d t b j hora de trabajar con eventos.
t
y event.currentTarget: Devuelte el elemento sobre el que se ha y
y
y
y
y
lanzado el evento.
event.data: Devuelve los datos que hayamos podido pasar al d
D
l l d
h
did l evento.
event.pageX: Devuelve la posición relativa del ratón en relación a la esquina izquierda del documento
event.pageY: Devuelve la posición relativa del ratón con respecto a la esquina superior del documento.
event preventDefault(): La acción predeterminada que se event.preventDefault(): La acción predeterminada que se ejecutaría por este evento nunca será ejecutada.
event.which: Para eventos de teclado y ratón, este atributo indica el botón o la tecla que ha sido pulsada.
Eventos
y .bind(): Permite asociar funciones a eventos de elementos tanto del DOM como del navegador. elementos tanto del DOM como del navegador
Permite asociar varios eventos simultáneamente o pasar parámetros a eventos.
pasar parámetros a eventos
y $('#foo').bind({ click: function() { // Hacer algo en el click }, mouseenter: function() { // Hacer algo en el mouseenter } });
Eventos
y .blur(): se lanza sobre un elemento que acaba de perder el foco
perder el foco.
y .click(): cuando pinchamos sobre el elemento que hemos asociado el evento.
hemos asociado el evento
y .dblclick(): cuando hacemos doble click.
y .hover(): cuando el ratón está encima del elemento h
() d l ó á i d l l
sobre el que hemos enlazado el evento.
y .keydown(): siempre que el usuario pulsa una tecla, k d
()
l
l
l
pero se envía sólo al elemento que tiene el foco en ese momento.
t
Eventos
y .load(): se lanza tan pronto el elemento al que hemos asociado el evento ha terminado de cargarse por completo.
asociado el evento ha terminado de cargarse por completo
y <img alt="Book" id="book" src="book.png" />
$('#book').load(function() { // Hace algo cuando termina de $(
#book ).load(function() { // Hace algo cuando termina de cargar la imagen por completo });
y .unload(): cuando un usuario navega fuera de la página.
y .mousemove(): es enviado a cualquier elemento cuando el ratón está encima del elemento.
y .mouseout(): el ratón deja de estar sobre el elemento.
y .mouseover(): cuando el ratón entra por primera vez en él.
Eventos
y .resize(): se lanza cuando cambiamos el tamaño de la ventana Este evento sólo se envía al objeto window ventana. Este evento sólo se envía al objeto window. y $(window).resize(function() { alert( Has cambiado el tamaño de la ventana ); });
{ alert('Has cambiado el tamaño de la ventana'); });
y .scroll(): se envía a los elementos que cambian su scroll ante una acción del usuario
y <div id="target" style="overflow: scroll; width: 100px; height: 100px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.. </div>
y $(
$('#target')
#target ).scroll(function() { alert(
scroll(function() { alert('Se ha movido el scroll'); });
Se ha movido el scroll ); });
Eventos
y .submit(): Este evento se lanza cuando un usuario está tratando de enviar un formulario
tratando de enviar un formulario.
y .toggle(): se utiliza al pinchar sobre un elemento. Nos permite hacer esto asociando dos o más funciones al mismo evento que se ejecutan de forma secuencial. y $(
$('#target')
#target ).toggle(function() {alert(
toggle(function() {alert('Primer click'); }
Primer click ); }, function() { alert('Segundo click'); }, function() { alert( tercer click ); });
function() { alert('tercer click'); });
y <div id="target"> Click here </div>
Efectos hide
Efectos
hide (esconder) y show (esconder) y show
(
(mostrar)
)
y Sintaxis
y $(selector).hide(speed,callback); Esconde el elemento.
$( l t ) hid (
d llb k) E
d l l
t
y $(selector).show(speed,callback); Muestra el elemento escondido.
escondido
y $(selector).toggle(speed,callback); Muestra los elementos escondidos y esconde los que se ven.
elementos escondidos y esconde los que se ven
y Speed permite los valores “slow”, “fast” y milisegundos
y Callback la siguiente función en ejecución secuencial.
la siguiente función en ejecución secuencial
y http://www.w3schools.com/jquery/jquery_hide_show.
asp
Efectos fading (desvanecer)
g(
)
y Sintaxis:
y $(selector).fadeIn(speed,callback); Se desvanece
$( l t ) f d I (
d llb k) S d
y $(selector).fadeOut(speed,callback); Aparece gradualmente.
gradualmente
y $(selector).fadeToggle(speed,callback); Una vez desaparece la siguiente aparece y viceversa.
desaparece la siguiente aparece y viceversa
y $(selector).fadeTo(speed,opacity,callback); Se desvanece hasta que llega a una opacidad (entre 0 y 1). y http://www.w3schools.com/jquery/jquery_fade.asp
http://www w3schools com/jquery/jquery fade asp
Efectos Slide (deslizar)
(
)
y Sintaxis
y $(selector).slideDown(speed,callback); Se desliza hacia $( l t ) lid D
(
d llb k) S d li h i abajo.
y $(selector).slideUp(speed,callback); Se desliza hacia $(selector) slideUp(speed callback); Se desliza hacia arriba.
y $(selector).slideToggle(speed,callback); Alterna.
$(selector) slideToggle(speed callback); Alterna
y http://www.w3schools.com/jquery/jquery_slide.asp
http://www w3schools com/jquery/jquery slide asp
Efectos Animate y Stop
y
p
y Sintaxis
y $(selector).animate({params},speed,callback);
$( l t ) i t ({
}
d llb k)
y Params define las propiedades CSS para ser animado
y $(selector).stop(stopAll,goToEnd); Para un efecto.
( l
)
(
All T E d) P f
y stopAll Por defecto false. True para todos los efectos.
y goToEnd
T E d Por defecto false. True hace el efecto finalice.
P d f
f l T h l f
fi li
y http://www.w3schools.com/jquery/jquery_animate.asp
El Método CSS()
()
y css({"propertyname":"value","propertyname":"value",...}
);
y <script>$(document).ready(function(){
i
(d
)
d (f
i (){
$("button").click(function(){ $("p").css({"background‐
color":"yellow","font‐size":"200%"});});});</script>
l " " ll " "f
i ""
%"}) }) }) / i
y <p>Esto es un parrafo.</p>
<button>Cambia varios estilos p
para p
p</button>
Dimensiones
y jQuery tiene varios metodos para trabajar con dimensiones:
y width()
id h()
y height()
y innerWidth()
i
Wid h()
y innerHeight()
y outerWidth()
d h()
y outerHeight()
Callback y chaining
y
g
y JavaScript se ejecuta línea a línea pero a veces puede no haber terminado una y ejecutarse la siguiente. Para la siguiente Para ello puedes crear una función callback que se ejecuta
cuando termina la anterior.
la anterior
y Chaining (encadenar) nos permirte ejecutar
multiples métodos en el mismo elemento con solo una
sentencia.
y <script>$(document).ready(function() {
p $(
)
y(
() {
$("button").click(function(){$("#p1").css("color","red").slideUp(2000).
slideDown(2000); });});</script>
y <p id="p1">jQuery
id " " jQ
es divertido!!</p><button>Pinchame</button>
di
id !! /
b
Pi h
/b
Ejemplos
j p
y Callback de funciones
y http://www.desarrolloweb.com/articulos/callback‐
htt //
d
ll
b
/ ti l / llb k
funciones‐jquery.html
y Mostrar y esconder texto
y http://www.desarrolloweb.com/articulos/efectos‐
rapidos jquery html
rapidos‐jquery.html
y Personalizar alertas de Javascript
y http://theproc.es/2011/8/20/27734/personalizando‐las‐
htt //th
/
/8/ /
/
li
d l
alertas‐javascript
Ejemplos
j p
y Scroll con JQuery
y http://theproc.es/2012/1/5/65927/scroll‐con‐
htt //th
/
/ / /6
/
ll
jquery#scroll_titulo_1
y Ejemplos de Jquery de W3Schools
y http://www.w3schools.com/jquery/jquery_examples.asp
htt //
h l
/j
/j
l
yT
Test interactivo de Jquery
i
i d J
y http://www.w3schools.com/jquery/jquery_quiz.asp