JS # Fundamentos de Jquery

F undame n tos de jQuery
Textos originales:
Re b ecca Murphey
Traduccin y adaptacin a espaniol:
Leandro DOnofrio
Correcciones:
Gust a o Ra!l "r a gn# $ ablo Ma r onn a# Denis Ciccale y otras p ersonas
Con contribuciones de %a&es $adolsey# $aul 'rish y otros(
)a*o licencia Cre a tie Co&&ons
Mayo +,-+
2
ndice general
1.1. Be n v endo/a..................................................................................................1
1.1.1. Obtener e Matera de Aprendz a |e.....................................................1
1.1.2. Sof tw are...............................................................................................1
1.1.3. Aadr |a v aScrpt a una P gna.................................................2
1.1.4. Depuracn de C dgo |a v aScrpt........................................................2
1.1.5. E|erccos.................................................................................................. 3
1.1.6. Co n v encones Utzadas en e Lbro....................................................3
1.1.7. Notas de a T raduccn........................................................................3
1.1.8. Matera de Referenca.........................................................................4
1.2. Conceptos Bscos de |a v aScrpt...................................................................4
1.2.1. In tr o duccn.............................................................................................4
1.2.2. S n taxs Bsca...............................................................................4
1.2.3. O p eradores............................................................................................... 5
1.2.4. C dgo Condcona...................................................................................7
1.2.5. Buces.................................................................................................10
1.2.6. P aabras Reser v adas....................................................................12
1.2.7. Arregos.................................................................................................. 14
1.2.8. O b |etos................................................................................................... 15
1.2.9. F uncones............................................................................................... 15
1.2.10.............................................................Determnacn de T p o de V arabe
...........................................................................................................17
1.2.11........................................................................................La paabra c a v e ths
......................................................................................................................18
1.2.12..............................................................................................................Acance
...........................................................................................................20
1.2.13..........................................................................................................Causuras
...........................................................................................................22
1.3. Conceptos Bscos de |Ouery......................................................................23
1.3.1. $(d o cume n t).ready()..........................................................................23
1.3.2. Seeccn de Eeme n tos.....................................................................24
1.3.3. T rab a |ar con Seeccones...................................................................28
1.3.4. CSS, Estos, & Dmensones..................................................................29
1.3.5. A trbutos.............................................................................................31
1.3.6. Recorrer e DOM.................................................................................32
1.3.7. Manpuacn de Eeme n tos...............................................................32
1.3.8. E|erccos................................................................................................ 36
1.4. E n ceo de |Ouery......................................................................................37
1.4.1. $ vs $()........................................................................................................................ 37
1.4.2. Mt o dos Uttaros.............................................................................38
1.4.3. Comprobacn de T p os......................................................................40
1.4.4. E Mt o do Data....................................................................................... 40
1.4.5. Deteccn de N a v egadores y Caracterstcas...............................41
1.4.6. Evtar Conctos con Otras Bbotecas |a v aScrpt.............................42
1.5. E v e n tos........................................................................................................42
1.5.1. In tr o duccn........................................................................................... 42
1.5.2. Vncuar E v e n tos a Eeme n tos...........................................................43
1.5.3. E O b |eto de E v e n to..........................................................................45
1.5.4. E|ecucn automtca de Co n troadores de E v e n tos.........................45
1.5.5. Increme n tar e Rendme n to con a Deegacn de E v e n tos..............46
1.5.6. F uncones A uxares de E v e n tos........................................................47
1.5.7. E|erccos................................................................................................ 47
1.6. Efectos.............................................................................................................. 48
1.6.1. In tr o duccn........................................................................................... 48
1.6.2. Efectos Incor p orados en a Bboteca................................................48
1.6.3. Efectos P ersonazados con $.fn.anmate.........................................................50
1.6.4. Co n tro de os Efectos........................................................................51
1.6.5. E|erccos................................................................................................ 51
1.7. A|ax....................................................................................................... 52
1.7.1. In tr o duccn........................................................................................... 52
1.7.2. Conceptos C a v e.................................................................................53
1.7.3. Mt o dos A|ax de |Ouery.....................................................................54
1.7.4. A|ax y F or m uaros.............................................................................59
1.7.5. T rab a |ar con |SONP............................................................................59
1.7.6. E v e n tos A|ax.......................................................................................60
1.7.7. E|erccos................................................................................................ 60
1.8. Extensones..................................................................................................61
1.8.1. Ou es una Extensn?.....................................................................61
1.8.2. Crear una Extensn Bsca...............................................................61
1.8.3. Enco n trar y E v auar Extensones.......................................................63
1.8.4. Escrbr Extensones...........................................................................64
1.8.5. Escrbr Extensones con Ma n tenme n to de Estado Utzando Wdget
F actory
de |Ouery UI.......................................................................................65
1.8.6. E|erccos................................................................................................ 72
1.9. Me|ores Prctcas para A ume n tar e Rendme n to....................................72
1.9.1. Guardar a Longtud en Buces...........................................................73
1.9.2. Aadr Nue v o Co n tendo p or F uera de un Buce...............................73
1.9.3. No Re p etrse.......................................................................................73
1.9.4. Cudado con as F uncones Annmas................................................74
1.9.5. Optmzacn de Seectores................................................................75
1.9.6. Utzar a Deegacn de E v e n tos......................................................76
1.9.7. Separar Eeme n tos para T rab a |ar con Eos......................................76
1.9.8. Utzar Estos en Cascada para Ca m bos de CSS en V aros Eeme n tos
...........................................................................................................76
1.9.9. Utzar $.data en Lugar de $.fn.data................................................................77
1.9.10.......................................................No A ctuar en Eeme n tos no Exste n tes
...........................................................................................................77
1.9.11...................................................................................Dencn de V arabes
...........................................................................................................77
1.9.12....................................................................................................Condconaes
............................................................................................................... 78
1.9.13...................................No T ratar a |Ouery como s fuera una C a |a Negra
...........................................................................................................78
1.10..........................................................................................Organzacn de C dgo
....................................................................................................................... 78
1.10.1......................................................................................................In tr o duccn
............................................................................................................... 78
1.10.2..................................................................................................Encapsuacn
...........................................................................................................79
1.10.3..............................................................................Gestn de De p endencas
...........................................................................................................84
1.10.4............................................................................................................E|erccos
............................................................................................................... 87
1.11..........................................................................................E v e n tos P ersonazados
...................................................................................................................88
1.11.1.................................................In tr o duccn a os E v e n tos P ersonazados
...........................................................................................................88
1.12.....................F uncones y e|ecucones dferdas a tr av s de o b |eto $.Deferred
................................................................................................................................... 97
1.12.1......................................................................................................In tr o duccn
............................................................................................................... 97
1.12.2.................................................................................E o b |eto dferdo y A|ax
...........................................................................................................97
1.12.3.................................................Creacn de o b |etos dferdos con $.Deferred
............................................................................................................. 100
1.1. Bienvenido/a
|Ouery se est convrtendo rpdamente en una herramenta que todo
desarroador de nterfaces web debera de conocer. E propsto de este bro
es proveer un resumen de a bboteca, de ta forma que para cuando o haya
termnado de eer, ser capaz de reazar tareas bscas utzando |Ouery y
tendr una sda base para contnuar e aprendza|e. E bro fue dseado
para ser utzado como matera en un san de cases, pero tambn puede
ser t para estudaro de forma ndvdua.
La modadad de traba|o es a sguente: En prmer ugar se dedcar tempo a
comprender un concepto para uego reazar un e|ercco reaconado. Agunos
de os e|erccos pueden egar a ser trvaes, mentras que otros no tanto. E
ob|etvo es aprender a resover de manera fc o que normamente se
resovera con |Ouery. Las soucones a todos os e|erccos estn ncudas en e
msmo matera de aprendza|e.
1.1.1. Obtener el Material de Aprendizaje
E matera de aprendza|e y e cdgo fuente de os e|empos que se utzan en e
bro estn hospedados en un re p ostoro de Gt h u b. Desde a es posbe
descargar un archvo .zp o .tar con e cdgo para utzar en un servdor web.
S usted suee utzar Gt, es benvendo de conar o
modcar e repostoro.
1.1.2. Softare
Para traba|ar con os contendos de bro, necestar as
sguentes herramentas:
N a v egador w eb Fref o x
La extensn Frebug, para Frefox
Un edtor de textos panos (como Notepad+ +/Subme T ext 2 para
Wndows, gedt/Kate para Lnux o T extMate para Mac OS X)
Para as seccones dedcadas a A|ax: Un servdor oca (como W AMP o
MAMP) o un cente FTP/SSH (como FeZa) para acceder a un servdor
remoto.
1.1.3. A!adir "avaScript a una
#$gina
Exsten dos formas de nsertar cdgo |avaScrpt dentro de una pgna:
escrbendo cdgo en a msma (en nges nne) o a travs de un archvo
externo utzando a etqueta scrpt. E orden en e cua se ncuye e cdgo es
mportante: un cdgo que depende de otro debe ser ncudo despus de que
referenca (E|empo: S a funcn B depende de A, e orden debe ser A,B y no
B,A).
Para me|orar e rendmento de a pgna, e cdgo |avaScrpt debe ser ncudo
a na de HTML. Adems, cuando se traba|a en un ambente de produccn
con mtpes archvos |avaScrpt, stos deben ser combnados en un soo
archvo.
Ejemplo de cdigo
JavaScript en lnea
<scrpt> consoe.og('heo');
</scrpt>
Ejemplo de inclusin de un archivo
externo JavaScript
<scrpt src='/|s/|query.|s'></scrpt>
1.1.4. %epuraci&n del '&digo
"avaScript
La utzacn de una herramenta de depuracn es esenca para traba|ar
con |avaScrpt. Frefox provee un depurador a travs de a extensn Frebug;
mentras que Safar y Chrome ya traen uno ntegrado.
Cada depurador
ofrece:
Un edtor mut-nea para expermentar con
|avaScrpt; Un nspector para revsar e
cdgo generado en a pgna;
Un vsuazador de red o recursos, para examnar as petcones que se
reazan.
Cuando usted este escrbendo cdgo |avaScrpt, podr utzar aguno de os
sguentes mtodos para envar mensa|es a a consoa de depurador:
consoe.og() para envar y regstrar mensa|es generaes;
consoe.dr() para regstrar un ob|eto y vsuazar sus
propedades; consoe.warn() para regstrar mensa|es de aerta;
consoe.error() para regstrar mensa|es de error;
Exsten otros mtodos para utzar desde a consoa, pero estos pueden varar
segn e navegador. La consoa adems provee a posbdad de estabecer
puntos de nterrupcn y observar expresones en e cdgo con e n de factar
su depuracn.
1.1.5. (jercicios
La mayora de os captuos concuyen con uno o ms e|erccos. En agunos,
podr traba|ar drectamente con Frebug; en otros deber escrbr cdgo
|avaScrpt uego de ncur a bboteca |Ouery en e documento.
An as, para competar certos e|erccos, necestar consutar a
documentacn oca de |Ouery. Aprender a encontrar respuestas, es una parte
mportante de proceso de aprendza|e.
Estas son agunas sugerencas para hacer frente a
os probemas:
En prmer ugar, asegrese de entender ben e probema que est tratando
de resover.
Luego, averge a qu eementos tendr que acceder con e n de resover e
probema, y determne cmo accederos. Puede utzar Frebug para vercar
que esta obtenendo e resutado esperado.
Fnamente, averge qu necesta hacer con esos eementos para resover e
probema. Puede ser t, antes de comenzar, escrbr comentaros expcando
o que va a reazar.
No tenga medo de cometer errores. Tampoco trate en e prmer ntento
escrbr de forma perfecta su cdgo. Cometer errores y expermentar con
soucones es parte de proceso de aprendza|e y o ayudar a que sea un
me|or desarroador.
Podr encontrar en a carpeta /e|erccos/soucones e|empos de soucones a os
e|erccos de bro.
1.1.6. 'onvenciones )tilizadas en el *ibro
Exsten una sere de convencones utzadas en e bro:
Los mtodos que pueden ser amados desde e ob|eto |Ouery, sern
referencados como
$.fn.nombreDeMetodo. Los mtodos que exsten en e espaco de nombres (en ngs
names-
pace) de |Ouery pero que no pueden ser amados desde e ob|eto |Ouery sern
referencados como
$.nombreDeMetodo. S esto no sgnca mucho para usted, no se preocupe - ser
ms caro a
medda que vaya progresando en e bro.
Ejemplo de un cdigo
// e cdgo de e|empo aparecer de esta forma
Las remarcaciones aparecern de esta forma.
Nota
Las notas sobre algn tema aparecern de esta forma.
1.1.7. +otas de la ,raducci&n
Debdo a que e matera tene como n e aprendza|e y a enseanza, e
msmo se encuentra traducdo a espao forma (usted).
Muchos conceptos tcncos son nombrados en su versn traducda a
espao. Sn embargo, para tener de referenca, tambn se expca como es
amado en ngs.
Los e|empos y soucones a e|erccos no estn competamente traducdos.
Esto es debdo a que, cuando est traba|ando en un proyecto rea, e cdgo
que encuentre en otros stos probabemente est en ngs. An as, se han
traducdo os comentaros ncorporados en os cdgos de e|empos y agunos
textos partcuares para factar a comprensn.
1.1.8. Material de -eferencia
Exste una gran cantdad de artcuos que se ocupan de agn aspecto de
|Ouery. Agunos son exceentes pero otros, francamente, son errneos. Cuando
ea un artcuo sobre |Ouery, este seguro que se est abarcando a msma
versn de a bboteca que est utzando, y resstase a a tentacn de copar
y pegar e cdgo - tmese un tempo para poder entendero.
A contnuacn se stan una sere de exceentes recursos para utzar durante
e aprendza|e. E ms mportante de todos es e cdgo fuente de |Ouery, e
cua contene (en su formato sn comprmr) una competa documentacn a
travs de comentaros. La bboteca no es una ca|a negra - e entendmento
de ea r ncrementndose exponencamente s a revsa de vez en cuando -
y es muy recomendabe que a guarde en os favortos de su navegador para
tenera como gua de referenca.
E c dgo fue n te de
|Ouery
D o cume n tacn de
|Ouery F oro de
|Ouery
F av ortos en
Decous
Cana IR C #|query en
F reen o de
1.2. 'onceptos B$sicos de
"avaScript
1.2.1. .ntroducci&n
|Ouery se encuentra escrto en |avaScrpt, un engua|e de programacn
muy rco y expresvo.
E captuo est orentado a personas sn experenca en e engua|e,
abarcando conceptos bscos y probemas frecuentes que pueden presentarse
a traba|ar con e msmo. Por otro ado, a seccn puede ser benecosa para
quenes utcen otros engua|es de programacn para entender as
pecuardades de |avaScrpt.
S usted esta nteresado en aprender e engua|e ms en profunddad, puede eer
e bro JavaScript: The Good Parts escrto por Dougas Crockford.
1.2.2. Sinta/is
B$sica
Comprensn de decaracones, nombres de varabes, espacos en banco, y
otras sntaxs bscas de |avaScrpt.
Declaracin simple de
variable
var foo = 'heo word';
Los espacios en blanco no tienen valor
fuera de las comillas
var foo = 'heo word';
Los parntesis indican
prioridad
2 * 3 + 5; // es gua a 11; a mutpcacn ocurre prmero
2 * (3 + 5); // es gua a 16; por o parntess, a suma ocurre prmero
La tabulacin mejora la lectura del cdigo, pero no posee
ningn signi!cado especial
var foo = functon() {
consoe.og('heo');
};
1.2.3. Operadores
"peradores #$sicos
Los operadores bscos permten manpuar vaores.
%oncatenacin
var foo = 'heo'; var bar =
'word';
consoe.og(foo + ' ' + bar); // a consoa de depuracn muestra 'heo word'
&ultiplicacin '
divisin
2 * 3;
2 / 3;
(ncrementacin '
decrementacin
var = 1;
var | = ++; // ncrementacn preva: | es gua a 2; es gua a 2 var k = ++; // ncrementacn
posteror: k es gua a 2; es gua a 3
"peraciones con )meros ' %adenas
de %aracteres
En |avaScrpt, as operacones con nmeros y cadenas de caracteres (en ngs
strings) pueden ocasonar resutados no esperados.
Suma vs*
concatenacin
var foo = 1; var bar
= '2';
consoe.og(foo + bar); // error: La consoa de depuracn muestra 12
+or,ar a una cadena de caracteres actuar
como un nmero
= '2';
// e constructor 'Number' obga a a cadena comportarse como un nmero consoe.og(foo + Number(bar)); // a
consoa de depuracn muestra 3
E constructor Nmber, cuando es amado como una funcn (como se muestra en
e e|empo) obga a su argumento a comportarse como un nmero. Tambn
es posbe utzar e operador de sma naria, entregando e msmo resutado:
+or,ar a una cadena de caracteres actuar como un nmero
-utili,ando el operador de suma unaria.
consoe.og(foo + +bar);
"peradores
Lgicos
Los operadores gcos permten evauar una sere de operandos utzando
operacones AND y OR.
"peradores lgicos
/)D ' "0
var foo = 1; var
bar = 0; var baz
= 2;
foo || bar; // devueve 1, e cua es verdadero (true) bar || foo; //
devueve 1, e cua es verdadero (true)
foo && bar; // devueve 0, e cua es faso (fase)
foo && baz; // devueve 2, e cua es verdadero (true) baz && foo; //
devueve 1, e cua es verdadero (true)
E operador || (OR gco) devueve e vaor de prmer operando, s ste es
verdadero; caso contraro devueve e segundo operando. S ambos operandos
son fasos devueve faso (false). E operador && (AND gco) devueve e vaor
de prmer operando s ste es faso; caso contraro devueve e segundo
operando. Cuando ambos vaores son verdaderos devueve verdadero (tre), sno
devueve faso.
Puede consutar a seccn Eementos Verdaderos y Fasos para ms detaes sobre que
vaores se evaan como true y cuaes se evaan como fase.
Nota
Pede !e a veces note !e algnos desarrolladores tili"an esta l#gica en $%os de control
en lgar de tili"ar la declaraci#n if. Por e%emplo:
// reazar ago con foo s foo es verdadero foo &&
doSomethng(foo);
// estabecer bar gua a baz s baz es verdadero;
// caso contraro, estabecer a bar gua a
// vaor de createBar()
var bar = baz || createBar();
Este esto de decaracn es muy eegante y concso; pero puede ser dfc
para eer (sobretodo para prncpantes). Por eso se expcta, para reconocero
cuando este eyendo cdgo. Sn embargo su utzacn no es recomendabe a
menos que est cmodo con e concepto y su comportamento.
"peradores de
%omparacin
Los operadores de comparacn permten comprobar s determnados vaores son
equvaentes o dn- tcos.
"peradores de
%omparacin
= 0; var baz = '1';
var bm = 2;
foo == bar; // devueve faso (fase)
foo != bar; // devueve verdadero (true)
foo == baz; // devueve verdadero (true); tenga cudado
foo === baz; // devueve faso (fase)
foo !== baz; // devueve verdadero (true) foo ===
parseInt(baz); // devueve verdadero (true)
foo > bm; // devueve faso (fase)
bm > baz; // devueve verdadero (true) foo <=
baz; // devueve verdadero (true)
1.2.4. '&digo 'ondicional
A veces se desea e|ecutar un boque de cdgo ba|o certas condcones. Las
estructuras de contro de u|o - a travs de a utzacn de as decaracones f y
ese permten hacero.
%ontrol del 1ujo
var foo = true; var bar =
fase;
f (bar) {
// este cdgo nunca se e|ecutar consoe.og('heo!');
}
f (bar) {
// este cdgo no se e|ecutar
} ese {
f (foo) {
// este cdgo se e|ecutar
} ese {
// este cdgo se e|ecutar s foo y bar son fasos (fase)
}
}
Not
a
&n na l'nea singlar( cando se escribe na declaraci#n if( las l laves no son estrictamente
necesarias) sin embargo es recomendable s tili"aci#n( *a !e hace !e el c#digo sea
mcho ms legible.
Debe tener en cuenta de no denr funcones con e msmo nombre mtpes
veces dentro de decaracones f/ese, ya que puede obtener resutados no
esperados.
Elementos 2erdaderos ' +alsos
Para controar e u|o adecuadamente, es mportante entender qu tpos de
vaores son "verdaderos" y cuaes "fasos". A veces, agunos vaores pueden
parecer una cosa pero a na termnan sendo otra.
2alores 3ue devuelven verdadero -true.
'0';
'any strng'; // cuaquer cadena
||; // un arrego vaco
{}; // un ob|eto vaco
1; // cuaquer nmero dstnto a cero
2alores 3ue devuelven falso
-false.
0;
''; // una cadena vaca
NaN; // a varabe |avaScrpt "not-a-number" (No es un nmero) nu; // un vaor nuo
undened; // tenga cudado -- ndendo (undened) puede ser redendo
2ariables %ondicionales 4tili,ando el
"perador 5ernario
A veces se desea estabecer e vaor de una varabe dependendo de certa
condcn. Para hacero se puede utzar una decaracn f/ese, sn embargo en
muchos casos es ms convenente utzar e operador ternaro. |Dencn: E
operador ternario evaa una condcn; s a condcn es verdadera, devueve certo
vaor, caso contraro devueve un vaor dferente.|
El operador
ternario
// estabecer a foo gua a 1 s bar es verdadero;
// caso contraro, estabecer a foo gua a 0 var foo = bar ? 1 : 0;
E operador ternaro puede ser utzado sn devover un vaor a a varabe,
sn embargo este uso generamente es desaprobado.
Declaracin
S6itch
En ugar de utzar una sere de decaracones f/ese/ese f/ese, a veces puede
ser t a utzacn de a decaracn swtch. |Dencn: La decaracn Swtch
evaa e vaor de una varabe o expresn, y e|ecuta dferentes boques de
cdgo dependendo de ese vaor.|
4na declaracin
S6itch
swtch (foo) { case
'bar':
aert('e vaor es bar');
break;
case 'baz':
aert('e vaor es baz'); break;
defaut:
aert('de forma predetermnada se e|ecutar este cdgo'); break;
}
Las decaracones swtch son poco utzadas en |avaScrpt, debdo a que e msmo
comportamento es posbe obtenero creando un ob|eto, e cua posee ms
potenca ya que es posbe reutzaro, usaro para reazar pruebas, etc. Por
e|empo:
var stuhToDo = { 'bar' :
functon() {
aert('e vaor es bar');
},
'baz' : functon() { aert('e vaor es baz');
},
'defaut' : functon() {
aert('de forma predetermnada se e|ecutar este cdgo');
}
};
f (stuhToDo|foo|) { stuhToDo|foo|();
} ese { stuhToDo|'defaut'|();
}
Ms adeante se abarcar e concepto de ob|etos.
1.2.5. Bucles
Los buces (en ngs loops) permten e|ecutar un boque de cdgo un determnado
nmero de veces.
#ucles
// muestra en a consoa 'ntento 0', 'ntento 1', ..., 'ntento 4' for (var =0; <5; ++) {
consoe.og('ntento ' + );
}
*Note que en e e|empo se utza a paabra var antes de a varabe , esto
hace que dcha varabe quede dentro de "acance" (en ngs scope) de buce.
Ms adeante en este captuo se examnar en profunddad e concepto de
acance.*
#ucles
4tili,ando +or
Un buce utzando for se compone de cuatro estados y posee a
sguente estructura:
for (|expresnInca|; |condcn|; |ncrementoDeLaExpresn|) |cuerpo|
E estado e+presi#n,nicial es e|ecutado una soa vez, antes que e buce
comence. ste otorga a oportundad de preparar o decarar varabes.
E estado condici#n es e|ecutado antes de cada repetcn, y retorna un vaor
que decde s e buce debe contnuar e|ecutndose o no. S e estado
condcona evaa un vaor faso e buce se detene.
E estado incremento-eLa&+presi#n es e|ecutado a na de cada repetcn y otorga
a oportundad de cambar e estado de mportantes varabes. Por o genera,
este estado mpca a ncrementacn o decrementacn de un contador.
E cerpo es e cdgo a e|ecutar en cada
repetcn de buce.
4n tpico bucle
utili,ando for
for (var = 0, mt = 100; < mt; ++) {
// Este boque de cdgo ser e|ecutado 100 veces consoe.og('Currenty
at ' + );
// Nota: e tmo regstro que se mostrar
// en a consoa ser "Actuamente en 99"
}
#ucles 4tili,ando 7hile
Un buce utzando whe es smar a una decaracn condcona f, excepto que e
cuerpo va a contnuar e|ecutndose hasta que a condcn a evauar sea fasa.
whe (|condcn|) |cuerpo| 4n
tpico bucle utili,ando
6hile var = 0;
whe ( < 100) {
// Este boque de cdgo se e|ecutar 100 veces consoe.og('Actuamente en ' + );
++; // ncrementa a varabe
}
Puede notar que en e e|empo se ncrementa e contador dentro de cuerpo de
buce, pero tambn es posbe combnar a condcn y a ncrementacn, como
se muestra a contnuacn:
#ucle utili,ando 6hile con la combinacin de la condicin ' la
incrementacin
var = -1;
whe (++ < 100) {
// Este boque de cdgo se e|ecutar 100 veces consoe.og('Actuamente en ' + );
}
Se comenza en -1 y uego se utza a ncrementacn preva (++).
#ucles 4tili,ando
Do86hile
Este buce es exactamente gua que e buce utzando whe excepto que e
cuerpo es e|ecutado a menos una vez antes que a condcn sea evauada.
do |cuerpo| whe (|condcn|)
4n bucle utili,ando do8
6hile
do {
// Incuso cuando a condcn sea fasa
// e cuerpo de buce se e|ecutar a menos una vez. aert('Heo');
} whe (fase);
Este tpo de buces son bastantes atpcos ya que en pocas ocasones de
necesta un buce que se e|ecute a menos una vez. De cuaquer forma debe
estar a tanto de eos.
#rea9 '
%ontinue
Usuamente, e n de a e|ecucn de un buce resutar cuando a condcn
no sga evauando un vaor verdadero, sn embargo tambn es posbe parar un
buce utzando a decaracn break dentro de cuerpo.
Detener un bucle
con brea9
for (var = 0; < 10; ++) { f (somethng) {
break;
}
}
Tambn puede suceder que quera contnuar con e buce sn tener que
e|ecutar ms sentencas de cuerpo de msmo buce. Esto puede reazarse
utzando a decaracn contnue.
Saltar a la siguiente iteracin de un bucle
for (var = 0; < 10; ++) { f (somethng) {
contnue;
}
// La sguente decaracn ser e|ecutada
// s a condcn 'somethng' no se cumpe consoe.og('Heo');
}
1.2.6. #alabras -eservadas
|avaScrpt posee un nmero de "paabras reservadas", o paabras que son
especaes dentro de msmo engua|e. Debe utzar estas paabras cuando as
neceste para su uso especco.
abstract
booean
break byte
case catch
char cass
const
contnue
debugger
defaut
deete
do doube
ese enum
export
extends
na
nay
oat for
functon
goto
f mpements
mport
n
nstanceof
nt nterface
ong natve
new
package
prvate
protected
pubc
return
short statc
super
swtch
synchronzed
ths
throw
throws transent
try typeof
var
vod
voate
whe
wth
1.2.7. Arreglos
Los arregos (en ngs arra*s) son stas de vaores con ndce-cero (en ngs
"ero-inde+), es decr, que e prmer eemento de arrego est en e ndce 0. stos
son una forma prctca de amacenar un con|unto de datos reaconados (como
cadenas de caracteres), aunque en readad, un arrego puede ncur mtpes
tpos de datos, ncuso otros arregos.
4n arreglo
simple
var myArray = | 'heo', 'word' |;
/cceder a los tems del arreglo a
travs de su ndice
var myArray = | 'heo', 'word', 'foo', 'bar' |; consoe.og(myArray|3|); //
muestra en a consoa 'bar'
"btener la cantidad de tems
del arreglo
var myArray = | 'heo', 'word' |; consoe.og(myArray.ength); // muestra en
a consoa 2
%ambiar el valor de un tem de
un arreglo
var myArray = | 'heo', 'word' |; myArray|1| = 'changed';
.omo se mestra en el e%emplo /.ambiar el valor de n 'tem de n arreglo0 es posible cambiar el
valor de n 'tem de n arreglo( sin embargo( por lo general( no es aconse%able.
/:adir elementos a un
arreglo
var myArray = | 'heo', 'word' |; myArray.push('new');
5rabajar con
arreglos
var myArray = | 'h', 'e', '', '', 'o' |;
var myStrng = myArray.|on(''); // 'heo'
var mySpt = myStrng.spt(''); // | 'h', 'e', '', '', 'o' |
1.2.8. Objetos
Los ob|etos son eementos que pueden contener cero o ms con|untos de pares
de nombres caves y vaores asocados a dcho ob|eto. Los nombres caves
pueden ser cuaquer paabra o nmero vdo. E vaor puede ser cuaquer tpo
de vaor: un nmero, una cadena, un arrego, una funcn, ncuso otro ob|eto.
|Dencn: Cuando uno de os vaores de un ob|eto es una funcn, sta es
nombrada como un m1todo
de ob|eto.| De o contraro, se os ama
propiedades.
Curosamente, en |avaScrpt, cas todo es un ob|eto - arregos, funcones,
nmeros, ncuso cadenas
-y todos poseen propedades y
mtodos.
%reacin de un
;objeto literal<
var myOb|ect = { sayHeo:
functon() {
consoe.og('heo');
},
myName: 'Rebecca'
};
myOb|ect.sayHeo(); // se ama a mtodo sayHeo,
// e cua muestra en a consoa 'heo'
consoe.og(myOb|ect.myName); // se ama a a propedad myName,
// a cua muestra en a consoa 'Rebecca'
Nota
Notar !e cando se crean ob%etos literales( el nombre de la propiedad pede ser cal!ier
identi2cador JavaScript( na cadena de caracteres 3encerrada entre comillas4 o n nmero:
var myOb|ect = { vadIdenter:
123,
'some strng': 456,
99999: 789
};
Los ob|etos teraes pueden ser muy tes para a organzacn de cdgo,
para ms nformacn puede eer e artcuo (en ngs) Usng O b |ects to Organze
Y our C o de por Rebecca Murphey.
1.2.9. Funciones
Las funcones contenen boques de cdgo que se e|ecutaran repetdamente. A
as msmas se e pueden pasar argumentos, y opconamente a funcn puede
devover un vaor.
Las funcones pueden ser creadas de varas formas:
Declaracin de una funcin
functon foo() { /* hacer ago */ }
Declaracin de una funcin nombrada
var foo = functon() { /* hacer ago */ }
&s preferible el m1todo de fnci#n nombrada debido a algnas p r ofndas r a"ones t1 cni c a s. ,galmente(
es probable encontrar a los dos m1todos cando se revise c#digo JavaScript.
4tili,acin de
+unciones 4na
funcin simple
var greet = functon(person, greetng) { var text = greetng
+ ', ' + person; consoe.og(text);
};
greet('Rebecca', 'Heo'); // muestra en a consoa 'Heo, Rebecca'
4na funcin 3ue devuelve un valor
+ ', ' + person; return text;
};
consoe.og(greet('Rebecca','heo')); // a funcn devueve 'Heo, Rebecca',
// a cua se muestra en a consoa
4na funcin 3ue devuelve otra funcin
+ ', ' + person; return functon() { consoe.og(text); };
};
var greetng = greet('Rebecca', 'Heo');
greetng(); // se muestra en a consoa 'Heo, Rebecca'
+unciones /nnimas
/utoejecutables
Un patrn comn en |avaScrpt son as funcones annmas autoe|ecutabes.
Este patrn consste en crear una expresn de funcn e nmedatamente
e|ecutara. E msmo es muy t para casos en que no se desea ntervenr
espacos de nombres gobaes, debdo a que nnguna varabe decarada dentro
de a funcn es vsbe desde afuera.
+uncin annima
autoejecutable
(functon(){
var foo = 'Heo word';
})();
consoe.og(foo); // ndendo (undened)
+unciones como
/rgumentos
En |avaScrpt, as funcones son "cudadanos de prmera case" - pueden ser
asgnadas a varabes o pasadas a otras funcones como argumentos. En
|Ouery, pasar funcones como argumentos es una prctca muy comn.
=asar una funcin annima como
un argumento
2
var myFn = functon(fn) { var resut
= fn(); consoe.og(resut);
};
myFn(functon() { return 'heo word'; }); // muestra en a consoa 'heo word'
=asar una funcin nombrada como un argumento
var myFn = functon(fn) { var resut
= fn(); consoe.og(resut);
};
var myOtherFn = functon() { return 'heo
word';
};
myFn(myOtherFn); // muestra en a consoa 'heo word'
1.2.10. %eterminaci&n del ,ipo de 0ariable
|avaScrpt ofrece una manera de poder comprobar e "tpo" (en ngs t*pe) de
una varabe. Sn embargo, e resutado puede ser confuso - por e|empo, e tpo
de un arrego es "ob|ect".
Por eso, es una prctca comn utzar e operador typeof cuando se trata de
determnar e tpo de un vaor especco.
Determinar el tipo en diferentes variables
var myFuncton = functon() {
consoe.og('heo');
};
var myOb|ect = { foo :
'bar'
};
var myArray = | 'a', 'b', 'c' |; var myStrng =
'heo';
var myNumber = 3;
typeof myFuncton; // devueve 'functon' typeof
myOb|ect; // devueve 'ob|ect'
typeof myArray; // devueve 'ob|ect' -- tenga cudado typeof myStrng;
// devueve 'strng'
typeof myNumber; // devueve 'number'
typeof nu; // devueve 'ob|ect' -- tenga cudado
f (myArray.push && myArray.sce && myArray.|on) {
// probabemente sea un arrego
// (este esto es amado, en ngs, "duck typng")
}
f (Ob|ect.prototype.toStrng.ca(myArray) === '|ob|ect Array|') {
// dentvamente es un arrego;
// esta es consderada a forma ms robusta
// de determnar s un vaor es un arrego.
}
|Ouery ofrece mtodos para ayudar a determnar e tpo de un determnado
vaor. Estos mtodos sern vstos ms adeante.
1.2.11. *a palabra clave this
En |avaScrpt, as como en a mayora de os engua|es de programacn
orentados a ob|etos, ths es una paabra cave especa que hace referenca a
ob|eto en donde e mtodo est sendo nvocado. E vaor de ths es determnado
utzando una sere de smpes pasos:
1. S a funcn es nvocada utzando F uncton.ca o F uncton.app y, ths
tendr e vaor de prmer argumento pasado a mtodo. S e argumento
es nuo (nll) o ndendo (nde2ned), ths har referenca e ob|eto goba (e
ob|eto wndow);
2. S a funcn a nvocar es creada utzando F uncton.bn d, ths ser e prmer
argumento que es pasado a a funcn en e momento en que se a crea;
3. S a funcn es nvocada como un mtodo de un ob|eto, ths referencar a
dcho ob|eto;
4. De o contraro, s a funcn es nvocada como una funcn ndependente,
no unda a agn ob|eto, ths referencar a ob|eto goba.
4na funcin invocada utili,ando
+unction*call
var myOb|ect = {
sayHeo : functon() {
consoe.og('Hoa, m nombre es ' + ths.myName);
},
myName : 'Rebecca'
};
var secondOb|ect = { myName :
'Con'
};
myOb|ect.sayHeo(); // regstra 'Hoa, m nombre es Rebecca'
myOb|ect.sayHeo.ca(secondOb|ect); // regstra 'Hoa, m nombre es Con'
4na funcin creada utili,ando +unction*bind
var myName = 'e ob|eto goba', sayHeo =
functon () {
},
myOb|ect = {
myName : 'Rebecca'
};
var myOb|ectHeo = sayHeo.bnd(myOb|ect);
sayHeo(); // regstra 'Hoa, m nombre es e ob|eto goba' myOb|ectHeo(); //
regstra 'Hoa, m nombre es Rebecca'
4na funcin vinculada a un objeto
var myName = 'e ob|eto goba', sayHeo =
functon() {
},
myOb|ect = {
myName : 'Rebecca'
},
secondOb|ect = { myName :
'Con'
};
myOb|ect.sayHeo = sayHeo;
secondOb|ect.sayHeo = sayHeo;
sayHeo(); // regstra 'Hoa, m nombre es e ob|eto goba' myOb|ect.sayHeo();
// regstra 'Hoa, m nombre es Rebecca' secondOb|ect.sayHeo(); //
regstra 'Hoa, m nombre es Con'
Nota
&n algnas oportnidades( cando se invoca na fnci#n !e se encentra dentro de n
espacio de nombres 3en ingl1s namespace4 amplio( pede ser na tentaci#n gardar la
referencia a la fnci#n actal en na variable ms corta * accesible. Sin embargo( es
importante no reali"arlo en instancias de m1todos( *a !e pede llevar a la e%ecci#n de
c#digo incorrecto. Por e%emplo:
var myNamespace = { myOb|ect: {
sayHeo: functon() {
},
myName: 'Rebecca'
}
};
var heo = myNamespace.myOb|ect.sayHeo;
heo(); // regstra 'Hoa, m nombre es undened'
Para que no ocurran estos errores, es necesaro hacer referenca a ob|eto en
donde e mtodo es nvocado:
var myNamespace = { myOb|ect : {
sayHeo : functon() {
},
myName : 'Rebecca'
}
};
var ob| = myNamespace.myOb|ect;
ob|.sayHeo(); // regstra 'Hoa, m nombre es Rebecca'
1.2.12. Alcance
E "acance" (en ngs scope) se reere a as varabes que estn dsponbes en
un boque de cdgo en un tempo determnado. La fata de comprensn de
este concepto puede evar a una frustrante experenca de depuracn.
Cuando una varabe es decarada dentro de una funcn utzando a paabra
cave var, sta ncamente esta dsponbe para e cdgo dentro de a funcn -
todo e cdgo fuera de dcha funcn no puede acceder a a varabe. Por otro
ado, as funcones dendas dentro de a funcn podrn acceder a a varabe
decarada.
Las varabes que son decaradas dentro de a funcn sn a paabra cave var no
quedan dentro de mbto de a msma funcn - |avaScrpt buscar e ugar
en donde a varabe fue prevamente decarada, y en caso de no haber sdo
decarada, es denda dentro de acance goba, o cua puede ocasonar
consecuencas nesperadas;
+unciones tienen acceso a variables de!nidas
dentro del mismo alcance
var foo = 'heo';
var sayHeo = functon() {
consoe.og(foo);
};
sayHeo(); // muestra en a consoa 'heo' consoe.og(foo); //
tambn muestra en a consoa 'heo'
El cdigo de afuera no tiene acceso a la variable de!nida dentro
de la funcin
var sayHeo = functon() { var foo =
'heo'; consoe.og(foo);
};
sayHeo(); // muestra en a consoa 'heo'
consoe.og(foo); // no muestra nada en a consoa
2ariables con nombres iguales pero valores diferentes pueden
existir en diferentes alcan8 ces
var foo = 'word';
var sayHeo = functon() { var foo =
'heo'; consoe.og(foo);
};
sayHeo(); // muestra en a consoa 'heo'
consoe.og(foo); // muestra en a consoa 'word'
Las funciones pueden ;ver< los cambios en las variables
antes de 3ue la funcin sea de!nida
var myFuncton = functon() { var foo =
'heo';
var myFn = functon() {
consoe.og(foo);
};
foo = 'word';
return myFn;
};
var f = myFuncton();
f(); // regstra 'word' -- error
/lcance
// una funcn annma autoe|ecutabe (functon() {
var baz = 1;
var bm = functon() { aert(baz); };
bar = functon() { aert(baz); };
})();
consoe.og(baz); // La consoa no muestra nada, ya que baz
// esta denda dentro de acance de a funcn annma
bar(); // bar esta dendo fuera de a funcn annma
// ya que fue decarada sn a paabra cave var; adems,
// como fue denda dentro de msmo acance que baz,
// se puede consutar e vaor de baz a pesar que
// sta este denda dentro de acance de a funcn annma
bm(); // bm no esta denda para ser accesbe fuera de a funcn annma,
// por o cua se mostrar un error
1.2.13. 'lausuras
Las causuras (en ngs closres) son una extensn de concepto de acance
(scope) - funcones que tenen acceso a as varabes que estn dsponbes
dentro de mbto en donde se cre a funcn. S este concepto es confuso, no
debe preocuparse: se entende me|or a travs de e|empos.
En e e|empo 2.47 se muestra a forma en que funcones tenen acceso para
cambar e vaor de as varabes. E msmo comportamento sucede en
funcones creadas dentro de buces - a funcn "observa" e cambo en a
varabe, ncuso despus de que a funcn sea denda, resutando que en
todos os ccks aparezca una ventana de aerta mostrando e vaor 5.
>%mo establecer el
valor de i?
/* esto no se comporta como se desea; */
/* cada cck mostrar una ventana de aerta con e vaor 5 */ for (var =0; <5; ++) {
$('<p>hacer cck</p>').appendTo('body').cck(functon() { aert();
});
}
Establecer el valor de i utili,ando una clausura
/* soucn: "causurar" e vaor de dentro de createFuncton */ var createFuncton = functon()
{
return functon() { aert();
};
};
for (var = 0; < 5; ++) {
$('<p>hacer cck</p>').appendTo('body').cck(createFuncton());
}
Las causuras tambn pueden ser utzadas para resover probemas con a
paabra cave ths, a cua es nca en cada acance.
4tili,ar una clausura para acceder simult$neamente a
instancias de objetos internos ' externos*
var outerOb| = { myName:
'externo',
outerFuncton: functon() {
// provee una referenca a msmo ob|eto outerOb|
// para utzar dentro de nnerFuncton var sef = ths;
var nnerOb| = { myName:
'nterno',
nnerFuncton: functon() {
consoe.og(sef.myName, ths.myName); // regstra 'externo nterno'
}
};
nnerOb|.nnerFuncton();
consoe.og(ths.myName); // regstra 'externo'
}
};
outerOb|.outerFuncton();
Este mecansmo puede ser t cuando traba|e con funcones de devoucn de
amadas (en ngs callbac5s). Sn embargo, en estos casos, es preferbe que
utce F uncton.bnd ya que evtar cuaquer sobrecarga asocada con e acance
(scope).
1.3. 'onceptos B$sicos de jQuery
1.3.1. 12document34ready23
No es posbe nteractuar de forma segura con e contendo de una pgna
hasta que e documento no se encuentre preparado para su manpuacn.
|Ouery permte detectar dcho estado a travs de a decaracn $
(document).ready() de forma ta que e boque se e|ecutar so una vez que a
pgna este dsponbe.
El blo3ue @
-document.*read'-.
$(document).ready(functon() {
consoe.og('e documento est preparado');
});
Exste una forma abrevada para $(document).ready() a cua podr encontrar
agunas veces; sn embargo, es recomendabe no utzara en caso que este
escrbendo cdgo para gente que no conoce |Ouery.
+orma abreviada para @
-document.*read'-.
3
$(functon() {
consoe.og('e documento est preparado');
});
Adems es posbe pasare a $(document).ready() una funcn nombrada en ugar de
una annma:
=asar una funcin nombrada en lugar de una funcin annima
functon readyFn() {
// cdgo a e|ecutar cuando e documento este sto
}
$(document).ready(readyFn);
1.3.2. Selecci&n de
(lementos
E concepto ms bsco de |Ouery es e de "seecconar agunos eementos y
reazar accones con eos". La bboteca soporta gran parte de os seectores
CSS3 y varos ms no estandarzados. En
h ttp://ap.|quer y .com/category/seectors/ se puede encontrar una competa
referenca sobre os seectores de a bboteca.
A contnuacn se muestran agunas tcncas comunes para a
seeccn de eementos:
Seleccin de elementos en
base a su (D
$('#myId'); // notar que os IDs deben ser ncos por pgna
Seleccin de elementos en base al
nombre de clase
$('dv.myCass'); // s se especca e tpo de eemento,
// se me|ora e rendmento de a seeccn
Seleccin de elementos por
su atributo
$('nput|name=rst_name|'); // tenga cudado, que puede ser muy ento
Seleccin de elementos en forma de
selector %SS
$('#contents u.peope ');
=seudo8
selectores
$('a.externa:rst'); // seeccona e prmer eemento <a>
// con a case 'externa'
$('tr:odd'); // seeccona todos os eementos <tr>
// mpares de una taba
$('#myForm :nput'); // seeccona todos os eementos de tpo nput
// dentro de formuaro #myForm
3
$('dv:vsbe'); // seeccona todos os dvs vsbes
$('dv:gt(2)'); // seeccona todos os dvs excepto os tres prmeros
$('dv:anmated'); // seeccona todos os dvs actuamente anmados
Not
a
.ando se tili"an los psedo-selectores :visible * :hidden( %6er* compreba la visi-
bilidad actal del elemento pero no si 1ste posee asignados los estilos .SS visibility o
display 7 en otras palabras( veri2ca si e ato y ancho fsco de eemento es
ma*or a
cero. Sin embargo( esta comprobaci#n no fnciona con los elementos <tr>) en este
caso(
%6er* compreba si se est aplicando el estilo display * va a considerar al elemento
como oclto si posee asignado el valor none. 8dems( los elementos !e an no
feron
a9adidos al -:; sern tratados como ocltos( inclso si tienen aplicados estilos
indicando
!e deben ser visibles 3&n la secci#n ;aniplaci#n de este manal( se e+plica como
crear * a9adir elementos al -:;4.
Como referenca, este es e fragmento de cdgo que utza |Ouery para
determnar cuando un eemento es vsbe o no. Se ncorporaron os comentaros
para que quede ms caro su entendmento:
|Ouery.expr.ters.hdden = functon( eem ) {
var wdth = eem.ohsetWdth, heght = eem.ohsetHeght, skp =
eem.nodeName.toLowerCase() === "tr";
// e eemento posee ato 0, ancho 0 y no es un <tr>? return wdth === 0 &&
heght === 0 && !skp ?
// entonces debe estar ocuto (hdden) true :
// pero s posee ancho y ato
// y no es un <tr>
wdth > 0 && heght > 0 && !skp ?
// entonces debe estar vsbe fase :
// s nos encontramos aqu, es porque e eemento posee ancho
// y ato, pero adems es un <tr>,
// entonces se verca e vaor de esto dspay
// apcado a travs de CSS
// para decdr s est ocuto o no |Ouery.curCSS(eem, "dspay")
=== "none";
};
|Ouery.expr.ters.vsbe = functon( eem ) { return !
|Ouery.expr.ters.hdden( eem );
};
Eleccin de
Selectores
La eeccn de buenos seectores es un punto mportante cuando se desea
me|orar e rendmento de cdgo. Una pequea especcdad - por e|empo,
ncur e tpo de eemento (como dv) cuando se reaza una seeccn por e
nombre de case - puede ayudar bastante. Por eso, es recomendabe dare
agunas "pstas" a |Ouery sobre en que ugar de documento puede encontrar o
que desea seecconar. Por otro ado, demasada especcdad puede ser
per|udca. Un seector como #mTaba thead tr th.especa es un exceso, o me|or sera
utzar #mTaba th.especa.
|Ouery ofrece muchos seectores basados en atrbutos, que permten reazar
seeccones basadas en e contendo de os atrbutos utzando smpcacones
de expresones reguares.
// encontrar todos os <a> cuyo atrbuto re termnan en "thnger"
$("a|re$='thnger'|");
Estos tpos de seectores pueden resutar tes pero tambn ser muy entos.
Cuando sea posbe, es recomendabe reazar a seeccn utzando IDs,
nombres de cases y nombres de etquetas.
S desea conocer ms sobre este asunto, P au Irsh reaz una gran
prese n tacn sobre me|oras de rendme n to en |a v aScrpt (en nges), a cua
posee varas dapostvas centradas en seectores.
%omprobar
Selecciones
Una vez reazada a seeccn de os eementos, querr conocer s dcha
seeccn entreg agn resutado. Para eo, pueda que escrba ago as:
f ($('dv.foo')) { ... }
Sn embargo esta forma no funconar. Cuando se reaza una seeccn utzando $(),
sempre es devueto un ob|eto, y s se o evaa, ste sempre devover true.
Incuso s a seeccn no contene nngn eemento, e cdgo dentro de boque f
se e|ecutar.
En ugar de utzar e cdgo mostrado, o que se debe hacer es preguntar por a
cantdad de eementos que posee a seeccn que se e|ecut. Esto es posbe
reazaro utzando a propedad |avaScrpt ength. S a respuesta es 0, a
condcn evauar faso, caso contraro (ms de 0 eementos), a condcn
ser verdadera.
Evaluar si una seleccin
posee elementos
f ($('dv.foo').ength) { ... }
Auardar
Selecciones
Cada vez que se hace una seeccn, una gran cantdad de cdgo es
e|ecutado. |Ouery no guarda e resutado por s soo, por o tanto, s va a
reazar una seeccn que uego se har de nuevo, deber savar a seeccn
en una varabe.
Auardar selecciones en
una variable
var $dvs = $('dv');
Not
a
&n el e%emplo /Gardar selecciones en na variable0( la variable comien"a con el
signo de d#lar. .ontrariamente a otros lenga%es de programaci#n( en JavaScript este
signo no posee ningn signi2cado especial 7 es solamente otro carcter. Sin embargo
a!' se tili"ar para indicar !e dicha variable posee n ob%eto %6er*. &sta
prctica 7 na especie de Notaci#n <ngara 7 es solo na convenci#n * no es
obligatoria.
Una vez que a seeccn es guardada en a varabe, se a puede utzar en
con|unto con os mtodos de |Ouery y e resutado ser gua que utzando a
seeccn orgna.
Not
a
La selecci#n obtiene s#lo los elementos !e estn en la pgina cando se reali"#
dicha acci#n. Si lego se a9aden elementos al docmento( ser necesario repetir la
selecci#n o a9adir los elementos nevos a la selecci#n gardada en la variable. &n otras
palabras( las selecciones gardadas no se actali"an /mgicamente0 cando el -:; de
modi2ca.
0e!namiento ' +iltrado de
Selecciones
A veces, puede obtener una seeccn que contene ms de o que necesta; en
este caso, es necesaro renar dcha seeccn. |Ouery ofrece varos mtodos
para poder obtener exactamente o que desea.
0e!namiento de
selecciones
$('dv.foo').has('p'); // e eemento dv.foo contene eementos <p>
$('h1').not('.bar'); // e eemento h1 no posse a case 'bar'
$('u ').ter('.current'); // un tem de una sta desordenada
// que posse a case 'current'
$('u ').rst(); // e prmer tem de una sta desordenada
$('u ').eq(5); // e sexto tem de una sta desordenada
Seleccin de Elementos de un
+ormulario
|Ouery ofrece varos pseudo-seectores que ayudan a encontrar eementos
dentro de os formuaros, stos son especamente tes ya que dependendo
de os estados de cada eemento o su tpo, puede ser dfc dstnguros
utzando seectores CSS estndar.
Bbutton Seeccona eementos <button> y con e atrbuto
type='button'
Bchec9box Seeccona eementos <nput> con e atrbuto
type='checkbox'
Bchec9ed Seeccona eementos <nput> de tpo checkbox
seecconados
Bdisabled Seeccona eementos de formuaro que
estn deshabtados
Benabled Seeccona eementos de formuaro que
estn habtados
B!le Seeccona eementos <nput> con e atrbuto
type='e'
Bimage Seeccona eementos <nput> con e atrbuto
type='mage'
Binput Seeccona eementos <nput>, <textarea> y
<seect>
Bpass6ord Seeccona eementos <nput> con e atrbuto
type='password'
Bradio Seeccona eementos <nput> con e atrbuto
type='rado'
Breset Seeccona eementos <nput> con e atrbuto
type='reset'
Bselected Seeccona eementos <optons> que estn
seecconados
Bsubmit Seeccona eementos <nput> con e atrbuto
type='submt'
Btext Seeccona eementos <nput> con e atrbuto
type='text'
4tili,ando pseudo8selectores en elementos
de formularios
$('#myForm :nput'); // obtene todos os eementos nputs
// dentro de formuaro #myForm
1.3.3. ,rabajar con
Selecciones
Una vez reazada a seeccn de os eementos, es posbe utzaros en con|unto
con dferentes mtodos. stos, generamente, son de dos tpos: obtenedores
(en ngs getters) y estabecedores (en ngs setters). Los mtodos obtenedores
devueven una propedad de eemento seecconado; mentras que os mtodos
estabecedores |an una propedad a todos os eementos seecconados.
Encadenami
ento
S en una seeccn se reaza una amada a un mtodo, y ste devueve un
ob|eto |Ouery, es posbe segur un "encadenado" de mtodos en e ob|eto.
Encadenami
ento
$('#content').nd('h3').eq(2).htm('nuevo texto para e tercer eemento h3');
Por otro ado, s se est escrbendo un encadenamento de mtodos que
ncuyen muchos pasos, es posbe escrbros nea por nea, hacendo que e
cdgo uzca ms agradabe para eer.
+ormateo de cdigo
encadenado
$('#content')
.nd('h3')
.eq(2)
.htm('nuevo texto para e tercer eemento h3');
S desea vover a a seeccn orgna en e medo de encadenado, |Ouery ofrece
e mtodo $.fn.end
para poder
hacero.
0establecer la seleccin original utili,ando el
mtodo @*fn*end
$('#content')
.nd('h3')
.eq(2)
.htm('nuevo texto para e tercer eemento h3')
.end() // reestabece a seeccn a todos os eementos h3 en #content
.eq(0)
.htm('nuevo texto para e prmer eemento h3');
Not
a
&l encadenamiento es m* poderoso * es na caracter'stica !e mchas bibliotecas
Ja- vaScript han adoptado desde !e %6er* se hi"o poplar. Sin embargo( debe ser
tili"ado con cidado. =n encadenamiento de m1todos e+tensivo peden hacer n
c#digo e+trema- damente dif'cil de modi2car * deprar. No e+iste na regla !e
indi!e !e tan largo o corto debe ser el encadenado 7 pero es recomendable !e
tenga en centa este conse%o.
"btenedores -Aetters. C
Establecedores -Setters.
|Ouery "sobrecarga" sus mtodos, en otras paabras, e mtodo para
estabecer un vaor posee e msmo nombre que e mtodo para obtener un
vaor. Cuando un mtodo es utzado para estabecer un vaor, es amado
mtodo estabecedor (en ngs setter). En cambo, cuando un mtodo es
utzado para obtener (o eer) un vaor, es amado obtenedor (en ngs getter).
El mtodo @*fn*html utili,ado como
establecedor
$('h1').htm('heo word');
El mtodo html utili,ado como
obtenedor
$('h1').htm();
Los mtodos estabecedores devueven un ob|eto |Ouery, permtendo
contnuar con a amada de ms mtodos en a msma seeccn, mentras que
os mtodos obtenedores devueven e vaor por e cua se consut, pero no
permten segur amando a ms mtodos en dcho vaor.
1.3.4. 'SS5 (stilos5 6 %imensiones
|Ouery ncuye una manera t de obtener y estabecer propedades
CSS a os eementos.
Nota
Las propiedades .SS !e incl*en como separador n gi#n del medio( en JavaScript deben
ser transformadas a s estilo CameCase. Por e%emplo( cando se la tili"a como
propiedad
de n m1todo( el estilo .SS font-size deber ser e+presado como fontSize. Sin embargo(
esta regla no es aplicada cando se pasa el nombre de la propiedad .SS al m1todo $.fn.css
7 en este caso( los dos formatos 3en CameCase o con el gi#n del medio4 fncionarn.
"btener
propiedades %SS
$('h1').css('fontSze'); // devueve una cadena de caracteres como "19px"
$('h1').css('font-sze'); // tambn funcona
Establecer
propiedades %SS
$('h1').css('fontSze', '100px'); // estabece una propedad ndvdua CSS
$('h1').css({
'fontSze' : '100px',
'coor' : 'red'
}); // estabece mtpes propedades CSS
Notar !e el estilo del argmento tili"ado en la segnda l'nea del e%emplo 7 es n ob%eto !e
contiene mltiples propiedades. &sta es na forma comn de pasar mltiples argmentos a na
fnci#n( * mchos m1todos establecedores de la biblioteca aceptan ob%etos para 2%ar varias
propiedades de na sola ve".
A partr de a versn 1.6 de a bboteca, utzando $.fn.css tambn es posbe
estabecer vaores reatvos en as propedades CSS de un eemento determnado:
Establecer valores %SS
relativos
$('h1').css({
'fontSze' : '+=15px', // suma 15px a tamao orgna de eemento 'paddngTop' : '+=20px' // suma 20px a
paddng superor orgna de eemento
});
4tili,ar %lases para /plicar
Estilos %SS
Para obtener vaores de os estos apcados a un eemento, e mtodo $.fn.css
es muy t, sn embargo, su utzacn como mtodo estabecedor se debe
evtar (ya que, para apcar estos a un eemento, se puede hacer
drectamente desde CSS). En su ugar, o dea, es escrbr regas CSS que se
apquen a cases que descrban os dferentes estados vsuaes de os
eementos y uego cambar a case de eemento para apcar e esto que se
desea mostrar.
5rabajar con
clases
var $h1 = $('h1');
$h1.addCass('bg');
$h1.removeCass('bg');
$h1.toggeCass('bg');
f ($h1.hasCass('bg')) { ... }
Las cases tambn pueden ser tes para guardar nformacn de estado de un
eemento, por e|empo, para ndcar que un eemento fue seecconado.
Dimensio
nes
|Ouery ofrece una varedad de mtodos para obtener y modcar vaores de
dmensones y poscn de un eemento.
E cdgo mostrado en e e|empo "Mtodos bscos sobre Dmensones" es
soo un breve resumen de as funconadades reacones a dmensones en
|Ouery; para un competo detae puede consutar
h ttp://ap.|quer y .com/category/dmensons /.
&todos b$sicos sobre
Dimensiones
$('h1').wdth('50px'); // estabece e ancho de todos os eementos H1
$('h1').wdth(); // obtene e ancho de prmer eemento H1
$('h1').heght('50px'); // estabece e ato de todos os eementos H1
$('h1').heght(); // obtene e ato de prmer eemento H1
$('h1').poston(); // devueve un ob|eto contenendo
// nformacn sobre a poscn
// de prmer eemento reatvo a
// "ohset" (poscn) de su eemento padre
1.3.5. Atributo
s
Los atrbutos de os eementos HTML que conforman una apcacn pueden
contener nformacn t, por eso es mportante poder estabecer y obtener esa
nformacn.
E mtodo $.fn.attr acta tanto como mtodo estabecedor como obtenedor.
Adems, a gua que e mtodo $.fn.css, cuando se o utza como mtodo
estabecedor, puede aceptar un con|unto de paabra cave-vaor o un ob|eto
contenendo ms con|untos.
Establecer
atributos
$('a').attr('href', 'aMyHrefsAreTheSameNow.htm');
$('a').attr({
'tte' : 'a ttes are the same too', 'href' :
'somethngNew.htm'
});
&n el e%emplo( el ob%eto pasado como argmento est escrito en varias l'neas. .omo se e+plic#
anteriormente( los espacios en blanco no importan en JavaScript( por lo cal( es libre de tili"arlos
para hacer el c#digo ms legible. &n entornos de prodcci#n( se peden tili"ar herramientas de
mini2caci#n( los cales !itan los espacios en blanco 3entre otras cosas4 * comprimen el archivo
2nal.
"btener
atributos
$('a').attr('href'); // devueve e atrbuto href pertenecente
// a prmer eemento <a> de documento
1.3.6. -ecorrer el %OM
Una vez obtenda a seeccn, es posbe encontrar otros eementos utzando
a a msma seeccn. En h ttp://ap.|quer y .com/category/tr av ersng/ puede
encontrar una competa documentacn sobre
os mtodos de recorrdo de DOM (en ngs traversing) que
posee |Ouery.
Not
a
-ebe ser cidadoso en recorrer largas distancias en n docmento 7 recorridos
comple%os obligan !e la estrctra del docmento sea siempre la misma( algo !e
es dif'cil de garanti"ar. =no -o dos- pasos para el recorrido esta bien( pero generalmente
ha* !e evitar atravesar desde n contenedor a otro.
&overse a travs del D"& utili,ando
mtodos de recorrido
$('h1').next('p'); // seecconar e nmedato y prxmo
// eemento <p> con respecto a H1
$('dv:vsbe').parent(); // seecconar e eemento contenedor
// a un dv vsbe
$('nput|name=rst_name|').cosest('form'); // seecconar e eemento
// <form> ms cercano a un nput
$('#myLst').chdren(); // seecconar todos os eementos
// h|os de #myLst
$('.seected').sbngs(); // seecconar todos os tems
// hermanos de eemento <>
Tambn es posbe nteractuar con a seeccn utzando e mtodo $.fn.each.
Dcho mtodo nteracta con todos os eementos obtendos en a seeccn y
e|ecuta una funcn por cada uno. La funcn recbe como argumento e ndce
de eemento actua y a msmo eemento. De forma predetermnada, dentro de
a funcn, se puede hacer referenca a eemento DOM a travs de a
decaracn ths.
(nteractuar en una
seleccin
$('#myLst ').each(functon(dx, e) { consoe.og(
'E eemento ' + dx +
'contene e sguente HTML: ' +
$(e).htm()
);
});
1.3.7. Manipulaci&n de (lementos
Una vez reazada a seeccn de os eementos que desea utzar, "a dversn
comenza". Es posbe cambar, mover, remover y dupcar eementos. Tambn
crear nuevos a travs de una sntaxs smpe.
La documentacn competa sobre os mtodos de manpuacn puede
encontrara en a seccn
Manpuaton: h ttp://ap.|quer y .com/category/manpuaton /.
"btener ' Establecer (nformacin en Elementos
Exsten muchas formas por as cuaes de puede modcar un eemento. Entre as
tareas ms comunes estn as de cambar e HTML nterno o agn atrbuto de
msmo. Para este tpo de tareas, |Ouery ofrece mtodos smpes, funconaes en
todos os navegadores modernos. Incuso es posbe obtener nformacn sobre
os eementos utzando os msmos mtodos pero en su forma de mtodo
obtenedor.
Not
a
>eali"ar cambios en los elementos( es n traba%o trivial( pero ha* debe recordar !e
el cambio afectar a todos los elementos en la selecci#n( por lo !e( si desea
modi2car n
s#lo elemento( tiene !e estar segro de especi2carlo en la selecci#n antes de l lamar
al
m1todo
establecedor.
Not
a
.ando los m1todos actan como obtenedores( por lo general( solamente traba%an con
el primer elemento de la selecci#n. 8dems no develven n ob%eto %6er*( por lo cal no
es posible encadenar ms m1todos en el mismo. =na e+cepci#n es el m1todo $.fn.text(
el cal permite obtener el te+to de los elementos de la selecci#n.
@*fn*html Obtene o estabece e contendo HTML de un eemento.
@*fn*text Obtene o estabece e contendo en texto de eemento; en caso se
pasare como argumento cdgo HTML, este es despo|ado.
@*fn*attr Obtene o estabece e vaor de un determnado atrbuto.
@*fn*6idth Obtene o estabece e ancho en pxees de prmer eemento de a
seeccn como un entero.
4
@*fn*height Obtene o estabece e ato en pxees de prmer eemento de a
seeccn como un entero.
@*fn*position Obtene un ob|eto con nformacn sobre a poscn de prmer
eemento de a seeccn, reatvo a prmer eemento padre posconado. &ste
m1todo es solo obtenedor.
@*fn*val Obtene o estabece e vaor (vale) en eementos de formuaros.
%ambiar el D5&L de un elemento
$('#myDv p:rst')
.htm('Nuevo <strong>prmer</strong> prrafo');
&over, %opiar ' 0emover Elementos
Exsten varas maneras para mover eementos a travs de DOM; as cuaes se
pueden separar en dos enfoques:
Ouerer coocar e/os eementos seecconados de forma
reatva a otro eemento Ouerer coocar un eemento reatvo a
e/os eementos seecconados.
Por e|empo, |Ouery provee os mtodos $.fn.nsertAfter y $.fn.after. E mtodo $.fn.nsertAfter cooca
a e/os eementos seecconados despus de eemento que se haya pasado
como argumento; mentras que e mtodo $.fn.after cooca a eemento pasado como
argumento despus de eemento seecconado. Otros mtodos tambn sguen este
patrn: $.fn.nsertBefore y $.fn.before;
$.fn.appendTo y $.fn.append; y $.fn.prependTo y $.fn.prepend.
La utzacn de uno u otro mtodo depender de os eementos que tenga
seecconados y e tpo de referenca que se quera guardar con respecto a
eemento que se esta movendo.
&over elementos utili,ando diferentes enfo3ues
// hacer que e prmer tem de a sta sea e tmo var $ = $('#myLst
:rst').appendTo('#myLst');
// otro enfoque para e msmo probema
$('#myLst').append($('#myLst :rst'));
// debe tener en cuenta que no hay forma de acceder a a
// sta de tems que se ha movdo, ya que devueve
// a sta en s
%lonar Elementos Cuando se utza un mtodo como $.fn.appendTo, o que se
est hacendo es mover a eemento; pero a veces en ugar de eso, se necesta
mover un dupcado de msmo eemento. En este caso, es posbe utzar e
mtodo $.fn.cone.
"btener una copia del elemento
// copar e prmer eemento de a sta y movero a na de a msma
$('#myLst :rst').cone().appendTo('#myLst');
Nota
Si se necesita copiar informaci#n * eventos relacionados al elemento( se debe pasar true
como argmento de $.fn.clone.
0emover elementos Exsten dos formas de remover eementos de
una pgna: Utzando
$.fn.remove o $.fn.detach. Cuando desee remover de forma permanente a eemento,
utze
e mtodo $.fn.remove. Por otro ado, e mtodo $.fn.detach tambn remueve e
eemento, pero
mantene a nformacn y eventos asocados a msmo, sendo t en e caso que
neceste rensertar
e eemento en e documento.
Not
a
&l m1todo $.fn.detach es m* til cando se esta maniplando de forma severa n
elemento( *a !e es posible eliminar al elemento( traba%arlo en el c#digo * lego
restararlo en la pgina nevamente. &sta forma tiene como bene2cio no tocar el -:;
mientras se est modi2cando la informaci#n * eventos del elemento.
Por otro ado, s se desea mantener a eemento pero se necesta emnar su
contendo, es posbe utza e mtodo $.fn.empty, e cua "vacar" e contendo
HTML de eemento.
%rear )uevos Elementos
|Ouery provee una forma fc y eegante para crear nuevos eementos a travs de
msmo mtodo $()
que se utza para reazar seeccones.
%rear nuevos elementos
$('<p>Un nuevo prrafo</p>');
$('< cass="new">nuevo tem de a sta</>');
%rear un nuevo elemento con atributos utili,ando un objeto
$('<a/>', {
htm : 'Un <strong>nuevo</strong> enace', 'cass' : 'new',
href : 'foo.htm'
});
Note !e en el ob%eto !e se pasa como argmento( la propiedad class est entre comillas(
mientras !e la propiedad href * html no lo estn. Por lo general( los nombres de propiedades no
deben estar entre comillas( e+cepto en el caso !e se tilice como nombre na palabra reservada
3como es el caso de class4.
Cuando se crea un eemento, ste no es aaddo nmedatamente a a pgna,
sno que se debe hacero en con|unto con un mtodo.
%rear un nuevo elemento en
la p$gina
var $myNewEement = $('<p>Nuevo eemento</p>');
$myNewEement.appendTo('#content');
$myNewEement.nsertAfter('u:ast'); // emnar a eemento <p>
// exstente en #content
$('u').ast().after($myNewEement.cone()); // conar a eemento <p>
// para tener as dos versones
&strictamente hablando( no es necesario gardar al elemento creado en na variable 7 es
posible llamar al m1todo para a9adir el elemento directamente desp1s de ?34. Sin embargo( la
ma*or'a de las veces se desear hacer referencia al elemento a9adido( por lo cal( si se garda en
na variable no es necesario seleccionarlo desp1s.
%rear ' a:adir al mismo tiempo un
elemento a la p$gina
$('u').append('<>tem de a sta</>');
Not
a
La sinta+is para a9adir nevos elementos a la pgina es m* fcil de tili"ar( pero
es tentador olvidar !e ha* n costo enorme de rendimiento al agregar elementos al
-:; de forma repetida. Si esta a9adiendo mchos elementos al mismo contenedor( en
lgar de a9adir cada elemento no por ve"( lo me%or es concatenar todo el <T;L en
na nica cadena de caracteres para lego ane+arla al contenedor. =na posible
solci#n es tili"ar n arreglo !e posea todos los elementos( lego renirlos
tili"ando join * 2nalmente ane+arla.
var myItems = ||, $myLst = $('#myLst'); for (var =0;
<100; ++) {
myItems.push('<>tem ' + + '</>');
}
$myLst.append(myItems.|on(''));
&anipulacin de
/tributos
Las capacdades para a manpuacn de atrbutos que ofrece a bboteca son
extensos. La reaza- cn de cambos bscos son smpes, sn embargo e mtodo
$.fn.attr permte manpuacones ms compe|as.
&anipular un simple
atributo
$('#myDv a:rst').attr('href', 'newDestnaton.htm');
&anipular mltiples
atributos
$('#myDv a:rst').attr({
href : 'newDestnaton.htm', re : 'super-
speca'
});
4tili,ar una funcin para determinar el valor del nuevo atributo
$('#myDv a:rst').attr({ re : 'super-
speca',
href : functon(dx, href) { return '/new/' + href;
}
});
$('#myDv a:rst').attr('href', functon(dx, href) { return '/new/' + href;
});
1.3.8. (jercicios
Selecciones
Abra e archvo /e|erccos/ndex.htm en e navegador. Reace e e|ercco utzando e
archvo
/e|erccos/|s/sandbox.|s o traba|e drectamente con Frebug para cumpr os sguentes
puntos:
1. Seecconar todos os eementos dv que poseen a case "modue".
2. Especcar tres seeccones que puedan seecconar e tercer tem de a sta
desordenada #myLst.
Cu es e me|or para utzar? Porqu?
3. Seecconar e eemento abe de eemento nput utzando un seector de atrbuto.
4. Averguar cuantos eementos en a pgna estn ocutos (ayuda: .ength)
5. Averguar cuantas mgenes en a pgna poseen e atrbuto at.
6. Seecconar todas as as mpares de cuerpo de a taba.
0ecorrer el D"&
archvo
puntos:
1. Seecconar todas as mgenes en a pgna; regstrar en a consoa e
atrbuto at de cada magen.
2. Seecconar e eemento nput, uego drgrse haca e formuaro y aadre una
case a msmo.
3. Seecconar e tem que posee a case "current" dentro de a sta #myLst
y remover dcha case en e eemento; uego aadr a case "current" a
sguente tem de a sta.
4. Seecconar e eemento seect dentro de #specas; uego drgrse haca e
botn submt.
5. Seecconar e prmer tem de a sta en e eemento #sdeshow; aadre
a case "current" a msmo y uego aadr a case "dsabed" a os
eementos hermanos.
&anipulacin
archvo
puntos:
1. Aadr 5 nuevos tems a na de a sta desordenada #myLst. Ayuda:
for (var = 0; <5; ++) { ... }
5
2. Remover os tems mpares de a sta.
3. Aadr otro eemento h2 y otro prrafo a tmo dv.modue.
4. Aadr otra opcn a eemento seect; dare a a opcn aadda e vaor
/@ednesda*0.
5. Aadr un nuevo dv.modue a a pgna despus de tmo; uego aadr una
copa de una de as mgenes exstentes dentro de nuevo dv.
1.4. (l n7cleo de jQuery
1.4.1. @ vs @-.
Hasta ahora, se ha tratado competamente con mtodos que se aman desde
e ob|eto |Ouery. Por e|empo:
$('h1').remove();
Dchos mtodos son parte de espaco de nombres (en ngs namespace) $.fn, o
de prototpo (en ngs protot*pe) de |Ouery, y son consderados como mtodos de
ob|eto |Ouery.
Sn embargo, exsten mtodos que son parte de espaco de nombres de $ y se
consderan como mtodos de nceo de |Ouery.
Estas dstncones pueden ser bastantes confusas para usuaros nuevos. Para
evtar a confusn, debe recordar estos dos puntos:
Los mtodos utzados en seeccones se encuentran dentro de espaco de
nombres $.fn, y automtcamente recben y devueven una seeccn en s.
Mtodos en e espaco de nombres $ son generamente mtodos para
dferentes utdades, no traba|an con seeccones, no se es pasa nngn
argumento y e vaor que devueven puede varar.
Exsten agunos casos en donde mtodos de ob|eto y de nceo poseen os msmos
nombres, como sucede con $.each y $.fn.each. En estos casos, debe ser cudadoso de
eer ben a documentacn para saber que ob|eto utzar correctamente.
1.4.2. M8todos )tilitarios
|Ouery ofrece varos mtodos uttaros dentro de espaco de nombres $. Estos
mtodos son de gran ayuda para evar a cabo tareas rutnaras de
programacn. A contnuacn se muestran agunos e|empos, para una
competa documentacn sobre eos, vste
h ttp://ap.|quer y .com/category/uttes /.
@*trim Remueve os espacos en banco de
prncpo y na.
$.trm(' varos espacos en banco ');
// devueve 'varos espacos en banco'
@*each Interacta en arregos
y ob|etos.
$.each(| 'foo', 'bar', 'baz' |, functon(dx, va) { consoe.og('eemento ' +
dx + 'es ' + va);
});
$.each({ foo : 'bar', baz : 'bm' }, functon(k, v) { consoe.og(k + ' : ' + v);
});
Nota
.omo se di%o antes( e+iste n m1todo llamado $.fn.each( el cal interacta en na
selecci#n de elementos.
@*in/rra' Devueve e ndce de un vaor en un arrego, o -1 s e vaor no se
encuentra en e arrego.
var myArray = | 1, 2, 3, 5 |;
f ($.nArray(4, myArray) !== -1) { consoe.og('vaor encontrado');
}
@*extend Camba a propedades de prmer ob|eto utzando as
propedades de os subsecuentes ob|etos.
var rstOb|ect = { foo : 'bar', a : 'b' }; var secondOb|ect = {
foo : 'baz' };
var newOb|ect = $.extend(rstOb|ect, secondOb|ect);
consoe.og(rstOb|ect.foo); // 'baz' consoe.og(newOb|ect.foo); // 'baz'
S no se desea cambar as propedades de nnguno de os ob|etos que se utzan en
$.extend, se debe ncur un ob|eto vaco como prmer argumento.
var rstOb|ect = { foo : 'bar', a : 'b' }; var secondOb|ect = {
foo : 'baz' };
var newOb|ect = $.extend({}, rstOb|ect, secondOb|ect);
consoe.og(rstOb|ect.foo); // 'bar' consoe.og(newOb|ect.foo); // 'baz'
@*prox' Devueve una funcn que sempre se e|ecutar en e acance (scope)
provsto - en otras paabras, estabece e sgncado de this (ncudo
dentro de a funcn) como e segundo argumento.
var myFuncton = functon() { consoe.og(ths); }; var myOb|ect = { foo :
'bar' };
myFuncton(); // devueve e ob|eto wndow
var myProxyFuncton = $.proxy(myFuncton, myOb|ect);
myProxyFuncton(); // devueve e ob|eto myOb|ect
S se posee un ob|eto con mtodos, es posbe pasar dcho ob|eto y e nombre de
un mtodo para devover una funcn que sempre se e|ecuta en e acance de
dcho ob|eto.
var myOb|ect = {
myFn : functon() { consoe.og(ths);
}
};
$('#foo').cck(myOb|ect.myFn); // regstra e eemento DOM #foo
$('#foo').cck($.proxy(myOb|ect, 'myFn')); // regstra myOb|ect
1.4.3. 'omprobaci&n de ,ipos
Como se mencon en e captuo "Conceptos Bscos de |avaScrpt", |Ouery ofrece
varos mtodos tes para determnar e tpo de un vaor especco.
%omprobar el tipo de un determinado valor
var myVaue = |1, 2, 3|;
// Utzar e operador typeof de |avaScrpt para comprobar tpos prmtvos typeof myVaue == 'strng'; //
faso (fase)
typeof myVaue == 'number'; // faso (fase) typeof myVaue ==
'undened'; // faso (fase) typeof myVaue == 'booean'; // faso
(fase)
// Utzar e operador de guadad estrcta para comprobar vaores nuos (nu) myVaue === nu; // faso (fase)
// Utzar os mtodos |Ouery para comprobar tpos no prmtvos |Ouery.sFuncton(myVaue); //
faso (fase) |Ouery.sPanOb|ect(myVaue); // faso (fase) |Ouery.sArray(myVaue); // verdadero
(true)
|Ouery.sNumerc(16); // verdadero (true). No dsponbe en versones nferores a |Ouery 1.7
1.4.4. (l M8todo %ata
A menudo encontrar que exste nformacn acerca de un eemento que
necesta guardar. En |a- vaScrpt es posbe hacero aadendo propedades a
DOM de eemento, pero esta prctca coneva enfrentarse a prddas de
memora (en ngs memor* lea5s) en agunos navegadores. |Ouery ofrece una
manera senca para poder guardar nformacn reaconada a un eemento, y
a msma bboteca se ocupa de mane|ar os probemas que pueden surgr por
fata de memora.
Auardar ' recuperar informacin relacionada a un elemento
$('#myDv').data('keyName', { foo : 'bar' });
$('#myDv').data('keyName'); // { foo : 'bar' }
A travs de mtodo $.fn.data es posbe guardar cuaquer tpo de nformacn sobre un
eemento. Es dfc exagerar a mportanca de este concepto cuando se est
desarroando una apcacn compe|a.
Por e|empo, s desea estabecer una reacn entre e tem de una sta y e dv
que hay dentro de este tem, es posbe hacero cada vez que se nteracta con
e tem, pero una me|or soucn es hacero una soa vez, guardando un puntero a
dv utzando e mtodo $.fn.data:
Establecer una relacin entre elementos utili,ando el
mtodo @*fn*data
$('#myLst ').each(functon() {
var $ = $(ths), $dv = $.nd('dv.content');
$.data('contentDv', $dv);
});
// uego, no se debe vover a buscar a dv;
// es posbe eero desde a nformacn asocada a tem de a sta var $rstL = $('#myLst
:rst');
$rstL.data('contentDv').htm('nuevo contendo');
Adems es posbe pasare a mtodo un ob|eto contenendo uno o ms pares de
con|untos paabra cave-vaor.
A partr de a versn 1.5 de a bboteca, |Ouery permte utzar a mtodo
$.fn.data para obtener a nformacn asocada a un eemento que posea e atrbuto
HTML5 data-*:
Elementos con el atributo data8E
<a d='foo' data-foo='baz' href='#'>Foo</a>
<a d='foobar' data-foo-bar='fo' href='#'>Foo Bar</a>
"btener los valores asociados a los atributos data8E con @*fn*data
// obtene e vaor de atrbuto data-foo
// utzando e mtodo $.fn.data consoe.og($('#foo').data('foo')); // regstra
'baz'
// obtene e vaor de segundo eemento consoe.og($('#foobar').data('fooBar')); //
regstra 'fo'
Nota
8 partir de la versi#n A.B de la biblioteca( para obtener el valor del atribto data-foo-bar
del segndo elemento( el argmento en $.fn.data se debe pasar en estilo CameCase.
Nota
Para ms informaci#n sobre el atribto <T;LC data-* visite http:DDEEE.EF.o r gDT>DhtmlCDglo b al-
attribtes.htmlGem b e dding-cstom-non-visible-data-Eith-the-data-attribte s.
1.4.5. %etecci&n de +avegadores y 'aracter9sticas
Ms a que |Ouery emne a mayora de as pecuardades de |avaScrpt
entre cada navegador, exsten ocasones en que se necesta e|ecutar cdgo
en un navegador especco.
Para este tpo de stuacones, |Ouery ofrece e ob|eto $.support y $.browser
(este - tmo en desuso). Una competa documentacn sobre estos ob|etos
puede encontrara en h ttp://ap.|quer y .com/|Ouer y .sup p ort/ y
h ttp://ap.|quer y .com/|Ouer y .br o wser/
E ob|etvo de $.support es determnar qu caracterstcas soporta e
navegador web.
E ob|eto $.browser permte detectar e tpo de navegador y su versn. Dcho
ob|eto est en desuso (aunque en e corto pazo no est pancada su emnacn
de nceo de a bboteca) y se recomenda utzar a ob|eto $.support para estos
propstos.
1.4.6. (vitar 'on:ictos con Otras Bibliotecas
"avaScript
S esta utzando |Ouery en con|unto con otras bbotecas |avaScrpt, as cuaes
tambn utzan a varabe $, pueden egar a ocurrr una sere de errores. Para
poder souconaros, es necesaro poner a |Ouery en su modo "no-concto". Esto
se debe reazar nmedatamente despus que |Ouery se cargue en a pgna y
antes de cdgo que se va a e|ecutar.
Cuando se pone a |Ouery en modo "no-concto", a bboteca ofrece a opcn
de asgnar un nombre para reempazar a a varabe $.
=oner a jFuer' en modo
no8con1icto
<scrpt src="prototype.|s"></scrpt> // a bboteca prototype
// tambn utza $
<scrpt src="|query.|s"></scrpt> // se carga |query
// en a pgna
<scrpt>var $| = |Ouery.noConct();</scrpt> // se ncaza
// e modo "no-concto"
Tambn es posbe segur utzando $ contenendo e cdgo en una funcn
annma autoe|ecutabe. ste es un patrn estndar para a creacn de
extensones para a bboteca, ya que $ queda encerrada dentro de acance de
a msma funcn annma.
4tili,ar @ dentro de una funcin annima
autoejecutable
<scrpt src="prototype.|s"></scrpt>
<scrpt src="|query.|s"></scrpt>
<scrpt> |Ouery.noConct();
(functon($) {
// e cdgo va aqu, pudendo utzar $
})(|Ouery);
</scrpt>
1.5. (ventos
1.5.1. .ntroducci&n
|Ouery provee mtodos para asocar controadores de eventos (en ngs event
handlers) a seectores. Cuando un evento ocurre, a funcn provsta es e|ecutada.
Dentro de a funcn, a paabra cave ths hace referenca a eemento en que e
evento ocurre.
5
Para ms detaes sobre os eventos en |Ouery, puede consutar
h ttp://ap.|quer y .com/category/e v e n ts /. La funcn de controador de eventos
puede recbr un ob|eto. Este ob|eto puede ser utzado para
determnar a naturaeza de evento o, por e|empo, prevenr e comportamento
predetermnado de
ste. Para ms detaes sobre e ob|eto de evento, vste
h ttp://ap.|quer y .com/category/e v e n ts/e v e n t-
o b |ect/.
1.5.2. 0incular (ventos a (lementos
|Ouery ofrece mtodos para a mayora de os eventos - entre eos $.fn.cck,
$.fn.focus,
$.fn.bur, $.fn.change, etc. Estos tmos son formas reducdas de mtodo $.fn.on de |Ouery
($.fn.bnd en versones anterores a |Ouery 1.7). E mtodo $.fn.on es t para
vncuar (en
ngs binding) a msma funcn de controador a mtpes eventos, para cuando
se desea proveer
nformacn a controador de evento, cuando se est traba|ando con eventos
personazados o cuando
se desea pasar un ob|eto a mtpes eventos y controadores.
2incular un evento utili,ando un mtodo reducido
$('p').cck(functon() { consoe.og('cck');
});
2incular un evento utili,ando el mtodo @*fn*on
$('p').on('cck', functon() { consoe.og('cck');
});
2incular un evento utili,ando el mtodo @*fn*on con informacin
asociada
$('nput').on(
'cck bur', // es posbe vncuar mtpes eventos a eemento
{ foo : 'bar' }, // se debe pasar a nformacn asocada como argumento
functon(eventOb|ect) { consoe.og(eventOb|ect.type, eventOb|ect.data);
// regstra e tpo de evento y a nformacn asocada { foo : 'bar' }
}
);
2incular Eventos para
Ejecutar una ve,
A veces puede necestar que un controador partcuar se e|ecute soo una vez
- y despus de eso, neceste que nnguno ms se e|ecute, o que se e|ecute otro
dferente. Para este propsto |Ouery provee e mtodo $.fn.one.
%ambiar controladores utili,ando el
mtodo @*fn*one
5
$('p').one('cck', functon() {
consoe.og('Se ccke a eemento por prmera vez');
$(ths).cck(functon() { consoe.og('Se ha cckeado nuevamente'); });
});
E mtodo $.fn.one es t para stuacones en que necesta e|ecutar certo cdgo
a prmera vez que ocurre un evento en un eemento, pero no en os eventos
sucesvos.
Desvincular
Eventos
Para desvncuar (en nges nbind) un controador de evento, puede utzar e
mtodo $.fn.oh pasndoe e tpo de evento a desconectar. S se pas como
ad|unto a evento una funcn nombrada, es posbe asar a desconexn de
dcha funcn pasndoa como segundo argumento.
Desvincular todos los controladores del evento
clic9 en una seleccin
$('p').oh('cck');
Desvincular un controlador particular
del evento clic9
var foo = functon() { consoe.og('foo'); }; var bar = functon() {
consoe.og('bar'); };
$('p').on('cck', foo).on('cck', bar);
$('p').oh('cck', bar); // foo esta atado an a evento cck
Espacios de )ombres
para Eventos
Cuando se esta desarroando apcacones compe|as o extensones de |Ouery,
puede ser t utzar espacos de nombres para os eventos, y de esta forma
evtar que se desvncuen eventos cuando no o desea.
/signar espacios de
nombres a eventos
$('p').on('cck.myNamespace', functon() { /* ... */ });
$('p').oh('cck.myNamespace');
$('p').oh('.myNamespace'); // desvncua todos os eventos con
// e espaco de nombre 'myNamespace'
2inculacin de &ltiples
Eventos
Muy a menudo, eementos en una apcacn estarn vncuados a mtpes
eventos, cada uno con una funcn dferente. En estos casos, es posbe pasar
un ob|eto dentro de $.fn.on con uno o ms pares de nombres caves/vaores.
Cada cave ser e nombre de evento mentras que cada vaor ser a funcn
a e|ecutar cuando ocurra e evento.
2incular mltiples eventos a
un elemento
$('p').on({
'cck': functon() {
consoe.og('cckeado');
},
'mouseover': functon() {
consoe.og('sobrepasado');
}
});
1.5.3. (l Objeto del (vento
Como se mencona en a ntroduccn, a funcn controadora de eventos
recbe un ob|eto de evento, e cua contene varos mtodos y propedades. E
ob|eto es comnmente utzado para prevenr a accn predetermnada de
evento a travs de mtodo prevent-efalt. Sn embargo, tambn contene varas
propedades y mtodos tes:
pageG, pageH La poscn de puntero de ratn en e momento que e evento
ocurr, reatvo a as zonas superores e zquerda de a pgna.
t'pe E tpo de evento (por
e|empo "cck").
6hich E botn o teca
presonada.
data Aguna nformacn pasada cuando e
evento es e|ecutado.
target E eemento DOM que ncaz
e evento.
preventDefault-. Cancea a accn predetermnada de evento (por
e|empo: segur un enace).
stop=ropagation-. Detene a propagacn de evento
sobre otros eementos.
Por otro ado, a funcn controadora tambn tene acceso a eemento DOM que
ncaz e evento a travs de a paabra cave ths. Para convertr a dcho
eemento DOM en un ob|eto |Ouery (y poder utzar os mtodos de a bboteca)
es necesaro escrbr $(ths), como se muestra a contnuacn:
var $ths = $(ths);
%ancelar 3ue al hacer clic9 en un
enlace, ste se siga
$('a').cck(functon(e) { var $ths = $
(ths);
f ($ths.attr('href').match('ev')) { e.preventDefaut();
$ths.addCass('ev');
}
});
1.5.4. (jecuci&n autom$tica de 'ontroladores de
(ventos
A travs de mtodo $.fn.trgger, |Ouery provee una manera de dsparar
controadores de eventos sobre agn eemento sn requerr a accn de usuaro.
S ben este mtodo tene sus usos, no debera ser utzado para smpemente
amar a una funcn que pueda ser e|ecutada con un cck de usuaro. En su
ugar, debera guardar a funcn que se necesta amar en una varabe, y uego
pasar e nombre de a varabe cuando reaza e vncuo (binding). De esta forma,
podr amar a a funcn cuando o desee en ugar de e|ecutar $.fn.trgger.
Disparar un controlador de eventos de la
forma correcta
var foo = functon(e) { f (e) {
consoe.og(e);
} ese {
consoe.og('esta e|ecuccn no provno desde un evento');
}
};
$('p').cck(foo);
foo(); // en ugar de reazar $('p').trgger('cck')
1.5.5. .ncrementar el -endimiento con la %elegaci&n de
(ventos
Cuando traba|e con |Ouery, frecuentemente aadr nuevos eementos a a
pgna, y cuando o haga, necestar vncuar eventos a dchos eementos. En
ugar de repetr a tarea cada vez que se aade un eemento, es posbe utzar
a deegacn de eventos para hacero. Con ea, podr enazar un evento a un
eemento contenedor, y uego, cuando e evento ocurra, podr ver en que
eemento sucede.
La deegacn de eventos posee agunos benecos, ncuso s no se tene
pensando aadr ms eementos a a pgna. E tempo requerdo para enazar
controadores de eventos a centos de eementos no es un traba|o trva; s
posee un gran con|unto de eementos, debera consderar utzar a deegacn
de eventos a un eemento contenedor.
Nota
8 partir de la versi#n A.H.I( se introd%o $.fn.delegate( sin embargo a partir de la versi#n
A.J es preferible tili"ar el evento $.fn.on para la delegaci#n de eventos.
Delegar un evento utili,ando
@*fn*on
$('#myUnorderedLst').on('cck', '', functon(e) { var $myLstItem = $
(ths);
// ...
});
Delegar un evento utili,ando @*fn*delegate
$('#myUnorderedLst').deegate('', 'cck', functon(e) { var $myLstItem = $(ths);
// ...
});
Desvincular Eventos
Delegados
S necesta remover eventos deegados, no puede hacero smpemente
desvncundoos. Para eso, utce e mtodo $.fn.oh para eventos conectados con
$.fn.on, y $.fn.undeegate para eventos conectados con $.fn.deegate. A gua que
cuando se reaza un vncuo, opconamente, se puede pasar e nombre de una
funcn vncuada.
Desvincular eventos
delegados
$('#myUnorderedLst').oh('cck', '');
$('#myUnorderedLst').undeegate('', 'cck');
1.5.6. Funciones Au/iliares de
(ventos
|Ouery ofrece dos funcones auxares para e
traba|o con eventos:
@*fn*hover
E mtodo $.fn.hover permte pasar una o dos funcones que se e|ecutarn
cuando os eventos mouseenter y mouseeave ocurran en e eemento seecconado.
S se pasa una soa funcn, est ser e|ecutada en ambos eventos; en cambo s
se pasan dos, a prmera ser e|ecutada cuando ocurra e evento mouseenter,
mentras que a segunda ser e|ecutada cuando ocurra mouseeave.
Nota
8 partir de la versi#n A.H de %6er*( el m1todo re!iere obligatoriamente dos fnciones.
La funcin auxiliar
hover
$('#menu ').hover(functon() {
$(ths).toggeCass('hover');
});
@*fn*toggle
A gua que e mtodo anteror, $.fn.togge recbe dos o ms funcones; cada vez
que un evento ocurre, a funcn sguente en a sta se e|ecutar. Generamente,
$.fn.togge es utzada con soo dos funcones. En caso que utza ms de dos
funcones, tenga cudado, ya que puede ser dcutar a depuracn de cdgo.
La funcin auxiliar
toggle
$('p.expander').togge( functon() {
$(ths).prev().addCass('open');
},
functon() {
$(ths).prev().removeCass('open');
}
);
1.5.7. (jercicios
%rear una ;Sugerencia< para una %aja de (ngreso de 5exto
Abra e archvo /e|erccos/ndex.htm en e navegador. Reace e e|erco utzando e
archvo
/e|erccos/|s/nputHnt.|s o traba|e drectamente con Frebug. La tarea a reazar es utzar e
texto de eemento abe y apcar una "sugerenca" en a ca|a de ngreso de
texto. Los pasos ha segur
son os sguentes:
1. Estabecer e vaor de eemento inpt gua a vaor de eemento label;
2. Aadr a case "hnt" a eemento inpt;
3. Remover e eemento label;
4. Vncuar un evento focs en e inpt para remover e texto de sugerenca y a
case "hnt";
5. Vncuar un evento blr en e inpt para restaurar e texto de sugerenca y
a case "hnt" en caso que no se haya ngresado agn texto.
Ou otras consderacones debe consderar s se desea apcar esta
funconadad a un sto rea?
/:adir una )avegacin
por =esta:as
Abra e archvo /e|erccos/ndex.htm en e navegador. Reace e e|erco utzando
e archvo /e|erccos/|s/tabs.|s o traba|e drectamente con Frebug. La tarea a
reazar es crear una navegacn por pestaas para os dos eementos
div.modle. Los pasos ha segur son os sguentes:
1. Ocutar todos os eementos div.modle;
2. Crear una sta desordenada antes de prmer div.modle para utzar como
pestaas;
3. Interactuar con cada dv utzando $.fn.each. Por cada uno, utzar e texto de
eemento hI
como e texto para e tem de a sta desordenada;
4. Vncuar un evento clic5 a cada tem de a sta de forma que:
Muestre e div correspondente y ocute e
otro; Aada a case "current" a tem
seecconado; Remueva a case "current"
de otro tem de a sta;
5. Fnamente, mostrar a prmera pestaa.
1.6. (fectos
1.6.1. .ntroducci&n
Con |Ouery, agregar efectos a una pgna es muy fc. Estos efectos poseen
una conguracn predetermnada pero tambn es posbe proveeres
parmetros personazados. Adems es posbe crear anmacones partcuares
estabecendo vaores de propedades CSS.
Para una competa documentacn sobre os dferentes tpos de efectos puede vstar
a seccn ehects:
h ttp://ap.|quer y .com/category/
ehects /.
1.6.2. (fectos .ncorporados en la Biblioteca
Los efectos ms utzado ya venen ncorporados dentro de a bboteca en
forma de mtodos:
@*fn*sho6 Muestra e eemento
seecconado.
@*fn*hide Ocuta e eemento
seecconado.
@*fn*fade(n De forma anmada, camba a opacdad de eemento
seecconado a 100 %.
@*fn*fade"ut De forma anmada, camba a opacdad de
eemento seecconado a 0
@*fn*slideDo6n Muestra e eemento seecconado con un movmento de
deszamento vertca.
@*fn*slide4p Ocuta e eemento seecconado con un movmento de
deszamento vertca.
@*fn*slide5oggle Muestra o ocuta e eemento seecconado con un
movmento de deszamento vertca, dependendo s actuamente e
eemento est vsbe o no.
4so b$sico de un efecto
incorporado
$('h1').show();
%ambiar la Duracin de
los Efectos
Con a excepcn de $.fn.show y $.fn.hde, todos os mtodos tenen una duracn
predetermnada de a anmacn en 400ms. Este vaor es posbe cambaro.
%on!gurar la duracin de
un efecto
$('h1').fadeIn(300); // desvanecmento en 300ms
$('h1').fadeOut('sow'); // utzar una dencn de veocdad nterna
jFuer'*fx*speeds |Ouery posee un ob|eto en |Ouery.fx.speeds e cua contene a
veocdad predetermnada para a duracn de un efecto, as como tambn os
vaores para as dencones /sloE0 y /fast0.
speeds: {
sow: 600,
fast: 200,
// veocdad predetermnada
_defaut: 400
}
Por o tanto, es posbe sobrescrbr o aadr nuevos vaores a ob|eto. Por
e|empo, puede que quera cambar e vaor predetermnado de efecto o aadr
una veocdad personazada.
/:adir velocidades personali,adas a
jFuer'*fx*speeds
|Ouery.fx.speeds.muyRapdo = 100;
|Ouery.fx.speeds.muyLento = 2000;
0eali,ar una /ccin %uando un Efecto
fue Ejecutado
A menudo, querr e|ecutar una accn una vez que a anmacn haya termnado
- ya que s e|ecuta a accn antes que a anmacn haya acabado, puede
egar a aterar a cadad de efecto o afectar a os eementos que forman parte
de a msma. |Dencn: Las fnciones de devolci#n de l lamada (en ngs callbac5
fnctions) proveen una forma para e|ecutar cdgo una vez que un evento haya
termnado.| En este caso, e evento que responder a a funcn ser a
concusn de a anmacn.
Dentro de a funcn de devoucn, a paabra cave ths hace referenca a
eemento en donde e efecto fue e|ecutado y a gua que sucede con os
eventos, es posbe transformaro a un ob|eto |Ouery utzando $(ths).
Ejecutar cierto cdigo cuando una animacin
ha'a concluido
$('dv.od').fadeOut(300, functon() { $(ths).remove(); });
Note que s a seeccn no retorna nngn eemento, a funcn nunca se
e|ecutar. Este probema o puede resover comprobando s a seeccn devueve
agn eemento; y en caso que no o haga, e|ecutar a funcn de devoucn
nmedatamente.
Ejecutar una funcin de devolucin incluso si no ha'
elementos para animar
var $thng = $('#nonexstent'); var cb =
functon() {
consoe.og('reazado');
};
f ($thng.ength) {
$thng.fadeIn(300, cb);
} ese {
cb();
}
1.6.3. (fectos #ersonalizados con
@*fn*animate
Es posbe reazar anmacones en propedades CSS utzando e mtodo
$.fn.anmate. Dcho mtodo permte reazar una anmacn estabecendo vaores
a propedades CSS o cambando sus vaores actuaes.
Efectos personali,ados con
@*fn*animate
$('dv.funtmes').anmate(
{
eft : "+=50",
opacty : 0.25
},
});
300, // duraton
functon() { consoe.og('reazado'); // funcn de devoucn de amada
Nota
Las propiedades relacionadas al color no peden ser animadas tili"ando el m1todo
$.fn.aniate( pero es posible hacerlo a trav1s de la e+tensi#n c olor plgi n. ;s adelante en
el libro de disctir la tili"aci#n de e+tensiones.
Easi
ng
|Dencn: E concepto de &asing descrbe a manera en que un efecto ocurre
- es decr, s a veocdad durante a anmacn es constante o no.| |Ouery
ncuye soamente dos mtodos de easng: sEing y linear. S desea transcones
ms naturaes en as anmacones, exsten varas extensones que o permten.
A partr de a versn 1.4 de a bboteca, es posbe estabecer e tpo de
transcn por cada propedad utzando e mtodo $.fn.anmate.
5ransicin de easing por cada
propiedad
$('dv.funtmes').anmate(
{
},
300
);
eft : | "+=50", "swng" |,
opacty : | 0.25, "near" |
Para ms detaes sobre as opcones de easng, consute
h ttp://ap.|quer y .com/anmate /.
1.6.4. 'ontrol de los (fectos
|Ouery provee varas herramentas para e mane|o de anmacones.
@*fn*stop Detene as anmacones que se estn e|ecutando en e eemento
seecconado.
@*fn*dela' Espera un tempo determnado antes de e|ecutar a prxma
anmacn.
$('h1').show(300).deay(1000).hde(300);
jFuer'*fx*oI S e vaor es verdadero (tre), no exstrn transcones para as
anmacones; y a os eementos se e estabecer e estado na de a
anmacn. Este mtodo puede ser especamente t cuando se esta
traba|ando con navegadores antguos.
1.6.5. (jercicios
&ostrar 5exto "culto
archvo
/e|erccos/|s/bog.|s. La tarea es aadr aguna nteractvdad a a seccn bog de a
pgna:
A hacer cck en aguno de os ttuares de div Gblog, se debe mostrar e
prrafo correspondente con un efecto de deszamento;
A hacer cck en otro ttuar, se debe ocutar e prrafo mostrado con un
efecto de deszamento y mostrar nuevamente e prrafo correspondente
tambn con un efecto de deszamento. Ayuda: No se ovde de utzar e
seector :vsbe.
%rear un &en Desplegable
archvo
/e|erccos/|s/navgaton.|s. La tarea es poder despegar os tems de men superor de a
pgna:
A pasar e puntero de ratn por encma de un tem de men, se debe
mostrar su submen en caso que exsta;
A no estar ms encma de un tem, e submen se debe ocutar.
Para poder reazaro, utce e mtodo $.fn.hover para aadr o remover una
case en e submen para poder controar s debe estar ocuto o vsbe (E archvo
/e|erccos/css/styes.css ncuye una case "hover" para este propsto)
%rear un
Slidesho6
archvo
/e|erccos/|s/sdeshow.|s. La tarea es aadr un sdeshow a a pgna con
|avaScrpt.
1. Mover e eemento GslideshoE a a parte superor de a pgna;
2. Escrbr un cdgo que permta mostrar os tems de forma ccca,
mostrando un tem por unos segundos, uego ocutndoo con un efecto fade
ot y mostrando e sguente con un efecto fade in;
3. Una vez egado a tmo tem de a sta, comenzar de nuevo con e prmero;
Para un desafo mayor, reace un rea de navegacn por deba|o de sdeshow
que muestre cuantas mgenes exsten y en cua se encuentra (ayuda:
$.fn.prevA puede resutar t).
1.7. Aja/
1.7.1. .ntroducci&n
E mtodo K;L<ttp>e!est (XHR) permte a os navegadores comuncarse con
e servdor sn a necesdad de recargar a pgna. Este mtodo, tambn
conocdo como A|ax (8s*nchronos JavaScript and K;L), permte a creacn de
apcacones rcas en nteractvdad.
Las petcones A|ax son e|ecutadas por e cdgo |avaScrpt, e cua enva una
petcn a una URL y cuando recbe una respuesta, una funcn de devoucn
puede ser e|ecutada a cua recbe como argumento a respuesta de servdor
y reaza ago con ea. Debdo a que a respuesta es asncrona, e resto de
cdgo de a apcacn contnua e|ecutndose, por o cua, es mperatvo que
una funcn de devoucn sea e|ecutada para mane|ar a respuesta.
A travs de varos mtodos, |Ouery provee soporte para A|ax, permtendo
abstraer as dferencas que pueden exstr entre navegadores. Los mtodos en
cuestn son $.get(), $.getScrpt(),
$.get|SON(), $.post() y $().oad().
A pesar que a dencn de A|ax posee a paabra "XML", a mayora de as
apcacones no utzan dcho formato para e transporte de datos, sno que en su
ugar se utza HTML pano o nformacn en formato |SON (JavaScript :b%ect
Notation).
6
En genera, A|ax no traba|a a travs de domnos dferentes. Sn embargo,
exsten excepcones, como os servcos que proveen nformacn en formato
|SONP (JS:N Eith Padding), os cuaes permten una funconadad mtada a
travs de dferentes domnos.
1.7.2. 'onceptos
'lave
La utzacn correcta de os mtodos A|ax requere prmero a comprensn de
agunos conceptos cave.
AE5 vs*
="S5
Los dos mtodos HTTP ms comunes para envar una petcn a un servdor son
GET y POST. Es mportante entender a utzacn de cada uno.
E mtodo GET debe ser utzado para operacones no-destructvas - es decr,
operacones en donde se esta "obtenendo" datos de servdor, pero no
modcando. Por e|empo, una consuta a un servco de bsqueda podra ser una
petcn GET. Por otro ado, as soctudes GET pueden ser amacenadas en a
cache de navegador, pudendo conducr a un comportamento mpredecbe s
no se o espera. Generamente, a nformacn envada a servdor, es envada en
una cadena de datos (en ngs !er* string).
E mtodo POST debe ser utzado para operacones destructvas - es decr,
operacones en donde se est ncorporando nformacn a servdor. Por
e|empo, cuando un usuaro guarda un artcuo en un bog, esta accn debera
utzar POST. Por otro ado, este tpo de mtodo no se guarda en a cache de
navegador. Adems, una cadena de datos puede ser parte de a URL, pero a
nformacn tende a ser envada de forma separada.
5ipos de
Datos
Generamente, |Ouery necesta agunas nstruccones sobre e tpo de nformacn
que se espera recbr cuando se reaza una petcn A|ax. En agunos casos, e
tpo de dato es especcado por e nombre de mtodo, pero en otros casos se
o debe detaar como parte de a conguracn de mtodo:
text Para e transporte de cadenas de
caracteres smpes.
html Para e transporte de boques de cdgo HTML que sern
ubcados en a pgna.
script Para aadr un nuevo script con cdgo
|avaScrpt a a pgna.
json Para transportar nformacn en formato |SON, e cua puede ncur
cadenas de caracteres, arregos y ob|etos.
Not
a
8 partir de la versi#n A.H de la biblioteca( si la informaci#n JS:N no est
correctamente formateada( la petici#n podr'a fallar. Lisite http:DD%son.o r g para obtener
detalles sobre n correcto formateo de datos en JS:N.
Es recomendabe utzar os mecansmos que posea e engua|e de ado de
servdor para a generacn de nformacn en formato |SON.
jsonp Para transportar nformacn |SON de un
domno a otro.
xml Para transportar nformacn en
formato XML.
8 pesar de los diferentes tipos de datos de !e se pede tili"ar( es recomendable tili"ar el
formato JS:N( *a !e es m* $e+ible( permitiendo por e%emplo( enviar al mismo tiempo
informaci#n plana * <T;L.
/sincronis
mo
Debdo a que, de forma predetermnada, as amadas A|ax son asncronas, a
respuesta de servdor no esta dsponbe de forma nmedata. Por e|empo, e
sguente cdgo no debera funconar:
var response;
$.get('foo.php', functon(r) { response = r; }); consoe.og(response); // ndendo (undened)
En su ugar, es necesaro especcar una funcn de devoucn de amada;
dcha funcn se e|ecutar cuando a petcn se haya reazado de forma
correcta ya que es en ese momento cuando a respuesta de servdor esta sta.
$.get('foo.php', functon(response) { consoe.og(response); });
=olticas de &ismo "rigen
' JS")=
En genera, as petcones A|ax estn mtadas a utzar e msmo protocoo (http
o https), e msmo puerto y e msmo domno de orgen. Esta mtacn no se
apca a os scrpts cargados a travs de mtodo A|ax de |Ouery.
La otra excepcn es cuando se hace una petcn que recbr una respuesta
en formato |SONP. En este caso, e proveedor de a respuesta debe responder a
petcn con un scrpt que puede ser cargado utzando a etqueta <scrpt>,
evtando as a mtacn de reazar petcones desde e msmo domno. Dcha
respuesta contendr a nformacn soctada, contenda en una funcn
/jax '
+irebug
Frebug (o e nspector WebKt que vene ncudo en Chrome o Safar) son
herramentas mprescn- dbes para traba|ar con petcones A|ax, ya que es
posbe observaras desde a pestaa Consoa de Frebug (o yendo a Recursos
> Pane XHR desde e nspector de Webkt) y revsar os detaes de dchas
petcones. S ago esta faando cuando traba|a con A|ax, este es e prmer
ugar en donde debe drgrse para saber cua es e probema.
1.7.3. M8todos Aja/ de jQuery
Como se ndc anterormente, |Ouery posee varos mtodos para traba|ar con
A|ax. Sn embargo, todos estn basados en e mtodo $.a|ax, por o tanto, su
comprensn es obgatora. A contnuacn se abarcar dcho mtodo y uego se
ndcar un breve resumen sobre os dems mtodos.
Generalmente( es preferible tili"ar el m1todo ?.a%a+ en lgar de los otros( *a !e ofrece ms
caracte- r'sticas * s con2graci#n es m* comprensible.
@*aj
ax
E mtodo $.a|ax es congurado a travs de un ob|eto, e cua contene todas as
nstruccones que necesta |Ouery para competar a petcn. Dcho mtodo es
partcuarmente t debdo a que ofrece a posbdad de especcar accones
en caso que a petcn haya faado o no. Adems, a estar congurado a
travs de un ob|eto, es posbe denr sus propedades de forma separada,
hacendo que sea ms fc a reutzacn de cdgo. Puede vstar
h ttp://ap.|quer y .com/|Ouer y .a |ax/ para consutar a documentacn sobre as
opcones dsponbes en e mtodo.
4tili,ar el mtodo
@*ajax
$.a|ax({
// a URL para a petcn ur : 'post.php',
// a nformacn a envar
// (tambn es posbe utzar una cadena de datos) data : { d : 123 },
// especca s ser una petcn POST o GET type : 'GET',
// e tpo de nformacn que se espera de respuesta dataType : '|son',
// cdgo a e|ecutar s a petcn es satsfactora;
// a respuesta es pasada como argumento a a funcn success : functon(|son) {
$('<h1/>').text(|son.tte).appendTo('body');
$('<dv cass="content"/>')
.htm(|son.htm).appendTo('body');
},
// cdgo a e|ecutar s a petcn faa;
// son pasados como argumentos a a funcn
// e ob|eto |qXHR (extensn de XMLHttpRequest), un texto con e estatus
// de a petcn y un texto con a descrpcn de error que haya dado e servdor error : functon(|qXHR, status, error) {
aert('Dscupe, exst un probema');
},
// cdgo a e|ecutar sn mportar s a petcn fa o no compete : functon(|qXHR, status) {
aert('Petcn reazada');
}
});
Not
a
=na aclaraci#n sobre el parmetro data!ype: Si el servidor develve informaci#n !e
es diferente al formato especi2cado( el c#digo fallar( * la ra"#n de por!e lo hace no
siempre !edar clara debido a !e la respesta <TTP no mostrar ningn tipo de
error. .ando est1 traba%ando con peticiones 8%a+( debe estar segro !e el servidor esta
enviando el tipo
de informaci#n !e esta solicitando * veri2!e !e la cabecera "ontent-type es e+acta
al tipo de dato. Por e%emplo( para informaci#n en formato JS:N( la cabecera "ontent-
type deber'a ser application#json.
"pciones del mtodo @*ajax E mtodo $.a|ax posee muchas opcones de
conguracn, y es |ustamente esta caracterstca a que hace que sea un
mtodo muy t. Para una sta competa de as opcones dsponbes, puede
consutar h ttp://ap.|quer y .com/|Ouer y .a |ax/; a contnuacn se muestran as
ms comunes:
as'nc Estabece s a petcn ser asncrona o no. De forma predetermnada
e vaor es true. Debe tener en cuenta que s a opcn se estabece en
fase, a petcn boquear a e|ecucn de otros cdgos hasta que dcha
petcn haya nazado.
cache Estabece s a petcn ser guardada en a cache de navegador. De
forma predetermnada es true para todos os dataT*pe excepto para "script" y
"%sonp". Cuando posee e vaor fase, se agrega una cadena de caracteres
ant-cache a na de a URL de a petcn.
complete Estabece una funcn de devoucn de amada que se e|ecuta
cuando a petcn esta competa, aunque haya faado o no. La funcn
recbe como argumentos e ob|eto |qXHR (en versones anterores o guaes a
|Ouery 1.4, recbe en su ugar e ob|eto de a petcn en crudo
XMLHTTPRequest) y un texto especcando e estatus de a msma petcn
(success, notmoded, error, tmeout, abort, o parsererror).
context Estabece e acance en que a/as funcones de devoucn de
amada se e|ecutaran (por e|empo, dene e sgncado de ths dentro de
as funcones). De manera predetermnada ths hace referenca a ob|eto
orgnamente pasado a mtodo $.a|ax.
data Estabece a nformacn que se envar a servdor. Esta puede ser tanto
un ob|eto como una cadena de datos (por e|empo foo=bar&baz=bm.)
data5'pe Estabece e tpo de nformacn que se espera recbr como
respuesta de servdor. S no se especca nngn vaor, de forma
predetermnada, |Ouery revsa e tpo de ;,;& que posee a respuesta.
error Estabece una funcn de devoucn de amada a e|ecutar s resuta agn
error en a petcn.
Dcha funcn recbe como argumentos e ob|eto |qXHR (en versones
anterores o guaes a
|Ouery 1.4, recbe en su ugar e ob|eto de a petcn en crudo
XMLHTTPRequest), un texto
especcando e estatus de a msma petcn (tmeout, error, abort, o parsererror) y un
texto
con a descrpcn de error que haya envado e servdor (por e|empo Not Found
o Interna
Server Error).
jsonp Estabece e nombre de a funcn de devoucn de amada a envar
cuando se reaza una petcn JS:NP. De forma predetermnada e
nombre es "callbac5
success Estabece una funcn a e|ecutar s a petcn a sdo satsfactora.
Dcha funcn recbe como argumentos e ob|eto |qXHR (en versones
anterores o guaes a |Ouery 1.4, recbe en su ugar e ob|eto de a
petcn en crudo XMLHTTPRequest), un texto especcando e estatus de a
msma petcn y a nformacn de a petcn (convertda a ob|eto
|avaScrpt en e caso que dataT*pe sea JS:N ), e estatus de a msma.
timeout Estabece un tempo en msegundos para consderar a una petcn
como faada.
traditional S su vaor es true, se utza e esto de serazacn de datos
utzado antes de |Ouery
1.4. Para ms detaes puede vstar
h ttp://ap.|quer y .com/|Ouer y .param /.
t'pe De forma predetermnada su vaor es "GET". Otros tpos de petcones
tambn pueden ser utzadas (como PUT y DELETE), sn embargo
pueden no estar soportados por todos os navegadores.
url Estabece a URL en donde se reaza
a petcn.
La opcn ur es obgatora para e mtodo
$.a|ax;
Como se coment anterormente, para una sta competa de as opcones
dsponbes, puede consutar
h ttp://ap.|quer y .com/|Ouer y
.a |ax /.
Not
a
8 partir de la versi#n A.C de %6er*( las opciones beforeSend( success( error *
coplete reciben como no de ss argmentos el ob%eto j$%&' siendo este na e+tensi#n
del ob%eto nativo %()&!!*'e$uest. &l ob%eto j$%&' posee na serie de m1todos *
propiedades !e permiten modi2car obtener informaci#n particlar de la petici#n a
reali"ar( como por e%emplo sobreescribir el tipo de MIME !e posee la respesta !e se
espera por parte del servidor. Para informaci#n sobre el ob%eto j$%&' pede
consltar
http:DDapi.%!er*. c omD%6er*.a%a+DG%!K< >.
Not
a
8 partir de la versi#n A.C de %6er*( las opciones success( error * coplete peden recibir
n arreglo con varias fnciones de devolci#n( las cales sern e%ectadas en trnos.
&todos
%onvenientes
En caso que no quera utzar e mtodo $.a|ax, y no neceste os controadores de
errores, exsten otros mtodos ms convenentes para reazar petcones A|ax
(aunque, como se ndc antes, estos estn basados e mtodo $.a|ax con
vaores pre-estabecdos de conguracn).
Los mtodos que provee a
bboteca son:
@*get Reaza una petcn GET a una URL
provsta.
@*post Reaza una petcn POST a una
URL provsta.
@*getScript Aade un scrpt a
a pgna.
@*getJS") Reaza una petcn GET a una URL provsta y espera que un dato
|SON sea devueto. Los mtodos deben tener os sguentes argumentos, en
orden:
url La URL en donde se reazar a petcn. Su vaor
es obgatoro.
data La nformacn que se envar a servdor. Su vaor es opcona y puede ser
tanto un ob|eto como una cadena de datos (como foo=bar&baz=bm).
Not
a
&sta opci#n no es valida para el m1todo $.getScript.
success callbac9 Una funcn opcona que se e|ecuta en caso que petcn
haya sdo satsfactora.
Dcha funcn recbe como argumentos a nformacn de a petcn y e
ob|eto en bruto de
dcha petcn.
data t'pe E tpo de dato que se espera recbr desde e servdor. Su vaor es
opcona.
Nota
&sta opci#n es solo aplicable para m1todos en !e no est especi2cado el tipo de dato en el
nombre del mismo m1todo.
4tili,ar mtodos convenientes para peticiones /jax
// obtene texto pano o htm
$.get('/users.php', { userId : 1234 }, functon(resp) { consoe.og(resp);
});
// aade un scrpt a a pgna y uego e|ecuta a funcn especcada
$.getScrpt('/statc/|s/myScrpt.|s', functon() { functonFromMyScrpt();
});
// obtene nformacn en formato |SON desde e servdor
$.get|SON('/detas.php', functon(resp) {
$.each(resp, functon(k, v) { consoe.og(k + '
: ' + v);
});
});
@*fn*load
E mtodo $.fn.oad es e nco que se puede amar desde una seeccn. Dcho
mtodo obtene e cdgo HTML de una URL y reena a os eementos
seecconados con a nformacn obtenda. En con|unto con a URL, es posbe
especcar opconamente un seector, e cua obtendr e cdgo especcado en
dcha seeccn.
4tili,ar el mtodo @*fn*load para rellenar
un elemento
$('#newContent').oad('/foo.htm');
4tili,ar el mtodo @*fn*load para rellenar un elemento
basado en un selector
$('#newContent').oad('/foo.htm #myDv h1:rst', functon(htm) { aert('Contendo actuazado');
});
1.7.4. Aja/ y
Formularios
Las capacdades de |Ouery con A|ax pueden ser especamente tes para e
traba|o con formuaros. Por e|empo, a extensn |Ouery F orm Pugn es una
extensn para aadr capacdades A|ax a formuaros. Exsten dos mtodos que
debe conocer para cuando este reazando este tpo de traba|os:
$.fn.seraze y $.fn.serazeArray.
5ransformar informacin de un formulario a una
cadena de datos
$('#myForm').seraze();
%rear un arreglo de objetos conteniendo
informacin de un formulario
$('#myForm').serazeArray();
// crea una estructura como esta: |
{ name : 'ed1', vaue : 123 },
{ name : 'ed2', vaue : 'heo word' }
|
1.7.5. ,rabajar con
"SO+#
En os tmos tempos, a ntroduccn de |SONP, ha permtdo a creacn de
apcacones hbrdas de contendos. Muchos stos mportantes ofrecen |SONP
como servco de nformacn, e cua se accede a travs de una API (en ngs
8pplication programming interface) predenda. Un servco partcuar que permte
obtener nformacn en formato |SONP es Y ah o o! Ouery Language, e cua se
utza a contnuacn para obtener, por e|empo, notcas sobre gatos:
4tili,ar HFL '
JS")=
$.a|ax({
ur : 'http://query.yahooaps.com/v1/pubc/yq',
// se agrega como parmetro e nombre de a funcn de devoucn,
// segn se especca en e servco de YOL |sonp : 'caback',
// se e ndca a |Ouery que se espera nformacn en formato |SONP dataType : '|sonp',
// se e ndca a servco de YOL cua es a nformacn
// que se desea y que se a quere en formato |SON data : {
q : 'seect tte,abstract,ur from search.news where query="cat"', format : '|son'
},
// se e|ecuta una funcn a ser satsfactora a petcn success : functon(response) {
consoe.og(response);
}
});
|Ouery se encarga de souconar todos os aspectos compe|os de a petcn
|SONP. Lo nco que debe hacer es especcar e nombre de a funcn de
devoucn (en este caso "callbac5", segn o especca YOL) y e resutado na
ser como una petcn A|ax norma.
1.7.6. (ventos
Aja/
A menudo, querr e|ecutar una funcn cuando una petcn haya comenzado
o termnado, como por e|empo, mostrar o ocutar un ndcador. En ugar de
denr estas funcones dentro de cada petcn, |Ouery provee a posbdad
de vncuar eventos A|ax a eementos seecconados. Para una sta competa
de eventos A|ax, puede consutar h ttp://d o cs.|quer y .com/A|ax_E v e n ts.
&ostrarJ"cultar un indicador utili,ando
Eventos /jax
$('#oadng_ndcator')
.a|axStart(functon() { $(ths).show(); })
.a|axStop(functon() { $(ths).hde(); });
1.7.7. (jercicios
%argar %ontenido
Externo
archvo
/e|erccos/|s/oad.|s. La tarea es cargar e contendo de un artcuo de bog cuando e
usuaro
haga cck en e ttuo
de tem.
1. Crear un eementos div despus de ttuo de cada ttuo de artcuo de
bog y guardar una referenca haca eos en e eemento de ttuo utzando
$.fn.data.
2. Vncuar un evento cck a ttuo, e cua utzar e mtodo $.fn.oad para
cargar en cada div creado e contendo apropado desde e archvo
/e|erccos/data/bog.htm. No ovde de deshabtar e comportamento
predetermnado de evento clic5.
Notar que cada ttuo de artcuo de bog en ndex.htm ncuye un enace haca e
artcuo. Neces- tar aprovechar e atrbuto href de cada enace para obtener
e contendo propo de bog.htm. Una vez obtenda e vaor de atrbuto, puede
utzar a sguente forma para procesar a nformacn y convertra en un
seector para utzar en con|unto con $.fn.oad:
var href = 'bog.htm#post1';
var tempArray = href.spt('#'); var d = '#' +
tempArray|1|;
Recuerde utzar consoe.og para asegurarse que esta reazando
o correcto.
%argar %ontenido
4tili,ando JS")
archvo
/e|erccos/|s/specas.|s. La tarea es mostrar os detaes de usuaro para un da
determnado
cuando se seeccona desde a sta
despegabe.
1. Aadr un eemento div despus de formuaro que se encuentra dentro de
eemento Gspecials; a ser e ugar en donde se coocar a nformacn a
obtener.
2. Vncuar e evento change en e eemento select; cuando se reaza un
cambo en a seeccn, envar una petcn A|ax a /e|erccos/data/specas.|son.
3. Cuando a petcn devueve una respuesta, utzar e vaor seecconado en
e seect (ayuda:
$.fn.va) para buscar a nformacn correspondente en a respuesta |SON.
4. Aadr agn HTML con a nformacn obtenda en e div creado anterormente.
5. Fnamente remover e botn sbmit de formuaro.
Notar que cada vez que a seeccn camba, se reaza una petcn A|ax.
Cmo cambara e cdgo para reazar soo una petcn y guardar a
nformacn para aprovechara cuando se vueve a cambar a opcn
seecconada?
1.8. (/tensiones
1.8.1. ;Qu8 es una (/tensi&n<
Una extensn de |Ouery es smpemente un nuevo mtodo que se utzar para
extender e prototpo (protot*pe) de ob|eto |Ouery. Cuando se extende e
prototpo, todos os ob|etos |Ouery hereden os mtodos aaddos. Por o tanto,
cuando se reaza una amada |Ouery(), es creado un nuevo ob|eto |Ouery con
todos os mtodos heredados.
E ob|etvo de una extensn es reazar una accn utzando una coeccn de
eementos, de a msma forma que o hacen, por e|empo, os mtodos fadeOut o
addCass de a bboteca.
Usted puede reazar sus propas extensones y utzaras de forma prvada en
su proyecto o tambn puede pubcaras para que otras personas e saquen
provecho.
1.8.2. 'rear una (/tensi&n B$sica
E cdgo para reazar una extensn bsca es
a sguente:
(functon($){
$.fn.myNewPugn = functon() { return
ths.each(functon(){
// reazar ago
});
};
})(|Ouery);
La extensn de prototpo de ob|eto |Ouery ocurre en a sguente nea:
$.fn.myNewPugn = functon() { //...
La cua es encerrada en una funcn autoe|ecutabe:
(functon($){
//...
})(|Ouery);
Esta posee a venta|a de crear un acance "prvado", permtendo utzar e
sgno doar sn tener a preocupacn de que otra bboteca tambn este
utzando dcho sgno.
Por ahora, nternamente a extensn queda:
ths.each(functon(){
// reazar ago
});
};
Dentro de ea, a paabra cave ths hace referenca a ob|eto |Ouery en donde a
extensn es amada.
var some|OueryOb|ect = $('#somethng');
$.fn.myNewPugn = functon() { aert(ths ===
some|OueryOb|ect);
};
some|OueryOb|ect.myNewPugn(); // muestra un aerta con 'true'
E ob|eto |Ouery, normamente, contendr referencas a varos eementos DOM,
es por eo que a menudo se os reere como una coeccn.
Para nteractuar con a coeccn de eementos, es necesaro reazar un buce, e
cua se ogra fcmente con e mtodo each():
ths.each(functon(){
});
};
A gua que otros mtodos, each() devueve un ob|eto |Ouery, permtendo
utzar e encadenado de mtodos ($(...).css().attr()...). Para no romper esta
convencn, a extensn a crear deber devover e ob|eto ths, para permtr
segur con e encadenamento. A contnuacn se muestra un pequeo e|empo:
(functon($){
$.fn.showLnkLocaton = functon() {
return ths.ter('a').each(functon(){
$(ths).append(
' (' + $(ths).attr('href') + ')'
);
});
};
})(|Ouery);
// E|empo de utzacn:
$('a').showLnkLocaton();
La extensn modcar todos os enaces dentro de a coeccn de eementos
y es aadr e vaor de su atrbuto href entre parntess.

<a href="page.htm">Foo</a>

<a href="page.htm">Foo (page.htm)</a>
Tambn es posbe optmzar a extensn:
(functon($){
$.fn.showLnkLocaton = functon() {
return ths.ter('a').append(functon(){ return ' (' + ths.href
+ ')';
});
};
})(|Ouery);
E mtodo append permte especcar una funcn de devoucn de amada, y
e vaor devueto determnar que es o que se aadr a cada eemento. Note
tambn que no se utza e mtodo attr, debdo a que a API natva de DOM
permte un fc acceso a a propedad href.
A contnuacn se muestra otro e|empo de extensn. En este caso, no se
requere reazar un buce en cada eemento ya que se deega a funconadad
drectamente en otro mtodo |Ouery:
(functon($){
$.fn.fadeInAndAddCass = functon(duraton, cassName) { return
ths.fadeIn(duraton, functon(){
$(ths).addCass(cassName);
});
};
})(|Ouery);
// E|empo de utzacn:
$('a').fadeInAndAddCass(400, 'nshedFadng');
1.8.3. (ncontrar y (valuar
(/tensiones
Uno de os aspectos ms popuares de |Ouery es a dversdad de
extensones que exsten.
Sn embargo, a cadad entre extensones puede varar enormemente.
Muchas son ntensvamente probadas y ben mantendas, pero otras son
creadas de forma apresurada y uego gnoradas, sn segur buenas prctcas.
Googe es a me|or herramenta para encontrar extensones (aunque e equpo
de |Ouery este traba- |ando para me|orar su repostoro de extensones). Una
vez encontrada a extensn, posbemente quera consutar a sta de correos
de |Ouery o e cana IRC #|query para obtener a opnn de otras personas
sobre dcha extensn.
Asegrese que a extensn este ben documentada, y que se ofrecen e|empos de
su utzacn. Tambn tenga cudado con as extensones que reazan ms de o
que necesta, estas pueden egar a sobrecargar
su pgna. Para ms conse|os sobre como detectar una extensn medocre,
puede eer e artcuo (en ngs) Sgns of a p o ory wrtten |Ouery pugn por
Remy Sharp.
Una vez seecconada a extensn, necestar aadra a su pgna. Prmero,
descargue a extensn, descomprmaa (s es necesaro) y muvaa a a
carpeta de su apcacn. Fnamente nsertea utzando e eemento scrpt
(uego de a ncusn de |Ouery).
1.8.4. (scribir (/tensiones
A veces, desee reazar una funconadad dsponbe en todo e cdgo, por
e|empo, un mtodo que pueda ser amado desde una seeccn e cua reace
una sere de operacones.
La mayora de as extensones son mtodos creados dentro de espaco de
nombres $.fn. |Ouery garantza que un mtodo amado sobre e ob|eto |Ouery
sea capaz de acceder a dcho ob|eto a travs de ths. En contrapartda, a
extensn debe garantzar de devover e msmo ob|eto recbdo (a menos que se
expcte o contraro).
A contnuacn se muestra un
e|empo:
%rear una extensin para a:adir ' remover una clase en un
elemento al suceder el evento hover
// dencn de a extensn (functon($){
$.fn.hoverCass = functon(c) { return ths.hover(
functon() { $(ths).toggeCass(c); }
);
};
})(|Ouery);
// utzar a extensn
$('').hoverCass('hover');
Para ms nformacn sobre e desarroo de extensones, puede consutar e
artcuo (en ngs) A Pugn De v eopme n t P attern de Mke Asup. En dcho
artcuo, se desarroa una extensn amada
$.fn.hght, a cua provee soporte para a extensn metadata (en caso de estar
presente) y provee un mtodo descentrazado para estabecer opcones gobaes
o de nstancas de a extensn.
El patrn de desarrollo de extensiones para jFuer' explicado por
&i9e /lsup
//
// crear una causura
//
(functon($) {
//
// dencn de a extensn
//
$.fn.hght = functon(optons) { debug(ths);
// generacn de as opcones prncpaes antes de nteractuar var opts = $.extend({},
$.fn.hght.defauts, optons);
// se teractua y formatea cada eemento
return ths.each(functon() {
$ths = $(ths);
// generacn de as opcones especcas de cada eemento var o = $.meta ?
$.extend({}, opts, $ths.data()) : opts;
// actuazacn de os estos de cada eemento
$ths.css({
backgroundCoor: o.background, coor:
o.foreground
});
var markup = $ths.htm();
// se ama a a funcn de formateo markup =
$.fn.hght.format(markup);
$ths.htm(markup);
});
};
//
// funcn prvada para reazar depuracn
//
functon debug($ob|) {
f (wndow.consoe && wndow.consoe.og) wndow.consoe.og('hght seecton count: ' +
$ob|.sze());
};
//
// denr y exponer a funcn de formateo
//
$.fn.hght.format = functon(txt) { return '<strong>' + txt
+ '</strong>';
};
//
// opcones predetermnadas
//
$.fn.hght.defauts = { foreground: 'red',
background: 'yeow'
};
//
// n de a causura
//
})(|Ouery);
1.8.5. (scribir (/tensiones con Mantenimiento de (stado )tilizando
=id> get Factory de jQuery ).
Nota
&sta secci#n esta basada( con permiso del ator( en el art'clo Milding Statefl %6er*
Plgins de Scott Gon"ale".
Mentras que a mayora de as extensones para |Ouery son sn mantenmento
de estado (en ngs stateless) - es decr, extensones que se e|ecutan
soamente sobre un eemento, sendo esa su nca nteraccn - exste un gran
con|unto de funconadades que no se aprovechan en e patrn bsco con que
se desarroan as extensones.
Con e n de enar ese vaco, |Ouery UI (|Ouery User In terfac e) ha
mpementado un sstema ms avanzado de extensones. Este sstema permte
mane|ar estados y admte mtpes funcones para ser expuestas en una nca
extensn. Dcho sstema es amado Eidget factor* y forma parte de a versn
1.8 de |Ouery UI a travs de |Ouery.wdget, aunque tambn puede ser utzado sn
depender de |Ouery UI.
Para demostrar as capacdades de Eidget factor*, se crear una extensn que
tendr como funconadad ser una barra de progreso.
Por ahora, a extensn soo permtr estabecer e vaor de a barra de
progreso una soa vez. Esto se reazar amando a |Ouery.wdget con dos
parmetros: e nombre de a extensn a crear y un ob|eto tera que
contendr as funcones soportadas por a extensn. Cuando a extensn es
amada, una nstanca de ea es creada y todas as funcones se e|ecutaran
en e contexto de esa nstanca.
Exsten dos mportantes dferencas en comparacn con una extensn estndar
de |Ouery: En prmer ugar, e contexto es un ob|eto, no un eemento DOM. En
segundo ugar, e contexto sempre es un nco ob|eto, nunca una coeccn.
4na simple extensin con mantenimiento de estado utili,ando
6idget factor' de jFuer' 4(
$.wdget("nmk.progressbar", {
_create: functon() {
var progress = ths.optons.vaue + "%"; ths.eement
.addCass("progressbar")
.text(progress);
}
});
E nombre de a extensn debe contener un espaco de nombres, en este caso se
utza nmk. Los espacos de nombres tenen una mtacn de un soo nve de
profunddad - es decr que por e|empo, no es posbe utzar nmk.foo. Como se
puede ver en e e|empo, Eidget factor* provee dos propedades para ser utzadas.
La prmera, ths.eement es un ob|eto |Ouery que contene exactamente un
eemento. En caso que a extensn sea e|ecutada en ms de un eemento, una
nstanca separada de a extensn ser creada por cada eemento y cada una
tendr su propo ths.eement. La segunda propedad, ths.optons, es un con|unto de
pares cave/vaor con todas as opcones de a extensn. Estas opcones pueden
pasarse a a extensn como se muestra a contnuacn:
Not
a
.ando est1 reali"ando ss propias e+tensiones es recomendable tili"ar s propio espacio
de nombres( *a !e de%a en claro de donde proviene la e+tensi#n * si es parte de na
colecci#n ma*or. Por otro lado( el espacio de nombres ui est reservado para las
e+tensiones o2ciales de %6er* =,.
=asar opciones al
6idget
$("<dv></dv>")
.appendTo( "body" )
.progressbar({ vaue: 20 });
Cuando se ama a |Ouery.wdget se extende a |Ouery aadendo e mtodo a
|Ouery.fn (de a msma forma que cuando se crea una extensn estndar). E
nombre de a funcn que se aade esta basado en e nombre que se pasa a
|Ouery.wdget, sn e espaco de nombres (en este caso e nombre ser
|Ouery.fn.progressbar).
Como se muestra a contnuacn, es posbe especcar vaores predetermnados
para cuaquer opcn. Estos vaores deberan basarse en a utzacn ms
comn de a extensn.
Establecer opciones predeterminadas
para un 6idget
$.wdget("nmk.progressbar", {
// opcones predetermnadas optons: {
vaue: 0
},
.addCass( "progressbar" )
.text( progress );
}
});
/:adir &todos a un
7idget
Ahora que es posbe ncazar a extensn, es necesaro aadr a habdad
de reazar accones a travs de mtodos dendos en a extensn. Para denr
un mtodo en a extensn es necesaro ncur a funcn en e ob|eto tera que
se pasa a |Ouery.wdget. Tambn es posbe denr mtodos "prvados"
anteponendo un gun ba|o a nombre de a funcn.
%rear mtodos en el
7idget
$.wdget("nmk.progressbar", { optons: {
vaue: 0
},
.addCass("progressbar")
.text(progress);
},
// crear un mtodo pbco vaue:
functon(vaue) {
// no se pasa nngn vaor, entonces acta como mtodo obtenedor f (vaue ===
undened) {
return ths.optons.vaue;
// se pasa un vaor, entonces acta como mtodo estabecedor
} ese {
ths.optons.vaue = ths._constran(vaue); var progress =
ths.optons.vaue + "%"; ths.eement.text(progress);
}
},
// crear un mtodo prvado
_constran: functon(vaue) { f (vaue >
100) {
vaue = 100;
}
f (vaue < 0) { vaue = 0;
}
});
}
return vaue;
Para amar a un mtodo en una nstanca de a extensn, se debe pasar e
nombre de dcho mtodo a a extensn. En caso que se ame a un mtodo
que acepta parmetros, estos se deben pasar a contnuacn de nombre de
mtodo.
Llamar a mtodos en una instancia
de extensin
var bar = $("<dv></dv>")
.appendTo("body")
.progressbar({ vaue: 20 });
// obtene e vaor actua
aert(bar.progressbar("vaue"));
// actuaza e vaor bar.progressbar("vaue",
50);
// obtene e vaor nuevamente
aert(bar.progressbar("vaue"));
Not
a
&%ectar m1todos pasando el nombre del m1todo a la misma fnci#n %6er* !e se
tili"a para iniciali"ar la e+tensi#n pede parecer e+tra9o( sin embargo es reali"ado as'
para pre- venir la /contaminaci#n0 del espacio de nombres de %6er* manteniendo al
mismo tiempo la capacidad de l lamar a m1todos en cadena.
5rabajar con las "pciones
del 7idget
Uno de os mtodos dsponbes automtcamente para a extensn es opton.
Este mtodo permte obtener y estabecer opcones despus de a
ncazacn y funcona exactamente gua que os mtodos attr y css de
|Ouery: pasando ncamente un nombre como argumento e mtodo funcona
como obtenedor, mentras que pasando uno o ms con|untos de nombres y
vaores e mtodo funcona como estabecedor. Cuando es utzado como
mtodo obtenedor, a extensn devover e vaor actua de a opcn
correspondente a nombre pasado como argumento. Por otro ado, cuando es
utzado como
un mtodo estabecedor, e mtodo _setOpton de a extensn ser amado por
cada opcn que se desea estabecer.
0esponder cuando una opcin es establecida
vaue: 0
},
_create: functon() { ths.eement.addCass("progressbar"); ths._update();
},
_setOpton: functon(key, vaue) { ths.optons|key| = vaue;
ths._update();
},
_update: functon() {
var progress = ths.optons.vaue + "%"; ths.eement.text(progress);
}
});
/:adir +unciones de Devolucin
de Llamada
Uno de as maneras ms fces de extender una extensn es aadr
funcones de devoucn de amada, para que de esta forma e usuaro puede
reacconar cuando e estado de a extensn cambe. A contnuacn se mostrar
como aadr una funcn de devoucn de amada a a extensn creada para
ndcar cuando a barra de progreso haya acanzado e 100 %. E mtodo _trgger
obtene tres parmetros: e nombre de a funcn de devoucn, e ob|eto de
evento natvo que ncaza a funcn de devoucn y un con|unto de nformacn
reevante a evento. E nombre de a funcn de devoucn es e nco parmetro
obgatoro, pero os otros pueden ser muy tes s e usuaro desea mpementar
funconadades personazadas.
=roveer funciones de devolucin
de llamada
vaue: 0
},
},
ths._update();
},
f (ths.optons.vaue == 100) { ths._trgger("compete", nu, { vaue: 100 });
}
}
});
Las funcones de devoucn son esencamente so opcones adconaes, por
o cua, pueden ser estabecdas como cuaquer otra opcn. Cada vez que
una funcn de devoucn es e|ecutada, un evento correspondente se actva
tambn. E tpo de evento se determna medante a concatenacn de nombre
de a extensn y e nombre de a funcn de devoucn. Dcha funcn y evento
recben dos msmos parmetros: un ob|eto de evento y un con|unto de
nformacn reevante a evento.
S a extensn tendr aguna funconadad que podr ser canceada por e
usuaro, a me|or manera de hacero es creando funcones de devoucn canceabes.
E usuaro podr cancear una funcn de devoucn o su evento asocado de a
msma manera que se cancea cuaquer evento natvo: amando a
event.preventDefaut() o utzando return fase.
2incular a eventos
del 6idget
.appendTo("body")
.progressbar({
compete: functon(event, data) { aert( "Funcn de
devoucn" );
}
})
.on("progressbarcompete", functon(event, data) {
aert("E vaor de a barra de progreso es " + data.vaue);
});
bar.progressbar("opton", "vaue", 100);
En profundidadB 7idget
+actor'
Cuando se ama a |Ouery.wdget, sta crea una funcn constructora para a
extensn y estabece e ob|eto tera que se pasa como e prototpo para
todas as nstancas de a extensn. Todas as funconadades que
automtcamente se aaden a a extensn provenen de prototpo base de
wdget, e cua es dendo como |Ouery.Wdget.prototype. Cuando una nstanca de a
extensn es creada, es guardada en e eemento DOM orgna utzando
|Ouery.data, con e nombre de a extensn como paabra cave.
Debdo a que a nstanca de a extensn esta drectamente vncuada a
eemento DOM, es posbe acceder a a nstanca de a extensn de forma
drecta. Esto permte amar a mtodos drectamente en a nstanca de a
extensn en ugar de pasar e nombre de mtodo como una cadena de
caracteres, dando a posbdad de acceder a as propedades de a extensn.
.appendTo("body")
.progressbar()
.data("progressbar" );
// amar a un mtodo drectamente en a nstanca de a extensn bar.opton("vaue", 50);
// acceder a propedades en a nstanca de a extensn aert(bar.optons.vaue);
Uno de os mayores benecos de tener un constructor y un prototpo para una
extensn es a facdad de extender a extensn. E hecho de aadr o
cambar mtodos en e prototpo de a extensn, permte tambn
modcaros en todas as nstancas de a extensn. Por e|empo, s deseamos
aadr un mtodo a a extensn de barra de progreso para permtr
restabecer e progreso a 0 %, es posbe hacero aadendo este mtodo a
prototpo y automtcamente estar dsponbe para ser amada desde
cuaquer nstanca de a extensn.
$.nmk.progressbar.prototype.reset = functon() { ths._setOpton("vaue", 0);
};
Limpie
,a
En agunos casos, tendr sentdo permtr a os usuaros apcar y desapcar
a extensn. Esto es posbe hacero a travs de mtodo destroy. Con dcho
mtodo, es posbe deshacer todo o reazado con a extensn. Tambn ste
es amado automtcamente s e eemento vncuado a a extensn es
emnado de DOM (por o cua tambn es posbe utzaro para a
"recoeccn de basura"). E mtodo destroy predetermnado remueve e
vncuo entre e eemento DOM y a nstanca de a extensn
/:adir un mtodo destro'
al 6idget
$.wdget( "nmk.progressbar", { optons: {
vaue: 0
},
},
ths._update();
},
f (ths.optons.vaue == 100 ) { ths._trgger("compete", nu, { vaue: 100 });
}
},
destroy: functon() { ths.eement
.removeCass("progressbar")
.text("");
}
});
// ama a a funcn base destroy
$.Wdget.prototype.destroy.ca(ths);
%onclusi
n
La utzacn de @idget factor* es soo una manera de crear extensones con
mantenmento de estado. Exsten agunos modeos dferentes que pueden ser
utzados y cada uno posee sus venta|as y desven- ta|as. @idget factor* resueve
muchos probemas comunes, me|ora sgncatvamente a productvdad y a
reutzacn de cdgo.
1.8.6. (jercicios
0eali,ar una 5abla
"rdenable
Para este e|ercco, a tarea es dentcar, descargar e mpementar una
extensn que permta ordenar a taba exstente en a pgna ndex.htm.
Cuando est sto, todas as coumnas de a taba deben poder ser
ordenabes.
Escribir una Extensin =ara %ambiar el %olor de
+ondo en 5ablas
archvo
/e|erccos/|s/strpe.|s. La tarea es escrbr una extensn amada "strpe" a cua
podr ser
amada desde cuaquer eemento tabe y deber cambar e coor de fondo de
as as mpares en e
cuerpo de a taba. E coor podr ser especcado como
parmetro de a extensn.
$('#myTabe').strpe('#cccccc');
No ovde de devover a taba para que otros mtodos puedan ser encadenados
uego de a amada a a extensn.
1.9. Mejores #r$cticas para Aumentar el -endimiento
Este captuo cubre numerosas me|ores prctcas de |avaScrpt y |Ouery,sn
un orden en partcuar. Muchas de estas prctcas estn basadas en a
presentacn |Ouery A n t- P atterns for P erformance (en ngs) de Pau Irsh.
1.9.1. ?uardar la *ongitud en Bucles
En un buce, no es necesaro acceder a a ongtud de un arrego cada vez que
se evaa a condcn; dcho vaor se puede guardar prevamente en una
varabe.
var myLength = myArray.ength;
for (var = 0; < myLength; ++) {
// do stuh
}
1.9.2. A!adir +uevo 'ontenido por Fuera de un Bucle
S va a nsertar muchos eementos en e DOM, hgao todo de una soa vez, no de
una por vez.
// ma
$.each(myArray, functon(, tem) {
var newLstItem = '<>' + tem + '</>';
$('#baers').append(newLstItem);
});
// me|or: reazar esto
var frag = document.createDocumentFragment();
$.each(myArray, functon(, tem) {
var newLstItem = '<>' + tem + '</>'; frag.appendChd(newLstItem);
});
$('#baers')|0|.appendChd(frag);
// o esto:
var myHtm = '';
$.each(myArray, functon(, tem) { myHtm += '<>' +
tem + '</>';
});
$('#baers').htm(myHtm);
1.9.3. +o -epetirse
No se repta; reace as cosas una vez y so una, caso contraro o estar
hacendo ma.
// MAL
f ($eventfade.data('currenty') != 'showng') {
$eventfade.stop();
}
f ($eventhover.data('currenty') != 'showng') {
$eventhover.stop();
}
f ($spans.data('currenty') != 'showng') {
$spans.stop();
}
// BIEN
var $eems = |$eventfade, $eventhover, $spans|;
$.each($eems, functon(,eem) {
f (eem.data('currenty') != 'showng') { eem.stop();
}
});
1.9.4. 'uidado con las Funciones An&nimas
No es aconse|abe utzar de sobremanera as funcones annmas. Estas son
dfces de depurar, mantener, probar o reutzar. En su ugar,utce un ob|eto
tera para organzar y nombrar sus controadores y funcones de devoucn de
amada.
// MAL
$('#magc').cck(functon(e) {
$('#yayehects').sdeUp(functon() {
// ...
});
});
$('#happness').oad(ur + ' #uncorns', functon() {
// ...
});
});
// ME|OR
var PI = {
onReady : functon() {
$('#magc').cck(PI.candyMtn);
$('#happness').oad(PI.ur + ' #uncorns', PI.uncornCb);
},
candyMtn : functon(e) {
$('#yayehects').sdeUp(PI.sdeCb);
},
sdeCb : functon() { ... },
uncornCb : functon() { ... }
};
$(document).ready(PI.onReady);
1.9.5. Optimizaci&n de
Selectores
La optmzacn de seectores es menos mportante de o que soa ser, debdo a
a mpementacn en agunos navegadores dedocument.querySeectorA(), pasando a
carga de |Ouery haca e navegador. Sn embargo, exsten agunos conse|os que
debe tener en cuenta.
Selectores
basados en (D
Sempre es me|or comenzar as seeccones
con un ID.
// rpdo
$('#contaner dv.robotarm');
// super-rpdo
$('#contaner').nd('dv.robotarm');
E e|empo que utza $.fn.nd es ms rpdo debdo a que a prmera seeccn
utza e mo- tor de seeccn nterno Szze - mentras que a seeccn reazada
ncamente por ID utza document.getEementById(), e cua es extremadamente
rpdo debdo a que es una funcn natva de navegador.
Especi!ci
dad
Trate de ser especco para e ado derecho de a seeccn y menos
especco para e zquerdo.
// no optmzado
$('dv.data .gonzaez');
// optmzado
$('.data td.gonzaez');
Use en o posbe etqueta.case de ado derecho de a seeccn, y soo etqueta o .case en
a parte zquerda.
$('.data tabe.attendees td.gonzaez');
// mucho me|or: emnar a parte meda de ser posbe
$('.data td.gonzaez');
La segunda seeccn tene me|or rendmento debdo a que atravesa menos
capas para buscar e eemento.
Evitar el Selector
4niversal
Seeccones en donde se especca de forma mpcta o expcta una seeccn
unversa puede resutar muy ento.
$('.buttons > *'); // muy ento
$('.buttons').chdren(); // mucho me|or
$('.gender :rado'); // seeccn unversa mpcta
$('.gender *:rado'); // msma forma, pero de forma expcta
$('.gender nput:rado'); // mucho me|or
1.9.6. )tilizar la %elegaci&n de (ventos
La deegacn de eventos permte vncuar un controador de evento a un
eemento contenedor (por e|empo, una sta desordenada) en ugar de
mtpes eementos contendos (por e|empo, os tems de una sta). |Ouery
hace fc este traba|o a travs de $.fn.ve y$.fn.deegate. En o posbe, es
recomendabe utzar $.fn.deegate en ugar de $.fn.ve, ya que emna a necesdad
de una seeccn y su contexto expcto reduce a carga en aproxmadamente
un 80 %.
Adems, a deegacn de eventos permte aadr nuevos eementos
contenedores a a pgna sn tener que vover a vncuar sus controadores de
eventos.
// ma (s exsten muchos tems en a sta)
$('.trgger').cck(handerFn);
// me|or: deegacn de eventos con $.fn.ve
$('.trgger').ve('cck', handerFn);
// mucho me|or: deegacn de eventos con $.fn.deegate
// permte especcar un contexto de forma fc
$('#myLst').deegate('.trgger', 'cck', handerFn);
1.9.7. Separar (lementos para ,rabajar con
(llos
En o posbe, hay que evtar a manpuacn de DOM. Para ayudar con este
propsto, a partr de a versn 1.4, |Ouery ntroduce $.fn.detach e cua permte
traba|ar eementos de forma separada de DOM para uego nsertaros.
var $tabe = $('#myTabe');
var $parent = $tabe.parent();
$tabe.detach();
// ... se aaden muchas cedas a a taba
$parent.append(tabe);
1.9.8. )tilizar (stilos en 'ascada para 'ambios de 'SS en 0arios (lemen>
tos
S va a cambar e CSS en ms de 20 eementos utzando $.fn.css, consdere
reazar os cambos de estos aadndoos en una etqueta st*le. De esta forma
se ncrementa un 60 % e rendmento.
// correcto hasta 20 eementos, ento en ms eementos
$('a.swedberg').css('coor', '#asd123');
$('<stye type="text/css">a.swedberg { coor : #asd123 }</stye>')
.appendTo('head');
1.9.9. )tilizar @*data en *ugar de
@*fn*data
Utzar $.data en un eemento de DOM en ugar de $.fn.data en una seeccn
puede ser hasta 10 veces ms rpdo. Antes de reazaro, este seguro de
comprender a dferenca entre un eemento DOM y una seeccn |Ouery.
// reguar
$(eem).data(key,vaue);
// 10 veces ms rpdo
$.data(eem,key,vaue);
1.9.10. +o Actuar en (lementos no
(/istentes
|Ouery no e dr s esta tratando de e|ecutar cdgo en una seeccn vaca -
esta se e|ecutar como s nada estuvera ma. Depender de usted comprobar s
a seeccn contene eementos.
// MAL: e cdgo a contnuacn e|ecuta tres funcones
// sn comprobar s exsten eementos
// en a seeccn
$('#nosuchthng').sdeUp();
// Me|or
var $mySeecton = $('#nosuchthng');
f ($mySeecton.ength) { $mySeecton.sdeUp(); }
// MUCHO ME|OR: aadr una extensn doOnce
|Ouery.fn.doOnce = functon(func){
ths.ength && func.appy(ths); return ths;
}
$('.carttems').doOnce(functon(){
// reazar ago
});
Este conse|o es especamente apcabe para wdgets de |Ouery UI, os cuaes
poseen mucha carga ncuso cuando a seeccn no contene eementos.
1.9.11. %e@nici&n de 0ariables
Las varabes pueden ser dendas en una soa decaracn
en ugar de varas.
// antguo
var test = 1;
var test2 = functon() { ... }; var test3 =
test2(test);
// me|or forma var
test = 1,
test2 = functon() { ... }, test3 = test2(test);
En funcones autoe|ecutabes, as dencones de varabes pueden
pasarse todas |untas.
(functon(foo, bar) { ... })(1, 2);
1.9.12. 'ondicionales
// antguo
f (type == 'foo' || type == 'bar') { ... }
// me|or
f (/(foo|bar)$/.test(type)) { ... }
// bsqueda en ob|eto tera
f (({ foo : 1, bar : 1 })|type|) { ... }
1.9.13. +o ,ratar a jQuery como si fuera una 'aja +egra
Utce e cdgo fuente de a bboteca como s fuera su documentacn
- guarde e enace
h ttp://bt.y/|qsource como marcador para tener
de referenca.
1.10. Organizaci&n del '&digo
1.10.1. .ntroducci&n
Cuando se emprende a tarea de reazar apcacones compe|as de ado de
cente, es necesaro consderar a forma en que se organzar e cdgo. Este
captuo est dedcado a anazar agunos patrones de organzacn de cdgo
para utzar en una apcacn reazada con |Ouery. Adems se exporar e
sstema de gestn de dependencas de Requre|S.
%onceptos
%lave
Antes de comenzar con os patrones de organzacn de cdgo, es mportante
entender agunos conceptos cave.
E cdgo debe estar dvdo en undades funconaes - mduos, servcos,
etc. Y se debe evtar a tentacn de tener todo en un nco boque $
(document).ready(). Este concepto se conoce como encapsuacn.
No repetr cdgo. Identcar pezas smares y utzar tcncas de
heredacn.
A pesar de a naturaeza de |Ouery, no todas as apcacones |avaScrpt
traba|an (o tenen a necesdad de poseer una representacn) en e DOM.
Las undades de funconadad deben tener una artcuacn exbe (en ngs
o osey couped)
- es decr, una undad de funconadad debe ser capaz de exstr por s msma
y a comuncacn
con otras undades debe ser a travs de un sstema de mensa|es como os
eventos personazados
o pub/sub. Por otro ado, sempre que sea posbe, de debe mantener
ae|ada a comuncacn
drecta entre undades funconaes.
E concepto de artcuacn exbe puede ser especamente probemtco
para desarroadores que hacen su prmera ncursn en apcacones
compe|as. Por o tanto, s usted esta empezando a crear apcacones,
soamente sea conscente de este concepto.
1.10.2. (ncapsulaci&n
E prmer paso para a organzacn de cdgo es separar a apcacn en
dstntas pezas. Muchas veces, este esfuerzo suee ser sucente para
mantener a cdgo en orden.
El "bjeto
Literal
Un ob|eto tera es ta vez a manera ms smpe de encapsuar cdgo
reaconado. Este no ofrece nnguna prvacdad para propedades o mtodos,
pero es t para emnar funcones annmas, centrazar opcones de
conguracn, y factar e camno para a reutzacn y refactorzacn.
4n objeto
literal
var myFeature = { myProperty :
'heo',
myMethod : functon() { consoe.og(myFeature.myProperty);
},
nt : functon(settngs) { myFeature.settngs = settngs;
},
readSettngs : functon() { consoe.og(myFeature.settngs);
}
};
myFeature.myProperty; // 'heo' myFeature.myMethod(); //
regstra 'heo' myFeature.nt({ foo : 'bar' });
myFeature.readSettngs(); // regstra { foo : 'bar' }
E ob|eto posee una propedad y varos mtodos, os cuaes son pbcos (es
decr, cuaquer parte de a apcacn puede veros). Cmo se puede apcar
este patrn con |Ouery? Por e|empo, en e sguente cdgo escrto en e esto
tradcona:
// hacendo cck en un tem de a sta se carga certo contendo,
// uego utzando e ID de dcho tem se ocutan
// os tems aedaos
$('#myFeature ')
.append('<dv/>')
.c ck(functon() { var $ths =
$(ths);
var $dv = $ths.nd('dv');
$dv.oad('foo.php?tem=' +
$ths.attr('d'), functon() {
$dv.show();
$ths.sbngs()
.nd('dv').hde();
});
}
);
});
S e e|empo mostrado representa e 100 % de a apcacn, es convenente
de|aro como esta, ya que no amerta hacer una reestructuracn. En cambo,
s a peza es parte de una apcacn ms grande, estara ben separar dcha
funconadad de otras no reaconadas. Por e|empo, es convenente mover a
URL a a cua se hace a petcn fuera de cdgo y pasara a rea de
conguracn. Tambn romper a cadena de mtodos para hacer uego ms
fc a modcacn.
4tili,ar un objeto literal para una
funcionalidad jFuer'
var myFeature = {
nt : functon(settngs) { myFeature.cong = {
$tems : $('#myFeature '),
$contaner : $('<dv cass="contaner"></dv>'), urBase : '/foo.php?tem='
};
// permte sobreescrbr a conguracn predetermnada
$.extend(myFeature.cong, settngs);
myFeature.setup();
},
setup : functon() { myFeature.cong.
$tems
.each(myFeature.createContaner)
.cck(myFeature.showItem);
},
createContaner : functon() { var $ = $(ths),
$c = myFeature.cong.$contaner.cone()
.appendTo($);
$.data('contaner', $c);
},
budUr : functon() {
return myFeature.cong.urBase + myFeature.$currentItem.attr('d');
},
showItem : functon() {
var myFeature.$currentItem = $(ths); myFeature.getContent(myFeature.showContent);
},
getContent : functon(caback) { var ur =
myFeature.budUr(); myFeature.$currentItem
.data('contaner').oad(ur, caback);
},
showContent : functon() { myFeature.$currentItem
.data('contaner').show();
myFeature.hdeContent();
},
hdeContent : functon() { myFeature.
$currentItem.sbngs()
.e ach(functon() {
$(ths).data('contaner').hde();
});
}
};
$(document).ready(myFeature.nt);
La prmera caracterstca a notar es que e cdgo es ms argo que e orgna
- como se d|o anterormente, s este fuera e acance de a apcacn,
utzar un ob|eto tera sera probabemente una exageracn.
Con a nueva organzacn, as venta|as
obtendas son:
Separacn de cada funconadad en pequeos mtodos. En un futuro, s
se quere cambar a forma en que e contendo se muestra, ser caro en
donde habr que hacero. En e cdgo orgna, este paso es mucho ms
dfc de ocazar.
Se emnaron os usos de funcones annmas.
Las opcones de conguracn se moveron a una ubcacn centra.
Se emnaron as mtacones que poseen as cadenas de mtodos,
hacendo que e cdgo sea ms fc para refactorzar, mezcar y
reorganzar.
Por sus caracterstcas, a utzacn de ob|etos teraes permten una cara
me|ora para tramos argos de cdgo nsertados en un boque $
(document).ready(). Sn embargo, no son ms avanzados que tener varas
decaracones de funcones dentro de un boque $(document).ready().
El =atrn
&odular
E patrn moduar supera agunas mtacones de ob|eto tera, ofrecendo
prvacdad para varabes y funcones, exponendo a su vez (s se o desea) una
API pbca.
El patrn
modular
var feature =(functon() {
// varabes y funcones prvadas var prvateThng
= 'secret',
pubcThng = 'not secret',
changePrvateThng = functon() { prvateThng = 'super
secret';
},
sayPrvateThng = functon() {
consoe.og(prvateThng);
changePrvateThng();
};
// API pubca return {
pubcThng : pubcThng, sayPrvateThng :
sayPrvateThng
}
})();
feature.pubcThng; // regstra 'not secret' feature.sayPrvateThng();
// regstra 'secret' y camba e vaor
// de prvateThng
En e e|empo, se autoe|ecuta una funcn annma a cua devueve un ob|eto.
Dentro de a funcn, se denen agunas varabes. Debdo a que eas son
dendas dentro de a funcn, desde afuera no se tene acceso a menos que se
pongan dentro de ob|eto que se devueve. Esto mpca que nngn cdgo
fuera de a funcn tene acceso a a varabe prvateThng o a a funcn
sayPrvateThng. Sn embargo, sayPrvateThng posee acceso a prvateThng y changePrvateThng
debdo a estar dendos en e msmo acance.
E patrn es poderoso debdo a que permte tener varabes y funcones prvadas,
exponendo una API mtada consstente en devover propedades y mtodos de
un ob|eto.
A contnuacn se muestra una revsn de e|empo vsto anterormente, con as
msmas caracterstcas, pero exponendo un nco mtodo pbco de moduo,
showItemByIndex().
4tili,ar el patrn modular para una
funcionalidad jFuer'
$(document).ready(functon() { var feature =
(functon() {
var $tems = $('#myFeature '),
$contaner = $('<dv cass="contaner"></dv>'),
$currentItem,
urBase = '/foo.php?tem=', createContaner
= functon() {
var $ = $(ths),
$c = $contaner.cone().appendTo($);
$.data('contaner', $c);
},
budUr = functon() {
return urBase + $currentItem.attr('d');
},
showItem = functon() {
var $currentItem = $(ths);
getContent(showContent);
},
showItemByIndex = functon(dx) {
$.proxy(showItem, $tems.get(dx));
},
getContent = functon(caback) {
$currentItem.data('contaner').oad(budUr(), caback);
},
showContent = functon() {
$currentItem.data('contaner').show(); hdeContent();
},
hdeContent = functon() {
$currentItem.sbngs()
.each(functon() {
$(ths).data('contaner').hde();
});
};
$tems
.each(createContaner)
.cck(showItem);
return { showItemByIndex : showItemByIndex };
})();
});
feature.showItemByIndex(0);
1.10.3. ?esti&n de %ependencias
Nota
&sta secci#n esta basada en la e+celente d o cmentaci#n de > e !i r eJS * es tili"ada con el
permiso de James Mr5e( ator de >e!ireJS.
Cuando un proyecto acanza certo tamao, comenza a ser dfc e mane|o de
os mduos de una apcacn, ya que es necesaro saber ordenaros de forma
correcta, y comenzar a combnaros en un nco archvo para ograr a menor
cantdad de petcones. Tambn es posbe que se quera cargar cdgo "a
vueo" uego de a carga de a pgna.
Requre|S es una herramenta de gestn de dependencas creada por |ames
Burke, a cua ayuda a mane|ar os mduos, cargaros en un orden correcto y
combnaros de forma fc sn tener que reazar nngn cambo. A su vez,
otorga una manera fc de cargar cdgo una vez cargada a pgna, permtendo
mnmzar e tempo de descarga.
Requre|S posee un sstema moduar, que sn embargo, no es necesaro
seguro para obtener sus benecos. E formato moduar de Requre|S permte a
escrtura de cdgo encapsuado, ncorporacn de nternaconazacn (18n) a
os paquetes (para permtr utzaros en dferentes engua|es) e ncuso a
utzacn de servcos |SONP como dependencas.
"btener
0e3uireJS
La manera ms fc de utzar Requre|S con |Ouery es descargando e
paquete de |Ouery con Requre|S ya ncorporado en . Este paquete excuye
porcones de cdgo que dupcan funcones de |Ouery. Tambn es t
descargar un e|empo de pr oy ecto |Ouery que utza Requre| S.
4tili,ar 0e3uireJS con
jFuer'
Utzar Requre|S es smpe, tan soo es necesaro ncorporar en a pgna a
versn de |Ouery que posee Requre|S ncorporado y a contnuacn soctar
os archvos de a apcacn. E sguente e|empo asume que tanto |Ouery
como os otros archvos estn dentro de a carpeta scrpts/.
4tili,ar 0e3uireJSB 4n
ejemplo simple
<!DOCTYPE htm>
<htm>
<head>
<tte>|Ouery+Requre|S Sampe Page</tte>
<scrpt src="scrpts/requre-|query.|s"></scrpt>
<scrpt>requre(|"app"|);</scrpt>
</head>
<body>
<h1>|Ouery+Requre|S Sampe Page</h1>
</body>
</htm>
La amada a requre(|.
a
pp"|) e dce a Requre|S que cargue e archvo scrpts/app.|s.
Requre|S cargar cuaquer dependenca pasada a requre() sn a extensn .|s
desde e msmo drectoro que en que se encuentra e archvo requre-|query.|s,
aunque tambn es posbe especcar a ruta de a sguente forma:
<scrpt>requre(|"scrpts/app.|s"|);</scrpt>
E archvo app.|s es otra amada a requre.|s para cargar todos os archvos
necesaros para a apcacn. En e sguente e|empo, app.|s socta dos extensones
|query.apha.|s y |query.beta.|s (no son extensones reaes, soo e|empos). Estas
extensones estn en a msma carpeta que requre-|query.|s:
4n simple archivo JavaScript con
dependencias
requre(|"|query.apha", "|query.beta"|, functon() {
//as extensones |query.apha.|s y |query.beta.|s han sdo cargadas.
$(functon() {
$('body').apha().beta();
});
});
%rear &dulos 0eusables con
0e3uireJS
Requre|S hace que sea fc denr mduos reusabes a travs de requre.def(). Un
moduo Re- qure|S puede tener dependencas que pueden ser utzadas para
denr un mduo, adems de poder devover un vaor - un ob|eto, una
funcn, u otra cosa - que puede ser ncuso utzado otros mduos.
S e mduo no posee nnguna dependenca, tan soo se debe especcar e
nombre como prmer argumento de requre.def(). E segundo argumento es un
ob|eto tera que dene as propedades de mduo. Por e|empo:
De!nicin de un mdulo 0e3uireJS 3ue no
posee dependencias
requre.def("my/smpeshrt",
{
coor: "back", sze:
"unsze"
}
);
E e|empo debe ser guardado en e archvo
my/smpeshrt.|s.
S e moduo posee dependencas, es posbe especcaras en e segundo
argumento de requre.def() a travs de un arrego) y uego pasar una funcn
como tercer argumento. Esta funcn ser amada para denr e mduo una
vez cargadas todos as dependencas. Dcha funcn recbe os vaores
devuetos por as dependencas como un argumento (en e msmo orden en que
son requerdas en e arrego) y uego a msma debe devover un ob|eto que
dena e mduo.
De!nicin de un mdulo 0e3uireJS con
dependencias
requre.def("my/shrt", |"my/cart",
"my/nventory"|, functon(cart, nventory)
{
//devueve un ob|eto que dene a "my/shrt" return {
coor: "bue", sze: "arge"
addToCart: functon() {
nventory.decrement(ths);
cart.add(ths);
}
}
}
);
En este e|empo, e moduo my/shrt es creado. Este depende de my/cart y my/nventory.
En e dsco, os archvos estn estructurados de a sguente forma:
my/cart.|s my/nventory.|s
my/shrt.|s
La funcn que dene my/shrt no es amada hasta que my/cart y my/nventory hayan
sdo cargadas, y dcha funcn recbe como argumentos a os mduos como cart y
nventory. E orden de os argumentos de a funcn debe concdr con e orden en
que as dependencas se requeren en e arrego. E ob|eto devueto dene e
mduo my/shrt. Denendo os mduos de esta forma, my/shrt no exste como un
ob|eto goba, ya que mtpes mduos pueden exstr en a pgna a msmo
tempo.
Los mduos no tenen que devover un ob|eto; cuaquer tpo de vaor es
permtdo.
De!nicin de un mdulo 0e3uireJS 3ue devuelve una funcin
requre.def("my/tte", |"my/dependency1",
"my/dependency2"|, functon(dep1, dep2) {
// devueve una funcn para denr "my/tte".
// Este devueve o estabece
// e ttuo de a ventana return functon(tte)
{
return tte ? (wndow.tte = tte) : wndow.tte;
}
}
);
Soo un mduo debe ser requerdo por
archvo |avaScrpt.
"ptimi,ar el %digo con las Derramientas
de 0e3uireJS
Una vez ncorporado Requre|S para e mane|o de dependencas, a optmzacn
de cdgo es muy fc. Descargue e paquete de Requre|S y coqueo en
cuaquer ugar, preferentemente fuera de rea de desarroo web. Para os
propstos de este e|empo, e paquete de Requre|S esta ubcado en una
carpeta paraea a drectoro webapp (a cua contene a pgna HTML y todos os
archvos |avaScrpt de a apcacn). La estructura de drectoros es:
requre|s/ (utzado para e|ecutar as herramentas) webapp/app.htm
webapp/scrpts/app.|s webapp/scrpts/requre-
|query.|s webapp/scrpts/|query.apha.|s
webapp/scrpts/|query.beta.|s
Luego, en a carpeta en donde se encuentran requre-|query.|s y app.|s, crear un archvo
amado
app.bud.|s con e sguente contendo:
/rchivo de con!guracin para las herramientas de optimi,acin
de 0e3uireJS
{
appDr: "../", baseUr:
"scrpts/",
dr: "../../webapp-bud",
//Comentar a sguente nea s se desea
//mncar e cdgo por e compador
//en su modo "smpe" optmze: "none",
modues: |
{
name: "app"
}
|
}
Para utzar a herramenta, es necesaro tener nstaado |ava 6. Cosure
Comper es utzado para a mncacn de cdgo (en caso que optmze: "none"
est comentado).
Para comenzar a procesar os archvos, abrr una ventana de comandos,
drgrse a drectoro
webapp/scrpts y e|ecutar:
# para sstemas que no son wndows
../../requre|s/bud/bud.sh app.bud.|s
# para sstemas wndows
..\..\requre|s\bud\bud.bat app.bud.|s
Una vez e|ecutado, e archvo app.|s de a carpeta webapp-bud contendr todo e cdgo
de app.|s ms e de |query.apha.|s y |query.beta.|s. S se abre e archvo app.htm (tambn
en a carpeta webapp-bud) podr notar que nnguna petcn se reaza para cargar
|query.apha.|s y |query.beta.|s.
1.10.4. (jercicios
%rear un &dulo
=ortlet
Abra e archvo /e|erccos/portets.htm en e navegador. Reace e e|ercco utzando e
archvo
/e|erccos/|s/portets.|s. E e|ercco consste en crear una funcn creadora de portet
que
utce e patrn moduar, de ta manera que e sguente
cdgo funcone:
var myPortet = Portet({ tte :
'Curry',
source : 'data/htm/curry.htm', ntaState : 'open'
// or 'cosed'
});
myPortet.$eement.appendTo('body');
Cada portet deber ser un dv con un ttuo, un rea de contendo, un botn
para abrr/cerrar e portet, un botn para removero y otro para actuazaro.
E portet devueto por a funcn deber tener a sguente API pbca:
myPortet.open(); // fuerza a abrr myPortet.cose(); // fuerza a
cerrar
myPortet.togge(); // aterna entre os estados aberto y cerrado myPortet.refresh(); // actuaza
e contendo
myPortet.destroy(); // remueve e portet de a pgna myPortet.setSource('data/htm/onons.htm'); // camba e cdgo
1.11. (ventos
#ersonalizados
1.11.1. .ntroducci&n a los (ventos
#ersonalizados
Todos estamos famarzados con os eventos bscos - cck, mouseover, focus, bur,
submt, etc.
-que surgen a partr de a nteraccn de usuaro con
e navegador.
Los eventos personazados permten conocer e mundo de a programacn
orentada a eventos (en ngs event-driven programming). En este captuo, se
utzar e sstema de eventos personazados de |Ouery para crear una smpe
apcacn de bsqueda en TEitter.
En un prmer momento puede ser dfc entender e requsto de utzar
eventos personazados, ya que os eventos convenconaes permten satsfacer
todas as necesdades. Sn embargo, os eventos personazados ofrecen una
nueva forma de pensar a programacn en |avaScrpt. En ugar de enfocarse en e
eemento que e|ecuta una accn, os eventos personazados ponen a atencn
en e eemento en donde a accn va a ocurrr. Este concepto brnda varos
benecos:
Los comportamentos de eemento ob|etvo pueden ser e|ecutados por
dferentes eementos utzando e msmo cdgo.
Los comportamentos pueden ser e|ecutados en mtpes, smares
eementos ob|etvos a a vez. Los comportamentos son asocados de forma
ms cara con e eemento ob|etvo, hacendo que
e cdgo sea ms fc de eer y mantener.
Un e|empo es a me|or forma de expcar e asunto. Suponga que posee una
mpara ncandescente en una habtacn de una casa. La mpara actuamente
esta encendda. La msma es controada por dos nterruptores de tres poscones
y un clapper (nterruptor actvado por apausos):
<dv cass="room" d="ktchen">
<dv cass="ghtbub on"></dv>
<dv cass="swtch"></dv>
<dv cass="capper"></dv>
</dv>
E|ecutando e clapper o aguno de os nterruptores, e estado de a ampara
camba. A os nterruptores o a clapper no e nteresan s a mpara esta
prendda o apagada, tan soo queren cambar su estado
Sn a utzacn de eventos personazados, es posbe escrbr a rutna de a
sguente manera:
$('.swtch, .capper').cck(functon() {
var $ght = $(ths).parent().nd('.ghtbub'); f ($ght.hasCass('on')) {
$ght.removeCass('on').addCass('oh');
} ese {
$ght.removeCass('oh').addCass('on');
}
});
Por otro ado, utzando eventos personazados, e cdgo queda as:
$('.ghtbub').on('changeState', functon(e) { var $ght = $(ths);
f ($ght.hasCass('on')) {
$ght.removeCass('on').addCass('oh');
} ese {
$ght.removeCass('oh').addCass('on');
}
});
$(ths).parent().nd('.ghtbub').trgger('changeState');
});
Ago mportante ha suceddo: e comportamento de a mpara se ha movdo,
antes estaba en os nterruptores y en e clapper, ahora se encuentra en a
msma mpara.
Tambn es posbe hacer e e|empo un poco ms nteresante. Suponga que se
ha aaddo otra habtacn a a casa, |unto con un nterruptor genera, como se
muestra a contnuacn:
<dv cass="room" d="ktchen">
</dv>
<dv cass="room" d="bedroom">
</dv>
<dv d="master_swtch"></dv>
S exste aguna mpara prendda en a casa, es posbe apagaras a travs de
nterruptor genera, de gua forma s exsten uces apagadas, es posbe
prenderas con dcho nterruptor. Para reazar esta tarea, se agregan dos
eventos personazados ms a a mpara: turnOn y turnOff. A travs de una gca
en e evento changeState se decde qu evento personazado utzar:
$('.ghtbub')
.on('changeState', functon(e) { var $ght = $
(ths);
f ($ght.hasCass('on')) {
$ght.trgger('turnOh');
} ese {
$ght.trgger('turnOn');
}
})
.on('turnOn', functon(e) {
$(ths).removeCass('oh').addCass('on');
})
.on('turnOh', functon(e) {
$(ths).removeCass('oh').addCass('on');
});
$(ths).parent().nd('.ghtbub').trgger('changeState');
});
$('#master_swtch').cck(functon() { f ($
('.ghtbub.on').ength) {
$('.ghtbub').trgger('turnOh');
} ese {
$('.ghtbub').trgger('turnOn');
}
});
Note como e comportamento de nterruptor genera se ha vncuado a
nterruptor genera mentras que e comportamento de as mparas pertenece
a as mparas.
Not
a
Si esta acostmbrado a la programaci#n orientada a ob%etos( pede resltar til pensar
de los eventos personali"ados como m1todos de ob%etos. &n t1rminos generales( el ob%eto al
!e pertenece el m1todo se crea a partir del selector %6er*. Linclar el evento
personali"ado changeState a todos los elementos $+,.light-. es similar a tener na
clase l lamada )ight con n m1todo changeState( * lego instanciar nevos ob%etos
)ight por cada elemento.
0ecapitulacinB @*fn*on ' @*fn*trigger
En e mundo de os eventos personazados, exsten dos mtodos mportantes de
|Ouery: $.fn.on y
$.fn.trgger. En e captuo dedcado a eventos se expc a utzacn de estos dos
mtodos para
traba|ar con eventos de usuaro; en este captuo es mportante recordar 2
puntos:
E mtodo $.fn.on toma como argumentos un tpo de evento y una funcn
controadora de evento. Opconamente, puede recbr nformacn asocada a
evento como segundo argumento,
despazando como tercer argumento a a funcn controadora de evento.
Cuaquer nformacn pasada estar dsponbe a a funcn controadora
a travs de a propedad data de ob|eto de evento. A su vez, a funcn
controadora recbe e ob|eto de evento como prmer argumento.
E mtodo $.fn.trgger toma como argumentos e tpo de evento y
opconamente, puede tomar un arrego con vaores. Estos vaores sern
pasados a a funcn controadora de eventos como argumentos uego de
ob|eto de evento.
A contnuacn se muestra un e|empo de utzacn de $.fn.on y $.fn.trgger en donde se
utza nformacn personazada en ambos casos:
$(document).on('myCustomEvent', { foo : 'bar' }, functon(e, arg1, arg2) { consoe.og(e.data.foo); // 'bar'
consoe.og(arg1); // 'bm' consoe.og(arg2); //
'baz'
});
$(document).trgger('myCustomEvent', | 'bm', 'baz' |);
4n Ejemplo de
/plicacin
Para demostrar e poder de os eventos personazados, se desarroar una
smpe herramenta para buscar en TEitter. Dcha herramenta ofrecer varas
maneras para que e usuaro reace una bsqueda: ngresando e trmno a
buscar en una ca|a de texto o consutando os "temas de moda" de TEitter.
Los resutados de cada trmno se mostrarn en un contenedor de resutados;
dchos resutados podrn expandrse, coapsarse, refrescarse y removerse, ya
sea de forma ndvdua o con|unta.
E resutado na de a apcacn ser e
sguente:
+igura KK*K* La aplicacin
!nali,ada (niciacin Se empeza con
un HTML bsco:
<h1>Twtter Search</h1>
<nput type="button" d="get_trends" vaue="Load
Trendng Terms" />
<form>
<nput type="text" cass="nput_text" d="search_term" />
<nput type="submt" cass="nput_submt" vaue="Add Search Term"
/>
</form>
<dv d="twtter">
<dv cass="tempate resuts">
<h2>Search Resuts for
<span cass="search_term"></span></h2>
</dv>
</dv>
Figura AB La aplicaci#n 2nali"ada
E HTML posee un contenedor (#twtter) para e wdget, una panta para os
resutados (ocuto con CSS) y un smpe formuaro en donde e usuaro puede
escrbr e trmno a buscar.
Exsten dos tpos de eementos en os cuaes actuar: os contenedores de
resutados y e contenedor
TEitter.
Los contenedores de resutados son e corazn de a apcacn. Se crear una
extensn para preparar cada contenedor una vez que ste se agrega a
contenedor TEitter. Adems, entre otras cosas, a extensn vncuar os
eventos personazados por cada contenedor y aadr en a parte superor
derecha de cada contenedor botones que e|ecutarn accones. Cada
contenedor de resutados tendr os sguentes eventos personazados:
refresh Seaa que a nformacn de contenedor se esta actuazando y
dspara a petcn que busca os datos para e trmno de bsqueda.
populate Recbe a nformacn |SON y a utza para reenar e contenedor.
remove Remueve e contenedor de a pgna uego de que e usuaro conrme
a accn. Dcha conrmacn puede omtrse s se pasa true como segundo
argumento de controador de evento. E evento adems remueve e trmno
asocado con e contenedor de resutados de ob|eto goba que contene os
trmnos de bsqueda.
collapse Aade una case a contenedor, a cua ocutar e resutado a
travs de CSS. Adems cambar e botn de "Coapsar" a "Expandr".
expand Remueve a case de contenedor que aade e evento collapse. Adems
cambar e botn de "Expandr" a "Coapsar".
Adems, a extensn es responsabe de aadr os botones de accones a
contenedor, vncuando un evento cck a cada botn y utzando a case de cada
tem para determnar qu evento personazado ser e|ecutado en cada
contenedor de resutados.
$.fn.twtterResut = functon(settngs) { return
ths.each(functon() {
var $resuts = $(ths),
$actons = $.fn.twtterResut.actons =
$.fn.twtterResut.actons ||
$.fn.twtterResut.createActons(),
$a = $actons.cone().prependTo($resuts), term =
settngs.term;
$resuts.nd('span.search_term').text(term);
$.each(
|'refresh', 'popuate', 'remove', 'coapse', 'expand'|, functon(, ev) {
$resuts.bnd( ev,
{ term : term },
$.fn.twtterResut.events|ev|
);
}
);
// utza a case de cada accn para determnar
// que evento se e|ecutar en e pane de resutados
$a.nd('').cck(functon() {
// pasa e eemento <> cckeado en a funcn
// para que se pueda manpuar en caso de ser necesaro
$resuts.trgger($(ths).attr('cass'), | $(ths) |);
});
};
});
$.fn.twtterResut.createActons = functon() { return $('<u
cass="actons" />').append(
'< cass="refresh">Refresh</>' + '<
cass="remove">Remove</>' + '<
cass="coapse">Coapse</>'
);
};
$.fn.twtterResut.events = { refresh :
functon(e) {
// ndca que os resutados se estan actuazando var $ths = $
(ths).addCass('refreshng');
$ths.nd('p.tweet').remove();
$resuts.append('<p cass="oadng">Loadng ...</p>');
// obtene a nformacn de Twtter en formato |sonp
$.get|SON(
'http://search.twtter.com/search.|son?q=' + escape(e.data.term) +
'&rpp=5&caback=?',
functon(|son) {
$ths.trgger('popuate', | |son |);
}
);
},
popuate : functon(e, |son) { var resuts =
|son.resuts; var $ths = $(ths);
$ths.nd('p.oadng').remove();
$.each(resuts, functon(,resut) { var tweet = '<p
cass="tweet">' +
'<a href="http://twtter.com/' + resut.from_user +
'">' +
resut.from_user + '</a>: ' +
resut.text +
' <span cass="date">' +
resut.created_at +
});
'</span>' +
'</p>';
$ths.append(tweet);
// ndca que os resutados
// ya se han actuazado
$ths.removeCass('refreshng');
},
remove : functon(e, force) { f (
!force &&
!conrm('Remove pane for term ' + e.data.term + '?')
) {
return;
}
$(ths).remove();
// ndca que ya no se tendr
// un pane para e trmno
search_terms|e.data.term| = 0;
},
coapse : functon(e) {
$(ths).nd('.coapse').removeCass('coapse')
.addCass('expand').text('Expand');
$(ths).addCass('coapsed');
},
expand : functon(e) {
$(ths).nd('.expand').removeCass('expand')
.addCass('coapse').text('Coapse');
$(ths).removeCass('coapsed');
}
};
E contenedor TEitter, posee soo dos eventos personazados:
get0esults Recbe un trmno de bsqueda y comprueba s ya no exste un
contenedor de resutados para dcho trmno. En caso de no exstr,
aade un contenedor utzando a panta de resutados, o congura
utzando a extensn $.fn.twtterResut (mostrada anterormente) y uego
e|ecuta e evento refresh con e n de cargar correctamente os resutados.
Fnamente, guarda e trmno buscado para no tener vover a pedr os
datos sobre a bsqueda.
get5rends Consuta a TEitter e stado de os 10 prmeros "trmnos de
moda", nteracta con eos y e|ecuta e evento getResuts por cada uno, de
ta modo que aade un contenedor de resutados por cada trmno.
Vncuacones en e contenedor TEitter:
11
$('#twtter')
.on('getResuts', functon(e, term) {
// se comprueba que ya no exsta una ca|a para e trmno f (!search_terms|term|)
{
var $ths = $(ths);
var $tempate = $ths.nd('dv.tempate');
// reaza una copa de a panta
// y a nserta como a prmera ca|a de resutados
$resuts = $tempate.cone(). removeCass('tempate').
nsertBefore($ths.nd('dv:rst')). twtterResut({
'term' : term
});
// carga e contendo utzando e evento personazado "refresh"
// vncuado a contenedor de resutados
$resuts.trgger('refresh'); search_terms|term| = 1;
}
})
.on('getTrends', functon(e) { var $ths = $
(ths);
$.get|SON('http://ap.twtter.com/1/trends/1.|son?caback=?', functon(|son) { var trends = |son|0|.trends;
$.each(trends, functon(, trend) {
$ths.trgger('getResuts', | trend.name |);
});
});
});
Hasta ahora, se ha escrto una gran cantdad de cdgo que no reaza nada, o
cua no esta ma. Se han especcado todos os comportamentos que se
desean para os eementos nceos y se ha creado un sdo marco para a
creacn rpda de a nterfaz.
A contnuacn, se conecta a ca|a de bsqueda y e botn para cargar os
"Temas de moda". En a ca|a de texto, se captura e trmno ngresado y se
pasa a msmo tempo que se e|ecuta e evento getResuts. Por otro ado,
hacendo cck en e botn para cargar os "Temas de moda", se e|ecuta e evento
getTrends:
$('form').submt(functon(e) {
e.preventDefaut();
var term = $('#search_term').va();
$('#twtter').trgger('getResuts', | term |);
});
$('#get_trends').cck(functon() {
$('#twtter').trgger('getTrends');
});
Aadendo botones con un ID apropado, es posbe remover, coapsar, expandr y
refrescar todos os contenedores de resutados a msmo tempo. Para e botn
que remueve e contenedor, notar que se
esta pasando true a controador de evento como segundo argumento, ndcando que
no se desea una conrmacn de usuaro para remover e contenedor.
$.each(|'refresh', 'expand', 'coapse'|, functon(, ev) {
$('#' + ev).cck(functon(e) { $('#twtter dv.resuts').trgger(ev); });
});
$('#remove').cck(functon(e) {
f (conrm('Remove a resuts?')) {
$('#twtter dv.resuts').trgger('remove', | true |);
}
});
%onclusin Los eventos personazados ofrecen una nueva manera de pensar
e cdgo: eos ponen e nfass en e ob|etvo de un comportamento, no en e
eemento que o actva. S se toma e tempo desde e prncpo para expcar as
pezas de su apcacn, as como os comportamentos que esas pezas
necestan exhbr, os eventos personazados proveen una manera poderosa
para "habar" con esas pezas, ya sea de una en una o en masa.
Una vez que os comportamentos se han descrpto, se converte en ago
trva e|ecutaros desde cuaquer ugar, o que permte a rpda creacn y
expermentacn de opcones de nterfaz. Fna- mente, os eventos
personazados tambn permten me|orar a ectura de cdgo y su
mantenmento, hacendo cara a reacn entre un eemento y su
comportamento.
Puede ver a apcacn competa en os archvos demos/custom-events/custom-events.htm y
demos/custom-events/|s/custom-events.|s de matera que componen este bro.
1.12. Funciones y ejecuciones diferidas a trav8s del
objeto
@*Deferred
1.12.1. .ntroducci&n
A partr de a versn 1.5 de |Ouery, a bboteca ntrodu|o una nueva
utdad: E ob|eto dferdo
$.Deferred (en ngs -eferred :b%ect). Este ob|eto ntroduce nuevas formas para a
nvocacn y
e|ecucn de as funcones de devoucn (callbac5s), permtendo crear
apcacones ms robustas y e-
xbes. Para ms detaes sobre $.Deferred, puede consutar
h ttp://ap.|quer y .com/category/deferred-
o b |ect
/.
1.12.2. (l objeto diferido y Aja/
E caso ms comn en donde se puede aprecar a utdad de ob|eto dferdo es
en e mane|o de as funcones de devoucn en petcones A|ax.
Segn se pudo aprecar en e captuo dedcado, una manera de nvocar
una petcn A|ax es:
&anera tradicional de utili,ar el
mtodo @*ajax
$.a|ax({
// a URL para a petcn ur : 'post.php',
// funcnes de devoucn a e|ecutar
// en caso que a petcn haya sdo
// satsfactora, con error y/o competada success : functon(data) {
aert('Petcn reazada satsfactoramente');
},
error : functon(|qXHR, status, error) { aert('Dscupe, exst un
probema');
},
compete : functon(|qXHR, status) { aert('Petcn
reazada');
}
});
Como se puede observar, as funcones de devoucn son conguradas dentro
de msmo ob|eto $.a|ax. Esta manera es ncomoda y poco exbe ya que no
permite desacoplar las funciones de devo8 lucin de la misma
peticin /jax. Y en grandes apcacones esto puede egar a ser un
probema.
E ob|eto dferdo nos permte reescrbr e cdgo anteror de a
sguente manera:
El objeto diferido en una
peticin /jax
// dentro de una varabe se dene
// a conguracn de a petcn a|ax var a|ax = $.a|ax({
ur : 'post.php'
});
// a travs de mtodo done() e|ecutamos
// a funcn de devoucn satsfactora (sucess) a|ax.done(functon(){
});
// a travs de mtodo fa() e|ecutamos
// a funcn de devoucn de error (error) a|ax.fa(functon(){
});
// a travs de mtodo aways() e|ecutamos
// a funcn de devoucn de petcn competada (compete) a|ax.aways(functon(){
aert('Petcn reazada');
});
A travs de os mtodos deferred.done, deferred.fa y deferred.aways es posbe desacopar as
funcones de devoucn de a msma petcn A|ax, permtendo un mane|o ms
comodo de as msmas.
Notar !e en en ningn momento se l lama al ob%eto diferido $./eferred. &sto es por!e %6er*
*a lo incorpora implicitamente dentro del mane%o del ob%eto $.ajax. ;s adelante se e+plicar como
tili"ar al ob%eto $./eferred de manera e+pl'cita.
De a msma forma es posbe crear coas de funcones de devoucn o
ataras a dferentes g- cas/accones:
%olas de funciones de devolucin en una peticin /jax
// dencn de a petcn A|ax var a|ax =
$.a|ax({
ur : 'post.php'
});
// prmera funcn de devoucn a e|ecutar
a|ax.done(functon(){
aert('Prmera funcn de devoucn en caso satsfactoro');
});
// segunda funcn de devoucn a e|ecutar
// nmedatamente despus de a prmera
aert('Segunda funcn de devoucn en caso satsfactoro');
});
// s e usuaro hace cck en #eement se
// agrega una tercera funcn de devoucn
$('#eement').cck(functon(){
aert('Tercera funcn de devoucn s e usuaro hace cck');
});
});
// en caso que exsta un error se dene otra
// funcn de devoucn a|ax.fa(functon(){
});
A e|ecutarse a petcn A|ax, y en caso de que sta haya sdo satsfactora, se
e|ecutan dos funcones de devoucn, una detrs de a otra. Sn embargo s e
usuaro hace cck en #eement se agrega una tercera funcn de devoucn, a
cua tambn se e|ecuta nmedatamente, sn vover a reazar a petcn A|ax.
Esto es porque e ob|eto dferdo (que se encuentra mpctamente en a varabe
a|ax) ya tene nformacn asocada sobre que a petcn A|ax se reaz
correctamente.
deferred*then
Otra manera de utzar os mtodos deferred.done y deferred.fa es a travs de
deferred.then, e cua permte denr en un msmo boque de cdgo as
funcones de devoucn a suceder en os casos satsfactoros y erroneos.
4tili,acin del mtodo
deferred*then
// dencn de a petcn A|ax
var a|ax = $.a|ax({ ur :
'post.php'
});
// e mtodo espera dos funcones de devoucn a|ax.then(
// a prmera es a funcn de devoucn satsfactora functon(){
},
// a segunda es a funcn de devoucn erronea functon(){
}
);
1.12.3. 'reaci&n de objetos diferidos con @*Deferred
As como es posbe desacopar as funcones de devoucn en una petcn A|ax,
tambn es posbe reazaro en otras funcones utzando de manera expcta e
ob|eto $.Deferred.
Por e|empo, una funcn que verca s un nmero es par, de a manera
tradcona puede escrbrse de a sguente manera:
+uncin sin utili,ar el objeto @*Deferred
// funcn que cacua s un nmero entero es par o mpar var sEven =
functon(number) {
f (number%2 == 0){ return true;
} ese {
return fase;
}
}
// s es par regstra un mensa|e,
// en caso contraro regstra otro f (sEven(2)){
consoe.og('Es par');
} ese {
consoe.og('Es mpar');
}
Utzando e ob|eto $.Deferred, e msmo e|empo puede reescrbrse de a sguente
forma:
+uncin utili,ando el objeto @*Deferred
functon(number) {
// guarda en una varabe a ob|eto $.Deferred() var dfd = $.Deferred();
// s es par, resueve a ob|eto utzando deferred.resove,
// caso contraro, o rechaza utzando deferred.re|ect f (number%2 == 0){
dfd.resove();
} ese {
dfd.re|ect();
}
// devueve a ob|eto dferdo con su estado dendo return dfd.promse();
}
// con deferred.then se mane|an as funcones de devoucn
// en os casos que e numero sea par o mpar sEven(2).then(
// a prmera es a funcn de devoucn satsfactora functon(){
consoe.og('Es par');
},
// a segunda es a funcn de devoucn erronea functon(){
consoe.og('Es mpar');
}
);
Los mtodos deferred.resove y deferred.re|ect permten de!nir el estado interno de
ob|eto
$.Deferred(). Esta dencn es permanente, es decir, no es posible
modi!carla despus y
es o que permte mane|ar e comportamento y e|ecucn de as funcones de
devoucn posterores
para cada uno de os casos.
Notar que a funcn sEven devueve e mtodo deferred.promse. E msmo es una versn
de ob|eto dferdo, pero que so permte eer su estado o aadr nuevas funcones
de devoucn.
Nota
&n los e%emplos !e tili"aban 8%a+ mostrados anteriormente( los m1todos deferred.resolve *
deferred.reject son llamados de manera interna por %6er* dentro de la con2graci#n
sucess * error de la petici#n. Por eso mismos se dec'a !e el ob%eto diferido estaba
incorporado implicitamente dentro del ob%eto $.ajax.
Los mtodos deferred.resove y deferred.re|ect adems permten devover vaores para ser
utzados por as funcones de devoucn.
+uncin con deferred*resolve ' deferred*reject devolviendo valores
reutili,ables
// funcn que cacua s un numero entero es par o mpar var sEven =
functon(number) {
var dfd = $.Deferred();
// resueve o rechaza a ob|eto utzando
// y devueve un texto con e resutado f (number%2 ==
0){
dfd.resove('E nmero ' + number + ' es par');
} ese {
dfd.re|ect('E nmero ' + number + ' es mpar');
}
// devueve a ob|eto dferdo con su estado dendo return dfd.promse();
}
sEven(2).then( functon(resut)
{
consoe.og(resut); // Regstra 'E nmero 2 es par'
},
functon(resut){ consoe.og(resut);
}
);
Nota
&s posible determinar el estado de n ob%eto diferido a trav1s del m1todo deferred.state.
&l mismo develve n string con algno de estos tres valores: pending( resolved o
rejected. Para ms detalles sobre deferred.state( pede consltar http:DDapi.%!er*. c omDdefer r e d.state D.
deferred*pipe
Exsten casos en que se necesta modcar e estado de un ob|eto dferdo o
trar a nformacn que vene asocada. Para estos casos exste deferred.ppe. Su
funconamento es smar a deferred.then, con a dferenca que deferred.ppe devueve
un nuevo ob|eto dferdo modcado a travs de una funcn nterna.
+uncin !ltrando valores utili,ando
deferred*pipe
functon(number) {
var dfd = $.Deferred(); f (number
%2 == 0){
dfd.resove(number);
} ese {
dfd.re|ect(number);
}
return dfd.promse();
}
// arrego con una sere de nmeros pares e mpares var numbers = |0, 2,
9, 10, 5, 8, 12|;
// a travs de deferred.ppe se pregunta s nmero se encuentra
// dentro de arrego numbers sEven(2).ppe(
functon(number){
// crea un nuevo ob|eto dferdo var dfd =
$.Deferred();
f($.nArray(number, numbers) !== -1){ dfd.resove();
} ese {
dfd.re|ect();
}
// devueve un nuevo ob|eto dferdo return
dfd.promse();
}
).then(
functon(){
// a estar dentro de arrego numbers y ser par,
// se regstra este mensa|e
consoe.og('E nmero es par y se encuentra dentro de numbers');
},
functon(){
consoe.og('E nmero es mpar o no se encuentra dentro de numbers');
}
);
Para ms detaes sobre deferred.ppe, puede consutar
h ttp://ap.|quer y .com/deferred.p p e /.
@*6hen
E mtodo $.when permte e|ecutar funcones de devoucn, cuando uno o ms
ob|etos dferdos posean agun estado dendo.
Un caso comn de utzacn de $.when es cuando se quere vercar que dos
petcones A|ax separadas se han reazado.
4tili,acin de @*6hen
// prmera petcn a|ax var
comments = $.a|ax({
ur : '/echo/|son/'
});
// segunda petcn a|ax var
vadaton = $.a|ax({
ur : '/echo/|son/'
});
// cuando as dos petcones sean reazadas
// e|ecuta aguna funcn de devoucn denda
// dentro de deferred.then
$.when(comments, vadaton).then( functon(){
aert('Petcones reazadas');
},
functon(){
}
);
Para ms detaes sobre $.when, puede consutar
h ttp://ap.|quer y .com/|Ouer y .when /.
%erecCos de autor
Copyrght
2011
Matera cencado por Rebecca Murphey ba|o a cenca Creat v e Commons
A ttrbuton-Share A- k e 3.0 Unted States. Usted es bre de coparo,
dstrburo, transmtro y modcaro, sempre y cuando haga referenca a este
re p ostoro y atrbuya a autora orgna a Rebecca Murphey. S atera,
transforma o crea una obra dervada, deber dstrbur e resutado ba|o una
cenca gua, smar o compatbe. Cuaquera de as condcones menconadas
pueden no apcarse s obtene permsos de autor. Para cuaquer reutzacn o
dstrbucn, deber de|ar en caro a cenca a me|or manera para hacero es
a travs de un enace haca a cenca Creat v e Commons A ttrbuton-Share A k e
3.0 Unted States.

JS # Fundamentos de Jquery

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

JS # Fundamentos de Jquery

Caricato da

Copyright:

Formati disponibili

F undame n tos de jQuery

Potrebbero piacerti anche