Manual de JQuery

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Manual de jQuery
El manual de jQuery pretende explicar el popular framework Javascript jQuery, con el que
podremos hacer aplicaciones web avanzadas del lado del cliente.
Autores del manual
Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com
http://www.desarrolloweb.com
(43 captulos)
Manual de jQuery: www.desarrolloweb.com/manuales/manual-jquery.html
!os manuales de DesarrolloWeb.com tienen el cop"right de sus autores. #o reproducir sin autorizaci$n.
1
Parte 1:
Introduccin a jQuery
%omenzamos por los captulos m&s b&sicos sobre '(uer") *ue sir+en para introducirnos
en el desarrollo de una manera sencilla. ,ablaremos sobre la metodologa de traba'o
con el -ramewor. /a+ascript de manera general.
1.1.- Introduccin a jQuery
Qu es jQuery, para qu sirve y qu ventajas tiene el utilizar este framework Javascript.
Bienvenidos al manual sobre jQuery que vamos a publicar en DesarrolloWeb.com, con el que pretendemos clarificar a los
usuarios el mtodo de trabajo y programacin de aplicaciones del lado del cliente, compatibles con todos los navegadores
ms comunes.
1.1.1.- Qu es jQuery
ara simplificar, podr!amos decir que jQuery es un frame"or# $avascript, pero qui%s muc&os de los lectores se preguntarn
qu es un frame"or#. ues es un producto que sirve como base para la programacin avan%ada de aplicaciones, que aporta
una serie de funciones o cdigos para reali%ar tareas &abituales. or decirlo de otra manera, frame"or# son unas librer!as de
cdigo que contienen procesos o rutinas ya listos para usar. 'os programadores utili%an los frame"or#s para no tener que
desarrollar ellos mismos las tareas ms bsicas, puesto que en el propio frame"or# ya &ay implementaciones que estn
probadas, funcionan y no se necesitan volver a programar.
Nota:si no sabes lo que es $avascript seguramente no te interesar este art!culo, pero puedes aprenderlo tambin en DesarrolloWeb.com( Qu
es $avascript
or ejemplo, en el caso que nos ocupa, jQuery es un frame"or# para el lenguaje $avascript, luego ser un producto que nos
simplificar la vida para programar en este lenguaje. )omo probablemente sabremos, cuando un desarrollador tiene que
utili%ar $avascript, generalmente tiene que preocuparse por &acer scripts compatibles con varios navegadores y para ello tiene
que incorporar muc&o cdigo que lo *nico que &ace es detectar el bro"ser del usuario, para &acer una u otra cosa
dependiendo de si es +nternet ,-plorer, .irefo-, /pera, etc. jQuery es donde ms nos puede ayudar, puesto que implementa
una serie de clases 0de programacin orientada a objetos1 que nos permiten programar sin preocuparnos del navegador con
el que nos est visitando el usuario, ya que funcionan de e-acta forma en todas las plataformas ms &abituales.
2s! pues, este frame"or# $avascript, nos ofrece una infraestructura con la que tendremos muc&a mayor facilidad para la
creacin de aplicaciones complejas del lado del cliente. or ejemplo, con jQuery obtendremos ayuda en la creacin de
interfaces de usuario, efectos dinmicos, aplicaciones que &acen uso de 2ja-, etc. )uando programemos $avascript con
jQuery tendremos a nuestra disposicin una interfa% para programacin que nos permitir &acer cosas con el navegador que
estemos seguros que funcionarn para todos nuestros visitantes. 3implemente debemos conocer las librer!as del frame"or# y
programar utili%ando las clases, sus propiedades y mtodos para la consecucin de nuestros objetivos.
2dems, todas estas ventajas que sin duda son muy de agradecer, con jQuery las obtenemos de manera gratuita, ya que el
frame"or# tiene licencia para uso en cualquier tipo de plataforma, personal o comercial. ara ello simplemente tendremos
que incluir en nuestras pginas un script $avascript que contiene el cdigo de jQuery, que podemos descargar de la propia
pgina "eb del producto y comen%ar a utili%ar el frame"or#.
2
,l arc&ivo del frame"or# ocupa unos 45 6B, lo que es bastante ra%onable y no retrasar muc&o la carga de nuestra pgina
0si nuestro servidor env!a los datos comprimidos, lo que es bastante normal, el peso de jQuery ser de unos 78 6B1.
2dems, nuestro servidor lo enviar al cliente la primera ve% que visite una pgina del sitio. ,n siguientes pginas el cliente
ya tendr el arc&ivo del frame"or#, por lo que no necesitar transferirlo y lo tomar de la cac&. )on lo que la carga de la
pgina slo se ver afectada por el peso de este frame"or# una ve% por usuario. 'as ventajas a la &ora de desarrollo de las
aplicaciones, as! como las puertas que nos abre jQuery compensan e-traordinariamente el peso del paquete.
1.1.2.- Ventajas de jQuery con respecto a otras alternativas
,s importante comentar que jQuery no es el *nico frame"or# que e-iste en el mercado. ,-isten varias soluciones similares
que tambin funcionan muy bien, que bsicamente nos sirven para &acer lo mismo. )omo es normal, cada uno de los
frame"or#s tiene sus ventajas e inconvenientes, pero jQuery es un producto con una aceptacin por parte de los
programadores muy buena y un grado de penetracin en el mercado muy amplio, lo que &ace suponer que es una de las
mejores opciones. 2dems, es un producto serio, estable, bien documentado y con un gran equipo de desarrolladores a
cargo de la mejora y actuali%acin del frame"or#. /tra cosa muy interesante es la dilatada comunidad de creadores de
plugins o componentes, lo que &ace fcil encontrar soluciones ya creadas en jQuery para implementar asuntos como
interfaces de usuario, galer!as, votaciones, efectos diversos, etc.
9no de los competidores de jQuery, del que &emos publicado ya en DesarrolloWeb.com un amplio manual para
programadores, es :ootools, que tambin posee ventajas similares. /s dejo el enlace al :anual de :ootools, que tambin
puede ser interesante, porque seguramente lo tengamos e-plicado con mayor detalle que jQuery.
1.1..- jQuery! es para mi"
3i ests interesado en enriquecer tu pgina "eb con componentes de la llamada Web ;.<, como efectos dinmicos, 2ja-,
interaccin, interfaces de usuario avan%adas, etc., jQuery es una &erramienta imprescindible para desarrollar todas estas
cosas sin tener que complicarte con los niveles ms bajos del desarrollo, ya que muc&as funcionalidades ya estn
implementadas, o bien las librer!as del frame"or# te permitirn reali%ar la programacin muc&o ms rpida y libre de
errores.
2&ora bien, todas estas mejoras de la "eb ;.<, que en un principio puede ser muy atractivas, tambin tienen un coste en
tiempo de desarrollo de los proyectos. 3in un frame"or# como jQuery, el tiempo de creacin y depuracin de todos esos
componentes dinmicos ser!a muc&o mayor, pero aun as! nadie dice que todo sea instalar el sistema y empe%ar correr. 3in
embargo, lo ms complicado de jQuery es aprender a usarlo, igual que pasa con cualquier otro frame"or# $avascript.
=equerir del desarrollador &abilidades avan%adas de programacin, as! como el conocimiento, al menos bsico, de la
programacin orientada a objetos. 9na ve% aprendido las ventajas de utili%arlo compensarn ms que de sobra el esfuer%o.
,speramos que con este :anual de jQuery, que vamos a publicar en DesarrolloWeb.com puedas aprender lo necesario para
desarrollar tus propios componentes dinmicos en $avascript con los que enriquecer tus aplicaciones.
or otra parte publicaremos art!culos con ejemplos prcticos de $Query que iremos colocando en nuestro taller de $Query,
para aquellos que ya tengan conocimientos en esta materia.
2dems tenemos un >ideotutorial de jQuery con una coleccin de v!deos para aprender paso a paso el popular frame"or#
$avascript.
odemos conocer jQuery accediendo a la pgina de inicio del frame"or# $avascript( &ttp(??jquery.com?
Artculo por Miguel Angel Alvarez
1.2.- #emo muy simple de uso de jQuery
!amos a hacer nuestro primer script en jQuery, con unas funcionalidades muy simples, para que sirva de
demo de uso de este framework.
)on objetivo de que los lectores puedan &acerse una rpida idea de las posibilidades de jQuery, escribiendo unas brev!simas
3
l!neas de cdigo $avascript, vamos a publicar un par de ejemplos bien simples que nos ilustren, pero sin complicarnos
demasiado. @os servirn para la introduccin a jQuery que estamos publicando en el :anual de jQuery.
'a idea de este art!culo no es e-plicar las funcionalidades que vamos a demostrar, sino ver el poco cdigo que &emos tenido
que escribir para reali%ar unos scripts con dinamismos sencillos. Qui%s los scripts en si no digan muc&o a un lector poco
e-perimentado, pero los que ya &an tenido contacto con los pormenores que &ay que seguir para &acer estos efectos, de
manera que sean compatibles con todos los navegadores, sabrn que jQuery nos &a simplificado muc&o nuestra tarea.
2s! pues, no te preocupes demasiado con los detalles de estos cdigos, que los e-plicaremos en DesarrolloWeb.com ms
adelante con detalle.
1.2.1.- #emo 1 de jQuery
ara empe%ar vamos a ver este ejemplo, donde tenemos dos botones y un te-to. 2l pulsar un botn, cambiaremos el te-to y
al pulsar el otro pondremos otro te-to distinto.
odemos ver el ejemplo en marc&a en una pgina aparte.
,n este ejemplo tenemos una capa que tiene este cdigo
<div id="capa" style="padding: 10px; background-color: #ff8800"!a" clic en un bot#n<$div
'uego tenemos dos botones con estos cdigos(
<input type="button" value="%ot#n &" onclick="'()#capa)*+,t-l()!as ,ec,o clic en el bot#n
<b&<$b)*"
<input type="button" value="%ot#n %" onclick="'()#capa)*+,t-l().ecibido un clic en el bot#n
<b%<$b)*"
)omo se puede ver, en los botones &ay definidos un par de eventos onclic# 0uno en cada uno1 que ejecutan una instruccin
$avascript cuando se &ace clic sobre ellos. 'a instruccin est en $avascript, pero &ace uso de algunas &erramientas
disponibles en jQuery para trabajo con los elementos de la pgina. ,n este caso, por e-plicarlo rpidamente, se &ace una
seleccin del elemento D+> de la capa y luego se ejecuta un mtodo sobre l para cambiar el contenido AB:' del
elemento.
1.2.2.- #emo 2 de jQuery
,n este otro ejemplo vamos a ver algo un poquito ms complejo. Bueno, realmente no tiene muc&a mayor complejidad,
pero estamos utili%ando jQuery de una manera un poco distinta, que requiere algo ms de cdigo por nuestra parte. 2&ora
vamos a tener dos capas en nuestra pgina. 9na capa estar siempre visible y otra capa aparecer inicialmente oculta y la
vamos a mostrar u ocultar dependiendo de si el usuario coloca el ratn encima de la capa que est siempre visible.
ara &acerse una idea e-acta de nuestro ejemplo puedes verlo en una ventana aparte.
,n este segundo ejemplo tenemos este cdigo AB:', con las dos capas.
<div id="capa" style="padding: 10px; background-color: #ff8800;"/on el rat#n enci-a de esta
capa<$div
<br
<div id="-ensa0e" style="display: none;"!as puesto el rat#n enci-a11 <br(&,ora 2u3talo de la
capa*<$div
2&ora vamos a tener un cdigo $avascript con jQuery que defina los eventos del usuario, para cuando sit*a el ratn dentro o
fuera de la primera capa.
'("#capa"*+-ouseenter(function(evento*4
'("#-ensa0e"*+css("display"5 "block"*;
6*;
'("#capa"*+-ouseleave(function(evento*4
'("#-ensa0e"*+css("display"5 "none"*;
6*;
De esta sencilla manera, &emos creado dos eventos en el D+> con idCDcapaD. 2dems, &emos definido el cdigo de los
eventos por medio de funciones, que se encargarn de mostrar o ocultar la segunda capa con idCDmensajeD.
4
'("#-ensa0e"*+css("display"5 "block"*;
,sto nos selecciona la capa con id DmensajeD y con el mtodo css01 indicamos que queremos cambiar el atributo DdisplayD al
valor Dbloc#D de ese elemento.
'("#-ensa0e"*+css("display"5 "none"*;
,sta otra l!nea muy similar, simplemente cambia el DdisplayD a DnoneD para ocultar el elemento.
,speramos que estos dos ejemplos te &ayan servido para ver rpidamente algunas cosas que se pueden &acer con jQuery
con muy poco esfuer%o y que funcionan en todos los navegadores.
1..- $asos para utilizar jQuery en tu p%gina &e'
"na descripci#n de la puesta en marcha de tu primer script jQuery, en tu propia p$%ina web, paso a paso.
,n este art!culo te vamos a e-plicar cmo comen%ar a utili%ar jQuery en tus pginas "eb, paso a paso, para que puedas &acer
tu primer script jQuery y as! comprender los fundamentos de uso de este frame"or# $avascript. ,n este punto estar!a bien
que sepas lo que es jQuery, lo que &a sido e-plicado ya en el :anual de jQuery que venimos publicando en
DesarrolloWeb.com.
'a idea es que puedas ir &aciendo t* mismo los pasos que vamos a relatar, para que compruebes t* mismo lo sencillo que es
comen%ar a utili%ar jQuery. ,ste art!culo sigue el esquema con el que los propios creadores de jQuery enseEan a utili%ar su
producto, as! que est directamente inspirado en la documentacin de jQuery.
Vdeo: Bodo el proceso de creacin de un primer ejemplo con jQuery relatado en este art!culo lo &emos grabado en el videotutotial
comen%ar a programar con jQuery.
1..1.- #escarga la (ltima versin del )rame&or*
2ccede a la pgina de jQuery para descargar la *ltima versin del frame"or#. ,n el momento de escribir este art!culo la
release actual es la 7.F.;, y con la que &emos reali%ado estos ejemplos. 3in embargo, puede que &aya publicado una nueva
versin que mejore la actual.
Dan dos posibilidades para descargar, una que le llaman =/D9)B+/@, que es la adecuada para pginas "eb en
produccin, puesto que est minimi%ada y ocupa menos espacio, con lo que la carga de nuestro sitio ser ms rpida. 'a otra
posibilidad es descargar la versin que llaman D,>,'/:,@B, que est con el cdigo sin comprimir, con lo que ocupa
ms espacio, pero se podr leer la implementacin de las funciones del frame"or#, que puede ser interesante en etapa de
desarrollo, porque podremos bucear en el cdigo de jQuery por si tenemos que entender alg*n asunto del trabajo con el
frame"or#.
>ers que la descarga es un arc&ivo js que contiene el cdigo completo del frame"or#. )oloca el arc&ivo en una carpeta en
tu ordenador para &acer las pruebas.
1..2.- +rea una p%gina ,-M. simple
2&ora, en el mismo directorio donde &as colocado el arc&ivo js, coloca un arc&ivo &tml con el siguiente cdigo.
<,t-l
<,ead
<script src="02uery-1+7+8+-in+0s" type="text$0avascript"<$script
<script
<$script
<$,ead
5
<body
<a ,ref=",ttp:$$999+desarrollo9eb+co-$":esarrollo;eb+co-<$a
<$body
<$,t-l
)omo podrs ver, es una pgina bien simple, en la que tenemos una llamada a un script e-terno llamado jqueryG7.F.;.min.js.
,ste es el cdigo de jQuery que &emos descargado de la pgina del frame"or#. 3i &as descargado una versin distinta,
qui%s el arc&ivo se llame de otra manera, as! que es posible que tengas que editar ese nombre de arc&ivo para colocar el que
tengas en el directorio.
)on ese script ya &emos incluido todas las funciones de jQuery dentro de nuestra pgina. 3lo tienes que prestar atencin a
que tanto el arc&ivo .&tml de esta pgina, como el arc&ivo .js del frame"or# estn en el mismo directorio. H, como dec!a, que
el arc&ivo que incluimos con la etiqueta 3)=+B sea el .js que nosotros &emos descargado.
2dems, como se puede ver, &emos dejado dentro del A,2D una etiqueta 3)=+B de apertura y cierre que est vac!a.
Bodo el cdigo que vamos a e-plicar a continuacin tendrs que colocarlo en dentro de esa etiqueta.
1...- /jecutar cdigo cuando la p%gina 0a sido cargada
,l paso que vamos a e-plicar a&ora es importante que se entienda, aunque sin lugar a dudas a lo largo del manual publicado
en DesarrolloWeb.com, lo veremos &asta la saciedad. 3e trata de detectar el momento en que la pgina est lista para recibir
comandos $avascript que &acen uso del D/:.
)uando &acemos ciertas acciones complejas con $avascript tenemos que estar seguros que la pgina &aya terminado de
cargar y est lista para recibir comandos $avascript que utilicen la estructura del documento con el objetivo de cambiar cosas,
como crear elementos, quitarlos, cambiar sus propiedades, etc. 3i no esperamos a que la pgina est lista para recibir
instrucciones corremos un alto riesgo de obtener errores de $avascript en la ejecucin.
,n el taller de programacin con el D/: de $avascript &emos podido e-plicar que es el D/: y la importancia de reali%ar
acciones slo cuando el D/: est listo. ero si no queremos entretenernos con la lectura de este te-to, sirve con saber que,
cuando queremos &acer acciones con $avascript que modifiquen cualquier cosa de la pgina, tenemos que esperar a que la
pgina est lista para recibir esos comandos.
Ieneralmente, cuando se desea ejecutar $avascript despus de la carga de la pgina, si no utili%amos ning*n frame"or#, lo
ms normal ser utili%ar un cdigo como este(
9indo9+onload = function (* 4
alert("cargado+++"*;
6
ero esta sentencia, que carga una funcionalidad en el evento onload del objeto "indo", slo se ejecutar cuando el
navegador &aya descargado completamente B/D/3 los elementos de la pgina, lo que incluye imgenes, iframes, banners,
etc. lo que puede tardar bastante, dependiendo de los elementos que tenga esa pgina y su peso.
ero en realidad no &ace falta esperar todo ese tiempo de carga de los elementos de la pgina para poder ejecutar sentencias
$avascript que alteren el D/: de la pgina. 3lo &abr!a que &acerlo cuando el navegador &a recibido el cdigo AB:'
completo y lo &a procesado al renderi%ar la pgina. ara ello, jQuery incluye una manera de &acer acciones justo cuando ya
est lista la pgina, aunque &aya elementos que no &ayan sido cargados del todo. ,sto se &ace con la siguiente sentencia.
'(docu-ent*+ready(function(*4
$$c#digo a e0ecutar cuando el :<= est> listo para recibir instrucciones+
6*;
or dar una e-plicacin a este cdigo, digamos que con J0document1 se obtiene una referencia al documento 0la pgina "eb1
que se est cargando. 'uego, con el mtodo ready01 se define un evento, que se desata al quedar listo el documento para
reali%ar acciones sobre el D/: de la pgina.
1..1.- Insertar un manejador de evento a la eti2ueta A 3enlace4 2ue 0ay en la p%gina
2&ora que ya sabemos cmo y cuando debemos ejecutar las acciones de jQuery que alteren la funcionalidad, contenidos o
aspecto de la pgina, podemos insertar un poco de cdigo para demostrar el mtodo de trabajo con jQuery.
ara este primer ejemplo vamos a crear un evento clic# en el enlace, para mostrar un mensaje cuando se &aga clic sobre el
6
lin#. ara crear un evento clic# sobre un elemento tenemos que invocar al mtodo clic# sobre ese elemento y pasarle como
parmetro una funcin con el cdigo que queremos que se ejecute cuando se &ace clic.
'("a"*+click(function(evento*4
$$a2u3 el c#digo 2ue se debe e0ecutar al ,acer clic
6*;
)omo vemos en el cdigo anterior, con J0DaD1 obtenemos una referencia al enlace. Bueno, en realidad con ello estamos
estamos seleccionando todas las etiquetas 2 0enlaces1 del documento, pero como slo &ay un enlace, en realidad nos vale.
'uego, el mtodo clic#01 del sobre J0DaD1 estamos definiendo un evento, que se ejecutar cuando se &aga clic sobre el enlace.
)omo se puede ver, al mtodo clic# se le pasa una funcin donde se debe poner el cdigo $avascript que queremos que se
ejecute cuando se &aga clic sobre el enlace.
2&ora veamos la definicin del evento clic completa, colocada dentro del evento ready del document, para que se asigne
cuando la pgina est lista.
alert("!as pulsado el enlace+++n&,ora ser>s enviado a :esarrollo;eb+co-"*;
6*;
6*;
or l!neas, esto es una recapitulacin de lo que &emos &ec&o(
,sta l!nea sirve para &acer cosas cuando la pgina est lista para recibir instrucciones jQuery que modifiquen el D/:.
)on esta l!nea estamos seleccionando todas las etiquetas 2 del documento y definiendo un evento clic# sobre esos
elementos.
)on esta l!nea simplemente mostramos un mensaje de alerta informando al usuario que se &a &ec&o clic sobre el enlace.
1..5.- 6uarda el arc0ivo 0tml y %'relo en un navegador
9na ve% que tenemos &ec&o nuestra primera pgina con jQuery, la puedes guardar y ejecutarla en un navegador. rueba
&acer clic en el enlace y deber!a salirte la ventana de alerta.
uedes ver este script en funcionamiento en una pgina aparte.
Ha est &ec&o y funcionando tu primer script con jQueryK
or si acaso quedaron dudas, dejamos aqu! el cdigo completo que deber!as tener(
<,t-l
<,ead
<title/ri-er script con 0?uery<$title
<script
6*;
6*;
<$script
<$,ead
<body
<a ,ref=",ttp:$$999+desarrollo9eb+co-"@r a :esarrollo;eb+co-<$a
<$body
<$,t-l
7
1..7.- /8tra9 :lo2uear el comportamiento normal de un enlace
2&ora veamos una pequeEa modificacin para alterar el comportamiento por defecto de los enlaces. )omo sabemos,
cuando se pulsa un enlace nos lleva a una 9='. 'uego al &acer clic#, primero se ejecuta lo que &ayamos colocado en el
evento clic# del enlace y luego el enlace lleva al navegador a una nueva 9='.
,ste comportamiento se puede bloquear tambin desde jQuery, aEadiendo una llamada al mtodo preventDefault01 sobre el
evento. 3i te fijas, la funcin definida para marcar el comportamiento del evento clic# sobre el enlace recib!a un parmetro.
,se parmetro es un manejador de evento. H tiene sus propios mtodos y propiedades, como este preventDefault01 que
comentbamos. 3u uso es el siguiente(
alert("!as pulsado el enlace5 pero va-os a cancelar el evento+++n/or tanto5 no va-os a
llevarte a :esarrollo;eb+co-"*;
evento+prevent:efault(*;
6*;
6*;
)omo &emos podido ver invocando a evento.preventDefault01 lo que conseguimos en este caso es que el lin# no lleve a
ning*n sitio, simplemente se ejecutar el cdigo $avascript contenido para el evento clic#.
1.1.- :%sicos jQuery9 a;adir y 2uitar clases +<< so're elementos
&tro ejemplo b$sico con jQuery, para mostrar c#mo se pueden a'adir y quitar clases ()) a elementos de
la p$%ina, bajo respuesta de eventos de usuario.
ara ir acostumbrndonos al trabajo con el frame"or# $avascript jQuery vamos a seguir &aciendo ejemplos simples de
funcionamiento, que vamos a e-plicar en la medida de las posibilidades con lo que &emos conocido &asta a&ora en el
:anual de jQuery.
)laro que estos ejercicios son un poco especiales, dado que sirven para ilustrar el modo de trabajo con jQuery, pero sin
e-plicar todos los detalles relacionados con el uso del frame"or#. or que de momento lo que queremos es mostrar una
introduccin al sistema y mostrar por encima algunas de sus posibilidades. ,n el futuro publicaremos art!culos que irn poco
a poco e-plicando todos los detalles de trabajo con jQuery.
,n el caso que nos ocupa, queremos demostrar el uso de jQuery para alterar elementos de una pgina "eb, aEadiendo y
quitando clases )33. ,sto es bien simple, porque en jQuery los elementos tienen dos clases llamadas add)lass01 y
remove)lass01, que sirven justamente para que el elemento que recibe el mtodo se le aplique una clase )33 o se le elimine.
2s! que lo que vamos a aprender, con respecto al art!culo anterior Gasos para utili%ar jQueryG, es utili%ar esos nuevos
mtodos de los elementos.
ara complicarlo slo un poco ms, vamos a aEadir y quitar clases del elemento con respuesta a acciones del usuario, para
aprender tambin nuevos eventos de usuario.
,n nuestro ejemplo vamos a tener dos elementos. rimero una capa D+> con un te-to. Despus tendremos un enlace que
estar fuera de la capa D+>. 2l situar el usuario el ratn sobre un enlace aEadiremos una clase )33 a la capa D+> y al retirar
el ratn del enlace eliminaremos la class )33 que &ab!amos aEadido antes. 3i se desea, para aclarar el caso de nuestro
ejemplo, podemos ver el ejercicio en marc&a en una pgina aparte.
Nota: 3e supone que ya &emos le!do el art!culo anterior, en el que e-plicamos paso por paso &acer tu primera pgina con jQuery, pues
necesitaremos conocer algunas cosas que ya se &an comentado all!.
8
1.1.1.- +rear la p%gina con una capa! un enlace y la de)inicin de una clase +<<
,l primer paso ser!a construir una pgina con todos los elementos que queremos que formen parte de este primer ejemplo(
la capa D+>, el enlace y la definicin de la class )33.
2dems, a&ora tambin vamos a incluir el script de jQuery, que lo necesitaremos para acceder a las funciones del frame"or#
$avascript.
<,t-l
<,ead
<title&Aadir y 2uitar clases BCC a ele-entos<$title
<style type="text$css"
+clasecss4
background-color: #ff8800;
font-9eig,t: bold;
6
<$style
<$,ead
<body
<div id="capa"
Dsta capa es independiente y voy a aAadir y eli-inar clases css sobre ella
<$div
<br
<br
<a ,ref=",ttp:$$999+desarrollo9eb+co-"&Aadir y 2uitar clase en la capa de arriba<$a
<$body
<$,t-l
erfecto, a&ora ya tenemos la infraestructura necesaria para nuestro ejemplo, con todos los integrantes del mismo. 3lo nos
faltar!a &acer el siguiente paso, que es aEadir los comportamientos dinmicos con jQuery.
1.1.2.- =ecordar9 a;adir siempre los scripts jQuery cuando el documento est%
>ready>
2&ora vamos a empe%ar a meter el cdigo $avascript, pero quiero comen%ar por recordar a los lectores que cualquier
funcionalidad que queramos agregar a la pgina por medio de jQuery, debe ser incluida cuando el documento est listo para
recibir acciones que modifiquen el D/: de la pgina.
ara esto tenemos que incluir siempre el cdigo(
$$a2u3 -etere-os las instrucciones 2ue -odifi2uen el :<=
6*;
1.1..- A;adir los eventos mouseover y mouseout para a;adir y 2uitar una clase +<<
,n este paso vamos a crear un par de eventos que asociaremos a los enlaces. ,ste par de eventos sern lan%ados cuando el
usuario coloque el puntero del ratn sobre el enlace 0mouseover1 y cuando el usuario retire el ratn del enlace 0mouseout1.
or ejemplo, para definir un evento mouseover se tiene que llamar al mtodo mouseover01 sobre el elemento que queremos
asociar el evento. 2dems, al mtodo mouseover01 se le env!a por parmetro una funcin con el cdigo que se quiere
ejecutar como respuesta a ese evento.
,n el caso de aEadir una clase tenemos que utili%ar el mtodo add)lass01, que se tiene que invocar sobre el elemento al que
queremos aEadirle la clase. 2 add)lass01 tenemos que pasarle una cadena con el nombre de la clase )33 que queremos
aEadir.
ara seleccionar el elemento que queremos aEadir la clase &acemos J0DLid,lementoD1, es decir, utili%amos la funcin dlar
pasndole el identificador del elemento que queremos seleccionar, precedida del carcter DLD. or ejemplo, con J0DLcapaD1
estamos seleccionando un elemento de la pgina cuyo idCDcapaD.
'("a"*+-ouseover(function(event*4
'("#capa"*+addBlass("clasecss"*;
9
6*;
De manera anloga, pero con el mtodo mouseout01, definimos el evento para cuando el usuario saca el puntero del ratn
del enlace.
'("a"*+-ouseout(function(event*4
'("#capa"*+re-oveBlass("clasecss"*;
6*;
1.1.1.- +digo completo del ejemplo jQuery
2&ora veamos el cdigo completo de este ejercicio.
<,t-l
<,ead
<title&Aadir y 2uitar clases BCC a ele-entos<$title
+clasecss4
background-color: #ff8800;
font-9eig,t: bold;
6
<$style
<script
'("a"*+-ouseover(function(event*4
'("#capa"*+addBlass("clasecss"*;
6*;
'("a"*+-ouseout(function(event*4
'("#capa"*+re-oveBlass("clasecss"*;
6*;
6*;
<$script
<$,ead
<body
<div id="capa"
Dsta capa es independiente y voy a aAadir y eli-inar clases css sobre ella
<$div
<br
<br
<a ,ref=",ttp:$$999+desarrollo9eb+co-"&Aadir y 2uitar clase en la capa de arriba<$a
<$body
<$,t-l
odemos ver el ejemplo desarrollado en el art!culo en una pgina aparte.
1.5.- Mostrar y ocultar elementos de la p%gina con jQuery
(on el mtodo css*+ de jQuery podemos aplicar cualquier estilo css a elementos de la p$%ina. !eremos
c#mo aplicarlo para mostrar y ocultar elementos de la p$%ina.
ara aprender rpidamente cmo &acer cosas t!picas con jQuery, vamos a e-plicar cmo mostrar u ocultar elementos de la
pgina, cambiando propiedades de las &ojas de estilo en cascada. ara que este art!culo tenga un poco ms de practicidad,
vamos a reali%ar un ejemplo de formulario donde algunos de los elementos estn escondidos. ,n ese formulario, al marcar
una opcin de un campo c&ec#bo-, se mostrarn esos elementos escondidos y al desmarcar esa opcin, se ocultarn.
,l mtodo que se dispone en jQuery para alterar las &ojas de estilo se llama css01 y lo podemos invocar sobre elementos de
10
la pgina, a los que queremos cambiar sus propiedades )33. ,n principio, para mostrar y ocultar elementos, nos viene bien
alterar el atributo DdisplayD, poniendo el valor DnoneD para que no apare%ca y Dbloc#D para que s! lo &aga.
'o que deber!amos saber para poder entender este ejemplo se puede aprender en el :anual de jQuery que venimos
publicando en DesarrolloWeb.com. 2unque como este es un ejemplo bsico, ser suficiente con estudiar el art!culo asos
fundamentales para usar jQuery.
1.5.1.- ?cultar y mostrar una capa con jQuery
>amos a ver brevemente cmo usar el mencionado mtodo css01. rimero, tendr!amos que tener un elemento en la pgina,
que es el que vamos a mostrar u ocultar.
<div id="-iele-ento"
Bontenido del ele-ento+++
<$div
ara ocultar este elemento, &abr!a que invocar el mtodo css01 de la siguiente manera(
'("#-iele-ento"*+css("display"5 "none"*;
)omo se puede ver, se accede al elemento con la funcin dlar J01 y el selector DLmielementoD. 'uego al mtodo css01 le
pasamos el valor DdisplayD y DnoneD, porque queremos alterar a propiedad display y asignarle el valor DnoneD, para ocultar el
elemento.
ara mostrarlo &ar!amos algo parecido, pero colocando el valor Dbloc#D en el atributo )33 DdisplayD.
'("#-iele-ento"*+css("display"5 "block"*;
Nota: el mtodo css01 admite otros parmetros. 3i slo recibe un parmetro, de tipo string, devuelve el valor )33 asignado a ese parmetro.
Bambin podr!a recibir un slo parmetro, en este caso de con una notacin de objeto con pares llave?valor, y entonces asignar!a todos esos
estilos )33, especificados por los pares llave?valor en el objeto, al elemento de la pgina donde se &aya invocado el mtodo.
1.5.2.- Mostrar u ocultar elementos como respuesta a un evento
2&ora que ya sabemos cmo reali%ar un cambio en el atributo display, vamos a ver cmo poner esta instruccin en marc&a
cuando el usuario realice acciones en la pgina. =ecordar que al principio del art!culo comentaba que !bamos a crear un
formulario con una casilla de seleccin 0campo c&ec#bo-1 y que al activar ese campo se mostrar!an otros contenidos en el
formulario. 2l desactivarlo, se ocultar!an esos contenidos del formulario.
ara entender bien lo que deseamos &acer, podemos ver el ejercicio en marc&a en una pgina aparte.
'o primero que podemos presentar es el formulario con el que vamos a trabajar.
<for-
Eo-bre: <input type="text" na-e="no-bre"
<br
<input type="c,eckbox" na-e="-ayorFedad" value="1" id="-ayoriaFedad" Coy -ayor de edad
<br
<div id="for-ulario-ayores" style="display: none;"
:ato para -ayores de edad: <input type="text" na-e="-ayoresFedad"
<$div
<$for-
)omo se podr ver, es un formulario como otro cualquiera. 3lo que tiene una capa con idCDformulariomayoresD, que
contiene los elementos del formulario que queremos mostrar u ocultar al marcar o desmarcar el c&ec#bo-. ,sa capa estar
inicialmente oculta, y para ello &emos colocado el atributo styleCDdisplay( noneMD. odemos fijarnos tambin en el c&ec#bo-
con idCDmayoriaNedadD, que es el que va servir para marcar si se desea o no ver la parte final del formulario.
2&ora &ay que &acer cosas cuando se &aga clic en el c&ec#bo- con idCDmayoriaNedadD. ara ello en deber!amos crear un
cdigo $avascript y jQuery como este(
'("#-ayoriaFedad"*+click(function(*4
$$lo 2ue se desee ,acer al recibir un clic el c,eckbox
11
6*;
6*;
)omo ya &emos comentado, estas l!neas sirven para especificar eventos. J0document1.ready01 se &ace para lan%ar
instrucciones cuando el navegador est preparado para recibirlas y J0DLmayoriaNedadD1.clic#01 sirve para reali%ar acciones
cuando se &a &ec&o clic sobre el elemento con id DmayoriaNedadD, que es el c&ec#bo- del formulario. 0'ee el art!culo asos
para trabajar con jQuery para ms informacin sobre este punto1.
2&ora tenemos que ver las instrucciones que debemos ejecutar como respuesta a ese evento.
if ('("#-ayoriaFedad"*+attr("c,ecked"**4
'("#for-ulario-ayores"*+css("display"5 "block"*;
6else4
'("#for-ulario-ayores"*+css("display"5 "none"*;
6
Bsicamente lo que &acemos es comprobar el estado del atributo Dc&ec#edD del elemento DLmayoriaNedadD. ,sto se &ace
con el mtodo attr01 indicando como parmetro el valor del atributo AB:' que queremos comprobar. ,ntonces, si estaba
Dc&ec#edD, se tiene que mostrar el elemento y si no estaba marcado el c&ec#bo-, &abr!a que ocultarlo.
,spero que se &aya entendido bien. 2&ora dejo aqu! el cdigo completo de este ejemplo(
<,t-l
<,ead
<title=ostrar <cultar<$title
<script
'("#-ayoriaFedad"*+click(function(evento*4
if ('("#-ayoriaFedad"*+attr("c,ecked"**4
'("#for-ulario-ayores"*+css("display"5 "block"*;
6else4
'("#for-ulario-ayores"*+css("display"5 "none"*;
6
6*;
6*;
<$script
<$,ead
<body
<for-
Eo-bre: <input type="text" na-e="no-bre"
<br
<input type="c,eckbox" na-e="-ayorFedad" value="1" id="-ayoriaFedad" Coy -ayor de edad
<br
<div id="for-ulario-ayores" style="display: none;"
:ato para -ayores de edad: <input type="text" na-e="-ayoresFedad"
<$div
<$for-
<$body
<$,t-l
.inalmente, podemos verlo en marc&a en una pgina aparte.
1.7.- /)ectos r%pidos con jQuery
,l%unos efectos din$micos se pueden hacer con jQuery con rapidez impactante y extremadamente poco
c#di%o Javascript.
9na de las ventajas ms destacadas de jQuery es la reali%acin de efectos especiales para pginas "eb, que se desarrollan
12
rpido y con poco cdigo fuente. ,stos efectos sirven para aplicar dinamismo a una pgina "eb y una respuesta atractiva
frente la interaccin con el usuario, lo que &ace que las pginas programadas con jQuery ofre%can una imagen puntera.
'os efectos con jQuery, al menos un buen puEado de ellos, se pueden reali%ar sin muc&as complicaciones, ya que e-isten
unas funciones que simplifican la tarea de los desarrolladores 0>er la librer!a ,ffects1. ,n muc&os casos conseguir un efecto
nos llevar una l!nea de cdigo en nuestro programa, como esta(
'("#capaefectos"*+,ide("slo9"*;
)on esto conseguimos que el elemento con idCDcapaefectosD desapare%ca de la pgina. ero adems, el efecto no es un
simple fundido del elemento en la pgina 0&acerse transparente1, sino que tambin va acompaEado de una reduccin de
tamaEo progresiva &asta desaparecer.
)ombinando los efectos con la interaccin de usuario, por medio de eventos, podemos conseguir que los efectos respondan
a las acciones del visitante, lo que multiplica las posibilidades, manteniendo la sencille%, elegancia y facilidad de manutencin
del cdigo $avascript. 'o vamos a ver en un ejemplo a continuacin.
1.7.1.- /jemplo de e)ectos e interaccin en jQuery
,n el siguiente ejemplo vamos a mostrar un uso sencillo de las funciones de efectos de jQuery. >amos a implementar un
simple efecto de ocultar y mostrar un elemento de la pgina "eb.
)omo &emos podido ver, vamos a tener una capa y un par de enlaces. )on jQuery &aremos que al pulsar los enlaces se
oculte y se muestre la capa, con las funciones de la librer!a ,ffects.
ara comen%ar, este es el cdigo AB:' del ejemplo, que comprende tanto la capa como los enlaces.
<div id="capaefectos" style="background-color: #ccGG00; color:fff; padding:10px;"
Dsto es una capa 2ue nos servir> para ,acer efectos1
<$div
<p
<a ,ref="#" id="ocultar"<cultar la capa<$a H
<a ,ref="#" id="-ostrar"=ostrar la capa<$a
<$p
2&ora viene la parte interesante, que es en la que asociamos eventos a estos dos enlaces y codificamos las llamadas a las
funciones de ,ffects, que &arn que se muestre y oculte la capa.
,l cdigo $avascript, que &ace uso de jQuery ser!a el siguiente(
'("#ocultar"*+click(function(event*4
event+prevent:efault(*;
6*;
'("#-ostrar"*+click(function(event*4
'("#capaefectos"*+s,o9(7000*;
6*;
6*;
)omo se puede ver, primero tenemos que definir el evento ready del objeto J0document1, para &acer cosas cuando el
documento est preparado para recibir acciones.
'uego se define el evento clic# sobre cada uno de los dos enlaces. ara ello invoco el mtodo clic# sobre el enlace, que
&emos seleccionado con jQuery a travs del identificador de la etiqueta 2.
)on esto estoy definiendo el evento clic sobre el elemento con idCDocultarD.
Nota: leer el art!culo anterior asos para utili%ar jQuery en tu pgina "eb, en el que &ablbamos sobre eventos y otras generalidades de este
13
frame"or# $avascript. odremos encontrar e-plicaciones ms detalladas sobre cmo definir eventos $avascript con jQuery.
Dentro de la funcin a ejecutar cuando se &ace clic, se coloca la llamada a la funcin de los efectos.
,sto &ace que nuestra capa, a la que &ab!amos puesto el identificador 0atributo id1 DcapaefectosD, se oculte. asamos el
parmetro Dslo"D porque queremos que el efecto sea lento.
2&ora veamos la funcin de los efectos con otra llamada(
,sto &ace que se muestre el elemento con id DcapaefectosD, y que el proceso de mostrarse dure F<<< milisegundos.
@o &ay ms complicaciones, as! que si &abis entendido esto ya sabis &acer efectos simples pero atractivos con jQuery en
vuestra pgina "eb. 2&ora podris ver el cdigo completo de este ejemplo creado por DesarrolloWeb.com para demostrar el
uso de efectos.
<1:<BIJ/D ,t-l
/K%L@B "-$$;7B$$:I: M!I=L 1+0 Iransitional$$DE"
",ttp:$$999+97+org$I.$x,t-l1$:I:$x,t-l1-transitional+dtd"
<,t-l
<,ead
<titleDfectos con 0?uery<$title
<script
6*;
'("#-ostrar"*+click(function(event*4
6*;
6*;
<$script
<$,ead
<body
<div id="capaefectos" style="background-color: #ccGG00; color:fff; padding:10px;"
Dsto es una capa 2ue nos servir> para ,acer efectos1
<br
<br
/ongo este texto si-ple-ente de prueba
<$div
<p
<a ,ref="#" id="ocultar"<cultar la capa<$a H
<a ,ref="#" id="-ostrar"=ostrar la capa<$a
<$p
<$body
<$,t-l
or *ltimo, pongo el enlace de nuevo al ejemplo en marc&a.
)omo se &a podido comprobar, &acer efectos con jQuery es bastante sencillo. )laro que &ay otros detalles importantes y
otros tipos de efectos y funcionalidades de personali%acin de los mismos, pero esto nos &a servido para demostrar lo
sencillo que es trabajar con este frame"or# $avascript. ,n siguientes art!culos seguiremos e-plorando casos de uso t!picos de
jQuery.
14
1.@.- +all'ac* de )unciones jQuery
(on callback de jQuery podemos hacer una secuencia de llamadas a funciones o una pila de funciones que
se ejecutar$n una detr$s de otra.
2 menudo cuando &acemos aplicaciones enriquecidas del lado del cliente con jQuery nos vemos en la necesidad de
encadenar varias llamadas a funciones, para que una se ejecute detrs de otra, creando un efecto ms elaborado. ,n este
art!culo veremos lo sencillo que es reali%ar lo que en ingls se llama Dcallbac#D, es decir una funcin que se ejecuta despus
de otra.
2pilar funciones, para que se ejecuten una detrs de otra, nos servir para &acer muc&as cosas. ,n nuestro d!a a d!a con
jQuery iremos encontrando la utilidad, pero de momento para e-plicar un caso en el que nos resultar imprescindible, se me
ocurre que deseemos &acer una secuencia de efectos y cambios dinmicos en un elemento.
or ejemplo imaginemos que se desea ocultar una capa con un efecto de fundido 0de opaco a transparente1, luego moverla a
otra posicin y volverla a mostrar 0ya en la nueva posicin1 con otro efecto de fundido 0en este caso de transparente a
opaco1. ,n principio podr!amos pensar en &acer un cdigo como este(
'("#-icapa"*+fade<ut(8000*;
'("#-icapa"*+css(4top: 7005 left:8006*;
'("#-icapa"*+fade@n(8000*;
,n este caso estamos alterando las propiedades de una capa con idCDmicapaD. rimero llamamos a fade/ut01 para ocultarla
con un fundido, que durar ; segundos 0vase el parmetro ;<<<, que son los milisegundos que durar el efecto1. 'uego
alteramos la posicin de la capa, cambiando sus atributos )33. ara acabar la volvemos a mostrar con un fundido de otros
;<<< milisegundos.
Nota: para poder entender mejor estas llamadas a efectos, por favor, consulta el art!culo ,fectos =pidos con jQuery.
3i lan%amos la ejecucin de estas sentencias, tal como aparece en el cdigo, ser como si se ejecutasen todas a la ve%. )omo
los fade/ut y fade+n tardarn ; segundos en ejecutarse y los cambios de las propiedades )33 top y left son inmediatos, lo
que ocurrir ser que primero veremos la capa moverse a la nueva posicin y luego veremos los dos efectos de fundido.
'o mejor para darse cuenta de este caso es verlo en marc&a.
1.@.1.- +mo realizar una pila de ejecucin de )unciones
2&ora que ya &emos visto uno de los casos en los que necesitar!amos ejecutar funciones en una pila, una despus de otra,
esperando a que termine completamente la ejecucin de cualquier efecto o accin antes de comen%ar con la siguiente.
>amos a ver cmo &acerlo con jQuery.
3implemente tenemos que saber que todas las funciones o mtodos de jQuery pueden recibir un parmetro adicional con el
nombre de la funcin que se tiene que ejecutar despus que termine el procesamiento de la primera. ,sa segunda funcin
que se ejecuta despus de la primera es la que se conoce en ingls por callbac#. 9n ejemplo sencillo para entenderlo.
-iNuncion ("para-etros de la funci#n"5 funcionBallback*;
,n ese esquema de llamada a mi.uncion01, se le estn pasando dos parmetros. ,l primero ser!a un supuesto parmetro que
necesitase mi.uncion01 y el segundo, que es le que nos interesa en este caso, el nombre de la funcin que se tiene que
ejecutar despus que acabe. )on este cdigo, primero se ejecuta mi.uncion01 y cuando acaba completamente, se ejecuta
funcion)allbac#01. ero atencin que este ejemplo lo &emos simplificado para que se pueda entender fcilmente y esta
sinta-is slo valdr si funcion)allbac# no recibe parmetros, porque no los podemos indicar con el nombre de la funcin.
>eamos entonces una forma de &acer este callbac# que funcione siempre(
-iNuncion ("para-etros de la funcion"5 function(*4
funcionBallback(*;
6*;
)on este cdigo, que funcionar!a igual que el anterior, lo bueno es que s! podemos indicar los parmetros que se necesiten
15
para la llamada a funcion)allbac#01.
1.@.2.- /jemplo real de call'ac* con jQuery
2&ora que &emos aprendido toda la teor!a, veamos un ejemplo prctico que solucionar!a el problema comentado
anteriormente sobre el procesamiento de diversos efectos y cambios en las propiedades de los objetos, para que se &agan
siempre en la secuencia que deseamos. 3e trata simplemente de aplicar las llamadas con callbac# que &emos antes.
'("#-icapa"*+fade<ut(10005 function(*4
'("#-icapa"*+css(4)top): 7005 )left):8006*;
'("#-icapa"*+fade@n(1000*;
6*;
)omo se puede ver, en la llamada a fade/ut01 estamos pasando como parmetros el valor 7<<<, que son los milisegundos
tiene que durar el efecto fade out 0fundido &acia transparente1, y luego la funcin callbac#, que se ejecutar despus de que
fade/ut01 &aya terminado.
)omo el mtodo css01 0se encuentra como primera instruccin de la funcin callbac#1 es instantneo, no necesita &acerse un
callbac# para ejecutar el fade+n01, sino que se puede escribir directamente en la siguiente l!nea de cdigo. 2s! pues, se ve que
el callbac#, al menos en este ejemplo, slo es necesario &acerlo cuando se ejecutan funciones que reali%arn un
procesamiento prolongado.
odemos ver este ejemplo de callbac# en una pgina aparte.
Aasta aqu!, a lo largo de los cap!tulos de este manual de jQuery, &emos le!do la introduccin a este popular frame"or#
$avascript, tal como se puede ver en el apartado DAo" to use jQueryD publicada en la pgina de documentacin. Desde
DesarrolloWeb.com &emos enriquecido este tutorial de jQuery aportando nuevos ejemplos y e-plicaciones adicionales,
encaminadas a que cualquier persona, con unos conocimientos bsicos de $avascript, pueda entender y aprender a usar estas
librer!as de programacin crossGbro"ser. 2&ora podemos &acer una pausa en este manual y volveremos pronto con nuevos
art!culos para e-plicar otros asuntos sobre la programacin con jQuery.
1.A.- Bso de Aja8 muy sencillo con jQuery
Es muy f$cil desarrollar ,jax en jQuery. En este art-culo veremos el ejemplo m$s sencillo de ,jax con el
framework Javascript jQuery.
Aa llegado el momento de &acer una primera apro-imacin a 2ja-, en la serie de art!culos que estamos publicando en
DesarrolloWeb.com para mostrar el uso de este frame"or# 0lase el :anual de jQuery1.
9na de las ventajas de los frame"or#s $avascript es que nos permiten desarrollar scripts que &acen uso de 2ja- de una
manera muy fcil y encima, sin tener que complicarnos la vida con la compatibilidad entre distintos navegadores. 3in duda,
cualquier persona que sepa un poco de $avascript, podr!a en poco tiempo empe%ar a utili%ar 2ja- con alguno de estos
frame"or#s. @osotros vamos a demostrar cmo es de sencillo en jQuery.
'a primera impresin que &e tenido sobre el uso de 2ja- en jQuery es realmente grata, por la facilidad con la que se puede
reali%ar un primer ejemplo. 3e trata de un ejemplo e-tremadamente sencillo, pero sirve para abrirnos las puertas a muc&as
aplicaciones interesantes. Aab!amos visto en otros frame"or#s $avascript ejemplos similares, como en el art!culo 2ja- con
:ootools, pero tenemos que quitarnos el sombrero ante la e-tremada sencille% con la que se puede &acer un ejemplo similar
en jQuery. 3ea suficiente decir que en este ejemplo de 2ja- utili%aremos tan slo O l!neas de cdigo, de las cuales slo 7 es
para ejecutar la propia llamada al servidor por 2ja-.
1.A.1.- -raer un contenido con Aja8 al pulsar un enlace
,n este sencillo ejemplo &aremos llamada a 2ja-, para traer un contenido, cuando se pulse un enlace. ,sto lo &emos puesto
en marc&a en el servidor de DesarrolloWeb.com y lo puedes ver en una pgina aparte.
16
2qu! podemos ver el enlace, al que ponemos un identificador 0atributo id1 para seleccionarlo desde jQuery.
<a ,ref="#" id="enlacea0ax"!a" clic1<$a
3i &emos le!do &asta aqu! el :anual de jQuery podremos saber cmo asignar un evento a un enlace. @o obstante,
recordemos cmo asignar una funcin para cuando se &aga clic en el enlace(
'("#enlacea0ax"*+click(function(evento*4
$$eli-ino el co-porta-iento por defecto del enlace
$$&2u3 pondr3a el c#digo de la lla-ada a &0ax
6*;
6*
Ha se trata slo de poner en marc&a 2ja- dentro de la funcin del evento Dclic#D sobre el enlace. ero antes voy a necesitar
una capa donde mostrar el contenido que vamos a recibir del servidor con la llamada 2ja-. 'e pondremos idCDdestinoD para
poder referirnos a ella desde jQuery(
H a&ora la parte ms interesante, donde podemos ver qu tan fciles son las cosas con este frame"or# $avascript. 9na *nica
l!nea de cdigo ser suficiente(
'("#destino"*+load("contenido-a0ax+,t-l"*;
)on esta simple sentencia estamos reali%ando una llamada a 2ja- con jQuery. ,s una simple invocacin al mtodo load01 de
un elemento de la pgina, en concreto el que &ab!amos puesto con idCDdestinoD. 2l mtodo load01 le pasamos como
parmetro la ruta de la pgina que queremos cargar dentro del elemento.
,l arc&ivo que cargamos con load01 en este ejemplo es DcontenidoGaja-.&tmlD y simplemente le &emos colocado un te-to
cualquiera. 'o &emos guardado en el mismo directorio que la pgina "eb donde est el script jQuery.
Nota: para que este ejemplo funcione debe colocarse en un servidor "eb, puesto que la llamada por 2ja- se &ace por &ttp y el arc&ivo que se
carga entonces tiene que recibirse por un servidor "eb, que lo mande con ese protocolo al navegador. 3i pones los arc&ivos en tu disco duro y
los ejecutas tal cual, no te funcionar. uedes utili%ar cualquier espacio de &osting que tengas o bien un servidor "eb que puedas tener
instalado en tu ordenador.
2s! de simpleK odemos ver el cdigo completo de este ejemplo(
<,t-l
<,ead
<title&0ax Ci-ple<$title
<script
'("#destino"*+load("contenido-a0ax+,t-l"*;
6*;
6*
<$script
<$,ead
<body
<br
<div id="destino"<$div
<$body
<$,t-l
)abr!a comentar que jQuery tiene muc&os otros mtodos de reali%ar cone-iones por 2ja-, que pueden servir para muc&os
otros casos de trabajo que podemos encontrarnos. @osotros &emos escogido el ms sencillo para dar una primera
demostracin de las posibilidades.
17
1.A.2.- $asar par%metros y ejecutar acciones despus de la llamada a Aja8
,l mtodo load01 que &emos visto en el ejemplo anterior tiene otros dos parmetros opcionales que podemos utili%ar si
fuera necesario(
Parmetros a pasar a la pgina( la pgina que carguemos con 2ja- puede recibir parmetros por la 9=', que se
especifican con la t!pica notacin de propiedades y valores de jQuery.
4no-bre: "/epe"5 edad: OP6
or ejemplo, con ese cdigo estar!amos enviando a la pgina los datos nombre y edad, con los valores DpepeD y O4. ,sos
datos viajar!an en la 9=', por el mtodo D/3BD.
Nota: Desde jQuery 7.F tambin se pueden enviar los parmetros a la pgina a cargar con 2ja- por medio de una variable de tipo string, en
lugar de una notacin de objetos como &emos comentado. )uando se use un string para especificar los parmetros a enviar en el request &ttp,
stos viajan por el mtodo I,B. )uando se utili%a una notacin de objetos como la que &emos visto, los datos viajan por el mtodo /3B.
Funcin callback( como otros mtodos de jQuery, podemos especificar opcionalmente una funcin a ser ejecutada cuando
se termine de ejecutar el mtodo. ,n este caso, cuando se termine la llamada 2ja-, se pueden &acer acciones, como borrar
un mensaje t!pico de Dcargando...D.
Nota: ,n un art!culo anterior ya comentamos el &abitual uso de funciones callbac# en jQuery.
2&ora veamos un cdigo donde &acemos uso de estos dos parmetros(
'("#destino"*+load("recibe-para-etros+p,p"5 4no-bre: "/epe"5 edad: OP65 function(*4
alert("recibidos los datos por a0ax"*;
6*;
6*;
6*
,n este caso estamos cargando con load01 una pgina A llamada DrecibeGparametros.p&pD. ,stamos pasando los
parmetros DnombreD y DedadD a una pgina, que podremos recoger por I,B. 2dems, &emos colocado una funcin
callbac# en la que simplemente &acemos un alert01, que se ejecutar cuando la llamada a 2ja- &aya terminado.
,ste ser!a el cdigo fuente de DrecibeGparametros.p&pD(
.ecibido el siguiente dato:
<br
Eo-bre: <Qp,p ec,o 'F/<CIR"no-bre"S;Q
<br
Ddad: <Qp,p ec,o 'F/<CIR"edad"S;Q
odemos ver este ejemplo en una pgina aparte.
)on esto &emos podido comprobar lo sencillo que es reali%ar con jQuery una carga de contenidos que se reciben por 2ja-.
)omo dec!a, e-isten muc&as otras maneras de &acer cone-iones 2ja- con jQuery, como el ejemplo del art!culo siguiente que
nos enseEa a mostrar un mensaje de carga miestrs esperamos la respuesta 2ja- del servidor. 2dems, para complementar
esta informacin, tambin podis ver el v!deo de 2ja- con jQuery.
1.C.- Aja8 jQuery con mensaje de carga
!emos m$s posibilidades de ,jax en jQuery, modificando un ejemplo anterior, para crear un mensaje de
car%a mientras que el usuario espera la respuesta ,jax del servidor.
18
Queremos ver algunas cosas t!picas que podr!amos desear &acer con 2ja- en una pgina "eb, facilitando el proceso de
desarrollo con el frame"or# $avascript jQuery. ,n esta l!nea de art!culos ya publicamos &ace poco un art!culo sobre el uso
de 2ja- en jQuery simplificado. ,n el mencionado art!culo vimos cmo &acer una llamada 2ja- con 7 sola l!nea de cdigo
0el 2ja- en si era una l!nea de cdigo, aunque se necesitan varias instrucciones ms para asociar las acciones 2ja- como
respuesta a eventos en la pgina1.
9na de las cosas que ms &abitualmente podr!amos desear &acer cuando se reali%a una llamada 2ja- es la creacin de un
mensaje de carga, que podemos colocar con un simple te-to Dcargando...D o con la t!pica imagen de 2ja- 'oader. ,n este
art!culo veremos cmo crear ese mensaje de carga al reali%ar una solicitud 2ja- con jQuery.
ara los interesados, se puede ver este ejemplo de 2ja- en una pgina aparte.
1.C.1.- $or 2u un mensaje de carga al 0acer Aja8
)uando &acemos una solicitud por 2ja-, los resultados de dic&a llamada a veces tardan en llegar. Durante ese tiempo el
usuario puede no ver ninguna reaccin por parte del navegador, lo que le puede confundir y pensar que no &a &ec&o clic
correctamente en el enlace o botn. 3er!a normal en ese caso que el usuario pulse repetidas veces un enlace o un botn de
env!o de formulario, generando repetidas e innecesarias llamadas al servidor, lo que puede derivar en diversos problemas.
2s! pues, es conveniente mostrar un mensaje de carga para advertir que su solicitud fue reali%ada y el proceso est en marc&a
y esperando respuesta del servidor.
>amos a e-plicar la implementacin de este mensaje de carga, pero siempre teniendo en cuenta que nuestra intencin en
este ejemplo es mantener un cdigo pequeEo que se pueda entender fcilmente. 2unque queremos remarcar que las cosas se
podr!an &acer de otra manera, algo mejorada, cuando sepamos ms cosas sobre el frame"or# $avascript jQuery y pongamos
en marc&a algunas prcticas aconsejables de programacin orientada a objetos.
1.C.2.- $reparando el cdigo ,-M.
)omo un primer paso, vamos a mostrar el cdigo AB:' que tendremos en la pgina que &ar la solicitud 2ja-.
<div id="cargando" style="display:none; color: green;"Bargando+++<$div
<br
)omo se puede ver, tenemos tres elementos( 71 el enlace, que activar la llamada a 2ja- cuando se &aga clic sobre l. ;1 una
capa con idCDcargandoD que es donde est el mensaje de carga 0nosotros &emos colocado un te-to, pero se podr!a colocar
cualquier cosa, como el t!pico gif animado que muestra que se est procesando la solicitud 0conviene fijarse tambin que esa
capa cargando est oculta de momento, gracias al atributo de estilo )33 display(none1. F1 la capa DdestinoD, donde
mostraremos la respuesta recibida tras la solicitud 2ja-.
1.C..- .lamada a Aja8 con jQuery y el mensaje de carga
,n este punto vamos a describir cmo se tendr!a que &acer la llamada al servidor con 2ja-, pero lo cierto es que este
proceso ya lo e-plicamos con detalle anteriormente, por lo que os refiero al art!culo 9so de 2ja- muy sencillo con jQuery,
donde encontraris unas e-plicaciones que voy a dar por sabidas en este caso. 'o que e-plicar en este art!culo es cmo se
tiene que mostrar el mensaje de carga cuando se inicia la llamada y como eliminarlo una ve% &emos recibido la respuesta por
2ja-.
/tra cosa que el lector deber conocer para poder entender este ejemplo es :ostrar y ocultar elementos de la pgina con
jQuery.
'("#cargando"*+css("display"5 "inline"*;
'("#destino"*+load("pagina-lenta+p,p"5 function(*4
'("#cargando"*+css("display"5 "none"*;
6*;
6*;
19
6*
>oy comentando l!nea a l!nea el cdigo anterior.
,n la primera l!nea se est especificando un mtodo ready01 sobre el objeto document, que sirve para generar un cdigo a
ser ejecutado cuando la pgina est lista para recibir instrucciones $avascript que trabajen con el D/:.
,n la segunda l!nea se accede al elemento con identificador Denlaceaja-D 0es decir, el enlace que activar el 2ja-1 para definir
un evento Dclic#D.
,n la siguiente l!nea se ejecuta el mtodo preventDefault01 sobre el evento producido al &acer clic sobre el enlace. ,sto se
&ace para anular el comportamiento t!pico del enlace.
2&ora viene la parte en la que se mostrar el mensaje de carga(
3implemente se muestra la capa con idCDcargandoD, con un simple cambio en el atributo )33 display de la capa. ,se cambio
de atributo lo &acemos con el mtodo css01 sobre el elemento que queremos alterar, tal como se vio en el art!culo :ostrar y
ocultar elementos de la pgina con jQuery.
2&ora, con la siguiente l!nea de cdigo(
3e &ace la llamada 2ja-, con el mtodo load01 sobre la capa que queremos actuali%ar con el contenido tra!do por 2ja-, que es
la capa con idCDdestinoD. ,ste mtodo recibe la 9=' de la pgina a cargar y una funcin callbac#, que se ejecutar despus
que el mtodo load01 se &aya terminado de procesar, esto es, despus de que la solicitud 2ja- se &aya recibido y se &aya
mostrado su contenido en la capa que recibe el mtodo.
,ntonces, en esa funcin callbac#, tenemos que ocultar la capa con el mensaje de carga, puesto que cuando se ejecute esta
funcin ya se &abr reali%ado todo el procesamiento 2ja-. ,so lo conseguimos con el mtodo css01, alterando la propiedad
display, de manera similar a como lo &ab!amos reali%ado para mostrar la capa cargando.
,sto es todo. =ealmente no tiene ninguna complicacin especial. 2unque, como dec!a, estas cosas se podrn &acer de una
manera ms elegante cuando aprendamos un poquito ms sobre jQuery.
or si sirve para aclarar las cosas, dejo a continuacin el cdigo completo de la pgina que &ace la solicitud con jQuery(
<,t-l
<,ead
<title&0ax Ci-ple<$title
<script
6*;
6*;
6*
<$script
<$,ead
<body
Dsto es un &0ax con un -ensa0e de cargando+++
<br
<br
<div id="cargando" style="display:none; color: green;"Bargando+++<$div
<br
<$body
<$,t-l
20
1.C.1.- +digo de la p%gina $,$ 2ue se invoca por Aja8
,l cdigo de la pgina A que traemos por aja- DpaginaGlenta.p&pD es el siguiente(
<Qp,p
sleep(7*;
ec,o ("!e tardado 7 segundos en e0ecutar esta pTaactute;gina+++"*;
Q
,n realidad no tiene nada en especial. 3implemente &acemos un sleep0F1 para ordenarle a A que espere F segundos antes
de terminar de procesar la pgina y enviarla al cliente. 2s! consigo que la solicitud &ttp tarde un poco es ser respondida y
podamos ver el mensaje de carga durante un poco ms de tiempo en la pgina.
.inalmente, pongo de nuevo el enlace para ver este ejercicio en marc&a.
3i te &a interesado este ejemplo y quieres obtener una ayuda adicional para crear tus propios scripts en 2ja-, te
recomendamos ver el v!deo donde e-plcamos a &acer 2ja- con jQuery.
Parte 2:
Core de jQuery
Empezamos a adentrarnos en el -ramewor. /a+ascript para conocer los detalles de este
sistema) comenzando con el n0cleo de '(uer": el core) *ue contiene los m1todos m&s
esenciales.
2.1.- +ore de jQuery
El core de jQuery lo forman las funciones m$s recurridas y que forman la base sobre la que se asienta el
cualquier cosa en este framework Javascript.
Aasta este momento ya &emos publicado varios art!culos en el :anual de jQuery de DesarrolloWeb.com, pero realmente lo
que &emos visto es una mera introduccin a las posibilidades del 2+, as! como unas e-plicaciones bsicas para empe%ar a
trabajar con jQuery en nuestras pginas "eb. 3in embargo, nos gustar!a ir publicando una documentacin en espaEol
completa, para que cualquier desarrollador pueda aprender a fondo este frame"or# $avascript y crear cualquier tipo de
aplicacin enriquecida del cliente.
'as personas con un nivel medioGalto de $avascript y de programacin orientada a objetos, con lo que &emos visto &asta el
momento en el manual y la referencia del 2+ jQuery, podrn con relativa facilidad adentrarse en caracter!sticas avan%adas
del frame"or#, pero para los dems y los que deseen una ayuda adicional, esperamos que este art!culo y los siguientes
puedan abrir un camino, sencillo de seguir, para aprender a &acer todo tipo de desarrollos con $avascript y jQuery.
)omencemos pues por el inicio, tal como est en la documentacin del sistema, tratando en primer caso el D)oreD. De todos
modos, cabe decir que lo que &emos podido ver en los art!culos anteriores de este :anual de jQuery, nos va a venir muy
bien para poder entender todo lo que viene a continuacin y sobre todo, poder poner en marc&a ejemplos un poco ms
elaborados.
21
2.1.1.- +ore de jQuery
,l core de jQuery es la base sobre la que se trabaja para &acer cualquier cosa con jQuery. )ontiene una serie de clases y
mtodos *tiles para &acer tareas reiterativas, que vamos a necesitar en las aplicaciones. +ntegra desde funciones que sern
*tiles en cualquier script, por sencillo que sea, &asta funciones menos recurridas pero que nos facilitarn la vida a &ora de
&acer cdigo limpio, corto y reutili%able.
9tili%aremos el )ore para reali%ar cosas *tiles con objetos, clases, datos, etc, pero realmente lo que ms &aremos ser utili%ar
la funcin jQuery, que es el pilar fundamental sobre el que se basarn las aplicaciones.
)ore tiene las funciones clasificadas en diversos apartados(
$() (La funcion !uer"):
,s la funcin principal de jQuery, que adems tiene diversas utilidades seg*n los parmetros que se le env!en. 3u utilidad
principal es obtener elementos de la pgina.
#ccesorios de obetos:
,s una gama de funciones de diversa y variada utilidad, que sirven de utilidad para &acer cosas con objetos, tales como iterar
con cada uno de sus elementos, saber su tamaEo, longitud, el selector o conte-to con el que se obtuvo, obtener todos sus
elementos D/: que contenga, etc.
$rabao con datos:
9nas funciones *tiles para trabajar con datos y asociarlos a elementos, una forma de guardar informacin adicional a
elementos de la pgina. Bambin tiene diversas funciones para trabajar con colas y administrar la salida y entrada de sus
elementos.
Plugins:
.unciones que permiten e-tender los elementos jQuery para incorporar nuevos mtodos, algo que se utili%a &abitualmente a
la &ora de crear plugins para aEadir funcionalidades a jQuery.
%nteroperabilidad:
.unciones que permiten que jQuery no tenga problemas de compatibilidad con otras librer!as $avascript que tambin suelen
utili%ar la funcin dlar J01.
Nota: ,n el momento de escribir este manual estamos en la release 7.F.;, en la que se &an publicado como novedad un par de mtodos, de
los clasificados en accesorios de objetos. )omo debemos saber, de ve% en cuando actuali%an las librer!as para incorporar nuevos mtodos.
,n el pr-imo art!culo comen%aremos a tratar a fondo el )ore de jQuery, &ablando de la funcin dlar J01.
2.2.- Duncin jQuery o )uncin E34
!eremos con detalle la funci#n m$s importante de jQuery y para ello comenzaremos viendo su uso m$s
com.n/ seleccionar elementos de la p$%ina y obtener un objeto jQuery con los elementos seleccionados.
)on el objetivo de seguir tratando el )ore de jQuery, del que ya empe%amos a &ablar en este :anual de jQuery, vamos a
e-plicar la funcin jQuery, tambin conocida como J01.
,l funcionamiento del )ore de jQuery se basa en esta funcin. )omo dicen en la propia documentacin del frame"or#,
DBodo en jQuery est basado en esta funcin o la usa de alguna formaD.
'a funcin jQuery sirve para &acer varias cosas, seg*n los parmetros que le pasemos. ,l uso ms simple es seleccionar
elementos o grupos de elementos de una pgina "eb, pero tambin sirve para crear elementos sobre la marc&a o para &acer
un callbac# de funciones.
,n realidad esta funcin se invoca tambin con el s!mbolo dlar J01, lo que ser!a una manera resumida de utili%arla y que nos
a&orrar bastantes caracteres en el cdigo y a la postre, tiempo de descarga y peso de los scripts de la pgina.
22
>eamos los distintos usos de esta funcin, seg*n los parmetros que reciba.
2.2.1.- Duncin jQuery enviando un selector y un conte8to
,ste uso de la funcin sirve para seleccionar elementos de la pgina. =ecibe una e-presin y se encarga de seleccionar todos
los elementos de la pgina que corresponden con ella, devolviendo un obeto !uer" donde se encuentran todos los
elementos de la pgina seleccionados y e-tendidos con las funcionalidades del frame"or#. 2dicionalmente, podemos pasarle
un conte-to de manera opcional. 3i no se le env!a un conte-to, selecciona elementos del documento completo, si indicamos
un conte-to conseguiremos seleccionar elementos slo dentro de ese conte-to.
'a e-presin que debemos enviar obligatoriamente como primer parmetro sirve de selector. ,n ese parmetro tenemos
que utili%ar una una notacin especial para poder seleccionar elementos de diversas maneras y la verdad es que las
posibilidades de seleccin con jQuery son muy grandes, como veremos en el tema de D3electoresD.
,ste paso de seleccin de elementos es bsico en cualquier script jQuery, para poder actuar en cualquier lugar de la pgina y
&acer nuestros efectos y utilidades $avascript sobre el lugar que deseemos.
>eamos un uso de esta funcin(
var ele-1 = '("#ele-1"*;
)on esta l!nea de cdigo &abremos seleccionado un elemento de la pgina que tiene el identificador 0atributo id del
elemento AB:'1 Delem7D y lo &emos guardado en una nueva variable llamada elem7. 'a variable elem7 guardar entonces
lo que se llama el objeto jQuery con el cual podremos trabajar, solicitando mtodos o funciones de dic&o objeto, para
trabajar con el elemento seleccionado.
Nota: )omo &emos dic&o, J01 es un resumen o forma corta de invocar la funcin jQuery. Bambin podr!amos &aber escrito la l!nea de esta
manera( var elem7 C jQuery0DLelem7D1M
'uego, podr!amos &acer cualquier cosa con ese elemento seleccionado, como lo siguiente(
ele-1+css("background-color"5 "#ffUUUU"*;
,ste mtodo css01 no forma parte del core, pero sirve para cambiar atributos )33 de un elemento, entre otras cosas. 2s!
pues, con esa l!nea cambiar!amos el color de fondo del elemento seleccionado anteriormente, que &ab!amos guardado en la
variable elem7.
2&ora veamos otro ejemplo de la seleccin de elementos con la funcin dlar.
var divs = '("div"*;
divs+css("font-si"e"5 "78pt"*;
2qu! seleccionamos todas las etiquetas D+> de la pgina, y les colocamos un tamaEo de letra de F;pt.
odemos ver en una pgina aparte este pequeEo script en uso.
,l cdigo de esta pgina es el siguiente(
<,t-l
<,ead
<titlefunci#n 02uery<$title
<script src="++$02uery-1+7+8+-in+0s" type="text$0avascript"<$script
<script
var ele-1 = '("#ele-1"*;
$$podr3a-os ,aber escrito: var ele-1 = 0?uery("#ele-1"*;
ele-1+css("background-color"5 "#ffUUUU"*;

var divs = '("div"*;
$$podr3a-os ,aber escrito: var ele-1 = 0?uery("#ele-1"*;
divs+css("font-si"e"5 "78pt"*;
6*;
<$script
<$,ead
<body
23
<div id="ele-1"Dste ele-ento se lla-a ele-1<$div
<div id="ele-8"Dste otro ele-ento se lla-a ele-8<$div
<$body
<$,t-l
3i queremos, podemos utili%ar el segundo parmetro opcional, que es el conte-to. )on l podr!amos conseguir seleccionar
elementos que pertenecen a una %ona concreta de nuestro documento. or defecto el conte-to es la pgina entera, pero lo
podemos restringir de esta manera(
var inputs = '("input"5docu-ent+for-sR0S*;
inputs+css("color"5 "red"*;
)on la primera l!nea conseguimos seleccionar todos los elementos +@9B que pertenecen al primer formulario de la pgina.
3e devolver un objeto jQuery que contiene todos los input seleccionados. )on la segunda l!nea, invocando el mtodo css01
sobre el objeto jQuery recibido, estar!amos cambiando el color del te-to de esos elementos. ,sto no seleccionar!a los
+@9B de otros formularios, como se puede ver en esta pgina de ejemplo.
2&ora por completar un poco ms estas notas, veamos otro ejemplo en el que seleccionamos todos los prrafos 0etiqueta 1,
pero restringimos el conte-to *nicamente los que estn en un D+> con idCDdiv7D.
var parrafosFdiv1 = '("p"5"#div1"*;
parrafosFdiv1+,ide(*
,n la segunda l!nea lan%amos el mtodo &ide01 sobre el objeto jQuery que contiene los prrafos seleccionados, con lo que
conseguimos que se oculten. odemos ver una pgina que con este ejemplo en marc&a.
)ontamos con un video que nos &abla de la funcion J en jQuery.
,n el siguiente art!culo veremos otros usos de la funcin jQuery01 ? funcin dlar J01.
2..- ?tros usos de la )uncin E34
0a funci#n jQuery*+, o con su abreviaci#n 1*+, tiene otros usos interesantes cuando le enviamos
par$metros distintos a los vistos en el art-culo anterior.
,n el pasado cap!tulo del manual de jQuery vimos unas primeras notas sobre el )ore de jQuery y comen%amos a e-plicar la
funcin jQuery01, que es la ms importante en este frame"or# $avascript. 2&ora veremos como esta funcin, que tambin se
puede acceder por medio del s!mbolo dlar J01, puede tener otras aplicaciones *tiles, cuando recibe parmetros distintos a
los que vimos anteriormente.
2..1.- Duncin jQuery pasando un ,-M.
9na posibilidad de trabajar con la funcin jQuery es enviarle un string con un AB:'. ,sto crea esos elementos en la pgina
y les coloca los contenidos que se indique en el string. /jo, que el AB:' tiene que estar bien formado para que funcione en
cualquier navegador, esto es, que se coloquen etiquetas que se puedan meter en el B/DH de la pgina y que todas las
etiquetas tengan su cierre.
var nuevosDle-entos = '("<divDle-entos 2ue creo en <btie-po de e0ecuci#n<$b+<,1Dn
e0ecuci#n+++<$,1<$div"*;
,sto nos crear en la variable nuevos,lementos los elementos AB:' que &emos especificado en el string. 'uego
podr!amos &acer lo que queramos con ellos, como colocarlos en la pgina con el mtodo appendBo01, por ejemplo de esta
manera(
nuevosDle-entos+appendIo("body"*;
Nota: el mtodo appendBo01 no pertenece al )ore, pero nos viene bien utili%arlo y as! &acer algo con los elementos que acabamos de crear.
24
>eamos el cdigo completo de una pgina que &ace uso de este ejemplo(
<,t-l
<,ead
<script
var nuevosDle-entos = '("<divDstos ele-entos ++<$b+<,1I3tulo+++<$,1<$div"*;
nuevosDle-entos+appendIo("body"*;
6*;
<$script
<$,ead
<body
<pDsto es el cuerpo de la p>gina5 2ue tiene poca cosa+++<$p
<$body
<$,t-l
2&ora, dejamos el lin# para ver el ejemplo en una pgina aparte.
2..2.- Duncin jQuery pasando elementos
/tro posible valor que se le puede enviar a la funcin jQuery es un elemento o una jerarqu!a de elementos del D/:, para
e-tenderlos con las funcionalidades que aporta el frame"or# para los elementos.
or ejemplo(
var docu-ento = '(docu-ent+body*;
docu-ento+css("background-color"5 "#ff8877"*;
)on la primera l!nea creamos una variable llamada documento, a la que asignamos el valor que devuelve el mtodo J01
enviando el parmetro document.body.
Nota: 'a variable document.body corresponde con un elemento del D/: de $avascript, que crea automticamente el navegador y &ace
referencia al documento de la pgina.
)on ello obtenemos un objeto que es el cuerpo de la pgina 0document.body1 al que le &emos agregado todas las
funcionalidades del frame"or# jQuery para los elementos.
2s! pues, en la l!nea siguiente, invocamos el mtodo css01 sobre la variable DdocumentoD, que es el propio documento de la
pgina e-tendido. or eso el mtodo css01, que es de jQuery01, funciona sobre ese objeto.
2lgo como esto no funcionar!a porque estar!amos intentando lan%ar un mtodo de jQuery directamente sobre el objeto
D/: sin &aberlo e-tendido(
docu-ent+body+css("background-color"5 "#ff8877"*;
@o funcionar porque no podemos llamar a un mtodo jQuery sobre un objeto D/:, si es que no lo &emos e-tendido con
la funcin J01.
Nota: ,sta funcin acepta documentos P:' y objetos Windo", aunque no son propiamente elementos del D/:.
odemos ver a&ora una pgina donde se encuentra este ejemplo en marc&a.
2...- Duncin jQuery pasando una )uncin
,n la funcin J01 una *ltima posibilidad es pasarle como parmetro una funcin y entonces lo que tenemos es una funcin
callbac# que se invoca automticamente cuando el D/: est listo.
Nota: Ha e-plicamos lo que era un callbac# en el art!culo )allbac# de funciones jQuery
25
,n esa funcin podemos colocar cualquier cdigo, que se ejecutar slo cuando el D/: est listo para recibir comandos
que lo modifiquen. )on ello, esta funcin nos vale perfectamente para &acer cualquier cosa dentro de la pgina que afecte al
D/:.
,jemplo(
'(function (*4
$$&2u3 puedo ,acer cual2uier cosa con el :<=
6*;
,ste callbac# con la funcin jQuery J01 ser!a una abreviatura de otro mtodo que &emos visto repetidas veces a lo largo de
este manual para definir acciones cuando el D/: est listo(
$$&2u3 puedo ,acer cual2uier cosa con el :<=
6*;
+ncluso podemos &acer varios callbac#, para agregar distintas acciones a reali%ar cuando el D/: est listo, las veces que
queramos, igual que cuando defin!amos el evento ready01 sobre el objeto document.
odemos ver el cdigo de una pgina que &ace uso de la funcin dlar, pasando por parmetro una funcin.
<,t-l
<,ead
<script
'(function (*4
var docu-ento = '("p"*;
docu-ento+css("background-color"5 "#ff8877"*;
6*;
'(function (*4
var docu-ento = '("b"*;
docu-ento+css("color"5 "#fff"*;
6*;
$$si colocase a2u3 este c#digo5 no funcionar3a5 por2ue el :<= no estar3a listo para reali"ar
acciones
$$var docu-ento = '("p"*;
$$docu-ento+css("background-color"5 "#ff8877"*;
<$script
<$,ead
<body
<p<b/>rrafo<$b11<$p
<p<tro <bp>rrafo<$b<$p
<$body
<$,t-l
3e puede ver en marc&a en una pgina aparte.
Aasta aqu! &emos visto todas las posibilidades que e-isten para trabajar con la funcin jQuery. =ealmente a lo largo de este
manual ya la &ab!amos utili%ado muc&as veces y en lo sucesivocontinuaremos usndola, ya que cualquier cosa que deseemos
&acer en una pgina "eb va a depender en alg*n momento de invocar a J01 en alguna de sus variantes.
2.1.- +oreFeac09 eac0 del core de jQuery
(onozcamos con detalle el mtodo each del core de jQuery, para ejecutar una funci#n en cada uno de los
elementos de un %rupo.
26
Aay algo que tenemos que tener en cuenta, en la medida de lo posible, cuando creamos cdigo $avascript( crear un cdigo
de calidad y lo ms corto posible. ara ello tambin nos facilitan muc&o las cosas los frame"or#s y mtodos como eac&01,
que veremos en este art!culo.
,l mtodo eac&01 pertenece al juego de funciones del )/=, de jQuery, cuyas particularidades ya comen%amos a anali%ar en
el manual de jQuery. 3e trata de un mtodo para reali%ar acciones con todos los elementos que concuerdan con una
seleccin reali%ada con la funcin jQuery Gtambin llamada funcin J01G. Qtil porque nos da una manera cmoda de iterar
con elementos de la pgina y &acer cosas con ellos ms o menos complejas de una manera rpida y sin utili%ar muc&o cdigo
para definir el bucle.
2.1.1.- +mo )unciona eac0
,ac& es un mtodo que se utili%a sobre un conjunto de elementos que &ayamos seleccionado con la funcin jQuery. )on
eac& reali%amos una iteracin por todos los elementos del D/: que se &ayan seleccionado.
,l mtodo eac& recibe una funcin que es la que se tiene que ejecutar para cada elemento y dentro de esa funcin con la
variable Dt&isD tenemos una referencia a ese elemento del D/:. 2dicionalmente, la funcin que se env!a a eac&, puede
recibir un parmetro que es el !ndice actual sobre el que se est iterando.
Quiero e-plicar las bondades de eac&01 con un ejemplo. or ejemplo, veamos esta l!nea de cdigo(
'("p"*+css("background-color"5 "#eee"*;
)omo ya sabemos, con J0DpD1 seleccionamos todos los prrafos de la pgina. 'uego con el mtodo )33 asignamos un estilo,
en este caso para cambiar el color del fondo. ,sto en realidad jQuery lo &ace con una iteracin con todos los prrafos de la
pgina, sin que tengamos que &acer nosotros nada ms y es genial que se permita en el uso del frame"or#. Rero qu pasa si
queremos cambiar el fondo de los prrafos utili%ando colores alternosS
,n este caso no podemos &acerlo en una sola l!nea de cdigo, pero eac& nos vendr como anillo al dedo.
+maginemos que tenemos una serie de prrafos en la pgina y queremos cambiar el color de fondo a los mismos, de manera
que tengan colores alternos, para &acer dinmicamente un t!pico diseEo para los listados.
,ntonces podr!amos &acer lo siguiente(
'("p"*+eac,(function(i*4
if(iV8==0*4
'(t,is*+css("background-color"5 "#eee"*;
6else4
'(t,is*+css("background-color"5 "#ccc"*;
6
6*;
)on J0DpD1 tengo todos los prrafos. 2&ora con eac& puedo recorrerlos uno a uno. ara cada uno ejecutaremos la funcin
que enviamos como parmetro a eac&01. ,n esa funcin recibo como parmetro una variable DiD que contiene el !ndice
actual sobre el que estoy iterando.
)on if0iT;CC<1 estoy viendo si el entero del !ndice DiD es par o impar. 3iendo par coloco un color de fondo al elemento y
siendo impar coloco otro color de fondo.
)omo se puede ver, con la variable Dt&isD tenemos acceso al elemento actual. ero /$/, que este elemento no es un objeto
jQuery, as! que no podr!amos enviarle mtodos del frame"or# jQuery &asta que no lo e-pandamos con la funcin jQuery.
2s! pues, tenemos que &acer J0t&is1 para poder invocar al mtodo css01. or si no queda claro este punto mirar las
diferencias entre estas dos l!neas de cdigo(
t,is+css("background-color"5 "#ccc"*;
,n la primera l!nea no estar!amos e-tendiendo la variable t&is con las funcionalidades de jQuery, luego no funcionar!a.
,n la segunda l!nea, que es la que &ab!amos utili%ado en el script de ejemplo, s! estamos e-tendiendo la variable Dt&isD con la
funcin jQuery. De ese modo, se puede invocar a cualquier mtodo de jQuery sobre los elementos.
odemos ver un ejemplo en marc&a que &ace uso de ese script.
,ste ser!a su cdigo fuente completo(
27
<,t-l
<,ead
<titleeac, del core de 0?uery<$title
<script
'("p"*+eac,(function(i*4
if(iV8==0*4
'(t,is*+css("background-color"5 "#eee"*;
6else4
6
6*;
6*;
<$script
<$,ead
<body
<p/ri-er p>rrafo<$p
<p<tro p>rrafo<$p
<pIecer p>rrafo<$p
<pKno ->s<$p
<py acabo+++<$p
<$body
<$,t-l
2.1.2.- =etornando valores en la )uncin 2ue enviamos a eac0
2&ora vamos a ver un par de posibilidades interesantes al utili%ar eac&. =esulta que la funcin que enviamos como
parmetro a eac&01 puede devolver valores y dependiendo de stos, conseguir comportamientos parecidos a los conocidos
brea# o continue de los bucles $avascript.
3i la funcin devuelve DfalseD, se consigue detener por completo el proceso de iteraciones de eac&01. ,sto es como si
&iciramos el t!pico Dbrea#D.
3i la funcin devuelve DtrueD, se consigue pasar directamente a la pr-ima iteracin del bucle. ,s como &acer el t!pico
DcontinueD.
ara ver estos dos casos reali%aremos otro ejemplo de uso de eac&.
Benemos varios D+>, donde cada uno tiene un te-to.
<divred<$div
<divblue<$div
<divred<$div
<div9,ite<$div
<divred<$div
<divgreen<$div
<divorange<$div
<divred<$div
<divnada<$div
<divred<$div
<divblue<$div
2&ora queremos &acer un recorrido a esos D+> y en cada uno, mirar el te-to que aparece. ,ntonces colocaremos como
color del te-to del D+> el color que aprece escrito en el D+>. ero con dos casos especiales(
3i el te-to del D+> es D"&iteD, entonces no queremos &acer nada con ese elemento.
3i el te-to del D+> es DnadaD, entonces detendremos el bucle y dejaremos de colorear los siguientes elementos.
,sto lo podr!amos &acer con el siguiente cdigo(
'("div"*+eac,(function(i*4
ele-ento = '(t,is*;
if(ele-ento+,t-l(* == "9,ite"*
return true;
if(ele-ento+,t-l(* == "nada"*
return false;
28
ele-ento+css("color"5 ele-ento+,t-l(**;
6*;
2&ora podremos ver este ejemplo en funcionamiento en una pgina aparte.
2.5.- Mtodo size34 y propiedad lengt0 del core de jQuery
2os formas de acceder al n.mero de elementos que hay en un objeto jQuery, a travs del mtodo size*+ y
la propiedad len%th.
>amos a ver en este art!culo cmo obtener el n*mero de elementos que tiene el objeto jQuery. )omo pudimos aprender
previamente en nuestro manual de jQuery, este frame"or# $avascript tiene como base la llamada Dfuncin jQueryD que
devuelve el objeto jQuery, en el que &ay uno o varios elementos de la pgina, seg*n el selector que se le &aya pasado.
,n un pasado art!culo de DesarrolloWeb.com ya e-plicamos con detalle qu era la funcin jQuery y cmo utili%arla. ues
bien, a&ora veremos rpidamente cmo saber cuntos elementos encontramos y seleccionamos por medio de esta funcin,
lo que puede ser *til por diversos motivos al &acer cdigo $avascript.
2.5.1.- Mtodo size34 del +ore de jQuery
,ste mtodo sirve, como decimos, para obtener el n*mero de elementos seleccionados con la funcin jQuery. 3implemente
devuelve el n*mero de elementos que &ay en el objeto, como un entero.
or ejemplo, veamos este cdigo(
var parrafos = '("p"*;
alert ("!ay " W parrafos+si"e(* W " p>rrafos en la p>gina"*;
)on la primera l!nea selecciono todos los prrafos de la pgina y los meto en el objeto jQuery de la variable DparrafosD.
:ediante la segunda l!nea muestro el n*mero de prrafos encontrados, con una llamada al mtodo si%e01.
@o tiene ms misterio, salvo que en jQuery e-iste otro modo de &acer esto, pero bastante ms rpido.
odemos ver una pgina en marc&a con este ejemplo de uso de si%e01.
2.5.2.- $ropiedad lengt0 del o'jeto jQuery
'a propiedad lengt&, que e-iste en cualquier objeto jQuery, nos sirve para obtener el n*mero de elementos de la pgina que
&emos seleccionado. 'o interesante de esta propiedad es que almacena directamente este valor, por lo que es ms rpido y
ms aconsejable que calcular los elementos seleccionados con el mtodo si%e01.
Banto el mtodo si%e01 con la propiedad lengt& devolvern el mismo valor, siendo las *nicas diferencias la mencionada
rapide% adicional de la propiedad y el acceso a este valor, que como es una propiedad, se accede a travs del operador punto,
pero sin colocar los parntesis despus de lengt&. or ejemplo, veamos este cdigo(
var Dle-entos=itexto = '("+-itexto"*;
alert ("!ay " W Dle-entos=itexto+lengt, W " ele-entos de la clase -itexto"*;
)on la primera l!nea estamos utili%ando la funcin jQuery para seleccionar todos los elementos de la pgina que tienen la
clase )33 Dmite-toD. )on la segunda l!nea se muestra en una caja de alerta el n*mero de elementos seleccionados con
,lementos:ite-to.lengt&.
odemos ver el cdigo completo de una pgina que &ace uso de este mtodo(
<,t-l
<,ead
<titlepropiedad lengt, del core 0?uery<$title
29
<script
$$selecciono todos los ele-entos de la clase "-itexto"
var Dle-entos=itexto = '("+-itexto"*;
$$-uestro el nX-ero de los p>rrafos encontrados
alert ("!ay " W Dle-entos=itexto+lengt, W " ele-entos de la clase -itexto"*;
6*;
<$script
<$,ead
<body
<pDsto es un p>rrafo nor-al<$p
<p class="-itexto"Dsto es un p>rrado de la clase "-itexto"<$p
<divKn div nor-al<$div
<div class="-itexto"&,ora un div de la clase "-itexto"<$div
<$body
<$,t-l
ara acabar, dejamos el enlace a una pgina donde se puede ver el ejemplo de la propiedad lengt& del objeto jQuery en
funcionamiento.
2.7.- Mtodo data34 +ore jQuery
El mtodo data*+ del core de jQuery sirve para almacenar informaci#n en los elementos de la p$%ina, en
pares nombre de variable y valor. !eremos tambin el mtodo remove2ata*+ para eliminar datos
almacenados.
3eguimos viendo componentes interesantes del D)oreD de jQuery, donde estn las clases y mtodos ms bsicos de este
frame"or# $avascript. ,n esta entrega del manual de jQuery de DesarrolloWeb.com, e-plicaremos el uso del mtodo data01 y
removeData01, que sirven para almacenar, consultar y eliminar cualquier tipo de dato en elementos de la pgina.
,n algunas ocasiones resulta *til almacenar variables u objetos en determinados elementos de la pgina. 2unque qui%s no
es una accin muy corriente en los primeros pasos con jQuery, en el futuro encontraris que resulta *til y veris
&erramientas y plugins que utili%an este mecanismo para su operativa. De modo que conviene al menos saber que esto es
posible y conocer de qu manera podemos utili%ar los elementos de la pgina para guardar cosas en ellos.
ara ello vamos a comentar dos mtodos distintos que forman parte del core de jQuery(
2.7.1.- Mtodo data34
,ste mtodo del objeto jQuery sirve tanto para guardar un dato en un elemento como para consultarlo. 3eg*n el n*mero de
parmetros que reciba, reali%a una u otra accin.
3i recibe un parmetro data0nombre1( devuelve el valor que &aya en el dato cuyo nombre se pasa por parmetro.
3i recibe dos parmetros data0nombre, valor1( almacena un dato, cuyo nombre recibe en el primer parmetro, con el
valor que recibe en el segundo parmetro.
)omo data01 es un mtodo que pertenece al objeto jQuery, podemos almacenar estos pares 0dato, valor1 en cualquiera de los
elementos que seleccionemos con la funcin jQuery01.
>eamos un caso de uso simple. or ejemplo tenemos un elemento de la pgina como este(
<div id="capa"
Dn esta divisi#n (ele-ento id="capa"* voy a guardar y leer datos sobre este ele-ento+
<$div
2&ora podr!amos usar le mtodo data01 de la siguiente manera(
30
'("#capa"*+data("-idato"5"-ivalor"*;
)on esta l!nea &emos guardado un dato llamado DmidatoD con el valor DmivalorD, en el elemento con identificador 0atributo
id1 DcapaD.
2&ora podr!amos leer ese dato en cualquier momento para acceder a su valor, de la siguiente manera(
alert('("#capa"*+data("-idato"**;
,n esta l!nea de cdigo e-traemos el dato DmidatoD del elemento con identificador DcapaD y lo mostramos en una caja de
alerta.
odemos ver una pgina en marc&a que &ace uso de esas dos funciones.
2.7.2.- Mtodo remove#ata34
,ste mtodo sirve para eliminar un dato de un elemento y su funcionamiento es tan simple como enviar por parmetro el
dato que se quiere eliminar del elemento.
'("#capa"*+re-ove:ata("-idato"*
)on esta l!nea &abr!amos eliminado el dato llamado DmidatoD del elemento con identificador DcapaD.
2.7..- /jemplo completo de los mtodos data34 y remove#ata34 del +ore de jQuery
>eamos un ejemplo completo del uso de estos mtodos que acabamos de aprender. 3e trata de una pgina que tiene un
elemento sobre el que vamos a guardar datos. 2dems tiene tres botones para guardar un dato, leerlo y borrarlo. ,l dato que
se guardar tendr como valor lo que se &aya escrito en un campo de te-to que aparece tambin en la pgina.
Benemos, para comen%ar, un elemento de la pgina, que es donde vamos a guardar los pares datoGvalor con data01.
<div id="division"
Dn esta divisi#n (ele-ento id="division"* voy a guardar datos con la funci#n data y luego los voy a
leer+
<$div
'uego tendremos este formulario, que contiene el campo de te-to as! como los tres botones de los que &emos &ablado.
<for- na-e="for-ul"
Dscribe un valor a guardar5 leer o eli-inar:
<input type="text" na-e="valor" id="valor"
<br
<input type="button" value="guardar dato" id="guardar"
<input type="button" value="leer dato" id="leer"
<input type="button" value="eli-inar dato" id="eli-inar"
<$for-
2&ora se trata de asignar los comportamientos a estos botones con $avascript, &aciendo uso de jQuery.
,ste ser!a el script para agregar el evento clic# al botn de guardar datos.
'("#guardar"*+click(function(evento*4
var valor = docu-ent+for-ul+valor+value;
$$Dsta -is-a l3nea de c#digo se puede codificar as3 ta-biYn con 0?uery
$$var valor = '("#valor"*+attr("value"*;
'("#division"*+data("-idato"5valor*;
'("#division"*+,t-l()!e guardado en este ele-ento (id="division"* un dato lla-ado "-idato" con el
valor ") W valor W )")*;
6*;
)omo se puede ver, primero se recibe el te-to del campo de te-to que &ab!a en el formulario. ara ello se muestran dos
maneras de &acerlo(
2 travs de la jerarqu!a de objetos del navegador, con document.formul.valor.value
2 travs de su identificador, con un mtodo de jQuery llamado attr01 que sirve para recuperar el valor de un
atributo AB:' pasado por parmetro sobre el elemento que recibe el mtodo. ,ste modo de obtener el atributo
31
value del campo de te-to est comentado, pues slo lo quer!a seEalar, para que se vea el modo de acceder a un
elemento de formulario utili%ando las funciones del frame"or# $avascript jQuery.
'uego, se guarda el dato DmidatoD con el valor que se recuper del atributo value del campo de te-to. ara ello utili%amos el
mtodo data01 tal como comentbamos.
or *ltimo se muestra un mensaje en el AB:' del elemento con idCDdivisionD, por medio del mtodo &tml01 de jQuery,
para informar sobre la accin que acabamos de reali%ar.
2&ora mostramos el cdigo para asignar un comportamiento al evento clic# sobre el segundo botn(
'("#leer"*+click(function(evento*4
valor = '("#division"*+data("-idato"*;
'("#division"*+,t-l()Dn este ele-ento (id="division"* leo un dato lla-ado "-idato" con el valor
") W valor W )")*;
6*;
)omo se puede ver, se recupera el valor del dato DmidatoD guardado sobre el elemento DLdivisionD 0etiqueta AB:' con
idCDdivisionD1, y se almacena en una variable. 'uego se crea un mensaje para mostrar el valor del dato.
ara acabar, tenemos el cdigo del evento clic# sobre el botn de eliminar el contenido de un dato, que &ace uso de
removeData01.
'("#eli-inar"*+click(function(evento*4
'("#division"*+re-ove:ata("-idato"*;
'("#division"*+,t-l()&cabo de eli-inar del ele-ento (id="division"* el dato lla-ado "-idato")*;
6*;
)omo se ver, el mtodo removeData01 se invoca sobre el elemento que tiene el dato que pretendemos eliminar. :s tarde
se muestra un mensaje informando sobre la accin que se &a reali%ado.
ara comprobar el funcionamiento de estos mtodos &abr!a que crear un dato, escribiendo el valor en el campo de te-to y
pulsando el botn Dguardar datoD. 'uego podr!amos leer ese dato con el botn Dleer datoD. or *ltimo podr!amos eliminar el
dato con el botn Deliminar datoD. 3i, una ve% eliminado pulsamos sobre el botn de Dleer datoD veremos que el valor del
dato aparece como DundefinedD, puesto que ese dato &a sido borrado 0esto tambin ocurre si no se &a guardado ning*n dato
todav!a, por ejemplo cuando se acaba de cargar la pgina1.
3er!a interesante ver el cdigo fuente completo de esta pgina, para &acernos una idea ms e-acta de cmo se integrar!an
todos estos elementos. <,t-l
<,ead
<titleD0e-plos de uso de la funci#n data del core de 0?uery<$title
<script
var valor = docu-ent+for-ul+valor+value;
$$Dsta -is-a l3nea de c#digo se puede codificar as3 ta-biYn con 0?uery
$$var valor = '("#valor"*+attr("value"*;
'("#division"*+data("-idato"5valor*;
'("#division"*+,t-l()!e guardado en este ele-ento (id="division"* un dato lla-ado "-idato" con
el valor ") W valor W )")*;
6*;

'("#leer"*+click(function(evento*4
valor = '("#division"*+data("-idato"*;
'("#division"*+,t-l()Dn este ele-ento (id="division"* leo un dato lla-ado "-idato" con el
valor ") W valor W )")*;
6*;

'("#eli-inar"*+click(function(evento*4
'("#division"*+re-ove:ata("-idato"*;
'("#division"*+,t-l()&cabo de eli-inar del ele-ento (id="division"* el dato lla-ado
"-idato")*;
6*;
6*;
<$script
<$,ead
32
<body
<div id="division"
Dn esta divisi#n (ele-ento id="division"* voy a guardar datos con la funci#n data y luego los voy a
leer
<$div
<br
<for- na-e="for-ul"
Dscribe un valor a guardar5 leer o eli-inar:
<input type="text" na-e="valor" id="valor"
<br
<input type="button" value="guardar dato" id="guardar"
<input type="button" value="leer dato" id="leer"
<input type="button" value="eli-inar dato" id="eli-inar"
<$for-
<$body
<$,t-l
De nuevo, dejamos el enlace al ejemplo en marc&a.
ara seguir os indicamos la lectura del siguiente art!culo de este manual, donde puedes obtener e-plicaciones adicionales y
ejemplos de uso de estos mtodos data01 y removeData01.
2.@.- +onsideraciones interesantes de data34 y remove#ata34
,hora veremos al%unos puntos interesantes y nuevos ejemplos sobre el funcionamiento de los mtodos
data*+ y remove2ata*+ de jQuery.
,-isten algunos puntos que debemos conocer sobre el funcionamiento de estos mtodos que no &emos e-plicado todav!a
en el art!culo anterior, en el que se comen% a tratar acerca de data01 y removeData01. >eamos a continuacin una serie de
consideraciones(
#dmite cual&uier tipo de dato: odemos guardar lo que deseemos por medio del mtodo data01. 'os ejemplos anteriores
&emos guardado simplemente cadenas de te-to, pero soportar!a cualquier tipo de variable, numrica, un array o incluso un
objeto $avascript o jQuery.
'e guarda un dato por cada elemento del obeto !uer" selecionado: ,n caso que en el objeto jQuery sobre el que
estemos almacenando cosas con data01 &aya referencias a varios elementos de la pgina, el dato se almacena en todos los
elementos. 0recordemos que, seg*n lo e-plicado anteriormente en desarrollo"eb.com, un objeto jQuery puede tener
seleccionados varios elementos de la pgina, como todos los enlaces presentes, los elementos de una determinada clase )33,
etc. dependiendo del selector escogido al &acer uso de la funcin dlar1
Los obetos se almacenan por referencia: ,n el caso que estemos almacenando un objeto $avascript con data01 sobre uno
o varios elementos, no se copia el objeto, sino que se asigna por referencia. ,sto quiere decir que no se &ar!an copias
independientes del objeto a guardar, sino que permanecer!a tal cual y lo que se asignar!a como dato es una referencia a ese
*nico objeto.
2&ora, para investigar un poco sobre estas posibilidades, &emos creado un par de ejemplos un poco ms complejos que
&acen uso de los mtodos data01 y removeData01. 3on ejemplos ms avan%ados, que &acen uso de algunas cosas que no
&emos e-plicado todav!a en este manual de jQuery. @o obstante, vendr bien verlos para aprender algunos usos de estas
funcionalidades.
ara empe%ar, quiero mostrar una pgina de ejemplo donde e-isten tres enlaces y dos botones. 2l pulsar cualquiera de los
enlaces mostraremos el contenido de un dato almacenado en ellos con data01. 'os botones, por su parte, servirn para
almacenar contenidos en datos sobre esos enlaces. 2dems tendremos una capa con idCDmensajeD que nos servir para
mostrar cosas por pantalla.
33
,l cdigo de los elementos AB:' ser el siguiente(
<a ,ref="#" id="enlace1"Dnlace 1<$a
<br
<br
<br
<br
<div id="-ensa0e"
=ensa0e+++
<$div
<br
<button id="guardar"guardar "-idato" con valor "-ivalor" en todos los enlaces<$button
<br
<button id="guardarenlace1"guardar "-idato" con valor "otro valor" en el enlace 1<$button
2&ora veamos cmo aplicar eventos a los elementos de la pgina, para almacenar datos y mostrarlos.
)omencemos por el cdigo de los eventos de los botones.
'("a"*+data("-idato"5"-ivalor"*;
'("#-ensa0e"*+,t-l()!e guardado en todos los enlaces un dato lla-ado "-idato" con el valor
"-ivalor")*;
6*;
)on este cdigo estamos almacenando datos en todos los enlaces. )abe fijarse que con la funcin jQuery J0DaD1 obtenemos
un objeto jQuery donde estn todos los enlaces de la pgina. 'uego, al invocar data01 sobre ese objeto, estamos almacenado
ese dato en todos los enlaces e-istentes.
'("#guardarenlace1"*+click(function(evento*4
'("#enlace1"*+data("-idato"5"otro valor"*;
'("#-ensa0e"*+,t-l()!e guardado en el enlace1 un dato lla-ado "-idato" con el valor "otro
valor")*;
6*;
,n este otro cdigo del evento clic# para el segundo botn, almacenamos Dotro valorD sobre el dato de antes, pero slo lo
&acemos sobre el enlace 7, dado que &emos utili%ado el selector J0DLenlace7D1, con el identificador *nico del primer enlace.
H a&ora podr!amos ver el cdigo para asignar un evento a todos los enlaces, para que al pulsarlos nos muestre lo que &aya en
el dato almacenado con data01, si es que &ay algo.
valor&l-acenado = '(t,is*+data("-idato"*;
'("#-ensa0e"*+,t-l("Dn el enlace <b" W '(t,is*+attr("id"* W "<$b tiene el dato )-idato) co-o "
W valor&l-acenado*;
6*;
)omo se puede ver, estamos creando un evento clic#, pero lo estamos &aciendo sobre los tres enlaces que &ay en la pgina a
la ve%, dado el selector utili%ado en la funcin jQuery J0DaD1. 'uego el cdigo del evento ser el mismo para los tres enlaces.
'o primero que se &ace es un evento.preventDefault01 que permite que el enlace no tenga el comportamiento t!pico 0ir a la
9=' del &ref1. 2 continuacin &acemos(
)omo se puede ver, se est e-trayendo el valor almacenado en el enlace actual, que recibe el evento. )on J0t&is1 obtenemos
el objeto jQuery del elemento que &a recibido el evento, que es el enlace sobre el que se &a pulsado y no todos los enlaces.
)on el mtodo data0DmidatoD1, invocado sobre J0t&is1, obtenemos el valor del dato DmidatoD almacenado en el enlace que
fue pulsado solamente.
'uego se muestra un mensaje para indicar el valor que &ab!a en el dato. ero claro, este cdigo, como es com*n para todos
los enlaces, tiene que acceder tambin a J0t&is1 para saber qu enlace en concreto fue el que se puls. ara identificar el
enlace se &ace J0t&is1.attr0DidD1, que devuelve el atributo DidD del enlace sobre el que se &i%o clic.
2 continuacin se puede ver el cdigo completo de esta pgina.
<,t-l
34
<,ead
<script
'("#-ensa0e"*+,t-l("Dn el enlace <b" W '(t,is*+attr("id"* W "<$b tiene el dato )-idato) co-o
" W valor&l-acenado*;
6*;

"-ivalor")*;
6*;

valor")*;
6*;
6*;
<$script
<$,ead
<body
<br
<br
<br
<br
<div id="-ensa0e"
=ensa0e+++
<$div
<br
<button id="guardar"guardar "-idato" con valor "-ivalor" en todos los enlaces<$button
<br
<button id="guardarenlace1"guardar "-idato" con valor "otro valor" en el enlace 1<$button
<$body
<$,t-l
3i se desea, se puede ver el ejemplo en marc&a en una pgina aparte. &t
2.@.1.- #atos de tipo o'jeto asignados por re)erencia con data34
3obre el punto que comentbamos antes, sobre los objetos $avascript que se asignan por medio de data01, que siempre se
&ace por referencia, &emos creado otro ejemplo, del que simplemente vamos a colocar un enlace para verlo en
funcionamiento y su cdigo. &ttp(??""".desarrollo"eb.com?articulos?ejemplos?jquery?core?dataF.&tml
,l ejemplo es bastante similar al anterior, con la salvedad que se &a creado un par de acciones adicionales para almacenar en
los elementos variables de tipo objeto.
'uego, al operar sobre esos datos de tipo objeto, comprobamos que en realidad slo e-iste un objeto compartido por todos
los elementos a los que fue asignado. ,s decir, no se &icieron copias del objeto, sino que se asignaron en los datos
simplemente su referencia.
uede verse este ejemplo en marc&a en una pgina aparte.
,l cdigo completo se puede ver a continuacin.
<,t-l
35
<,ead
<script
'("a+enlaceal-acenar"*+click(function(evento*4
var valor&l-acenado = '(t,is*+data("-idato"*;
var -ensa0e = "Dn el enlace <b" W '(t,is*+attr("id"* W "<$b tiene el dato )-idato) co-o " W
valor&l-acenado;
var valor&l-acenado8 = '(t,is*+data("-iob0eto"*;
-ensa0e W= "<br&de->s5 ,e le3do un dato lla-ado )-iob0eto) con valor " W valor&l-acenado8;
'("#-ensa0e"*+,t-l(-ensa0e*;
6*;

"-ivalor")*;
6*;

valor")*;
6*;

'("#guardarob0eto"*+click(function(evento*4
'("a"*+data("-iob0eto"5'("#capapruebas"**;
'("#-ensa0e"*+,t-l()!e guardado todos los enlaces un dato lla-ado "-iob0eto" con el valor un
ob0eto 2ue es el ob0eto 02uery de seleccionar la capa con id "capapruebas")*;
6*;

'("#operarob0etoenlace1"*+click(function(evento*4
'("#enlace1"*+data("-iob0eto"*+,t-l("ca-bio el ,t-l del ob0eto 2ue ,ay en el dato )-iob0eto)
del )enlace1)"*;
6*;

'("#operarob0etoenlace8"*+click(function(evento*4
'("#-ensa0e"*+,t-l("Dste es el !I=L 2ue ,ay en el ob0eto asociado a enlace8 en el dato
)-iob0eto):<br" W '("#enlace8"*+data("-iob0eto"*+,t-l(**;
6*;

6*;
<$script
<$,ead
<body
<a ,ref="#" id="enlace1" class="enlaceal-acenar"Dnlace 1<$a
<br
<br
<br
<br
<div id="-ensa0e"
=ensa0e+++
<$div
<br
<ol style="line-,eig,t: 800V;"
<li
<a id="guardar" ,ref="#"guardar "-idato" con valor "-ivalor" en todos los enlaces<$a
36
<$li
<li
<a id="guardarenlace1" ,ref="#"guardar "-idato" con valor "otro valor" en el enlace 1<$a
<$li
<li
<a id="guardarob0eto" ,ref="#"guardar "-iob0eto" con una referencia a la capa de pruebas<$a
<$li
<li style="line-,eig,t: 100V;"
<a id="operarob0etoenlace1" ,ref="#".ecuperar un ob0eto del enlace1 para ,acer cosas con Yl
<C/&E style="font-si"e: 8pt; font-9eig,t: bold"
/KLC&. DCID DEL&BD CZL< :DC/K[C :D !&%D. &L=&BDE&:< DL <%\DI< DE L<C DEL&BDC /<. =D:@< :DL DEL&BD :D
DCI& L@CI& =&.B&:< B<=< 7*
<$C/&E
<$a<$li
<li style="line-,eig,t: 100V;"
<a id="operarob0etoenlace8" ,ref="#".ecuperar un ob0eto del enlace8 para ,acer cosas con Yl
<C/&E style="font-si"e: 8pt; font-9eig,t: bold"
/KLC&. DCID DEL&BD CZL< :DC/K[C :D !&%D. &L=&BDE&:< DL <%\DI< DE L<C DEL&BDC /<. =D:@< :DL DEL&BD :D
DCI& L@CI& =&.B&:< B<=< 7*
<$C/&E
<$a<$li
<$ol
<br
<br
<div id="capapruebas"
Dste es el texto de una capa de pruebas+++ con id="capapruebas"
<$div
<$body
<$,t-l
Aemos visto diversos ejemplos de uso de data01 y removeData01, mtodos bsicos de jQuery. uede que a&ora no se les
encuentre muc&a utilidad, pero nos servirn para resolver problemas futuros y entender cmo funcionan diversos plugins o
componentes ms avan%ados de jQuery.
or lo que respecta al )ore de jQuery, ya &emos visto diversas funcionalidades en desarrollo"eb.com en art!culos de este
manual. or a&ora lo vamos a dejar por aqu!, aunque &ay diversos mtodos del )ore que no &emos llegado a ver. ,n los
pr-imos art!culos pasaremos pgina y comen%aremos a ver otros temas interesantes que nos permitirn e-plotar un poco
ms nuestra creatividad, poniendo en marc&a utilidades ms cercanas a lo que pueden ser nuestras necesidades del d!a a d!a.
37
Parte 3:
Selectores de jQuery
%omenzamos a analizar en pro-undidad las di-erentes maneras *ue tenemos en '(uer"
de seleccionar con'untos de elementos de la p&gina) a tra+1s de distintos tipos de
selectores.
.1.- <electores en jQuery
0os selectores sirven para seleccionar elementos de la p$%ina a partir de una cadena de texto que le
pasamos a la funci#n jQuery.
)omo la propia palabra indica, los selectores son un mecanismo, disponible en jQuery, para seleccionar determinados
elementos de la pgina. ,l selector no es ms que una cadena de caracteres, creada bajo unas normas que veremos a
continuacin, con la que podemos referirnos a cualquiera o cualesquiera de los elementos que &ay en una pgina.
Bodo en jQuery pasa por utili%ar los selectores, para acceder a los elementos de la pgina que deseamos alterar
dinmicamente con $avascript. Aasta en los ejemplos ms bsicos del :anual de jQuery se tienen que utili%ar selectores para
acceder a los elementos que deseamos alterar, as! que inevitablemente, si &as le!do este manual &asta este art!culo, los &abrs
utili%ado ya.
,n mi opinin, una de las cosas que ms potentes de jQuery son los selectores, al menos comparando este frame"or#
$avascript con otros que cono%co. >eremos en este art!culo cmo utili%arlos y aprovec&arnos de su potencia.
ara empe%ar, veamos un selector, para aclarar las ideas y refrescar la memoria. )uando utili%amos la funcin jQuery 0o
funcin dlar1 lo que pasamos como parmetro es el selector. 'a funcin jQuery devuelve justamente los elementos de la
pgina que concuerdan con el selector enviado por parmetro.
J0DpD1M
,n esa llamada a la funcin jQuery, estamos pasando por parmetro una cadena DpD y como dec!a, esa misma cadena es el
selector. ,n este caso, DpD es un selector que sirve para seleccionar todas las etiquetas de la pgina, es decir, los prrafos.
.1.1.- <electores '%sicos en jQuery
'os selectores, al menos los ms bsicos, son parecidos, o iguales, a los que se utili%an en )33 para seleccionar los elementos
a los que se desean aplicar ciertos estilos. )omo entiendo que todas las personas que intenten profundi%ar en el frame"or#
jQuery deben &aber conocido )33 anteriormente, no &abr ning*n problema con ellos.
'elector de eti&uetas:
3implemente indicamos la etiqueta a la que deseamos referirnos, es decir, la etiqueta que queremos seleccionar.
/btendremos con l todas las etiquetas de la pgina indicada en el selector.
J0D&7D1 ??selecciona todos los encabe%ados de nivel 7
'elector por identificador:
3irven para seleccionar los elementos que tengan un identificador dado, que se asigna a las etiquetas a travs del atributo id
del AB:'. ara utili%ar este selector se indica primero el carcter DLD y luego el identificador de cuyo elemento se desee
seleccionar.
38
J0DLidelementoD1 ??selecciona una etiqueta que tiene el atributo idCDidelementoD
'elector por clase:
odemos indicar el nombre de una clase 0class de )331 y seleccionar todos los elementos a los que se &a aplicado esta clase.
ara ello, como en )33, comen%amos colocando el carcter D.D y luego el nombre de la clase que deseamos seleccionar.
J0D.miclaseD1 ??selecciona todos los elementos que tienen el atributo classCDmiclaseD
'elector por (arias clases:
3i lo deseamos, podemos indicar varias clases )33, para obtener todos los elementos que tienen esas clases aplicadas( todas
al mismo tiempo. ,sto se consigue comen%ando por un D.D, igual que los selectores de clases, y luego otro D.D para separar
las distintas clases que queremos utili%ar en el selector.
J0D.clase7.clase;D1 ??selecciona los elementos que tienen classCDclase7 clase;D
'elector asterisco )*):
@os sirve para seleccionar todos los elementos de la pgina.
J0DUD1 ??selecciona todos los elementos que tiene la pgina
+oncatenar (arios selectores distintos:
or *ltimo, podemos utili%ar varios selectores, para obtener todas las etiquetas que cumplen uno de ellos. @o &ace falta que
cumplan todos los selectores a la ve%, sino con que uno de ellos concuerde es suficiente. ara ello colocamos todos los
selectores que deseamos, separados por una coma D,D.
J0Ddiv,pD1 ??selecciona todos los elementos divisin y prrafo
J0D.clase7,.clase;D1 ??selecciona los elementos que tienen la clase Dclase7D o Dclase;D
J0DLmiid,.miclase,ul1 ??selecciona el elemento con idCDmiidD, los elementos con classCDmiclaseD y todas las listas 9'
.1.2.- +onclusin so're los selectores
Aasta este punto &emos visto los selectores bsicos de jQuery, que nos servirn para &acer la mayor!a de nuestros ejemplos
y resolver tambin la mayor parte de las necesidades de seleccin de elementos que nos podamos encontrar en ejemplos
reales. 3in embargo, el frame"or# $avascript incluye una buena gama de selectores adicionales que pueden venirnos bien en
algunos casos ms concretos y que dejamos para pr-imos art!culos.
Nota: 3i todavia no &as quedado muy claro, pode!s pasaros por el >ideotutorial sobre los selectores en jQuery
2&ora, os recomendamos seguir el aprendi%aje con el siguiente art!culo, en el que pondremos en prctica los selectores que
&emos conocido &asta el momento( ,jemplo para practicar con selectores de jQuery.
.2.- /jemplo para practicar con selectores en jQuery
Ejemplo de p$%ina que nos permitir$ hacer pr$cticas con los selectores de jQuery.
,n el art!culo anterior e-plicamos lo que eran los selectores de jQuery y los tipos de selectores bsicos. 2&ora, para que
podamos ver por la prctica cmo funcionan cada uno de los selectores, &emos creado un ejemplo donde podremos escribir
varios selectores y ver cmo funcionan, es decir, qu elementos de la pgina se consigue seleccionar con cada uno.
,n este ejemplo tenemos una pgina que tiene varias etiquetas y un formulario. ,n el formulario &ay un campo de te-to y
un botn. ,n el campo de te-to podemos escribir cualquier selector y pulsando luego el botn, mediante jQuery, &acemos
que parpadeen los elementos que concuerdan con ese selector.
,l ejemplo puede verse en una pgina aparte.
39
#claracin: or cierto, comento una cosa que resulta para la mayor!a debe resultar obvia, pero qui%s alguien pueda cometer el error. ,n los
ejemplos del art!culo anterior, escrib!amos los selectores entre comillas, porque un selector es una cadena de caracteres. ero en este caso, en
la pgina del ejemplo, en el campo de te-to &ay que escribir los selectores sin las comillas. 3i ponemos las comillas en realidad ser!a como
intentar &acer un selector que incluyese el carcter comillas D. ,sto es porque en el propio campo de te-to cualquier cosa que escribamos ya es
una cadena de caracteres de por si.
ara &acer este ejemplo tenemos que utili%ar varios mtodos y funciones jQuery de los cuales, casi todos, ya &emos &ablado
a lo largo del manual.
>eamos el formulario que &emos creado en la pgina(
<for-
Celector: <input type="Iext" na-e="ca-poselector" id="ca-poselector"
<input type="button" id="boton" value="]er 2uY ele-entos seleccionas"
<$for-
Bo-o se puede ver5 tiene un ca-po @E/KI de texto al 2ue le ,e-os puesto un identificador para
referirnos a Yl -ediante 0?uery+ Ni0arse ta-biYn el @E/KI para ,acer un bot#n5 al 2ue ta-biYn le
pusi-os un identificador+
&,ora vea-os el c#digo \avascript e-pleado:
'("#boton"*+click(function(evento*4
var selectorDscrito = '("#ca-poselector"*+attr("value"*;
if (selectorDscrito==""*4
alert("Dscribe algo en el ca-po de texto"*
6else4
ele-entosCeleccionados = '(selectorDscrito*;
ele-entosCeleccionados+fade<ut("slo9"5 function(*4
ele-entosCeleccionados+fade@n("slo9"*;
6*;
6
6*;
6*;
)on document.ready01 indicamos una funcin a invocar cuando la pgina est lista para recibir acciones de programacin
que modifiquen su estructura.
)on J0DLbotonD1.clic#01 indicamos una funcin a ejecutar cuando se &ace clic sobre el botn.
var selector,scrito C J0DLcamposelectorD1.attr0DvalueD1M
@os sirve para acceder al atributo value del campo de te-to, es decir, a lo que &aya escrito dentro.
3i no &ay nada escrito en el campo, muestro un mensaje de alerta, porque en este caso el selector cadena vac!a no ser!a
valido y recibir!amos un mensaje de error.
3i &ab!a algo en el campo, pues selecciono con jQuery los elementos de la pgina que corresponden con el selector escrito
en el campo de te-to. ,so se &ace con la l!nea(
elementos3eleccionados C J0selector,scrito1M
'uego, sobre el elemento o elementos seleccionados, invoco el mtodo fade/ut01, que sirve para ocultar elementos de la
pgina. 2 fade/ut01 le paso dos parmetros, uno es la velocidad con la que tiene que &acer el efecto y otro es una funcin
callbac#, a ejecutar slo en el momento que el efecto &aya concluido. ,so es con la l!nea(
elementos3eleccionados.fade/ut0Dslo"D, function01V
or *ltimo, en la funcin callbac# reali%amos una llamada al mtodo fade+n01 sobre el mismo objeto jQuery resultado de
aplicar el selector anterior, que sirve para que los elementos ocultados se muestren de nuevo en la pgina. ,sto *ltimo con la
l!nea(
elementos3eleccionados.fade+n0Dslo"D1M
,n resumen, ocultando y mostrando luego los elementos de vuelta conseguimos ese parpadeo. 3i nos resulta e-traEo este
cdigo, recordamos que en el :anual de jQuery de desarrollo"eb.com ya &emos publicado varios art!culos que aclaran los
40
puntos tratados en este ejemplo, como los efectos rpidos o las funciones callbac#.
.2.1.- +digo completo del ejemplo de selectores
,scribimos aqu! para acabar el cdigo completo de este ejemplo de trabajo con selectores.
<,t-l
<,ead
<titleI3tulo de la p>gina<$title
+ro0o4
color: #cc0000;
6
+verde4
color: #00cc00;
6
+a"ul4
color: #0000cc;
6
+fondogris4
background-color: #cccccc;
6
body4
font-fa-ily: verdana5 arial5 ,elvetica;
6
div4
-argin-botto-: Opx;
6
<$style
<script
'("#boton"*+click(function(evento*4
var selectorDscrito = '("#ca-poselector"*+attr("value"*;
if (selectorDscrito==""*4
alert("Dscribe algo en el ca-po de texto"*
6else4
ele-entosCeleccionados = '(selectorDscrito*;
ele-entosCeleccionados+fade<ut("slo9"5 function(*4
ele-entosCeleccionados+fade@n("slo9"*;
6*;
6
6*;
6*;
<$script
<$,ead
<body
<,1Celectores en 0?uery<$,1
<pDn esta p>gina ,ay varias eti2uetas+ &,ora con este for-ulario puedes escribir un selector5 para
seleccionar algunas con 0?uery5 y luego pulsar el bot#n para ver 2uY ele-entos de la p>gina ,as
seleccionado+<$p
<for-
Celector: <input type="Iext" na-e="ca-poselector" id="ca-poselector"
<input type="button" id="boton" value="]er 2uY ele-entos seleccionas"
<$for-
<p id="p1" class="ro0o"Dste es un p>rrafo con id="p1" y class="ro0o"<$p
<p id="p8" class="verde"Dste es un p>rrafo con id="p8" y class="verde" y a2u3 <i-eto una
it>lica<$i<$p
<p id="p7" class="ro0o fondogris"Dste es un p>rrafo con id="p7" y class="ro0o fondogris" (es decir5
este ele-ento tiene aplicadas las clases "ro0o" y "fondogris"<$p
<p id="pO"Dste es un p>rrafo con id="pO"5 sin class<$p
<pDste es un p>rrafo con sin id ni class<$p
41
<div id="div1"Dsto es una divisi#n con id="div1"<$div
<div id="div8" class="ro0o"Dsto es una divisi#n con id="div8" y class="ro0o" y a2ui <b-eto una
negrita<$b<$div
<div id="div7" class="verde fondogris"Dsto es una divisi#n con id="div7" y class="verde
fondogris"<$div
<divDsto es una divisi#n sin id ni class<$div
<div class="a"ul"Dsto es una divisi#n sin id5 con class="a"ul"<$div
<bDsto es una eti2ueta b<$b
<iDsto es una eti2ueta i<$i
<$body
<$,t-l
Dejamos de nuevo el enlace para ver este ejemplo en marc&a y practicar con los selectores de jQuery.
..- <electores de Gerar2uHa en jQuery
)electores que sirven para seleccionar elementos atendiendo a la estructura o jerarqu-a de las etiquetas
de la p$%ina.
,n los *ltimos art!culos del :anual de jQuery &emos &ablado sobre los selectores. )omo ya dijimos, sirven para seleccionar
elementos de la pgina con los que queremos trabajar desde $avascript por medio del frame"or#. ,n concreto vimos los
selectores bsicos, con los que podremos resolver la mayor!a de nuestras necesidades en cuanto a seleccin de elementos.
@o obstante, en jQuery e-isten varios otros tipos de selectores, junto con algunos filtros, que &acen todav!a ms potente el
frame"or# de cara a acceder a las etiquetas o elementos que deseamos seleccionar. >amos a ver en este art!culo qu son los
selectores de jerarqu!a y algunos ejemplos de uso.
3abemos que la pgina est compuesta por etiquetas AB:' que se meten unas dentro de otras, formando una jerarqu!a de
etiquetas o de elementos. 'os selectores de $erarqu!a permiten utili%ar la propia estructura de la pgina para acceder a unos
elementos dados, que se seleccionan a travs de la jerarqu!a e-istente de etiquetas en la pgina. Dentro de stos, e-isten a su
ve% varias posibilidades, que &acen uso de criterios de descendencia, ascendencia, siguiente, anterior, etc.
'elector ancestor descendant:
3irve para seleccionar elementos de la pgina que son descendientes de otro y que adems se corresponden con un selector
dado. ara este selector se indican dos datos, separados por un espacio. rimero el selector para definir el elemento o
elementos antecesores y el segundo selector para definir el tipo de elementos que se tienen que seleccionar de entre los
descendientes.
'("p b"* $$selecciona todas las eti2uetas % 2ue ,ay dentro de las eti2uetas /
'("p+parraforo0o i"* $$selecciona todas las eti2uetas @ 2ue ,ay dentro de los p>rrafos con clase
"parraforo0o"+
'("table+-itabla td"* $$selecciona todas las eti2uetas I: 2ue ,ay en las tablas 2ue tienen
class="-itabla"
'elector parent , c-ild:
)on el selectorr parent W c&ild podemos acceder a elementos que sean &ijos directos de otros. ara ello indicamos un
selector como DparentD y un selector como Dc&ildD. @os seleccionar todos los elementos que son &ijos directos de parent y
que concuerdan con el selector c&ild.
'("p b"* $$selecciona todas las eti2uetas % 2ue son ,i0as directas de los p>rrafos+
'("#capa ^"* $$selecciona todas las eti2uetas 2ue son ,i0as directas del ele-ento con id="capa"
42
Nota: la diferencia entre Dancestor descendantD y Dparent W c&ildD es que este *ltimo slo selecciona los &ijos directos. or ejemplo, en el
AB:' siguiente(
<p<b/>rrafo<$b 2ue tiene alguna <bnegrita<$b e <span
class="algo"<iit>lica<$i<$span para seleccionar<$p
J0Dp W bD1 seleccionar!a los mismos elementos que J0Dp bD1, porque en este caso todas las etiquetas B son &ijas directas de .
ero en el caso de la itlica 0etiqueta +1, que est metida dentro del prrafo, pero dentro tambin de un span, J0Dp iD1 seleccionar!a la etiqueta +
por ser descendiente de , pero J0Dp W iD1 no seleccionar!a la etiqueta +, por no ser &ija directa de .
'elector pre( . ne/t:
)on este selector conseguimos acceder a las elementos que estn despus de otros, es decir, a las etiquetas que
concuerdan con el selector Dne-tD, que se abren despus de cerrar las etiquetas que concuerdan con el selector
DprevD.
'("p+parraforo0o W p"* $$Dsto selecciona los p>rrafos 2ue est>n despuYs de cual2uier p>rrafo 2ue
tenga la clase "parraforo0o"
'("i W b"* $$selecciona todas las negritas (eti2ueta %* 2ue ,ay despuYs de una it>lica (eti2ueta @*
'elector pre( 0 siblings:
3elecciona los elementos &ermanos que &ay a continuacin de los elementos que concuerden con el selector DprevD, que son
del tipo que se especifica con el selector DsiblingsD. 'os elementos &ermanos son los que estn en el mismo contenedor y se
encuentran en el mismo nivel de jerarqu!a.
'("#-iparrafo _ table"* $$selecciona los ele-entos I&%LD 2ue son ,er-anos del ele-ento con
id="-iparrafo"
'("#a8 _ div+clase"* $$selecciona los ele-entos ,er-anos del 2ue tiene el id="a8" 2ue sean eti2uetas
:@] con la class="clase"+
..1.- $ro'ando los selectores jQuery de Gerar2uHa
Aemos &ec&o un rpido script que prueba los selectores de jerarqu!a que estn disponibles en jQuery. ,s una simple pgina
que tiene una serie de elementos y un script para seleccionar y alterar su estilo. 'os elementos los vamos seleccionando con
diversos tipos de selectores de $erarqu!a que &emos visto en este art!culo de DesarrolloWeb.com. ,l ejemplo tendr!a el
siguiente cdigo( <,t-l
<,ead
<title/robando <$title
<script
$$selectores ancestor descendant
'("p i"*+css("color"5 "#``N"*;
'("table+-itabla td"*+css("background-color"5 "#PPff00"*;

$$selectores parent c,ild
'("p+parraforo0o b"*+css("color"5 "red"*;
'("+-itd ^"*+css("border"5 "1px solid #ffUU00"*;

$$selectores prev W next
'("i W b"*+css("font-si"e"5 "O0px"*;
'("+ele-lista W li"*+css("opacity"5 0+8*;
$$selectores prev _ siblings
'("#a8 _ div+clase"*+css("font-si"e"5 "180V"*;
'("#-iparrafo _ table"*+css("border"5 "7px dotted #dd``00"*;
6*;
<$script
<$,ead
<body
<p class="parraforo0o"
<i!ola<$i <besto<$b es un <bp>rrafo<$b ro0o <idonde<$i ,e <bpuesto<$b unas <bnegritas<$b
43
<$p
<p class="parraforo0o"<tro <bcon<$b clase class="parraforo0o" <span class="unspan"<b(esto est>
dentro de unspan %5 no depende directa-ente -no c,ild- del p>rrafo*<$b<$span<$p
<p!ola <besto<$b es otro <bp>rrafo <$bpara <iponer<$i otras <bnegritas<$b<$p
<p,ola111<$p
<table border=1
<tr
<td<iIabla cual2uiera<$i<$td
<tdDsta tabla <bno tiene<$b class de <bBCC<$b<$td
<$tr
<$table
<p id="-iparrafo"Dste es el p>rrafo con id="-iparrafo"<$p
<table class="-itabla" border=1
<tr
<td colspan=8Dsta tabla tiene una <bclase BCC<$b<$td
<$tr
<tr
<td<iclass="-itabla"<$i<$td
<td class="-itd"J este <btd<$b le ,e puesto <iclass="-itd"<$i <spanKna cosa<spanotra
cosa<$span<$span<$td
<$tr
<$table
<p<b/>rrafo<$b 2ue tiene alguna <bnegrita<$b e <span class="algo"<iit>lica<$i<$span para
seleccionar<$p
<div
<div id="a1",ola<$div <div id="a8"dos<$div <div id="a7"7<$div <spanBuatro (no es un div*QQQ
<$span <div id="aO" class="clase"Buatro de verdad<$div
<$div
<ul
<liDle- 1<$li
<li class="ele-lista"Dle- 8<$li
<liDle- 7<$li
<liDle- O<$li
<li class="ele-lista"Dle- P<$li
<li class="ele-lista"Dle- `<$li
<liDle- G<$li
<$ul
<$body
<$,t-l
44
Parte 4:
Mtodos de Attributes en
jQuery
E2ploramos di-erentes m1todos *ue e2isten en este -ramewor. /a+ascript para acceder
" modi-icar los atributos del D34) es decir) de los ob'etos o elementos *ue -orman parte
de una p&gina web.
1.1.- Acceder y modi)icar atri'utos ,-M. desde jQuery
En jQuery existe una funci#n llamada attr*+ que sirve para recuperar y alterar atributos de los elementos
de la p$%ina.
,n este :anual de jQuery estamos recorriendo poco a poco la documentacin del popular frame"or# $avascript, para
ofrecer a los lectores de DesarrolloWeb.com e-plicaciones detalladas de las clases y mtodos disponibles. 'e &a llegado el
turno al mtodo attr01 que sirve para trabajar con los atributos de los elementos de la pgina. ,ste mtodo, como muc&os
otros en jQuery tiene diferentes usos, dependiendo de los parmetros que le pasemos, pero siempre sirve para trabajar con
los atributos AB:', como pueden ser title, &eig&t, "idt&, &ref, value, etc.
,l uso es bien simple. Dado un objeto jQuery, invocando el mtodo attr01 sobre l, podemos acceder a sus atributos, para
recuperar sus valores, modificarlos o eliminarlos. >eremos los distintos usos conforme los parmetros que le pasemos.
ero antes de empe%ar, vale la pena comentar que la informacin que encontraris en este art!culo se complementa con el
siguiente te-to, en el que veremos otros usos de la funcin attr01.
1.1.1.- .ectura de un atri'uto
,l primer uso de attr01 es para recuperar el valor de un atributo. ,n este caso, el mtodo debe recibir una cadena con el
nombre del atributo que queremos recuperar.
2&ora podr!amos acceder a lo que &ay escrito en el campo de te-to de la siguiente manera(
'("#ca-potexto"*+attr("value"*
ero atencin, en el caso que invoquemos el mtodo attr sobre un objeto jQuery que contenga varios elementos a la ve%,
attr01 en este caso devolver!a el valor del atributo del primero de los elementos que &aya en el objeto jQuery. 2dems, en
caso que el elemento no tenga definido ese atributo al que se pretenda acceder, devolver!a undefined.
>eamos un ejemplo, tambin simple, pero un poco ms elaborado. Benemos varios enlaces en la pgina, con este cdigo
AB:'(
<a ,ref=",ttp:$$999+elpais+co-" title=":iario Dl /a3s"Dl /a3s<$a
<br
<a ,ref=",ttp:$$999+-o"illa+org" title="Nundaci#n =o"illa"=o"illa Nundation<$a
<br
<a ,ref=",ttp:$$es+openoffice+org$" title="Ciute de progra-as de oficina"<pen <ffice<$a
3i &acemos algo como esto(
45
'("a"*+attr("title"*
/btendremos el valor del atributo title del primero de los enlaces. )omo tenemos tres enlaces en la pgina, J0DaD1 nos
devolver!a un objeto jQuery que contiene esos tres enlaces, pues recordar, que attr0DtitleD1 devuelve el valor del atributo
DtitleD del primero de los elementos del objeto jQuery. 2&ora bien, si quisiramos obtener el valor del atributo DtitleD de
todos los elementos, tendr!amos que &acer un recorrido a cada uno de los enlaces con el mtodo eac& del core de jQuery
&ttp(??""".desarrollo"eb.com?articulos?coreGeac&Gjquery.&tml.
>eamos un ejemplo de una pgina completa que &ace ese recorrido con eac& para recuperar todos los valores de los
atributos title de los enlaces que &aya en la pgina(
<,t-l
<,ead
<title-Ytodo attr<$title
<script

'("a"*+eac,(function(i*4
var titulo = '(t,is*+attr("title"*;
alert("&tributo title del enlace " W i W ": " W titulo*;
6*;

6*;
<$script
<$,ead
<body
<a id="enlace1" ,ref=",ttp:$$999+elpais+co-" title=":iario Dl /a3s"Dl /a3s<$a
<br
<a ,ref=",ttp:$$999+-o"illa+org" title="Nundaci#n =o"illa"=o"illa Nundation<$a
<br
<a ,ref=",ttp:$$es+openoffice+org$" title="Ciute de progra-as de oficina"<pen <ffice<$a
<$body
<$,t-l
1.1.2.- Modi)icar un atri'uto
2&ora vamos a ver un uso de attr01 en el que no leemos el atributo, sino que lo modificamos. ,n este caso la funcin recibe
dos cadenas de te-to, la primera con el nombre del atributo y la segunda con el nuevo valor que queremos asignar. or
ejemplo(
'()li)*+attr("type"5 "s2uare"*;
,sto &ar!a que todos los elementos de lista tengan un bullet de tipo cuadrado.
3i lo deseas, puedes ver el ejemplo en marc&a en una pgina aparte.
1.1..- Modi)icar varios valores de atri'utos a la vez
Bambin podemos utili%ar el mtodo attr01 pasando un objeto con pares atributo?valor. ,sto sirve para modificar de una
sola ve% varios atributos sobre los elementos que &aya en un objeto jQuery y si esos atributos no e-ist!an, simplemente los
crea con los valores enviados en el objeto.
2 estas alturas ya debemos saber crear variables con notacin objeto, pero voy a dejar un ejemplo para que se pueda ver
perfectamente este uso del mtodo.
+maginar que tenemos varios enlaces en la pgina, y que queremos modificar sus atributos, para todos los enlaces a la ve%.
'()a)*+attr(4
)title): )Iitle -odificado por 0?uery)5
),ref): ),ttp:$$999+desarrollo9eb+co-)5
)style): )color: #f80)
6*;
46
2 partir de la ejecucin de la sentencia anterior todos los title de los enlaces tendrn el valor DBitle modificado por jQueryD.
'as 9='s a las que enla%arn los lin# sern siempre la &ome de Desarrollo Web y adems se les crear un estilo )33 para
que sean de color naranja.
odemos ver una pgina aparte con este ejemplo en marc&a.
,n el siguiente art!culo veremos un ejemplo ms elaborado sobre la modificacin de atributos de elementos a travs de la
funcin attr01, en el que para obtener el valor del atributo a modificar utili%amos una funcin que pasamos tambin como
parmetro a attr01. 2dems, para los interesados en aprender en v!deo puede accederse a las funciones de 2ttibutes en el
>ideotutorial de jQuery.
1.2.- Mtodo attr34 de jQuery! otros usos y removeAttr34
"n uso adicional del mtodo attr*+ de jQuery, para modificar atributos con el valor devuelto de una
funci#n y borrar atributos de elementos de la p$%ina con remove,ttr*+.
,n el art!culo anterior del :anual de jQuery ya comen%amos a e-plicar el mtodo attr01, que pertenece al paquete de
funciones para modificacin de atributos de cualquiera de los elementos de una pgina "eb. ,n esta ocasin nos
detendremos un uso adicionale del mtodo attr01, que seguro nos resultarn *tiles para mantener el control dinmico de los
atributos de las etiquetas AB:', con sus correspondientes ejemplos. ,ste uso que nos faltaba por ver nos servir cuando
tenemos que asignar el valor de un atributo con la respuesta de una funcin $avascript.
2dems veremos tambin en este art!culo otro mtodo relacionado que sirve para eliminar por completo un atributo de
cualquier elemento de la pgina, el mtodo remove2ttr01.
1.2.1.- Asignar un valor de atri'uto procesado por una )uncin
odemos tambin enviar una funcin para procesar el valor que queremos asignar a un atributo. ara ello enviamos a attr01
dos parmetros, el primero con el nombre del atributo y el segundo con la funcin que debe devolver el valor a asignar a
dic&o atributo.
ara ilustrar este uso de attr01 mostraremos un ejemplo en el que desde jQuery accedemos a los elementos +@9B de la
pgina que tienen la clase )33 Dfec&aD y le insertamos como te-to a mostrar la fec&a de &oy. ara obtener el d!a actual
necesitamos procesar cierto cdigo $avascript y para ello crearemos una funcin que devuelve la cadena de te-to con la
fec&a.
'()input+fec,a)*+attr("value"5 function(indice&rray*4
$$indice&rray tiene el 3ndice de este ele-ento en el ob0eto 0?uery
var f = ne9 :ate(*;
return f+get:ate(* W "$" W (f+get=ont,(* W1* W "$" W f+getNullJear(*;
6*;
ara que se asimile mejor el uso de jQuery en una pgina, mostramos el cdigo completo de este ejemplo.
<,t-l
<,ead
<title-Ytodo attr<$title
<script

'()input+fec,a)*+attr("value"5 function(indice&rray*4
$$indice&rray tiene el 3ndice de este ele-ento en el ob0eto 0?uery
var f = ne9 :ate(*;
return f+get:ate(* W "$" W (f+get=ont,(* W1* W "$" W f+getNullJear(*;
6*;

6*;
47
<$script
<$,ead
<body
<for-
<input type="text" class="fec,a"
<input type="text" class="nofec,a"
<input type="text" class="fec,a"
<$for-
<$body
<$,t-l
3i se desea, se puede ver en marc&a el ejemplo en una pgina aparte.
1.2.2.- /liminar un atri'uto de uno o varios elementos con removeAttr34
ara acabar vamos a ver otro mtodo distinto de los objetos jQuery, que sirve para borrar un atributo. ,ste sencillo mtodo,
llamado remove2ttr01, simplemente recibe una cadena con el nombre del atributo que queremos eliminar y lo borra del
elemento. ,s decir, no es que se asigne un nuevo valor a un atributo, como ocurr!a con el mtodo attr01, sino que ese
atributo se borra por completo de la etiqueta, con lo cual no e-istir en ning*n caso, tomando el valor por defecto, si es que
e-iste, que tenga configurado el navegador.
ara mostrarlo vamos a &acer un ejemplo en el que tenemos una celda de una tabla con no"rap, con lo que el te-to de esa
celda aparece todo en la misma l!nea. 'uego quitamos el atributo y veremos que el te-to de la celda se partir en varias
l!neas. ,sto lo &acemos simplemente enviando el valor DnoWrapD al mtodo remove2ttr01.
,l cdigo de este ejemplo es el siguiente.
<,t-l
<,ead
<title-Ytodo re-ove&ttr<$title
<script

'("#boton"*+click(function(i*4
'("td"*+re-ove&ttr("no;rap"*;
6*;

6*;
<$script
<$,ead
<body
<table 9idt,="P0"
<tr
<td no9rap
Dsta celda tiene un no9rap5 con lo 2ue todo el texto se -uestra en la -is-a l3nea1
/ero real-ente la tabla -ide P0 pixeles de anc,ura5 luego tendr3an 2ue aparece varias l3neas1
<$td
<$tr
<$table
<input type="%utton" id="boton" value="?uitar no9rap"
<$body
<$,t-l
9n detalle es que en la l!nea que se &ace la llamada al mtodo remove2ttr0DnoWrapD1, el nombre del atributo DnoWrapD
tiene que estar escrito con la DWD may*scula para que funcione en ,-plorer.
odemos ver el ejemplo de remove2ttr01 en marc&a en una pgina aparte.
48
1..- Dunciones +<< de jQuery para conocer el tama;o y
posicin de elementos
)e%uimos viendo funciones ()) del framework Javascript jQuery, en este caso las que sirven para conocer
el tama'o y posici#n de los elementos en la p$%ina.
,ntre las clasificaciones de funciones jQuery que e-isten diversas que sirven para controlar los atributos de )33 de los
elementos de la pgina, ya sea para acceder a los valores actuales de los atributos )33 o para alterarlos. ,n art!culos
anteriores del :anual de jQuery pudimos conocer varias de estas funciones, por ejemplo en el art!culo de 2Eadir y quitar
clases )33 sobre elementos.
,n este art!culo vamos a ver otras de las funciones que pone a nuestra disposicin jQuery para acceder a la posicin de los
elementos en la pgina y a sus dimensiones. ,stas funciones, aunque estar!a mejor llamarles mtodos 0ya que pertenecen al
objeto jQuery1, son meramente informativas, para saber dnde estn posicionados los elementos dentro del documento y
sus medidas internas y e-ternas. 'o veremos con detalle en breve, pero antes quiero seEalar para los despistados que si
queremos alterar las propiedades )33 de un elemento de la pgina con jQuery recordemos que est disponible el mtodo
css01, que &emos visto anteriormente en repetidas ocasiones a lo largo de este manual, envindole como primer parmetro el
nombre del atributo )33 a alterar y como segundo parmetro el valor del mismo.
2&ora voy a dar un listado de los mtodos nuevos que vamos a ver en este art!culo, comen%ando por los que sirven para
conocer las dimensiones de un elemento.
12todos inner3idt-() e inner4eig-t():
=eciben un objeto jQuery y devuelven las dimensiones internas del primer elemento que &aya en dic&o objeto jQuery, esto
es, la anc&ura y altura respectivamente del elemento contando el padding del elemento pero no el borde.
12todos outer3idt-() e outer4eig-t():
=eciben un objeto jQuery y devuelven las dimensiones e-ternas del primer elemento de dic&o objeto jQuery recibido por
parmetro, esto es, la anc&ura y altura respectivamente del elemento contando el padding del elemento y su borde.
Nota: )omo podremos imaginarnos, si un elemento no tiene borde los valores de innerWidt& e outerWidt& sern e-actamente los mismos,
as! como los valores de innerAeig&t y outerAeig&t.
12todos offset() " position():
2mbos mtodos devuelven la posicin de un elemento en la pgina. =eciben un objeto jQuery y devuelven la locali%acin
del primer elemento que &aya en ese objeto jQuery. 'a posicin siempre se indica como valor de retorno del mtodo por
medio de un objeto que tiene dos atributos, DtopD y DleftD, indicando los p!-eles que est separado de la esquina superior
i%querda del documento. 'a diferencia entre estos dos mtodos es que offset01 indica la posicin del elemento real, teniendo
en cuenta los mrgenes del elemento, lo que suele ser ms *til. or su parte, position01 indica la posicin donde &abr!a sido
posicionado el elemento si no tuviera mrgenes, lo que a menudo no es la posicin real.
Nota: ara acceder a los valores top y left del objeto de retorno podemos &acer algo as!(
posicion.eal = '("#idele-ento"*+offset(*;
alert(posicion.eal+top*;
alert(posicion.eal+left*;
1..1.- Duncin 2ue muestra las dimensiones de un elemento
or &acer unas pruebas con estos mtodos, vamos a comen%ar creando una funcin que muestra en una caja de alerta las
dimensiones de un elemento cuyo selector se env!e por parmetro. 2 la funcin enviaremos el selector y luego con jQuery
mostraremos sus valores de anc&ura y altura, tanto de la parte interior del elemento 0innerWidt& e innerAeig&t1, como del
elemento completo con su borde 0outerWidt& y outerAeig&t1.
function di-ensionBapa(capa*4
capa = '(capa*;
49
var di-ensiones = "";
di-ensiones W= ":i-ensiones internas: " W capa+inner;idt,(* W "x" W capa+inner!eig,t(*;
di-ensiones W= "an:i-ensiones externas: " W capa+outer;idt,(* W "x" W capa+outer!eig,t(*;
alert(di-ensiones*;
6
)omo dec!amos, las dimensiones e-ternas toman en cuenta el borde del elemento, si es que tiene, y las dimensiones internas
no toman en cuenta el posible borde.
1..2.- Duncin para mostrar la posicin de un elemento
2&ora vamos a &acer una funcin similar a la anterior para mostrar un ejemplo de uso de las funciones position01 y offset01.
,sta funcin recibe un selector y muestra la locali%acin de este elemento, tal como me la devuelven los mtodos position01
y offset01.
function posicionBapa(capa*4
capa = '(capa*;
var posicion = "";
posicion W= "/osici#n relativo al docu-ento:anLDNI: " W capa+offset(*+left W "anI</:" W
capa+offset(*+top;
posicion W= "anan/osici#n si no tuviera -argen:anLDNI: " W capa+position(*+left W "anI</:" W
capa+position(*+top;
alert(posicion*;
6
3i invocamos esta funcin sobre un elemento cualquiera que no tenga margen, las dos posiciones devueltas por position01 y
offset01 sern las mismas, pero si aplicamos un margen a ese elemento, el elemento cambiar de lugar en la pgina y entonces
el valor de offset01 tambin cambir, pero no el de position01.
1...- /jemplo completo so're los mtodos de dimensiones y posicin de elementos
'as dos funciones anteriores las podemos ver en marc&a en un ejemplo que &emos creado para poder e-plicar mejor todos
los mtodos comentados en este art!culo de DesarrolloWeb.com.
,n el ejemplo simplemente se reali%an las acciones para averiguar las posiciones y dimensiones de un par de elementos de la
pgina. 2dems, tenemos un par de botones para alterar el )33 de los elementos dinmicamente y as! volver a ver sus
posiciones y dimensiones y comprobar cmo &an cambiado.
=ealmente no sirve de muc&o el ejemplo, pero al menos esperamos que resultar bastante didctico. odemos verlo en
marc&a en una pgina aparte.
2&ora el cdigo de este ejemplo, que no deber!a resultar muy complicado si &emos seguido el manual de jQuery &asta este
punto.
<,t-l
<,ead
<titleNunciones BCC en 0?uery<$title
<script src="++$02uery-1+O+1+-in+0s"<$script
<script type="application$x-0avascript"
function di-ensionBapa(capa*4
capa = '(capa*;
var di-ensiones = "";
di-ensiones W= ":i-ensiones internas: " W capa+inner;idt,(* W "x" W capa+inner!eig,t(*;
di-ensiones W= "an:i-ensiones externas: " W capa+outer;idt,(* W "x" W capa+outer!eig,t(*;
alert(di-ensiones*;
6
function posicionBapa(capa*4
capa = '(capa*;
var posicion = "";
posicion W= "/osici#n relativo al docu-ento:anLDNI: " W capa+offset(*+left W "anI</:" W
capa+offset(*+top;
posicion W= "anan/osici#n si no tuviera -argen:anLDNI: " W capa+position(*+left W "anI</:" W
capa+position(*+top;
alert(posicion*;
6
50
'("#botondi-ensiones"*+click(function(*4
di-ensionBapa("#capa1"*;
6*;
'("#botonposicion"*+click(function(*4
posicionBapa("#capa1"*;
6*;
'("#botonta-ano"*+click(function(*4
'("#capa1"*+css("9idt,"5 800*;
6*;
'("#boton-argen"*+click(function(*4
'("#capa1"*+css("-argin"5 80*;
6*;
'("#botondi-ensionesc8"*+click(function(*4
di-ensionBapa("#capa8"*;
6*;
'("#botonposicionc8"*+click(function(*4
posicionBapa("#capa8"*;
6*;
6*;
<$script
<$,ead
<body
<,1Nunciones BCC en 0?uery de di-ensiones y posici#n<$,1
<p/robando funciones de locali"aci#n de ele-entos en la p>gina+++<$p
<div id="capa1" style="padding: 8Opx; background-color: #ffccdd; float: left; border: 8px dotted
#```;"
<,8capa1:<$,8
]oy a crear esta capa para ver lo 2ue -ide y donde est> posicionada+
<$div
<br style="clear: bot,;"
<div style="-argin: 10px;"
<button id="botondi-ensiones" type="button":i-ensiones de capa1<$button
<button id="botonposicion" type="button"/osicion de capa1<$button
<button id="botonta-ano" type="button"Ba-biar ta-aAo capa1<$button
<button id="boton-argen" type="button"Ba-biar -argen capa1<$button
<$div
<div style="-argin: 10px;"
<button id="botondi-ensionesc8" type="button":i-ensiones de capa8<$button
<button id="botonposicionc8" type="button"/osicion de capa8<$button
<$div
<br
:espla"a la p>gina ,acia aba0o para ver la capa8+++
<br
<br
+++
<br
<div id="capa8" style="background-color:#ccc; border-botto-: Ppx solid #UUU; -argin-left: 10px;"
Dsta capa est> -uy ,acia aba0o11
<$div
<$body
<$,t-l
ara acabar, podemos ver este script funcionando en una pgina aparte.
51
Parte 5:
!entos en jQuery
!os e+entos son una parte -undamental en el desarrollo de aplicaciones enri*uecidas del
lado del cliente. 5prendemos todo sobre los e+entos en '(uer".
5.1.- /ventos en jQuery
"na introducci#n al trabajo con eventos en el framework Javascript jQuery.
'os eventos son uno de los elementos ms importantes en el desarrollo de aplicaciones "eb enriquecidas del lado del
cliente, puesto que sirven para reali%ar acciones en la pgina a medida que el usuario reali%a cosas con la pgina. ,s decir,
son la base para crear la interaccin con el usuario, algo tan importante en las pginas que usan jQuery.
2s! pues, merece la pena estudiar los eventos a fondo, algo que &aremos a lo largo de ste y varios siguientes art!culos del
:anual de jQuery. @o obstante, cabe decir que, a lo largo del presente manual, &emos ya trabajado en repetidas ocasiones
con eventos, ya que es complicado reali%ar ejemplos en pginas "eb que no tengan aunque sea una m!nima interaccin con
el cliente. )asi siempre nos &emos limitado al evento clic, pero &ay muc&o ms.
)omen%aremos por refrescar lo que ya deber!amos saber sobre los eventos, que aprendimos en uno de los primeros
art!culos del presente manual( asos para utili%ar jQuery en tu pgina "eb.
Nota: uedes ver el videotutorial +ntroduccin a los eventos en jQuery para que te sea ms sencillo todo.
2 la vista de este cdigo que trabaja con eventos podemos entender un poco mejor cmo funcionan en jQuery(
'("+-ienlace"*+click(function(-ievento*4
-ievento+prevent:efault(*;
alert("!as ,ec,o clicnBo-o ,e ,ec,o prevent:efault5 no te llevarY al ,ref"*;
6*;
7. ,l evento se define sobre todos los elementos de un objeto jQuery. ,n este ejemplo se define sobre el objeto
jQuery obtenido al invocar el selector D.mienlaceD1, que devolver!a todos los elementos que tienen el atributo class
como DmienlaceD. or tanto definir un evento sobre un n*mero variable de elementos de la pgina que
concuerden con ese selector.
;. ,l tipo de evento se define a partir de una funcin clic#01 o similares. ,-isten diferentes tipos de funciones que
implementan cada uno de los eventos normales, como dblclic#01, focus01, #eydo"n01, etc.
F. )omo parmetro en la funcin clic#01 o similares tenemos que enviar una funcin, con el cdigo que pretendemos
ejecutar cuando se produ%ca el evento en cuestin.
O. 'a funcin que enviamos por parmetro con el cdigo del evento, en este caso la funcin a ejecutar al &acer clic,
tiene a su ve% otro parmetro que es el propio evento que estamos manejando. ,n el cdigo anterior tenemos la
variable DmieventoD, que es el evento que se est ejecutando y a travs de esa variable tenemos acceso a varias
propiedades y mtodos para personali%ar aun ms nuestros eventos.
4. )omo decimos, e-isten diversos tipos de propiedades y mtodos sobre el evento que recibo por parmetro. ,n este
caso utili%amos mievento.preventDefault01 para evitar el comportamiento por defecto de un enlace. )omo
sabemos, al pulsar un enlace el navegador nos lleva al &ref definido en la etiqueta 2 correspondiente, algo que
evitamos al invocar a preventDefault01 sobre nuestro evento.
)onven!a e-plicar todos estos puntos, aunque probablemente ya los conoc!amos, si es que &emos seguido con atencin este
52
:anual de jQuery. ,s importante que el lector tenga en mente esta estructura de trabajo con eventos para poder asimilar
fcilmente los nuevos conocimientos.
3i lo deseamos, podemos ver el anterior script en marc&a en una pgina aparte.
,n el ejemplo anterior vimos cmo reali%ar un evento clic, pero claro que no es el *nico evento que podemos aplicar a una
"eb. ,n el pr-imo art!culo veremos un listado de los tipos de evento disponibles en jQuery, pero antes de eso vamos a ver
un ejemplo adicional sobre eventos, en el que vamos a incorporar el evento dblclic# que aun no &ab!amos visto.
5.1.1.- /jemplo de evento d'lclic*
,l evento dobleGclic se produce cuando se reali%an dos clic seguidos sobre un mismo elemento. Bodos conocemos lo que es
un doble clic, por lo que no necesitamos muc&as ms e-plicaciones, no obstante, tenemos que saber que cuando se produce
un evento dobleGclic al mismo tiempo se estn produciendo eventos clic 0uno por cada uno de los ; clic del dobleGclic1. ara
aclarar este asunto &emos &ec&o el siguiente ejemplo.
Benemos una capa, en la que se puede &acer dobleGclic, pero que tambin tiene definido un evento clic. ,ntonces, al &acer
un doble clic podremos comprobar que se producen dos eventos clic y despus un dobleGclic.
,ste es el cdigo AB:' con el que vamos a trabajar(
<div id="-icapa" style="padding: 10px; background-color: #ffccUU; 9idt,: 1P0px; float: left;"!a"-e
dobleclick<$div
<div id="-ensa0e" style="padding: 10px; -argin-left: 180px;"&2u3 voy a colocar -ensa0es para 2ue
los leas+++<$div
ara poder saber cuntos clics y dobles clic que se reali%an, vamos a crear un par de variables $avascript para contarlos.
var nu-Blics = 0;
var nu-:obleBlics = 0;
2&ora veamos la programacin del evento clic(
'("#-icapa"*+click(function(e*4
nu-BlicsWW;
'("#-ensa0e"*+,t-l("Blic " W nu-Blics*;
6*;
)on J0DLmicapaD1 obtenemos el objeto jQuery de la capa donde &ay que &acer clic. )on el mtodo clic#01 sobre ese objeto
jQuery creamos el evento clic y la funcin que pasamos como parmetro contiene el cdigo a ejecutar cuando se &ace clic.
3e trata simplemente acumular 7 en la variable que cuenta los clics y luego se muestra un te-to en la capa de los mensajes.
'a programacin del evento para el doble clic se puede ver a continuacin(
'("#-icapa"*+dblclick(function(e*4
nu-:obleBlicsWW;
'("#-ensa0e"*+,t-l(":oble Blic " W nu-:obleBlics*;
6*;
)omo se puede ver, es un cdigo muy similar al anterior. 3implemente que se define el evento con el mtodo dblclic#01. ,n
el cdigo del evento acumulamos esta ve% 7 en la variable que cuenta el n*mero de dobles clic. 'uego en el mensaje
mostramos el n*mero de dobleGclic.
)on ello, al &acer clic o dobleGclic se mostrar el mensaje para ver la cuenta de clics y dobles clic reali%ados y podremos
comprobar que siempre se producen dos clics antes de cualquier doble clic.
,so es todo, aunque para completar esta informacin, puedes encontrar a continuacin el cdigo completo de este ejemplo
de uso de eventos en jQuery.
<,t-l
<,ead
<titleIraba0ando con eventos<$title
<script
var nu-Blics = 0;
var nu-:obleBlics = 0;
53

'("#-icapa"*+dblclick(function(e*4
nu-:obleBlicsWW;
'("#-ensa0e"*+,t-l(":oble Blic " W nu-:obleBlics*;
6*;
'("#-icapa"*+click(function(e*4
nu-BlicsWW;
'("#-ensa0e"*+,t-l("Blic " W nu-Blics*;
6*;
6*
<$script
<$,ead
<body
<,1Iraba0ando con eventos en 0?uery<$,1
<div id="-icapa" style="padding: 10px; background-color: #ffccUU; 9idt,: 1P0px; float:
left;"!a"-e dobleclick<$div
<div id="-ensa0e" style="padding: 10px; -argin-left: 180px;"&2u3 voy a colocar -ensa0es para 2ue
los leas+++<$div
<$body
<$,t-l
Qui%s quieras ver funcionando de este ejemplo de evento clic y dobleGclic.
,n este art!culo slo &emos conocido los manejadores de eventos clic y dobleGclic, pero &ay muc&os ms. ,n el pr-imo
art!culo presentaremos un listado de los tipos de manejadores de eventos disponibles en jQuery.
5.2.- Manejadores de eventos en jQuery
"n listado con los distintos manejadores eventos que podemos definir en jQuery, ordenados por los tipos
eventos de rat#n, eventos de teclado o cualquiera de los dos.
,n el cap!tulo anterior reali%amos una primera introduccin a los eventos en jQuery, que no resultaba muc&o ms que un
simple repaso a todo lo que &emos visto &asta el momento en el :anual de jQuery que venimos publicando en
DesarrolloWeb.com. 2&ora veremos un listado completo de todos los eventos que podremos reali%ar con este frame"or#
$avascript.
)on jQuery podemos implementar todos los eventos que e-isten en $avascript, y alguno un poco ms evolucionado, para los
que &ay una funcin propia para cada uno. 'o cierto es que la documentacin de jQuery, en la seccin de eventos, mantiene
una lista de los posibles mtodos para crear eventos, aunque estn me%clados con otra serie de propiedades y mtodos
relacionados con eventos. Ae aqu! un resumen de los tipos de eventos con sus funciones(
5.2.1.- 14 /ventos relacionados con el ratn
2 continuacin podemos ver una lista de los eventos que se pueden definir en jQuery que tienen que ver con el ratn. ,s
decir, cmo definir eventos cuando el usuario reali%a diferentes acciones con el ratn sobre los elementos de la pgina.
click()
3irve para generar un evento cuando se produce un clic en un elemento de la pgina.
dblclick()
ara generar un evento cuando se produce un doble clic sobre un elemento.
-o(er()
,sta funcin en realidad sirve para manejar dos eventos, cuando el ratn entra y sale de encima de un elemento. or tanto
espera recibir dos funciones en ve% de una que se env!a a la mayor!a de los eventos.
mousedo5n()
54
ara generar un evento cuando el usuario &ace clic, en el momento que presiona el botn e independientemente de si lo
suelta o no. 3irve tanto para el botn derec&o como el i%quierdo del ratn.
mouseup()
ara generar un evento cuando el usuario &a &ec&o clic y luego suelta un botn del ratn. ,l evento mouseup se produce
slo en el momento de soltar el botn.
mouseenter()
,ste evento se produce al situar el ratn encima de un elemento de la pgina.
mouselea(e()
,ste se desata cuando el ratn sale de encima de un elemento de la pgina.
mousemo(e()
,vento que se produce al mover el ratn sobre un elemento de la pgina.
mouseout()
,ste evento sirve para lo mismo que el evento mouseout de $ava3cript. 3e desata cuando el usuario sale con el ratn de la
superficie de un elemento.
mouseo(er()
3irve para lo mismo que el evento mouseover de $avascript. 3e produce cuando el ratn est sobre un elemento, pero tiene
como particularidad que puede producirse varias veces mientras se mueve el ratn sobre el elemento, sin necesidad de &aber
salido.
toggle()
3irve para indicar dos o ms funciones para ejecutar cosas cuando el usuario reali%a clics, con la particularidad que esas
funciones se van alternando a medida que el usuario &ace clics.
5.2.2.- 24 /ventos relacionados con el teclado
2 continuacin se muestran los eventos que pueden modeli%arse como respuesta a la pulsacin de teclas del teclado.
ke"do5n()
,ste evento se produce en el momento que se presiona una tecla del teclado, independientemente de si se libera la presin o
se mantiene. 3e produce una *nica ve% en el momento e-acto de la presin.
ke"press()
,ste evento ocurre cuando se digita un carcter, o se presiona otro tipo de tecla. ,s como el evento #eypress de $avascript,
por lo que se entiende que #eypress01 se ejecuta una ve%, como respuesta a una pulsacin e inmediata liberacin de la tecla, o
varias veces si se pulsa una tecla y se mantiene pulsada.
ke"up()
,l evento #eyup se ejecuta en el momento de liberar una tecla, es decir, al dejar de presionar una tecla que ten!amos pulsada.
Nota: a travs del objeto evento, que reciben las funciones que indiquemos como parmetro de estos mtodos, podemos saber qu tecla se
est pulsando, aparte de otras muc&as informaciones.
5.2..- 4 /ventos com'inados teclado o ratn
2&ora mostramos varios eventos que pueden producirse tanto por el ratn como por el teclado, es decir, como resultado de
una accin con el ratn o como resultado de presionar teclas en el teclado.
focusin()
,vento que se produce cuando el elemento gana el foco de la aplicacin, que puede producirse al &acer clic sobre un
elemento o al presionar el tabulador y situar el foco en ese elemento.
focusout()
/curre cuando el elemento pierde el foco de la aplicacin, que puede ocurrir cuando el foco est en ese elemento y
pulsamos el tabulador, o nos movemos a otro elemento con el ratn.
55
focus()
3irve para definir acciones cuando se produce el evento focus de $avascript, cuando el elemento gana el foco de la
aplicacin.
,sta enumeracin de los tipos de manejadores de eventos se completa con ejemplos y e-plicaciones adicionales en los
siguientes art!culos del :anual de jQuery.
5..- Introduccin ?'jeto evento en jQuery
Explicaciones iniciales sobre el objeto evento en jQuery y mostramos c#mo averi%uar la posici#n del
rat#n al producirse un evento en la p$%ina.
>amos a &acer un inciso en el :anual de jQuery para dar una breve introduccin al objeto evento en jQuery y ofrecer un
ejemplo bastante prctico, para saber cul es la posicin del ratn al producirse un evento. Digo inciso porque no vamos a
e-plicar todo lo que podremos encontrarnos en el objeto evento, sino que vamos a dar algunas nociones que deberemos
conocer para poder acompaEar los siguientes art!culos sobre eventos. ,n breve crearemos un art!culo que e-plique todas las
propiedades y mtodos de este importante objeto de jQuery.
'o cierto es que lo que vamos a e-plicar a&ora ya lo &ab!amos adelantado brevemente en otros art!culos anteriores en los
que comen%amos a ver los eventos de jQuery. )omo ya &emos empe%ado a utili%ar el objeto de evento, no deber!a
resultarnos del todo e-traEo, pero tenemos muc&as otras cosas que comentar.
'o que ya &emos visto es que, al definir un evento con jQuery, tenemos que escribir una funcin con el cdigo a ejecutar
cuando se produ%ca el evento. ,sa funcin recibe un parmetro, que es el obeto e(ento, que podemos utili%ar dentro de la
funcin del evento y que contiene diversas utilidades que pueden ser esenciales a la &ora de codificar el evento.
)omo cualquier otro objeto, el mencionado objeto de evento contiene diversas propiedades y mtodos, los cuales
detallaremos uno por uno ms adelante. 3in embargo, cabe decir que nosotros ya &emos utili%ado uno de los mtodos en
bastantes ejemplos a lo largo de este manual. 3e trata del mtodo preventDefault01 del objeto evento, que sirve para prevenir
0no reali%ar1 el comportamiento por defecto de ese evento que estamos codificando.
,l ejemplo que &emos reali%ado varias veces sobre preventDefault01 es cuando defin!amos un evento clic sobre un enlace.
)uando se &ace clic sobre un enlace, el navegador se mueve a la direccin del &ref de ese enlace y con preventDefault01
podemos evitar ese comportamiento por defecto de los enlaces. 2 continuacin vamos a ver un ejemplo distinto de uso de
las propiedades del objeto evento.
5..1.- Averiguar la posicin del ratn al 0acer clic
,n el objeto evento, entre otras muc&as cosas, e-isten dos propiedades que nos informarn sobre la posicin del ratn al
producirse ese evento(
pageP( que nos informa sobre el n*mero de p!-eles desde el lateral i%quierdo de la pgina.
pageH( con el n*mero de p!-eles desde la parte de arriba de la pgina.
>eamos el siguiente ejemplo(
'("#-iele-ento"*+click(function(e*4
'("#-iele-ento"*+,t-l("M: " W e+pageM W " - J: " W e+pageJ*
6*;
2l &acer clic en el elemento con idCDmielementoD se mostrarn las coordenadas P e H del lugar de la pgina donde se &i%o
clic. 'as coordenadas se mostrarn como te-to en la propia capa sobre la que se &a &ec&o clic.
3e puede ver una pgina con este cdigo en funcionamiento.
,ste cdigo se puede modificar fcilmente para que se muestre las coordenadas del ratn al &acer clic en la pgina,
independientemente de donde se &aga clic y no slo en un elemento en concreto.
56
'(docu-ent*+click(function(e*4
alert("M: " W e+pageM W " - J: " W e+pageJ*
6*;
)omo se puede ver, se &a indicado el evento Dclic#D sobre el objeto document, que e-iste en $avascript y que &ace referencia
a todo el documento que se est visuali%ando.
,l cdigo completo de una pgina que define este evento y utili%a las mencionadas propiedades del objeto evento es el
siguiente.
<,t-l
<,ead
<titleIraba0ando con el ob0eto evento<$title
<script
'(docu-ent*+click(function(e*4
alert("M: " W e+pageM W " - J: " W e+pageJ*
6*;
6*
<$script
<$,ead
<body
<,1Iraba0ando con el ob0eto evento<$,1
!a" clic en cual2uier parte de la p>gina+++
<$body
<$,t-l
odemos ver el ejemplo en funcionamiento en una pgina aparte.
Nota: en los ejemplos anteriores &emos visto cmo calcular la posicin del ratn al &acer clic. 3in embargo, nosotros podemos calcular la
posicin del ratn al producirse cualquier evento, ya que el objeto evento de jQuery est disponible para cualquier evento.
or ejemplo, con este cdigo mostramos la posicin del ratn al moverlo por la pgina, mostrando las coordenadas en el te-to de los titulares
&7 que pueda &aber en la pgina(
'(docu-ent*+-ouse-ove(function(e*4
'(",1"*+,t-l("M: " W e+pageM W " - J: " W e+pageJ*
6*;
3i lo deseas, puedes ver el script en marc&a aqu!.
)on las nociones que tenemos en este momento sobre el objeto evento podremos continuar con las e-plicaciones
sobre eventos, en las que utili%aremos varios aspectos de este objeto. 2s! pues, puedes continuar esta lectura
aprendiendo acerca de los ,ventos de ratn.
5.1.- /ventos de ratn en jQuery mouseenter y mouseleave
3r$ctica con eventos de rat#n en jQuery, en la que mostraremos el uso de mouseenter y mouseleave,
junto con el objeto evento, para averi%uar la posici#n del rat#n.
,n este art!culo de DesarrolloWeb.com veremos un ejemplo de pgina sencilla que utili%a eventos de ratn, para la
construccin de un sistema de tip muy simple, es decir, construiremos una serie de reas DcalientesD en la pgina, sobre las
que situando el ratn por encima, aparecer un mensaje e-plicativo que tenemos en otra capa.
)omo ya debemos de conocer, si &emos le!do &asta este punto el :anual de jQuery, e-isten diversos eventos que se invocan
57
al reali%ar acciones con el ratn, como clics, movimiento del puntero o posicionar el puntero sobre ciertos elementos. ,n
este art!culo utili%aremos mouseenter y mouseleave, que son los eventos ms interesantes y *tiles si queremos detectar el
momento en el que entramos con el puntero del ratn sobre un elemento o salimos de su superficie.
2dems, utili%aremos el objeto evento, que recibe la funcin con la que implementamos el manejador del evento, que tiene
diversos datos *tiles sobre el evento que se acaba de ejecutar. ,n este art!culo mostraremos cmo averiguar la posicin del
ratn en el momento de producirse el evento, que podemos e-traer con las propiedades pageP y pageH del objeto evento.
Nota: ara el que llegue aqu! sin &aber le!do otras informaciones sobre eventos en jQuery, le recomendamos comen%ar la lectura por el
art!culo de ,ventos en jQuery.
5.1.1.- /)ecto de tip simple en jQuery con los eventos mouseenter y mouseleave
,n el art!culo anterior mostramos cmo averiguar la posicin del ratn al &acer clic en un elemento. 2s! que a&ora vamos a
utili%ar esos conocimientos para &acer un sencillo ejemplo de eventos donde crearemos un t!pico efecto de tip. ara reali%ar
este efecto tendremos dos elementos, el primero ser un elemento visible en todo momento y el segundo ser un elemento
oculto, el tip, que se mostrar slo al pasar el ratn sobre el primer elemento.
ara reali%ar cosas cuando el ratn entra y sale de un elemento, utili%aremos los manejadores de eventos de jQuery
mouseenter y mouseleave, que se producen al entrar con el ratn sobre un elemento y al salir del elemento respectivamente.
2s! pues, los eventos mouseenter y mouseleave los tendremos que crear sobre el elemento que permanece siempre visible,
mostrando y ocultando la capa que contiene el tip.
>eamos antes que nada el AB:' que tendremos, con el elemento visible y su tip.
<div id="ele-ento1" style="background-color: #ccccff; padding: Ppx;"/asa el rat#n por enci-a de
este "ele-ento1"+<$div
<div class="tip" id="tip1"Dsto es para explicar algo sobre el ele-ento1<$div
2dems, al tip le &emos aplicado estilos por medio de )33(
background-color: #ffccUU;
padding: 10px;
display: none;
position: absolute;
'os estilos importantes aqu! son display( noneM 0para que el elemento est oculto inicialmente1 y position( absoluteM 0para que
lo podamos posicionar libremente por la pgina y sin afectar a otros elementos1.
>eamos a&ora el cdigo del evento mouseenter(
'("#ele-ento1"*+-ouseenter(function(evento*4
'("#tip1"*+css("left"5 evento+pageM W P*;
'("#tip1"*+css("top"5 evento+pageJ W P*;
'("#tip1"*+css("display"5 "block"*;
6*;
3implemente cambiamos las propiedades de )33 DleftD y DtopD de la capa del tip, asignando valores a travs de evento.pageP
y evento.pageH, las propiedades del objeto evento que nos dan la posicin del ratn. )on esto situamos la capa del tip en un
lugar pr-imo a donde estaba el ratn.
'uego se cambia el atributo de )33 display de la capa del tip, al valor Dbloc#D, que sirve para que ese elemento se vea en la
pgina.
2&ora veamos el evento mouseleave, para reali%ar acciones cuando sacamos el ratn de encima de un elemento.
'("#ele-ento1"*+-ouseleave(function(e*4
'("#tip1"*+css("display"5 "none"*;
6*;
3implemente cambiamos la propiedad )33 display del tip, para el valor DnoneD, que &ace que esa capa desapare%ca de la
pgina.
>eamos el cdigo completo de una pgina que implementa este mecanismo para producir tips en jQuery.
58
<,t-l
<,ead
<titleIraba0ando con eventos - Iip si-ple<$title
+tip4
background-color: #ffccUU;
padding: 10px;
display: none;
position: absolute;
6
<$style
<script
'("#ele-ento1"*+-ouseenter(function(e*4
'("#tip1"*+css("left"5 e+pageM W P*;
'("#tip1"*+css("top"5 e+pageJ W P*;
6*;
6*;

'("#ele-ento8"*+-ouseenter(function(e*4
'("#tip8"*+css("left"5 e+pageM W P*;
'("#tip8"*+css("top"5 e+pageJ W P*;
6*;
6*;
6*
<$script
<$,ead
<body
<,1Iraba0ando con eventos en 0?uery<$,1

<div id="ele-ento1" style="background-color: #ccccff; padding: Ppx;"/asa el rat#n por enci-a de
este "ele-ento1"+<$div
<p
Dste texto es para poner <a id="ele-ento8" ,ref="#"otro ele-ento con tip<$a+
<$p

<div class="tip" id="tip1"Dsto es para explicar algo sobre el ele-ento1<$div
<div class="tip" id="tip8"Dxplico -e0or este otro ele-ento con tip11<$div
<$body
<$,t-l
2&ora podemos ver el ejercicio en marc&a.
)on esto estamos aprendiendo un poco ms sobre eventos en jQuery. Aemos visto un par de aplicaciones interesantes de
eventos de ratn, concretamente mouseenter y mouseleave ero aun nos quedan bastantes cosas por ver que dejaremos para
pr-imos art!culos.
Nota: Benemos un video titulado D>ideotutorial( manejo de eventos al detalle en jQueryD que os puede ayudar con esto de los eventos.
5.5.- /ventos de teclado en jQuery
(#mo trabajar con eventos de teclado en jQuery y saber qu teclas han pulsado los usuarios, a travs de
la propiedad which del objeto evento.
59
,stamos aprendiendo sobre los eventos en jQuery y a&ora vamos a &acer una prctica con los eventos de teclado, es decir,
con la definicin de acciones cuando el usuario presiona las teclas. 'a manera de trabajar con eventos de teclado no difiere
muc&o de la que ya &emos conocido en el manual de jQuery, pero con los eventos de teclado &ay algo que todav!a no &emos
visto y que resulta fundamental. 3e trata que, cuando se produce el evento de teclado, en el objeto evento de jQuery tenemos
una propiedad que nos sirve para saber cul es la tecla pulsada, para &acer cosas en nuestros scripts personali%adas en
funcin de la tecla presionada por el usuario.
'os eventos de teclado, en principio, son tres, como vimos en el art!culo :anejadores de eventos en jQuery, #eydo"n,
#eypress y #eyup. =ealmente no act*an por separado, sino que se produce una combinacin de stos al ir presionando y
soltando las teclas, como se puede deducir de las e-plicaciones del mencionado art!culo.
Nota: 3i pulsamos y soltamos una tecla, primero se produce un evento #eydo"n, al presionar la tecla, luego un #eypress y por *ltimo un
#eyup al soltarla.
3i &acemos una pulsacin prolongada de una tecla este esquema var!a, pues se produce un #eydo"n y luego un #eypress. :ientras se mantiene
pulsada la tecla en bucle se van produciendo eventos #eydo"n y #eypress, repetidas veces &asta que finalmente se suelta la tecla y se produce
un #eyup.
,n el caso de las teclas )B=', :ay*sculas o 2'B, se producen m*ltiples #eydo"n &asta que se suelta la tecla y se produce un #eyup. ,s decir,
al pulsar una de estas teclas no se produce el evento #eypress.
5.5.1.- <ecuencia de eventos de teclado
>amos a aprender cul es la secuencia con la que se producen los eventos de teclado, con un pequeEo ejemplo prctico.
3e trata de &acer una funcin que detecte cualquier evento de teclado, muestre el tipo de evento que &a ocurrido y lo
muestre en la pgina. 2s! podremos ver los eventos que se producen, sean cuales sean, y en qu orden.
rimero podr!amos definir la funcin que va a procesar los eventos(
function operaDvento(evento*4
'("#loescrito"*+,t-l('("#loescrito"*+,t-l(* W evento+type W ": " W evento+9,ic, W "5 "*
6
,sta funcin recibe el evento y escribe en una capa el tipo de evento, que se consigue con la propiedad type del objeto
evento, y luego un cdigo de la tecla pulsada, que se consigue con la propiedad "&ic& del objeto evento.
Nota: el tipo de evento no no &ab!amos visto todav!a, pero es otra de las propiedades que encontramos en el objeto evento que recibe la
funcin que tiene el cdigo a ejecutar por el evento. ,sta propiedad type simplemente es un string con la cadena que identifica el tipo de
evento que se est procesando 0D#eydo"nD, D#eyupD, Dclic#D o cualquier otro1. 'a tecla pulsada, que se obtiene con la propiedad "&ic&, la
trataremos con detalle dentro de poco.
2&ora podr!amos &acer que cualquier evento de teclado invoque esta funcin con el cdigo(
'(docu-ent*+keypress(operaDvento*;
'(docu-ent*+keydo9n(operaDvento*;
'(docu-ent*+keyup(operaDvento*;
)omo &emos asociado los eventos al objeto document de $avascript, estos eventos se pondrn en marc&a cada ve% que se
pulse una tecla, independientemente de dnde est el foco de la aplicacin 0o donde est escribiendo el usuario1.
,sto se puede ver en marc&a en una pgina aparte.
)reo que merece la pena presentar el cdigo completo del anterior ejemplo(
<,t-l
<,ead
<titleIraba0ando con eventos de teclado en 0?uery<$title
<script
function operaDvento(evento*4
'("#loescrito"*+,t-l('("#loescrito"*+,t-l(* W evento+type W ": " W evento+9,ic, W "5 "*
6
60
'(docu-ent*+keypress(operaDvento*;
'(docu-ent*+keydo9n(operaDvento*;
'(docu-ent*+keyup(operaDvento*;
6*
<$script
<$,ead
<body
<,1Dventos de teclado en 0?uery<$,1
<div id="loescrito"<$div
<$body
<$,t-l
5.5.2.- Averiguar 2u tecla )ue pulsada
2 travs de la propiedad "&ic& del objeto evento de jQuery podemos saber qu tecla &a sido pulsada cuando se produce el
evento de teclado. ,sta propiedad contiene un n*mero entero con el cdigo 9nicode de la tecla pulsada. Aaremos un
ejemplo para e-plicarlo.
Benemos un te-tarea y escribiendo algo en l, mostraremos la tecla pulsada en una capa, independiente del te-tarea. ,ste
ser el cdigo AB:' que necesitaremos para el ejemplo(
<for-
<textarea cols=700 ro9s=8 id="-itexto"Dscribe algo a2u31<$textarea
<br
<bIecla pulsada:<$b
<br
<$for-
2&ora definiremos con jQuery el evento #eypress, para mostrar la tecla pulsada.
'("#-itexto"*+keypress(function(e*4
e+prevent:efault(*;
'("#loescrito"*+,t-l(e+9,ic, W ": " W Ctring+fro-B,arBode(e+9,ic,**;
6*;
)on e.preventDefault01M &acemos que no se escriba nada en el te-tarea, osea, estamos in&ibiendo el comportamiento
&abitual del evento, que es escribir las teclas en el te-tarea, que no tiene muc&o que ver con nuestro ejemplo, pero que est
bien para ver cmo funciona.
'uego escribimos en la capa con id DloescritoD el cdigo de 9nicode de esa tecla y luego su conversin a un carcter normal,
a travs de la funcin esttica de la clase 3tring from)&ar)ode01.
,l cdigo completo del ejercicio es el siguiente.
<,t-l
<,ead
<titleIraba0ando con eventos de teclado en 0?uery<$title
<script
'("#-itexto"*+keypress(function(e*4
e+prevent:efault(*;
'("#loescrito"*+,t-l(e+9,ic, W ": " W Ctring+fro-B,arBode(e+9,ic,**
6*;
6*
<$script
<$,ead
<body
<,1Dventos de teclado en 0?uery<$,1
<,8&veriguar 2uY tecla se est> pulsando<$,8
<for-
<textarea cols=700 ro9s=8 id="-itexto"Dscribe algo a2u31<$textarea
<br
<bIecla pulsada:<$b
<br
61
<$for-
<$body
<$,t-l
)on esto &abremos aprendido ya a manejar eventos de teclado, aunque os recomendamos e-perimentar vosotros mismos
con este tipo de eventos modificando el script y ver nuestro >ideotutorial( manejo de eventos al detalle en jQuery .
5.7.- #e)inir eventos con 'ind34 y eliminarlos con un'ind34
El mtodo bind*+ sirve para definir eventos de manera %enrica, de cualquier tipo. (on el mtodo
unbind*+ podemos eliminar un manejador cualquiera indicado con bind*+.
2 lo largo del :anual de jQuery ya &emos aprendido bastantes cosas sobre los eventos en este frame"or# $avascript.
Aemos conocido cmo a partir de diversos mtodos como clic#01, mouseenter01 y similares, podemos asignar un manejador
de evento 0una funcin1 a un tipo de evento concreto.
2&ora vamos a aprender a utili%ar una *nica funcin de jQuery para definir cualquier tipo de evento, lo que ser!a como una
manera genrica de definir eventos, de cualquier tipo, sobre elementos de la pgina. 2dems mostraremos cmo se puede
eliminar un evento, quitando un posible manejador de eventos definido con anterioridad.
2prendimos en el pasado a definir eventos por medio de unas funciones espec!ficas para cada tipo de evento. or ejemplo(
'("#ele-1"*+click(function(*4
$$evento clic sobre el ele-ento con id "ele-1"
6*;
'("#ele-8"*+-ouseenter(function(*4
$$evento de entrar con el rat#n sobre el ele-ento con id "ele-8"
6*;
,stas maneras de trabajar son perfectamente viables y muy cmodas de utili%ar para crear eventos de un tipo en concreto,
pero en jQuery e-iste otra manera de definirlos con la que ganaremos alguna ventaja.
5.7.1.- Mtodo 'ind34 para de)inir cual2uier tipo de evento
)on el mtodo bind01 podemos definir de una manera genrica cualquier tipo de evento, o incluso un mismo manejador de
eventos para distintos tipos de eventos distintos. ,l uso ms &abitual de este mtodo es el siguiente(
bind(tipoFdeFevento5 -ane0ador*
)omo primer parmetro enviamos el tipo de evento que queremos definir. 3i se desea, podr!amos especificar varios tipos de
eventos separados por un espacio y as! asignar un mismo manejador de evento para varios tipos de situaciones.
)omo segundo parmetro se indica el manejador o funcin a ejecutar cuando se produ%ca el evento, igual que se defin!a con
los mtodos clic#01, mouseleave01 o similares, para un tipo de evento en concreto.
9n ejemplo sencillo de este modo de definir eventos es el siguiente(
'("+-iclase"*+bind("click"5 function(*4
alert("!as ,ec,o clic"*;
6*;
2l &acer clic en cualquier elemento de la clase )33 DmiclaseD, se mostrar un mensaje en una caja de alerta.
2&ora podemos ver cmo se crear!a una funcin que se asignar!a para varios tipos de eventos a la ve%.
'("p"*+bind("click -ouseenter -ouseleave"5 function(e*4
if ('(t,is*+css("color"*1="rgb(8P05 1005 0*"*
62
'(t,is*+css("color"5 "rgb(8P05 1005 0*"*;
else
'(t,is*+css("color"5 "rgb(1P05 05 8PP*"*;
6*
)omo se puede ver, se &a definido un evento para todos los prrafos de la pgina, que se activar con los tipos de eventos(
Dclic# mouseenter mouseleaveD. 'a funcin que &ace de manejador de eventos averigua el color del elemento y lo va
intercambiando entre dos colores distintos. ,ste evento se ejecutar al &acer clic, al entrar en el elemento con el puntero del
ratn o al salir del elemento con el ratn.
5.7.2.- /liminar un evento con la )uncin un'ind34
2&ora vamos a aprender a &acer el paso contrario, es decir, eliminar un evento previamente asignado a un elemento o varios
elementos de la pgina. ,l procedimiento es bastante sencillo.
3i invocamos a unbind01 sin ning*n parmetro, eliminamos todos los manejadores de eventos, de cualquier tipo de evento,
de los objetos jQuery.
'("p"*+unbind(*;
2s! &emos eliminado todos los eventos asociados con los prrafos de la pgina. ero qui%s una situacin ms &abitual es
que deseemos eliminar slo los eventos de un tipo y para ello simplemente tenemos que indicar como parmetro ese tipo
concreto de evento deseado.
'("p"*+unbind("click"*;
,sta sentencia provocar se descarten que todos los manejadores de eventos asociados al clic sobre los prrafos. )omo se
puede entender, sobre esos elementos no ocurrir nada en el momento en que &agamos clic. 2dems, en el supuesto que
otros scripts $avascript &ayan definido alg*n manejador de evento clic sobre alguno de los elementos, unbind01 tambin
eliminar esos posibles eventos.
ara no eliminar todos los manejadores de eventos de un tipo determinado podemos especificar la funcin que deseamos
descartar en la lista de parmetros de la llamada a unbind01. ,sto funcionar!a en un esquema de cdigo como el siguiente.
var funcion=ane0ador = function(e* 4
$$ cual2uier c#digo
6
'("p"*+bind()click)5 funcion=ane0ador*;
'("p"*+unbind()click)5 funcion=ane0ador*;
3iempre tendremos que colocar la funcin dentro de una variable, para poder referirnos a esa misma variable tanto al crear
el evento con bind01, como al descartarlo con unbind01.
5.7..- /jemplos con los mtodos 'ind34 y un'ind34 de jQuery
2 continuacin puede verse el cdigo de una pgina completa que pone en prctica las e-plicaciones ofrecidas en el art!culo.
,l ejemplo se puede ver en marc&a en una pgina aparte.
<1:<BIJ/D !I=L /K%L@B "-$$;7B$$:I: !I=L O+01$$DE"
",ttp:$$999+97+org$I.$,t-lO$strict+dtd"
<,t-l lang="es"
<,ead
<titleDventos bind<$title
<script language="0avascript"

'("p"*+bind("click -ouseenter -ouseleave"5 function(e*4
if ('(t,is*+css("color"*1="rgb(8P05 1005 0*"*
'(t,is*+css("color"5 "rgb(8P05 1005 0*"*;
else
'(t,is*+css("color"5 "rgb(1P05 05 8PP*"*;
6*

63
function clic&lerta(*4
alert("!as ,ec,o clic"*;
6

'("+-iclase"*+bind("click"5 clic&lerta*;

'("#2uitarevento"*+bind("click"5 function(*4
'("+-iclase"*+unbind("click"5 clic&lerta*;
6*
6*
<$script
<$,ead
<body
<p class="-iclase"/ri-er p>rrafo<$p
<p<tro p>rrafo<$p
<input type=button value="?uitar el alert del clic del pri-er p>rrafo" id="2uitarevento"
<$body
<$,t-l
,n el pr-imo art!culo veremos una utilidad interesante para definir eventos sobre elementos actuales y futuros sobre un
selector jQuery, que nos facilitar las cosas en scripts ms complejos.
5.@.- /ventos de)inidos con live34 en jQuery
4todo live*+ para definir eventos en jQuery/ c#mo crear eventos sobre elementos que coincidan con un
selector, en el momento actual o en el futuro.
Aemos visto muc&as tcnicas para definir y tratar eventos en jQuery a lo largo de los art!culos anteriores del :anual de
jQuery. ara seguir e-plorando las posibilidades de este frame"or# $avascript vamos a aprender a&ora a definir eventos
DliveD. ,s algo as! como una definicin de evento Den directoD o durante toda la DvidaD de la pgina, es decir, una definicin
de un evento sobre los elementos actuales y futuros que casen con un selector.
,l mtodo live01 funciona de manera similar al mtodo bind01 de jQuery, con la particularidad que la asignacin del evento es
DdinmicaD y afecta no slo a los elementos que casen con el selector en el momento de la invocacin, sino tambin todos
los elementos que se puedan definir en un futuro y que casen con ese selector.
@o s si se &abr podido entender e-actamente lo que se consigue con live01, pero lo podemos ver con un ejemplo sencillo
que lo aclarar todo. >eamos esta sentencia(
'("+-iclase"*+bind("click"5 -ifuncion*;
,st definiendo un evento Dclic#D sobre todos los elementos de la clase 0class de )331 DmiclaseD. Aasta aqu! ya debemos de
conocer todos esta el mtodo bind01, por lo que no deber!a &aber ning*n problema, pero a&ora veamos esta misma
sentencia pero utili%ando el mtodo live01.
'("+-iclase"*+live("click"5 -ifuncion*;
,sto sirve para lo mismo que &ac!amos con bind01, pero adems afectar a todos los elementos que puedan tener la clase
DmiclaseD en el futuro y no slo en el momento que se ejecuta esa sentencia.
R)mo puede &aber otros elementos de esa clase en el futuroS ues simplemente porque los crees dinmicamente con
jQuery o porque asignes dinmicamente una clase )33, u otro atributo, a un elemento que no la ten!a, o que traigas por 2ja-
un contenido y que tenga elementos que casen con el selector, etc.
5.@.1.- /jemplo de asignacin de manejador de evento por live34
>eamos la siguiente demostracin del funcionamiento de live01. Benemos varios elementos(
64
<div class="verde"Dsta capa tiene la clase verde (,a" clic*<$div
<div class="verde"Cegunda capa donde coloco la clase verde<$div
<div id="noverde"Iercera capa 2ue no es verde<$div
<div class="verde"<tra con clase verde<$div
3in varias divisiones donde todas menos una tienen la clase DverdeD. >eamos como puedo asignar un evento de tipo Dclic#D
por medio del mtodo live01(
'("+verde"*+live("click"5 function(e*4
var ele- = '(t,is*;
if (ele-+,t-l(*1="!iciste clic11"*4
ele-+,t-l("!iciste clic11"*;
6else4
ele-+,t-l("!iciste de nuevo clic11"*;
6
6*;
,s un evento que permite cambiar el te-to del elemento cuando se pulsa sobre l y lo aplicamos sobre todos los elementos
de la clase DverdeD.
2&ora tenemos un par de botones para &acer cosas con la pgina y cambiarla un poco.
<input type=button value="insertar nuevo ele-ento verde" id="insertarele-"
<input type=button value="/oner la clase verde en el div 2ue no la tiene" id="ponerclaseverde"
)uando se pulse el primer botn, voy a insertar un nuevo elemento en la pgina al que le pondremos la clase DverdeD. ,so lo
consigo con este cdigo(
'("#insertarele-"*+click(function(e*4
var nuevoDle-ento = '()<div class="verde"Dle-ento creado e insertado dina-ica-ente<$div)*;
nuevoDle-ento+appendIo('(docu-ent+body**;
6*;
'os elementos que se creen al apretar ese botn tendrn la clase verde y por tanto la funcionalidad especificada con el
mtodo live01 para definir el evento clic.
,l segundo botn asigna la clase DverdeD al elemento D+> del principio, que no la ten!a, lo que conseguimos as!(
'("#ponerclaseverde"*+click(function(e*4
'("#noverde"*+addBlass("verde"*;
6*;
2l asignar esa clase al elemento tambin se aplicar la funcionalidad definida para el evento clic# con live01.
,sto lo podemos ver en funcionamiento en una pgina aparte.
ara acabar, dejamos el cdigo completo de esta pgina de ejemplo de live01 en jQuery.
<,t-l
<,ead
<titleDventos live<$title

+verde4color: green;6

<$style
<script language="0avascript"
'("+verde"*+live("click"5 function(e*4
var ele- = '(t,is*;
if (ele-+,t-l(*1="!iciste clic11"*4
ele-+,t-l("!iciste clic11"*;
6else4
ele-+,t-l("!iciste de nuevo clic11"*;
6
6*

'("#insertarele-"*+click(function(e*4
65
var nuevoDle-ento = '()<div class="verde"Dste ele-ento se ,a creado e insertado dina-ica-ente
(,a" clic*<$div)*;
nuevoDle-ento+appendIo('(docu-ent+body**;
6*;

'("#ponerclaseverde"*+click(function(e*4
'("#noverde"*+addBlass("verde"*;
6*;
6*
<$script
<$,ead
<body
<div class="verde"Dsta capa tiene la clase verde (,a" clic*<$div
<div class="verde"Cegunda capa donde coloco la clase verde<$div
<div id="noverde"Iercera capa 2ue no es verde<$div
<div class="verde"<tra con clase verde<$div
<input type=button value="insertar nuevo ele-ento verde" id="insertarele-"
<input type=button value="/oner la clase verde en el div 2ue no la tiene" id="ponerclaseverde"
<$body
<$,t-l
Parte ":
#esarrollo de $lu%ins en
jQuery
!os plugins en '(uer" nos permiten hacer desarrollos *ue podremos reutilizar con
-acilidad en di+ersos sitios " *ue tambi1n podr&n usar otros desarrolladores. !os plugins
te a"udar&n a hacer c$digo de calidad en '(uer".
7.1.- $lugins en jQuery
!eamos qu son los 3lu%ins en jQuery y c#mo podemos crearlos para expandir las posibilidades del
framework.
3i &as llegado a este punto en el :anual de jQuery y &as puesto en prctica los ejemplos reali%ados &asta a&ora, no me cabe
duda que tendrs ya una pequeEa idea de las cosas que se pueden &acer con el frame"or#. Aabrs comprobado que, con
pocas l!neas de cdigo, se pueden &acer diversos efectos y dotar a la pgina de interaccin con el usuario, pero qui%s
todav!a te sientas un poco perdido a la &ora de encarar el desarrollo de problemas ms complejos con los que podrs
enfrentarte.
Bodav!a nos queda muc&o camino por delante, pero lo bueno es que, con lo que sabes &asta a&ora, tienes una base suficiente
66
para empe%ar a &acer cosas ms divertidas y ejemplos que mere%can ms la pena como prctica para tu d!a a d!a. 2dems,
tendrs que aprender a programar de una manera adecuada en jQuery y sobre todo crear cdigo reutili%able y con un ciclo
de vida mayor. ara cumplir todos esos objetivos vamos a pasar directamente a e-plicar los plugins en jQuery, una de las
D&erramientasD que utili%ars &abitualmente, si quieres &acer cosas ms avan%adas con el frame"or# y sacarle todo su
provec&o.
7.1.1.- Qu son los $lugins
'os plugins son la utilidad que pone jQuery a disposicin de los desarrolladores para ampliar las funcionalidades del
frame"or#. or lo general servirn para &acen cosas ms complejas necesarias para resolver necesidades espec!ficas, pero las
&acen de manera que puedan utili%arse en el futuro en cualquier parte y por cualquier "eb.
,n la prctica un plugin no es ms que una funcin que se aEade al objeto jQuery 0objeto bsico de este frame"or# que
devuelve la funcin jQuery para un selector dado1, para que a partir de ese momento responda a nuevos mtodos. )omo ya
sabemos, en este frame"or# todo est basado en el objeto jQuery, as! que con los plugins podemos aEadirle nuevas
utilidades.
>oy a poner un ejemplo un poco abstracto para ver si podemos llegar a la idea de cmo es un plugin. +magina que necesitas
que los elementos de la pgina DbailenD 0parpadeen, se muevan, interactuen con el usuario de una manera concreta, o lo que
sea que necesites1, pues creas una funcin para &acer eso. Aaces que esa funcin sea un plugin llamado DbailarD y a partir de
entonces cualquier elemento de la pgina que lo desees podr bailar. ara ello simplemente invocas ese mtodo del objeto
jQuery sobre el elemento o elementos que selecciones.
$$con esto bailan todos los p>rrafos
'("p"*+bailar(*;
$$con esto bailan los ele-entos de la clase "artista"
'("+artista"*+bailar(*;
$$con esto baila el ele-ento con id="lola"
'("#lola"*+bailar(*;
,spero que el ejemplo no &aya parecido muy tonto, pero es que los plugins no son nada del otro mundo, son simplemente
eso, e-tensiones del frame"or# para crear cualquier funcionalidad que podamos necesitar en los elementos de la pgina, por
muy especial, o tonta, que sea.
'o genial de los plugins es que t* podrs utili%ar esa funcionalidad en donde desees a partir de a&ora, ya que estar
perfectamente a tu disposicin, siempre que tengas cargado el plugin. +ncluso si tu generosidad es tal, la podrs
proporcionar a otras personas para que la utilicen en sus desarrollos. )laro que, para conseguir todo esto, ser necesario que
programes los plugins atendiendo a una serie de normas, bastante sencillas pero importantes para asegurar que se puedan
utili%ar en cualquier parte y para cualquier selector de jQuery.
7.1.2.- +mo se crea un plugin de jQuery
'os plugins en jQuery se crean asignando una funcin a la propiedad DfnD del objeto jQuery. 2 partir de entonces, esas
funciones asignadas se podrn utili%ar en cualquier objeto jQuery, como uno de los muc&os mtodos que dispone dic&o
objeto principal del frame"or#.
Nota: 'a creacin de plugins, para ampliar las funcionalidades de jQuery, es una cosa tan bsica que la mayor!a de las funciones con las que
est dotado el propio frame"or# estn incluidas en el objeto jQuery por medio de plugins. ,s decir, en la construccin del frame"or# en
muc&as de las ocasiones simplemente se crean plugins para e-tenderlo. 2s! pues, esta tcnica es usada, no slo por terceros desarrolladores,
para crear nuevos componentes, sino tambin por el propio equipo de jQuery para el diseEo base de este frame"or#.
3i lo deseamos, aparte de seguir los pr-imos art!culos de este manual, podemos ver el cdigo fuente del frame"or# o cmo estn &ec&os los
plugins de otros desarrolladores, para tener una idea sobre cmo se utili%an.
2 modo de ejemplo, podemos ver a continuacin un cdigo fuente de un plugin muy sencillo(
0?uery+fn+desaparece = function(* 4
t,is+eac,(function(*4
ele- = '(t,is*;
67
ele-+css("display"5 "none"*;
6*;
return t,is;
6;
,ste plugin permitir!a &acer desaparecer a los elementos de la pgina y podr!amos invocarlo por ejemplo de la siguiente
manera(
'(",1"*+desaparece(*;
,n el siguiente art!culo veremos con mayor detalle la creacin de un plugin de jQuery y e-plicaremos varios temas que
resultarn de vital importancia para entender el cdigo anterior y para construirlos nosotros mismos.
7.2.- =eglas para el desarrollo de plugins en jQuery
3ara construir plu%ins en jQuery tenemos que se%uir una serie de normas. ,dem$s veremos un nuevo
ejemplo pr$ctico sobre el desarrollo de plu%ins en jQuery.
)on los plugins en jQuery podemos ampliar .rame"or#, creando nuevos mtodos para dotar de nuevas funcionalidades al
objeto jQuery. ,n el art!culo anterior ofrecimos una e-plicacin general sobre los plugins en jQuery y en el presente vamos
a adentrarnos en su desarrollo.
)omo &abrs comprobado en el :anual de jQuery, el frame"or# ya contiene muc&as funciones para &acer cosas
interesantes, que se basan en la utili%acin del objeto jQuery, as! que a&ora aprendamos a e-tender este objeto para
proporcionar funcionalidades nuevas a nuestras pginas. ero atencin, porque tenemos que reali%ar el trabajo siguiendo una
serie de normas, para asegurar que los plugins funcionen como deben y los pueda utili%ar cualquier desarrollador en
cualquier pgina "eb.
2qu! puedes ver un listado normas, que son slo unas pocas, pero que resultan tremendamente importantes.
,l arc&ivo que crees con el cdigo de tu plugin lo debes nombrar como jquery.Xnombre de tu pluginY.js. or
ejemplo jquery.desaparece.js.
2Eade las funciones como nuevos mtodos por medio de la propiedad fn del objeto jQuery, para que se conviertan
en mtodos del propio objeto jQuery.
Dentro de los mtodos que aEades como plugins, la palabra Dt&isD ser una referencia al objeto jQuery que recibe
el mtodo. or tanto, podemos utili%ar Dt&isD para acceder a cualquier propiedad del elemento de la pgina con el
estamos trabajando.
Debes colocar un punto y coma DMD al final de cada mtodo que crees como plugin, para que el cdigo fuente se
pueda comprimir y siga funcionando correctamente. ,se punto y coma debes colocarlo despus de cerrar la llave
del cdigo de la funcin.
,l mtodo debe retornar el propio objeto jQuery sobre el que se solicit la ejecucin del plugin. ,sto lo podemos
conseguir con un return t&isM al final del cdigo de la funcin.
3e debe usar t&is.eac& para iterar sobre todo el conjunto de elementos que puede &aber seleccionados. =ecordemos
que los plugins se invocan sobre objetos que se obtienen con selectores y la funcin jQuery, por lo que pueden
&aberse seleccionado varios elementos y no slo uno. 2s! pues, con t&is.eac& podemos iterar sobre cada uno de
esos elementos seleccionados. ,sto es interesante para producir cdigo limpio, que adems ser compatible con
selectores que correspondan con varios elementos de la pgina.
2signa el plugin siempre al objeto jQuery, en ve% de &acerlo sobre el s!mbolo J, as! los usuarios podrn usar alias
personali%ados para ese plugin a travs del mtodo no)onfict01, descartando los problemas que puedan &aber si
dos plugin tienen el mismo nombre.
,stas reglas sern suficientes para plugins sencillos, aunque qui%s en escenarios ms complejos en adelante necesitaremos
aplicar otras reglas para asegurarnos que todo funcione bien.
68
7.2.1.- /jemplo de un plugin en jQuery
2&ora que ya sabemos las reglas bsicas para &acer plugins podemos crear uno por nuestra cuenta que nos sirva para
practicar lo que &emos aprendido. Be sugiero que identifiques los lugares donde &emos aplicado cada una de las anteriores
normas de la lista, o al menos las que se puedan aplicar en este plugin tan simple que vamos a ver.
,l plugin que vamos a construir sirve para &acer que los elementos de la pgina parpadeen, esto es, que desapare%can y
vuelvan a aparecer en un breve instante. ,s un ejemplo bien simple, que qui%s tenga ya alguna utilidad prctica en tu sitio,
para llamar la atencin sobre uno o varios elementos de la pgina.
ara &acerlo, utili%aremos otras funciones del frame"or# como fade/ut01 0para &acer desaparecer al elemento1 y fade+n01
0para que apare%ca de nuevo1.
0?uery+fn+parpadea = function(* 4
ele- = '(t,is*;
ele-+fade<ut(8P05 function(*4
'(t,is*+fade@n(8P0*;
6*;
6*;
return t,is;
6;
)on t&is.eac& creamos un bucle para cada elemento que pueda &aberse seleccionado para invocar el plugin. )on elemCJ
0t&is1 conseguimos e-tender a t&is con todas las funcionalidades del frame"or# y el objeto jQuery resultante guardarlo en
una variable. 'uego invocamos fade/ut01, enviando como parmetro un n*mero que son los milisegundos que durar el
efecto de desaparecer el elemento. 'uego enviamos como parmetro una nueva funcin que es un callbac#, que se ejecutar
cuando &aya terminado fade/ut01 y en esa funcin callbac# se encargar simplemente de ejecutar un fade+n01 para mostrar
de nuevo el elemento.
Nota: 2 lo largo del :anual de jQuery &emos visto varias de las cosas que utili%amos en este ejemplo, como los efectos en jQuery y las
funciones )allbac#.
2&ora veamos cmo podr!amos invocar este plugin(
$$parpadean los ele-entos de class BCC "parpadear"
'("+parpadear"*+parpadea(*;

$$aAado evento clic para un bot#n+ &l pulsar parpadear>n los ele-entos de clase parpadear
'("#botonparpadear"*+click(function(*4
6*
6*
Dado el cdigo anterior, al abrir la pgina parpadearn los elementos de la clase DparpadearD y luego &abr un botn que
repetir la accin de parpadear cuando se pulse.
,n este caso no &emos colocado el script en un arc&ivo aparte con el nombre jquery.parpadea.js, tal como se recomendaba,
pero de momento ser suficiente para probar esto de los plugins y qui%s ms fcil porque as! no necesitamos ms que un
arc&ivo AB:' con todo el cdigo junto. odemos ver el cdigo completo de este ejemplo a continuacin(
<,t-l
<,ead
<titleBreando plugins en 0?uery<$title
<script
0?uery+fn+parpadea = function(* 4
ele- = '(t,is*;
ele-+fade<ut(8P05 function(*4
'(t,is*+fade@n(8P0*;
6*;
6*;

return t,is;
69
6;
$$parpadean los ele-entos de class BCC "parpadear"

$$aAado un evento clic para un bot#n5 para 2ue al pulsarlo parpadeen los ele-entos de clase
parpadear
'("#botonparpadear"*+click(function(*4
6*
6*
<$script

<$,ead
<body
<p class="parpadear"!ola 2ue tal5 esto parpade# gracias a 0?uery1<$p
<p/arafo nor-al 2ue no va a parpadear+<$p
<p class="parpadear"C3 parpadea<$p
<p/arafo nor-al 2ue no va a parpadear ta-poco+++<$p
<div class="parpadear" style="background-color: #ffUU``; padding: 10px;"Dsta capa ta-biYn tiene
la clase parpadear5 con lo 2ue ya se sabe+++<$div
<p<input type="button" value="/arpadea de nuevo" id="botonparpadear"<$p
<$body
<$,t-l
ara acabar, puedes acceder al ejercicio en una pgina aparte.
Nota: )ontamos con un taller de $Query donde recopilamos un conjunto de plugins y mostramos cmo se construyen.
7..- $lugin jQuery9 te8tarea con cuenta de caracteres
)e%undo ejemplo de plu%in pr$ctico en jQuery para hacer textarea que lleva la cuenta de los caracteres
escritos por el usuario.
,ste es un taller prctico sobre jQuery que esperamos sirva para que las personas puedan continuar aprendiendo la manera
de crear sus propios plugins. )omo ya sabemos, los plugins son una manera ptima de programar tus scripts jQuery, ya que
permitirn solucionar sus necesidades y adems crear cdigo limpio y reutili%able.
,n los dos art!culos anteriores ya estuvimos &ablando de los lugins en jQuery y de las reglas fundamentales para
desarrollarlos. Bambin vimos un primer ejemplo de un plugin sencillo, que espero nos &aya abierto las miras y dado una
idea sobre las posibilidades de construccin de componentes para pginas "eb. ,n este art!culo continuaremos ofreciendo
ejemplos para refor%ar lo aprendido y para que las personas puedan familiari%arse aun ms con el modo de creacin de
plugins en jQuery.
,l objetivo del ejemplo que ocupar este art!culo es la creacin de un plugin para conseguir que un campo te-tarea de
formulario informe en todo momento de caracteres que &a escrito el usuario. ,s decir, vamos a &acer un mtodo del objeto
jQuery que servir para decirle a los campos de te-to te-tarea que se e-pandan para convertirse en un te-tarea que cuente
los caracteres en una capa de te-to de al lado.
ara tener una idea e-acta de nuestros objetivos podemos ver el ejemplo en marc&a que vamos a desarrollar.
7..1.- /ntendamos el plugin te8tarea con contador de caracteres
ara &acer los te-tareas que cuenten caracteres nosotros queremos &acer algo como esto en jQuery.
'("textarea"*+cuentaBaracteres(*;
)on eso queremos conseguir que a todos los te-tareas del documento AB:' les apare%ca una informacin al lado con el
70
n*mero de caracteres que tenga el te-tarea escrito dentro. ,sa cuenta de caracteres debe mostrarse nada ms cargarse la
pgina y actuali%arse cuando se escriba algo dentro. Bodo eso se automati%ar, para que no tengamos que &acer nada, salvo
la anterior llamada al plugin.
,ntonces, dentro del plugin tenemos que &acer varias cosas.
7. 9n bucle con eac& para recorrer todos los objetos que pueda &aber en el objeto jQuery que reciba el mtodo para
activar este plugin. ,ste paso es igual en todos los plugins.
;. Dentro de ese bucle podemos iterar con todos los elementos que &aya en el objeto jQuery, que vamos a suponer
son te-tareas. >amos a crear un nuevo elemento D+> sobre la mac&a y vamos a iniciarlo con el te-to de la cuenta
de caracteres actual del te-tarea. ,se elemento creado Don t&e flyD lo aEadiremos al cuerpo de la pgina, justo
despus de la etiqueta del te-tarea.
F. 2dems, &aremos un evento, para que cuando el usuario escriba algo en el te-tarea, el te-to con la cuenta de
caracteres se actualice automticamente.
,stos tres pasos ser!an un resumen del funcionamiento del plugin, cuyo cdigo completo podemos ver a continuacin.
$$creo el plugin cuentaBaracteres
0?uery+fn+cuentaBaracteres = function(* 4
$$para cada uno de los ele-entos del ob0eto 0?uery
$$creo una variable ele- con el ele-ento actual5 supone-os un textarea
ele- = '(t,is*;
$$creo un ele-ento :@] sobre la -arc,a
var contador = '()<divBontador caracteres: ) W ele-+attr("value"*+lengt, W )<$div)*;
$$inserto el :@] despuYs del ele-ento textarea
ele-+after(contador*;
$$guardo una referencia al ele-ento :@] en los datos del ob0eto 0?uery
ele-+data("ca-pocontador"5 contador*;

$$creo un evento keyup para este ele-ento actual
ele-+keyup(function(*4
var ele- = '(t,is*;
$$recupero el ob0eto 2ue tiene el ele-ento :@] contador asociado al textarea
var ca-pocontador = ele-+data("ca-pocontador"*;
$$-odifico el texto del contador5 para actuali"arlo con el nX-ero de caracteres escritos
ca-pocontador+text()Bontador caracteres: ) W ele-+attr("value"*+lengt,*;
6*;
6*;
$$sie-pre tengo 2ue devolver t,is
return t,is;
6;
,l cdigo est comentado para que se pueda entender mejor. Qui%s nos pueda llamar ms la atencin la l!nea donde se
utili%a la funcin jQuery para generar sobre la marc&a un objeto jQuery con el campo D+> con el que vamos a seguir la
cuenta. >emos que a travs del mtodo attr01 accedemos al value del te-tarea y con la propiedad lengt& a su longitud en
caracteres.
'uego tambin puede que nos llame la atencin el funcionamiento del mtodo data01, que nos permite almacenar y
recuperar datos que se guardarn en el propio objeto jQuery de cada te-tarea.
2s! guardo una referencia al objeto con la capa contador en el te-tarea, en un dato llamado DcampocontadorD.
H con este otro cdigo en el evento recupero esa capa, pues luego en el evento tengo que cambiar el contenido con la
cuenta de caracteres actuali%ada.
9na ve% creado el plugin, convierto todos los te-tareas en te-tareasGcontador de caracteres, con este cdigo(
6*
71
,so es todo, pero qui%s se vea ms claro si vemos el cdigo completo del ejemplo.
<,t-l
<,ead
<titleBreando plugins en 0?uery<$title
<script
$$creo el plugin cuentaBaracteres
0?uery+fn+cuentaBaracteres = function(* 4
$$para cada uno de los ele-entos del ob0eto 0?uery
ele- = '(t,is*;
$$creo un ele-ento :@] sobre la -arc,a
$$inserto el :@] despuYs del ele-ento textarea
ele-+after(contador*;
$$guardo una referencia al ele-ento :@] en los datos del ob0eto 0?uery

$$creo un evento keyup para este ele-ento actual
ele-+keyup(function(*4
var ele- = '(t,is*;
$$recupero el ob0eto 2ue tiene el ele-ento :@] contador asociado al textarea
$$-odifico el texto del contador5 para actuali"arlo con el nX-ero de caracteres escritos
ca-pocontador+text()Bontador caracteres: ) W ele-+attr("value"*+lengt,*;
6*;
6*;
$$sie-pre tengo 2ue devolver t,is
return t,is;
6;
6*
<$script

<$,ead
<body
<for-
<textarea ro9s=P cols=70 id="-itextarea",ola<$textarea
<br
<br
<textarea ro9s=P cols=70 id="otrotextarea"<tra cuenta+++<$textarea
<$for-
<$body
<$,t-l
,ste ejemplo se puede ver en una pgina aparte.
Nota: 3i quieres ver ms ejemplos prcticos de creacin de plugins te recomiendo que leas el Baller de $Query.
7.1.- 6estin de opciones en plugins jQuery
4anera de %estionar opciones en los plu%ins de jQuery, a travs de un objeto de options enviado al
invocar el plu%in, para hacerlos un poco m$s vers$tiles y con confi%uraci#n m$s f$cil.
)uando desarrollamos plugins en jQuery debemos atender a una serie de normas bsicas para que estn bien creados y
72
puedan funcionar en cualquier mbito. ero adems tenemos una serie de patrones de desarrollo que debemos seguir de
manera opcional para facilitarnos la vida a nosotros mismos y a otros desarrolladores que puedan utili%ar nuestros plugins.
9na de las tareas t!picas que reali%aremos es la creacin de un sistema para cargar opciones con las que configurar el
comportamiento de los plugins. ,stas opciones las recibir el plugin como parmetro cuando lo invocamos inicialmente.
@osotros, como desarrolladores del plugin, tendremos que definir cules van a ser esas opciones de configuracin y qu
valores tendrn por defecto.
'a ayuda del sitio de jQuery para la creacin de plugins sugiere la manera con la que reali%ar el proceso de configuracin del
plugin, por medio de un objeto de DoptionsD, que nos facilitar bastante la vida.
7.1.1.- $or 2u son interesantes los options en plugins
'a idea que &ay detrs de la carga de opciones en los plugins ya la conocemos, que stos sean ms configurables y por lo
tanto ms verstiles. ero vamos a intentar dar un ejemplo ms claro sobre cmo esas opciones pueden &acer a los plugins
ms verstiles.
+maginemos un plugin para mostrar una caja de dilogo como las que &acemos con jQuery 9+.
,sas cajas de dilogo permiten mostrar mensajes en una capa emergente. ,sa caja podr!a tener diversos parmetros para
configurarla, como su altura, anc&ura, t!tulo de la caja, etc. Bodos esos parmetros podr!amos enviarlos al dar de alta la caja,
con un cdigo como este(
'("#capa"*+crearBa0a(O005 8005 "titulo"5 +++*;
ero eso no es prctico, porque el usuario deber!a indicar todos los parmetros para crear la caja, o al menos si no indica
unos no podr!a indicar otros que estn detrs en la lista. 'uego, en el cdigo del plugin, el desarrollador deber!a comprobar
qu parmetros se indican, uno a uno, y darles valores por defecto si no se &an indicado, etc. Bodo eso ampliar!a demasiado
el cdigo fuente.
,ntonces, lo que se suele &acer al dar de alta el plugin, es indicar una serie de datos con notacin de objeto(
'("#capa"*+crearBa0a(4
titulo: "titulo"5
anc,ura: O005
altura: 8005
+++
6*;
,l desarrollador del plugin colocar en el cdigo fuente un objeto con las variables de configuracin y sus valores por
defecto. 'uego, cuando se cree el plugin, lo me%clar con el objeto de options enviado por parmetro, con una *nica
sentencia, con lo que obtendr rpidamente el objeto completo de configuracin del plugin que debe ser aplicado.
7.1.2.- #e)inir opciones por de)ecto en el cdigo del plugin
)on el siguiente cdigo podemos definir las variables de configuracin por defecto de un plugin y combinarlas con las
variables de options enviadas por parmetro al invocar el plugin.
0?uery+fn+-i/lugin = function(cual2uierBosa5 opciones* 4
$$:efino unas opciones por defecto
var configuracion = 4
dato1: "lo 2ue sea"5
dato8: G8
6
$$extiendo las opciones por defecto con las recibidas
0?uery+extend(configuracion5 opciones*;
$$resto del plugin
$$donde tene-os la variable configuracion para personali"ar el plugin
6
'a funcin principal del plugin recibe dos parmetros, uno Dcualquier)osaD y otro DopcionesD. ,l primero supongamos que
es algo que necesita el plugin, pero la configuracin, que es lo que nos importa a&ora, se &a recibido en el parmetro
DopcionesD.
73
Ha dentro de la funcin del plugin, se define el objeto con las opciones de configuracin, con sus valores por defecto, en una
variable llamada DconfiguracionD.
,n la siguente l!nea se me%clan los datos de las opciones de configuracin por defecto y las recibidas por el plugin al
iniciali%arse. 'uego podremos acceder por medio de la variable DconfiguracionD todas las opciones del plugin que se va a
iniciar.
Nota: ,l modo en cmo se me%clan los datos por medio de e-tend01, podis revisar en el art!culo sobre el mtodo jQuery.e-tend01.
7.1..- Invocar al plugin enviando el o'jeto de opciones
2&ora podemos ver el cdigo que utili%ar!amos para invocar al plugin pasando las opciones que deseamos(
'("#ele-ento*+-i/lugin(4
dato1: "!ola a-igos1"5
dato8: true
6*;
/ podr!amos enviar slo alguno de los datos de configuracin, para que el resto se tomen por defecto(
'("<div<$div"*+-i/lugin(4
dato8: 8+0P
6*;
/ no enviar ning*n dato al crear el plugin para utili%ar los valores por defecto en todas las opciones de configuracin.
'("p"*+-i/lugin(*;
7.1.1.- +oncusin so're la con)iguracin de plugins con el o'jeto de opciones
Aasta el momento no &emos visto ms que un cdigo parcial de lo que ser!a un plugin con options para su configuracin.
ero esperamos &aber despejado ya algunas dudas. @o obstante, veremos mejor cmo funciona todo por medio de un
ejemplo en un art!culo siguiente.
)ontinuar la lectura con el ejercicio lugin Bip con opciones en jQuery.
7.5.- $lugin -ip con opciones en jQuery
"n ejemplo de plu%in en jQuery para hacer un sistema de tip m$s avanzado, que permite confi%urarse
por medio de unas opciones en el plu%in.
Aace poco tiempo publicamos un art!culo en DesarrolloWeb.com sobre un plugin para mostrar un tip con un mensaje que
aparecer!a en una capa al pasar el ratn sobre un elemento caliente. ,so es lo que llamamos un tip y lo e-plicamos en el
art!culo lugin jQuery para &acer un Bip simple.
2&ora vamos a &acer una modificacin en ese plugin para implementar una serie de opciones, que nos permitirn configurar
de una manera ms verstil el comportamiento del plugin. 'as opciones que vamos a implementar sern las siguientes(
>elocidad de la animacin de mostrar y ocultar el tip
2nimacin a utili%ar para mostrar el tip
2nimacin a utili%ar para ocultar el tip
)lase )33 para la capa del tip
Bodas esas opciones se definen, junto con los valores por defecto que van a tomar, al crear el cdigo del plugin. ,n el
74
anterior art!culo ya e-plicamos de manera general cmo funciona el sistema de options en plugins, que vamos a utili%ar a
continuacin.
)omen%amos por especificar, con notacin de objeto, las opciones de configuracin por defecto para el plugin(
velocidad: P005
ani-acion=uestra: 49idt,: "s,o9"65
ani-acion<culta: 4opacity: ",ide"65
claseIip: "tip"
6
2&ora veamos el inicio del cdigo del plugin, donde debemos observar que en la funcin que define el plugin se estn
recibiendo un par de parmetros. ,l primero es el te-to del tip, que necesitamos para crear la capa del tip 0,ste parmetro ya
aparec!a en el cdigo del plugin del art!culo anterior1. ,l segundo son las opciones espec!ficas para configurar el plugin.
0?uery+fn+creaIip = function(textoIip5 opciones* 4
$$opciones por defecto
velocidad: P005
claseIip: "tip"
6
$$extiendo las opciones por defecto con las opciones del par>-etro+

$$c#digo del plugin
6*;
6*;
7.5.1.- Mtodo jQuery.e8tend34
Qui%s en este cdigo, lo que ms nos llame la atencin sea el lugar donde e-tiendo las opciones por defecto definidas en la
variable DconfiguracionD, con las opciones espec!ficas para el plugin concreto, recibidas por medio del parmetro
DopcionesD.
,sta sentencia es una llamada al mtodo e-tend01 que pertenece a jQuery. ,sta funcin recibe cualquier n*mero de
parmetros, que son objetos, y mete las opciones de todos en el primero. 'uego, despus de la llamada a e-tend01, el objeto
del primer parmetro tendr sus propiedades ms las propiedades del objeto del segundo parmetro. 3i alguna de las
opciones ten!a el mismo nombre, al final el valor que prevalece es el que &ab!a en el segundo parmetro. 3i tenemos dudas
con respecto a este mtodo, leer el art!culo jQuery.e-tend01.
2s!, podemos ver cmo con e-tend01 las propiedades por defecto del plugin se combinan con las que se env!en en las
opciones. 'uego, en el cdigo del plugin, podremos acceder a las propiedades a travs de la variable configuracin, un punto
y el nombre de propiedad que queramos acceder.
configuracion+velocidad
7.5.2.- +digo completo del plugin tip con opciones
>eamos todo el cdigo de nuestro primer plugin en implementar el sistema de opciones(
0?uery+fn+creaIip = function(textoIip5 opciones* 4
velocidad: P005
claseIip: "tip"
6

75
ele- = '(t,is*;
var -iIip = '()<div class=") W configuracion+claseIip W )") W textoIip W )<$div)*;
'(docu-ent+body*+append(-iIip*;
ele-+data("capatip"5 -iIip*;

ele-+-ouseenter(function(e*4
var -iIip = '(t,is*+data("capatip"*;
-iIip+css(4
left: e+pageM W 105
top: e+pageJ W P
6*;
-iIip+ani-ate(configuracion+ani-acion=uestra5 configuracion+velocidad*;
6*;
ele-+-ouseleave(function(e*4
var -iIip = '(t,is*+data("capatip"*;
-iIip+ani-ate(configuracion+ani-acion<culta5 configuracion+velocidad*;
6*;
6*;

return t,is;
6;
7.5..- Invocar al plugin con o sin las opciones de con)iguracin
ara acabar, vamos a invocar al plugin del tip con opciones, pero lo vamos a &acer de dos modos, uno con las opciones por
defecto y otro con opciones espec!ficas.
2s! se llamar!a al plugin con las opciones por defecto(
'("#ele-ento1"*+creaIip("todo bien+++"*;
,n realidad le estamos pasando un parmetro, pero no son las opciones, sino es el te-to que tiene que aparecer en el tip.
)omo no se indican opciones, ya que no &ay segundo parmetro, se toman todas las definidas por defecto en el plugin.
'as opciones, seg*n se puede ver en el cdigo del plugin, se deber!an enviar en un segundo parmetro cuando se llama al
plugin, tal como se puede ver a continuacin(
'("#ele-ento8"*+creaIip("<tra prueba+++"5 4
velocidad: 10005
claseIip: "otroestilotip"5
ani-acion=uestra: 4
opacity: "s,o9"5
padding: )8Ppx)5
)font-si"e): )8e-)
65
ani-acion<culta: 4
,eig,t: ",ide"5
padding: )Ppx)5
)font-si"e): )1e-)
6
6*;
2&ora &emos indicado varias opciones espec!ficas, que se tendrn en cuenta al crear el plugin con este segundo cdigo.
ara acabar, dejamos un enlace para ver el ejemplo en funcionamiento.
7.7.- Dunciones y varia'les dentro de plugins jQuery
0as funciones en los plu%ins pueden verse como funciones y variables privadas del plu%in, que nos sirven
para definir una mejor l#%ica de pro%ramaci#n y estructura de datos y c#di%o.
76
+gual que en cualquier lenguaje de programacin, podemos utili%ar funciones para estructurar el cdigo de nuestros plugins.
Del mismo modo, en los plugins podemos tener variables, donde guardar datos u objetos que tengan valide% dentro del
mbito de ese plugin. Bodo ello nos ayudar bastante a &acer un cdigo ms claro, autnomo y compacto.
,n este art!culo vamos a mostrar cmo ser!a el esquema de programacin de un plugin jQuery un poco ms avan%ado, que
incluye las mencionadas variables y funciones DlocalesD 0o DprivadasD, como las queramos llamar1. >eremos tambin cmo es
posible acceder a esas variables y funciones desde cualquier parte del flujo de cdigo de un plugin, incluso desde el cdigo
de otras funciones, como los eventos.
7.7.1.- /s2uema de programacin de un plugin
2 continuacin vamos a mostrar el esquema de cdigo de un plugin que incluye funciones y variables. ,ste plugin no sirve
para nada, simplemente es una prueba que estoy reali%ando para ver cmo puedo crear esas variables, acceder a ellas y
comprobar su mbito en distintos puntos del cdigo del plugin.
0?uery+fn+-i/lugin = function(* 4

$$variables 2ue son co-unes a todos los ele-entos
$$2ue ,ab3a en el ob0eto 0?uery 2ue recibe el -Ytodo del plugin
-ivariableBo-un = "co-un";
alert("Eueva invocaci#n de plugin+ =i variable co-Xn: " W -ivariableBo-un*

$$BZ:@b< :DL /LKb@E

$$Dle-ento sobre el 2ue itero y estoy aplicando el plugin
ele- = '(t,is*;
$$ele- es una variable 2ue podre-os utili"ar en todo el plugin
$$variables espec3ficas para cada ele-ento
var -i]ariable = "x";
$$-i]ariable se podr> acceder dentro de todo el c#digo 2ue ponga-os a2u3

$$funcion 2ue ser> accesible desde cual2uier parte del plugin
function -iNuncion(*4
$$puedo acceder a variables del plugin
-i]ariable = ele-+text(*;

$$=uestro el contenido de la variable
alert("-i variable local y particular de cada plugin: " W -i]ariable*;

$$ca-bio la variable co-un a todos los ele-entos de este plugin
-ivariableBo-un = "<tra cosa co-un1"
6

$$puedo invocar las funciones del plugin
-iNuncion(*;

$$evento5 2ue tiene una funci#n+ /uedo acceder a variables y funciones del plugin
ele-+click(function(*4
$$puedo acceder a variables del plugin
alert(":entro del evento: " W -i]ariable*;

$$puedo acceder a funciones
-iNuncion(*;
6*;

6*;
6;
ara definir esas variables y funciones locales al plugin, de manera que estn accesibles dentro del plugin y a su ve% tengan
acceso a todos los datos del mismo, debemos colocarlas dentro de la iteracin que se &ace con t&is.eac&01.
)omo se puede entender del cdigo del plugin anterior, todas esas variables y funciones se pueden invocar o acceder en
cualquier parte, siempre y cuando estemos dentro del t&is.eac&01, donde fueron creadas.
,ste plugin, aunque no valga para muc&o, lo &emos publicado y se puede ver en marc&a en una pgina aparte.
77
Nota: 2ntes del t&is.eac&01 se pueden colocar tambin variables, pero tenemos que tener en cuenta que e-istir una misma copia de esa
variable para todos los elementos donde se est aplicando el plugin.
>eamos el siguiente AB:'.
<div id="este:iv"
Dste div
<$div
<span class="-isspan"span1<$span
2&ora veamos estas dos llamadas al plugin anterior.
'("#este:iv"*+-i/lugin(*;
'("+-isspan"*+-i/lugin(*;
)omo se puede ver, con la primera llamada se ejecuta el plugin sobre un elemento de la pgina con idCDesteDivD. ,s un *nico elemento de la
pgina, luego el plugin slo se aplica una ve%. 3in embargo, en la segunda llamada, se ejecuta el plugin sobre varios elementos con la class de
)33 DmisspanD. ,n este segundo caso el plugin se ejecutar sobre tres elementos y entonces podremos comprobar que las variables que se
&ab!an definido fuera del t&is.eac&01 slo e-isten una ve% y su valor es com*n para los tres elementos sobre los que se aplic el plugin en la
segunda llamada.
'o cierto es que qui%s todo esto quede un poco confuso, o no se entienda muy bien para qu podremos querer
todas esas variables y funciones locales al plugin. ero a medida que vayamos trabajando y plantendonos plugins
ms complicados, veremos que nos son de muc&a utilidad para almacenar datos a los que queremos acceder ms
tarde, o para organi%ar el cdigo de nuestro plugin en distintas funciones, que se pueden llamar repetidas veces y
desde varios sitios.
ara los que conocen un poco de programacin orientada a objetos, qui%s les aclare un poco este simil( 3i un plugin fuese
como un objeto, las variables de dentro del bloque t&is.eac&01 de los plugins ser!an como las propiedades de ese objeto y las
funciones ser!an como mtodos de ese objeto. 2unque &ay que salvar las distancias, porque un plugin no sigue e-actamente
el modelo que conocemos en las clases de programacin orientada a objetos.
ara que veamos un caso prctico de plugin que tiene varias variables y funciones locales &emos reali%ado el ejemplo del
siguiente art!culo( )&ec#bo- con diseEo personali%ado con jQuery.
7.@.- $lugin c0ec*'o8 personalizado con jQuery
"n plu%in en jQuery para hacer un campo de formulario checkbox pero con un dise'o distinto, totalmente
personalizable por el desarrollador.
2 veces los campos de formulario que tenemos disponibles en AB:' son un poco DaburridosD, por decirlo de alguna
manera. Quiero decir que son siempre iguales para todas las pginas y e-isten pocas opciones para configurar su aspecto,
sobre todo en el caso de los elementos c&ec#bo-. )omo diseEadores capric&osos, nosotros podr!amos desear que nuestros
c&ec#bo-es tuvieran un aspecto o color determinado, que &aga mejor combinacin con otros elementos de nuestro layout.
H estas son cosas que podemos conseguir fcilmente con un poco de jQuery.
,n este art!culo pretendemos &acer un plugin para crear campos c&ec#bo- personali%ados, con las mismas funcionalidades
de los c&ec#bo- normales, pero que tengan un aspecto configurable por el desarrollador. ara ello utili%aremos el modelo de
creacin de plugins en jQuery, de modo que &aremos todo el trabajo en un plugin que cualquier persona podr!a utili%ar en
su sitio "eb y configurar los c&ec#bo- seg*n sus preferencias.
ara seguir las e-plicaciones de este art!culo necesitaremos saber acerca de la creacin de plugins en jQuery y en concreto
78
vamos a practicar con dos cosas que &emos aprendido recientemente(
Iestin de opciones en plugins jQuery
)rear .unciones y variables dentro de plugins jQuery
ara apreciar con e-actitud cmo sern algunos ejemplos de c&ec#bo- que vamos a reali%ar, podemos ec&ar un vista%o al
ejemplo en marc&a.
7.@.1.- $ersonalizacin del plugin por medio de o'jeto de opciones
odemos comen%ar por ver el principio de cdigo del plugin, donde estamos definiendo las variables de configuracin por
defecto y las estamos e-tendiendo con las variables de configuracin definidas al invocarlo.
0?uery+fn+c,eckbox/ersonali"ado = function(opciones* 4
$$opciones de configuraci#n por defecto
var conf = 4
activo: true5
colorIextos: 4
activo: "#00f"5
pasivo: "#``U"
65
textos: 4
activo: ""5
pasivo: ""
65
i-agen: 4
activo: )i-ages$t,u-bFup+png)5
pasivo: )i-ages$t,u-bFdo9n+png)
65
cssDle-ento: 4
padding: "8px 8px 8px 8Opx"5
display: "block"5
-argin: "8px"5
border: "1px solid #eee"5
cursor: "pointer"
65
css&dicional: 4

65
na-eB,eck: ""
6;
$$Las extiendo con las opciones recibidas al invocar el plugin
0?uery+extend(conf5 opciones*;

$$BZ:@b< :DL /LKb@E
6*;
return t,is;
6;
Bal como se puede ver, se &an definido varias variables para configurar el objeto, que se dispondrn en un objeto que
tenemos en la variable DconfiguracionD. ,ntre las variables de configuracin tenemos una llamada DactivoD con un valor
boleano para decidir si el elemento c&ec#bo- estar!a o no seleccionado desde el principio. Benemos una variable
DcolorBe-tosD, para definir el color del te-to cuando el elemento est activo y pasivo. Bambin tenemos otra serie de
configuraciones para los estados de activo y pasivo 0seleccionado o no seleccionado1, como la imagen que se tiene que
mostrar al lado del te-to.
2&ora veamos el cdigo del plugin, lo que ir!a dentro de t&is.eac&01. =ecordemos que cada variable creada aqu! es accesible
dentro de todo el bloque de cdigo definido por las llaves del t&is.eac&01. 2s! mismo, las funciones declaradas aqu! son
accesibles desde cualquier parte de este bloque.
$$variables locales al plugin
var -iB,eck = '(t,is*;
79
var activo = conf+activo
$$el ele-ento c,eckbox interno pero no visible
var ele-entoB,eck = '()<input type="c,eckbox" style="display: none;" $)*;
$$el no-bre del c,eckbox puede ser configurado desde options o con el propio texto del ca-po
if(conf+na-eB,eck==""*4
ele-entoB,eck+attr("na-e"5 -iB,eck+text(**;
6else4
ele-entoB,eck+attr("na-e"5 conf+na-eB,eck*;
6
$$inserto el c,eckbox en la p>gina
-iB,eck+before(ele-entoB,eck*;
$$aplico estilos 2ue vienen en la configuraci#n
-iB,eck+css(conf+cssDle-ento*;
-iB,eck+css(conf+css&dicional*;
$$si el ele-ento estaba -arcado para estar activo
if (activo*4
$$lo activo
activar(*;
6else4
$$lo desactivo
desactivar(*;
6
$$defino un evento para el ele-ento
-iB,eck+click(function(e*4
$$co-pruevo la variable activo5 definida dentro del plugin
if(activo*4
desactivar(*;
6else4
activar(*;
6
activo = 1activo;
6*;
$$funci#n local en el plugin para desactivar el c,eckbox
function desactivar(*4
$$ca-bio los estilos para el ele-ento a los -arcados co-o pasivos
-iB,eck+css(4
background: "transparent url(" W conf+i-agen+pasivo W "* no-repeat 7px"5
color: conf+colorIextos+pasivo
6*;
$$si ,ay un texto espec3fico para cuando estaba pasivo
if (conf+textos+pasivo1=""*4
-iB,eck+text(conf+textos+pasivo*
6
$$des-arc,o el c,eckbox interno 2ue es invisible5 pero 2ue se env3a co-o ele-ento de for-ulario+
ele-entoB,eck+re-ove&ttr("c,ecked"*;
6;
function activar(*4
-iB,eck+css(4
background: "transparent url(" W conf+i-agen+activo W "* no-repeat 7px"5
color: conf+colorIextos+activo
6*;
if (conf+textos+activo1=""*4
-iB,eck+text(conf+textos+activo*
6
ele-entoB,eck+attr("c,ecked"5"1"*;
6;
,l cdigo est convenientemente comentado para que se pueda entender mejor. ero lo que queremos mostrar en este caso
es que &emos creado dos funciones dentro del cdigo del plugin( activar01 y desactivar01. ,sas dos funciones, al estar dentro
del bloque t&is.eac&01, se pueden acceder desde cualquier parte del plugin y comparten el mismo mbito de variables que el
propio plugin, luego podremos acceder desde ellas a cualquier variable definida en el bloque t&is.eac&01.
ara que quede un poco ms clara la estructura completa del plugin, coloco a continuacin su cdigo completo(
0?uery+fn+c,eckbox/ersonali"ado = function(opciones* 4
$$opciones de configuraci#n por defecto
80
var conf = 4
activo: true5
colorIextos: 4
activo: "#00f"5
pasivo: "#``U"
65
textos: 4
activo: ""5
pasivo: ""
65
i-agen: 4
activo: )i-ages$t,u-bFup+png)5
pasivo: )i-ages$t,u-bFdo9n+png)
65
cssDle-ento: 4
padding: "8px 8px 8px 8Opx"5
display: "block"5
-argin: "8px"5
border: "1px solid #eee"5
cursor: "pointer"
65
css&dicional: 4

65
na-eB,eck: ""
6;
$$Las extiendo con las opciones recibidas al invocar el plugin
0?uery+extend(conf5 opciones*;

var -iB,eck = '(t,is*;
var activo = conf+activo
var ele-entoB,eck = '()<input type="c,eckbox" style="display: none;" $)*;
if(conf+na-eB,eck==""*4
ele-entoB,eck+attr("na-e"5 -iB,eck+text(**;
6else4
ele-entoB,eck+attr("na-e"5 conf+na-eB,eck*;
6
-iB,eck+before(ele-entoB,eck*;
-iB,eck+css(conf+cssDle-ento*;
-iB,eck+css(conf+css&dicional*;

if (activo*4
activar(*;
6else4
desactivar(*;
6
-iB,eck+click(function(e*4
if(activo*4
desactivar(*;
6else4
activar(*;
6
activo = 1activo;
6*;

function desactivar(*4
-iB,eck+css(4
background: "transparent url(" W conf+i-agen+pasivo W "* no-repeat 7px"5
color: conf+colorIextos+pasivo
6*;
if (conf+textos+pasivo1=""*4
-iB,eck+text(conf+textos+pasivo*
6
ele-entoB,eck+re-ove&ttr("c,ecked"*;
6;

function activar(*4
-iB,eck+css(4
background: "transparent url(" W conf+i-agen+activo W "* no-repeat 7px"5
81
color: conf+colorIextos+activo
6*;
if (conf+textos+activo1=""*4
-iB,eck+text(conf+textos+activo*
6
ele-entoB,eck+attr("c,ecked"5"1"*;
6;
6*;
return t,is;
6;
7.@.2.- Invocar al plugin c0ec*'o8 personalizado con jQuery
Ha que &emos &ec&o un c&ec#bo- personali%ado, por un objeto de options, vamos a mostrar cmo se pueden crear varios
tipos de c&ec#bo- con este cdigo. >eamos el siguiente AB:'(
<span class="c,"Celeccionar<$span
<span class="c,"=e interesa<$span
<span class="c,"<ooo<$span
<br
<br
<span id="otro"otro suelto<$span
3e puede apreciar que tenemos simples elementos 32@. or un lado tenemos F 32@ con la clase Dc&D y por otro lado
otro 32@ suelto con identificador DotroD. 2&ora veamos cmo los convertir!amos en campos de formulario c&ec#bo-
personali%ados(
'("+c,"*+c,eckbox/ersonali"ado(*;
2s! crear!amos F c&ec#bo-, en los F primeros 32@ que ten!an la class Dc&D. ,stos c&ec#bo- personali%ados se crear!an con
las opciones por defecto.
'("#otro"*+c,eckbox/ersonali"ado(4
activo: false5
colorIextos: 4
activo: "#f80"5
pasivo: "#U8a"
65
i-agen: 4
activo: )i-ages$9eat,erFcloudy+png)5
pasivo: )i-ages$9eat,erFrain+png)
65
textos: 4
activo: )%uen tie-po :*)5
pasivo: )%uena cara ;*)
65
css&dicional: 4
border: "1px solid #ddP"5
9idt,: "100px"
65
na-eB,eck: "buenFtie-po"
6*;
,n este segundo caso de invocacin al plugin estamos convirtiendo en un c&ec#bo- personali%ado el *ltimo 32@, que
ten!a identificador DotroD. ,n este segundo caso estamos utili%ando multitud de variables de configuracin espec!ficas, que
&arn que el c&ec#bo- tenga un aspecto radicalmente diferente a los anteriores.
ara acabar, se puede ver el ejemplo en funcionamiento en una pgina aparte.
7.A.- Alias personalizado y ocultar cdigo en plugins jQuery
(#mo crear un alias personalizado a 1, para mejorar la compatibilidad en todos los contextos, y ocultar
82
el c#di%o privado de los plu%ins jQuery.
,n principio un plugin jQuery est pensado para que todas las personas lo puedan usar en sus pginas "eb y de &ec&o,
&emos aprendido muc&as convenciones para potenciarlo a lo largo de los cap!tulos dedicados a la creacin de plugins en el
:anual de jQuery. ,n este art!culo vamos a aprender otra buena prctica que ayudar a que nuestros plugins funcionen
correctamente en todos los sitios "eb.
3e trata de ocultar de una manera sencilla todo el cdigo de nuestros plugins y utili%ar un alias para la variable J que puede
dar conflictos con otras librer!as. 2lgo que nos ayudar de dos maneras(
,l s!mbolo J se utili%a en muc&os otros frame"or#s y componentes $avascript y si el "eb donde se coloque el plugin utili%a
alguno de ellos, pueden ocurrir conflictos, algo que no ocurrir en el caso que utilicemos un alias.
,n el cdigo de los plugins puedes utili%ar tus propias variables o funciones, que tendrn el nombre que &ayas querido. ero
alguno de esos nombres puede que ya los utilicen otros programadores en sus pginas, lo que puede generar conflictos
tambin. or eso no es mala idea ocultar tu cdigo y &acerlo local a un mbito propio.
Bodo esto se consigue colocando todo tu cdigo dentro de una funcin que se invoca seg*n se declara.
(function(* 4
$$B#digo de tu plugin

$$puedes crear tus variables o funciones
$$s#lo ser>n visibles a2u3
var lo2uesea;
function algo(*4

6
6*(*; $$la funci#n se e0ecuta instant>nea-ente
2dems, a esa funcin podr!amos enviarle la variable DjQueryD que contiene toda la funcionalidad del frame"or#. ,sa
variable la recibirs en el parmetro con cualquier alias, como se puede ver en el siguiente cdigo(
(function('* 4
$$c#digo del plugin
6*(0?uery*;
)omo la variable jQuery siempre es una referencia al frame"or# correcta, puedes estar seguro que no tendr conflictos con
otras librer!as. 'uego la recibimos con el nombre J, pero en ese caso ya estamos en el mbito de la funcin, donde las
variables locales pueden tener el nombre que nosotros queramos.
Nota: ,n este caso estamos recibiendo la variable jQuery con el nombre J, pero podr!amos utili%ar cualquier otro nombre para el alias a
jQuery.
7.A.1.- +onclusin9 una envoltura segura y sencilla para tus plugins
)omo podemos entender, colocar esa envoltura en tus plugins, no interfiere en nada a cmo se tienen que diseEar y todo lo
que &emos aprendido anteriormente sobre creacin de plugins se puede aplicar a este pequeEo pero interesante truco. @o
obstante, para completar las informaciones, a continuacin se puede ver un plugin donde reali%amos un plugin utili%ando
esta tcnica para ocultar el cdigo y utili%ar el alias de J.
)omo &emos visto en este art!culo, utili%ar esa envoltura para nuestros plugins es una tarea simple, no requiere muc&o
cdigo y las ventajas son importantes.
83
Parte &:
'ectos en jQuery
!os e-ectos son una de las partes m&s atracti+as del -ramewor. " *ue permitir&n dotar
de dinamismo a nuestra p&gina) hacerla m&s atracti+a " en de-initi+a) me'orar la
e2periencia del usuario.
@.1.- jQuery animate349 Animacin de propiedades +<<
El mtodo animate*+ de jQuery permite animar varias propiedades, con valores numricos, de ()) en un
solo paso.
Aemos avan%ado bastante en el :anual de jQuery y con los conocimientos adquiridos &asta el momento ya estamos en
disposicin de aprender cualquier cosa ms avan%ada en este frame"or# $avascript. Aa llegado el momento de dedicarnos a
mostrar las maneras con las que podemos crear efectos para adornar nuestras pginas y &acer que la e-periencia de uso sea
ms atractiva. ,n pasados art!culos de DesarrolloWeb.com ya mostramos algunas maneras de &acer efectos sencillos en
jQuery y en adelante vamos a e-plicar el funcionamiento de otros mtodos, ms complejos pero tambin ms verstiles.
,n el presente art!culo vamos a comen%ar a aprender cosas sobre el mtodo animate01, uno de los ms interesantes para
&acer efectos en jQuery a partir de la modificacin de propiedades )33. ,ste mtodo, como veremos, resulta bastante
polivalente, pues con l podemos crear muc&os tipos de animaciones, tantos como combinaciones de atributos )33
podemos tener. 3irve bsicamente para ofrecer un listado de atributos )33, con los nuevos valores a los que deseamos
actuali%arlos y jQuery se encargar de &acer esa modificacin de manera que sea bastante suave.
or ejemplo, tenemos un elemento con los atributos )33 "idt& y &eig&t con valores DP e HD y queremos animarlos para que
esos atributos pasen a tener valores DZ y BD )on el mtodo animate01 podemos conseguir que esos atributos pasen de unos
valores a otros sin cambios bruscos, y en lugar de ello lo &agan con una animacin suavi%ada desde uno a otro valor.
@.1.1.- $ar%metros del mtodo animate34
ara invocar al mtodo animate01 tenemos que indicar una serie de parmetros, aunque slo uno de ellos ser obligatorio. 'a
lista es la siguiente(
+ani-ate( /ropiedades5 R :uraci#nS5 R Nunci#n de ani-aci#n S5 R Ballback S *
Propiedades: ,ste es el *nico parmetro que de debe indicar obligatoriamente y es para indicar qu atributos )33
queremos actuali%ar, con sus nuevos valores. 3e tiene que indicar en notacin de objeto, de manera similar a como se puede
indicar en el mtodo css01 de jQuery y slo permite el cambio de propiedades )33 que tengan valores numricos. or
ejemplo, podr!amos cambiar la anc&ura de un borde, pero no el tipo de borde 0si queremos que sea slido, con l!nea de
puntos, etc.1 porque no tiene valores numricos. Ieneramente, si no especificamos otra cosa los valores se entienden en
p!-eles. 'os nuevos valores se pueden indicar de manera absoluta, o incluso de manera relativa, con un string del tipo
D[C4<D, que indica que se debe aumentar en 4< ese atributo. ,n los ejemplos de este y siguientes art!culos que publiquemos
en desarrollo"eb.com veremos varias maneras de indicar las propiedades para reali%ar varias animaciones.
6uracin: 3irve para indicar la duracin de la animacin, en un valor numrico en milisegundos, o en un valor de cadena de
caracteres como DfastD o Dslo"D.
Funcin de animacin: ,sta funcin sirve para indicar cmo se reali%ar la animacin, si ms suave al principio y rpida al
final, o igual de rpida todo el tiempo. ,s decir, la velocidad con la que se reali%ar el cambio de valores en diferentes puntos
84
de dentro de la animacin. ,n principio, los dos posibles valores son Ds"ingD 0por defecto1 y DlinearD.
+allback: /frece la posibilidad de indicar una funcin a ejecutarse cuando se &a terminado totalmente de producir el
efecto. ,s decir, una funcin que se invoca cuando se &a llegado al valor final de los atributos )33 que se solicitaron
cambiar.
@.1.2.- /jemplo jQuery del mtodo animate34
ara acabar vamos a ver un ejemplo del mtodo animate01, pero bastante simplificado. ,n realidad slo vamos a utili%ar el
primero de los parmetros, para indicar las propiedades )33 que deseamos animar.
Bendremos un titular en la pgina A7 con algunos atributos de estilos(
<,1 style="border-botto-: 1px solid #ff8800; font-si"e: 1Ppt;"&ni-acion 0?uery<$,1
@uestra animacin &ar que el borde del elemento pase a tener ;< p!-eles de anc&ura y que el tamaEo de la fuente suba para
;4pt. ara ponerla en marc&a utili%ar!amos un cdigo como el siguiente(
'(",1"*+ani-ate(4
)border-botto--9idt,): "80"5
)font-si"e): )8Ppt)
6*;
)omo se puede ver, en notacin de objeto indicamos dos atributos )33 y los dos valores a los que queremos animarlos. ,l
primero de los valores, que no tiene unidades, es considerado como p!-eles. ,l segundo valor, que se indica en puntos 0pt1,
&ar que jQuery utilice ese tipo de unidades en ve% de los p!-eles.
2dems, podemos fijarnos que en este caso a animate01 slo le &emos pasado unparmetro, con la lista de las propiedades
)33 a animar. or tanto, dejamos a jQuery que utilice los valores por defecto de tiempo de animacin y funcin de
animacin.
ero veamos una pgina que &ace uso de ese mtodo, con el cdigo completo. )omo veremos, en la pgina tendremos
adems dos enlaces, uno para poner en marc&a la animacin y otro para restaurar el )33 de los elementos a los valores
originales. 2s! que, de paso que vemos como &acer un animate01, aprenderemos adems a lan%ar la ejecucin de las
animaciones como respuesta a eventos de usuario.
<,t-l
<,ead
<title=Ytodo ani-ate 0?uery<$title
<script
'("#ani-ar"*+click(function(e*4
e+prevent:efault(*
'(",1"*+ani-ate(4
)font-si"e): )8Ppt)
6*;
6*;

'("#restaurar"*+click(function(e*4
e+prevent:efault(*
'(",1"*+css(4
)font-si"e): )1Ppt)
6*;
6*;
6*
<$script
<$,ead
<body
<,1 style="border-botto-: 1px solid #ff8800; font-si"e: 1Ppt;"&ni-acion 0?uery<$,1
Iraba0ando con el -Ytodo ani-ate:
<a ,ref="#" id="ani-ar"&ni-ar<$a
<br
85
<br
]uelvo a lo 2ue ,ab3a antes:
<a ,ref="#" id="restaurar".estaurar<$a
<$body
<$,t-l
,ste ejemplo puede verse en marc&a en una pgina aparte.
@.2.- Dading en jQuery
Efectos de cambio de opacidad de los elementos en la p$%ina, con los mtodos de fadin% en jQuery,
fade5n*+, fade&ut*+ y fade6o*+.
>amos a conocer otra manera de aplicar efectos a elementos de la pgina, a travs de los mtodos de fading de jQuery. 3on
mtodos muy sencillos de aplicar y que sirven para crear efectos bastante atractivos, donde se produce un fundido a travs
del cambio de la propiedad opacity de )33.
2 lo largo del :anual de jQuery que venimos publicando en DesarrolloWeb.com &emos utili%ado alguno de estos mtodos
para &acer efectos rpidos en jQuery, pero a&ora los vamos a e-plicar de manera ms detenida. 2dems, reali%aremos nuevas
prcticas con estos tipos de efectos de cambio de opacidad y trabajaremos con las funciones callbac# para reali%ar una
pequeEa cadena de efectos, que se ejecutan cuando los anteriores &ayan acabado.
=ecordemos que )33 tiene una propiedad para alterar la opacidad de los elementos. Bodos los valores de /pacity se
e-presan con n*meros de < al 7. )on un valor de cero &ar!a que el elemento fuera totalmente transparente y opacity con un
valor de 7 ser!a totalmente opaco.
)on los mtodos de fading de jQuery se puede cambiar esa propiedad. ,-isten tres mtodos para crear efectos de fundido,
los siguientes(
12todo fade7ut()
,ste mtodo &ace que el elemento que lo recibe desapare%ca de la pgina a travs del cambio de su opacidad, &aciendo una
transicin suavi%ada que acaba con el valor de opacity cero.
12todo fade%n()
,l mtodo fade+n01 &ace que el elemento que lo recibe apare%ca en la pgina a travs del cambio de su opacidad, &aciendo
una transicin suavi%ada que acaba con el valor de opacity 7. ,ste mtodo slo podremos observarlo si el elemento sobre el
que lo invocamos era total o parcialmente transparente, porque si era opaco al &acer un fade+n01 no se advertir ning*n
cambio de opacidad.
12todo fade$o()
,l tercer mtodo para &acer efectos de fundidos es fadeBo01 y es el ms verstil de todos, puesto que permite &acer
cualquier cambio de opacidad, a cualquier valor y desde cualquier otro valor. ,ste mtodo recibe la duracin deseada para el
efecto, el valor de opacidad al que queremos llegar y una posible funcin callbac#.
@.2.1.- /jemplos con e)ectos de )undido )ade?ut34 y )adeIn34 en jQuery
ara ilustrar el modo en el que se pueden &acer efectos de fundido con el cambio de opacidad &emos &ec&o un ejemplo de
pgina donde se pueden ver todos los mtodos de fading en funcionamiento, con algunas variantes interesantes.
ara &acernos una idea de lo que vamos a conseguir en este ejercicio, podemos ver el ejemplo en marc&a.
,n el ejemplo vamos a tener una lista como esta(
<ul id="-ilista"
<li id="e1"Dle-ento 1<$li
<li id="e8"Cegundo ele-ento<$li
86
<li id="e7"Iercer L@<$li
<$ul
)omo vemos, tanto la lista 0etiqueta 9'1 como los elementos 0etiquetas '+1 tienen identificadores 0atributos id1 para poder
referirnos a ellos desde jQuery.
2&ora veamos cmo &acer que la lista desapare%ca con un fundido &acia transparente, a partir de una llamada a fade/ut01.
'("#-ilista"*+fade<ut(*;
)omo se puede ver, fade/ut01 en principio no recibe ning*n parmetro. 2unque luego veremos que le podemos pasar un
parmetro con una funcin callbac#, con cdigo a ejecutarse despus de finali%ado el efecto.
,ste ser!a el cdio para que la lista vuelva a aparecer, a travs de la restauracin de su opacidad con una llamada a fade+n01.
'("#-ilista"*+fade@n(*;
@.2.2.- /jemplo con )ade-o34
,l mtodo fadeBo es bastante ms verstil, como ya se &ab!a adelantado. ara &acer un ejemplo interesante con este mtodo
tenemos que ver cmo se le pueden pasar distintos valores de opacidad y para ello &emos creado un campo select con
distintos valores.
<select na-e="opacidad" id="selopacidad"
<option value="0+8"80V<$option
<option value="0+P"P0V<$option
<option value="1"100V<$option
<$select
)omo se puede ver, este 3,',)B tiene diferentes /B+/@ con algunos valores de opacidad. 'os valores 0atributos value
de los /B+/@1 son n*meros entre < y 7. 2&ora vamos a mostrar el cdigo de un evento que asociaremos a este campo
3,',)B, para ejecutar acciones cuando el usuario cambia el valor que aparece en l. )uando el 3,',)B cambie, queremos
actuali%ar el valor de opacity de los elementos A7 de la pgina.
'("#selopacidad"*+c,ange(function(e*4
var opacidadFdeseada = e+target+optionsRe+target+selected@ndexS+value
'(",1"*+fadeIo(10005opacidadFdeseada*;
6*;
,n este cdigo estamos definiendo un evento Donc&angeD sobre el 3,',)B anterior. ,n la primera l!nea de la funcin se
est e-trayendo la opacidad deseada y para ello se accede a la propiedad target del objeto evento que se recibe en la funcin
que enviamos al mtodo c&ange01.
Nota: en el objeto evento, target es una referencia al objeto del D/: sobre el que se est codificando el evento.
,s decir, en este ejemplo, e.target es una referencia al campo 3,',)B sobre el que estamos definiendo el evento.
)on e.target.optionsXY tengo el array de options que &ay dentro de ese 3,',)B.
)on e.target.selected+nde- obtengo el !ndice del elemento seleccionado, para poder acceder a la opcin seleccionada a travs del array de
options.
)on e.target.optionsXe.target.selected+nde-Y.value estamos accediendo a la propiedad value del /B+/@ que se encontraba seleccionado. 2s!
accedemos a la opacidad deseada que quer!amos aplicar.
9na ve% tenemos esa opacidad deseada, recogida del value del /B+/@ seleccionado, podemos ver la siguiente l!nea de
cdigo, en la que &acemos el fadeBo01.
>eamos que fadeBo01 recibe en principio dos mtodos. ,l primero es la duracin en milisegundos del ejemplo. ,l segundo
es el valor de opacidad que queremos aplicar.
@.2..- /nviando )unciones call'ac*
'os tres mtodos que estamos viendo para &acer fading, como cualquiera de los e-istentes en jQuery, permiten el env!o de
un parmetro como funcin callbac#.
)on este cdigo conseguimos que se ejecute un fade+n01 despus de un fade/ut01, para conseguir un efecto de parpadeo, en
87
el que primero se oculta el elemento y cuando desaparece se vuelve a mostrar restaurando su opacidad.
'("#-ilista"*+fade<ut(function(*4
'(t,is*+fade@n(*;
6*;
)omo vemos, se est indicando una funcin callbac# y dentro de la misma, t&is es una referencia al objeto jQuery que
recibi el anterior mtodo. /sea, con J0DLmilistaD1.fade/ut01 se &ace un efecto de fundido para que desapare%ca el elemento
DLmilistaD. 'uego la funcin callbac# se ejecutar cuando ese elemento termine de desaparecer. Dentro de esa funcin
callbac# se accede a J0t&is1 para tener una referencia a DLmilistaD y sobre ese elemento invocamos al mtodo fade+n01 para
&acer que apare%ca de nuevo la lista.
2&ora vamos a mostrar otro ejemplo de callbac# un poco ms adelantado, en el que se encadenan varias funciones callbac#,
que se ejecutar!an una detrs de la otra.
var opacidadFdeseada = '("#selopacidad"*+attr("value"*;
'("#e1"*+fadeIo(P005 opacidadFdeseada5 function(*4
'("#e7"*+fadeIo(P005 opacidadFdeseada*;
6*;
6*;
,n este cdigo &acemos un efecto de fadeBo01 sobre cada uno de los elemento de la lista. ara definir qu opacidad
queremos aplicar a esos elementos utili%amos de nuevo el campo 3,',)B que &ab!amos visto anteriormente en este
art!culo. ero en esta ocasin utili%amos una manera distinta de acceder al valor de opacidad que &ay seleccionado, a travs
del mtodo attr01 de jQuery.
,n el cdigo anterior primero se ejecuta el cambio de opacidad en el primer elemento, luego en el segundo y por *ltimo en
el tercero, siempre &acia la misma DopacidadNdeseadaD que se &ab!a recuperado en el 3,',)B.
@.2.1.- +digo completo del ejemplo de )ading en jQuery
2 continuacin podemos ver el cdigo completo de trabajo con los mtodos de fading disponibles en jQuery.
<,t-l lang="es"
<,ead
<titleNading en 0?uery<$title
<script
'("#ocultartoda"*+click(function(e*4
'("#-ilista"*+fade<ut(*;
6*;
'("#-ostrartoda"*+click(function(e*4
'("#-ilista"*+fade@n(*;
6*;
'("#ocultar-ostrar"*+click(function(e*4
'("#-ilista"*+fade<ut(function(*4
'(t,is*+fade@n(*;
6*;
6*;
'("#selopacidad"*+c,ange(function(e*4
var opacidadFdeseada = e+target+optionsRe+target+selected@ndexS+value
'(",1"*+fadeIo(10005opacidadFdeseada*;
6*;
'("#pororden"*+click(function(e*4
var opacidadFdeseada = '("#selopacidad"*+attr("value"*;
'("#e7"*+fadeIo(P005 opacidadFdeseada*;
6*;
6*;
6*
6*
<$script
88
<$,ead
<body
<,1Nading en 0?uery<$,1
<b=ostrar y ocultar ele-entos de for-a suavi"ada con fading<$b
<p
<a ,ref="#" id="ocultartoda"ocultar toda la lista<$a H
<a ,ref="#" id="-ostrartoda"=ostrar toda la lista<$a H
<a ,ref="#" id="ocultar-ostrar"<cultar la lista y luego -ostrarla<$a
<$p
<for- na-e="f1"
Ba-bia la opacidad del ele-ento !1 a: <select na-e="opacidad" id="selopacidad"
<option value="0+P"P0V<$option
<option value="1"100V<$option
<$select
<br
<a ,ref="#" id="pororden"Ba-biar la opacidad de los ele-entos de la lista por orden<$a
<$for-

<ul id="-ilista"
<li id="e1"Dle-ento 1<$li
<li id="e8"Cegundo ele-ento<$li
<li id="e7"Iercer L@<$li
<$ul

<$body
<$,t-l
3i lo deseamos, podemos ver el ejemplo en marc&a en una pgina aparte.
@..- +olas de e)ectos en jQuery
!amos a explicar qu es una cola de efectos, para qu nos sirve y c#mo se confi%uran las colas de efectos
en el framework Javascript jQuery.
,n el :anual de jQuery &emos tratado ya en diversos art!culos de los efectos en jQuery. De &ec&o, ste ya es el cuarto
art!culo que destinamos a tratar las distintas maneras de crear efectos en este frame"or# $avascript. Aasta la fec&a &emos
publicado las claves para la creacin de efectos simples, el verstil mtodo animate01 para reali%ar la animacin de atributos
)33 numricos, o las funciones de para crear efectos de fundido.
Bodos estos mtodos tratados anteriormente, y algunos ms que no &emos revisado todav!a como slice9p01 o sliceDo"n01,
que funcionan de manera similar a los ya vistos mtodos fade+n01 o fade/ut01, sirven para reali%ar efectos variados en
pginas "eb y son tan sencillos de usar como invocarlos sobre el objeto jQuery que contiene al elemento que deseamos
animar. 2&ora que ya &emos superado este primer paso y ya sabemos &acer toda una gama de efectos simples, vamos a
aprender a encadenar varios efectos a ejecutar uno detrs de otro.
>eremos en este art!culo y varios que sucedern, que encadenar efectos es tan sencillo como llamar a todos los mtodos de
efecto que queremos reali%ar. Bodos esos mtodos se incluirn automticamente en una cola y sern ejecutados uno detrs
del otro, sin que tengamos que &acer nada por nuestra cuenta, aparte de la propia invocacin de los mtodos.
@..1.- Dunciones de e)ectos
>amos a repetir a lo largo de los siguientes art!culos un concepto que quiero e-plicar para que se sepa a qu nos referimos.
3e trata de las D.unciones de efectosD que son aquellas que dispone jQuery para crear efectos especiales en pginas "eb.
)omo &emos dic&o, en diversos art!culos anteriores ya se &an e-plicado y mostrado efectos de diversas de las funciones de
efectos disponibles.
89
'as funciones de efectos son los mtodos jQuery que reali%an un cambio en los elementos de la pgina de manera
suavi%ada, es decir, que alteran las propiedades de uno o varios elementos progresivamente, en una animacin a lo largo de
un tiempo.
or poner un ejemplo, tenemos el mtodo fade/ut01, que reali%a un efecto de opacidad sobre uno o varios elementos,
&aciendo que stos desapare%can de la pgina con un fundido de opaco a transparente. ,l complementario mtodo fade+n01
&ace un efecto de fundido similar, pero de transparente a opaco. )omo stos, tenemos en jQuery numerosos mtodos de
efectos adicionales como animate01, slice9p01 y sliceDo"n01, etc. ,n la propia documentacin del frame"or#, en el apartado
,ffects de la referencia del 2+, podremos ver una lista completa de estas funciones de efectos.
,n este :anual de jQuery ya &emos visto varios ejemplos sobre estas funciones de efectos y a lo largo de los pr-imos
art!culos que publicaremos en desarrollo"eb .com veremos diversas otras aplicaciones de muestra donde podremos seguir
aprendiendo.
@..2.- +ola de e)ectos por de)ecto
)uando invocamos varias funciones de efectos de las disponibles en jQuery, stas se van introduciendo en una cola de
efectos predeterminada, llamada Df-D. )ada elemento de la pgina tiene su propia cola de efectos predeterminada y funciona
de manera automtica. 2l invocar los efectos se van metiendo ellos mismos en la cola y se van ejecutando automticamente,
uno detrs de otro, con el orden en el que fueron invocados.
capa = '("#-icapa"*;
capa+fade<ut(*;
capa+fade@n(*;
capa+slideKp(*;
capa+slide:o9n(*;
'as funciones de efectos, una detrs de otra, se invocan en un instante, pero no se ejecutan todas a la ve%, sino que se espera
que acabe la anterior antes de comen%ar la siguiente. or suerte, jQuery &ace todo por su cuenta para gestionar esta cola.
)omo decimos, cada elemento de la pgina tiene su propia cola de efectos y, aunque incluso podr!amos crear otras colas de
efectos para el mismo elemento, en la mayor!a de los casos tendremos suficiente con la cola por defecto ya implementada .
@...- /jemplo de ejecucin de e)ectos en la cola predeterminada de jQuery
>amos lan%ar varios efectos sobre una capa y veremos como ellos mismos se ejecutan en el orden como los &emos
invocado.
Bendremos un elemento D+>, como este(
<div id="-icapa"Dsta capa 2ue se va a ani-ar5 en un bucle infinito+++<$div
2&ora podemos ver una funcin que reali%a la invocacin a varios efectos jQuery(
function colaDfectos(*4
capa+ani-ate(4
"font-si"e": "1+Pe-"
65 8000*;
capa+,ide(1000*;
capa+s,o9(1000*;
capa+ani-ate(4
"left": "7P0px"5
"top": "P0px"
651P00*;
capa+ani-ate(4
"font-si"e": "0+GPe-"
65 8000*;
capa+ani-ate(4
"left": "100px"5
"top": "80px"
65 1P005 colaDfectos*;
6
Aabr!a que fijarse que la *ltima de las funciones de efecto invocadas &ace una llamada a esta misma funcin, por medio de
90
un callbac#, por lo que, cuando terminen de ejecutarse todos los efectos, se volver a invocar a la funcin y se producir as!
un bucle infinito, donde se repetir todo el tiempo la misma secuencia de efectos.
H a&ora podemos poner en marc&a esta funcin cuando la pgina est lista(
colaDfectos(*;
6*;
,l resultado del ejercicio completo se puede ver en una pgina aparte.
)on esto &emos &ec&o nuestro primer ejemplo de cola de efectos. Aa sido fcil, noS ero claro que a partir de aqu! la cosa
se puede complicar todo lo que deseemos, o necesitemos. ,n el pr-imo art!culo empe%aremos a e-plicar el modos
e-istentes en jQuery para alterar las colas de efectos, para &acer cosas como detenerlas, anali%arlas, cargar funciones de otros
tipos para ejecutar en la cola, etc.
@.1.- Mtodo 2ueue34 para acceder a una cola de e)ectos
!eremos c#mo hacer cosas con las colas de efectos en jQuery, haciendo nuestra primera prueba con el
mtodo queue*+, que permite acceder y modificar la cola de efectos.
,n el art!culo anterior del :anual de jQuery empe%amos a &ablar sobre las colas de efectos. >imos que crear una cola de
efectos es una tarea muy sencilla, bsicamente porque jQuery gestiona de manera automtica la cola de efectos
predeterminada. 2&ora queremos comen%ar a mostrar cmo podemos trabajar nosotros mismos con estas colas de efectos y
modificar su comportamiento.
ara ello vamos a ver el mtodo ms importante que tenemos que conocer para trabajar con las colas de efectos de jQuery(
queue01. )omo muc&os otros mtodos de este frame"or# $avascript, queue01 permite su invocacin con distintos juegos de
parmetros, por lo que, dependiendo de los valores que le pasemos a la funcin &ar unas cosas u otras. )omen%aremos con
el uso ms simple y luego iremos complicando los ejercicios en futuros art!culos.
@.1.1.- Mtodo 2ueue3Inom're+olaJ4
3i llamamos al mtodo queue01 sin parmetros o pasndole una cadena con el nombre de una cola, nos devolver un array
con cada una de las funciones que estn encoladas en ese momento.
3i no indicamos parmetros a queue01 estamos indicando que nos pase la lista de eventos encolados en la cola
predeterminada. 3i se indica un parmetro de tipo cadena, que ser!a el nombre de la cola a e-aminar, lo que nos devuelve es
el array de funciones de la cola con nombre indicado en el parmetro.
Nota( ,l nombre de la cola predeterminada es Df-D, por lo que llamar a la funcin(
ele-ento+2ueue("fx"*;
Bendr!a el mismo efecto que llamarla sin parmetros.
ele-ento+2ueue(*;
>eremos un ejemplo sencillo de esta posible invocacin del mtodo queue01 y adems, aparte vamos a ver que se
pueden encolar funciones en la cola tantas veces como queramos, aunque la cola est en marc&a.
,l efecto es que esas funciones encoladas posteriormente se quedarn al final de la cola y se ejecutarn cuando el resto de la
cola se &aya ejecutado.
91
3i lo deseamos, antes de ponernos a comentar este ejemplo, podemos ver el ejercicio en marc&a que vamos a construir.
Benemos el siguiente AB:', que incluye varios elementos(
<button id="botonfade"=uestra y luego oculta con fade@n y fade<ut<$button
<button id="botonslide"=uestra y luego oculta con slideKp slide:o9n<$button
<button id="botonta-anocola"=uestra el nX-ero de funciones en cola a,ora -is-o<$button
<div id="-ensa0e"
Dn estos -o-entos no ,ay funciones de efectos en la cola por defecto+
<br
<span class="notar"/ulsa repetidas veces los botones de arriba para ir -etiendo funciones en la
cola<$span
<$div
<div id="-icapa"<$div
)omo se puede ver tenemos tres botones. 9no sirve para agregar funciones en la cola para &acer efectos fade+n01 y
fade/ut01, el segundo para agregar a la cola funciones de efectos slide9p01 y slideDo"n01 y el tercero para mostrar la
longitud de la cola en un momento dado.
'uego tenemos una capa para mostrar mensajes y otra con idCDmicapaD que ser el D+> que vamos a animar con los
efectos.
2s! podremos definir el evento onclic# del primer botn(
'("#botonfade"*+click(function(*4
capa+fade<ut(P00*;
capa+fade@n(P00*;
-uestra.estantesBola(*;
6*;
2s! podemos definir el evento onclic# del segundo(
'("#botonslide"*+click(function(*4
capa+slideKp(P00*;
capa+slide:o9n(P00*;
6*;
,stos dos botones, como se puede ver, ejecutan efectos sobre DmicapaD y el resultado es que, a medida que pulsamos los
botones repetidas veces, los efectos se van encolando. odemos pulsar tantas veces como queramos y se irn encolando ms
y ms efectos en la cola predeterminada.
2l ejecutar estos eventos clic#, como *ltima sentencia &ay una llamada a la funcin muestra=estantes)ola01, que veremos
a&ora mismo. ero antes veamos el tercer botn, que sirve para mostrar el n*mero de elementos de la cola predeterminada.
'("#botonta-anocola"*+click(function(*4
6*;
)omo se ve, se llama a la funcin muestra=estantes)ola01, que simplemente accede a la cola para saber el n*mero de
funciones de efectos encoladas en un momento dado. 3u cdigo es el siguiente(
function -uestra.estantesBola(*4
var nu-NuncionesDnBola = '("#-icapa"*+2ueue(*+lengt,;
'("#-ensa0e"*+text("Dn el -o-ento de ,acer el Xlti-o clic en los botones ,ay " W
nu-NuncionesDnBola W " funciones de efectos en cola"*;
6
,n la primera sentencia se accede al la cola predeterminada del elemento con idCDmicapaD, lo que nos devuelve un array, al
que luego se accede a su propiedad Dlengt&D para saber el n*mero de elementos que contiene. )on esto averiguamos el
n*mero de funciones encoladas en un momento dado. 'uego se muestra ese n*mero en la capa con idCDmensajeD.
odemos ver el cdigo completo de este ejercicio.
<,t-l lang="en"
<,ead
92
<titleBola de efectos por defecto en 0?uery<$title
<script src="++$02uery-1+O+8+-in+0s" type="text$0avascript"<$script
body4
font-si"e: 0+GPe-;
font-fa-ily: ta,o-a5 verdana5 sans-serif;
6
+notar4
color: #77U;
6
#-ensa0e4
-argin: 80px Ppx;
6
#-icapa4
left: 800px;
top: 1P0px;
position: absolute;
9idt,: P0px;
,eig,t: P0px;
background-color: #7d7;
6
<$style
<script languague="0avascript"
function -uestra.estantesBola(*4
var nu-NuncionesDnBola = '("#-icapa"*+2ueue(*+lengt,;
'("#-ensa0e"*+text("Dn el -o-ento de ,acer el Xlti-o clic en los botones ,ay " W
nu-NuncionesDnBola W " funciones de efectos en cola"*;
6
'("#botonfade"*+click(function(*4
capa+fade<ut(P00*;
capa+fade@n(P00*;
6*;
'("#botonslide"*+click(function(*4
capa+slideKp(P00*;
capa+slide:o9n(P00*;
6*;
'("#botonta-anocola"*+click(function(*4
6*;
6*;
<$script
<$,ead
<body
<button id="botonfade"=uestra y luego oculta con fade@n y fade<ut<$button
<button id="botonslide"=uestra y luego oculta con slideKp slide:o9n<$button
<button id="botonta-anocola"=uestra el nX-ero de funciones en cola a,ora -is-o<$button
<div id="-ensa0e"
Dn estos -o-entos no ,ay funciones de efectos en la cola por defecto+
<br
<span class="notar"/ulsa repetidas veces los botones de arriba para ir -etiendo funciones en
la cola<$span
<$div
<$body
<$,t-l
2&ora, para acabar, podemos ver el ejercicio en marc&a en una pgina aparte.
,n el siguiente art!culo continuaremos con el trabajo con colas de efectos y aprenderemos a encolar funciones que no son
las de efectos de jQuery, de modo que podramos meter nuestras propias funciones en la cola, con cualquier tipo de
instruccin.
93
@.5.- Meter cual2uier tipo de )uncin en una cola de e)ectos
jQuery
En la cola de efectos podemos introducir cualquier tipo de funci#n, aunque no sean efectos jQuery, y
para ello vamos a aprender a encolar cualquier conjunto de sentencias con el mtodo queue*+.
,n estos momentos se supone que sabemos cmo introducir funciones de efectos en las colas de efectos de jQuery, ya que
en los art!culos anteriores del :anual de jQuery ya &ab!amos comen%ado a anali%ar cmo funcionaban.
ero RQu pasa si queremos encolar otro tipo de funcin $avascript o jQueryS )omo sabemos &asta a&ora, las funciones de
efectos se encolan ellas mismas sin que tengamos que &acer nada, pero si se trata de otro tipo de funcin la situacin cambia
un poco, pues tendremos que encolarla nosotros mismos e-pl!citamente y para ello tendremos que utili%ar el mtodo
queue01 de jQuery.
Nota( ,l mtodo queue01 funciona de maneras distintas dependiendo de los parmetros que le enviemos. ,n el anterior art!culo ya
empe%amos a e-plicar cmo utili%ar queue01 para acceder a una cola de efectos.
@.5.1.- .2ueue3 I nom're+ola J! call'ac*3 continua 4 4
,l juego de parmetros con el que tenemos que llamar al mtodo queue01 para encolar cualquier tipo de funcin es el
siguiente(
rimer parmetro nombre)ola, que es opcional, se indica el nombre de la cola donde encolar una funcin. 3i no se
indica nada, o si se indica el nombre de la cola predeterminada Df-D, se encola esa funcin en la cola por defecto
que gestiona jQuery por nosotros. 3i se indica cualquier valor distinto de Df-D se encolar en esa cola que estemos
indicando.
,l segundo parmetro es la funcin que se desea encolar. 2l encolarla se coloca como *ltima de las funciones a
ejecutar de la cola, por tanto, se tendrn que ejecutar todas las funciones encoladas anteriormente antes de llegar a
sta que estamos introduciendo.
2 continuacin podemos ver un cdigo de ejemplo en el que encolamos una funcin, que no es de efectos, en la cola de
efectos predeterminada.
capa+2ueue(function(*4
'(t,is*+css(4
"border": "7px solid #77U"5
6*;
$$cual2uier otro c#digo 0?uery++++
$$lla-a-os al siguiente paso de la cola
'(t,is*+de2ueue(*;
6*;
)omo se puede ver, se llama a queue01 indicando la funcin que deseamos encolar. \sta tiene la llamada a un mtodo, css01,
que no es un mtodo de efecto animado y que no se encolaba de manera predeterminada como s! lo &ac!an las funciones de
efectos. 2dems, luego podr!amos tener un n*mero indeterminado de instrucciones jQuery, tantas como se desee.
'o que es importante es que, al final del cdigo de esta funcin, se debe invocar e-pl!citamente al siguiente paso de la cola.
,sto lo &acemos con una llamada al mtodo dequeue01 que aun no &ab!amos visto. 3i no llamamos a este mtodo, ocurrir!a
que la cola se detendr!a y no continuar!a la ejecucin de otras funciones encoladas en el caso que las &ubiera.
Nota( ,l mtodo dequeue01 puede recibir un parmetro que es el nombre de la cola que se debe continuar ejecutndose. 3i no indicamos
ninguna cola o indicamos el valor Df-D, la cola que seguir procesndose es la cola por defecto. :s adelante e-plicaremos cmo trabajar con
colas distintas de la cola por defecto.
2 partir de jQuery 7.O e-iste otra posibilidad de trabajo con las colas y es que a partir de esa versin del frame"or#, la
94
funcin que estamos encolando recibe un parmetro 0que nosotros &emos llamado DcontinuaD1 que es la funcin siguiente
de la cola. ,ste parmetro nos servir!a para continuar la cola sin tener que ejecutar el mtodo dequeue01. odemos ver un
ejemplo a continuacin.
capa+2ueue(function(continua*4
alert("!ola5 esto es un c#digo cual2uiera"*;
$$el par>-etro continua es una funci#n para ir al siguiente paso de la cola
continua(*;
6*;
@.5.2.- /jemplo jQuery para encolar )unciones 2ue no son e)ectos
2&ora podemos ver un ejemplo completo en el que encolamos varios tipos de funciones. 2lgunas son funciones de efectos,
que no necesitamos que &acer nada para que se encolen y otras son funciones normales, que tenemos que encolar
e-pl!citamente.
Benemos este cdigo AB:'(
<button id="botonco-en"ar"!acer una cola de e0ecuci#n con funciones 2ue no son efectos<$button
)omo se puede ver, &ay un botn y una capa. 'a capa nos servir para animarla y el botn para comen%ar la animacin en el
momento que lo pulsemos. >eamos entonces el cdigo del evento clic# que asociaremos a ese botn y que encolar varias
funciones, unas de efectos y otras funciones normales.
'("#botonco-en"ar"*+click(function(*4
$$encolo directa-ente funciones 2ue son efectos
capa+ani-ate(4"9idt,": "80px"65 1000*;
$$para encolar otras funciones utili"o 2ueue(*
capa+2ueue(function(*4
'(t,is*+css(4
"border": "7px solid #77U"5
6*;
'("#botonco-en"ar"*+text("&cabo de ponerle el borde+++ "*;
'(t,is*+de2ueue(*;
6*;
capa+ani-ate(4",eig,t": "800px"65 8000*;
capa+2ueue(function(continua*4
'(t,is*+css(4
"border": "0px"
6*;
'("#botonco-en"ar"*+text("?uitado el borde+++ "*;
$$el par>-etro continua es una funci#n 2ue lleva al siguiente paso de la cola (0para ?uery
1+O*
continua(*;
6*;
capa+ani-ate(4
",eig,t": "P0px"5
"9idt,": "O00px"
65 1000*;
6*;
,l resultado de ejecutar este cdigo $avascript se puede ver en una pgina aparte.
,n el siguiente art!culo veremos el *ltimo uso que nos queda por e-plicar del mtodo queue01 y de paso, otro mtodo
interesante, stop01, que sirve para detener la ejecucin de una cola.
@.7.- Mtodo jQuery.e8tend34
"no de los mtodos del paquete utilities de jQuery, que sirve para extender el contenido de dos o m$s
95
objetos en uno de ellos.
>amos a ofrecer una referencia rpida para el mtodo jQuery.e-tend01, que nos ofrece una utilidad para me%clar me%clar
varios objetos en uno, es decir, colocar los contenidos de todos esos objetos en uno de ellos.
,l mtodo e-tend pertenece a la clase jQuery, y se invoca directamente sobre ella, como si fuera un mtodo esttico de
programacin orientada a objetos. )omo en jQuery la variable J es un atajo de la variable jQuery, podr!amos invocar a este
mtodo con estas dos posibilidades de cdigo(
0?uery+extend(x5 y5 "*;
/ bien(
'+extend(x5 y5 "*;
,stos dos ejemplos de cdigo &ar!an e-actamente lo mismo, colocar en el objeto D-D todos los contenidos de los objetos
D-D, DyD y D%D. ,l mtodo e-tend01 puede recibir cualquier n*mero de parmetros y siempre pondr todos los contenidos de
los objetos en el objeto recibido en el primer parmetro.
@.7.1.- /jemplo de e8tend34 de jQuery
>eamos cmo funciona jQuery.e-tend01 a travs de un sencillo ejemplo.
var a = 4
uno: ",ola"5
otro: "adios"
6;
var b = 4
uno: "otra cosa"5
dos: "lo2uesea"
6;
0?uery+extend(a5 b*;
,n este caso e-tend01 recibe dos parmetros, que son dos objetos. or tanto, mete las opciones del segundo objeto en el
primero. Despus de la llamada a e-tend01, el objeto del primer parmetro tendr sus propiedades ms las propiedades del
objeto del segundo parmetro. 3i alguna de las opciones ten!a el mismo nombre, al final el valor que prevalece es el que
&ab!a en el segundo parmetro.
2s! pues, despus de su ejecucin, el objeto definido en la variable DaD tendr estos datos(
4
uno: "otra cosa"5
otro: "adios"5
dos: "lo2uesea"
6
,sto qui%s pare%ca que no sirve para muc&o, pero en jQuery se utili%a bastante por ser una manera cmoda de me%clar dos
cosas en una. ,l caso ms claro es me%clar los objetos de DoptionsD para configurar un plugin, pero realmente es una accin
que encontraremos por a&! varias veces. De alguna manera, &acer un e-tend01 es como &acer que un objeto &erede las cosas
de otro, lo que lo convierte en un mecanismo que podr venir bien en diversos conte-tos.
ara ver otros ejemplos de e-tend01 consultar el :anual de jQuery, en la seccin donde se &abla de la configuracin de
opciones en plugins en jQuery.
96

Manual de JQuery

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Manual de JQuery

Hochgeladen von

Copyright:

Verfügbare Formate

Tu mejor ayuda para aprender a hacer webs

Das könnte Ihnen auch gefallen