Principios JQUERY PDF

Contenido
1. JQUERY Introduccin
2. Cmo utilizar JQUERY?
3. Sintaxis JQUERY
4. Selectores en JQUERY
5. Eventos JQUERY
5.1 Eventos de Mouse
5.1.1 Evento click()
5.1.2 Evento dblclick ()
5.1.3 Evento mouseover() y mouseout()
5.1.4 Evento mouseenter() y mouseleave()
5.1.5 Evento mousemove()
5.1.6 Evento mousedown() y mouseup()
5.1.7 Evento hover()
5.1.8 Eventos focusin() y focusout()
5.2 Eventos de Teclado
5.2.1 Evento keydown()
5.2.2 Evento keyup()
5.2.3 Evento keypress()
5.3 Eventos de browser
5.3.1 Evento resize()
5.3.2 Evento scroll()
5.3.3 Evento error()
5.4 Eventos de carga de documento
5.4.1 Evento ready()
5.4.2 Evento load()
5.4.3 Evento unload()
5.5 Eventos de Formas
5.5.1 Evento focus()
5.5.2 Evento Blur()
5.5.3 Evento change()
5.5.4 Evento select()
5.5.5 Evento submit()
6. Controladores de Eventos
6.1 Controlador on()
6.2 Controlador off()
6.3 Controlador one()
6.4 Controlador trigger()
7. Objeto de Evento

7.1 Objeto event.target
7.2 Objeto event.currentTarget
7.3 Objeto event.relatedTarget
7.4 Objeto event.which
7.5 Objeto event.pageX y event.pageY
7.6 Objeto event.stopPropagation
7.7 Objeto event.type
8. Efectos JQUERY
8.1 Efectos Bsicos
8.1.1 Efecto hide()
8.1.2 Efecto show()
8.1.3 Efecto toggle()
8.2 Efectos Deslizables
8.2.1 Efecto slideUp()
8.2.2 Efecto slideDown()
8.2.3 Efecto slideToggle()
8.3 Efectos Desvanecidos
8.3.1 Efecto fadeOut()
8.3.2 Efecto fadeIn()
8.3.3 Efecto fadeTo()
8.3.4 Efecto fadeToggle()
8.4 Efectos Custom
8.4.1 animate()
8.4.2 stop()
8.4.3 delay()
8.4.4 queue()
8.5 Mtodos complementarios para crear efectos JQUERY
9. Bibliografa

1. JQUERY
JQUERY es una librera de JAVASCRIPT, la cual facilita el trabajo al momento de
programar ciertos efectos y animaciones que otorgan ms interactividad a los sitios
web.

En los ltimos aos JQUERY se ha vuelto muy popular por lo fcil de utilizar adems de
ser una librera libre, no necesitar plugins externos y funcionar bien en todos los
navegadores incluido EXPLORER 7.
A travs de esta librera de JAVASCRIPT se puede manipular el HTML/ DOM, todas las
propiedades en CSS3, Manipulacin de Eventos y facilita el trabajo del AJAX y JSON.
2. Cmo utilizar JQUERY?
Para trabajar JQUERY es necesario descargar la librera del sitio web http://jquery.com/,
el sitio web permite descargar dos versiones de la librera.
Production el cdigo esta comprimido y es recomendable para trabajos en lnea.
Development el cdigo esta sin comprimir y es ms utilizada para desarrollos y
pruebas.

El archivo de JQUERY que se descarga de la pgina no es ms que un documento de
JAVASCRIPT con la extensin .js, el cual se carga en la pagina HTML a travs de la
etiqueta <script>.
Ejemplo Cdigo
<!DOCTYPE html >
<html>
<head>
<title>Adjuntar JQUERY es fcil</title>
<script src="jquery-1.7.1.js" ></script>
</head>
Nota: en la etiqueta <script> a partir de HTML5 no es necesario el atributo type ya
que JAVASCRIPT es el lenguaje script por defecto.

Existe otra opcin para cargar el archivo de JQUERY.
Tambin se puede vincular la librera JQUERY a travs de un CDN (Content Delivery
Network). Tanto con Google o Microsoft JQUERY.
Ejemplo Cdigo:
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jque
ry.min.js">
</script>
</head>
Esta forma llama al archivo JQUERY desde un servidor externo.
Ambas opciones trabajan de la misma forma en el documento HTML.
3. Sintaxis JQUERY
La forma de trabajar JQUERY es a la medida de seleccin y accin.

Es muy similar a CSS en el hecho de seleccionar un elemento y a est se le aplican
ciertos valores en el caso de JQUERY eventos y funciones.
Ejemplo cdigo

Dnde y cmo se programa JQUERY?
JQUERY al ser una librera de JAVASCRIPT trabajan con gran parte de la sintaxis de est,
como la declaracin de variables, ciclos y condicionales, adems de programarse en la
misma etiqueta <script> o archivo JS, pero aun as JQUERY cuenta con su propia sintaxis
para la mayora de eventos y selectores.
Ejemplo

En el ejemplo anterior se programa JQUERY en el interior del <head>, esta etiqueta se
carga antes que la etiqueta <body>, es decir que JQUERY seleccionara y asignara
funciones a elementos que no se han cargado todava, para evitar que eso suceda se
utiliza el $(document).ready el cual no permite a JQUERY empezar con su trabajo hasta
que el documento este totalmente cargado.
Si no se trabajara con el $(document).ready , lo ms seguro es que ciertas funciones de
JQUERY no trabajen como se esperan.
Existe otra forma que tambin es muy utilizada la cual no requiere del
$(document).ready, y es ms fcil de asimilar para algunas personas, consiste en llamar
el JQUERY al final de la etiqueta <body> ya que por orden de carga ser el ltimo en
ejecutarse.
Ejemplo: Se mostrara el cdigo anterior pero cargando el JQUERY al final del <body>

Se carga la librera en el <head> pero se ejecuta el cdigo al final del <body>.
Modo de trabajo de JQUERY
Se puede decir que JQUERY trabaja con el mtodo de origen, evento y respuesta, es
decir seleccionar un elemento al cual se le agrega un evento, cuando el evento se
cumple llama una funcin determinada.

Analizando la grafica se puede observar que el origen es el botn, el evento es cuando el
usuario da clic sobre l y la respuesta es la funcin que imprime el texto Hola en la
pantalla.
4. Selectores en JQUERY
Los selectores son unos de los elementos principales de la librera ya que permiten
seleccionar y manipular el HTML.
Los selectores de JQUERY pueden encontrar etiquetas, ID, Clases, atributos entre otros.
Se basan en los selectores de CSS (ver selectores Css).
En JQUERY los selectores siempre deben estar despus del signo dlar y entre
parntesis.

