Manual 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 (54 captulos)
Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

!os manuales de DesarrolloWeb.com tienen el cop"right de sus autores. #o reproducir sin autorizaci$n.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com
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.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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#. ,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.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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
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 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.

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
'("#-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.
Artculo por
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.- 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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.- 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 <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 jqueryG 7.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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.- 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 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.
'(docu-ent*+ready(function(*4 '("a"*+click(function(evento*4 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(

'(docu-ent*+ready(function(*4
,sta l!nea sirve para &acer cosas cuando la pgina est lista para recibir instrucciones jQuery que modifiquen el D/:.
'("a"*+click(function(evento*4
)on esta l!nea estamos seleccionando todas las etiquetas 2 del documento y definiendo un evento clic# sobre esos elementos.
alert("!as pulsado el enlace+++n&,ora ser>s enviado a :esarrollo;eb+co-"*;
)on esta l!nea simplemente mostramos un mensaje de alerta informando al usuario que se &a &ec&o clic sobre el enlace.

1. .5.- 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 src="02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("a"*+click(function(evento*4 alert("!as pulsado el enlace+++n&,ora ser>s enviado a :esarrollo;eb+co-"*; 6*; 6*; <$script <$,ead <body <a ,ref=",ttp:$$999+desarrollo9eb+co-" @r a :esarrollo;eb+co-<$a <$body <$,t-l
1. .7.- 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(
'(docu-ent*+ready(function(*4 '("a"*+click(function(evento*4 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#.
Artculo por
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

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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 G asos 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!.
1.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 <script src="02uery-1+7+8+-in+0s" type="text$0avascript" <$script <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.- 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(
'(docu-ent*+ready(function(*4 $$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 J 0DLcapaD1 estamos seleccionando un elemento de la pgina cuyo idCDcapaD.
'("a"*+-ouseover(function(event*4 '("#capa"*+addBlass("clasecss"*; 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.- 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 <script src="02uery-1+7+8+-in+0s" type="text$0avascript" <$script <style type="text$css" +clasecss4 background-color: #ff8800; font-9eig,t: bold; 6 <$style <script '(docu-ent*+ready(function(*4 '("a"*+-ouseover(function(event*4 '("#capa"*+addBlass("clasecss"*; 6*; '("a"*+-ouseout(function(event*4 '("#capa"*+re-oveBlass("clasecss"*;

10

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.

Artculo por
1.5.- Mostrar y ocultar elementos de la p%gina con jQuery

(on el m todo 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 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"*;

11
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.
<forEo-bre: <input type="text" na-e="no-bre" <br <input type="c,eckbox" na-e="-ayorFedad" value="1" id="-ayoriaFedad" <br <div id="for-ulario-ayores" style="display: none;" :ato para -ayores de edad: <input type="text" na-e="-ayoresFedad" <$div <$for-
Coy -ayor de edad
)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(
'(docu-ent*+ready(function(*4 '("#-ayoriaFedad"*+click(function(*4 $$lo 2ue se desee ,acer al recibir un clic el c,eckbox 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 src="02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script

12

'(docu-ent*+ready(function(*4 '("#-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 <forEo-bre: <input type="text" na-e="no-bre" <br <input type="c,eckbox" na-e="-ayorFedad" value="1" id="-ayoriaFedad" <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
Coy -ayor de edad
.inalmente, podemos verlo en marc&a en una pgina aparte.

Artculo por
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 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. odemos ver el ejemplo en marc&a en una pgina aparte.

13
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com )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 <a ,ref="#" id="-ostrar" =ostrar la capa<$a <$p H
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(
'(docu-ent*+ready(function(*4 '("#ocultar"*+click(function(event*4 event+prevent:efault(*; '("#capaefectos"*+,ide("slo9"*; 6*; '("#-ostrar"*+click(function(event*4 event+prevent:efault(*; '("#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.
'("#ocultar"*+click(function(event*4
)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 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.
'("#capaefectos"*+,ide("slo9"*;
,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(
'("#capaefectos"*+s,o9(7000*;
,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

14

<title Dfectos con 0?uery<$title <script src="02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("#ocultar"*+click(function(event*4 event+prevent:efault(*; '("#capaefectos"*+,ide("slo9"*; 6*; '("#-ostrar"*+click(function(event*4 event+prevent:efault(*; '("#capaefectos"*+s,o9(7000*; 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 <a ,ref="#" id="-ostrar" =ostrar la capa<$a <$p <$body <$,t-l H
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.
Artculo por
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*;

15

'("#-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 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.

16
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com )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. 2 continuacin podrs leer ejemplos de 2ja- sencillos, que seguramente te darn una muestra e-celente de las posibilidades de este frame"or#. 'uego, tendrs ocasin de seguir documentndote con muc&os otros art!culos que tratarn de e-plicarte jQuery desde principio a fin.
Artculo por
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. 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(
'(docu-ent*+ready(function(*4 '("#enlacea0ax"*+click(function(evento*4 $$eli-ino el co-porta-iento por defecto del enlace evento+prevent:efault(*; $$&2u3 pondr3a el c#digo de la lla-ada a &0ax 6*;

17

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 src="02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("#enlacea0ax"*+click(function(evento*4 evento+prevent:efault(*; '("#destino"*+load("contenido-a0ax+,t-l"*; 6*; 6* <$script <$,ead <body <a ,ref="#" id="enlacea0ax" !a" clic1<$a <br <div id="destino" <$div <$body <$,t-l
odemos ver el ejemplo en marc&a en una pgina aparte. )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.
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

18
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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(

'(docu-ent*+ready(function(*4 '("#enlacea0ax"*+click(function(evento*4 evento+prevent:efault(*; '("#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.
Artculo por
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. 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.

19
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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-.
<a ,ref="#" id="enlacea0ax" !a" clic1<$a <div id="cargando" style="display:none; color: green;" Bargando+++<$div <br <div id="destino" <$div
)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.
'(docu-ent*+ready(function(*4 '("#enlacea0ax"*+click(function(evento*4 evento+prevent:efault(*; '("#cargando"*+css("display"5 "inline"*; '("#destino"*+load("pagina-lenta+p,p"5 function(*4 '("#cargando"*+css("display"5 "none"*; 6*; 6*; 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

20
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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(
'("#cargando"*+css("display"5 "inline"*;
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(
'("#destino"*+load("pagina-lenta+p,p"5 function(*4
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.
'("#cargando"*+css("display"5 "none"*;
,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 src="02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("#enlacea0ax"*+click(function(evento*4 evento+prevent:efault(*; '("#cargando"*+css("display"5 "inline"*; '("#destino"*+load("pagina-lenta+p,p"5 function(*4 '("#cargando"*+css("display"5 "none"*; 6*; 6*; 6* <$script <$,ead <body Dsto es un &0ax con un -ensa0e de cargando+++ <br <br <a ,ref="#" id="enlacea0ax" !a" clic1<$a <div id="cargando" style="display:none; color: green;" Bargando+++<$div <br <div id="destino" <$div <$body <$,t-l

21
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.
Artculo por
1.1D.- jQuery +#E o 0osting local de las li'rerFas

El (./ nos ofrece una manera m$s optimizada de incluir las librer-as jQuery. !entajas e inconvenientes de la opci#n de alojar el c#di%o del framework jQuery en local o enlazarlo desde uno de los servicios (./. )omo &emos visto en nuestro :anual de jQuery, el primer paso para poder trabajar con este frame"or# $avascript es incluir el script de la librer!as en el A,2D de nuestra pgina. ,sto no tiene ning*n misterio, pero s! que &ay alg*n detalle interesante que podemos tener en cuenta para optimi%ar la descarga de nuestro sitio "eb. 3e trata de utili%ar el servicio )D@ de jQuery, o de otros proveedores como Ioogle )ode, lo que nos ofrecer ventajas, aunque tambin en alg*n caso, posibles inconvenientes. )D@ significa Content Delivery Network, que se traducir!a como red de entrega de contenido y no es otra cosa que un servicio que nos permite incluir las librer!as de cdigo de jQuery desde los servidores de algunas importantes empresas. jQuery no es el *nico que utili%a estos sistemas para distribuir sus paquetes de cdigo, sino que es ampliamente utili%ado por diversos frame"or#s y librer!as del entorno "eb. ,n resumen, cuando usamos un )D@, en ve% de enla%ar con los scripts de jquery alojados en nuestro sitio "eb, lin#amos directamente con una 9=' de otro dominio que los aloja por nosotros. ,sto no se &ace por a&orrar espacio, sino por disponer de una mayor velocidad de entrega de nuestro sitio. 'o e-plicaremos detalladamente por medio de una serie de ventajas ms adelante en este art!culo.
1.1D.1.- <ervicios +#E de jQuery

Diversas empresas ofrecen el cdigo de jQuery para enla%arlo en nuestros sitios "eb basados en el frame"or#. 'os podemos enla%ar directamente de esos servidores, &aciendo lo que se denomina D&otlin#ingD. ,n este caso, ser!a un &otlin#ing deseable, puesto que estos servidores )D@ estn pensados justamente para ello.
Nota: Aotlin#ing es una tcnica que podr!amos traducir como Dlin#ado calienteD y se refiere a enla%ar un recurso e-terno con la 9=' de otro servidor, de otro dominio. ,sto no es muy deseable en recursos como imgenes, pues en lugar de descargarlas desde nuestro propio dominio, los visitantes, al entrar en nuestra "eb, las obtendr!an desde dominios de otros proveedores, lo que se puede considerar como un robo de anc&o de banda.
oogle Code( )ontiene lin#s a los frame"or#s $avascript ms populares, con )D@ de jQuery, :ootools, rototype y muc&os otros.

22
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com :s informacin en &ttp(??code.google.com?intl?esG,3?apis?libraries? ,n el momento de escribir este art!culo, la ms nueva versin que ofrecen como &osting )D@ es 7.P.7 y se podr!a enla%ar en la 9=' &ttp(??aja-.googleapis.com?aja-?libs?jquery?7.P.7?jquery.min.js !icroso"t CDN: Dispone de una red de contenido distribuido con )D@ de varias librer!as $avascript y 2ja-, como jQuery o :oderni%r. ,ncontramos ms informacin en la direccin &ttp(??""".asp.net?aja-library?cdn.as&'a *ltima versin que est disponible en estos momentos ser!a &ttp(??aja-.aspnetcdn.com?aja-?jQuery?jqueryG 7.P.7.min.js CDN #$uery: el propio jQuery ofrece una red )D@ para descarga de sus librer!as, a partir de la ruta &ttp(??code.jquery.com?jqueryG7.P.7.min.js
Nota: 'os )D@ tienen &abitualmente soporte para transferencia de las librer!as por ABB y ABB 3, as! como para la descarga de las librer!as en versin minimi%ada 0indicada para sitios en produccin1 o estndar 0indicada para sitios en desarrollo1. Debes consultar los servicios )D@ para obtener ms informacin.
1.1D.2.- Ventajas e inconvenientes de los +#E

,n la mayor!a de los casos, usar un servidor )D@ es una buena idea, por diversos motivos, entre los que podr!amos resumir( !ayor velocidad de entrega: 'os servicios )D@ estn ofrecidos por grandes empresas, con replicacin de servidores y diversas locali%aciones de entrega a lo largo del mundo. osiblemente Ioogle, o cualquiera de los otros provedores )D@, pueda enviar el script jQuery ms rpido que tu propio servidor y lo distribuya desde una locali%acin ms cercana a la red del cliente que te visita. Cac%eado probable: ,s muy probable que la persona que te visita ya &aya cac&eado el script jQuery, tras la visita a otra pgina "eb que est usando tambin el )D@ de alguna de estas empresas. or ello qui%s no tenga ni que esperar a que descargar el frame"or# y utilice la copia que ya tiene en la cac& del navegador.
)omo todo en la vida, tambin podemos encontrar algunos inconvenientes( Necesitamos estar conectados a &nternet para acceder al CDN: Durante el desarrollo del sitio "eb, si estamos offline, ser!a imprescindible acceder a la copia en local de las librer!as para que nuestra "eb funcione. 3i necesitamos probar la "eb en entornos donde qui%s no dispongamos de +nternet 0por ejemplo, la oficina de un cliente donde no sabemos si van a estar DonlineD1, nos interesar!a acceder a las librer!as por medio de la copia en local. 'enemos menor control: @o puedes tener total control sobre lo que ests trayndote como script. )laro que el script estar correcto, pero no podrs modificarlo si lo necesitas, ya que est en otro servidor. ,sto generalmente no ser un problema, pero &ay algunos marcos en los que en la prctica s! interesa tener un poco ms de control. or ejemplo, en el caso de algunas librer!as que permiten incluirse solo parcialmente 0por ejemplo en :ootools somos capaces de seleccionar qu mdulos del frame"or# deseamos, o en jQuery9+ qu "idgets queremos utili%ar1, no ser posiblea travs de la versin que nos traemos por el )D@.
1.1D. .- +#E m%s )%cil y mejor! pero todavFa se puede optimizar m%s
)omo &abrs podido comprobar, en la mayor!a de los casos, utili%ar un &osting )D@ es una opcin. 3in duda, las ventajas en este caso superan a los inconvenientes, sobre todo para sitios que estn en produccin. 3in embargo, todav!a se puede optimi%ar un poco esta situacin y crear un script sencillo que permita &acer una combinacin entre las dos opciones, es decir, el &osting )D@ cuando est disponible y el &osting local en los casos en los que no est activo el servidor )D@ por cualquier motivo.
Artculo por

23
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.
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( ()* )+a "uncion #$uery*: ,s la funcin principal de jQuery, que adems tiene diversas utilidades seg*n los parmetros que se le env!en. 3u

24
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com utilidad principal es obtener elementos de la pgina. ,ccesorios de ob#etos: ,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. 'raba#o 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.
Artculo por
2.2.- Guncin jQuery o )uncin H34

!eremos con detalle la funci#n m$s importante de jQuery y para ello comenzaremos viendo su uso m$s com0n1 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. >eamos los distintos usos de esta funcin, seg*n los parmetros que reciba.
2.2.1.- Guncin 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 ob#eto #$uery 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.

25
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com '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 <title funci#n 02uery<$title <script src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 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 <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"*;

26
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com )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.
Artculo por
2. .- ?tros usos de la )uncin H34

2a funci#n jQuery*+, o con su abreviaci#n 3*+, 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.- Guncin 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 = '("<div Dle-entos 2ue creo en <b tie-po de e0ecuci#n<$b +<,1 Dn 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.
>eamos el cdigo completo de una pgina que &ace uso de este ejemplo(
<,t-l <,ead <title funci#n 02uery<$title <script src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 var nuevosDle-entos = '("<div Dstos ele-entos ++<$b +<,1 I3tulo+++<$,1 <$div "*;

27

nuevosDle-entos+appendIo("body"*; 6*; <$script <$,ead <body <p Dsto 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.- Guncin 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 Q:' 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. . .- Guncin 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
,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

28

$$&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(
'(docu-ent*+ready(function(*4 $$&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 <title funci#n 02uery<$title <script src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <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<$b 11<$p <p <tro <b p>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.
Artculo por
2.1.- +oreIeac09 eac0 del core de jQuery

(onozcamos con detalle el m todo each del core de jQuery, para ejecutar una funci#n en cada uno de los elementos de un %rupo. 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

29
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com con una seleccin reali%ada con la funcin jQuery Gtambin llamada funcin J01G. Rtil 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#. S ero qu pasa si queremos cambiar el fondo de los prrafos utili%ando colores alternosT ,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 if0iU;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"*; '(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(
<,t-l <,ead <title eac, del core de 0?uery<$title <script src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script

30

'(docu-ent*+ready(function(*4 '("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*; 6*; <$script <$,ead <body <p /ri-er p>rrafo<$p <p <tro p>rrafo<$p <p Iecer p>rrafo<$p <p Kno ->s<$p <p y 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.
<div <div <div <div <div <div <div <div <div <div <div red<$div blue<$div red<$div 9,ite<$div red<$div green<$div orange<$div red<$div nada<$div red<$div blue<$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; ele-ento+css("color"5 ele-ento+,t-l(**; 6*;
2&ora podremos ver este ejemplo en funcionamiento en una pgina aparte.

31
Artculo por
2.5.- Mtodo size34 y propiedad lengt0 del core de jQuery

.os formas de acceder al n0mero de elementos que hay en un objeto jQuery, a trav s del m todo 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 <title propiedad lengt, del core 0?uery<$title <script src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 $$selecciono todos los ele-entos de la clase "-itexto" var Dle-entos=itexto = '("+-itexto"*;

32

$$-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
<p Dsto es un p>rrafo nor-al<$p <p class="-itexto" Dsto es un p>rrado de la clase "-itexto"<$p <div Kn 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.
Artculo por
2.7.- Mtodo data34 +ore jQuery

El m todo 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 tambi n el m todo remove.ata*+ 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(

'("#capa"*+data("-idato"5"-ivalor"*;

33
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com )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. odemos ver el ejemplo en marc&a en una pgina aparte. 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

34
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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 <title D0e-plos de uso de la funci#n data del core de 0?uery<$title <script src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("#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*; '("#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

35
<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.
Artculo por
2.@.- +onsideraciones interesantes de data34 y remove#ata34

,hora veremos al%unos puntos interesantes y nuevos ejemplos sobre el funcionamiento de los m todos data*+ y remove.ata*+ 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 ob#eto #$uery 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 +os ob#etos se almacenan por re"erencia: ,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.

36
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com odemos ver el ejemplo en marc&a en una pgina aparte. ,l cdigo de los elementos AB:' ser el siguiente(
<a ,ref="#" id="enlace1" Dnlace 1<$a <br <a ,ref="#" id="enlace8" Dnlace 8<$a <br <a ,ref="#" id="enlace7" Dnlace 7<$a <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.
'("#guardar"*+click(function(evento*4 '("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.
'("a"*+click(function(evento*4 evento+prevent:efault(*; valor&l-acenado = '(t,is*+data("-idato"*; '("#-ensa0e"*+,t-l("Dn el enlace <b " W '(t,is*+attr("id"* W "<$b W valor&l-acenado*; 6*;
tiene el dato )-idato) co-o "
)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(
valor&l-acenado = '(t,is*+data("-idato"*;
)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

37
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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 <,ead <title D0e-plos de uso de la funci#n data del core de 0?uery<$title <script src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("a"*+click(function(evento*4 evento+prevent:efault(*; valor&l-acenado = '(t,is*+data("-idato"*; '("#-ensa0e"*+,t-l("Dn el enlace <b " W '(t,is*+attr("id"* W "<$b " W valor&l-acenado*; 6*;
tiene el dato )-idato) co-o
'("#guardar"*+click(function(evento*4 '("a"*+data("-idato"5"-ivalor"*; '("#-ensa0e"*+,t-l()!e guardado en todos los enlaces un dato lla-ado "-idato" con el valor "-ivalor")*; 6*; '("#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*; 6*; <$script <$,ead <body <a ,ref="#" id="enlace1" Dnlace 1<$a <br <a ,ref="#" id="enlace8" Dnlace 8<$a <br <a ,ref="#" id="enlace7" Dnlace 7<$a <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.

38
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com uede verse este ejemplo en marc&a en una pgina aparte. ,l cdigo completo se puede ver a continuacin.
<,t-l <,ead <title D0e-plos de uso de la funci#n data del core de 0?uery<$title <script src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("a+enlaceal-acenar"*+click(function(evento*4 evento+prevent:efault(*; 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*; '("#guardar"*+click(function(evento*4 evento+prevent:efault(*; '("a"*+data("-idato"5"-ivalor"*; '("#-ensa0e"*+,t-l()!e guardado en todos los enlaces un dato lla-ado "-idato" con el valor "-ivalor")*; 6*; '("#guardarenlace1"*+click(function(evento*4 evento+prevent:efault(*; '("#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*; '("#guardarob0eto"*+click(function(evento*4 evento+prevent:efault(*; '("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 evento+prevent:efault(*; '("#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 evento+prevent:efault(*; '("#-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 <a ,ref="#" id="enlace8" class="enlaceal-acenar" Dnlace 8<$a <br <a ,ref="#" id="enlace7" class="enlaceal-acenar" Dnlace 7<$a <br <br <div id="-ensa0e" =ensa0e+++ <$div

39

<br <ol style="line-,eig,t: 800V;" <li <a id="guardar" ,ref="#" guardar "-idato" con valor "-ivalor" en todos los enlaces<$a <$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.
Artculo por

40
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

2os 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.

41
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com /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 identi"icador: 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. 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 varias 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 /0/: @os sirve para seleccionar todos los elementos de la pgina. J0DVD1 ??selecciona todos los elementos que tiene la pgina Concatenar varios 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.
Artculo por

42
.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.
,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(
<forCelector: <input type="Iext" na-e="ca-poselector" id="ca-poselector" <input type="button" id="boton" value="]er 2uY ele-entos seleccionas" <$forBo-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: '(docu-ent*+ready(function(*4 '("#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

43
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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, function01W 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 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 <title I3tulo de la p>gina<$title <style type="text$css" +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 src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("#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

44

<,1 Celectores en 0?uery<$,1 <p Dn 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 <forCelector: <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 <p Dste es un p>rrafo sin id ni class<$p <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 <div Dsto 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 <b Dsto es una eti2ueta b<$b <i Dsto 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.
Artculo por
. .- <electores de Jerar2uFa 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.

45
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com .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 1 c%ild: )on el selectorr parent X 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" Nota: la diferencia entre Dancestor descendantD y Dparent X c&ildD es que este *ltimo slo selecciona los &ijos directos. or ejemplo, en el AB:' siguiente( <p <b />rrafo<$b 2ue tiene alguna <b negrita<$b e <span class="algo" <i it>lica<$i <$span para seleccionar<$p J0Dp X 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 X iD1 no seleccionar!a la etiqueta +, por no ser &ija directa de .
.elector prev 2 ne3t: )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 prev 4 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 Jerar2uFa

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 src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 $$selectores ancestor descendant '("p i"*+css("color"5 "#``N"*;

46

'("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 <b esto<$b es un <b p>rrafo<$b ro0o <i donde<$i ,e <b puesto<$b unas <b negritas<$b <$p <p class="parraforo0o" <tro <b con<$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 <b esto<$b es otro <b p>rrafo <$b para <i poner<$i otras <b negritas<$b <$p <p ,ola111<$p <table border=1 <tr <td <i Iabla cual2uiera<$i <$td <td Dsta tabla <b no tiene<$b class de <b BCC<$b <$td <$tr <$table <p id="-iparrafo" Dste es el p>rrafo con id="-iparrafo"<$p <table class="-itabla" border=1 <tr <td colspan=8 Dsta tabla tiene una <b clase BCC<$b <$td <$tr <tr <td <i class="-itabla"<$i <$td <td class="-itd" J este <b td<$b le ,e puesto <i class="-itd"<$i <span Kna cosa<span otra cosa<$span <$span <$td <$tr <$table <p <b />rrafo<$b 2ue tiene alguna <b negrita<$b e <span class="algo" <i it>lica<$i <$span para seleccionar<$p <div <div id="a1" ,ola<$div <div id="a8" dos<$div <div id="a7" 7<$div <$span <div id="aO" class="clase" Buatro de verdad<$div <$div <ul <li Dle- 1<$li <li class="ele-lista" Dle- 8<$li <li Dle- 7<$li <li Dle- O<$li <li class="ele-lista" Dle- P<$li <li class="ele-lista" Dle- `<$li <li Dle- G<$li <$ul <$body <$,t-l <span Buatro (no es un div*QQQ
odemos ver el ejemplo en marc&a en una pgina aparte.

Artculo por

47
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,

48
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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(

'("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 src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("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
odemos ver el ejemplo en marc&a en una pgina aparte.
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

49
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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*;
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.
Artculo por
1.2.- Mtodo attr34 de jQuery! otros usos y removeAttr34

"n uso adicional del m todo 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*;

50
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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 src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '()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*; <$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 src="++$02uery-1+7+8+-in+0s" type="text$0avascript" <$script <script '(docu-ent*+ready(function(*4 '("#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

51

<$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.
Artculo por
1. .- Mtodo prop34 de jQuery y di)erencias con attr34

El m todo prop*+ disponible desde jQuery 4.5 sirve para acceder y modificar propiedades de elementos y attr*+ para atributos. !eamos las diferencias. 2ntes de jQuery 7.5 ten!amos un *nico mtodo para el acceso y modificacin de todos los atributos de los elementos de la pgina por medio de jQuery, llamado attr01. 2 partir de jQuery 7.5 tenemos dos mtodos que vamos a tratar de distinguir en este art!culo. or un lado tenemos prop01 y por otro lado tenemos attr01.
,l mtodo attr01 sirve para acceder a atributos de la pgina y ya lo e-plicamos en un par de art!culos del :anual de jQuery. ,n el te-to 2cceder y modificar atributos AB:' desde jQuery repasamos los usos generales de este mtodo y en el art!culo :todo attr01 de jQuery, otros usos y remove2ttr01 vimos otros usos y el mtodo D&ermanoD remove2ttr01. @ota(
Nota: 2dems, tenemos el mtodo val01 que sirve espec!ficamente para acceder y modificar el atributo value. ,n principio ese mtodo val01 es el que deber!amos usar siempre que queremos ver el valor que &aya cargado en DvalueD, o modificarlo.
2&ora en el 2 + de jQuery tenemos un nuevo integrante del ecosistma de mtodos para trabajo con los atributos de la pgina, llamado prop01, que sirve para acceder y modificar propiedades.
1. .1.- Qu son atri'utos y 2u son propiedades

,n la documentacin de jQuery tienes una e-plicacin sobre todo esto, aunque a veces puede resultar algo confusa, porque &abitualmente utili%amos el trmino TattributeT y TpropertyT 0atributo y propiedad1 para la misma idea, es decir, atributos de las etiquetas AB:'. 2l menos en los manuales de DesarrolloWeb .com utili%amos esos dos trminos indistintamente como sinnimos cuando nos referimos al AB:' e incluso muc&as veces al &ablar de programacin. ues bien, para clarificar esto, tengamos en cuenta a qu nos estamos refiriendo en este caso como atributo y a qu nos referimos con propiedad( ,tributo( cualquier cosa que tengamos en una etiqueta AB:' para personali%arla.
<a style="color: red" +++<$a
,n ese caso DstyleD es un atributo de la etiqueta AB:'. Propiedad( cualquier cosa a la que podamos acceder desde una propiedad de un objeto nativo $avascript.
docu-ent+for-sR0S+ele-entsR0S+c,ecked

52
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,n el ejemplo, tenemos varias propiedades en funcionamiento, pero veamos el Dc&ec#edD final, que es una propiedad de un elemento de formulario. 2 esa propiedad accedemos desde el D/: de $avascript. or lo tanto, para concretar todav!a ms y ver lo confuso que puede llegar a ser, esa propiedad nativa $avascript Dc&ec#edD ser!a diferente de este atributo Dc&ec#edD(
<input type="c,eckbox" c,ecked="c,ecked"
,n ese caso Dc&ec#edD es el atributo de AB:'.
1. .2.- Bso del mtodo prop34 en jQuery

,l mtodo prop01 sirve para modificar propiedades nativas de $avascript de los elementos de una pgina. )omo otros mtodos de jQuery el uso es ligeramente distinto dependiendo del juego de parmetros que le enviemos. ,n principio, enviando un *nico parmetro nos sirve para acceder al valor de una propiedad, aquella que indiquemos en el parmetro. 'a otra opcin nos sirve para modificar una propiedad y para ello debemos indicar dos parmetros, el primero ser!a la propiedad a modificar y el segundo el valor que queremos introducir.
'(ele-ento*+prop("c,ecked"*;
,sto nos devolver!a el valor de la propiedad $avascript Dc&ec#edD, que seguramente sepamos, es un booleano que indica con true o false si un campo c&ec#bo- est o no marcado. 3i quisiramos modificar el estado del c&ec#bo-, &acemos lo siguiente(
'(ele-ento*+prop("c,ecked"5 true*;
,sto &ar!a que el c&ec#bo- estuviera marcado como confirmado.
1. . .- +u%ndo utilizar prop34 y cu%ndo usar attr34

2ntes de jQuery 7.5 solo e-ist!a attr01, por lo que no e-ist!a una duda concreta sobre cundo usar uno o el otro. ,l problema es que attr01 ten!a algunos problemas?bugs y se &ac!a dif!cil su mantenimiento. ,specialmente daban problemas con attr01 muc&as de las propiedades de objetos $avascript que eran boleanas, como el mencionado c&ec#ed u otros como disabled o readonly. ,n la actualidad tenemos que usar los mtodos con cuidado porque pueden producirse casos confusos. SQu &acemos campo)&ec#.attr0Dc&ec#edD1 o mejor campo)&ec#.prop0Dc&ec#edD1T ara evitar esos casos, attr01 solo te dar el valor de atributos AB:' y prop01 te dar el valor de las propiedades del D/: de $avascript para un elemento dado. ,n versiones ms nuevas de jQuery todas las propiedades boleanas de los objetos del D/: se tienen que acceder por prop01 y se &an desactivado en attr01. or ejemplo campo)&ec#.attr0Dc&ec#edD1 se &a desactivado para que no te devuelva ning*n valor y siempre deber!as acceder por campo)&ec#.prop0Dc&ec#edD1. ara ver algunos ejemplos. 2tributos que se modifican con attr01( class, id, &ref, label, src, title... ropiedades que se modifican con prop01( autofocus, c&ec#ed, async, multiple, read/nly...
,spero que esto resuelva la duda que muc&os de nosotros &emos tenido cuando intentamos acceder a propiedades y valores de atributos.
Artculo por

53
Parte 5:
Mtodos de CSS de jQuery

!os m1todos *ue tienen *ue +er con las propiedades de ,o'as de Estilo en %ascada) para acceder o alterar los +alores %55 de los elementos de la p&gina din&micamente.
5.1.- Mtodo css34 de jQuery

)in duda css*+ es uno de los m todos m$s utilizados en el d-a a d-a del trabajo con jQuery. )irve para cambiar y obtener el valor de cualquier atributo css. ,stamos tratando algunos de los mtodos ms importantes de jQuery relacionados con las &ojas de estilo en cascada. ,l ms importante de estos mtodos para trabajar con las )33 de manera dinmica es justamente css01 y aunque ya lo &emos podido introducir en art!culos anteriores del :anual de jQuery, merece la pena dedicarle un poco de nuestro tiempo para aprender todas sus posibilidades ,l mtodo css01 sirve tanto para recibir el valor de un atributo )33 como para asignarle un nuevo valor y su funcionamiento depende de los parmetros que podamos enviarle. 2s! que, para &ablar sobre este mtodo veremos cada uno de los posibles juegos de parmetros que podemos enviarle, e-plicando cada una de las opciones disponibles y ofreciendo diversos ejemplos.
Nota: 3i lo deseas, tambin puedes ver estas e-plicaciones en v!deo( >ideotutorial de jQuery sobre el mtodo css01
5.1.1.- .css3 nom'reKpropiedadKcss 4

3i enviamos un solo parmetro al mtodo )33 estamos indicando que queremos recibir el valor de una propiedad )33. ,n este caso la funcin devolver el valor del atributo )33 que le &ayamos indicado. 3i tenemos un elemento en la pgina como este, al que le &emos colocado un identificador, atributo idCDmicapaD(
<div id="-icapa" style="color: red;" ,ola1<$div
odremos acceder a alguna de sus propiedades css de la siguiente manera(

'("#-icapa"*+css("color"*;
,sto nos devolver el atributo DcolorD de ese elemento, que en este caso val!a DcolorD. )omo podemos suponer, el mtodo )33 enviando un solo parmetro puede servir de muc&a utilidad para obtener datos sobre los estilos actuales de nuestros elementos, no obstante, todav!a es ms utili%ada la siguiente opcin, en la que enviamos dos parmetros.

54
5.1.2.- .css3 nom'reKpropiedadKcss! valor 4

,n este segundo caso, aparte del nombre de una propiedad )33 estamos enviando un segundo parmetro con un valor y nos servir para asignar un nuevo estado a dic&o atributo. ,sta segunda manera de invocar al mtodo )33 tiene adems algunas variantes. Cambiar un 5nico atributo C..( podemos enviar el nombre de un *nico atributo )33 y su nuevo valor.
'("#-icapa"*+css("color"5 "green"*;
)on esto estar!amos cambiando el color del te-to del elemento con idCDmicapaD y asignando el color verde 0DgreenD1. Cambiar varios atributos C.. al mismo tiempo( odemos enviar todos los atributos )33 que deseemos y sus nuevos valores, en notacin de objeto. )on esto conseguimos que, en una *nica llamada a css01 se cambien varias propiedades a la ve%.
'("#-icapa"*+css(4 "background-color": "#ff8800"5 "position": "absolute"5 "9idt,": "100px"5 "top": "100px"5 "left": "800px" 6*
)omo se puede ver, se estar!an actuali%ando con la anterior llamada a css01 varios atributos )33, como el color de fondo, la posicin del elemento, su anc&ura, etc. 3obre este punto vamos a dar un ejemplo adicional que puede estar bien para aprender a variar un atributo )33 teniendo en cuenta el valor anterior que tuviera.
'("#-icapa"*+-ouseover(function(*4 antiguoLeft = parse@nt('(t,is*+css("left"**; $$alert (antiguoLeft*; '(t,is*+css("left"5 antiguoLeft W 10 W "px"*; 6*
)on esto estamos definiendo un evento onmouseover sobre la capa con idCDmicapaD, por lo que estas instrucciones se pondrn en ejecucin cuando se pase el ratn por encima de la capa. Dentro del mtodo estamos &aciendo un par de cosas. )omo primer paso estamos e-trayendo el valor de la propiedad )33 DleftD y convirtindola en un entero. )omo segundo paso estamos actuali%ando ese valor de DleftD y asignando un nuevo valor que ser!a 7< p!-eles ms que el valor antiguo. ara ello sumamos 7< al valor antiguo de DleftD y lo concatenamos con la unidad de medida Dp-D. Cambiar un 5nico atributo y colocar el valor seg5n el resultado de una "uncin: ,ste tercer uso es un poco ms avan%ado y est disponible slo a partir de jQuery 7.O. )onsiste en enviarle una funcin como segundo parmetro, en ve% del valor directamente, para asignar al atributo el valor devuelto por esa funcin. ,sto es tan sencillo de poner en marc&a como pasar una funcin que simplemente tenga un return. ero &ay un detalle y es que esa funcin recibe dos valores. ,l primero es el !ndice del elemento dentro del objeto jQuery que recibe el mtodo y el segundo, ms *til, sirve para obtener el valor actual que &ay en el atributo que queremos cambiar. ara ver este uso del mtodo jQuery &emos preparado el siguiente ejemplo.
'("#-icapa"*+click(function(*4 '(t,is*+css("9idt,"5 function(index5 value*4 $$alert (value*; var au-ento = pro-pt("cuanto 2uieres au-entarQ"5 "8P"*; return (parse@nt(value* W parse@nt(au-ento** W "px"; 6*; 6*
)omo se puede ver, se define un evento clic sobre una capa. 'uego utili%amos el mtodo css01 sobre el elemento, para cambiar el atributo "idt&. ,l valor de "idt& que se colocar ser lo que devuelva la funcin indicada como segundo parmetro en el mtodo css01. 3i nos fijamos, la funcin devuelve un valor, que es lo que se colocar en el atributo "idt&. Bodos los ejemplos sobre el mtodo css01 se pueden ver en una pgina aparte.

55
Artculo por
5.2.- Gunciones +<< 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. !6todos inner7idt%)* e inner8eig%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. !6todos outer7idt%)* e outer8eig%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.
!6todos o""set)* y 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*;
5.2.1.- Guncin 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

56
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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*; 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.
5.2.2.- Guncin 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.
5.2. .- /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 <title Nunciones 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

57

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 '(docu-ent*+ready(function(*4 '("#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 <,1 Nunciones 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 #```;" <,8 capa1:<$,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.
Artculo por

58
Parte :
!"entos en jQuery
!os e+entos son una parte -undamental en el desarrollo de aplicaciones enri*uecidas del lado del cliente. 6prendemos todo sobre los e+entos en '(uer".
7.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

59
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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 :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.
7.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

60

<,ead <title Iraba0ando con eventos<$title <script src="++$02uery-1+O+1+-in+0s" <$script <script var nu-Blics = 0; var nu-:obleBlics = 0; '(docu-ent*+ready(function(*4 '("#-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 <,1 Iraba0ando 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.
Artculo por
7.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(
7.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)*

61
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ara generar un evento cuando se produce un doble clic sobre un elemento. %over)* ,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. mousedown)* 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. mouseleave)* ,ste se desata cuando el ratn sale de encima de un elemento de la pgina. mousemove)* ,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. mouseover)* 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.
7.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. keydown)* ,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. keypress)* ,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. keyup)* ,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.
7.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

62
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com de una accin con el ratn o como resultado de presionar teclas en el teclado. "ocusin)* ,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. "ocusout)* /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. "ocus)* 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.
Artculo por
7. .- 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 ob#eto evento, 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.
7. .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( pageQ( 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.
63

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com >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 Q 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.
'(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 <title Iraba0ando con el ob0eto evento<$title <script src="++$02uery-1+O+1+-in+0s" <$script <script '(docu-ent*+ready(function(*4 '(docu-ent*+click(function(e*4 alert("M: " W e+pageM W " - J: " W e+pageJ* 6*; 6* <$script <$,ead <body <,1 Iraba0ando 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.
Artculo por

64
7.1.- /ventos de ratn en jQuery mouseenter y mouseleave

6r$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 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 pageQ 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.
7.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*;

65
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 3implemente cambiamos las propiedades de )33 DleftD y DtopD de la capa del tip, asignando valores a travs de evento.pageQ 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.
<,t-l <,ead <title Iraba0ando con eventos - Iip si-ple<$title <style type="text$css" +tip4 background-color: #ffccUU; padding: 10px; display: none; position: absolute; 6 <$style <script src="++$02uery-1+O+1+-in+0s" <$script <script '(docu-ent*+ready(function(*4 '("#ele-ento1"*+-ouseenter(function(e*4 '("#tip1"*+css("left"5 e+pageM W P*; '("#tip1"*+css("top"5 e+pageJ W P*; '("#tip1"*+css("display"5 "block"*; 6*; '("#ele-ento1"*+-ouseleave(function(e*4 '("#tip1"*+css("display"5 "none"*; 6*; '("#ele-ento8"*+-ouseenter(function(e*4 '("#tip8"*+css("left"5 e+pageM W P*; '("#tip8"*+css("top"5 e+pageJ W P*; '("#tip8"*+css("display"5 "block"*; 6*; '("#ele-ento8"*+-ouseleave(function(e*4 '("#tip8"*+css("display"5 "none"*; 6*; 6* <$script <$,ead <body <,1 Iraba0ando 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

66
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
Artculo por
7.5.- /ventos de teclado en jQuery

(#mo trabajar con eventos de teclado en jQuery y saber qu teclas han pulsado los usuarios, a trav s de la propiedad which del objeto evento. ,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.
7.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.

67
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 <title Iraba0ando con eventos de teclado en 0?uery<$title <script src="++$02uery-1+O+1+-in+0s" <$script <script function operaDvento(evento*4 '("#loescrito"*+,t-l('("#loescrito"*+,t-l(* W evento+type W ": " W evento+9,ic, W "5 "* 6 '(docu-ent*+ready(function(*4 '(docu-ent*+keypress(operaDvento*; '(docu-ent*+keydo9n(operaDvento*; '(docu-ent*+keyup(operaDvento*; 6* <$script <$,ead <body <,1 Dventos de teclado en 0?uery<$,1 <div id="loescrito" <$div <$body <$,t-l
7.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 <b Iecla pulsada:<$b <br <div id="loescrito" <$div <$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

68
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com &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 <title Iraba0ando con eventos de teclado en 0?uery<$title <script src="++$02uery-1+O+1+-in+0s" <$script <script '(docu-ent*+ready(function(*4 '("#-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 <,1 Dventos 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 <b Iecla pulsada:<$b <br <div id="loescrito" <$div <$for<$body <$,t-l
odemos ver el ejemplo en marc&a en una pgina aparte. )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 .
Artculo por
7.7.- #e)inir eventos con 'ind34 y eliminarlos con un'ind34

El m todo bind*+ sirve para definir eventos de manera %en rica, de cualquier tipo. (on el m todo 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*;

69

'("#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.
7.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*"* '(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.
7.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

70
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
7.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 <title Dventos bind<$title <script src="++$02uery-1+O+8+-in+0s" <$script <script language="0avascript" '(docu-ent*+ready(function(*4 '("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* 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.
Artculo por

71
7.@.- /ventos de)inidos con live34 en jQuery

7 todo live*+ para definir eventos en jQuery1 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. S)mo puede &aber otros elementos de esa clase en el futuroT 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.
7.@.1.- /jemplo de asignacin de manejador de evento por live34

>eamos la siguiente demostracin del funcionamiento de live01. Benemos varios elementos(
<div <div <div <div class="verde" Dsta capa tiene la clase verde (,a" clic*<$div class="verde" Cegunda capa donde coloco la clase verde<$div id="noverde" Iercera capa 2ue no es verde<$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

72

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.
<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 <,ead <title Dventos live<$title <style type="text$css" +verde4color: green;6 <$style <script src="++$02uery-1+O+8+-in+0s" <$script <script language="0avascript" '(docu-ent*+ready(function(*4 '("+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 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 <div <div <div
class="verde" Dsta capa tiene la clase verde (,a" clic*<$div class="verde" Cegunda capa donde coloco la clase verde<$div id="noverde" Iercera capa 2ue no es verde<$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
Artculo por

73
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".
@.1.- $lugins en jQuery

!eamos qu son los 6lu%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 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.
@.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

74
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
@.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*; 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.
Artculo por

75
@.2.- =eglas para el desarrollo de plugins en jQuery

6ara 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.Ynombre de tu pluginZ.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.
@.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 t,is+eac,(function(*4 ele- = '(t,is*; ele-+fade<ut(8P05 function(*4

76

'(t,is*+fade@n(8P0*; 6*; return t,is; 6*;
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(

'(docu-ent*+ready(function(*4 $$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 '("+parpadear"*+parpadea(*; 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 <title Breando plugins en 0?uery<$title <script src="++$02uery-1+O+1+-in+0s" <$script <script 0?uery+fn+parpadea = function(* 4 t,is+eac,(function(*4 ele- = '(t,is*; ele-+fade<ut(8P05 function(*4 '(t,is*+fade@n(8P0*; 6*; 6*; return t,is; 6; '(docu-ent*+ready(function(*4 $$parpadean los ele-entos de class BCC "parpadear" '("+parpadear"*+parpadea(*; $$aAado un evento clic para un bot#n5 para 2ue al pulsarlo parpadeen los ele-entos de clase parpadear '("#botonparpadear"*+click(function(*4 '("+parpadear"*+parpadea(*; 6* 6* <$script <$,ead <body <p class="parpadear" !ola 2ue tal5 esto parpade# gracias a 0?uery1<$p

77

<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.
Artculo por
@. .- $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.
@. .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 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.

78
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 t,is+eac,(function(*4 $$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 = '()<div Bontador 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 $$creo una variable ele- con el ele-ento actual5 supone-os un textarea 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.
var contador = '()<div Bontador caracteres: ) W ele-+attr("value"*+lengt, W )<$div )*;
'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.
ele-+data("ca-pocontador"5 contador*;
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.
var ca-pocontador = ele-+data("ca-pocontador"*;
9na ve% creado el plugin, convierto todos los te-tareas en te-tareasGcontador de caracteres, con este cdigo(
'(docu-ent*+ready(function(*4 '("textarea"*+cuentaBaracteres(*; 6*
,so es todo, pero qui%s se vea ms claro si vemos el cdigo completo del ejemplo.
<,t-l <,ead <title Breando plugins en 0?uery<$title <script src="++$02uery-1+O+1+-in+0s" <$script <script $$creo el plugin cuentaBaracteres 0?uery+fn+cuentaBaracteres = function(* 4 $$para cada uno de los ele-entos del ob0eto 0?uery

79

t,is+eac,(function(*4 $$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 = '()<div Bontador 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 $$creo una variable ele- con el ele-ento actual5 supone-os un textarea 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; '(docu-ent*+ready(function(*4 '("textarea"*+cuentaBaracteres(*; 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.
Artculo por
@.1.- 6estin de opciones en plugins jQuery

7anera de %estionar opciones en los plu%ins de jQuery, a trav s 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 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

80
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com configuracin del plugin, por medio de un objeto de DoptionsD, que nos facilitar bastante la vida.
@.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.
@.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
'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. 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 siguiente 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 DconfiguracinD todas las opciones del plugin que se va a iniciar.

81
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.
@.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(*;
@.1.1.- +onclusin 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.
Artculo por
@.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 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(
var configuracion = 4 velocidad: P005

82

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 var configuracion = 4 velocidad: P005 ani-acion=uestra: 49idt,: "s,o9"65 ani-acion<culta: 4opacity: ",ide"65 claseIip: "tip" 6 $$extiendo las opciones por defecto con las opciones del par>-etro+ 0?uery+extend(configuracion5 opciones*; t,is+eac,(function(*4 $$c#digo del plugin 6*;
6*;
@.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.
0?uery+extend(configuracion5 opciones*;
,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
@.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 var configuracion = 4 velocidad: P005 ani-acion=uestra: 49idt,: "s,o9"65 ani-acion<culta: 4opacity: ",ide"65 claseIip: "tip" 6 0?uery+extend(configuracion5 opciones*; t,is+eac,(function(*4 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

83

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*; 6; return t,is;
@.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.
Artculo por
@.7.- Gunciones y varia'les dentro de plugins jQuery

2as 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. +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,

84
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.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* t,is+eac,(function(*4 $$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.
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.

85
>eamos el siguiente AB:'. <div id="este:iv" Dste div <$div <span class="-isspan" span1<$span <span class="-isspan" span8<$span <span class="-isspan" span7<$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.
Artculo por
@.@.- $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#bopersonali%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.

86
ara seguir las e-plicaciones de este art!culo necesitaremos saber acerca de la creacin de plugins en jQuery y en concreto 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.
@.@.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*; t,is+eac,(function(*4 $$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

87
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com aqu! son accesibles desde cualquier parte de este bloque.
$$variables locales al plugin var -iB,eck = '(t,is*; 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

88
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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 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*; t,is+eac,(function(*4 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

89

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; 6*; return t,is; 6;
@.@.2.- Invocar al plugin c0ec*'o8 personalizado con jQuery

Ha que &emos &ec&o un c&ec#bopersonali%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 <span <span <br <br <span class="c," Celeccionar<$span class="c," =e interesa<$span class="c," <ooo<$span id="otro" otro suelto<$span
3e puede apreciar que tenemos simples elementos 3 2@. or un lado tenemos F 3 2@ con la clase Dc&D y por otro lado otro 3 2@ suelto con identificador DotroD. 2&ora veamos cmo los convertir!amos en campos de formulario c&ec#bopersonali%ados(
'("+c,"*+c,eckbox/ersonali"ado(*;
2s! crear!amos F c&ec#bo-, en los F primeros 3 2@ que ten!an la class Dc&D. ,stos c&ec#bopersonali%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#bopersonali%ado el *ltimo 3 2@, 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.
Artculo por

90
@.A.- Alias personalizado y ocultar cdigo en plugins jQuery

(#mo crear un alias personalizado a 3, para mejorar la compatibilidad en todos los contextos, y ocultar 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.
@.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.
Artculo por

91
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.
A.1.- jQuery animate349 Animacin de propiedades +<<

El m todo animate*+ de jQuery permite animar varias propiedades, con valores num ricos, 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 DQ e HD y queremos animarlos para que esos atributos pasen a tener valores D[ 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.
A.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

92
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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. Duracin: 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 de dentro de la animacin. ,n principio, los dos posibles valores son Ds"ingD 0por defecto1 y DlinearD. Callback: /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.
A.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 src="++$02uery-1+O+1+-in+0s" <$script <script '(docu-ent*+ready(function(*4 '("#ani-ar"*+click(function(e*4 e+prevent:efault(* '(",1"*+ani-ate(4 )border-botto--9idt,): "80"5 )font-si"e): )8Ppt) 6*; 6*; '("#restaurar"*+click(function(e*4 e+prevent:efault(* '(",1"*+css(4 )border-botto--9idt,): "1"5 )font-si"e): )1Ppt) 6*; 6*;
6*

93

<$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 <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.

Artculo por
A.2.- Animaciones de color con jQuery

(#mo realizar animaciones con colores en jQuery por medio del m todo animate*+ y el plu%in (olor animation jQuery. ,n jQuery podemos &acer muc&os tipos de animaciones a partir del mtodo animate01, que nos sirve para variar de una manera suavi%ada una gran gama de propiedades )33. De &ec&o, ese es uno de los mtodos ms importantes del d!a a d!a en la reali%acin de efectos con jQuery, tal como se e-plic en el art!culo jQuery animate01. 2&ora bien, no s si os &abris dado cuenta que con animate01 no podemos &acer animaciones de color, es decir, &acer un gradiente suavi%ado para pasar de un color a otro con una animacin. Qui%s nunca encontris un inconveniente en esa carencia del frame"or#, pero si alg*n d!a decid!s &acer una animacin de color, tendris que teclear bastante cdigo para conseguirlo por vuestra cuenta. 3in embargo, como en muc&as otras ocasiones, los plugins de terceras personas nos pueden a&orrar muc&o trabajo y &oras de ingenier!a. ,n este caso comentamos una de esas joyitas que nos permitir &acer animaciones de color directamente con el mtodo animate01 que probablemente conocers y ests familiari%ado. ,l plugin de jQuery que vamos a mostraros a continuacin se llama )olor animation jQueryGplugin y lo puedes encontrar en la ruta( &ttp(??""".bitstorm.org?jquery?colorGanimation?

94
A.2.1.- Bso del plugin para animar colores

'o cierto es que &ay poco que e-plicar sobre este plugin, pues simplemente se trata de incluirlo en las pginas y a partir de ese momento simplemente utili%ar el conocido mtodo animate01, no obstante, &acemos una descripcin paso por paso sobre cmo se utili%ar!a.
Nota: 'as propiedades )33 que podrs animar usando este plugin son las siguientes(
color bac#ground)olor border)olor borderBottom)olor border'eft)olor border=ig&t)olor borderBop)olor outline)olor
9* &ncluir #$uery y el plugin )omen%amos por incluir los scripts del frame"or# jQuery y del plugin para animacin de colores.
<script src=",ttp:$$a0ax+googleapis+co-$a0ax$libs$02uery$1+`+8$02uery+-in+0s" type="text$0avascript" <$script <script src="02uery+ani-ate-colors+0s" type="text$0avascript" <$script
:* Crear la animacin 2&ora es tan sencillo como invocar a animate01 con los parmetros necesarios, que fueron e-plicados en el art!culo del mtodo animate01.
'(",1"*+ani-ate(4 color: "#f8`" 65 7000*;
)on esto estamos &aciendo que los elementos A7 de la pgina tengan una animacin que durar F segundos en la que pasarn del color que tuvieran definido normalmente &asta el color Lf]5.
A.2.2.- /jemplo de animacin de un )ondo con un patrn de)inido por imagen

)omo &emos comprobado, no tiene muc&o misterio, pero el efecto puede resultar interesante. 3i tenemos un poco de creatividad todav!a podemos conseguir efectos un poco ms atractivos, como el que vamos a ver a continuacin. 3e trata de &acer una animacin de color de un fondo 0atributo bac#groundGcolor1, pero donde estamos utili%ando un patrn de imagen que se repite en un mosaico. 2l &aber un fondo de imagen, da la sensacin que la animacin se reali%a cambiando esa imagen, pero realmente solo est cambiando el color del fondo. ,sto lo conseguimos gracias a una imagen de fondo que tiene transparencia. 'o mejor para darse cuenta de lo que estamos &aciendo es ver un ejemplo en marc&a. 3i &acemos clic en el titular veremos el efecto que estamos queriendo e-plicar. >eamos el estilo que &emos definido para los elementos A;(

95

,84 padding: 70px; background-color: #ffc; background-i-age: url("fondo-,8+png"*; color: #00U; 6
'a imagen de fondo que &emos colocado DfondoG&;.pngD es parcialmente transparente, para obtener el efecto deseado. 2&ora este pequeEo cdigo nos servir para iluminar y oscurecer el fondo del A; al &acer clic sobre l.
var ilu-inado = false; '(",8"*+click(function(*4 var ele- = '(t,is*; if(ilu-inado*4 ele-+ani-ate(4 "background-color": "#ffc" 65 P00*; 6else4 ele-+ani-ate(4 "background-color": "#UfU" 65 P00*; 6 ilu-inado = 1ilu-inado; 6*
)omo se puede comprobar, se &a utili%ado una variable DiluminadoD para saber cuando el elemento est encendido y cuando apagado. 'uego creamos un evento clic#, para colocar la funcionalidad descrita. 3i estaba iluminado, &ago una animacin del atributo bac#groundGcolor &acia un color y si estaba oscurecido paso el bac#groundGcolor &acia otro color. ,l efecto no es nada del otro mundo, pero es bastante verstil y si tenis un bonito fondo con un patrn interesante, ms atractivo ser el resultado.
A.2. .- +onclusin
Aemos visto un par de animaciones con color, creadas con jQuery y un cdigo tan pequeEo que es casi de risa. 'a ventaja del plugin que os &emos e-plicado es que no tienes que aprender nada nuevo, sino simplemente incluir su cdigo y estars en disposicin de &acer animaciones de color, como si jQuery siempre lo &ubiera soportado en su conocido mtodo animate01.
Artculo por
A. .- Gading en jQuery
Efectos de cambio de opacidad de los elementos en la p$%ina, con los m todos de fadin% en jQuery, fade8n*+, fade&ut*+ y fade9o*+. >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.

96
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com )on los mtodos de fading de jQuery se puede cambiar esa propiedad. ,-isten tres mtodos para crear efectos de fundido, los siguientes( !6todo "ade;ut)* ,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. !6todo "ade&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. !6todo "ade'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#.
A. .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 <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(*;
A. .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="0+8" 80V<$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

97
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.optionsYZ 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.optionsYe.target.selected+nde-Z.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.
A. . .- /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 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 '("#e8"*+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.

98
A. .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.
<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 <title Nading en 0?uery<$title <script src="++$02uery-1+O+8+-in+0s" <$script <script '(docu-ent*+ready(function(*4 '("#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"*; '("#e1"*+fadeIo(P005 opacidadFdeseada5 function(*4 '("#e8"*+fadeIo(P005 opacidadFdeseada5 function(*4 '("#e7"*+fadeIo(P005 opacidadFdeseada*; 6*; 6*; 6* 6* <$script <$,ead <body <,1 Nading 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+8" 80V<$option <option value="0+P" P0V<$option <option value="0+8" 80V<$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.

99

Artculo por
A.1.- +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.
A.1.1.- Gunciones 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. '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.
A.1.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(*;

100
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com '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 .
A.1. .- /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 = '("#-icapa"*; 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 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(
'(docu-ent*+ready(function(*4 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, noT 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.
Artculo por

101
A.5.- 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 m todo 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.
A.5.1.- Mtodo 2ueue3Lnom're+olaM4

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. 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.

102
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 2s! podremos definir el evento onclic# del primer botn(
'("#botonfade"*+click(function(*4 capa = '("#-icapa"*; capa+fade<ut(P00*; capa+fade@n(P00*; -uestra.estantesBola(*; 6*;
2s! podemos definir el evento onclic# del segundo(

'("#botonslide"*+click(function(*4 capa = '("#-icapa"*; capa+slideKp(P00*; capa+slide:o9n(P00*; -uestra.estantesBola(*; 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 -uestra.estantesBola(*; 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.
<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="en" <,ead <title Bola de efectos por defecto en 0?uery<$title <script src="++$02uery-1+O+8+-in+0s" type="text$0avascript" <$script <style type="text$css" 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;

103

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 '(docu-ent*+ready(function(*4 '("#botonfade"*+click(function(*4 capa = '("#-icapa"*; capa+fade<ut(P00*; capa+fade@n(P00*; -uestra.estantesBola(*; 6*; '("#botonslide"*+click(function(*4 capa = '("#-icapa"*; capa+slideKp(P00*; capa+slide:o9n(P00*; -uestra.estantesBola(*; 6*; '("#botonta-anocola"*+click(function(*4 -uestra.estantesBola(*; 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 <div id="-icapa" <$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.
Artculo por
A.7.- 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 m todo 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 SQu pasa si queremos encolar otro tipo de funcin $avascript o jQueryT )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

104
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
A.7.1.- .2ueue3 L nom're+ola M! 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 = '("#-icapa"*; 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 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*;

105
A.7.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 <div id="-icapa" <$div
)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 capa = '("#-icapa"*; $$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.
Artculo por
A.@.- $arar la ejecucin de una cola de e)ectos jQuery

(#mo detener la ejecuci#n de una cola de efectos con el m todo stop*+ y revisi#n del uso de queue*+ para indicar una nueva lista de funciones de efectos a ejecutar con jQuery. 3eguimos brindando e-plicaciones sobre las colas de efectos de jQuery y en este caso vamos a aprender a detener colas de efectos, algo que ms tarde o ms temprano vamos a necesitar cuando &agamos scripts interactivos que incluyan funciones de efectos.

106
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,ste es el cuarto cap!tulo del :anual de jQuery dedicado al tratamiento de colas en jQuery, cuya serie empe%amos con el art!culo )olas de efectos en jQuery. )omen%aremos no obstante, e-plicando el *ltimo uso que nos queda por revisar del mtodo queue01.
+2ueue( R no-breBola S5 arrayNunciones *
,n ste uso del mtodo queue01 enviamos dos parmetros( ,l primer parmetro opcional con el nombre de la cola 0por defecto si no se indica nada se entiende la cola Df-D que es la predeterminada. ,l segundo parmetro es un array de funciones que se cargarn en la cola. 'as funciones que pudiera &aber en la cola se descartarn y se encolarn las nuevas funciones que se indican en el 2rray, cuya ejecucin tambin ser secuencialmente, tal como estn ordenadas en el array.
9n ejemplo de cdigo donde &acemos este uso del mtodo queue01 es el que se puede ver a continuacin(
'("#ele-ento"*+2ueue(Rfunction(*4 '(t,is*+,ide("slo9"*; '(t,is*+s,o9("slo9"*; 6S*;
)omo se puede comprobar, invocamos queue01 indicando slo un parmetro de tipo array, con lo cual estaremos modificando la cola predeterminada para asignarle las funciones del array. ,n este caso en el array &ay una sola funcin que se ejecutar como siguiente paso de la cola.
A.@.1.- Mtodo stop3L limpiar+ola M! L saltarAlGinal M4

,l mtodo stop01 sirve para detener la animacin actual en la cola de efectos, pero atencin, con stop01 en principio slo detenemos el efecto actual de la cola de efectos, por lo que los siguientes pasos de la cola, si es que &ab!a, seguirn ejecutndose. odemos enviarle dos parmetros, ambos boleanos y opcionales( ,l parmetro limpiar)ola sirve para eliminar todas las funciones que pudieran &aber en la cola de efectos todav!a por ejecutar. 3i indicamos true, esas funciones se retirar!an de la cola de efectos y por tanto no se ejecutar!an ms. 3i no indicamos nada o se indica un false, ocurrir que slo se detenga el efecto o funcin actual y automticamente se continuar con la siguiente funcin que pudiera &aber encolada. ,l segundo parmetro, saltar2l.inal, sirve para que se detenga el efecto de animacin actual, pero que se coloque directamente el valor final al que tend!a ese efecto. or defecto, este parmetro toma el valor false, que indica que la animacin se para y se queda donde se &ab!a detenido. or ejemplo en el caso false, si estamos ocultando una capa por medio de un efecto animado y &acemos un stop01 la capa quedar!a ocultada a medias. 3in embargo, si indicamos true en este parmetro, al &acer stop01, aunque no se &aya terminado la animacin para ocultar la capa, sta se ocultar!a del todo repentinamente.
odemos ver varios ejemplos(

'("#ele-ento"*+stop(*;
,sto terminar!a con el efecto que se est ejecutando en la cola, pero continuar!a con los siguientes efectos que pudiera &aber encolados.
'("#ele-ento"*+stop(true*;
Berminar!a con el efecto que se est reali%ando y limpiar!a la cola, con lo que no se ejecutar!an otras funciones que pudiera &aber.
'("#ele-ento"*+stop(false5 true*;
Berminar!a el efecto actual pero saltar!a en la animacin para mostrar directamente el estado al que se llegar!a si el efecto &uviese continuado &asta el final. 'uego continuar!a automticamente con la siguiente funcin de la cola.

107
A.@.2.- /jercicio con 2ueue34 y stop34

2&ora vamos a reali%ar un ejercicio completo con los mtodos jQuery que acabamos de e-plicar. 3e trata de &acer una animacin, compuesta por varias funciones quese insertarn en la cola y varias pruebas de uso del mtodo stop01. 3i lo deseamos, puede ser una buena idea ver antes de continuar el ejercicio que vamos a reali%ar. )omen%amos mostrando el cdigo AB:' de los elementos de este ejemplo(
<button id="botonco-en"ar" Bo-en"ar ani-aci#n<$button <br <button id="botonparar" class="botondetener" /asar a la siguiente etapa de la ani-aci#n<$button <br <button id="botonpararllegar" class="botondetener" /asar a la siguiente etapa5 pero llegar ,asta el final de donde se planeaba la ani-aci#n<$button <br <button id="botonparartodo" class="botondetener" /arar todo1<$button <div id="-icapa" !ola a todos111<$div
)omo se puede ver, &ay O botones. ,l primero servir para poner en marc&a la animacin y los otros F para parar las funciones de la cola de efectos, de diversos modos, para que podamos practicar. 'uego tenemos un elemento D+> con la capa que pretendemos animar. ,l primero de los tres botones siempre permanece visible, pero los otros en principio no se muestran en la pgina, gracias a este )33(
button+botondetener4 display: none; 6
2&ora vamos a ver cada una de las funciones que cargaremos como eventos clic#, a ejecutar en cada uno de los botones. )omen%aremos con el botn que produce la animacin en una cola de efectos.
'("#botonco-en"ar"*+click(function(*4 capa = '("#-icapa"*; capa+2ueue(function(continua*4 '("button+botondetener"*+s,o9(P00*; continua(*; 6*; $$8 ani-aciones 2ue tardan -uc,o capa+ani-ate(4"left": "0px"65 P000*; capa+ani-ate(4"left": "800px"65 P000*; capa+2ueue(function(continua*4 '("button+botondetener"*+,ide(P00*; continua(*; 6*; 6*;
)omo vemos, tenemos una serie de funciones que se van a encolar. )omo primer paso de la animacin se &ace una instruccin para que se muestren los botones que no estaban visibles. 'uego &acemos dos efectos animados, a los que les ponemos una duracin de 4 segundos cada uno, lo suficiente para que nos de tiempo a detener la animacin antes que estos efectos se lleguen a completar. 2&ora veamos los distintos eventos clic# para los botones que pararn la animacin, con varios comportamientos ligeramente distintos.
'("#botonparar"*+click(function(*4 '("#-icapa"*+stop(*; 6*;
)on esta funcin conseguiremos que se pare el paso actual de la animacin, pero se continuar con el siguiente paso que &aya en la cola de efectos.
'("#botonpararllegar"*+click(function(*4 '("#-icapa"*+stop(false5 true*; 6*;
)on esta funcin &acemos que se detenga el paso actual de la animacin, pero llevamos el elemento al lugar donde

108
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com &ubiera llegado si la animacin &ubiese continuado &asta el final. 'uego contin*a con los siguientes efectos encolados.
'("#botonparartodo"*+click(function(*4 '("#-icapa"*+2ueue(RS*; '("#-icapa"*+stop(*; $$Dsto -is-o podr3a ,aberse ,ec,o ta-biYn as3: $$'("#-icapa"*+stop(true*; alert("Lo ,e parado todo15 ni se ocultar>n los botones de parar+ /asos encolados: " W ' ("#-icapa"*+2ueue(*+lengt,* 6*;
,sta funcin es la ms compleja de todas, pero realmente lo es porque &e decidido complicarme un poco la vida. >eamos por qu.
'("#-icapa"*+2ueue(RS*;
)on esto estoy cambiando la cola por defecto del elemento con idCDmicapaD. H esamos asignando una cola de efectos vac!a, porque el array enviado como parmetro no tiene elementos. )on eso consigo quitar todas las funciones de la cola, pero &ay que tener en cuenta que alguno de los efectos puede estar ejecutndose todav!a y lo puedo parar con la sentencia(
'("#-icapa"*+stop(*;
)on eso consigo que la animacin se detenga tal como estuviera en ese mismo instante. ,sto, si lo preferimos, se podr!a &aber conseguido con una simple llamada al mtodo stop01(
'("#-icapa"*+stop(true*;
ara acabar, lan%o un mensaje al usuario, en una simple caja de alert01, para indicar los pasos que quedaron encolados en ese momento, que son cero, dado que &emos retirado todas las funciones de la cola. ,so es todo, si lo deseas, puedes verlo en marc&a en esta pgina aparte. Ha &emos avan%ado bastante en nuestro anlisis sobre las colas de efectos de jQuery, pero aun nos quedan algunas cosas ms que deber!amos aprender. ,n el pr-imo art!culo aprenderemos a manejar el mtodo delay01 que nos servir para crear intervalos de espera entre la ejecucin de elementos de la cola.
Artculo por
A.A.- Mtodo delay34 para retrasar la ejecucin e)ectos de la cola

El m todo delay*+ de jQuery sirve para %enerar un intervalo de espera entre la ejecuci#n de funciones de la cola de efectos. ,l mtodo delay01 es otro de los que alg*n d!a, y qui%s sea temprano, querrs aprender a utili%ar para generar una pausa entre la ejecucin de funciones que se encuentran en la cola de efectos. ,s tan sencillo como invocarlo indicando como parmetro el n*mero de milisegundos que deseas que se espere entre una y otra llamada a las funciones encoladas en la cola de efectos, pero aunque sea bastante obvio, qui%s estar bien ofrecer algunas notas sobre su funcionamiento. )omo sabemos, las funciones de la cola de efectos se ejecutan una detrs de la otra, sin que transcurra ning*n tiempo entre los distintos efectos encolados. ,s decir, en el instante que un efecto termina, comien%a el siguiente efecto de la cola sin ms demora. ero esto es algo que podemos cambiar si usamos delay01.

109
Nota: 2&ora bien, cabe decir que delay01 no reempla%a la funcin nativa setBimeout01 de $avascript. el mtodo delay01 slo sirve para generar una pausa entre efectos de la cola de efectos, pero no para producir tiempos de espera en general, que tendrn que reali%arse como debemos de saber, con la funcin nativa setBimeout01.
A.A.1.- .delay3 duracin! L nom're+ola M 4

,l mtodo delay recibe dos parmetros, que e-plicamos a continuacin( ,l parmetro duracin sirve para indicar los milisegundos de espera que tienen que producirse entre efecto y efecto. ,l parmetro nombre)ola est para indicar en qu cola de efectos se desea reali%ar ese retardo. ,ste segundo parmetro es opcional y si no lo indicamos se reali%ar la espera en la cola de efectos predeterminada.
>eamos el ejemplo siguiente(

capa = '("#-icapa"*; capa+slideKp(1000*; capa+delay(8000* capa+slide:o9n(1000*;
,n este caso estamos encolando dos efectos, con un retardo entre medias de ; segundos. ,n total &abremos encolado tres funciones, la primera un efecto slide9p01, la segunda un retardo de ;<<< milisegundos y la tercera un efecto slideDo"n01. ,sta carga de las tres funciones se podr!a resumir, concatenando llamadas a los mtodos de la siguiente manera(
capa+slideKp(1000*+delay(8000*+slide:o9n(1000*;
A.A.2.- /jemplo completo con e)ectos y delay34

2 continuacin podemos ver una pgina de ejemplo completa en la que &acemos varios efectos y aplicamos varios retardos entre ellos.
<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="en" <,ead <title Bola con delay(*<$title <script src="++$02uery-1+O+8+-in+0s" type="text$0avascript" <$script <style type="text$css" #-icapa4 left: 80px; top: 80px; position: absolute; font-si"e: 0+GPe-; font-fa-ily: ta,o-a5 verdana5 sans-serif; 9idt,: GO0px; background-color: #ddf; padding: 10px; border: 1px solid #bbb; 6 <$style <script languague="0avascript" function colaDfectos(*4 capa = '("#-icapa"*; capa+slideKp(1000*; capa+delay(8000* capa+slide:o9n(1000*; capa+fadeIo(1P005 0+7*+delay(7000*+fadeIo(P005 1*;

110
6 '(docu-ent*+ready(function(*4 colaDfectos(*; 6*; <$script
capa+delay(P00*; capa+ani-ate(4 "font-si"e": "W=0+Pe-" 65 10005 colaDfectos*; $$alert (capa+2ueue(*+lengt,*
<$,ead <body <div id="-icapa" ]a-os a e0ecutar varios -Ytodos para ,acer una cola de efectos5 pero va-os a ponerles un retardo entre unos y otros+<$div <$body <$,t-l
odemos ver el ejemplo en funcionamiento en una pgina aparte. 2&ora que ya &emos &ec&o m*ltiples ejemplos de trabajo con colas de efectos, siempre con la cola de efectos predeterminada, vamos a aprender en el pr-imo art!culo cmo trabajar con otras colas de efectos distintas.
Artculo por
A.C.- +ola de e)ectos personal 3no predeterminada4 en jQuery

!amos a mostrar c#mo trabajar con otras colas de efectos distintas que la cola de efectos predeterminada. ,n los anteriores cap!tulos del :anual de jQuery &emos aprendido que cada elemento de la pgina tiene incorporada una cola de efectos predeterminada que funciona automticamente, con slo invocar las funciones de efectos que deseemos. ,sta cola de efectos por defecto, ser suficiente para reali%ar la mayor!a de las aplicaciones "eb que podamos imaginarnos, no obstante, tambin tenemos la posibilidad de generar nuestras propias colas de efectos, aunque en este caso tendremos que gestionarlas de una manera un poco diferente. 'a mayor!a de los mtodos para trabajar con colas de efectos tienen un parmetro que es una cadena con el nombre la la cola de efectos que queremos alterar. ,ste parmetro resulta opcional cuando queremos trabajar con la cola de efectos predeterminada, por lo que, en los casos vistos &asta a&ora y como siempre trabajbamos con la cola de efectos predeterminada, nunca necesitbamos utili%arlo. Bsicamente aprenderemos en este art!culo la posibilidad de especificar ese parmetro y gestionar varias colas, que podr!an ejecutarse de manera simultnea.
Nota: la cola de efectos predeterminada de jQuery se llama Df-D, por lo que nuestras colas de efectos personales debern tener otros nombres.
A.C.1.- /jemplo con una cola de e)ectos no predeterminada

ara ilustrar el modo de trabajo con una cola de efectos distinta de la predeterminada vamos a reali%ar un ejemplo en el que tendremos dos colas de efectos distintas. 9na ser la cola predeterminada, que ya sabemos manejar, y otra ser una cola de efectos personal. 3i lo deseas, antes de ponernos manos a la obra, puedes acceder al ejemplo en marc&a.
Nota: Aemos decidido trabajar con dos colas de efectos distintas para que se vea que se pueden poner en marc&a y reali%ar su ejecucin al mismo tiempo.

111
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com rimero podemos ver la funcin que implementar la cola de efectos predeterminada, que ya sabemos cmo funciona(
function oculta=uestra(*4 capa = '("#-icapa"*; capa+fadeIo(P005 0+7*; capa+fadeIo(18005 1*; capa+ani-ate(4 "left": "7P0px" 651800*; capa+ani-ate(4 "left": "100px" 6510005 oculta=uestra*; 6
)omo vemos, estamos definiendo una funcin llamada oculta:uestra01 y en ella estamos lan%ando varias invocaciones a funciones de efectos de jQuery, que se cargan siempre en la cola de efectos predeterminada. 2l final de esta funcin, en la *ltima llamada a animate01, reali%amos un callbac# para invocar de nuevo a oculta:uestra01 y as! generar un bucle infinito de efectos. 2&ora podemos ver la funcin que reali%ar una cola de efectos distinta de la predeterminada.
function ca-biarBolores(*4 capa = '("#-icapa"*; capa+2ueue("-icola"5 function(*4 '(t,is*+css(4 "background-color": "#77U" 6*; setIi-eout("capa+de2ueue()-icola)*"5 1000*; 6*; capa+2ueue("-icola"5 function(*4 '(t,is*+css(4 "background-color": "#U77" 6*; setIi-eout("capa+de2ueue()-icola)*"5 1000*; 6*; capa+2ueue("-icola"5 function(*4 '(t,is*+css(4 "background-color": "#7U7" 6*; setIi-eout("ca-biarBolores(*"5 1000*; 6*; capa+de2ueue("-icola"*; 6
'a funcin cambiar)olores01, que acabamos de ver, encola varias funciones y lo &ace en una cola de efectos llamada DmicolaD. )omo todas las funciones que se meten en DmicolaD no son de efectos 0porque si no, se encolar!an en la cola predeterminada1, tenemos que encolarlas con el mtodo queue01, indicando la cola con la que estamos trabajando y la funcin a encolar en ella. 2ntes de acabar cualquier funcin de las que metemos en DmicolaD, tenemos que llamar a dequeue0DmicolaD1 indicando como parmetro la cola en la que queremos progresar al siguiente elemento encolado. ,se dequeue01 se reali%a adems con un setBimeout01 para retrasar un poco la ejecucin de las siguientes funciones. 2l final de cdigo de la funcin cambiar)olores01 &ay un dequeue0DmicolaD1 que ser!a necesario para que, una ve% definida la cola, se comience la ejecucin con la primera funcin de la misma. /tra posibilidad para la funcin cambiar)olores01 pero un poco ms avan%ada y que ser *til de mostrar, ya que en el art!culo anterior aprendimos a trabajar con el mtodo delay01, ser!a la siguiente(
function ca-biarBolores(*4 capa = '("#-icapa"*; capa+delay(10005 "-icola"*; capa+2ueue("-icola"5 function(sig*4 '(t,is*+css(4 "background-color": "#77U" 6*;

112

sig(* 6*; capa+delay(10005 "-icola"*; capa+2ueue("-icola"5 function(sig*4 '(t,is*+css(4 "background-color": "#U77" 6*; sig(*; 6*; capa+delay(10005 "-icola"*; capa+2ueue("-icola"5 function(*4 '(t,is*+css(4 "background-color": "#7U7" 6*; ca-biarBolores(*; 6*; capa+de2ueue("-icola"*;
'a diferencia es que &emos modificado los setBimeout01 por llamadas al mtodo delay07<<<, DmicolaD1, que produce un retardo de 7 segundo antes de pasar al siguiente elemento de la cola DmicolaD. 2dems, dentro de las funciones que insertamos con queue01, llamamos a la siguiente fase de la cola a travs del parmetro DsigD, que tiene una referencia a la siguiente funcin de la cola odemos ver este ejemplo con su cdigo completo(
<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="en" <,ead <title <tra cola de efectos<$title <script src="++$02uery-1+O+8+-in+0s" type="text$0avascript" <$script <style type="text$css" body4 font-si"e: 0+GPe-; font-fa-ily: ta,o-a5 verdana5 sans-serif; 6 #-ensa0e4 -argin: 80px Ppx; 6 #-icapa4 left: 100px; top: 1P0px; position: absolute; 9idt,: P0px; ,eig,t: P0px; background-color: #7d7; 6 <$style <script languague="0avascript" function -uestra.estantesBola(*4 var funcionesDnBola = '("#-icapa"*+2ueue("-icola"*+lengt,; var funcionesDnBola/redeter-inada = '("#-icapa"*+2ueue(*+lengt,; $$console+log("Bola )-icola):"5 '("#-icapa"*+2ueue("-icola"**; var texto=ostrar = "!ay " W funcionesDnBola W " funciones de efectos en la cola )-icola)"; texto=ostrar W= "<br !ay " W funcionesDnBola/redeter-inada W " funciones de efectos en la cola por defecto"; '("#-ensa0e"*+,t-l(texto=ostrar*; 6 function ca-biarBolores(*4 capa = '("#-icapa"*; capa+delay(10005 "-icola"*; capa+2ueue("-icola"5 function(sig*4 '(t,is*+css(4 "background-color": "#77U" 6*;

113

sig(* 6*; capa+delay(10005 "-icola"*; capa+2ueue("-icola"5 function(sig*4 '(t,is*+css(4 "background-color": "#U77" 6*; sig(*; 6*; capa+delay(10005 "-icola"*; capa+2ueue("-icola"5 function(sig*4 '(t,is*+css(4 "background-color": "#7U7" 6*; ca-biarBolores(*; 6*; capa+de2ueue("-icola"*;
$^ /<C@%@L@:&: /&.& !&BD. DCI& =@C=& NKEB@ZE /D.< B<E CDII@=D<KI DE ]Dc :D :DL&J function ca-biarBolores(*4 capa = '("#-icapa"*; capa+2ueue("-icola"5 function(*4 '(t,is*+css(4 "background-color": "#77U" 6*; setIi-eout("capa+de2ueue()-icola)*"5 1000*; 6*; capa+2ueue("-icola"5 function(*4 '(t,is*+css(4 "background-color": "#U77" 6*; setIi-eout("capa+de2ueue()-icola)*"5 1000*; 6*; capa+2ueue("-icola"5 function(*4 '(t,is*+css(4 "background-color": "#7U7" 6*; setIi-eout("ca-biarBolores(*"5 1000*; 6*; capa+de2ueue("-icola"*; 6 ^$ function oculta=uestra(*4 capa = '("#-icapa"*; capa+fadeIo(P005 0+7*; capa+fadeIo(18005 1*; capa+ani-ate(4 "left": "7P0px" 651800*; capa+ani-ate(4 "left": "100px" 6510005 oculta=uestra*; 6 '(docu-ent*+ready(function(*4 ca-biarBolores(*; oculta=uestra(*; '("#botonta-anocola"*+click(function(*4 -uestra.estantesBola(*; 6*; 6*; <$script <$,ead <body <button id="botonta-anocola" =uestra el nX-ero de funciones en cola a,ora -is-o<$button

114

<div id="-ensa0e" <$div <div id="-icapa" <$div <$body <$,t-l
ara acabar, colocamos el enlace al ejemplo en marc&a. )on esto &emos terminado todo lo que quer!amos e-plicar sobre colas de funciones para reali%ar todo tipo de efectos complejos en jQuery. ,speramos que se &aya podido entender y a partir de aqu! el lector sea capa% de aplicar los conocimientos para implementar efectos especiales en scrips complejos con jQuery. ,n el pr-imo art!culo aplicaremos los conocimientos sobre colas de efectos para mejorar el plugin del navegador desplegable en jQuery para aplicar efectos especiales.
Artculo por
Parte ):
A*adidos al Manual de jQuery

4&s cosas *ue son interesante conocer sobre el -ramewor. '(uer" *ue completan este manual " o-recen re-erencias a otros contenidos por donde continuar aprendiendo.
C.1.- Mtodo jQuery.e8tend34

"no de los m todos del paquete utilities de jQuery, que sirve para extender el contenido de dos o m$s 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 "*;

115
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,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.
C.1.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"
,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.
Artculo por
C.2.- H.get34 de jQuery para 0acer una solicitud Aja8 tipo ,--$ 6/,n$lisis y ejemplos de la funci#n 3.%et*+ de jQuery que sirve para hacer una solicitud ,jax al servidor en la que podemos enviar datos por el m todo :E9. ,n el :anual de jQuery ya &ab!amos tratado con anterioridad el 2ja- en este frame"or# $avascript, principalmente para demostrar &asta qu punto era sencillo &acer una cone-in as!ncrona con el servidor por medio del mtodo load01. +ncluso &ab!amos ido un poco ms lejos, sin abandonar la facilidad, implementando un script 2ja- con el t!pico mensaje de carga. ,n el presente art!culo vamos a empe%ar a e-plorar algunas otras funciones e-istentes en jQuery que sirven para &acer 2ja- y algunos usos un poco ms avan%ados, que nos permitirn ampliar nuestras &abilidades y el tipo de problemas que podamos enfrentar. )omen%aremos por el mtodo J.get01, que como veremos es casi tan sencillo como el ya comentado mtodo load01.

116
Aasta el momento, con el mtodo load01 &ab!amos aprendido a &acer una solicitud 2ja- y a cargar en un elemento de la pgina el AB:' resultante de esa solicitud. ,l mtodo J.get01, a diferencia de load01 no vuelca el resultado de la solicitud en ning*n sitio de manera predeterminada, sino que simplemente se dedica a reali%ar la cone-in con el servidor y recibir la respuesta. ,sto no quiere decir que luego no podamos volcar el resultado de la solicitud en el AB:' de una capa o cualquier otro elemento de la pgina, sino que para conseguirlo, deberemos especificarlo en el cdigo de nuestro script. De esto podemos deducir que J.get01 no tiene un funcionamiento predeterminado 0es decir, y no &ace nada fijo con la respuesta de la solicitud 2ja-1 y por tanto, nosotros podemos programar cualquier comportamiento que deseemos en nuestras aplicaciones.
Nota: el mtodo J.get01 tambin lo podremos encontrar nombrado como jQuery.get01 ya que J es una abreviacin del objeto jQuery.
,n este primer art!culo vamos a dedicarnos a &acer una lista de ejemplos de dificultad creciente con el mtodo J.get01, que nos sirvan para entender cmo funciona. )omo muc&os de los mtodos de jQuery, J.get01 var!a su comportamiento dependiendo de los parmetros que le enviemos.
C.2.1.- H.get3B=.4
3i a J.get01 le pasamos una cadena con una 9=', el mtodo &ace una solicitud 2ja- a dic&a 9=', pero no &ace nada con la respuesta obtenida del servidor.
'+get("contenido-a0ax+,t-l"*;
,s decir, si ejecutamos ese cdigo anterior, el navegador cursar la solicitud 2ja- de la pgina DcontenidoGaja-.&tmlD y con ello obtendr una respuesta. 3in embargo, no &ar nada con esa respuesta una ve% recibida y por tanto no veremos ning*n resultado en el navegador.
C.2.2.- H.get3B=.! )uncion4

,n este segundo caso, estamos pasando dos parmetros, el primero la 9=' de la solicitud 2ja- a reali%ar y el segundo una funcin con el cdigo a ejecutar cuando se reciba la respuesta, que incluir todas las acciones a reali%ar cuando se reciba. ,n esa funcin a su ve% recibimos varios parmetros, siendo el ms importante el primero, en el que tendremos una referencia al resultado de la solicitud reali%ada. 'o vemos con un ejemplo(
'+get("contenido-a0ax+,t-l"5 function(respuestaColicitud*4 alert(respuestaColicitud*; 6*
,n este caso &acemos una solicitud al arc&ivo DcontenidoGaja-.&tmlD. 'uego, cuando se reciba la respuesta se ejecutar el cdigo de la funcin. ,n la funcin recibimos un parmetro D respuesta3olicitudD, que contendr el cdigo AB:' devuelto por el servidor al solicitar esa pgina por 2ja-. )omo se puede ver, en la funcin simplemente mostramos en una caja de alerta el contenido de la respuesta3olicitud. ,se cdigo en marc&a se puede ver en una pgina aparte.
C.2. .- H.get3B=.! datos! )uncion4

9n tercer caso de uso de esta funcin es enviar tres parmetros, uno con la ruta de la pgina a solicitar, otro con datos que se enviar!an en la 9=' de la solicitud ABB 0que recibiremos en el servidor por el mtodo I,B1 y una funcin para &acer cosas cuando la solicitud &aya sido completada y se tenga el resultado. ,n este caso tenemos un comportamiento similar al anterior, con la particularidad que estamos enviando al servidor una serie de datos, como variables en la 9='. Dic&os datos se especifican desde jQuery con notacin de objeto.
'+get("recibe-para-etros8+p,p"5 4no-bre: "Dvandro"5 edad: "UU"65 function(respuesta*4 '("#-iparrafo"*+,t-l(respuesta*; 6*

117
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com )omo se puede ver, se accede por 2ja- a la pgina recibeGparametros;.p&p y se le pasan dos variables por I,B, un nombre y una edad. ,n este caso tenemos tambin una funcin para ejecutar acciones con la respuesta y simplemente volcamos dic&a respuesta en un elemento de la pgina que tiene el identificador idCDmiparrafoD. ,sas variables enviadas en la solicitud ABB , como decimos, se recoger!an en las pginas con programacin del lado del servidor por el mtodo I,B. or ejemplo, este ser!a el cdigo A necesario para recibir esas variables(
.ecibido el siguiente dato: <br Eo-bre: <Qp,p ec,o 'FbDIR"no-bre"S;Q <br Ddad: <Qp,p ec,o 'FbDIR"edad"S;Q
odemos ver el ejemplo en marc&a en una pgina independiente.
C.2.1.- H.get3B=.! datos! )uncion! tipoKdatoKrespuesta4

,ste *ltimo caso de J.get01 sirve para especificar un parmetro adicional, que es el tipo de dato que se espera recibir como respuesta del servidor. 'o t!pico es que del servidor nos llegue un cdigo AB:', pero tambin podr!a ser un Q:', un script o un $3/@. ara mostrar esta posible llamada a jQuery.get01 vamos a mostrar un ejemplo en el que desde el servidor recibimos un dato en notacin $3/@, que es un tipo de respuesta bastante utili%ado en las aplicaciones "eb del lado del cliente. ,n este ejemplo &emos complicado un poco nuestro script, para que se vea cmo con J.get01 podemos &acer cosas muy diversas con la respuesta y no solo escribirla en la pgina o en una caja de dilogo. ara ello tenemos simplemente que complicar todo lo que queramos la funcin que recibe la respuesta y &ace cosas con ella. ,n este caso, como recibimos un arc&ivo en notacin $3/@, podemos &acer cosas distintas dependiendo del contenido de ese $3/@. ,l ejemplo siguiente &ace un rudimentario clculo del precio final de un producto, que ser!a la base imponible ms el +>2. 2dems, en este supuesto ejercicio podr!amos tener varios tipos de clientes, por ejemplo espaEoles 0a los que &ay que aplicarles el impuesto +>21 o e-tranjeros, que estn e-entos de pagar tal impuesto. Benemos un par de botones, con un par de casos de productos(
<button id="coniva" Balcular precio 80 para cliente espaAol (,ay 2ue cobrar @]&*<$button <button id="siniva" Balcular precio 700 para cliente de %rasil (no se le cobra @]&*<$button
)omo se ve, un botn tiene un precio para cliente espaEol y otro para un cliente brasileEo. 'a funcionalidad de esos botones podr!amos e-presarla generando un de evento clic#, para cada uno de los botones(
'("#coniva"*+click(function(*4 '+get("recibe-para-etros-devuelve-0son+p,p"5 4pais: "DC"5 precio: 8065 -uestra/recioNinal5 "0son"*; 6* '("#siniva"*+click(function(*4 '+get("recibe-para-etros-devuelve-0son+p,p"5 4pais: "%."5 precio: 70065 -uestra/recioNinal5 "0son"*; 6*
,l detalle que tenemos que reparar en este cdigo es que estamos enviando un *ltimo parmetro a la funcin J.get01 con el valor DjsonD. )on eso indicamos que la respuesta del servidor se espera con notacin $3/@. 2dems, como se puede ver, los botones invocan a la misma pgina recibeGparametrosGdevuelveGjson.p&p, pero se les pasa datos distintos por I,B al servidor. Bambin &ay una *nica funcin Dmuestra recio.inalD que se encargar de mostrar el precio final en la pgina. ,sa funcin la &emos definido aparte, con el siguiente cdigo(
function -uestra/recioNinal(respuesta*4 '("#base"*+,t-l("/recio final: " W respuesta+preciofinal*; if (respuesta+tieneiva=="1"*4 '("#base"*+css("background-color"5 "#ffcc00"*; 6else4 '("#base"*+css("background-color"5 "#cc00ff"*; '("#base"*+append('()<span class="clienteext" Eo se aplica @]& por ser cliente extran0ero<$span )**; 6 6

118
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com )on esta funcin quer!amos demostrar cmo se pueden &acer cosas distintas dependiendo de la respuesta. ,n concreto, en este ejemplo, para el caso de ser cliente espaEol o e-tranjero se reali%an acciones ligeramente diferentes. 2dems, en la funcin recibimos un parmetro DrespuestaD. ,n este caso, como lo que recib!amos es una respuesta en $3/@, dic&a variable tendr diferentes datos que podemos acceder como si fueran propiedades de un objeto. or ejemplo, respuesta.preciofinal tiene el valor de precio total, una ve% aplicado el +>2 o no dependiendo de la nacionalidad del cliente. or su parte, respuesta.tieneiva nos sirve para saber si correspond!a o no aplicar +>2 a ese cliente. @os quedar!a por ver la pgina A recibeGparametrosGdevuelveGjson.p&p, que contiene el cdigo para recibir los datos por I,B y generar el $3/@ adecuado para la respuesta de la solicitud 2ja-.
<Qp,p if ('FbDIR"pais"S1="DC"*4 ec,o 0sonFencode(array("tieneiva"= "0"5 "preciofinal"= 'FbDIR"precio"S**; 6else4 ec,o 0sonFencode(array("tieneiva"= "1"5 "preciofinal"= ('FbDIR"precio"S ^ (18 $ 100** W 'FbDIR"precio"S**; 6 Q
,ste ejemplo de 2ja- con respuesta en formato $3/@ lo podemos ver en una pgina aparte. ,n el siguiente art!culo veremos cmo podemos aplicar unos eventos a este mtodo J.get01 para poder &acer cosas cuando la solicitud se complete, con -ito o con error.
Artculo por
C. .- /ventos en una solicitud aja8 con H.get34 en jQuery

9ratamiento de eventos relacionados con las solicitudes ajax en jQuery desde la funci#n 3.%et*+. ,n el cap!tulo anterior del manual de jQuery estuvimos e-plicando muc&as cosas interesantes sobre la funcin J.get01, que sirve para &acer solicitudes 2ja-, donde vimos adems diversos ejemplos de funcionamiento. 'a verdad es que la funcin resulta bastante sencilla para &acer distintos tipos de solicitudes 2ja-, a las que les podemos pasar adems un conjunto de datos por medio del protocolo I,B. 3in abandonar la sencille% de los ejemplos vistos anteriormente, vamos a incorporar a&ora algunos usos adicionales, en los que trabajaremos con los eventos 2ja-, directamente con la funcin J.get01. De entre todos los eventos 2ja- disponibles en jQuery, e-isten tres eventos que podemos administrar en las cone-iones reali%adas por la funcin J.get01( 7. <rror: ,vento que se produce cuando la solicitud produce un error, t!picamente por intentar acceder a una 9=' ine-istente o porque el servidor no responda en el tiempo esperado. ;. .uccess: ,vento que se produce cuando la solicitud aja- &a tenido -ito F. Complete: ,vento que se lan%a cuando la solucitud se &a completado, independientemente de si &a sido con -ito o con fallo. ,l orden en el que se producen los eventos &ace que DcompleteD se ejecute por *ltimo. ,s decir, primero se producir un DerrorD o DsuccessD 0dependiendo de si la solicitud 2ja- pudo o no obtener una respuesta positiva1 y luego se producir DcompleteD independientemente del resultado.
Nota: ,stos tres eventos son propios de la infraestructura que nos ofrece jQuery para trabajar con 2ja-. ,stn presentes espec!ficamente en la funcin jQuery.aja-01. @o obstante, en versiones ms actuales del frame"or# 0a partir de jQuery 7.4.71, estn disponibles tambin en otras funciones como jQuery.get01.
,n la funcin jQuery.get01 tenemos que seguir el siguiente esquema de trabajo para operar con los eventos 2ja-(

119
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com rimero guardamos una referencia al objeto que nos devuelve la funcin J.get01, en una variable $avascript.
var ob0a0ax = '+get("-ipagina+,t-l"*;
,l objeto que devuelve la funcin jQuery.get01 es de la clase jqQA= 0abreviacin de jQuery QA= object1 e implementa mtodos que tienen que ver con 2ja-. 'uego podemos definir los eventos deseados por medio de mtodos invocados sobre el objeto jqQA=, con el nombre del evento que queremos definir, en los que pasamos por parmetro la funcin a ejecutar como respuesta al evento.
ob0a0ax+error(function(*4 $$c#digo a e0ecutar por el evento 6*
C. .1.- #e)inicin de un evento error de la solicitud Aja8

2&ora veamos un primer ejemplo de implementacin de un evento DerrorD, que nos permitir!a &acer cosas cuando la solicitud 2ja- no se &a podido completar con -ito.
var ob0a0ax = '+get("kk$url-2ue-no-existe+,t-l"*; ob0a0ax+error(function(*4 alert("!ubo un error"*; 6*
)omo la 9=' que invocamos desde J.get01 no e-iste, se producir un evento error, que definimos con el mtodo error01, pasndole la funcin que queremos ejecutar. 3implemente mostraremos un mensaje de error por medio de una caja alert. ,se ejemplo est disponible para su ejecucin en una pgina aparte.
C. .2.- #e)inicin del evento success y complete de las solicitudes Aja8

,n este segundo ejemplo &acemos los dos eventos que nos faltaban por ver, que son success y complete. 2dems, vamos a demostrar cul es el orden de ejecucin de los mismos, por medio de mensajes en cajas de alert. ,-isten tres pasos distintos que produce la solicitud y cdigo fuente que podemos colocar en distintas partes del script que se ejecutar en un orden predefinido. 7. rimero se ejecuta la funcin que se escribe en jQuery.get01 para definir acciones con la respuesta de la solicitud. ;. 3eguidamente se ejecuta la funcin que se asigne al evento success. F. or *ltimo se ejecuta la funcin asignada al evento complete.
Nota: recordar adems que el evento complete se ejecutar!a tanto si la solicitud aja- tiene -ito como fracaso, mientras que success solo se ejecuta cuando la solicitud se reali% con -ito. var ob0a0ax = '+get("contenido-a0ax+,t-l"5 function(respuesta*4 alert("paso 1"*; 6*; ob0a0ax+success(function(*4 alert("paso 8"*; 6*; ob0a0ax+co-plete(function(*4 alert("paso 7"*; 6*;
3i ejecutamos ese cdigo 0recordar de &acerlo con jQuery 7.4 o superior1 se podr ver que se lan%an tres cajas de dilogo producidas por los tres DpasosD de la solicitud 2ja-. ,so siempre y cuando la llamada a la pgina contenidoGaja-.&tml se ejecute con -ito, porque si &ubiera un fallo en tal cone-in slo ver!amos la caja de alert del Dpaso FD, que es la del evento complete.

120
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com uedes ver una pgina con el ejemplo en marc&a. ,n el siguiente art!culo continuaremos viendo algunos detalles importantes de los eventos en las solicitudes 2ja- y es que, adems en ellos podemos recibir varios parmetros con los que operar para reali%ar acciones determinadas.
Artculo por Miguel
Angel Alvarez
C.1.- $ar%metros reci'idos por las )unciones de los eventos Aja8

Ejemplos de solicitud ,jax con diversos eventos, en los que se reciben par$metros con datos y referencias 0tiles para los scripts jQuery. 3eguimos trabajando con 2ja- en jQuery, en esta ocasin profundi%ando un poco en algunos de los eventos 2ja- que tenemos disponibles en el frame"or#. ,n concreto estamos viendo los eventos que podemos definir desde la funcin jQuery.get01. ,n este art!culo veremos ejemplos interesantes que utili%arn eventos 2ja-, como son error, success y complete. ero sobre todo &aremos inciso en los parmetros que podemos recibir en las funciones que escribimos para definir las acciones a reali%ar por cada evento, ya que a travs de ellos podemos acceder a informacin interesante que qui%s nos sea necesaria en algunos casos.
Nota: ,n art!culos anteriores &emos tratado la funcin 2ja- jQuery.get01. ara comprender el presente te-to conviene &aber le!do antes(
O. 4.
'a funcin J.get01 'os eventos de J.get01
C.1.1.- /vento aja8 error3j2N,=! estado! e8cepcin4

)omo se dijo anteriormente, el evento error se produce cuando la solicitud 2ja- no se pudo reali%ar por alguna ra%n. 3e define por medio de una funcin que recibe tres parmetros. ,l primero de ellos es un objeto que contiene la propia solicitud 2ja- que se est produciendo, el segundo es el estado de error 0que puede ser simplemente DerrorD, pero tambin algo como DtimeoutD que nos aclare mejor el tipo de error que se &a producido1 y el tercero una e-cepcin que pueda &aberse lan%ado.
Nota: @osotros no estamos obligados a recibir todos esos parmetros en la funcin del evento. odemos recibir el primero de ellos, los dos primeros segundo o los tres, o no recibir ninguno, que tambin ser!a un comportamiento vlido y bastante &abitual.
,n el siguiente ejemplo veremos un caso de uso del evento error.

var url = pro-pt(":a-e la K.L a la 2ue 2uieres 2ue acceda"5 "contenido-a0ax+,t-l"*; var ob0a0ax = '+get(url*; ob0a0ax+error(function(o5 estado5 excepcion*4 alert("Drror detectado: " W estado W "anDxcepcion: " W excepcion*; o+co-plete(function(*4alert("Colicitud co-pletada evento cargado desde el evento de error1"*6*; 6*; ob0a0ax+co-plete(function(*4alert("Colicitud co-pletada"*6*;
)omo se ve, primero preguntamos al usuario, a travs de una caja de DpromptD, la 9=' a la que desea acceder y luego reali%amos la solicitud 2ja- de dic&a 9=' con J.get01. 2l mostrarse la caja DpromptD y el usuario poder

121
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com escribir cualquier cosa, se puede colocar cualquier ruta que se desee, incluso nombres de pginas ine-istentes, para que se produ%ca un error en la cone-in 2ja-. ero lo que queremos remarcar est justo despus, que es la llamada al mtodo error01, en la que indicamos la funcin a ejecutar cuando se produ%ca un error en la cone-in. 2 ese mtodo le enviamos la funcin a ejecutar cuando se produ%ca el error y vemos que se le pasan tres parmetros. )on los parmetros DestadoD y De-cepcionD simplemente los mostramos en una caja de alert, para poder verlos. )on el parmetro DoD, que es una referencia al objeto 2ja- que se est ejecutando, podemos, por &acer alguna cosa, como cargar otro evento. ,n este caso cargamos una funcin adicional al evento DcompleteD, y digo adicional porque en la *ltima l!nea de este cdigo ya &ab!amos cargado algo al evento complete. or tanto, si se &a entendido bien, se comprobar que( 5. 3i la solicitud 2ja- tuvo -ito, no se &ace nada en concreto, pero se obtendr un mensaje diciendo D3olicitud completadaD P. 3i la solicitud 2ja- fall, tampoco &acemos nada en concreto, pero veremos varios mensajes. ,l primero para decir cul es el te-to asociado a este error y la e-cepcin producida, en caso que &aya alguna. ,l segundo mensaje que veremos, por *ltimo y tambin cuando se complete la solicitud, ser el de D3olicitud completada evento cargado desde el evento de errorKD uedes ver el ejemplo en marc&a para comprobar por ti mismo ese funcionamiento.
C.1.2.- /vento Aja8 success3datos! estado! j2N,=4

,l evento success, que se produce cuando la solicitud se ejecut con -ito, tiene la posibilidad de recibir tres parmetros. ,l primero es la respuesta generada por la solicitud 2ja- y el segundo es el estado de esta solicitud y el tercero el objeto 2ja- de esta solicitud. ,s interesante el primer parmetro, donde recibimos los datos de respuesta de esta solicitud y si lo deseamos, podemos operar con ellos del mismo modo que si estuviramos en la funcin que gestiona la respuesta 2ja-. ,l segundo parmetro es simplemente un te-to descriptivo del estado de la solicitud, que si &a tenido -ito ser algo como DsuccessD. 2ntes de ver un ejemplo, pasemos a e-plicar el otro evento que nos queda.
C.1. .- /vento Aja8 complete3j2N,=! te8t<tatus4

,ste evento se lan%a una ve% la solicitud &a terminado 0tanto en -ito como en fracaso1 y se produce despus de otros eventos 2ja-. ,n l recibimos dos parmetros, el primero con una referencia al objeto 2ja- que se est ejecutando y el segundo con una cadena que describe el estado de la cone-in, como DerrorD si se produjo un problema o DsuccessD si la solicitud fue reali%ada correctamente. >eamos un ejemplo a continuacin, en el que &acemos un pequeEo DdemoD de cmo podr!a funcionar un botn Dme gustaD.
var ob0a0ax = '+get("incre-enta--e-gusta+p,p"5 4ele-ento: 787776*; ob0a0ax+error(function(*4 '("#gusto"*+append()<span class="error" Drror al contabili"ar el -e gusta<$span )*; 6*; ob0a0ax+success(function(respuesta5textostatus*4 '("#gusto"*+,t-l("Bontigo ya son " W respuesta W " personas a las 2ue les gusta1"*; '("#gusto"*+addBlass("gustado"*; '("#estadosuccess"*+,t-l(textostatus*; 6*; ob0a0ax+co-plete(function(oa5 textostatus*4 '("#estadoco-plete"*+,t-l(textostatus*; 6*;
)omo se puede ver, se inicia una solicitud 2ja- con J.get01, pero no colocamos en la solicitud nada a reali%ar cuando sta se reciba, pues ms adelante definiremos qu &acer en caso que se produ%ca un error o en caso que se ejecute con -ito. )on el mtodo error01 definimos el evento a ejecutarse en el caso que la consulta a la pgina incrementaGmeG

122
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com gusta.p&p no pueda ser reali%ada. ,n ese caso, simplemente mostramos un mensaje de error. )on el evento success, definido por medio del mtodo success01, definimos las acciones a reali%ar en caso que se ejecute la solicitud con -ito. )omo se puede ver, en el evento se reciben dos parmetros, uno con la respuesta y el segundo con el te-to de estado. )on la respuesta podemos &acer acciones, al igual que con el te-to de estado. 2mbos datos los mostramos en la pgina en distintos lugares. 'uego se define el evento complete, que recibe tambin un par de parmetros. or un lado tenemos el objeto aja- que &a recibido la solicitud, con el que no &acemos nada. 'uego tenemos el te-to de estado, que simplemente lo mostramos en la pgina. ,l ejemplo se puede ver en una pgina aparte. or el momento es todo lo que quer!amos mostrar del mtodo jQuery.get01, as! que ya en el pr-imo art!culo veremos una funcin parecida pero que &ace las cone-iones 2ja- por medio de /3B en ve% de I,B, con el objetivo final de mostrar cmo enviar formularios por 2ja- con jQuery.
Artculo por Miguel
Angel Alvarez
C.5.- Introduccin a jQuery Mo'ile

(aracter-sticas de jQuery 7obile, el framework Javascript para desarrollo de aplicaciones web para m#viles, basado en jQuery. jQuery :obile .rame"or# es un producto que sin duda va a dar muc&o que &ablar en los pr-imos aEos. ,stamos asistiendo a la revolucin de los dispositivos mviles de acceso a +nternet y este frame"or#, basado en el popular jQuery, se va a convertir en el mejor aliado para el desarrollo de sitios "eb orientados para al segmento de consumidores "eb en movilidad. ,n esta introduccin a jQuery :obile voy a ofrecer las claves o caracter!sticas de este frame"or#, de modo que las personas puedan saber qu tipo de ayudas nos ofrece para el desarrollo y por qu va a significar una revolucin a la &ora de crear aplicaciones "eb compatibles con la mayor!a de las plataformas mviles.
C.5.1.- jQuery se reinventa a si mismo

Qui%s recordemos el lema o slogan de jQuery( D7rite +ess= Do !oreD. ues jQuery :obile .rame"or# es esa misma idea, pero elevado a la siguiente potencia. ara e-plicar esto quiero antes preguntar a los lectores S ara qu sirve un frame"or#T 3upongo que la mayor!a lo sabr de sobra, pero comento bsicamente estas dos situaciones( ]. @o tener que lidiar con las particularidades de cada navegador. Desarrollar una ve% con cdigo jQuery y que se vea correctamente en todos los navegadores del mercado. +ncluso, cuando saquen otro navegador, o versiones nuevas de los e-istentes, que no tengas

123
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com que retocar tu cdigo para adaptarlo tambin a ellos. 8. Bambin sirve para escribir menos cdigo fuente y &acer cosas ms espectaculares. 2&ora S or qu jQuery :obile es otra vuelta de tuercaT 7<. orque con los dispositivos mviles se %an multiplicado el n5mero de navegadores y de plata"ormas. Benemos muc&os fabricantes, de tablets y smartp&ones y diversos dispositivos con caracter!sticas distintas, como tamaEos de pantallas, sistemas operativos diferentes y diversos navegadores basados en cada uno de ellos. >amos, que si antes con los navegadores para )s &ab!a problemas de compatibilidad, cuando ten!amos apenas F sistemas operativos y F navegadores populares, a&ora con los mviles la cosa todav!a se &ace ms complicada. 77. orque el desarrollo de sitios web con #$uery !obile es todava ms automtico de lo que era trabajar con jQuery. )on muc&o menos cdigo &aces muc&as ms cosas. )omo te puedes figurar, con los dispositivos mviles todav!a se &ace ms necesario usar un frame"or#, que te facilite desarrollar una ve% y ejecutar de manera compatible en todos los dispositivos. 2dems de ello, con jQuery :obile reducirs drsticamente el tiempo de desarrollo de tu sitio "eb para dispositivos de movilidad.
C.5.2.- +aracterFsticas de jQuery Mo'ile

'o primero que debe quedarnos claro para describir jQuery :obile es que no se trata de un nuevo frame"or# creado desde cero. ,n absoluto. odemos entender a jQuery :obile como un plugin para jQuery puesto que es un producto que est basado en el propio "ramework >avascript #$uery. or tanto, aquellas personas que ya conocen jQuery no van a tener que aprender nada nuevo, sino aplicar sus conocimientos y desarrollar fcilmente aplicaciones para mviles. ,sto significa una gran ventaja, puesto que &ay muc&as personas que conocen jQuery y que van a poder pasarse sin prcticamente ning*n problema al desarrollo para dispositivos. 'o segundo que quiero seEalar es que, si bien jQuery nos sirve para desarrollo de funcionalidades $avascript compatibles con todos los navegadores, jQuery :obile va un poco ms all. @o se trata simplemente de una capa para reali%ar cdigo $avascript que funcione en todos los navegadores, sino un conjunto de %erramientas -ue simpli"icar el proceso de crear pginas para mviles, desde la escritura del propio cdigo AB:', la maquetacin con )33 y la creacin de efectos dinmicos con $avascript. 9n momento( ?como nos va a ayudar a %acer 8'!+ #$uery !obile@ @o es que vayas a escribir cdigo AB:' desde jQuery, sino que, al incluir jQuery :obile tu cdigo AB:' bsico ser optimi%ado para reali%ar diversos comportamientos dinmicos en los navegadores mviles, de manera automtica. 2dems, muc&as cosas del propio frame"or# las vas a poder configurar directamente a travs de atributos AB:'. Bueno ?A -u6 %ay de C..@ ues tampoco es que tengas que escribir tu cdigo )33 desde jQuery :obile, sino que este frame"or# dispondr diversas &erramientas )33, tambin de manera automtica, que podrs utili%ar en tus desarrollos. or poner dos ejemplos, con este frame"or# tus componentes de formularios se estili%arn de manera automtica, sustituyendo los feos elementos nativos de los navegadores de dispositivos mviles. 2dems, dispondrs de un pequeEo frame"or# )33 para poder &acer cosas como la maquetacin a partir de una rejilla. 2parte de todo lo comentado &asta a&ora, que opino es clave para entender bien qu es jQuery :obile .rame"or#, aqu! van otra serie de caracter!sticas rpidas del producto( 7;. Creado sobre #$uery con ar-uitectura de #$ueryB&( 'os propios creadores de jQuery usaron su e-periencia para desarrollar el frame"or# para mviles y adems implementaron la arquitectura diseEada para las librer!as de interfaces de usuario jQuery9+. or tanto se trata de un producto muy bien pensando, en base a la e-periencia de aEos. 7F. <st desarrollado para traba#ar con 8'!+C( de &ec&o, estamos obligados a &acer pginas AB:'4 para aprovec&ar todas las caracter!sticas del frame"or#. 7O. Depleto de automatismos( 3i ya era fcil &acer 2ja- en jQuery, todav!a es ms fcil en jQuery:obile. De &ec&o, si el frame"or# capta que puede &acer una cone-in 2ja- en lugar de una convencional, lo &ace automtica por 2ja-. H eso es solo un ejemplo, tambin son automticas las transiciones entre pginas, la personali%acin del aspecto de la pgina, etc. 74. Preparado para dispositivos tctiles( 'os dispositivos tctiles tienen cambios en la gestin de

124
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com eventos y jQuery :obile nos facilita la labor de adaptarnos a ellos. 75. PersonaliEacin de temas( +gual que ocurr!a con las jQuery9+, el jQuery :obile podemos elegir entre varios temas grficos ya listos para aplicar al aspecto de nuestra pgina. 2dems, podemos crear nuestros propios temas personali%ados.
C.5. .- +ompati'le con el mayor n(mero de plata)ormas

'os creadores del frame"or# comentan entre sus caracter!sticas que se &an esfor%ado para cubrir el mayor n*mero de plataformas de dispositivos mviles posible. Dicen que el target que &an buscado es mayor que el del resto de frame"or#s disponibles en el mercado.
Nota: 2 decir verdad, no &e comprobado &asta que punto la compatibilidad de jQuery :obile sea mayor o menor que la de otros productos como 3enc&a Bouc&. ero si nos vamos a la pgina de 3enc&a veremos que ellos comentan que el frame"or# est preparado para i/3, 2ndroid y Blac#Berry, cuando jQuery :obile alcan%a muc&as otras plataformas.
,n la siguiente imagen podemos ver los logos de los sistemas operativos que jQuery :obile soporta.
@o obstante, cabe seEalar e-isten diversos grados de compatibilidad para cada sistema, o mejor dic&o, para cada navegador dentro de cada familia de dispositivos. ,n la documentacin del frame"or#, en la seccin de _3upported latforms` veremos que el grado de compatibilidad est dividido en tres niveles distintos, desde IradoG2 0donde estn la mayor!a navegadores para i/3 y 2ndroid, as! como Blac#Berry, alm Web/3, los navegadores de ordenadores de escritorio, etc.1 a IradoGB 0donde encontramos a 3ymbian, /pera :ini 4.< y 5.< para i/3 o Balc#berry 4.<1 o IradoG) 0con el resto de los smartp&ones, entre los que se encuentra Windo"s :obile o Blac#berry O1. ,n resumen, que seg*n apuntan en la documentacin, solo se &a dejado sin soporte deliberadamente en esta versin 7.< del frame"or# el sistema 3amsung Bada 0,l sistema operativo propietario de 3amsumg para smartp&ones1, aunque dicen que probablemente funcione relativamente bien incluso sin &aberla probado, pues todav!a no &ay dispositivos o emuladores. ,n los pr-imos art!culos de DesarrolloWeb.com empe%aremos a desarrollar con jQuery :obile, comen%ando por las e-plicaciones sobre cmo &acer una primera pgina bsica. De momento os dejo un par de enlaces que puedan complementar esta informacin( 7P. )omo no, es imprescidible dar el enlace a este frame"or#, para que podis ir conocindolo( &ttp(??jquerymobile.com 7]. 2dems, una referencia interesante a un sitio donde se puede ver una galer!a de sitios creados con jQuery :obile.
C.5.1.- Introduccin a jQuery Mo'ile en vFdeo

Aemos reali%ado una retransmisin en directo que puede servir para poder tener una visin general de jQuery :obile y para dar los primeros pasos con este frame"or# para el desarrollo de sitios para dispositivos mviles. ,n la introduccin se e-plican cosas importantes como qu es jQuery :obile, cmo insertarlo en una pgina "eb o qu relacin tiene con el proyecto jQuery global. 2dems se comien%a a codear con diversos ejemplos en los que se puede apreciar la estructura de la pgina bsica, la estructura multipgina y la personali%acin de elementos del AB:' con distintos roles.
Artculo por Miguel
Angel Alvarez
125


126

Manual Jquery

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Manual Jquery

Transféré par

Droits d'auteur :

Formats disponibles

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.

Autores del manual

Director de DesarrolloWeb.com http://www.desarrolloweb.com (54 captulos)

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.1.- Introduccin a jQuery

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

1.1.2.- Ventajas de jQuery con respecto a otras alternativas

1.1. .- jQuery! es para mi"

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Miguel Angel Alvarez

1.2.- #emo muy simple de uso de jQuery

1.2.1.- #emo 1 de jQuery

'uego tenemos dos botones con estos cdigos(

1.2.2.- #emo 2 de jQuery

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Miguel Angel Alvarez

1. .- $asos para utilizar jQuery en tu p%gina &e'

1. .1.- 1.- #escarga la (ltima versin del )rame&or*

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

1. .2.- 2.- +rea una p%gina ,-M. simple

1. . .- .- /jecutar cdigo cuando la p%gina 0a sido cargada

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

or l!neas, esto es una recapitulacin de lo que &emos &ec&o(

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1. .5.- 5.- 6uarda el arc0ivo 0tml y %'relo en un navegador

1. .7.- 7.- /8tra9 :lo2uear el comportamiento normal de un enlace

Miguel Angel Alvarez

1.1.- :%sicos jQuery9 a;adir y 2uitar clases +<< so're elementos

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.1.1.- 1.- +digo completo del ejemplo jQuery

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

odemos ver el ejemplo desarrollado en el art!culo en una pgina aparte.

Miguel Angel Alvarez

1.5.- Mostrar y ocultar elementos de la p%gina con jQuery

1.5.1.- ?cultar y mostrar una capa con jQuery

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.5.2.- Mostrar u ocultar elementos como respuesta a un evento

Coy -ayor de edad

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Coy -ayor de edad

.inalmente, podemos verlo en marc&a en una pgina aparte.

Miguel Angel Alvarez

1.7.- /)ectos r%pidos con jQuery

1.7.1.- /jemplo de e)ectos e interaccin en jQuery

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

Miguel Angel Alvarez

1.@.- +all'ac* de )unciones jQuery

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com

1.@.1.- +mo realizar una pila de ejecucin de )unciones

1.@.2.- /jemplo real de call'ac* con jQuery

Manual de jQuery: http://www.desarrolloweb.com/manuales/manual-jquery.html

Miguel Angel Alvarez

1.A.- Bso de Aja8 muy sencillo con jQuery

1.A.1.- -raer un contenido con Aja8 al pulsar un enlace