Manual Jquery

Tu mejor ayuda para aprender a hacer webs
www.desarrolloweb.com
Manual de jQuery
Autores del manual
Este manual ha sido realizado por los siguientes colaboradores de DesarrolloWeb.com:
Miguel Angel Alvarez
Director de DesarrolloWeb.com
http://www.desarrolloweb.com
(6 captulos!
Manual de Jquery: http://www.desarrolloweb.com/manuales/manualjquery.html
" #os manuales de DesarrolloWeb.com tienen el copyright de sus autores. $o reproducir sin autorizaci%n.
&
Introduccin a jQuery
'ien(enidos al manual sobre j)uery *ue (amos a publicar en DesarrolloWeb.com+ con el *ue
pretendemos clari,icar a los usuarios el m-todo de trabajo y programaci%n de aplicaciones del
lado del cliente+ compatibles con todos los na(egadores m.s comunes.
Qu es jQuery
/ara simpli,icar+ podramos decir *ue j)uery es un ,ramewor0 1a(ascript+ pero *uiz.s muchos
de los lectores se preguntar.n *u- es un ,ramewor0. /ues es un producto *ue sir(e como base
para la programaci%n a(anzada de aplicaciones+ *ue aporta una serie de ,unciones o c%digos
para realizar tareas habituales. /or decirlo de otra manera+ ,ramewor0 son unas libreras de
c%digo *ue contienen procesos o rutinas ya listos para usar. #os programadores utilizan los
,ramewor0s para no tener *ue desarrollar ellos mismos las tareas m.s b.sicas+ puesto *ue en
el propio ,ramewor0 ya hay implementaciones *ue est.n probadas+ ,uncionan y no se
necesitan (ol(er a programar.
!ota:si no sabes lo *ue es 1a(ascript seguramente no te interesar. este artculo+ pero puedes aprenderlo
tambi-n en DesarrolloWeb.com: )u- es 1a(ascript
/or ejemplo+ en el caso *ue nos ocupa+ j)uery es un ,ramewor0 para el lenguaje 1a(ascript+
luego ser. un producto *ue nos simpli,icar. la (ida para programar en este lenguaje. 2omo
probablemente sabremos+ cuando un desarrollador tiene *ue utilizar 1a(ascript+ generalmente
tiene *ue preocuparse por hacer scripts compatibles con (arios na(egadores y para ello tiene
*ue incorporar mucho c%digo *ue lo 3nico *ue hace es detectar el browser del usuario+ para
hacer una u otra cosa dependiendo de si es 4nternet E5plorer+ 6ire,o5+ 7pera+ etc. j)uery es
donde m.s nos puede ayudar+ puesto *ue implementa una serie de clases (de programaci%n
orientada a objetos! *ue nos permiten programar sin preocuparnos del na(egador con el *ue
nos est. (isitando el usuario+ ya *ue ,uncionan de e5acta ,orma en todas las plata,ormas m.s
habituales.
8s pues+ este ,ramewor0 1a(ascript+ nos o,rece una in,raestructura con la *ue tendremos
mucha mayor ,acilidad para la creaci%n de aplicaciones complejas del lado del cliente. /or
ejemplo+ con j)uery obtendremos ayuda en la creaci%n de inter,aces de usuario+ e,ectos
din.micos+ aplicaciones *ue hacen uso de 8ja5+ etc. 2uando programemos 1a(ascript con
j)uery tendremos a nuestra disposici%n una inter,az para programaci%n *ue nos permitir.
hacer cosas con el na(egador *ue estemos seguros *ue ,uncionar.n para todos nuestros
(isitantes. 9implemente debemos conocer las libreras del ,ramewor0 y programar utilizando
las clases+ sus propiedades y m-todos para la consecuci%n de nuestros objeti(os.
8dem.s+ todas estas (entajas *ue sin duda son muy de agradecer+ con j)uery las obtenemos
de manera gratuita+ ya *ue el ,ramewor0 tiene licencia para uso en cual*uier tipo de
plata,orma+ personal o comercial. /ara ello simplemente tendremos *ue incluir en nuestras
p.ginas un script 1a(ascript *ue contiene el c%digo de j)uery+ *ue podemos descargar de la
propia p.gina web del producto y comenzar a utilizar el ,ramewor0.
El archi(o del ,ramewor0 ocupa unos :6 ;'+ lo *ue es bastante razonable y no retrasar.
mucho la carga de nuestra p.gina (si nuestro ser(idor en(a los datos comprimidos+ lo *ue es
bastante normal+ el peso de j)uery ser. de unos &< ;'!. 8dem.s+ nuestro ser(idor lo en(iar.
al cliente la primera (ez *ue (isite una p.gina del sitio. En siguientes p.ginas el cliente ya
tendr. el archi(o del ,ramewor0+ por lo *ue no necesitar. trans,erirlo y lo tomar. de la cach-.
=
2on lo *ue la carga de la p.gina s%lo se (er. a,ectada por el peso de este ,ramewor0 una (ez
por usuario. #as (entajas a la hora de desarrollo de las aplicaciones+ as como las puertas *ue
nos abre j)uery compensan e5traordinariamente el peso del pa*uete.
Ventajas de jQuery con respecto a otras alternativas
Es importante comentar *ue j)uery no es el 3nico ,ramewor0 *ue e5iste en el mercado.
E5isten (arias soluciones similares *ue tambi-n ,uncionan muy bien+ *ue b.sicamente nos
sir(en para hacer lo mismo. 2omo es normal+ cada uno de los ,ramewor0s tiene sus (entajas e
incon(enientes+ pero j)uery es un producto con una aceptaci%n por parte de los
programadores muy buena y un grado de penetraci%n en el mercado muy amplio+ lo *ue hace
suponer *ue es una de las mejores opciones. 8dem.s+ es un producto serio+ estable+ bien
documentado y con un gran e*uipo de desarrolladores a cargo de la mejora y actualizaci%n del
,ramewor0. 7tra cosa muy interesante es la dilatada comunidad de creadores de plugins o
componentes+ lo *ue hace ,.cil encontrar soluciones ya creadas en j)uery para implementar
asuntos como inter,aces de usuario+ galeras+ (otaciones+ e,ectos di(ersos+ etc.
>no de los competidores de j)uery+ del *ue hemos publicado ya en DesarrolloWeb.com un
amplio manual para programadores+ es ?ootools+ *ue tambi-n posee (entajas similares. 7s
dejo el enlace al ?anual de ?ootools+ *ue tambi-n puede ser interesante+ por*ue seguramente
lo tengamos e5plicado con mayor detalle *ue j)uery.
jQuery, es para mi?
9i est.s interesado en enri*uecer tu p.gina web con componentes de la llamada Web =.@+
como e,ectos din.micos+ 8ja5+ interacci%n+ inter,aces de usuario a(anzadas+ etc.+ j)uery es
una herramienta imprescindible para desarrollar todas estas cosas sin tener *ue complicarte
con los ni(eles m.s bajos del desarrollo+ ya *ue muchas ,uncionalidades ya est.n
implementadas+ o bien las libreras del ,ramewor0 te permitir.n realizar la programaci%n
mucho m.s r.pida y libre de errores.
8hora bien+ todas estas mejoras de la web =.@+ *ue en un principio puede ser muy atracti(as+
tambi-n tienen un coste en tiempo de desarrollo de los proyectos. 9in un ,ramewor0 como
j)uery+ el tiempo de creaci%n y depuraci%n de todos esos componentes din.micos sera mucho
mayor+ pero aun as nadie dice *ue todo sea instalar el sistema y empezar correr. 9in embargo+
lo m.s complicado de j)uery es aprender a usarlo+ igual *ue pasa con cual*uier otro
,ramewor0 1a(ascript. Ae*uerir. del desarrollador habilidades a(anzadas de programaci%n+ as
como el conocimiento+ al menos b.sico+ de la programaci%n orientada a objetos. >na (ez
aprendido las (entajas de utilizarlo compensar.n m.s *ue de sobra el es,uerzo. Esperamos
*ue con este ?anual de j)uery+ *ue (amos a publicar en DesarrolloWeb.com puedas aprender
lo necesario para desarrollar tus propios componentes din.micos en 1a(ascript con los *ue
enri*uecer tus aplicaciones.
/odemos conocer j)uery accediendo a la p.gina de inicio del ,ramewor0 1a(ascript:
http://j*uery.com/
Artculo por Miguel Angel Alvarez
B
Demo muy simple de uso de jQuery
2on objeti(o de *ue los lectores puedan hacerse una r.pida idea de las posibilidades de
j)uery+ escribiendo unas bre(simas lneas de c%digo 1a(ascript+ (amos a publicar un par de
ejemplos bien simples *ue nos ilustren+ pero sin complicarnos demasiado. $os ser(ir.n para la
introducci%n a j)uery *ue estamos publicando en el ?anual de j)uery.
#a idea de este artculo no es e5plicar las ,uncionalidades *ue (amos a demostrar+ sino (er el
poco c%digo *ue hemos tenido *ue escribir para realizar unos scripts con dinamismos sencillos.
)uiz.s los scripts en si no digan mucho a un lector poco e5perimentado+ pero los *ue ya han
tenido contacto con los pormenores *ue hay *ue seguir para hacer estos e,ectos+ de manera
*ue sean compatibles con todos los na(egadores+ sabr.n *ue j)uery nos ha simpli,icado
mucho nuestra tarea.
8s pues+ no te preocupes demasiado con los detalles de estos c%digos+ *ue los e5plicaremos
en DesarrolloWeb.com m.s adelante con detalle.
Demo 1 de jQuery
/ara empezar (amos a (er este ejemplo+ donde tenemos dos botones y un te5to. 8l pulsar un
bot%n+ cambiaremos el te5to y al pulsar el otro pondremos otro te5to distinto.
/odemos (er el ejemplo en marcha en una p.gina aparte.
En este ejemplo tenemos una capa *ue tiene este c%digo
Cdi( idDEcapaE styleDEpadding: &@p5F bac0groundGcolor: H,,II@@EJKaz clic en un bot%nC/di(J
#uego tenemos dos botones con estos c%digos:
Cinput typeDEbuttonE (alueDE'ot%n 8E onclic0DEL(MHcapaM!.html(MKas hecho clic en el bot%n CbJ8C/bJM!EJ
Cinput typeDEbuttonE (alueDE'ot%n 'E onclic0DEL(MHcapaM!.html(MAecibido un clic en el bot%n CbJ'C/bJM!EJ
2omo se puede (er+ en los botones hay de,inidos un par de e(entos onclic0 (uno en cada uno!
*ue ejecutan una instrucci%n 1a(ascript cuando se hace clic sobre ellos. #a instrucci%n est. en
1a(ascript+ pero hace uso de algunas herramientas disponibles en j)uery para trabajo con los
elementos de la p.gina. En este caso+ por e5plicarlo r.pidamente+ se hace una selecci%n del
elemento D4N de la capa y luego se ejecuta un m-todo sobre -l para cambiar el contenido
KT?# del elemento.
Demo de jQuery
En este otro ejemplo (amos a (er algo un po*uito m.s complejo. 'ueno+ realmente no tiene
mucha mayor complejidad+ pero estamos utilizando j)uery de una manera un poco distinta+
*ue re*uiere algo m.s de c%digo por nuestra parte. 8hora (amos a tener dos capas en nuestra
p.gina. >na capa estar. siempre (isible y otra capa aparecer. inicialmente oculta y la (amos a
mostrar u ocultar dependiendo de si el usuario coloca el rat%n encima de la capa *ue est.
siempre (isible.
/ara hacerse una idea e5acta de nuestro ejemplo puedes (erlo en una (entana aparte.
En este segundo ejemplo tenemos este c%digo KT?#+ con las dos capas.
Cdi( idDEcapaE styleDEpadding: &@p5F bac0groundGcolor: H,,II@@FEJ/on el rat%n encima de esta capaC/di(J
CbrJ
Cdi( idDEmensajeE styleDEdisplay: noneFEJKas puesto el rat%n encimaOO CbrJ(8hora *utalo de la capa!C/di(J
P
8hora (amos a tener un c%digo 1a(ascript con j)uery *ue de,ina los e(entos del usuario+ para
cuando sit3a el rat%n dentro o ,uera de la primera capa.
L(EHcapaE!.mouseenter(,unction(e(ento!Q
L(EHmensajeE!.css(EdisplayE+ Ebloc0E!F
R!F
L(EHcapaE!.mouselea(e(,unction(e(ento!Q
L(EHmensajeE!.css(EdisplayE+ EnoneE!F
R!F
De esta sencilla manera+ hemos creado dos e(entos en el D4N con idDEcapaE. 8dem.s+ hemos
de,inido el c%digo de los e(entos por medio de ,unciones+ *ue se encargar.n de mostrar o
ocultar la segunda capa con idDEmensajeE.
L(EHmensajeE!.css(EdisplayE+ Ebloc0E!F
Esto nos selecciona la capa con id EmensajeE y con el m-todo css(! indicamos *ue *ueremos
cambiar el atributo EdisplayE al (alor Ebloc0E de ese elemento.
L(EHmensajeE!.css(EdisplayE+ EnoneE!F
Esta otra lnea muy similar+ simplemente cambia el EdisplayE a EnoneE para ocultar el elemento.
Esperamos *ue estos dos ejemplos te hayan ser(ido para (er r.pidamente algunas cosas *ue
se pueden hacer con j)uery con muy poco es,uerzo y *ue ,uncionan en todos los na(egadores.
!asos para utilizar jQuery en tu p"gina #e$
En este artculo te (amos a e5plicar c%mo comenzar a utilizar j)uery en tus p.ginas web+ paso
a paso+ para *ue puedas hacer tu primer script j)uery y as comprender los ,undamentos de
uso de este ,ramewor0 1a(ascript. En este punto estara bien *ue sepas lo *ue es j)uery+ lo
*ue ha sido e5plicado ya en nuestro ?anual de j)uery.
#a idea es *ue puedas ir haciendo t3 mismo los pasos *ue (amos a relatar+ para *ue (eas lo
sencillo *ue es comenzar a utilizar j)uery. Este artculo sigue el es*uema con el *ue los
propios creadores de j)uery enseSan a utilizar su producto+ as *ue est. directamente
inspirado en la documentaci%n de j)uery.
1%& Descarga la 'ltima versin del (rame#or)
8ccede a la p.gina de j)uery para descargar la 3ltima (ersi%n del ,ramewor0. En el momento
de escribir este artculo la release actual es la &.B.=+ y con la *ue hemos realizado estos
ejemplos. 9in embargo+ puede *ue haya publicado una nue(a (ersi%n *ue mejore la actual.
Dan dos posibilidades para descargar+ una *ue le llaman /A7D>2T47$+ *ue es la adecuada
para p.ginas web en producci%n+ puesto *ue est. minimizada y ocupa menos espacio+ con lo
*ue la carga de nuestro sitio ser. m.s r.pida. #a otra posibilidad es descargar la (ersi%n *ue
llaman DENE#/7?E$T+ *ue est. con el c%digo sin comprimir+ con lo *ue ocupa m.s espacio+
pero se podr. leer la implementaci%n de las ,unciones del ,ramewor0+ *ue puede ser
interesante en etapa de desarrollo+ por*ue podremos bucear en el c%digo de j)uery por si
:
tenemos *ue entender alg3n asunto del trabajo con el ,ramewor0.
Ner.s *ue la descarga es un archi(o js *ue contiene el c%digo completo del ,ramewor0. 2oloca
el archi(o en una carpeta en tu ordenador para hacer las pruebas.
%& *rea una p"gina +,M- simple
8hora+ en el mismo directorio donde has colocado el archi(o js+ coloca un archi(o html con el
siguiente c%digo.
ChtmlJ
CheadJ
Cscript srcDEj*ueryG&.B.=.min.jsE typeDEte5t/ja(ascriptEJC/scriptJ
CscriptJ
C/scriptJ
C/headJ
CbodyJ
Ca hre,DEhttp://www.desarrolloweb.com/EJDesarrolloWeb.comC/aJ
C/bodyJ
C/htmlJ
2omo podr.s (er+ es una p.gina bien simple+ en la *ue tenemos una llamada a un script
e5terno llamado j*ueryG&.B.=.min.js. Este es el c%digo de j)uery *ue hemos descargado de la
p.gina del ,ramewor0. 9i has descargado una (ersi%n distinta+ *uiz.s el archi(o se llame de
otra manera+ as *ue es posible *ue tengas *ue editar ese nombre de archi(o para colocar el
*ue tengas en el directorio.
2on ese script ya hemos incluido todas las ,unciones de j)uery dentro de nuestra p.gina. 9%lo
tienes *ue prestar atenci%n a *ue tanto el archi(o .html de esta p.gina+ como el archi(o .js del
,ramewor0 est-n en el mismo directorio. T+ como deca+ *ue el archi(o *ue incluimos con la
eti*ueta 92A4/T sea el .js *ue nosotros hemos descargado.
8dem.s+ como se puede (er+ hemos dejado dentro del KE8D una eti*ueta 92A4/T de apertura
y cierre *ue est. (aca. Todo el c%digo *ue (amos a e5plicar a continuaci%n tendr.s *ue
colocarlo en dentro de esa eti*ueta.
.%& /jecutar cdigo cuando la p"gina 0a sido cargada
El paso *ue (amos a e5plicar ahora es importante *ue se entienda+ aun*ue sin lugar a dudas a
lo largo del manual publicado en DesarrolloWeb.com+ lo (eremos hasta la saciedad. 9e trata de
detectar el momento en *ue la p.gina est. lista para recibir comandos 1a(ascript *ue hacen
uso del D7?.
2uando hacemos ciertas acciones complejas con 1a(ascript tenemos *ue estar seguros *ue la
p.gina haya terminado de cargar y est- lista para recibir comandos 1a(ascript *ue utilicen la
estructura del documento con el objeti(o de cambiar cosas+ como crear elementos+ *uitarlos+
cambiar sus propiedades+ etc. 9i no esperamos a *ue la p.gina est- lista para recibir
instrucciones corremos un alto riesgo de obtener errores de 1a(ascript en la ejecuci%n.
En el taller de programaci%n con el D7? de 1a(ascript hemos podido e5plicar *ue es el D7? y
la importancia de realizar acciones s%lo cuando el D7? est. listo. /ero si no *ueremos
entretenernos con la lectura de este te5to+ sir(e con saber *ue+ cuando *ueremos hacer
acciones con 1a(ascript *ue modi,i*uen cual*uier cosa de la p.gina+ tenemos *ue esperar a
*ue la p.gina est- lista para recibir esos comandos.
6
Ueneralmente+ cuando se desea ejecutar 1a(ascript despu-s de la carga de la p.gina+ si no
utilizamos ning3n ,ramewor0+ lo m.s normal ser. utilizar un c%digo como este:
window.onload D ,unction (! Q
alert(Ecargado...E!F
R
/ero esta sentencia+ *ue carga una ,uncionalidad en el e(ento onload del objeto window+ s%lo
se ejecutar. cuando el na(egador haya descargado completamente T7D79 los elementos de la
p.gina+ lo *ue incluye im.genes+ i,rames+ banners+ etc. lo *ue puede tardar bastante+
dependiendo de los elementos *ue tenga esa p.gina y su peso.
/ero en realidad no hace ,alta esperar todo ese tiempo de carga de los elementos de la p.gina
para poder ejecutar sentencias 1a(ascript *ue alteren el D7? de la p.gina. 9%lo habra *ue
hacerlo cuando el na(egador ha recibido el c%digo KT?# completo y lo ha procesado al
renderizar la p.gina. /ara ello+ j)uery incluye una manera de hacer acciones justo cuando ya
est. lista la p.gina+ aun*ue haya elementos *ue no hayan sido cargados del todo. Esto se hace
con la siguiente sentencia.
L(document!.ready(,unction(!Q
//c%digo a ejecutar cuando el D7? est. listo para recibir instrucciones.
R!F
/or dar una e5plicaci%n a este c%digo+ digamos *ue con L(document! se obtiene una re,erencia
al documento (la p.gina web! *ue se est. cargando. #uego+ con el m-todo ready(! se de,ine
un e(ento+ *ue se desata al *uedar listo el documento para realizar acciones sobre el D7? de
la p.gina.
1%& Insertar un manejador de evento a la eti2ueta A
3enlace4 2ue 0ay en la p"gina
8hora *ue ya sabemos c%mo y cuando debemos ejecutar las acciones de j)uery *ue alteren la
,uncionalidad+ contenidos o aspecto de la p.gina+ podemos insertar un poco de c%digo para
demostrar el m-todo de trabajo con j)uery.
/ara este primer ejemplo (amos a crear un e(ento clic0 en el enlace+ para mostrar un mensaje
cuando se haga clic sobre el lin0. /ara crear un e(ento clic0 sobre un elemento tenemos *ue
in(ocar al m-todo clic0 sobre ese elemento y pasarle como par.metro una ,unci%n con el
c%digo *ue *ueremos *ue se ejecute cuando se hace clic.
L(EaE!.clic0(,unction(e(ento!Q
//a*u el c%digo *ue se debe ejecutar al hacer clic
R!F
2omo (emos en el c%digo anterior+ con L(EaE! obtenemos una re,erencia al enlace. 'ueno+ en
realidad con ello estamos estamos seleccionando todas las eti*uetas 8 (enlaces! del
documento+ pero como s%lo hay un enlace+ en realidad nos (ale. #uego+ el m-todo clic0(! del
sobre L(EaE! estamos de,iniendo un e(ento+ *ue se ejecutar. cuando se haga clic sobre el
enlace. 2omo se puede (er+ al m-todo clic0 se le pasa una ,unci%n donde se debe poner el
c%digo 1a(ascript *ue *ueremos *ue se ejecute cuando se haga clic sobre el enlace.
8hora (eamos la de,inici%n del e(ento clic completa+ colocada dentro del e(ento ready del
document+ para *ue se asigne cuando la p.gina est. lista.
alert(EKas pulsado el enlace...Vn8hora ser.s en(iado a DesarrolloWeb.comE!F
R!F
R!F
W
/or lneas+ esto es una recapitulaci%n de lo *ue hemos hecho:
Esta lnea sir(e para hacer cosas cuando la p.gina est. lista para recibir instrucciones j)uery
*ue modi,i*uen el D7?.
2on esta lnea estamos seleccionando todas las eti*uetas 8 del documento y de,iniendo un
e(ento clic0 sobre esos elementos.
2on esta lnea simplemente mostramos un mensaje de alerta in,ormando al usuario *ue se ha
hecho clic sobre el enlace.
5%& 6uarda el arc0ivo 0tml y "$relo en un navegador
>na (ez *ue tenemos hecho nuestra primera p.gina con j)uery+ la puedes guardar y ejecutarla
en un na(egador. /rueba hacer clic en el enlace y debera salirte la (entana de alerta.
/uedes (er este script en ,uncionamiento en una p.gina aparte.
Ta est. hecho y ,uncionando tu primer script con j)ueryO
/or si acaso *uedaron dudas+ dejamos a*u el c%digo completo *ue deberas tener:
ChtmlJ
CheadJ
CtitleJ/rimer script con j)ueryC/titleJ
CscriptJ
R!F
R!F
C/scriptJ
C/headJ
CbodyJ
Ca hre,DEhttp://www.desarrolloweb.comEJ4r a DesarrolloWeb.comC/aJ
C/bodyJ
C/htmlJ
7%& /8tra9 :lo2uear el comportamiento normal de un enlace
8hora (eamos una pe*ueSa modi,icaci%n para alterar el comportamiento por de,ecto de los
enlaces. 2omo sabemos+ cuando se pulsa un enlace nos lle(a a una >A#. #uego al hacer clic0+
primero se ejecuta lo *ue hayamos colocado en el e(ento clic0 del enlace y luego el enlace
lle(a al na(egador a una nue(a >A#.
Este comportamiento se puede blo*uear tambi-n desde j)uery+ aSadiendo una llamada al
m-todo pre(entDe,ault(! sobre el e(ento. 9i te ,ijas+ la ,unci%n de,inida para marcar el
comportamiento del e(ento clic0 sobre el enlace reciba un par.metro. Ese par.metro es un
manejador de e(ento. T tiene sus propios m-todos y propiedades+ como este pre(entDe,ault(!
*ue coment.bamos. 9u uso es el siguiente:
I
alert(EKas pulsado el enlace+ pero (amos a cancelar el e(ento...Vn/or tanto+ no (amos a lle(arte a
DesarrolloWeb.comE!F
e(ento.pre(entDe,ault(!F
R!F
R!F
2omo hemos podido (er in(ocando a e(ento.pre(entDe,ault(! lo *ue conseguimos en este caso
es *ue el lin0 no lle(e a ning3n sitio+ simplemente se ejecutar. el c%digo 1a(ascript contenido
para el e(ento clic0.
:"sicos jQuery9 a;adir y 2uitar clases *<< so$re elementos
/ara ir acostumbr.ndonos al trabajo con el ,ramewor0 1a(ascript j)uery (amos a seguir
haciendo ejemplos simples de ,uncionamiento+ *ue (amos a e5plicar en la medida de las
posibilidades con lo *ue hemos conocido hasta ahora en el ?anual de j)uery.
2laro *ue estos ejercicios son un poco especiales+ dado *ue sir(en para ilustrar el modo de
trabajo con j)uery+ pero sin e5plicar todos los detalles relacionados con el uso del ,ramewor0.
/or *ue de momento lo *ue *ueremos es mostrar una introducci%n al sistema y mostrar por
encima algunas de sus posibilidades. En el ,uturo publicaremos artculos *ue ir.n poco a poco
e5plicando todos los detalles de trabajo con j)uery.
En el caso *ue nos ocupa+ *ueremos demostrar el uso de j)uery para alterar elementos de una
p.gina web+ aSadiendo y *uitando clases 299. Esto es bien simple+ por*ue en j)uery los
elementos tienen dos clases llamadas add2lass(! y remo(e2lass(!+ *ue sir(en justamente para
*ue el elemento *ue recibe el m-todo se le apli*ue una clase 299 o se le elimine. 8s *ue lo
*ue (amos a aprender+ con respecto al artculo anterior G/asos para utilizar j)ueryG+ es utilizar
esos nue(os m-todos de los elementos.
/ara complicarlo s%lo un poco m.s+ (amos a aSadir y *uitar clases del elemento con respuesta
a acciones del usuario+ para aprender tambi-n nue(os e(entos de usuario.
En nuestro ejemplo (amos a tener dos elementos. /rimero una capa D4N con un te5to.
Despu-s tendremos un enlace *ue estar. ,uera de la capa D4N. 8l situar el usuario el rat%n
sobre un enlace aSadiremos una clase 299 a la capa D4N y al retirar el rat%n del enlace
eliminaremos la class 299 *ue habamos aSadido antes. 9i se desea+ para aclarar el caso de
nuestro ejemplo+ podemos (er el ejercicio en marcha en una p.gina aparte.
!ota: 9e supone *ue ya hemos ledo el artculo anterior+ en el *ue e5plicamos paso por paso hacer tu
primera p.gina con j)uery+ pues necesitaremos conocer algunas cosas *ue ya se han comentado all.
1%& *rear la p"gina con una capa, un enlace y la de(inicin
de una clase *<<
El primer paso sera construir una p.gina con todos los elementos *ue *ueremos *ue ,ormen
parte de este primer ejemplo: la capa D4N+ el enlace y la de,inici%n de la class 299.
<
8dem.s+ ahora tambi-n (amos a incluir el script de j)uery+ *ue lo necesitaremos para acceder
a las ,unciones del ,ramewor0 1a(ascript.
ChtmlJ
CheadJ
CtitleJ8Sadir y *uitar clases 299 a elementosC/titleJ
Cstyle typeDEte5t/cssEJ
.clasecssQ
bac0groundGcolor: H,,II@@F
,ontGweight: boldF
R
C/styleJ
C/headJ
CbodyJ
Cdi( idDEcapaEJ
Esta capa es independiente y (oy a aSadir y eliminar clases css sobre ella
C/di(J
CbrJ
CbrJ
Ca hre,DEhttp://www.desarrolloweb.comEJ8Sadir y *uitar clase en la capa de arribaC/aJ
C/bodyJ
C/htmlJ
/er,ecto+ ahora ya tenemos la in,raestructura necesaria para nuestro ejemplo+ con todos los
integrantes del mismo. 9%lo nos ,altara hacer el siguiente paso+ *ue es aSadir los
comportamientos din.micos con j)uery.
%& =ecordar9 a;adir siempre los scripts jQuery cuando el
documento est" >ready>
8hora (amos a empezar a meter el c%digo 1a(ascript+ pero *uiero comenzar por recordar a los
lectores *ue cual*uier ,uncionalidad *ue *ueramos agregar a la p.gina por medio de j)uery+
debe ser incluida cuando el documento est. listo para recibir acciones *ue modi,i*uen el D7?
de la p.gina.
/ara esto tenemos *ue incluir siempre el c%digo:
//a*u meteremos las instrucciones *ue modi,i*uen el D7?
R!F
.%& A;adir los eventos mouseover y mouseout para a;adir y
2uitar una clase *<<
En este paso (amos a crear un par de e(entos *ue asociaremos a los enlaces. Este par de
e(entos ser.n lanzados cuando el usuario colo*ue el puntero del rat%n sobre el enlace
(mouseo(er! y cuando el usuario retire el rat%n del enlace (mouseout!.
/or ejemplo+ para de,inir un e(ento mouseo(er se tiene *ue llamar al m-todo mouseo(er(!
sobre el elemento *ue *ueremos asociar el e(ento. 8dem.s+ al m-todo mouseo(er(! se le
en(a por par.metro una ,unci%n con el c%digo *ue se *uiere ejecutar como respuesta a ese
e(ento.
En el caso de aSadir una clase tenemos *ue utilizar el m-todo add2lass(!+ *ue se tiene *ue
in(ocar sobre el elemento al *ue *ueremos aSadirle la clase. 8 add2lass(! tenemos *ue
&@
pasarle una cadena con el nombre de la clase 299 *ue *ueremos aSadir.
/ara seleccionar el elemento *ue *ueremos aSadir la clase hacemos L(EHidElementoE!+ es
decir+ utilizamos la ,unci%n d%lar pas.ndole el identi,icador del elemento *ue *ueremos
seleccionar+ precedida del car.cter EHE. /or ejemplo+ con L(EHcapaE! estamos seleccionando un
elemento de la p.gina cuyo idDEcapaE.
L(EaE!.mouseo(er(,unction(e(ent!Q
L(EHcapaE!.add2lass(EclasecssE!F
R!F
De manera an.loga+ pero con el m-todo mouseout(!+ de,inimos el e(ento para cuando el
usuario saca el puntero del rat%n del enlace.
L(EaE!.mouseout(,unction(e(ent!Q
L(EHcapaE!.remo(e2lass(EclasecssE!F
R!F
1%& *digo completo del ejemplo jQuery
8hora (eamos el c%digo completo de este ejercicio.
ChtmlJ
CheadJ
CtitleJ8Sadir y *uitar clases 299 a elementosC/titleJ
Cstyle typeDEte5t/cssEJ
.clasecssQ
bac0groundGcolor: H,,II@@F
,ontGweight: boldF
R
C/styleJ
CscriptJ
L(EaE!.mouseo(er(,unction(e(ent!Q
L(EHcapaE!.add2lass(EclasecssE!F
R!F
L(EaE!.mouseout(,unction(e(ent!Q
L(EHcapaE!.remo(e2lass(EclasecssE!F
R!F
R!F
C/scriptJ
C/headJ
CbodyJ
Cdi( idDEcapaEJ
Esta capa es independiente y (oy a aSadir y eliminar clases css sobre ella
C/di(J
CbrJ
CbrJ
Ca hre,DEhttp://www.desarrolloweb.comEJ8Sadir y *uitar clase en la capa de arribaC/aJ
C/bodyJ
C/htmlJ
/odemos (er el ejemplo desarrollado en el artculo en una p.gina aparte.
&&
/(ectos r"pidos con jQuery
>na de las (entajas m.s destacadas de j)uery es la realizaci%n de e,ectos especiales para
p.ginas web+ *ue se desarrollan r.pido y con poco c%digo ,uente. Estos e,ectos sir(en para
aplicar dinamismo a una p.gina web y una respuesta atracti(a ,rente la interacci%n con el
usuario+ lo *ue hace *ue las p.ginas programadas con j)uery o,rezcan una imagen puntera.
#os e,ectos con j)uery+ al menos un buen puSado de ellos+ se pueden realizar sin muchas
complicaciones+ ya *ue e5isten unas ,unciones *ue simpli,ican la tarea de los desarrolladores
(Ner la librera E,,ects!. En muchos casos conseguir un e,ecto nos lle(ar. una lnea de c%digo
en nuestro programa+ como esta:
L(EHcapae,ectosE!.hide(EslowE!F
2on esto conseguimos *ue el elemento con idDEcapae,ectosE desaparezca de la p.gina. /ero
adem.s+ el e,ecto no es un simple ,undido del elemento en la p.gina (hacerse transparente!+
sino *ue tambi-n (a acompaSado de una reducci%n de tamaSo progresi(a hasta desaparecer.
2ombinando los e,ectos con la interacci%n de usuario+ por medio de e(entos+ podemos
conseguir *ue los e,ectos respondan a las acciones del (isitante+ lo *ue multiplica las
posibilidades+ manteniendo la sencillez+ elegancia y ,acilidad de manutenci%n del c%digo
1a(ascript. #o (amos a (er en un ejemplo a continuaci%n.
/jemplo de e(ectos e interaccin en jQuery
En el siguiente ejemplo (amos a mostrar un uso sencillo de las ,unciones de e,ectos de j)uery.
Namos a implementar un simple e,ecto de ocultar y mostrar un elemento de la p.gina web.
/odemos (er el ejemplo en marcha en una p.gina aparte.
2omo hemos podido (er+ (amos a tener una capa y un par de enlaces. 2on j)uery haremos
*ue al pulsar los enlaces se oculte y se muestre la capa+ con las ,unciones de la librera E,,ects.
/ara comenzar+ este es el c%digo KT?# del ejemplo+ *ue comprende tanto la capa como los
enlaces.
Cdi( idDEcapae,ectosE styleDEbac0groundGcolor: HccWW@@F color:,,,F padding:&@p5FEJ
Esto es una capa *ue nos ser(ir. para hacer e,ectosO
C/di(J
CpJ
Ca hre,DEHE idDEocultarEJ7cultar la capaC/aJ X
Ca hre,DEHE idDEmostrarEJ?ostrar la capaC/aJ
C/pJ
8hora (iene la parte interesante+ *ue es en la *ue asociamos e(entos a estos dos enlaces y
codi,icamos las llamadas a las ,unciones de E,,ects+ *ue har.n *ue se muestre y oculte la capa.
El c%digo 1a(ascript+ *ue hace uso de j)uery sera el siguiente:
L(EHocultarE!.clic0(,unction(e(ent!Q
e(ent.pre(entDe,ault(!F
R!F
L(EHmostrarE!.clic0(,unction(e(ent!Q
L(EHcapae,ectosE!.show(B@@@!F
R!F
&=
R!F
2omo se puede (er+ primero tenemos *ue de,inir el e(ento ready del objeto L(document!+ para
hacer cosas cuando el documento est. preparado para recibir acciones.
#uego se de,ine el e(ento clic0 sobre cada uno de los dos enlaces. /ara ello in(oco el m-todo
clic0 sobre el enlace+ *ue hemos seleccionado con j)uery a tra(-s del identi,icador de la
eti*ueta 8.
2on esto estoy de,iniendo el e(ento clic sobre el elemento con idDEocultarE.
!ota: leer el artculo anterior /asos para utilizar j)uery en tu p.gina web+ en el *ue habl.bamos sobre
e(entos y otras generalidades de este ,ramewor0 1a(ascript. /odremos encontrar e5plicaciones m.s
detalladas sobre c%mo de,inir e(entos 1a(ascript con j)uery.
Dentro de la ,unci%n a ejecutar cuando se hace clic+ se coloca la llamada a la ,unci%n de los
e,ectos.
Esto hace *ue nuestra capa+ a la *ue habamos puesto el identi,icador (atributo id!
Ecapae,ectosE+ se oculte. /asamos el par.metro EslowE por*ue *ueremos *ue el e,ecto sea
lento.
8hora (eamos la ,unci%n de los e,ectos con otra llamada:
Esto hace *ue se muestre el elemento con id Ecapae,ectosE+ y *ue el proceso de mostrarse
dure B@@@ milisegundos.
$o hay m.s complicaciones+ as *ue si hab-is entendido esto ya sab-is hacer e,ectos simples
pero atracti(os con j)uery en (uestra p.gina web. 8hora podr-is (er el c%digo completo de
este ejemplo creado por DesarrolloWeb.com para demostrar el uso de e,ectos.
COD72TT/E html
/>'#42 EG//WB2//DTD YKT?# &.@ Transitional//E$E
Ehttp://www.wB.org/TA/5html&/DTD/5html&Gtransitional.dtdEJ
ChtmlJ
CheadJ
CtitleJE,ectos con j)ueryC/titleJ
CscriptJ
R!F
L(EHmostrarE!.clic0(,unction(e(ent!Q
R!F
R!F
C/scriptJ
C/headJ
CbodyJ
Cdi( idDEcapae,ectosE styleDEbac0groundGcolor: HccWW@@F color:,,,F padding:&@p5FEJ
&B
Esto es una capa *ue nos ser(ir. para hacer e,ectosO
CbrJ
CbrJ
/ongo este te5to simplemente de prueba
C/di(J
CpJ
Ca hre,DEHE idDEocultarEJ7cultar la capaC/aJ X
Ca hre,DEHE idDEmostrarEJ?ostrar la capaC/aJ
C/pJ
C/bodyJ
C/htmlJ
/or 3ltimo+ pongo el enlace de nue(o al ejemplo en marcha.
2omo se ha podido comprobar+ hacer e,ectos con j)uery es bastante sencillo. 2laro *ue hay
otros detalles importantes y otros tipos de e,ectos y ,uncionalidades de personalizaci%n de los
mismos+ pero esto nos ha ser(ido para demostrar lo sencillo *ue es trabajar con este
,ramewor0 1a(ascript. En siguientes artculos seguiremos e5plorando casos de uso tpicos de
j)uery.
*all$ac) de (unciones jQuery
8 menudo cuando hacemos aplicaciones enri*uecidas del lado del cliente con j)uery nos
(emos en la necesidad de encadenar (arias llamadas a ,unciones+ para *ue una se ejecute
detr.s de otra+ creando un e,ecto m.s elaborado. En este artculo (eremos lo sencillo *ue es
realizar lo *ue en ingl-s se llama Ecallbac0E+ es decir una ,unci%n *ue se ejecuta despu-s de
otra.
8pilar ,unciones+ para *ue se ejecuten una detr.s de otra+ nos ser(ir. para hacer muchas
cosas. En nuestro da a da con j)uery iremos encontrando la utilidad+ pero de momento para
e5plicar un caso en el *ue nos resultar. imprescindible+ se me ocurre *ue deseemos hacer una
secuencia de e,ectos y cambios din.micos en un elemento.
/or ejemplo imaginemos *ue se desea ocultar una capa con un e,ecto de ,undido (de opaco a
transparente!+ luego mo(erla a otra posici%n y (ol(erla a mostrar (ya en la nue(a posici%n! con
otro e,ecto de ,undido (en este caso de transparente a opaco!. En principio podramos pensar
en hacer un c%digo como este:
L(EHmicapaE!.,ade7ut(=@@@!F
L(EHmicapaE!.css(Qtop: B@@+ le,t:=@@R!F
L(EHmicapaE!.,ade4n(=@@@!F
En este caso estamos alterando las propiedades de una capa con idDEmicapaE. /rimero
llamamos a ,ade7ut(! para ocultarla con un ,undido+ *ue durar. = segundos ((-ase el
par.metro =@@@+ *ue son los milisegundos *ue durar. el e,ecto!. #uego alteramos la posici%n
de la capa+ cambiando sus atributos 299. /ara acabar la (ol(emos a mostrar con un ,undido de
otros =@@@ milisegundos.
!ota: para poder entender mejor estas llamadas a e,ectos+ por ,a(or+ consulta el artculo E,ectos A.pidos
con j)uery.
&P
9i lanzamos la ejecuci%n de estas sentencias+ tal como aparece en el c%digo+ ser. como si se
ejecutasen todas a la (ez. 2omo los ,ade7ut y ,ade4n tardar.n = segundos en ejecutarse y los
cambios de las propiedades 299 top y le,t son inmediatos+ lo *ue ocurrir. ser. *ue primero
(eremos la capa mo(erse a la nue(a posici%n y luego (eremos los dos e,ectos de ,undido.
#o mejor para darse cuenta de este caso es (erlo en marcha.
*mo realizar una pila de ejecucin de (unciones
8hora *ue ya hemos (isto uno de los casos en los *ue necesitaramos ejecutar ,unciones en
una pila+ una despu-s de otra+ esperando a *ue termine completamente la ejecuci%n de
cual*uier e,ecto o acci%n antes de comenzar con la siguiente. Namos a (er c%mo hacerlo con
j)uery.
9implemente tenemos *ue saber *ue todas las ,unciones o m-todos de j)uery pueden recibir
un par.metro adicional con el nombre de la ,unci%n *ue se tiene *ue ejecutar despu-s *ue
termine el procesamiento de la primera. Esa segunda ,unci%n *ue se ejecuta despu-s de la
primera es la *ue se conoce en ingl-s por callbac0. >n ejemplo sencillo para entenderlo.
mi6uncion (Eparametros de la ,unci%nE+ ,uncion2allbac0!F
En ese es*uema de llamada a mi6uncion(!+ se le est.n pasando dos par.metros. El primero
sera un supuesto par.metro *ue necesitase mi6uncion(! y el segundo+ *ue es le *ue nos
interesa en este caso+ el nombre de la ,unci%n *ue se tiene *ue ejecutar despu-s *ue acabe.
2on este c%digo+ primero se ejecuta mi6uncion(! y cuando acaba completamente+ se ejecuta
,uncion2allbac0(!. /ero atenci%n *ue este ejemplo lo hemos simpli,icado para *ue se pueda
entender ,.cilmente y esta sinta5is s%lo (aldr. si ,uncion2allbac0 no recibe par.metros+ por*ue
no los podemos indicar con el nombre de la ,unci%n. Neamos entonces una ,orma de hacer este
callbac0 *ue ,uncione siempre:
mi6uncion (Eparametros de la ,uncionE+ ,unction(!Q
,uncion2allbac0(!F
R!F
2on este c%digo+ *ue ,uncionara igual *ue el anterior+ lo bueno es *ue s podemos indicar los
par.metros *ue se necesiten para la llamada a ,uncion2allbac0(!.
/jemplo real de call$ac) con jQuery
8hora *ue hemos aprendido toda la teora+ (eamos un ejemplo pr.ctico *ue solucionara el
problema comentado anteriormente sobre el procesamiento de di(ersos e,ectos y cambios en
las propiedades de los objetos+ para *ue se hagan siempre en la secuencia *ue deseamos. 9e
trata simplemente de aplicar las llamadas con callbac0 *ue hemos antes.
L(EHmicapaE!.,ade7ut(&@@@+ ,unction(!Q
L(EHmicapaE!.css(QMtopM: B@@+ Mle,tM:=@@R!F
L(EHmicapaE!.,ade4n(&@@@!F
R!F
2omo se puede (er+ en la llamada a ,ade7ut(! estamos pasando como par.metros el (alor
&@@@+ *ue son los milisegundos tiene *ue durar el e,ecto ,ade out (,undido hacia
transparente!+ y luego la ,unci%n callbac0+ *ue se ejecutar. despu-s de *ue ,ade7ut(! haya
terminado.
2omo el m-todo css(! (se encuentra como primera instrucci%n de la ,unci%n callbac0! es
instant.neo+ no necesita hacerse un callbac0 para ejecutar el ,ade4n(!+ sino *ue se puede
&:
escribir directamente en la siguiente lnea de c%digo. 8s pues+ se (e *ue el callbac0+ al menos
en este ejemplo+ s%lo es necesario hacerlo cuando se ejecutan ,unciones *ue realizar.n un
procesamiento prolongado.
/odemos (er este ejemplo de callbac0 en una p.gina aparte.
Kasta a*u+ a lo largo de los captulos de este manual de j)uery+ hemos ledo la introducci%n a
este popular ,ramewor0 1a(ascript+ tal como se puede (er en el apartado EKow to use j)ueryE
publicada en la p.gina de documentaci%n. Desde DesarrolloWeb.com hemos enri*uecido este
tutorial de j)uery aportando nue(os ejemplos y e5plicaciones adicionales+ encaminadas a *ue
cual*uier persona+ con unos conocimientos b.sicos de 1a(ascript+ pueda entender y aprender a
usar estas libreras de programaci%n crossGbrowser. 8hora podemos hacer una pausa en este
manual y (ol(eremos pronto con nue(os artculos para e5plicar otros asuntos sobre la
programaci%n con j)uery.
&6

Manual Jquery

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Manual Jquery

Cargado por

Copyright:

Formatos disponibles

Tu mejor ayuda para aprender a hacer webs

También podría gustarte