Los selectores principales son los de etiqueta, ID y clases.
4.1 Selector de etiqueta
Selecciona todos los elementos de la pgina con relacin a la etiqueta.
Ejemplo seleccionar todas las etiquetas <p> de HTML.
$(p)
4.2 Selector de ID
Todas las etiquetas HTML pueden contener al atributo ID, el valor de est atributo debe
ser nico en el documento.
Su identificacin es la misma que en CSS a travs del smbolo (#), esto sirve para
seleccionar un nico elemento en el cdigo.
Ejemplo
$(#contenedor)
4.3 Selector de Clases
Selecciona a todos los elementos que tienen una clase especifica.
Su identificacin es la misma que en CSS a travs del smbolo (.)

Ejemplo
$(.prueba)
4.4 Selectores complementarios de JQUERY
Sintaxis Descripcin
$ ("*") Selecciona todos los elementos en la pgina.
$ (this) Selecciona el elemento a que se le est aplicando el
evento.
$(etiqueta .clase) Selecciona la clase que esta aplicada a determinada
etiqueta.
$(elemento :first) Selecciona el primer elemento del elemento.
$(elemento :first-child) Selecciona el primer hijo anidado del elemento.
$(elemento :last-child) Selecciona el ltimo hijo anidado del elemento.
$(*href+) Selecciona todos los elementos con el atributo href
$(elemento :even) Selecciona todos los elementos pares del selector.
$(elemento :odd) Selecciona todos los elementos impares del selector.

Ejemplo///.
5. Eventos JQUERY
Los eventos representan momentos precisos en los que algo sucede, estos pueden ser
desencadenados por el usuario o reproducirse manera automtica mientras ocurre la
navegacin del sitio.
Los eventos se pueden dividir segn su origen.
Eventos del mouse
Eventos de teclado
Eventos de formulario
Evento de Documento / Ventana (document/window)
5.1 Eventos de Mouse
Son los eventos que se desatan a travs del mouse del usuario.
Sintaxis Descripcin
click() La funcin se ejecuta cuando el usuario presiona y suelta el
botn izquierdo del mouse.
dblclick() La funcin se ejecuta cuando el usuario presiona dos veces el

clic en forma consecutiva y rpida.
mouseover() La funcin se ejecuta cuando el usuario desliza el puntero del
mouse sobre el elemento seleccionado, sigue funcionando si
entra o sale de alguno de sus hijos.
mouseout() La funcin se ejecuta cuando el puntero sale del rea del
elemento seleccionado.
mouseenter() La funcin se ejecuta solo cuando el puntero entra en al rea
del elemento seleccionado (entrada).
mouseleave() La funcin se ejecuta solo cuando el puntero sale del rea del
mousemove() La funcin se ejecuta una y otra vez al detectar el movimiento
del mouse al interior del elemento seleccionado.
mousedown() La funcin se ejecuta mientras el botn del mouse este
presionado. (Es ideal para elementos draggables).
mouseup() La funcin se ejecuta cuando se suelta el botn del mouse
anteriormente presionado.
hover() Cuenta con dos controladores uno de entrada y otro de salida,
se ejecuta cuando se entra y sale del elemento seleccionado.
focusin() La funcin se ejecuta cuando el elemento seleccionado gana el
foco, por lo general est acompaado del focusout().
focusout() La funcin se ejecuta cuando el elemento seleccionado pierde
el foco.

5.1.1 Evento click()
Est evento se puede asociar a todos los elementos HTML y se desencadena cuando el
usuario da clic en el elemento seleccionado.
Ejemplo.
Se asigna el evento click() a todos los prrafos.
$("p").click()
Luego se crea una funcin que se ejecutara al momento del clic.
$("p").click(function(){
$(this).slideUp();
})
Para este primer ejemplo se mostrara el cdigo completo con el HTML.

5.1.2 Evento dblclick ()
usuario da doble clic en el elemento seleccionado.
Ejemplo.
Se asigna el evento dbclick() a un div con id #cuadro.
$("#cuadro").dblclick()
Luego se crea una funcin que se ejecutara al momento del doble clic.
$("#cuadro").dblclick(function(){
$(this).hide();
})
5.1.3 Evento mouseover() y mouseout()
Estos eventos se pueden asociar a todos los elementos HTML y se desencadenan
cuando el puntero del mouse entra o sale del elemento seleccionado.

Ejemplo.
Se pueden asignar varios eventos a un mismo elemento.
$("#cuadro").mouseover()
$("#cuadro").mouseout()
Luego se crea una funcin para cada uno de los eventos.
$("#cuadro").mouseover(function(){
$(this).css("background-color","#03F");
/*Ms adelante en el documento se muestra como
modificar el CSS desde JQUERY*/
})
$("#cuadro").mouseout(function(){
$(this).css("background-color","#F00");
})
5.1.4 Evento mouseenter() y mouseleave()
Las funciones mouseover(), mouseout() y mouseenter(), mouseleave() son muy
similares pero tienen una pequea diferencia y es con referencia a sus hijos.
mouseover() continua funcionando si el elemento se desliza sobre l, en cambio
mouseenter() solo funciona en el momento de entrada aun si pierde la referencia con
uno de sus hijos.

5.1.5 Evento mousemove()
mouse se mueve al interior del elemento seleccionado.
Ejemplo.
Se asigna el evento mousemove() a un <div> con id #cuadro
var ancho = 300;///variable para aplicar el ejemplo
$("#cuadro").mousemove()
Luego se crea una funcin que se ejecutara al momento de mover el mouse.
$("#cuadro").mousemove(function(){
numero++;///se incrementa la variable.
$(this).css("width",numero+"px");
})

5.1.6 Eventos mousedown() y mouseup()
Estos eventos se pueden asociar a todos los elementos HTML y se desencadenan
cuando se presiona o se sueltan los botones del mouse.
Ejemplo.
Se asigna los eventos mousedown() y mouseup() a un div con id #cuadro.
$("#cuadro").mousedown()
$("#cuadro").mouseup()
Luego se crean las funciones que se ejecutaran al presionarse y liberarse el botn del
mouse.
$("#cuadro").mousedown(function(){
$(this).css("background-color","#ff00ff");
})
$("#cuadro").mouseup(function(){
$(this).css("background-color","#00ffff");
})
Nota: Mientras el botn del mouse este presionado se mostrara el color #ff00ff, al
liberarse se mostrara el color #00ffff.(este ejercicio no funcionaria bien con el evento
click() remplazando el mousedonw()).
5.1.7 Evento hover()
Est evento se puede asociar a todos los elementos HTML .
El evento hover() tiene dos controladores, es decir se deben programar dos funciones
de entrada y salida.
Las dos funciones se separan por una Coma (,).
$(selector).hover(funcinEntrada , funcinSalida)
Est evento es una manera rpida de utilizar mouseenter() y mouseleave()
Ejemplo

Primero se asigna el evento hover() a un div con id #cuadro
$("#cuadro").hover()
Luego se crean las dos funciones necesarias para el funcionamiento del hover()
separadas por coma.
$("#cuadro").hover(function(){
$(this).css("width","400px");
},
function(){
})
5.1.8 Eventos focusin() y focusout()
Estos eventos se utilizan generalmente en las etiquetas de formulario y se
desencadenan cuando ganan o pierden el foco los elementos seleccionados.
Ejemplo
Se asigna los eventos focusin() y focusout() a una etiqueta <input> de formulario.
$("input").focusin()
$("input").focusout()
Luego se crean las funciones que se ejecutaran al presionarse y liberarse el elemento de
formulario.
$("input").focusin(function(){
})
$("input").focusout(function(){
$(this).css("background-color","#ffffff");
})

5.2 Eventos de teclado.
Son los eventos que se ejecutan desde el teclado del usuario.
Sintaxis Descripcin
keydown() La funcin se ejecuta cuando se presiona alguna tecla.
keyup() La funcin se ejecuta cuando se suelta la tecla anteriormente
presionada.
keypress () La funcin se ejecuta repetidamente mientras la tecla este
presionada.

5.2.1 Evento keydown()
Est evento se ejecuta cuando alguna de las teclas es presionadas.
Ejemplo
Se asigna el evento keydown() a la etiqueta body del documento.
$("body").keydown()
Luego se crea una funcin que se ejecutara al momento de presionar una tecla.
$("body").keydown(function(){
})
Relegar una funcin a cualquier tecla no es muy til, para esto existe un objeto de
evento que captura el cdigo de la tecla que es presionada.
event.which
Esta funcin detecta cual es la tecla que est presionando el usuario, para luego poder
hacer filtro en el evento.(ver objeto de eventos)
Ejemplo
Se asigna el evento keydown() a la etiqueta input del documento.
$("input").keydown()

Luego se pasa un parmetro en la funcin para detectar la tecla presionada, en este
ejemplo se imprimir el cdigo de la tecla en un div.
$("input").keydown(function(event){
$("div").html("tecla: " + event.which);
})
5.2.2 Evento keyup()
Est evento se ejecuta cuando se suelta la tecla anteriormente presionada.
Ejemplo
Se asigna el evento keyup() a un elemento input del documento, tambin se utilizara el
evento keydown() para este ejercicio.
$("input").keydown()
$("input").keyup()
Luego se crean las funciones que se ejecutaran con los eventos.
$("input").keydown(function(){
$(this).css("background-color","#999");
})
$("input").keyup(function(){
$(this).css("background-color","#fff");
})
5.2.3 Evento keypress()
Est evento se ejecuta cuando se presiona la tecla de manera continua.
Ejemplo
Se asigna el evento keypress() a un elemento body.
var numero = 0///variable que se incrementara
$("body").keypress()

Luego se crean las funciones que en este caso se mover a un div en posicin absoluta.
$("body").keypress(function(){
numero++;
$("div").css("left",valor+"px");
})
5.3 Eventos de browser
Son eventos ejecutados desde la modificacin de los atributos del browser del usuario.
Sintaxis Descripcin
resize() La funcin se ejecuta cuando el navegador detecta que est
siendo redimensionado.
scroll() La funcin se ejecuta cuando se utiliza el scroll en el
navegador.
error() La funcin se ejecuta cuando exista algn error de carga de la
pgina web.(este evento no lo desata el usuario).

5.3.1 Evento resize()
Cuando se redimensiona la ventana del navegador ejecuta el evento.
Ejemplo
Se asigna el evento resize() al navegador.
var numero = 0///variable que se incrementara
$(window).resize()
Luego se crea la funcin, se empleara el mismo ejercicio de desplazar un div posicionado
absolutamente.
$(window).resize(function(){
numero++;
$("div").css("left",valor+"px");
})

5.3.2 Evento scroll()
La funcin se ejecuta cuando se realiza scroll() ya sea en el documento o en un
contenedor con la propiedad overflow:scroll.
Ejemplo
Se asigna el evento scroll a un elemento div con ID #cuadro el cual tiene como
propiedades css una posicin absoluta y un overflow automtico.
var valor = 0
$("#cuadro").scroll()
Luego se asigna una funcin que desplazara el div cada vez que se realice scroll sobre l.
$("#cuadro").scroll(function(){
valor++
$("div").css("left",valor);
})
5.3.3 Evento error ()
El evento error () no es desencadenado por el usuario, est ocurre solo cuando existe
algn error en la carga de la pagina web.
Es muy utilizado para buscar soluciones a posibles errores de los sitios web.
Ejemplo
Se seleccionan todas las imgenes del documento.
$("img").error()
Luego se asigna una funcin previendo el caso de un posible error en carga de
imgenes.
$("img").error(function(){
$("img").replaceWith("<p>Error al cargar la
imagen!</p>");
////funcion que remplaza contenido.

})
Nota: para evidenciar el error se puede remover la imagen de la carpeta a la que est
vinculada, de modo que la ruta de la etiqueta <img> no coincida.
5.4 Eventos de carga de documento
Estos eventos se ejecutan al cargarse o descargarse elementos de la ventana.
Sintaxis Descripcin
ready() La funcin se ejecuta cuando se ha cargado totalmente el
DOM(Document Model Object) y la pagina con sus elementos
incluyendo imgenes.
load() La funcin se ejecuta cuando se terminan de cargar sub-
elementos del documento como (imgenes, scripts, frames, etc.
unload() La funcin se ejecuta cuando se descargan los elementos de la
pgina.

5.4.1 Evento ready()
Est evento se ejecuta una vez se han cargado todos los elementos del documento,
gracias a esto se utiliza mucho para introducir en el otras funciones y eventos JQUERY.
Ejemplo
Se asigna el evento al documento.
$(document).ready()
Luego se introducen las funciones a ejecutarse cuando se encuentre listo el documento.
$(document).ready(function(){
$("button").click(function(){
alert("Hola Mundo");
})
})
Nota: este funcin no debe usarse al tiempo de <body onload="">
5.4.2 Evento load()

Es un controlador de carga, la funcin se ejecuta cuando el elemento seleccionado se ha
terminado de cargar.
Ejemplo se seleccionan todas las imgenes del documento.
$("img").load()
Luego se aplica la funcin a ejecutar una vez se ha terminado de cargar la imagen.
$("img").load(function(){
alert("La imagen se ha cargado correctamente.")
})
5.4.3 Evento unload()
Est evento se ejecuta cuando el usuario sale de la pgina web en alguna de estas
formas.
El usuario da clic en un vnculo el cual carga otra pgina.
Se utilizan los botones de adelantar o volver del navegador.
La pestaa o ventana del navegador se cierra.
La pgina se recarga.
Se cambia la URL de la pgina.
Nota: Est evento funciona de manera diferente en cada navegador, es recomendable
hacer pruebas de funcionamiento en cada navegador.
Ejemplo
Se asigna el evento unload() a la ventana del navegador.
$(window).unload()
Luego se asigna la funcin a ejecutar.
$(window).unload(function(){
alert("Chao!");
})
5.5 Eventos de formas

Estos eventos se ejecutan principalmente en los objetos de formulario.
Sintaxis Descripcin
focus() La funcin se ejecuta cuando el elemento es seleccionado.
blur() La funcin se ejecuta cuando el elemento es deseleccionado.
change() La funcin se ejecuta cuando el valor del campo del elemento
es modificado.
select() La funcin se ejecuta cuando se selecciona el texto de ciertos
campos de formularios.
submit() La funcin se ejecuta cuando el formulario es enviado.

5.5.1 Evento focus()
La funcin se ejecuta cuando el elemento gana el foco.
Ejemplo
Se asigna el evento focus() a un elemento de tipo <input> del documento.
$("input").focus()
Luego se crea la funcin a ejecutar al momento de seleccionar el elemento.
$("input").focus(function(){
alert("escribe alguna cosa")
})
5.5.2 Evento blur()
La funcin se ejecuta cuando el elemento es deseleccionado.
Ejemplo
Se asigna el evento blur() a un elemento de tipo <input> del documento.
$("input").blur()
Luego se crea la funcin a ejecutar al momento de la prdida del foco del elemento.
$("input").blur(function(){
alert("Gracias!!!")

})
5.5.3 Evento change()
La funcin se ejecuta en el momento que se cambia el valor del elemento seleccionado,
est evento solo funciona para los elementos de Formulario.
Ejemplo
Se asigna el evento change() a la elemento de tipo <input> del documento.
<form>
<input type="text" value="Escribe algo aqu">
</form>
<script>
$("input").change()
Luego se asigna la funcin a ejecutar cuando se modifique el contenido del elemento
seleccionado.
$("input").change(function(){
alert("Gracias!!!");
})
5.5.4 Evento select()
La funcin se ejecuta cuando el texto del selector es seleccionado con el mouse.
Este eventos solo se puede aplicar a <input type=text/> y <textArea/>
Ejemplo.
Se asigna el evento select() a la elemento de tipo <input> del documento.
<form>
<input type="text" value="Selecciona est texto">
</form>
<script>

$("input").select()
Luego se asigna la funcin a ejecutar una vez se selecciona este evento.
$("input").select(function(){
alert("Muy bien");
})
5.5.5 Evento submit()
La funcin se ejecuta cuando el formulario es enviado a travs del elemento <input
type=submit>
Est evento solo se puede aplicar a elementos de envi de formulario.
Ejemplo
Se asigna el evento submit() al formulario del documento.
<form action="envio.php">
Digite los nmeros del 1 al 4 para enviar el
formulario.
<input type="text" id="login">
<input type="submit">
</form>
<script>
$("form").submit(
Luego se asigna la funcin a ejecutar cuando se enve el formulario.
$("form").submit(function(){
valor = document.getElementById("login");
if(valor == 1234){
alert("Muy bien")
return true///permite el envio del formulario

}
alert("Error")
return false ///Impide que se envie el formulario
})
6. Controladores de Eventos
Son eventos complementarios que ayudan al trabajo de JQUERY y facilitan el control de
flujo del aplicativo web.
Sintaxis Descripcin
on() on() enlaza varios controladores para los elementos
seleccionados y los elementos secundarios.
.off() Este controlador remueve eventos aplicados a selectores, se
utiliza normalmente para desactivar el controlador on()
.one() Ejecuta una funcin segn el evento asignado solo por una vez.
.trigger() Activa uno o varios eventos especficos de manera simultnea.

6.1 Controlador on()
Permite enlazar varios eventos a un selector.
Sintaxis:
$(selector).on(Evento,SelectorHijo,Dato,Funcion,Mapa)
Evento: es un campo obligatorio del controlador on(), l cual permite enlazar
varios eventos separados por espacios, se debe escribir el evento entre comillas
y debe tener la sintaxis de JQUERY.
Selector Hijo: Especifica a que se aplicara la funcin a uno o varios hijos del
selector. (opcional)
Dato: Especifica datos adicionales a pasar en la funcin. (opcional)
Funcin: Especifica la funcin a ejecutar una vez ocurre el evento, este campo es
obligatorio.
Mapa: Especifica un mapa de eventos ( {evento: funcin, evento: funcin, ...})
que contenga uno o ms eventos.(puede remplazar todos los anteriores)
Ejemplo
Se asigna el controlador a un div de ID cuadro.

$("#cuadro").on()
Luego se asigna el evento y la funcin a ejecutar.
$("#cuadro").on("click",function(){
$(this).css("background-color","#090")
})
El controlador on() permite asignar varias eventos y funciones a un mismo selector de
manera continua.
Ejemplo 2
Se asigna el controlador a un div de ID cuadro.
$("#cuadro").on()
Luego se asignan los eventos y funciones a ejecutar separadas por comas (,)
$("#cuadro").on({
"mouseover":function(){
$(this).css("background-color","#063")
},
"mouseout":function(){
$(this).css("background-color","#00f")
}
})

6.2 Controlador off()
Est controlador apaga otros eventos asignados a selectores.
Sintaxis:
$(selector).off(evento,selector,function,mapa)

Evento: es un campo obligatorio del controlador off(), l cual permite enlazar
varios eventos separados por espacios para luego deshabilitarlos, se debe
escribir el evento entre comillas y debe tener la sintaxis de JQUERY.
Selector: Especifica a que se aplicara la funcin a uno o varios hijos del selector.
(opcional)
Funcin: Especifica la funcin a ejecutar una vez ocurre el evento, este campo es
obligatorio.
Mapa: Especifica un mapa de eventos ( {evento: funcin, evento: funcin, ...})
que contenga uno o ms eventos.(puede remplazar todos los anteriores)
Una manera resumida de trabajar la funcin off(), es indicar que evento se debe
desactivar.
Ejemplo
Se llama al controlador off() al momento de dar click sobre el botn.
$("#cuadro").on("click",function(){
alert("Hola");
})
alert("desactivado");
$("#cuadro").off("click");
})
6.3 Controlador one()
El controlador one() asigna un evento al selector el cual solo ejecutara una vez por cada
Est controlador es ideal utilizarlo cuando se requieren funciones que solo se ejecuten
una sola vez.
Sintaxis
$(selector).one(evento,data,funcin)

Evento: Es un campo obligatorio e indica cual ser el evento JQUERY que
desencadenara la funcin.
Data: Es un campo opcional, funciona para suministrar informacin adicional a
la funcin.
Funcin: especifica que debe ocurrir al momento de ocurrir el evento.
Ejemplo
Se tienen 5 div en el <body> del documento con las siguientes caractersticas en CSS.
div{
width:50px;
height:50px;
margin:10px;
background-color:#F00;
transition:all ease 2s;
float:left;
}
Luego se seleccionan en JQUERY con el controlador one().
$("div").one()
Una vez se tiene esto se crean las funciones que se ejecutaran una sola vez.
$("div").one("click",function(){
$(this).css("height","500px");
})
$("div").one("dblclick",function(){
$(this).css("height","50px");
$(this).css("background-color","#f00");

})

6.4 Controlador trigger()
El controlador trigger () puede desencadenar varios eventos y funciones de manera
simultnea.
Tambin se pueden asociar eventos y funciones ya creadas a otro selector.
Este controlador tambin activa el comportamiento predeterminado de un evento
(como el envo de formularios).
Sintaxis.
$(selector).trigger(evento, parametro1,param2,)
Evento: Es un campo obligatorio e indica cual es el evento que desencadenar la
funcin.(puede ser un evento personalizado).
Parmetros: Son parmetros adicionales que se indican al controlador de
eventos.
Ejemplo
Se tienen tres elementos (<p>,<h1>,<div>) en el documento HTML a cada uno de ellos
se le asignan diferentes funciones.
Tambin se incluye un elemento de botn(button) el cual tendr el controlador trigger ()
que podr desencadenar todos los eventos juntos.
$("#cuadro").click()
$("p").click()
$("h1").click()
$("button").click()///tendr el controlador trigger()
Luego se crean las funciones que se ejecutaran al momento del click
$("#cuadro").click(function(){

$(this).css("border","dashed 4px #ffffff");
})
$(this).css("font-size","50px");
})
$("h1").click(function(){
$(this).css("color","#ff0");
})
$("#cuadro").trigger("click");
$("p").trigger("click");
$("h1").trigger("click");
})
Estos son los controladores ms utilizados y actuales.
Le invito a investigar y conocer los siguientes controladores.
.bind()
.die()
.live()
.delegate()
.triggerHandler()
.unbind()
.undelegate()
7. Objeto de Eventos
Son objetos que complementan la utilizacin de los eventos para optimizar la
programacin y usabilidad.

