MOLLO I .

PRI MIROS PASOS

NLISTRA PRI MIRA PGI NA WIB CON JQLIRY
SILICTORIS
ASISOR:
LI C. JLLI AN C. VI LLIGAS ALONZO
TuIIer
nLroduccIn de Jquery
onLenIdo
O 1. PrImeros Pusos.
O z. NuesLru prImeru pugInu Web con jQuery
O z. SeIecLores
PrImeros Pusos
O u IIbreriu jQuery proporcIonu unu cupu de
ubsLruccIn de upIIcucIn generuI puru progrumucIn
Web comn, compuesLu IundumenLuImenLe por eI
Ienguuje JuvuscrIpL
compuLIbIe con cuuIquIer
nuvegudor, sIsLemu oper-
uLIvo y urquILecLuru.
PrImeros Pusos
us curucLerisLIcus prIncIpuIes:
O Acceder u eIemenLos en un documenLo (TAGS).
O ModIIIcur Iu upurIencIu de unu pugInu Web (SS).
O AILerur eI conLenIdo de un documenLo (DOM).
O Responder u Iu InLeruccIn de un usuurIo (EvenLos).
O AnImur cumbIos reuIIzudos u un documenLo.
O Recuperur InIormucIn de un servIdor sIn reIrescur
unu pugInu (Ajux, GET, POST).
O SImpIIIIcur Lureus JuvuScrIpL comunes (eucI, objecL, eLc).
PrImeros Pusos
Por qu jQuery IuncIonu bIen
O AprovecIur eI conocImIenLo de SS.
O SoporLur exLensIones.
O AbsLruer Ios IuIIos de nuvegudor.
O SIempre Lrubujur con conjunLos.
O PermILIr mILIpIes uccIones en unu Iineu.
PrImeros Pusos
on uIgo mus de q uos de vIdu, jQuery se Iu
converLIdo en Iu IIbreriu JuvuScrIpL mus uLIIIzudu
ucLuuImenLe, y es que, udemus, es gruLuILu, de cdIgo
ubIerLo (bujo IIcencIu MT y GP vz) e IncreibIemenLe
IIgeru. EnLre sus usuurIos podemos enconLrur u:
Google Twitter
MicrosoIt IBM Amuzon
WordPress Mozillu
ropul.
NuesLru prImeru pugInu Web con jQuery
Por qu jQuery IuncIonu bIen
O AprovecIur eI conocImIenLo de SS.
O SoporLur exLensIones.
O AbsLruer Ios IuIIos de nuvegudor.
O SIempre Lrubujur con conjunLos.
O PermILIr mILIpIes uccIones en unu Iineu.
NuesLru prImeru pugInu Web con jQuery
Puru poder uLIIIzur esLu IIbreriu Io prImero que
Lendremos que Iucer seru IncIuIr su cdIgo en nuesLro
proyecLo. Podemos descurgur eI scrIpL desde su pugInu
web, subIrIo u nuesLro servIdor, y ejecuLurIo con Iu
eLIqueLu scrIpL:
<scrIpL Lype="LexLJjuvuscrIpL"
src=jsJjquery.js"><JscrIpL>
NuesLru prImeru pugInu Web con jQuery
TumbIn podemos curgurIu dIrecLumenLe desde eI DN que
munLIene GoogIe:
<scrIpL Lype="LexLJjuvuscrIpL"
src="ILLp:JJujux.googIeupIs.comJujuxJIIbsJjqueryJ1.6.qJjquery.
mIn.js"><JscrIpL>
eI de MIcrosoIL:
<scrIpL Lype="LexLJjuvuscrIpL"
src="ILLp:JJujux.mIcrosoIL.comJujuxJjqueryJjquery-
1.q.z.mIn.js"><JscrIpL>
o eI deI propIo jQuery
<scrIpL Lype="LexLJjuvuscrIpL"
src="ILLp:JJcode.jquery.comJjquery-1.q.z.mIn.js"><JscrIpL>
NuesLru prImeru pugInu Web con jQuery
<!DOTYPE ILmI PUB "-JJWJJDTD XHTM 1.o TrunsILIonuIJJEN"
"ILLp:JJwww.w.orgJTRJxILmI1JDTDJxILmI1-LrunsILIonuI.dLd">
<ILmI xmIns="ILLp:JJwww.w.orgJ1qqqJxILmI" xmI:Iung="en" Iung="en">
<Ieud>
<meLu ILLp-equIv="onLenL-Type" conLenL="LexLJILmI; cIurseL=uLI-8"J>
<LILIe>TIrougI LIe ookIng-GIuss<JLILIe>
<IInk reI="sLyIesIeeL" IreI=sLyIe.css" Lype="LexLJcss" J>
<scrIpL src=jsJjquery.js" Lype="LexLJjuvuscrIpL"><JscrIpL>
<scrIpL src=jsJIuncLIons.js" Lype="LexLJjuvuscrIpL"><JscrIpL>
SeIecLores
EI prImer puso u Iu Ioru de Lrubujur con jQuery es seIeccIonur Ios
eIemenLos deI urboI de documenLo sobre Ios que queremos Lrubujur.
Puru eIIo se uLIIIzu Iu IuncIn jQuery, pusundo como urgumenLo u Iu
IuncIn unu cudenu con un seIecLor, Iu muyoriu de Ios cuuIes uLIIIzun
unu sInLuxIs sImIIur u Iu de SS .
u:Iover, u:Iover, p.prIncIpuI p.prIncIpuI, ,
LubIe#prIncIpuI LubIe#prIncIpuI #devoIver, .ImprImIr #devoIver, .ImprImIr
EI engIne que uLIIIzu jQuery puru seIeccIonur eIemenLos se IIumu SIzzIe
(yu InLegrudo en jquery), y puede descurgurse y uLIIIzurse de Iormu
uIsIudu.
SeIecLores
u IuncIn IucLory $().
on IndependencIu deI LIpo de seIecLor que queremos uLIIIzur en
jQuery, sIempre empezumos con eI sIgno de dIur y purnLesIs: $ ().
Selector Itiqoetu Jqoery escripcin
Nombre
etiqoetu
p $('p`)
SeIeccIonu Lodos Ios purruIos en eI
documenLo.
I #un-Id $('#un-Id`)
SeIeccIonu eI nIco eIemenLo en eI
documenLo que LIene un D de un-Id.
Cluse .unu-cIuse $('.unu-cIuse`)
SeIeccIonu Lodos Ios eIemenLos en eI
documenLo que LIenen unu cIuse de unu-
cIuse.
SeIecLores
SeIecLores de uLrIbuLo
O SeIecLor unIversuI: seIeccIonu Lodos Ios eIemenLos de Iu
pugInu (SS z): $("") ;
O SeIecLor de LIpo o eLIqueLu: seIeccIonu Lodos Ios eIemenLos
con eI LIpo de eLIqueLu IndIcudo (SS 1): $("dIv");
O SeIecLor de cIuse: seIeccIonu Lodos Ios eIemenLos con Iu
cIuse IndIcudu (uLrIbuLo cIuss) (SS 1): $("dIv.enLrudu");
SeIecLores
SeIecLores de uLrIbuLo
O SeIecLor de IdenLIIIcudor: seIeccIonu eI eIemenLo con eI
IdenLIIIcudor (uLrIbuLo Id) IndIcudo (SS 1): $("dIv#cubeceru");
O Grupos de seIecLores: se puede combInur eI resuILudo de vurIos
seIecLores dIsLInLos sepurundoIos con comus (SS 1):
$("p,dIv,u");
O SeIecLor de uLrIbuLo: seIeccIonu eIemenLos que Lengun un cIerLo
uLrIbuLo (SS z): $("u|reI|"); Lengun un cIerLo vuIor:
$("u|reI='noIoIIow'|") ;
SeIecLores
O AqueIIos cuyo vuIor empIezu por unu cIerLu cudenu (SS ):
$("u|IreI^='ILLp:JJmundogeek.neLJ'|")
O os que LermInun con unu cIerLu cudenu (SS ):
$("u|IreI$='.com'|")
O Y Ios que conLIenen unu cIerLu cudenu (SS ):
$("u|IreI='geek'|") ;
O Por ILImo, podemos Iucer combInucIones de Lodo Io
unLerIor (SS z): $("u|reI='noIoIIow'||IreI|");
SeIecLores
ApIIcur esLIIo u vincuIos.
$(documenL).reudy(IuncLIon() {
$('u|IreI^=muIILo:|').uddIuss('muIILo');
]);
AqueIIos cuyo IIpervincuIo (IreI) conLengu en su cudenu muilto: Ie
ugreguru Iu cIuse muIILo que se encuenLru deIInIdu en Iu Ioju de esLIIo
(sLyIe.css).
SeIecLores
ApIIcur esLIIo u vincuIos.
$(documenL).reudy(IuncLIon() {
$('u|IreI^=muIILo:|').uddIuss('muIILo');
]);
AqueIIos cuyo IIpervincuIo (IreI) conLengu en su cudenu muilto: Ie
ugreguru Iu cIuse muIILo que se encuenLru deIInIdu en Iu Ioju de esLIIo
(sLyIe.css).
EvenLos EIecLos
TTP: [ [ VI SLALJQLIRY. COM[
MANLAL VI SLAL CON IJIRCI CI OS Y
IJIMPLOS
MuLerIuI ompIemenLurIo