Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Manual de Jquery
Manual de Jquery
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.
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.1.- Qu es jQuery
ara simplificar, podr!amos decir que jQuery es un frame"or# $avascript, pero qui%s muc&os de los lectores se preguntarn qu es un frame"or#. ues es un producto que sirve como base para la programacin avan%ada de aplicaciones, que aporta una serie de funciones o cdigos para reali%ar tareas &abituales. or decirlo de otra manera, frame"or# son unas librer!as de cdigo que contienen procesos o rutinas ya listos para usar. 'os programadores utili%an los frame"or#s para no tener que desarrollar ellos mismos las tareas ms bsicas, puesto que en el propio frame"or# ya &ay implementaciones que estn probadas, funcionan y no se necesitan volver a programar.
Nota:si no sabes lo que es $avascript seguramente no te interesar este art!culo, pero puedes aprenderlo tambin en DesarrolloWeb.com( Qu es $avascript
or ejemplo, en el caso que nos ocupa, jQuery es un frame"or# para el lenguaje $avascript, luego ser un producto que nos simplificar la vida para programar en este lenguaje. )omo probablemente sabremos, cuando un desarrollador tiene que utili%ar $avascript, generalmente tiene que preocuparse por &acer scripts compatibles con varios navegadores y para ello tiene que incorporar muc&o cdigo que lo *nico que &ace es detectar el bro"ser del usuario, para &acer una u otra cosa dependiendo de si es +nternet ,-plorer, .irefo-, /pera, etc. jQuery es donde ms nos puede ayudar, puesto que implementa una serie de clases 0de programacin orientada a objetos1 que nos permiten programar sin preocuparnos del navegador con el que nos est visitando el usuario, ya que funcionan de e-acta forma en todas las plataformas ms &abituales. 2s! pues, este frame"or# $avascript, nos ofrece una infraestructura con la que tendremos muc&a mayor facilidad para la creacin de aplicaciones complejas del lado del cliente. or ejemplo, con jQuery obtendremos ayuda en la creacin de interfaces de usuario, efectos dinmicos, aplicaciones que &acen uso de 2ja-, etc. )uando programemos $avascript con jQuery tendremos a nuestra disposicin una interfa% para programacin que nos permitir &acer cosas con el navegador que estemos seguros que funcionarn para todos nuestros visitantes. 3implemente debemos conocer las librer!as del frame"or# y programar utili%ando las clases, sus propiedades y mtodos para la consecucin de nuestros objetivos. 2dems, todas estas ventajas que sin duda son muy de agradecer, con jQuery las obtenemos de manera gratuita, ya que el frame"or# tiene licencia para uso en cualquier tipo de plataforma, personal o comercial. ara ello simplemente tendremos que incluir en nuestras pginas un script $avascript que contiene el cdigo de jQuery, que podemos descargar de la propia pgina "eb del producto y comen%ar a utili%ar el frame"or#.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,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.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
)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.
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.
,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
)omo podrs ver, es una pgina bien simple, en la que tenemos una llamada a un script e-terno llamado jqueryG7.F.;.min.js. ,ste es el cdigo de jQuery que &emos descargado de la pgina del frame"or#. 3i &as descargado una versin distinta, qui%s el arc&ivo se llame de otra manera, as! que es posible que tengas que editar ese nombre de arc&ivo para colocar el que tengas en el directorio. )on ese script ya &emos incluido todas las funciones de jQuery dentro de nuestra pgina. 3lo tienes que prestar atencin a que tanto el arc&ivo .&tml de esta pgina, como el arc&ivo .js del frame"or# estn en el mismo directorio. H, como dec!a, que el arc&ivo que incluimos con la etiqueta 3)=+ B sea el .js que nosotros &emos descargado. 2dems, como se puede ver, &emos dejado dentro del A,2D una etiqueta 3)=+ B de apertura y cierre que est vac!a. Bodo el cdigo que vamos a e-plicar a continuacin tendrs que colocarlo en dentro de esa etiqueta.
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.
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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*;
,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.
)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.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.- =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 J0DLcapaD1 estamos seleccionando un elemento de la pgina cuyo idCDcapaD.
'("a"*+-ouseover(function(event*4 '("#capa"*+addBlass("clasecss"*;
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*;
10
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
ara ocultar este elemento, &abr!a que invocar el mtodo css01 de la siguiente manera(
'("#-iele-ento"*+css("display"5 "none"*;
)omo se puede ver, se accede al elemento con la funcin dlar J01 y el selector DLmielementoD. 'uego al mtodo css01 le pasamos el valor DdisplayD y DnoneD, porque queremos alterar a propiedad display y asignarle el valor DnoneD, para ocultar el elemento. ara mostrarlo &ar!amos algo parecido, pero colocando el valor Dbloc#D en el atributo )33 DdisplayD.
'("#-iele-ento"*+css("display"5 "block"*; Nota: el mtodo css01 admite otros parmetros. 3i slo recibe un parmetro, de tipo string, devuelve el valor )33 asignado a ese parmetro. Bambin podr!a recibir un slo parmetro, en este caso de con una notacin de objeto con pares llave?valor, y entonces asignar!a todos esos estilos )33, especificados por los pares llave?valor en el objeto, al elemento de la pgina donde se &aya invocado el mtodo.
)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#bocon 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
11
)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 '(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
12
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
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
13
frame"or# $avascript. odremos encontrar e-plicaciones ms detalladas sobre cmo definir eventos $avascript con jQuery.
Dentro de la funcin a ejecutar cuando se &ace clic, se coloca la llamada a la funcin de los efectos.
'("#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 <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
,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.
,n ese esquema de llamada a mi.uncion01, se le estn pasando dos parmetros. ,l primero ser!a un supuesto parmetro que necesitase mi.uncion01 y el segundo, que es le que nos interesa en este caso, el nombre de la funcin que se tiene que ejecutar despus que acabe. )on este cdigo, primero se ejecuta mi.uncion01 y cuando acaba completamente, se ejecuta funcion)allbac#01. ero atencin que este ejemplo lo &emos simplificado para que se pueda entender fcilmente y esta sinta-is slo valdr si funcion)allbac# no recibe parmetros, porque no los podemos indicar con el nombre de la funcin. >eamos entonces una forma de &acer este callbac# que funcione siempre(
-iNuncion ("para-etros de la funcion"5 function(*4 funcionBallback(*; 6*;
)on este cdigo, que funcionar!a igual que el anterior, lo bueno es que s! podemos indicar los parmetros que se necesiten
15
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com para la llamada a funcion)allbac#01.
)omo se puede ver, en la llamada a fade/ut01 estamos pasando como parmetros el valor 7<<<, que son los milisegundos tiene que durar el efecto fade out 0fundido &acia transparente1, y luego la funcin callbac#, que se ejecutar despus de que fade/ut01 &aya terminado. )omo el mtodo css01 0se encuentra como primera instruccin de la funcin callbac#1 es instantneo, no necesita &acerse un callbac# para ejecutar el fade+n01, sino que se puede escribir directamente en la siguiente l!nea de cdigo. 2s! pues, se ve que el callbac#, al menos en este ejemplo, slo es necesario &acerlo cuando se ejecutan funciones que reali%arn un procesamiento prolongado. odemos ver este ejemplo de callbac# en una pgina aparte. Aasta aqu!, a lo largo de los cap!tulos de este manual de jQuery, &emos le!do la introduccin a este popular frame"or# $avascript, tal como se puede ver en el apartado DAo" to use jQueryD publicada en la pgina de documentacin. Desde DesarrolloWeb.com &emos enriquecido este tutorial de jQuery aportando nuevos ejemplos y e-plicaciones adicionales, encaminadas a que cualquier persona, con unos conocimientos bsicos de $avascript, pueda entender y aprender a usar estas librer!as de programacin crossGbro"ser. 2&ora podemos &acer una pausa en este manual y volveremos pronto con nuevos art!culos para e-plicar otros asuntos sobre la programacin con jQuery.
Artculo por
16
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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*; 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.
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.
17
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.
,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
18
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Queremos ver algunas cosas t!picas que podr!amos desear &acer con 2ja- en una pgina "eb, facilitando el proceso de desarrollo con el frame"or# $avascript jQuery. ,n esta l!nea de art!culos ya publicamos &ace poco un art!culo sobre el uso de 2ja- en jQuery simplificado. ,n el mencionado art!culo vimos cmo &acer una llamada 2ja- con 7 sola l!nea de cdigo 0el 2ja- en si era una l!nea de cdigo, aunque se necesitan varias instrucciones ms para asociar las acciones 2ja- como respuesta a eventos en la pgina1. 9na de las cosas que ms &abitualmente podr!amos desear &acer cuando se reali%a una llamada 2ja- es la creacin de un mensaje de carga, que podemos colocar con un simple te-to Dcargando...D o con la t!pica imagen de 2ja- 'oader. ,n este art!culo veremos cmo crear ese mensaje de carga al reali%ar una solicitud 2ja- con jQuery. ara los interesados, se puede ver este ejemplo de 2ja- en una pgina aparte.
)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-.
19
>oy comentando l!nea a l!nea el cdigo anterior. ,n la primera l!nea se est especificando un mtodo ready01 sobre el objeto document, que sirve para generar un cdigo a ser ejecutado cuando la pgina est lista para recibir instrucciones $avascript que trabajen con el D/:. ,n la segunda l!nea se accede al elemento con identificador Denlaceaja-D 0es decir, el enlace que activar el 2ja-1 para definir un evento Dclic#D. ,n la siguiente l!nea se ejecuta el mtodo preventDefault01 sobre el evento producido al &acer clic sobre el enlace. ,sto se &ace para anular el comportamiento t!pico del enlace. 2&ora viene la parte en la que se mostrar el mensaje de carga(
'("#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
20
,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
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.
21
,n el pr-imo art!culo comen%aremos a tratar a fondo el )ore de jQuery, &ablando de la funcin dlar J01.
Artculo por
22
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com >eamos los distintos usos de esta funcin, seg*n los parmetros que reciba.
)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*;
23
3i queremos, podemos utili%ar el segundo parmetro opcional, que es el conte-to. )on l podr!amos conseguir seleccionar elementos que pertenecen a una %ona concreta de nuestro documento. or defecto el conte-to es la pgina entera, pero lo podemos restringir de esta manera(
var inputs = '("input"5docu-ent+for-sR0S*; inputs+css("color"5 "red"*;
)on la primera l!nea conseguimos seleccionar todos los elementos +@ 9B que pertenecen al primer formulario de la pgina. 3e devolver un objeto jQuery que contiene todos los input seleccionados. )on la segunda l!nea, invocando el mtodo css01 sobre el objeto jQuery recibido, estar!amos cambiando el color del te-to de esos elementos. ,sto no seleccionar!a los +@ 9B de otros formularios, como se puede ver en esta pgina de ejemplo. 2&ora por completar un poco ms estas notas, veamos otro ejemplo en el que seleccionamos todos los prrafos 0etiqueta 1, pero restringimos el conte-to *nicamente los que estn en un D+> con idCDdiv7D.
var parrafosFdiv1 = '("p"5"#div1"*; parrafosFdiv1+,ide(*
,n la segunda l!nea lan%amos el mtodo &ide01 sobre el objeto jQuery que contiene los prrafos seleccionados, con lo que conseguimos que se oculten. odemos ver una pgina que con este ejemplo en marc&a. )ontamos con un video que nos &abla de la funcion J en jQuery. ,n el siguiente art!culo veremos otros usos de la funcin jQuery01 ? funcin dlar J01.
Artculo por
,sto nos crear en la variable nuevos,lementos los elementos AB:' que &emos especificado en el string. 'uego podr!amos &acer lo que queramos con ellos, como colocarlos en la pgina con el mtodo appendBo01, por ejemplo de esta manera(
nuevosDle-entos+appendIo("body"*; Nota: el mtodo appendBo01 no pertenece al )ore, pero nos viene bien utili%arlo y as! &acer algo con los elementos que acabamos de crear.
24
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com >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 "*; 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
)on la primera l!nea creamos una variable llamada documento, a la que asignamos el valor que devuelve el mtodo J01 enviando el parmetro document.body.
Nota: 'a variable document.body corresponde con un elemento del D/: de $avascript, que crea automticamente el navegador y &ace referencia al documento de la pgina.
)on ello obtenemos un objeto que es el cuerpo de la pgina 0document.body1 al que le &emos agregado todas las funcionalidades del frame"or# jQuery para los elementos. 2s! pues, en la l!nea siguiente, invocamos el mtodo css01 sobre la variable DdocumentoD, que es el propio documento de la pgina e-tendido. or eso el mtodo css01, que es de jQuery01, funciona sobre ese objeto. 2lgo como esto no funcionar!a porque estar!amos intentando lan%ar un mtodo de jQuery directamente sobre el objeto D/: sin &aberlo e-tendido(
docu-ent+body+css("background-color"5 "#ff8877"*;
@o funcionar porque no podemos llamar a un mtodo jQuery sobre un objeto D/:, si es que no lo &emos e-tendido con la funcin J01.
Nota: ,sta funcin acepta documentos P:' y objetos Windo", aunque no son propiamente elementos del D/:.
odemos ver a&ora una pgina donde se encuentra este ejemplo en marc&a.
25
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,n esa funcin podemos colocar cualquier cdigo, que se ejecutar slo cuando el D/: est listo para recibir comandos que lo modifiquen. )on ello, esta funcin nos vale perfectamente para &acer cualquier cosa dentro de la pgina que afecte al D/:. ,jemplo(
'(function (*4 $$&2u3 puedo ,acer cual2uier cosa con el :<= 6*;
,ste callbac# con la funcin jQuery J01 ser!a una abreviatura de otro mtodo que &emos visto repetidas veces a lo largo de este manual para definir acciones cuando el D/: est listo(
'(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
26
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Aay algo que tenemos que tener en cuenta, en la medida de lo posible, cuando creamos cdigo $avascript( crear un cdigo de calidad y lo ms corto posible. ara ello tambin nos facilitan muc&o las cosas los frame"or#s y mtodos como eac&01, que veremos en este art!culo. ,l mtodo eac&01 pertenece al juego de funciones del )/=, de jQuery, cuyas particularidades ya comen%amos a anali%ar en el manual de jQuery. 3e trata de un mtodo para reali%ar acciones con todos los elementos que concuerdan con una seleccin reali%ada con la funcin jQuery Gtambin llamada funcin J01G. Qtil porque nos da una manera cmoda de iterar con elementos de la pgina y &acer cosas con ellos ms o menos complejas de una manera rpida y sin utili%ar muc&o cdigo para definir el bucle.
)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#. R ero qu pasa si queremos cambiar el fondo de los prrafos utili%ando colores alternosS ,n este caso no podemos &acerlo en una sola l!nea de cdigo, pero eac& nos vendr como anillo al dedo. +maginemos que tenemos una serie de prrafos en la pgina y queremos cambiar el color de fondo a los mismos, de manera que tengan colores alternos, para &acer dinmicamente un t!pico diseEo para los listados. ,ntonces podr!amos &acer lo siguiente(
'("p"*+eac,(function(i*4 if(iV8==0*4 '(t,is*+css("background-color"5 "#eee"*; 6else4 '(t,is*+css("background-color"5 "#ccc"*; 6 6*;
)on J0DpD1 tengo todos los prrafos. 2&ora con eac& puedo recorrerlos uno a uno. ara cada uno ejecutaremos la funcin que enviamos como parmetro a eac&01. ,n esa funcin recibo como parmetro una variable DiD que contiene el !ndice actual sobre el que estoy iterando. )on if0iT;CC<1 estoy viendo si el entero del !ndice DiD es par o impar. 3iendo par coloco un color de fondo al elemento y siendo impar coloco otro color de fondo. )omo se puede ver, con la variable Dt&isD tenemos acceso al elemento actual. ero /$/, que este elemento no es un objeto jQuery, as! que no podr!amos enviarle mtodos del frame"or# jQuery &asta que no lo e-pandamos con la funcin jQuery. 2s! pues, tenemos que &acer J0t&is1 para poder invocar al mtodo css01. or si no queda claro este punto mirar las diferencias entre estas dos l!neas de cdigo(
t,is+css("background-color"5 "#ccc"*; '(t,is*+css("background-color"5 "#ccc"*;
,n la primera l!nea no estar!amos e-tendiendo la variable t&is con las funcionalidades de jQuery, luego no funcionar!a. ,n la segunda l!nea, que es la que &ab!amos utili%ado en el script de ejemplo, s! estamos e-tendiendo la variable Dt&isD con la funcin jQuery. De ese modo, se puede invocar a cualquier mtodo de jQuery sobre los elementos. odemos ver un ejemplo en marc&a que &ace uso de ese script. ,ste ser!a su cdigo fuente completo(
27
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.
28
)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.
)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
29
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
)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
30
)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.
)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
31
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
32
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
33
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,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*;
)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 identificar el enlace se &ace J0t&is1.attr0DidD1, que devuelve el atributo DidD del enlace sobre el que se &i%o clic. 2 continuacin se puede ver el cdigo completo de esta pgina.
<,t-l
34
'("#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
35
36
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
37
Parte 3:
Selectores de jQuery
%omenzamos a analizar en pro-undidad las di-erentes maneras *ue tenemos en '(uer" de seleccionar con'untos de elementos de la p&gina) a tra+1s de distintos tipos de selectores.
38
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com J0DLidelementoD1 ??selecciona una etiqueta que tiene el atributo idCDidelementoD 'elector por clase: odemos indicar el nombre de una clase 0class de )331 y seleccionar todos los elementos a los que se &a aplicado esta clase. ara ello, como en )33, comen%amos colocando el carcter D.D y luego el nombre de la clase que deseamos seleccionar. J0D.miclaseD1 ??selecciona todos los elementos que tienen el atributo classCDmiclaseD 'elector por (arias clases: 3i lo deseamos, podemos indicar varias clases )33, para obtener todos los elementos que tienen esas clases aplicadas( todas al mismo tiempo. ,sto se consigue comen%ando por un D.D, igual que los selectores de clases, y luego otro D.D para separar las distintas clases que queremos utili%ar en el selector. J0D.clase7.clase;D1 ??selecciona los elementos que tienen classCDclase7 clase;D 'elector asterisco )*): @os sirve para seleccionar todos los elementos de la pgina. J0DUD1 ??selecciona todos los elementos que tiene la pgina +oncatenar (arios selectores distintos: or *ltimo, podemos utili%ar varios selectores, para obtener todas las etiquetas que cumplen uno de ellos. @o &ace falta que cumplan todos los selectores a la ve%, sino con que uno de ellos concuerde es suficiente. ara ello colocamos todos los selectores que deseamos, separados por una coma D,D. J0Ddiv,pD1 ??selecciona todos los elementos divisin y prrafo J0D.clase7,.clase;D1 ??selecciona los elementos que tienen la clase Dclase7D o Dclase;D J0DLmiid,.miclase,ul1 ??selecciona el elemento con idCDmiidD, los elementos con classCDmiclaseD y todas las listas 9'
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
39
#claracin: or cierto, comento una cosa que resulta para la mayor!a debe resultar obvia, pero qui%s alguien pueda cometer el error. ,n los ejemplos del art!culo anterior, escrib!amos los selectores entre comillas, porque un selector es una cadena de caracteres. ero en este caso, en la pgina del ejemplo, en el campo de te-to &ay que escribir los selectores sin las comillas. 3i ponemos las comillas en realidad ser!a como intentar &acer un selector que incluyese el carcter comillas D. ,sto es porque en el propio campo de te-to cualquier cosa que escribamos ya es una cadena de caracteres de por si.
ara &acer este ejemplo tenemos que utili%ar varios mtodos y funciones jQuery de los cuales, casi todos, ya &emos &ablado a lo largo del manual. >eamos el formulario que &emos creado en la pgina(
<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 escrito en el campo de te-to. ,so se &ace con la l!nea( elementos3eleccionados C J0selector,scrito1M 'uego, sobre el elemento o elementos seleccionados, invoco el mtodo fade/ut01, que sirve para ocultar elementos de la pgina. 2 fade/ut01 le paso dos parmetros, uno es la velocidad con la que tiene que &acer el efecto y otro es una funcin callbac#, a ejecutar slo en el momento que el efecto &aya concluido. ,so es con la l!nea( elementos3eleccionados.fade/ut0Dslo"D, function01V or *ltimo, en la funcin callbac# reali%amos una llamada al mtodo fade+n01 sobre el mismo objeto jQuery resultado de aplicar el selector anterior, que sirve para que los elementos ocultados se muestren de nuevo en la pgina. ,sto *ltimo con la l!nea( elementos3eleccionados.fade+n0Dslo"D1M ,n resumen, ocultando y mostrando luego los elementos de vuelta conseguimos ese parpadeo. 3i nos resulta e-traEo este cdigo, recordamos que en el :anual de jQuery de desarrollo"eb.com ya &emos publicado varios art!culos que aclaran los
40
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com puntos tratados en este ejemplo, como los efectos rpidos o las funciones callbac#.
41
<div id="div1" Dsto es una divisi#n con id="div1"<$div <div id="div8" class="ro0o" Dsto es una divisi#n con id="div8" y class="ro0o" y a2ui <b -eto una negrita<$b <$div <div id="div7" class="verde fondogris" Dsto es una divisi#n con id="div7" y class="verde fondogris"<$div <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
'elector parent , c-ild: )on el selectorr parent W c&ild podemos acceder a elementos que sean &ijos directos de otros. ara ello indicamos un selector como DparentD y un selector como Dc&ildD. @os seleccionar todos los elementos que son &ijos directos de parent y que concuerdan con el selector c&ild.
'("p b"* $$selecciona todas las eti2uetas % 2ue son ,i0as directas de los p>rrafos+ '("#capa ^"* $$selecciona todas las eti2uetas 2ue son ,i0as directas del ele-ento con id="capa"
42
Nota: la diferencia entre Dancestor descendantD y Dparent W c&ildD es que este *ltimo slo selecciona los &ijos directos. or ejemplo, en el AB:' siguiente( <p <b />rrafo<$b 2ue tiene alguna <b negrita<$b e <span class="algo" <i it>lica<$i <$span para seleccionar<$p J0Dp W bD1 seleccionar!a los mismos elementos que J0Dp bD1, porque en este caso todas las etiquetas B son &ijas directas de . ero en el caso de la itlica 0etiqueta +1, que est metida dentro del prrafo, pero dentro tambin de un span, J0Dp iD1 seleccionar!a la etiqueta + por ser descendiente de , pero J0Dp W iD1 no seleccionar!a la etiqueta +, por no ser &ija directa de .
'elector pre( . ne/t: )on este selector conseguimos acceder a las elementos que estn despus de otros, es decir, a las etiquetas que concuerdan con el selector Dne-tD, que se abren despus de cerrar las etiquetas que concuerdan con el selector DprevD.
'("p+parraforo0o W p"* $$Dsto selecciona los p>rrafos 2ue est>n despuYs de cual2uier p>rrafo 2ue tenga la clase "parraforo0o" '("i W b"* $$selecciona todas las negritas (eti2ueta %* 2ue ,ay despuYs de una it>lica (eti2ueta @*
'elector pre( 0 siblings: 3elecciona los elementos &ermanos que &ay a continuacin de los elementos que concuerden con el selector DprevD, que son del tipo que se especifica con el selector DsiblingsD. 'os elementos &ermanos son los que estn en el mismo contenedor y se encuentran en el mismo nivel de jerarqu!a.
'("#-iparrafo _ table"* $$selecciona los ele-entos I&%LD 2ue son ,er-anos del ele-ento con id="-iparrafo" '("#a8 _ div+clase"* $$selecciona los ele-entos ,er-anos del 2ue tiene el id="a8" 2ue sean eti2uetas :@] con la class="clase"+
43
44
Parte 4:
ero atencin, en el caso que invoquemos el mtodo attr sobre un objeto jQuery que contenga varios elementos a la ve%, attr01 en este caso devolver!a el valor del atributo del primero de los elementos que &aya en el objeto jQuery. 2dems, en caso que el elemento no tenga definido ese atributo al que se pretenda acceder, devolver!a undefined. >eamos un ejemplo, tambin simple, pero un poco ms elaborado. Benemos varios enlaces en la pgina, con este cdigo AB:'(
<a ,ref=",ttp:$$999+elpais+co-" title=":iario Dl /a3s" Dl /a3s<$a <br <a ,ref=",ttp:$$999+-o"illa+org" title="Nundaci#n =o"illa" =o"illa Nundation<$a <br <a ,ref=",ttp:$$es+openoffice+org$" title="Ciute de progra-as de oficina" <pen <ffice<$a
45
/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
,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.
46
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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
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*;
47
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
48
12todos offset() " position(): 2mbos mtodos devuelven la posicin de un elemento en la pgina. =eciben un objeto jQuery y devuelven la locali%acin del primer elemento que &aya en ese objeto jQuery. 'a posicin siempre se indica como valor de retorno del mtodo por medio de un objeto que tiene dos atributos, DtopD y DleftD, indicando los p!-eles que est separado de la esquina superior i%querda del documento. 'a diferencia entre estos dos mtodos es que offset01 indica la posicin del elemento real, teniendo en cuenta los mrgenes del elemento, lo que suele ser ms *til. or su parte, position01 indica la posicin donde &abr!a sido posicionado el elemento si no tuviera mrgenes, lo que a menudo no es la posicin real.
Nota: ara acceder a los valores top y left del objeto de retorno podemos &acer algo as!( posicion.eal = '("#idele-ento"*+offset(*; alert(posicion.eal+top*; alert(posicion.eal+left*;
49
)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.
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.
50
ara acabar, podemos ver este script funcionando en una pgina aparte.
Artculo por
51
Parte 5:
!entos en jQuery
!os e+entos son una parte -undamental en el desarrollo de aplicaciones enri*uecidas del lado del cliente. 5prendemos todo sobre los e+entos en '(uer".
2 la vista de este cdigo que trabaja con eventos podemos entender un poco mejor cmo funcionan en jQuery(
'("+-ienlace"*+click(function(-ievento*4 -ievento+prevent:efault(*; alert("!as ,ec,o clicnBo-o ,e ,ec,o prevent:efault5 no te llevarY al ,ref"*; 6*;
7. ,l evento se define sobre todos los elementos de un objeto jQuery. ,n este ejemplo se define sobre el objeto jQuery obtenido al invocar el selector D.mienlaceD1, que devolver!a todos los elementos que tienen el atributo class como DmienlaceD. or tanto definir un evento sobre un n*mero variable de elementos de la pgina que concuerden con ese selector. ;. ,l tipo de evento se define a partir de una funcin clic#01 o similares. ,-isten diferentes tipos de funciones que implementan cada uno de los eventos normales, como dblclic#01, focus01, #eydo"n01, etc. F. )omo parmetro en la funcin clic#01 o similares tenemos que enviar una funcin, con el cdigo que pretendemos ejecutar cuando se produ%ca el evento en cuestin. O. 'a funcin que enviamos por parmetro con el cdigo del evento, en este caso la funcin a ejecutar al &acer clic, tiene a su ve% otro parmetro que es el propio evento que estamos manejando. ,n el cdigo anterior tenemos la variable DmieventoD, que es el evento que se est ejecutando y a travs de esa variable tenemos acceso a varias propiedades y mtodos para personali%ar aun ms nuestros eventos. 4. )omo decimos, e-isten diversos tipos de propiedades y mtodos sobre el evento que recibo por parmetro. ,n este caso utili%amos mievento.preventDefault01 para evitar el comportamiento por defecto de un enlace. )omo sabemos, al pulsar un enlace el navegador nos lleva al &ref definido en la etiqueta 2 correspondiente, algo que evitamos al invocar a preventDefault01 sobre nuestro evento. )onven!a e-plicar todos estos puntos, aunque probablemente ya los conoc!amos, si es que &emos seguido con atencin este
52
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com :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.
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;
)on J0DLmicapaD1 obtenemos el objeto jQuery de la capa donde &ay que &acer clic. )on el mtodo clic#01 sobre ese objeto jQuery creamos el evento clic y la funcin que pasamos como parmetro contiene el cdigo a ejecutar cuando se &ace clic. 3e trata simplemente acumular 7 en la variable que cuenta los clics y luego se muestra un te-to en la capa de los mensajes. 'a programacin del evento para el doble clic se puede ver a continuacin(
'("#-icapa"*+dblclick(function(e*4 nu-:obleBlicsWW; '("#-ensa0e"*+,t-l(":oble Blic " W nu-:obleBlics*; 6*;
)omo se puede ver, es un cdigo muy similar al anterior. 3implemente que se define el evento con el mtodo dblclic#01. ,n el cdigo del evento acumulamos esta ve% 7 en la variable que cuenta el n*mero de dobles clic. 'uego en el mensaje mostramos el n*mero de dobleGclic. )on ello, al &acer clic o dobleGclic se mostrar el mensaje para ver la cuenta de clics y dobles clic reali%ados y podremos comprobar que siempre se producen dos clics antes de cualquier doble clic. ,so es todo, aunque para completar esta informacin, puedes encontrar a continuacin el cdigo completo de este ejemplo de uso de eventos en jQuery.
<,t-l <,ead <title Iraba0ando con eventos<$title <script src="++$02uery-1+O+1+-in+0s" <$script <script var nu-Blics = 0; var nu-:obleBlics = 0;
53
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
54
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ara generar un evento cuando el usuario &ace clic, en el momento que presiona el botn e independientemente de si lo suelta o no. 3irve tanto para el botn derec&o como el i%quierdo del ratn. mouseup() ara generar un evento cuando el usuario &a &ec&o clic y luego suelta un botn del ratn. ,l evento mouseup se produce slo en el momento de soltar el botn. mouseenter() ,ste evento se produce al situar el ratn encima de un elemento de la pgina. mouselea(e() ,ste se desata cuando el ratn sale de encima de un elemento de la pgina. mousemo(e() ,vento que se produce al mover el ratn sobre un elemento de la pgina. mouseout() ,ste evento sirve para lo mismo que el evento mouseout de $ava3cript. 3e desata cuando el usuario sale con el ratn de la superficie de un elemento. mouseo(er() 3irve para lo mismo que el evento mouseover de $avascript. 3e produce cuando el ratn est sobre un elemento, pero tiene como particularidad que puede producirse varias veces mientras se mueve el ratn sobre el elemento, sin necesidad de &aber salido. toggle() 3irve para indicar dos o ms funciones para ejecutar cosas cuando el usuario reali%a clics, con la particularidad que esas funciones se van alternando a medida que el usuario &ace clics.
55
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com focus() 3irve para definir acciones cuando se produce el evento focus de $avascript, cuando el elemento gana el foco de la aplicacin. ,sta enumeracin de los tipos de manejadores de eventos se completa con ejemplos y e-plicaciones adicionales en los siguientes art!culos del :anual de jQuery.
Artculo por
2l &acer clic en el elemento con idCDmielementoD se mostrarn las coordenadas P e H del lugar de la pgina donde se &i%o clic. 'as coordenadas se mostrarn como te-to en la propia capa sobre la que se &a &ec&o clic. 3e puede ver una pgina con este cdigo en funcionamiento. ,ste cdigo se puede modificar fcilmente para que se muestre las coordenadas del ratn al &acer clic en la pgina, independientemente de donde se &aga clic y no slo en un elemento en concreto.
56
)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
)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
57
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com al reali%ar acciones con el ratn, como clics, movimiento del puntero o posicionar el puntero sobre ciertos elementos. ,n este art!culo utili%aremos mouseenter y mouseleave, que son los eventos ms interesantes y *tiles si queremos detectar el momento en el que entramos con el puntero del ratn sobre un elemento o salimos de su superficie. 2dems, utili%aremos el objeto evento, que recibe la funcin con la que implementamos el manejador del evento, que tiene diversos datos *tiles sobre el evento que se acaba de ejecutar. ,n este art!culo mostraremos cmo averiguar la posicin del ratn en el momento de producirse el evento, que podemos e-traer con las propiedades pageP y pageH del objeto evento.
Nota: ara el que llegue aqu! sin &aber le!do otras informaciones sobre eventos en jQuery, le recomendamos comen%ar la lectura por el art!culo de ,ventos en jQuery.
5.1.1.- /)ecto de tip simple en jQuery con los eventos mouseenter y mouseleave
,n el art!culo anterior mostramos cmo averiguar la posicin del ratn al &acer clic en un elemento. 2s! que a&ora vamos a utili%ar esos conocimientos para &acer un sencillo ejemplo de eventos donde crearemos un t!pico efecto de tip. ara reali%ar este efecto tendremos dos elementos, el primero ser un elemento visible en todo momento y el segundo ser un elemento oculto, el tip, que se mostrar slo al pasar el ratn sobre el primer elemento. ara reali%ar cosas cuando el ratn entra y sale de un elemento, utili%aremos los manejadores de eventos de jQuery mouseenter y mouseleave, que se producen al entrar con el ratn sobre un elemento y al salir del elemento respectivamente. 2s! pues, los eventos mouseenter y mouseleave los tendremos que crear sobre el elemento que permanece siempre visible, mostrando y ocultando la capa que contiene el tip. >eamos antes que nada el AB:' que tendremos, con el elemento visible y su tip.
<div id="ele-ento1" style="background-color: #ccccff; padding: Ppx;" /asa el rat#n por enci-a de este "ele-ento1"+<$div <div class="tip" id="tip1" Dsto es para explicar algo sobre el ele-ento1<$div
'os estilos importantes aqu! son display( noneM 0para que el elemento est oculto inicialmente1 y position( absoluteM 0para que lo podamos posicionar libremente por la pgina y sin afectar a otros elementos1. >eamos a&ora el cdigo del evento mouseenter(
'("#ele-ento1"*+-ouseenter(function(evento*4 '("#tip1"*+css("left"5 evento+pageM W P*; '("#tip1"*+css("top"5 evento+pageJ W P*; '("#tip1"*+css("display"5 "block"*; 6*;
3implemente cambiamos las propiedades de )33 DleftD y DtopD de la capa del tip, asignando valores a travs de evento.pageP y evento.pageH, las propiedades del objeto evento que nos dan la posicin del ratn. )on esto situamos la capa del tip en un lugar pr-imo a donde estaba el ratn. 'uego se cambia el atributo de )33 display de la capa del tip, al valor Dbloc#D, que sirve para que ese elemento se vea en la pgina. 2&ora veamos el evento mouseleave, para reali%ar acciones cuando sacamos el ratn de encima de un elemento.
'("#ele-ento1"*+-ouseleave(function(e*4 '("#tip1"*+css("display"5 "none"*; 6*;
3implemente cambiamos la propiedad )33 display del tip, para el valor DnoneD, que &ace que esa capa desapare%ca de la pgina. >eamos el cdigo completo de una pgina que implementa este mecanismo para producir tips en jQuery.
58
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
59
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,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.
,sta funcin recibe el evento y escribe en una capa el tipo de evento, que se consigue con la propiedad type del objeto evento, y luego un cdigo de la tecla pulsada, que se consigue con la propiedad "&ic& del objeto evento.
Nota: el tipo de evento no no &ab!amos visto todav!a, pero es otra de las propiedades que encontramos en el objeto evento que recibe la funcin que tiene el cdigo a ejecutar por el evento. ,sta propiedad type simplemente es un string con la cadena que identifica el tipo de evento que se est procesando 0D#eydo"nD, D#eyupD, Dclic#D o cualquier otro1. 'a tecla pulsada, que se obtiene con la propiedad "&ic&, la trataremos con detalle dentro de poco.
2&ora podr!amos &acer que cualquier evento de teclado invoque esta funcin con el cdigo(
'(docu-ent*+keypress(operaDvento*; '(docu-ent*+keydo9n(operaDvento*; '(docu-ent*+keyup(operaDvento*;
)omo &emos asociado los eventos al objeto document de $avascript, estos eventos se pondrn en marc&a cada ve% que se pulse una tecla, independientemente de dnde est el foco de la aplicacin 0o donde est escribiendo el usuario1. ,sto se puede ver en marc&a en una pgina aparte. )reo que merece la pena presentar el cdigo completo del anterior ejemplo(
<,t-l <,ead <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
60
2&ora definiremos con jQuery el evento #eypress, para mostrar la tecla pulsada.
'("#-itexto"*+keypress(function(e*4 e+prevent:efault(*; '("#loescrito"*+,t-l(e+9,ic, W ": " W Ctring+fro-B,arBode(e+9,ic,**; 6*;
)on e.preventDefault01M &acemos que no se escriba nada en el te-tarea, osea, estamos in&ibiendo el comportamiento &abitual del evento, que es escribir las teclas en el te-tarea, que no tiene muc&o que ver con nuestro ejemplo, pero que est bien para ver cmo funciona. 'uego escribimos en la capa con id DloescritoD el cdigo de 9nicode de esa tecla y luego su conversin a un carcter normal, a travs de la funcin esttica de la clase 3tring from)&ar)ode01. ,l cdigo completo del ejercicio es el siguiente.
<,t-l <,ead <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
61
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
,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.
)omo primer parmetro enviamos el tipo de evento que queremos definir. 3i se desea, podr!amos especificar varios tipos de eventos separados por un espacio y as! asignar un mismo manejador de evento para varios tipos de situaciones. )omo segundo parmetro se indica el manejador o funcin a ejecutar cuando se produ%ca el evento, igual que se defin!a con los mtodos clic#01, mouseleave01 o similares, para un tipo de evento en concreto. 9n ejemplo sencillo de este modo de definir eventos es el siguiente(
'("+-iclase"*+bind("click"5 function(*4 alert("!as ,ec,o clic"*; 6*;
2l &acer clic en cualquier elemento de la clase )33 DmiclaseD, se mostrar un mensaje en una caja de alerta. 2&ora podemos ver cmo se crear!a una funcin que se asignar!a para varios tipos de eventos a la ve%.
'("p"*+bind("click -ouseenter -ouseleave"5 function(e*4 if ('(t,is*+css("color"*1="rgb(8P05 1005 0*"*
62
)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.
2s! &emos eliminado todos los eventos asociados con los prrafos de la pgina. ero qui%s una situacin ms &abitual es que deseemos eliminar slo los eventos de un tipo y para ello simplemente tenemos que indicar como parmetro ese tipo concreto de evento deseado.
'("p"*+unbind("click"*;
,sta sentencia provocar se descarten que todos los manejadores de eventos asociados al clic sobre los prrafos. )omo se puede entender, sobre esos elementos no ocurrir nada en el momento en que &agamos clic. 2dems, en el supuesto que otros scripts $avascript &ayan definido alg*n manejador de evento clic sobre alguno de los elementos, unbind01 tambin eliminar esos posibles eventos. ara no eliminar todos los manejadores de eventos de un tipo determinado podemos especificar la funcin que deseamos descartar en la lista de parmetros de la llamada a unbind01. ,sto funcionar!a en un esquema de cdigo como el siguiente.
var funcion=ane0ador = function(e* 4 $$ cual2uier c#digo 6 '("p"*+bind()click)5 funcion=ane0ador*; '("p"*+unbind()click)5 funcion=ane0ador*;
3iempre tendremos que colocar la funcin dentro de una variable, para poder referirnos a esa misma variable tanto al crear el evento con bind01, como al descartarlo con unbind01.
63
,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
,st definiendo un evento Dclic#D sobre todos los elementos de la clase 0class de )331 DmiclaseD. Aasta aqu! ya debemos de conocer todos esta el mtodo bind01, por lo que no deber!a &aber ning*n problema, pero a&ora veamos esta misma sentencia pero utili%ando el mtodo live01.
'("+-iclase"*+live("click"5 -ifuncion*;
,sto sirve para lo mismo que &ac!amos con bind01, pero adems afectar a todos los elementos que puedan tener la clase DmiclaseD en el futuro y no slo en el momento que se ejecuta esa sentencia. R)mo puede &aber otros elementos de esa clase en el futuroS ues simplemente porque los crees dinmicamente con jQuery o porque asignes dinmicamente una clase )33, u otro atributo, a un elemento que no la ten!a, o que traigas por 2jaun contenido y que tenga elementos que casen con el selector, etc.
64
3in varias divisiones donde todas menos una tienen la clase DverdeD. >eamos como puedo asignar un evento de tipo Dclic#D por medio del mtodo live01(
'("+verde"*+live("click"5 function(e*4 var ele- = '(t,is*; if (ele-+,t-l(*1="!iciste clic11"*4 ele-+,t-l("!iciste clic11"*; 6else4 ele-+,t-l("!iciste de nuevo clic11"*; 6 6*;
,s un evento que permite cambiar el te-to del elemento cuando se pulsa sobre l y lo aplicamos sobre todos los elementos de la clase DverdeD. 2&ora tenemos un par de botones para &acer cosas con la pgina y cambiarla un poco.
<input type=button value="insertar nuevo ele-ento verde" id="insertarele-" <input type=button value="/oner la clase verde en el div 2ue no la tiene" id="ponerclaseverde"
)uando se pulse el primer botn, voy a insertar un nuevo elemento en la pgina al que le pondremos la clase DverdeD. ,so lo consigo con este cdigo(
'("#insertarele-"*+click(function(e*4 var nuevoDle-ento = '()<div class="verde" Dle-ento creado e insertado dina-ica-ente<$div )*; nuevoDle-ento+appendIo('(docu-ent+body**; 6*;
'os elementos que se creen al apretar ese botn tendrn la clase verde y por tanto la funcionalidad especificada con el mtodo live01 para definir el evento clic. ,l segundo botn asigna la clase DverdeD al elemento D+> del principio, que no la ten!a, lo que conseguimos as!(
'("#ponerclaseverde"*+click(function(e*4 '("#noverde"*+addBlass("verde"*; 6*;
2l asignar esa clase al elemento tambin se aplicar la funcionalidad definida para el evento clic# con live01. ,sto lo podemos ver en funcionamiento en una pgina aparte. ara acabar, dejamos el cdigo completo de esta pgina de ejemplo de live01 en jQuery.
<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
65
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
Parte ":
66
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
,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.
2 modo de ejemplo, podemos ver a continuacin un cdigo fuente de un plugin muy sencillo(
0?uery+fn+desaparece = function(* 4 t,is+eac,(function(*4 ele- = '(t,is*;
67
,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
,stas reglas sern suficientes para plugins sencillos, aunque qui%s en escenarios ms complejos en adelante necesitaremos aplicar otras reglas para asegurarnos que todo funcione bien.
68
)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#.
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;
69
Artculo por
)on eso queremos conseguir que a todos los te-tareas del documento AB:' les apare%ca una informacin al lado con el
70
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com n*mero de caracteres que tenga el te-tarea escrito dentro. ,sa cuenta de caracteres debe mostrarse nada ms cargarse la pgina y actuali%arse cuando se escriba algo dentro. Bodo eso se automati%ar, para que no tengamos que &acer nada, salvo la anterior llamada al plugin. ,ntonces, dentro del plugin tenemos que &acer varias cosas. 7. 9n bucle con eac& para recorrer todos los objetos que pueda &aber en el objeto jQuery que reciba el mtodo para activar este plugin. ,ste paso es igual en todos los plugins. ;. Dentro de ese bucle podemos iterar con todos los elementos que &aya en el objeto jQuery, que vamos a suponer son te-tareas. >amos a crear un nuevo elemento D+> sobre la mac&a y vamos a iniciarlo con el te-to de la cuenta de caracteres actual del te-tarea. ,se elemento creado Don t&e flyD lo aEadiremos al cuerpo de la pgina, justo despus de la etiqueta del te-tarea. F. 2dems, &aremos un evento, para que cuando el usuario escriba algo en el te-tarea, el te-to con la cuenta de caracteres se actualice automticamente. ,stos tres pasos ser!an un resumen del funcionamiento del plugin, cuyo cdigo completo podemos ver a continuacin.
$$creo el plugin cuentaBaracteres 0?uery+fn+cuentaBaracteres = function(* 4 $$para cada uno de los ele-entos del ob0eto 0?uery 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*;
,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*
71
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com ,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 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
Artculo por
72
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com puedan funcionar en cualquier mbito. ero adems tenemos una serie de patrones de desarrollo que debemos seguir de manera opcional para facilitarnos la vida a nosotros mismos y a otros desarrolladores que puedan utili%ar nuestros plugins. 9na de las tareas t!picas que reali%aremos es la creacin de un sistema para cargar opciones con las que configurar el comportamiento de los plugins. ,stas opciones las recibir el plugin como parmetro cuando lo invocamos inicialmente. @osotros, como desarrolladores del plugin, tendremos que definir cules van a ser esas opciones de configuracin y qu valores tendrn por defecto. 'a ayuda del sitio de jQuery para la creacin de plugins sugiere la manera con la que reali%ar el proceso de configuracin del plugin, por medio de un objeto de DoptionsD, que nos facilitar bastante la vida.
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.
'a funcin principal del plugin recibe dos parmetros, uno Dcualquier)osaD y otro DopcionesD. ,l primero supongamos que es algo que necesita el plugin, pero la configuracin, que es lo que nos importa a&ora, se &a recibido en el parmetro DopcionesD.
73
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com Ha dentro de la funcin del plugin, se define el objeto con las opciones de configuracin, con sus valores por defecto, en una variable llamada DconfiguracionD. ,n la siguente l!nea se me%clan los datos de las opciones de configuracin por defecto y las recibidas por el plugin al iniciali%arse. 'uego podremos acceder por medio de la variable DconfiguracionD todas las opciones del plugin que se va a iniciar.
Nota: ,l modo en cmo se me%clan los datos por medio de e-tend01, podis revisar en el art!culo sobre el mtodo jQuery.e-tend01.
/ 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(*;
Bodas esas opciones se definen, junto con los valores por defecto que van a tomar, al crear el cdigo del plugin. ,n el
74
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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 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*;
,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
75
,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
76
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com +gual que en cualquier lenguaje de programacin, podemos utili%ar funciones para estructurar el cdigo de nuestros plugins. Del mismo modo, en los plugins podemos tener variables, donde guardar datos u objetos que tengan valide% dentro del mbito de ese plugin. Bodo ello nos ayudar bastante a &acer un cdigo ms claro, autnomo y compacto. ,n este art!culo vamos a mostrar cmo ser!a el esquema de programacin de un plugin jQuery un poco ms avan%ado, que incluye las mencionadas variables y funciones DlocalesD 0o DprivadasD, como las queramos llamar1. >eremos tambin cmo es posible acceder a esas variables y funciones desde cualquier parte del flujo de cdigo de un plugin, incluso desde el cdigo de otras funciones, como los eventos.
ara definir esas variables y funciones locales al plugin, de manera que estn accesibles dentro del plugin y a su ve% tengan acceso a todos los datos del mismo, debemos colocarlas dentro de la iteracin que se &ace con t&is.eac&01. )omo se puede entender del cdigo del plugin anterior, todas esas variables y funciones se pueden invocar o acceder en cualquier parte, siempre y cuando estemos dentro del t&is.eac&01, donde fueron creadas. ,ste plugin, aunque no valga para muc&o, lo &emos publicado y se puede ver en marc&a en una pgina aparte.
77
Nota: 2ntes del t&is.eac&01 se pueden colocar tambin variables, pero tenemos que tener en cuenta que e-istir una misma copia de esa variable para todos los elementos donde se est aplicando el plugin. >eamos el siguiente AB:'. <div id="este:iv" Dste div <$div <span class="-isspan" span1<$span <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
78
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
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 aqu! son accesibles desde cualquier parte de este bloque.
$$variables locales al plugin var -iB,eck = '(t,is*;
79
,l cdigo est convenientemente comentado para que se pueda entender mejor. ero lo que queremos mostrar en este caso es que &emos creado dos funciones dentro del cdigo del plugin( activar01 y desactivar01. ,sas dos funciones, al estar dentro del bloque t&is.eac&01, se pueden acceder desde cualquier parte del plugin y comparten el mismo mbito de variables que el propio plugin, luego podremos acceder desde ellas a cualquier variable definida en el bloque t&is.eac&01. ara que quede un poco ms clara la estructura completa del plugin, coloco a continuacin su cdigo completo(
0?uery+fn+c,eckbox/ersonali"ado = function(opciones* 4 $$opciones de configuraci#n por defecto
80
81
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#bo- personali%ados se crear!an con las opciones por defecto.
'("#otro"*+c,eckbox/ersonali"ado(4 activo: false5 colorIextos: 4 activo: "#f80"5 pasivo: "#U8a" 65 i-agen: 4 activo: )i-ages$9eat,erFcloudy+png)5 pasivo: )i-ages$9eat,erFrain+png) 65 textos: 4 activo: )%uen tie-po :*)5 pasivo: )%uena cara ;*) 65 css&dicional: 4 border: "1px solid #ddP"5 9idt,: "100px" 65 na-eB,eck: "buenFtie-po" 6*;
,n este segundo caso de invocacin al plugin estamos convirtiendo en un c&ec#bo- personali%ado el *ltimo 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
82
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
83
Parte &:
'ectos en jQuery
!os e-ectos son una de las partes m&s atracti+as del -ramewor. " *ue permitir&n dotar de dinamismo a nuestra p&gina) hacerla m&s atracti+a " en de-initi+a) me'orar la e2periencia del usuario.
Propiedades: ,ste es el *nico parmetro que de debe indicar obligatoriamente y es para indicar qu atributos )33 queremos actuali%ar, con sus nuevos valores. 3e tiene que indicar en notacin de objeto, de manera similar a como se puede indicar en el mtodo css01 de jQuery y slo permite el cambio de propiedades )33 que tengan valores numricos. or ejemplo, podr!amos cambiar la anc&ura de un borde, pero no el tipo de borde 0si queremos que sea slido, con l!nea de puntos, etc.1 porque no tiene valores numricos. Ieneramente, si no especificamos otra cosa los valores se entienden en p!-eles. 'os nuevos valores se pueden indicar de manera absoluta, o incluso de manera relativa, con un string del tipo D[C4<D, que indica que se debe aumentar en 4< ese atributo. ,n los ejemplos de este y siguientes art!culos que publiquemos en desarrollo"eb.com veremos varias maneras de indicar las propiedades para reali%ar varias animaciones. 6uracin: 3irve para indicar la duracin de la animacin, en un valor numrico en milisegundos, o en un valor de cadena de caracteres como DfastD o Dslo"D. Funcin de animacin: ,sta funcin sirve para indicar cmo se reali%ar la animacin, si ms suave al principio y rpida al final, o igual de rpida todo el tiempo. ,s decir, la velocidad con la que se reali%ar el cambio de valores en diferentes puntos
84
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com de dentro de la animacin. ,n principio, los dos posibles valores son Ds"ingD 0por defecto1 y DlinearD. +allback: /frece la posibilidad de indicar una funcin a ejecutarse cuando se &a terminado totalmente de producir el efecto. ,s decir, una funcin que se invoca cuando se &a llegado al valor final de los atributos )33 que se solicitaron cambiar.
@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* <$script <$,ead <body <,1 style="border-botto-: 1px solid #ff8800; font-si"e: 1Ppt;" &ni-acion 0?uery<$,1 Iraba0ando con el -Ytodo ani-ate: <a ,ref="#" id="ani-ar" &ni-ar<$a <br
85
86
)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(*;
)omo se puede ver, este 3,',)B tiene diferentes / B+/@ con algunos valores de opacidad. 'os valores 0atributos value de los / B+/@1 son n*meros entre < y 7. 2&ora vamos a mostrar el cdigo de un evento que asociaremos a este campo 3,',)B, para ejecutar acciones cuando el usuario cambia el valor que aparece en l. )uando el 3,',)B cambie, queremos actuali%ar el valor de opacity de los elementos A7 de la pgina.
'("#selopacidad"*+c,ange(function(e*4 var opacidadFdeseada = e+target+optionsRe+target+selected@ndexS+value '(",1"*+fadeIo(10005opacidadFdeseada*; 6*;
,n este cdigo estamos definiendo un evento Donc&angeD sobre el 3,',)B anterior. ,n la primera l!nea de la funcin se est e-trayendo la opacidad deseada y para ello se accede a la propiedad target del objeto evento que se recibe en la funcin que enviamos al mtodo c&ange01.
Nota: en el objeto evento, target es una referencia al objeto del D/: sobre el que se est codificando el evento. ,s decir, en este ejemplo, e.target es una referencia al campo 3,',)B sobre el que estamos definiendo el evento. )on e.target.optionsXY tengo el array de options que &ay dentro de ese 3,',)B. )on e.target.selected+nde- obtengo el !ndice del elemento seleccionado, para poder acceder a la opcin seleccionada a travs del array de options. )on e.target.optionsXe.target.selected+nde-Y.value estamos accediendo a la propiedad value del / B+/@ que se encontraba seleccionado. 2s! accedemos a la opacidad deseada que quer!amos aplicar.
9na ve% tenemos esa opacidad deseada, recogida del value del / B+/@ seleccionado, podemos ver la siguiente l!nea de cdigo, en la que &acemos el fadeBo01. >eamos que fadeBo01 recibe en principio dos mtodos. ,l primero es la duracin en milisegundos del ejemplo. ,l segundo es el valor de opacidad que queremos aplicar.
87
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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.
88
89
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com '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.
'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 .
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
90
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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, noS ero claro que a partir de aqu! la cosa se puede complicar todo lo que deseemos, o necesitemos. ,n el pr-imo art!culo empe%aremos a e-plicar el modos e-istentes en jQuery para alterar las colas de efectos, para &acer cosas como detenerlas, anali%arlas, cargar funciones de otros tipos para ejecutar en la cola, etc.
Artculo por
>eremos un ejemplo sencillo de esta posible invocacin del mtodo queue01 y adems, aparte vamos a ver que se pueden encolar funciones en la cola tantas veces como queramos, aunque la cola est en marc&a. ,l efecto es que esas funciones encoladas posteriormente se quedarn al final de la cola y se ejecutarn cuando el resto de la cola se &aya ejecutado.
91
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 3i lo deseamos, antes de ponernos a comentar este ejemplo, podemos ver el ejercicio en marc&a que vamos a construir. Benemos el siguiente AB:', que incluye varios elementos(
<button id="botonfade" =uestra y luego oculta con fade@n y fade<ut<$button <button id="botonslide" =uestra y luego oculta con slideKp slide:o9n<$button <button id="botonta-anocola" =uestra el nX-ero de funciones en cola a,ora -is-o<$button <div id="-ensa0e" Dn estos -o-entos no ,ay funciones de efectos en la cola por defecto+ <br <span class="notar" /ulsa repetidas veces los botones de arriba para ir -etiendo funciones en la cola<$span <$div <div id="-icapa" <$div
)omo se puede ver tenemos tres botones. 9no sirve para agregar funciones en la cola para &acer efectos fade+n01 y fade/ut01, el segundo para agregar a la cola funciones de efectos slide9p01 y slideDo"n01 y el tercero para mostrar la longitud de la cola en un momento dado. 'uego tenemos una capa para mostrar mensajes y otra con idCDmicapaD que ser el D+> que vamos a animar con los efectos. 2s! podremos definir el evento onclic# del primer botn(
'("#botonfade"*+click(function(*4 capa = '("#-icapa"*; capa+fade<ut(P00*; capa+fade@n(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
92
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
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
94
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com 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*;
)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
95
Tu mejor ayuda para aprender a hacer webs www.desarrolloweb.com objetos en uno de ellos. >amos a ofrecer una referencia rpida para el mtodo jQuery.e-tend01, que nos ofrece una utilidad para me%clar me%clar varios objetos en uno, es decir, colocar los contenidos de todos esos objetos en uno de ellos. ,l mtodo e-tend pertenece a la clase jQuery, y se invoca directamente sobre ella, como si fuera un mtodo esttico de programacin orientada a objetos. )omo en jQuery la variable J es un atajo de la variable jQuery, podr!amos invocar a este mtodo con estas dos posibilidades de cdigo(
0?uery+extend(x5 y5 "*;
/ bien(
'+extend(x5 y5 "*;
,stos dos ejemplos de cdigo &ar!an e-actamente lo mismo, colocar en el objeto D-D todos los contenidos de los objetos D-D, DyD y D%D. ,l mtodo e-tend01 puede recibir cualquier n*mero de parmetros y siempre pondr todos los contenidos de los objetos en el objeto recibido en el primer parmetro.
,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
96