Sintaxis Descripcin
event.target Indica cual es el elemento que esta desencadenando el
evento.
event.currentTarget Indica cual es el elemento que est ejecutando el evento
desencadenado.
event.relatedTarget Indica cual es el elemento que est saliendo o entrando de un
evento de ratn.
event.which Para eventos de teclado y mouse, esta propiedad identifica
cual tecla fue presionada.
event.pageX,
event.pageY
Estas propiedades devuelven la posicin del cursor, tomando
como referencia la esquina superior izquierda del documento.
event.stopPropagation Detiene la propagacin del evento en elementos padres.
event.type Describe cual es el tipo de evento que se desencadeno.

7.1 Objeto event.target
Indica cual es el elemento del DOM del cual se desencadeno el evento.
Sintaxis
event.target
Ejemplo
Se tienen tres elementos diferentes (p,h1,div) en el documento HTML.
En JQUERY se crea la funcin con un parmetro, en este caso event.
Similar a CSS se puede agrupar varios selectores en JQUERY separndolos por comas.
$("h1,p,#cuadro").click()
Una vez se tiene seleccionados los elemento se agrega la funcin a ejecutar con el
parmetro event.
$("h1,p,#cuadro").click(function(event){
alert(event.target);//imprime DOM
alert(event.target.nodeName);///NodeName imprime el
nombre del nodo
})

7.2 Objeto event.currentTarget
Indica cual es el elemento del DOM que est ejecutando el evento desencadenado, esta
propiedad tiende a ser igual que la funcin this.
Sintaxis
event.currentTarget
Ejemplo
Se pasa un parmetro en la funcin luego de tener el selector.
$("p").click(function(event){
alert(event.currentTarget);
alert(event.currentTarget === this);//true
})

7.3 Objeto event.relatedTarget
Indica cul es el elemento que est saliendo o entrando de un evento de ratn, es decir
cuando se aplica un evento mouseenter a un elemento, el objeto event.relatedTarget
identificar de dnde viene el mouse antes de haber entrado al elemento seleccionado.

Sintaxis
event.relatedTarget
Ejemplo
Se tiene el siguiente cdigo HTML.
<ul>

<li><a href="#">Botn 1</a></li>
</ul>
<a href="#">Ver ms</a>
<div></div>
Luego se asigna el evento mouseenter a la etiqueta <a> y se imprimir en el div el
elemento relacionado con la etiqueta.
$("a").mouseenter(function(event) {
$("div").html("el Mouse Entro desde " +
event.relatedTarget.nodeName)
/*La funcin .html de JQUERY, aplicada de esta manera
cumple la misma funcin que el innerHTML de Javascript.
*/
});

7.4 Objeto event.which
Este evento indica especficamente cual tecla fue presionada incluyendo los botones del
Mouse, devolviendo como valor el cdigo numrico de la tecla.
Ejemplo
Se tiene el siguiente cdigo HTML
Oprima una tecla cualquiera
<input type="text">
<div></div>
Luego se asigna el evento keydown a la etiqueta <input> para que con ayuda del
event.which imprima el cdigo de la tecla en el div.

$("input").keydown(function(e){
$("div").html("codigo tecla :" + e.which);
})

7. 5 Objetos event.pageX y event.pageY
Las propiedades event.pageX y event.pageY devuelven las posiciones del puntero del
maouse.
Ubicando los puntos (x:0 , y:0) en el borde superior izquierdo del documento.
Sintaxis
event.pageX
event.pageY
Ejemplo
Se crea un <div> con el siguiente cdigo CSS.
#cuadro{
width:70px;
height:70px;
position:absolute;
}
Luego se asigna el evento mousemove al documento, esto para que se actualice
constantemente la posicin del puntero del mouse.
$(document).mousemove(function(e){
///Se imprimen los datos de posicin

$("#cuadro").html("X:" + e.pageX + "<br/>" + "Y:" +
e.pageY);
/*Se le indica al div que tenga la posicin left en pixeles
igual a la del cursor.*/
$("#cuadro").css("left",e.pageX+"px");
})

7.6 event.stopPropagation
A la propagacin de eventos en JQUERY se le denomina bubbling esto se da cuando los
elementos padres y los elementos hijos comparten un mismo evento. Como resultado
al ejecutar un evento compartido se ejecutara primero en el hijo y luego subir al padre.

Cuando se asigna el mismo evento tanto al padre como al hijo, el evento se propagar
del hijo al padre.
El mtodo event.stopPropagation detiene la propagacin de un evento a los elementos
contenedores, evitando que el mismo evento de los elementos padres sea ejecutado.
Sintaxis
event.stopPropagation()
Ejemplo
Se tiene el siguiente cdigo HTML.

<div>
<p>este parrafo contiene un span,<br/>
<span style="background:#F00;">click aqu</span><br/>
puedes darle click</p>
</div>
Se asignan a cada uno de los elemento el mismo evento click con un alert como
respuesta del evento.
$("body").keydown(function(){
alert("mensaje body");
})
$("div").click(function(){
alert("mensaje div, sigue mensaje body");
})
alert("mensaje p, sigue mensaje div y termina body");
})
$("span").click(function(e){
e.stopPropagation()/*remover esta lnea y ver la
propagacin completa*/
alert("click en span y detener propagacin");
})
7.7 event.type
Devuelve cul fue el evento que desencadeno la funcin.
Sintaxis
event.type

Ejemplo
Se tiene en <div> en el documento con el siguiente cdigo CSS
#cuadro{
width:100px;
height:60px;
}
Luego se aplica diferentes eventos que desencadenen una misma funcin, imprimiendo cual es
el evento que desencadena la funcin.
$("#cuadro").on("click mouseover mouseout
dblclick",function(e){
$("#cuadro").html("Evento: " + e.type)
})
Nota: Estos son algunos de los object.events ms utilizados, le invitamos a investigar y conocer
los siguientes objetos de evento, que le ayudaran en su formacin.
8. Efectos JQUERY
JQUERY proporciona varios efectos para aadir animacin a una pgina web.
Esta librera incluye animaciones sencillas pero usables que se utilizan con frecuencia,
adems tiene ciertos efectos que se permiten personalizar permitindole al usuario
disear sus propias animaciones de interfaz.
A continuacin se mostrara cada uno de los principales efectos de JQUERY.
8.1 Efectos bsicos
Sintaxis Descripcin
hide() Oculta los elementos seleccionados.
show() Muestra los elementos seleccionados que se encuentran
ocultos.
toggle() Oculta o Muestra los elementos seleccionados.

8.1.1 Efecto hide()
El efecto hide() oculta el elemento seleccionado, es similar a la propiedad CSS
display:none.
Sintaxis.
$(selector).hide(velocidad,easing,callback)
Velocidad (opcional): Indica la velocidad con la que se ocultar el elemento
seleccionado, tiene tres posibles valores para indicar la velocidad.
Milisegundos: se especifica el tiempo deseado en milisegundos.
slow: la animacin ser un poco ms lenta.
fast: la animacin ser un poco ms rpida.
Easing (opcional): Especfica la velocidad del elemento en diferentes puntos de la
animacin, tiene dos valores.
linear: La animacin tiene una velocidad constante.
swing: Tiene un movimiento lento al inicio y final de la animacin, pero
su movimiento es rpido en el medio.
Callback(opcional): Ejecuta una funcin al momento de completarse el efecto
hide().
Nota: Si el efecto hide() se llama sin los parmetros, est ocultara el elemento pero no
mostrara animacin.
Ejemplo 1.
Se selecciona, se asigna un evento y se crea una funcin para todos los elementos <p>
del documento HTML
$("p").click(function(){})
Luego en la funcin se llama el efecto hide(), que ocultar los prrafos al momento de
darle click.
$(this).hide();
})
Ejemplo 2

En est ejemplo se har el mismo ejercicio pero se aplicaran todos los parmetros del
efecto hide().
Se tiene el mismo cdigo
$(this).hide();
})
Se aplicaran los siguientes parmetros .hide(velocidad,easing,callback)
$(this).hide("fast","linear",function(){
alert("termino la animacin");
});
})
La animacin ser rpida con una velocidad constante y al finalizar llamara la funcin
que imprime un mensaje de alerta.
8.1.2 Efecto show()
El efecto show() muestra los elementos seleccionados que se ocultaron a travs de
JQUERY, tambin funciona para elementos que se encuentran con display:none en CSS.
Nota: el mtodo show() no funciona con elementos que tengan la propiedad
visibility:hidden en CSS.
Sintaxis
$(selector).show(velocidad,easing,callback)
Velocidad (opcional): Indica la velocidad con la que se mostrar el elemento

show().
Nota: Si el efecto show() se llama sin los parmetros, est mostrar el elemento pero no
tendr animacin.
Ejemplo
Tomando el Ejemplo del efecto hide(), se creara un elemento <button> que mostrar
nuevamente los prrafos ocultos.
Para est ejemplo se trabajara la efecto show() con todos sus parmetros.
<button>Mostrar Prrafos</button>
<p>Hola Soy un prrafo</p>
<p>Yo soy otro prrafo</p>
<script>
$(this).hide("fast","linear");
})
$("p").show(2000,"swin",function(){
alert("termino la animacin");
})
})
</script>
8.1.3 Efecto toggle()

Est efecto detecta automticamente el estado del elemento, si se encuentra oculto
toggle() lo mostrar y si se encuentra visible toggle() lo ocultar.
Es una manera rpida de aplicar los efectos show() y hide().
Sintaxis
$(selector).toggle(velocidad,easing,callback)
Velocidad (opcional): Indica la velocidad con la que se mostrar u ocultara el
elemento seleccionado, tiene tres posibles valores para indicar la velocidad.
toggle().

Ejemplo
En el documento HTML se tiene un botn <button> y un <div> de id #cuadro que tiene
el siguiente cdigo CSS
#cuadro{
width:150px;
height:75px;
visibility:hidden;
}
Al botn se le asigna la funcin que oculte o muestre el div #cuadro, al momento de
hacer clic en el botn.

$("#cuadro").toggle("slow","linear");
})

8.2 Efectos Deslizables.
Sintaxis Descripcin
slideUp() Oculta los elementos seleccionados con una animacin
deslizante.
slideDown() Muestra los elementos seleccionados que se encuentran
ocultos con una animacin deslizante.
slideToggle() Oculta o Muestra los elementos seleccionados con una
animacin deslizante.

8.2.1 Efecto slideUp()
Oculta los elementos seleccionados aplicndole una animacin deslizante donde la
parte inferior se dirige a la superior.

Sintaxis
$(selector).slideUp(velocidad,easing,callback)
Velocidad (opcional): Indica la velocidad con la que se deslizara hacia arriba el

slideUp().
Ejemplo
En el documento HTML se tiene un div con id #cuadro con el siguiente cdigo CSS
#cuadro{
width:150px;
height:75px;
}
Luego se le asigna al div un evento de click(), que desencadenara el efecto slideUp().
$(this).slideUp()
})
Nota: a diferencia de mtodo hide(), slideUp() siempre estar animado as no tenga
ningn parmetro.
8.2.2 Efecto slideDown()
El efecto slideDown() muestra los elementos seleccionados que se ocultaron a travs de
JQUERY, tambin funciona para elementos que se encuentran con display:none en CSS.
Aplica una animacin deslizante donde el elemento se desplaza de arriba hacia abajo.

En algunos navegadores se desliza de la parte superior derecha del elemento.

Nota: el mtodo slideDown() no funciona con elementos que tengan la propiedad
Sintaxis
$(selector).slideDown(velocidad,easing,callback)
Velocidad (opcional): Indica la velocidad con la que se deslizara hacia abajo el
slideDown().
Ejemplo
Se tiene una imagen en el documento HTML con la asignacin de la siguiente
clase(class) en CSS, tambin hay prrafo con el texto Mostrar Imagen.
.foto{
display:none;
}
Luego se asigna el evento click() al prrafo, que desencadenara el efecto slideDown()
sobre la imagen con la clase foto.
$(".foto").slideDown()
})
8.2.3 Efecto slideToggle()

slideToggle() lo mostrar y si se encuentra visible slideToggle() lo ocultar.
Es una manera rpida de aplicar los efectos slideUp() y slideDown().
Sintaxis
$(selector).slideToggle(velocidad,easing,callback)
slideToggle().

Ejemplo
Se tiene una imagen en el documento HTML con la asignacin de la siguiente
clase(class) en CSS, tambin hay prrafo con el texto Clic para ver o ocultar imagen.
.foto{
display:none;
}
Luego se asigna el evento click() al prrafo, que desencadenara el efecto slideToggle()
sobre la imagen con la clase foto.
$(".foto").slideToggle()
})

8.3 Efectos Desvanecidos
Sintaxis Descripcin
fadeOut() Oculta los elementos seleccionados con una animacin de
desvanecido con una opacidad.
fadeIn() Muestra los elementos seleccionados que se encuentran
ocultos con una animacin donde el elemento aparecer poco
a poco desde una trasparencia.
fadeTo() Cambia la transparencia de un elemento seleccionado hasta
una opacidad especfica.
fadeToggle() Oculta o Muestra los elementos seleccionados con una
animacin de desvanecido.

8.3.1 Efecto fadeOut()
Oculta los elementos seleccionados con una animacin donde el elemento se ir
desvaneciendo hasta llegar a una opacidad de cero.

Sintaxis
$(selector). fadeOut(velocidad,easing,callback)
Velocidad (opcional): Indica la velocidad con la que se desvanecer el elemento
fadeOut().
Ejemplo

En el documento HTML se tiene una imagen, a est se le asignara el evento click que
desencadenara el efecto fadeOut().
$("img").click(function(){
$(this).fadeOut(function(){
alert("fin de la animacin");
})
})
8.3.2 Efecto fadeIn()
Muestra los elementos seleccionados que se encuentran ocultos con una animacin
donde el elemento aparecer poco a poco desde una trasparencia.

Nota: el mtodo fadeIn() no funciona con elementos que tengan la propiedad
Sintaxis
$(selector). fadeIn(velocidad,easing,callback)
Velocidad (opcional): Indica la velocidad con la que aparecer el elemento
fadeIn().

Ejemplo
Se tiene una imagen y dos prrafo en el documento HTML, uno de los prrafos y la
imagen tienen asignada la siguiente clase (class ) .invisible
Cdigo CSS
.invisible{
display:none;
}
Cdigo HTML
<p class="mostrar">Mostrar Imagen</p>
<img class="invisible" src="image02.jpg" alt="foto" />
<p class="invisible">Ocultar Imagen</p>
Luego se asigna el evento click a los elementos, uno de ellos tendr una funcin para
ocultar fadeOut() y otro para mostrar fadeIn().
$(".mostrar").click(function(){
$(".invisible").fadeIn()
})
$(".invisible").click(function(){
$(".invisible").fadeOut()
})
8.3.3 Efecto fadeTo()
Cambia gradualmente la opacidad de un elemento hasta donde lo indique el parmetro
de la funcin.

Sintaxis
$(selector).fadeTo(velocidad,opacidad,easing,callback
)
Velocidad (obligatorio): Indica la velocidad con la que aparecer el elemento
Opacidad (obligatorio): Est parmetro especifica a que valor de opacidad debe
ir la animacin, los valores estn en 0.00(trasparente) y 1 (totalmente visible).
fadeTo().

Ejemplo
Se tiene una imagen y dos prrafos con clases diferentes en el documento HTML.
<p class=completo>Opacidad 100%</p>
<p class=medio>Opacidad 50%</p>
<img src="image02.jpg" alt="foto" />
Luego se les asigna un evento click() a los prrafos que desencadenarn la animacin de
fadeTo(), cada prrafo mostrara un valor diferente.

$(".completo").click(function(){
$("img").fadeTo("fast",1);
})
$(".medio").click(function(){
$("img").fadeTo("fast",0.5);
})
8.3.4 Efecto fadeToggle()
fadeToggle() lo mostrar y si se encuentra visible fadeToggle() lo ocultar.
Es una manera rpida de aplicar los efectos fadeOut() y fadeIn ().
Sintaxis
$(selector).fadeToggle(velocidad,easing,callback)
fadeToggle().
Ejemplo
Se tiene dos elementos div en el documento HTML, a estos se le aplican los siguientes
estilos CSS.
#cuadro{
width:300px;

height:20px;
background-color:#036;
border:#0FF solid 1px;
color:#FFF;
}
#cuadroContenido{
color:#FFF;
width:250px;
height:50px;
padding:25px;
border:#0FF solid 1px;
border-top:0xp;
text-align:center; }
Cdigo HTML
<div id="cuadro">Ocultar o Mostar</div>
<div id="cuadroContenido">JQUERY es de mis librerias
web preferidas</div>
Luego se asigna el evento click() al div con id #cuadro, est desencadenar la funcin
que aplicar el efecto fadeToggle() sobre el div con id #cuadroContenido.
$("#cuadroContenido").fadeToggle();
})
8.4 Efectos Custom
Sintaxis Descripcin

animate() Realiza animaciones personalizadas a un conjunto de
propiedades CSS.
stop() Detienen las animaciones que se estn ejecutando en el
delay() Este mtodo aplica un retraso de tiempo en las animaciones
que estn en cola.
queue() Muestra cuantas funciones de animacin sern ejecutadas en
el elemento seleccionado.

8.4.1 Efecto animate()
Est mtodo animate() cambia un elemento de un estado a otro a travs de la
modificacin de los estilos CSS, el valor de las propiedades CSS cambia poco a poco para
crear un efecto animado.
Con animate() solo puede animar los valores numricos de las propiedades (como
width:30px;) no puede animar valores de tipo cadena (text-align:center;).
Sintaxis principal.
$(selector).animate({CSS},velocidad,easing,callback);
CSS(obligatorio): este campo especifica una o ms propiedades CSS que sern
animadas en el elemento seleccionado.
Para declarar varias propiedades CSS se deben separar por comas(,)
{width:150, height:400, propiedadX:valorX}.
En JQUERY las propiedades CSS que contienen dos palabras se deben
escribir en la denominada escritura de camello, es decir se debe eliminar
el guin que divide las palabras en CSS (margin-top) y poner en
mayscula la primera letra de la segunda palabra (marginTop).
Velocidad (opcional): Indica la velocidad con la que se animara la transicin de
las propiedades CSS.

Callback(opcional): Ejecuta una funcin al momento de completarse la
animacin.
Ejemplo
Se tienen dos botones y un elemento div con id #cuadro en el documento HTML.
Cdigo CSS
#cuadro{
width:90px;
height:90px;
color:#FFF;
margin:10px;
}
Cdigo HTML
<button id="btn1">Animacin 01</button>
<div id="cuadro"></div>
Luego se asigna el evento click() a los botones, estos desencadenarn las funciones que
aplicaran el efecto animate() sobre el div con id #cuadro.
$("#btn1").click(function(){
$("#cuadro").animate({width:150,height:400},500,"linear");
})
$("#cuadro").animate({width:500,height:90},1500,"swing");
})
Sintaxis Alterna de animate()

$(selector).animate({CSS},{opciones})
CSS(obligatorio): Se trabaja de igual manera que en la sintaxis anterior;
Opciones(opcional): Se especifican otra serie de propiedades que ayudaran a la
personalizacin de la animacin (no es necesario aplicar todas las opciones).
duration: indica la duracin de la animacin.
easing: Modifica la velocidad durante la animacin.
complete: Llama una funcin finalizada la animacin.
step: Especifica una funcin que se llama en cada paso de la animacin.
queue: un valor booleano que especifica si se debe o no poner al final de la
animacin otras sentencias de animate().
True: la animacin se ejecutar lnea por lnea del cdigo.
False: la animacin reproduce todas las lneas del cdigo de
manera simultnea.
specialEasing: Funciones especiales de CSS para aplicar ms efectos de
easing a la animacin.

Ejemplo
Se tiene el mismo cdigo HTML y CSS que en el ejemplo anterior, se cambiara la forma
de aplicar animate() con la nueva sintaxis.
Nota: la opcin queue tendr el valor verdadero en la animacin 1 y falso en la animacin 2
para observar la diferencia.
Cdigo CSS
#cuadro{
width:90px;
height:90px;
color:#FFF;
margin:10px;
}

Cdigo HTML
<div id="cuadro"></div>
Luego se asigna el evento click() a los botones, estos desencadenarn las funciones que
aplicaran el efecto animate() con nuevas opciones sobre el div con id #cuadro.
Nota: la forma de tabulacin del cdigo en este ejemplo ha cambiado, por favor analizar
donde se abren y se cierran las sentencias adems de esto observar en qu lugares se
ubican las comas (,) segn la programacin de JQUERY.
$("#cuadro").animate(
{
width:"95%"
},
{
queue:true,
duration:2000
})
.animate({fontSize:"34px"},1500)
.animate({height:"50%" },1500);
})
$("#cuadro").animate(
{
width:"50%"
},

{
queue:false,
duration:4000,
})
.animate({fontSize:"50px"},1500)
.animate({height:"10%"},1500);
})
Lista de propiedades CSS que pueden ser animadas en JQUERY.
backgroundPositionX
backgroundPositionY
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
opacity
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent

Nota: JQUERY Constantemente se actualiza para incluir ms propiedades CSS a animar, recuerde
estar consultando constante mente en la web.
8.4.2 Efecto stop()
Detiene todas las animaciones que se estn ejecutando de los elementos seleccionados.
Sintaxis
$(selector).stop(stopAll,goToEnd)

stopAll(opcional):es un valor Booleano (true o false) que especifica si debe o no
detener las animaciones de cola, si el valor es true no seguir reproduciendo
ms animaciones que estn relacionada con el selector.(el valor por defecto es
false).
goToEnd(opcional):es un valor Booleano (true o false) que especifica si el
elemento seleccionado debe llegar al final de la animacin, si el valor es true la
animacin har un salto hasta el final de la animacin y se detendr.(el valor por
defecto es false).

Ejemplo
En el documento HTML se tiene un div con id #cuadro y un botn con id #detener.
Cdigo CSS
#cuadro{
width:90px;
height:90px;
color:#0F0;
margin:10px;
}
Cdigo HTML
<button id="detener">Stop</button>
<div id="cuadro">Click Me!</div>
Luego se asigna el evento click() a los elementos, uno desencadenar la animacin y el
otro lo detendr.
$("#detener").click(function(){
$("#cuadro").stop(true,true);
})

$("#cuadro").animate({height:'300px',opacity:0.5},"slow
");
$("#cuadro").animate({width:'300px',opacity:1},"slow");
$("#cuadro").animate({height:'90px',opacity:0.5},"slow"
);
$("#cuadro").animate({width:'90px',opacity:1},"slow");
})
Nota: Prueba cambiar los valores de stop().
8.4.3 Efecto delay()
Establece un temporizador que retrasa la animacin que esta por ejecutarse.
$(selector).delay(velocidad,nombreDeCola)
Velocidad (opcional): Indica el tiempo que se debe esperar para ejecutar la
siguiente animacin.
nombreDeCola(opcional): especifica el nombre de cola, el valor por defecto es
"fx" que la cola de efectos estndar de JQUERY.
Ejemplo 1
Se tienen dos elementos div en el documento HTML, los dos tendrn el mismo efecto
pero a uno de ellos se le aplicara el mtodo delay() con un retraso de 3 segundo (3000
milisegundos).
<style type="text/css">
.cuadro1{
width:90px;
height:90px;
color:#0F0;

margin:5px;
position:absolute;
}
.cuadro2{
width:90px;
height:90px;
color:#0F0;
margin:5px;
position:absolute;
left:110px;
}
</style>
<script src="jquery-1.8.3.min.js"></script>
</head>
<body>
<button id="Reproducir">Play</button>
<div class="cuadro1">Con delay</div>
<div class="cuadro2">Sin delay</div>
<script>
$("#Reproducir").click(function(){
$(".cuadro1").fadeOut().delay(3000).fadeIn()
$(".cuadro2").fadeOut().fadeIn()
})

</script>
Ejemplo 2
Se tienen 3 elementos div y un botn en el documento HTML, se le asigna al botn un
evento de click que desencadenara unas animaciones con delay().
Cdigo CSS
.cuadro1,.cuadro2,.cuadro3{
width:90px;
height:90px;
color:#0F0;
margin:5px;
}
Cdigo HTML
<button id="Reproducir">Play</button>
<div class="cuadro1">1</div>
Cdigo JQUERY
$("#Reproducir").click(function(){
$(".cuadro1").delay(2500).fadeOut("slow")
})

8.4.4 Mtodo queue()
Una cola es una funcin o ms en espera de ser ejecutados.
El mtodo queue() muestra las funciones que estn en cola esperando a ser ejecutados
segn el elemento seleccionado.
Sintaxis
$(selector).queue(nombreDeCola);
nombreDeCola(opcional): especifica el nombre de cola, por defecto estn los
efectos de cola segn el orden de escritura.
Ejemplo
Se tiene un div con id #cuadro en el documento HTML, con el siguiente cdigo CSS
#cuadro{
width:90px;
height:90px;
color:#0F0;
margin:10px;
}
Luego se le asigna al div un evento de click(), que ejecutara una animacin tambin se
imprimir en el div el nmero de funciones a ejecutar con ayuda del mtodo queue().
$("#cuadro").animate({height:'300px'},"slow");
$("#cuadro").animate({width:'300px'},"slow");
$("#cuadro").animate({height:'90px'},"slow");
$("#cuadro").animate({width:'90px'},"slow");

var numerodeColas = $("#cuadro").queue();
$("#cuadro").html(numerodeColas.length);
///el valor ser 4
})
8.5 Mtodos complementarios para crear efectos JQUERY.
Le invito a investigar sobre las siguientes funciones de efectos que le ayudarn en su
desempeo como desarrollador web.
Sintaxis Descripcin
dequeue() Ejecuta la siguiente funcin en cola del elemento seleccionado.
clearQueue() Remueve todos los elementos en cola que no se han
ejecutado.
jQuery.fx.interval Esta funcin puede manipular el nmero de frames por
segundo en los que trabaja JQUERY.
jQuery.fx.off Controla de manera global con un valor booleano si JQUERY
reproduce los efectos o no.

9. Bibliografia
http://www.w3schools.com/jquery/
http://api.jquery.com/
Revisin, Preparacin y Compilacin por: Santiago Catao Arango Instructor
Multimedia Centro de Servicios y Gestin Empresarial- santiagok986@misena.edu.co

Principios JQUERY PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Principios JQUERY PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Contenido

S-ar putea să vă placă și