Anda di halaman 1dari 424

a crlar eteltos de a Ito i m pacto em ,S8U site com a biblioteca J,B'VaScrip mals utililzaHa pelos desenvolvedores web /'

-

-

- .

-

".-

.... - ..

-

. "

,

Mauricio Samy Silva www.rnaujor.corn

lal nal com ireuo aurorais

,

. \

Sobljpo a11ltor .

.13

IParte I. Fundament,os teorkos da, blbUotec,a "Quer 23

Capitulo 11.1 I) qjue 'e jQu:erry'?' Uu "" , u " , ••••• ""25

lID· fiinic;;oes e conce·i[os , , , , .25

11.10 gue e jQuery? 25

11.2 fara que serve :jQuery?' , , 27

113jQuery em conformidade corn os Padroes Web , 28

11.4 Caract,eristicas da biblioreca jQuery .. , .. , , , , , , 29'

11.5 Conlo instalar iQuery , , " , " 30

11.6 jQuery"tiI pra:tica .. · · 1 32

11.7 FUlldamell£os jQuery , , ' 40

Capitula. 2 III FlJn(oe,Srpadrao, e sel~etores lOuer, ' "., ' ' 4S

21 Flllnlioes-pilidrao jQuery " ", , " " """ .. ,, .. , ", 45

2.2 Selerorcs jQuery." .. , , " , " ,," 55

2.2.1 Selcmres simples , 0 ••••••••••••••••••••••••••••••••••••• 0 ••••••••••••••• , 0 ••••••••••••••• 57

2.2.2 Selec:O!l'e:s, .ao~i!l.posros , , , 60

.2.23 Selerores ~ Fjlln;Qs. h.hi:lCOS, ",'Pt· fOO I't"'·", ".,." .. ", ·."Pt' ··",·,t, ,· ,.,.,." ",.,.,., 64

224 Se1e:tores de CQ]Uelldo,. V"-""""·'·" ,.,- .... ,-, , . T" . ,,,,,.73 2?u5 Seletoresde visibilidade.,.",,, ···'w,··,· "T ···".'W.' .... ",."",76,

2.216 Scletn~de' .atrfhuto ,., .... 44- .,""" ,-",'''''.,.''' "'.., •. ",,· •. ·'·."'H· """'ou, ., .. , 79'

2..2.7 Filtros para seleton!s·~I1Jho , , , , 85

2.2.8 Seleto res para formul 8.riOS , , 8B

2.2.9 Filtros pam formuh1irios , , ,., '.f ••.•••.•• , •••••• , •••••••• 97

Ca, .tula. 3 .1 Metod os' de ma'nl ·ula.·- I) d I) 0 OM , ', , 101

31 Mal] ipttl a.s;ao de mribllltos genJIis 0 •••••••••• " •••••••• Wi

3.2 Manipuias:ao do atribuw ch,lls ..•••..........•....••.•...........•• , •.•.......• 105

33 M.aJnipuhu;ao de contetldos h~ml , , " , '. lOS

8

iQuery • A. IB~bliote(,a do Programadm JavaScript

3.4 rv[~ni pula£ato de [:ex~os; , , , , 10'9'

3.5 M~ .. njpulilcao de \'310[(:5 " , ..•......•.......• , .........•........ , ..•....• 11[

3.6 .N~al:1.ipuh19ao de conteu.dos , , , , , 113

41.1 ES{llliz;acao genii , , , , , 123

4\JPosidol1amrDFO . ])'5

4.3 La.rgllra e a.ltura ,.,., , 130

4L4l1:nspe,ao do, DO~I[ 136·

:'5.1 Eveu[os 3JlIxilhrre.s , , .. , , , '" , 1.'51

5.2 E.v,entos de in~era.s;ao , , "., , , ,. [64

53 Mallipuladores de 'eventos., .. , .. , ,., , , , , ,., .. , .. , ,.166

54 Norals sobrervf'l1ws 169

61 Efdros hasicos 173

6,2 Efeiws (:orred iI;;os , ,' , , , .. , , , .. ,., .. , , , , .. , , .. 177

6.3 Efei~os. de opacidade., .. , , , .. , , " ' , , , .. :179'

6.4 Effi ros perso n(IDlizados , , ' , , , .. , , " , , .. 18i

7.1 Inn'odus·a.o, ,., .. , ", ".' , '.' "" , ,., , ,. , , , .. ".'" ,. 185

7.2 Flags paraagemes de lIsuario .. , , , .. , .. , , " .. , , .. 186

73 Opera$;oes com .arl"ays e objems .. , , .. , .. , " .. , , , .. , .. , 190

7.417es[e· de funs:ao .. , , , , , ,., , , ,., 196

7.$ Operll!!tSJo com stri,ng · · .. H · •••••• ,· ••• · ••••••••• · 197

7.6 FUI1s;oes utilitaTi.as persollaliz.adas , 198

7 . .6,], Sintaxegeral , , " 198

1 . .6.2 Funs:aoS .. c~oirTe'xto· ". " "" ". " " " .. "." . " " ".20m

81~Ia.rca!;ffi.o rnJnhna , , , , 213

81. Anil1HU;aO corn. shm'Oc hid,eO " " "." , .. " 215

8.4 SUaViZaIl(lo a an i m3!;aO , , , , ,. 22B

85 Anima!;ao com sHdeUp{) e slideDo.wI'lO ......•••..• , ••. , •.•....••••..•••.•. ' 23:1

8.6 Animacao com.fadeInO .e fadeOutO ••.......•..••.•..........•. , •.•......• 23:3

8.7 Animas:ao personalizadaJ com animateO .. , ..•. , ,. , , , 234

91 FAQ ,CSS , , , 239'

Ivllarca.s;a.o basica , '."" , , , , , ,. ,. , 240

Suminio

9

Prirneiraetapa 243

Segu:nda et.i:1p.il " 248

'.I£r:oei ra cl:apa " , 254·

Quarra cUlpa " " , " " .. " 259'

Quinta crapa " " 26[

9:2 pagi.FIiai de 11l.odcias ·.·.· .. · · · " · · H 265

lvEar;ca.s; 8.0 bas~·ca , , " , , , , , , " , .. 266-

Pri meiraerapa .. , , , , , .. , , 268

Segunda etapa ,., , , .. , 271

10.1 Destina\fao das tabelas HTMl 275

10.2. i\!·1arca~ao de: (abelas, , ,., , , , 275

lQ3Tahel{1l de hQnirins de {mUm.s 276

l\1hlfCas;ao bas'ica " , " , .. , , , " , .. , , .. ,. , .. , .. 276·

10;4· E feiro zebra " .. , .. " , """""'" ,. , ,. , ,." , ,280

Zebra. par-fm.pa.r , , , " , .. , 281.

Zebra dois-dois .. , , '" , 283

PrQgl"(;;"Ss8!O aritmeti.ca ,., .. , •..••• , ••. , ..••. , •..••........••.... , , •••..•••. , ••. , ..••. "., .,.,.,.,' •. ,,286-

Zebra trc:s ('ores.. .. ,,,' n.. ..',. .286

Zebra tres-tres.. , , 2:88

10.5 E feitos para destacar , 290

Destacar linhas , 29[

Desracar col!mas. 292

DC'ilaC31' Ii fIII1 ~1 s selerivamen re" , ,.... . , , , .. 295

Reveler e esconder li nh as , .. , , ,., , , "' , .. , , 300

Advencucia. . ., 305

III Valjda~ao de [ormulsrios , , , 307

ll.2 Pla.oe holder para campos., , , , , , .. , " " 307

113 Dicas de preenchimenro , , , , , , .. , 311

114 D,csabilirar Cfllil1..pOS .................................................•• , 3U.

11.5 Revelar calnp'os , , , .. , , , , .. , , , , , , .. , 316-

11.6 Elelllento I·egend , , , , .. , ,.,,,., , , .. , , ,., , , , ,' , .. 318-

111 SeIecloIIM lod!)s " .. ,,, ,, "' .. ,, , , " .. "' '''.n''' •••••• "" 3'0

'1' IS· "V I'd . 3)')

.. ' .au. ar , ,." , , , , , .. " , ,., .. , , .. , , , ,., .. , .. " ~~

Capituhl' 112 .llmagens ., ........................•. " , 325

]2,,] Introdusa.o, , .. , , , , , ' ., , , , .. , , , .. , , .. , 323

'1.:2..1.1. 1.Jllagens acessfvi; is , , 326

12.2. Amplialiio de imagens , , , , 317

11.3, Galerias de i magens ,., , , , , , , , 340

n.3J Galerta com thumbnails.... .. , " ,., ,,,., ,., , ,, ,.,., .. , ,,341

]]'4 SJide~'5hQw 347

10

iQuery • A. IB~bliote(,a do Programadm JavaScript

13.1 ffin trod ugan '. , ' h h" ' , ' ' 3~).l

B.lJ Plug~ins de [erceiros , 355

13.1.2 Plug-ins, n,arivo:S , " " , .. 356,

13.2 Plug-in .) Carousel ". ' ' " '. ' n, .' ••••.••• "",. ' •.•••.• , •• ' ••• ' ••• ' •••••.••••• , .,.356,

13.2.1 Ins t,aJo:u;a o .. ' ' ' " ' ' ' '. ' , ' ' ', .. H •• H. H'" H •••••• , •••• "'., '. 35B

13.2.2 Nome das imagens , .' ' '. ' , ' .. " ,' ' ' ' " .. ' '. 35'9'

133 Carrosseis horizontal e vertical. , , 360

13.4 Carrossd con]1 scroll <1utOlrnQ,tiCQ ." ,. , .. ,.,' "., ,., ., .. " .. ' .. ,., •. ' .. , ..•• , ' ..•.. 362

13 5 Carmssel com comandos extemos 365

13;6 Carrossel com efeito rhiekbox , , , " ,.368

13.7 Plug-in jQuerv Accol'(1 ion , , ' , , ,' .. u ••••• _' _ ••••• , ••••• , _,'. _'. _.' 370

]3.7.1 lnstalac;;ao .," .,,' ," , , , , " , .' , ' .371

]3.7.2 Folhas de estilo .,'" ', " ' ' '. ' ' '. ". "', '. ' ' ,'" '. '. 372

13.8 Sa nfona simples ' ', ,.' .a ' ••• ' •••• ' ••••• , , ' •••••••• ' •••••• , •• ' •••• ' ••• ' ••••••• ' •• " ••••• '. 372

13.9 Menu sanfona ' .e . ••• ' ••••••• ' ••••• ' ••• ' ' ••••••••• ' ••• ' •••••••••• '.' •• ' •••••••••• ' •••••• '. 375

14.1 In trOdUiJ30 '. "'" " ' .. '" •.•. '" .'"" •. ,"' .', .,,,, """ '" " '. h., '" •• 'd ",. 379'

14 J HIM} e CSS 380

143 Script , , ,. , .. , ," .,"'., ', '. , '. , ,'" ", .. ",.., ' ,,, ,' '. 387

AJ Scletor 6po , " ,,,,,,'.,, ,,,, ', , ,,,,,"'.,.,, .. ,,.,.,, .. "" .. ".,''', " ,'''',,'''.,.389'

A 2' Selepot jd,enri6cador {101m 390

A .3 Selcro[ c'lasse .. ' .. "" .,' " .. ' ' ,' . ' '. '. "., ' '.', .. " .. '., ...•.. ". "".,' ., .•... ". "" ' .. ' .. "' .. '. "' .. ' '.,'.'. '"., . 390

AJl Cla.ss~fi',a\fao dos s'ele~ofes ' .. " , n,. ' •• , •.• , •• ' •• H ••••••• '. ' ••• ' •••••• , ••• ' ••••• '. ,.390

A,.4 Seletol'"eS uvanSiados . H ' •• , •••• ' ••• ' •• " •• H ' ••••••• ' •• " ••• , ••••• ' •• , ... , •••• ' ••• H ••• ' ••• ' ••••••• ' •• " •••• ,.396

Ca:rac[er~s especiais para .H.T,MIL , ' , ,.,' '., , ,., ' , ,., ,.,.397

Curacreres IllUrelrdticos,gregos e sil'nbolos para FITML , 39B

Caractcl:i:S patra I-ID'TM,L ~ ISO~8859EI.,., ,., , , ' " '. '.,' .' ', , ,.399'

apendiee Ill. Atributos HliM.l , , , , , , .•.. , ,,"' ,405

If d' •. 2'-

D~lre remlissnfO n .. ,.., .. "II' n."' " , " .. " .. , nu, .. "" It n , , .. ".u ",.4 7

Agradeco a Delis porter me dado forcas, disposicao e monvacao para escrever este [ivro,

SOILl gram aos profissionais da Novatec Editora, direramente envolvidos na publicacao do livro.em particuler ao editor Rubens Prates, que, ao I.ongo de rodo OJ processo de cfiacrao, estcve presente guiando-me corn SUitS dicas e informa'l);:oes sobre as particularidades e implicaccesediroriais proprias :&1 CaSE de cria~ao de urn livre,

M .. deci , A '1 <. d .Q'

I-·i-~-II";-I~·-'<,.-ili .. - ~~ --:----·--1-,' --'-i' .~. 1--' -I'~( ',,-----_"- .. ---._ -':-_'~-i='--:""'i -!~ .:--,,-.-- ,,--.~

eu mellor mgl a eel mente e a voce, .. eitor, pOf mteressar se em apren. erj ., uery

e honrar-me cern a leirura deste liVIO.

111

1'v1 aterial COM direilos aurora's

Isen~ao de responsabilldade

Todos os esforcos Ioram feiros na elaboracao deste livro para assegurar 0 fornecimento de mformacoes as mais precisas, completas e exatas, Conrudo, as informacoes aqui conridas sao fornecidas "como estao" e sem nenhuma garanria, seja expressa, seja implfcita, 0 autos, a 'editor a os disrribuidores e qualquer entidade envolvida direra ou il1direramente na sua cornercializacao nao assurnirao nenhurna responsabilidade par qualquer prejufzo au dano, direro ouindireto, consequenteas inforrnacoes contidas neste livro,

12

1'v1 aterial COM direilos aurora's

Maurfcio Samy Silvae graduado em Engeuharia Civil pelo Insrituro Militar de Engenharia {I ME),. Fundador e ex-diretor-presidente da Planep Engenharia, exerceu 0 magisterio poralelamente a Engenharia, tendo side, ao longo de 25 a nos, professor de Geomerria Descririva e Maremarica, Sen primeiro contato com programacao para compuradores den-se ainda quando aluno, ao aprender a linguagem Fortran .. Aquleia epoca, era cornum passarern-se noires rrabalhando em uma maquina perfuradora de canoes que seriarn prooessados em um encao poderosoEB.M/360. Em 1982, adquiriu seu primeiro computador pessoal, um TK-80 com processador Z-80A de 3,25MHz, teclado de membrana com 40 teclas e memoria RAM de 1 KB expansfvel a~e 16K B .. Trabalhou com os modelos TK~B2, TK-85.i TK-2000j DGT -100 e assim por diante, ate os dias atuais,

Sua experiencia com desenvolvimenec de sites iniciou-se [em 1999,. com 0 Frontl'age, considerada urna ferrarnenta sensacional naeonsuucao de sites .. Em 1002, por acaso teve seu primeiro contato com 0 sire do \V3C e, como ficouvivamenteImpressioaado corn a propos~a desseconsorcio.ccmecou a pesquisar e a esrudar asWeb Standards" tendo [como fonee de consulta omateriel publicado na interner em Ungua. inglesa, Ao contrario do qu[e ocorre nos dias atuais, quando varies desenvolvedores escrevern em blogs pessoais sobre \Veb Standards, a Iiteraturaa respeito do assunto em pottuguesera, entao, pra tiea mente nula, mas, mesmo assim, q uando enconrrada, limirava-se rIIO bdsico do basico,

No segundo semesrre de 2003., estimulado pela completa falta de material de consulta graruita na .. iutemete impulsioaado por sua vela de educador desenvolvida durante anosem sala de aula, decidiu lancar 0 site CSS para Web Design., I) qual e nacioualmenre conhecido como 0 site Maujor, hospedado [em http://W\lA~.mawjor.com/. A proposra in icia ~ do site: era a de d iv ulgar a eascad ing style sheet (CSS); ou folho deestilo em cascara, 0011:1 base no comparttlhamenro de suas expenencias com tal recnica, Corn a pronta aceitacao eo sucesso crescente do sire, 0 objetivo inicial tornou-semais ambieioso e passou a ser a divu]ga~ao das Web Standards,

13

1'v1 aterial COM direilos aurora's

jQulery • A, IBibliotec,a do Programadm JavaScript

No imcio de 2006, com a popularizacao ea adesao macica nos blogs, criou 0 Blog do Mauj or hospedad o em http://!tMl~,,rli'al.lj,or . com/bl o~/" COII!1 propossto SCI1I1Clhante ao do sire, mas com uma dinamica mais ativa e a efetiva participacao de seus lei lore'S.

'Ianto 0< site como 0 blog consdtuem-se em referencla naciona] para Web Standards e, sern duvida.foram e continuam sendo urn dos grandes responsaveis pela di\!ulg.a.I~.ao Ie popularjzacao das Web Standards, assim como, em particular, das CSS no Brasil

M.aU]IOrl. como e conheeido 0, autor, e ainda um ativo frequentador de forums, escreve paravarlos portals brasileieos voltados a desenvolvedores web; e autor de arrigos ern ingi.es e de rrabalhos relacionados as CSS publicadcs em sires internacionais sobre 'Web Standards. Ocu pa 0 segundo lugar na Hsta de tradurores rnundiais de docurnentos doW3C por quantidade de documentos versados .. Publican ell] seu site mais de 40 tradu~6es de artigos sobreWeb Standards escritos por consagrados autores internecionsis, Traduziu para 0 porrugues as ferramentus para testes de acessihilidade em sites, denorninadas Anahsador de contrasre de cores e Barra de ferramentas para acessibilidade na web, ambas em parceria com 0 WAT-C, urn consorciosustraliano voltado ao desenvolvimerno de ferrarnencas destinadas a testes de acessibiltdade ..

1'v1 aterial COM direilos aurora's

lntrodurao

Este livre tern par objetivo fornecer aos profissionais envolvidos com 0 des envolvimemo para a web os conceitos fundamenraise recnicas de programacao necessarias 30 emprego da biblioteca j Query na eriacao de efeitos especiais e obrencao de eornporrameneos de variadas narurezas em shes web, rornando-os mais lneerarivos ,e visualmenre rnais agradaveis e amigaveis, Aborda 01 usa cia ljnguagem de: p:rograma~ao JavaScript segundo a sintaxe especificarnente criada para fazer funcionar e eomar usavel a biblioreca jQlJ.llery.

o livre esta dividido em duas panes COUlD descrito a seginr,

Pr[mei:r:al parte ~ IFul1damentos't@oricosdabibliotecaljQuery

A primeira pane compreende os capfrulos de 1 a 7 e rem per objetivo apresentar a biblioteca, examinar sua sintaxegeral e estudar 0 emprego e finalidade des meredos, propriedades e diferenres funcionalidades dispomveis na biblloreca jQuery

No esrude des metodos, adoeou-se urn modele que consiste naapresenracao da sinraxe do metodo seguida de uma explicacao da sua 6r~alidade"1' em liIrn pequeno trecho de codigo deemprego real dernonstrando 0 uso geral do metodo e, finalmeute, na disponibilizacac de umarquivo HTML para download ou consulta on-line), hospedado no site do Hvro, contendoa demonstracao pratica do merodoesnrdado,

Segu:nda parte~· jQuer, lila pratka

A segunda parte do livre compreende os capftulos de 8a.14 e [em pOI objetivo demonstrar efeitos jQuery de variadas naturezas e de emprego real em um site,

Cada capfrulc desta parte esta estruturado para estudar efeims em elementos especfficos do HTNIL 0 capitulo 8 introduz a pane pratiea do livre e dedica-se ao estudo dos efeiws de animacao basicos com. el1fas,e nas [,ecnkas de reveler e esconder conteudos marcados com di£erenres elementos HTML

15

1'v1 aterial COM direilos aurora's

16

o capnulo 9 rnostra a cria~ao de efeitos para esconder e revelar conteudos, demonstrando as tecnicas aplicadas a urna piig,ina ccntendo tun FAQ CSS e a ou tra I conrendo noncias.

o capttulo 100 dedica-se aos efeitos em tabeias de apresentaeao de dados, estudando recnicas para destacar trechos delas que recebem 0 beo do usuario, bern como maneiras de apresentar tabelas extensas, com mecanismos de revela~ao de rrechos destas,

Ocapltuio 11 abosda os lormulario.s H'l'Ml., mestrando as efeitos fundamenrais normalmente implementados no desenvolvimeruo deles, [a1S como cria'iao de mascaras e dicas de preenchimento de campos.

No capfrulo n~ examinarn-se os efeitos em imagens, abordando na,o somente a manipulacso de' imagens 1l1dividUialmnente, mas tambem a crial,;ao de galerias de imagens,

o capitulo 13 dedica-se a cr~a~ao de efeitos em rnecanismos de navega~,ao.

No capitulo 14 examinamos 0 case real de urn menu tipo sanfona, Trata-se do menu do site t!A'oW .• 1i'ii1auj;,olr.,(cOJM. Ensinarnos nao so 0 script jQueryque fal Iuncionar omenu, mas rambem as tecnicas CSS da sua consrrucso,

Para quem foi e.scrit,o ,este ~ivrtO

Este livre foi escriro para aquelas pessoas envolvidas na criacao de sires ramo na area de design quanto na de desenvolvimento e prograrnacac, sem conhecimento das recnicas jlQuery 011 com con hccirnen EOS superficiais,

o objetivo do livre e forrrecer informacoes deralhadas do funcionamento bdsico da biblioeece, escudando seus metodos e ftmcionalidades. Explicacoes te- 6ricas emlinguagem corrente e clara, dispensando, se rn pre que possfvel, 0 jargao tecnico avancado, saoaccmpanhadas de exemplos praticos explicados passe a passe e complemeruados por arquivo HTML para. consulra, \Nao se abordararn recnicas avancadas de emprego da biblioteca, construcao de plug-ins, inreracao com AJAX nem outra linguagern OU biblioreca.

Para rirar 0 ma.ximo proveito dosensinarnentos contidos em cada capitulo. e pre-requisite conhecer os fundamentos e a stnraxe da Iinguagem JavaS,cript, nao sendo necessario um conhecimento profundo dela, bern como razoavel conhecimento de folhas de: estilo, em paeticular seletores CSS.

1'v1 aterial COM direilos aurora's

lntrod u ~a 0

Os conceitos e 0 enaendimente das recnicas de desenvolvimento com [Query sao uma poderosa ferrementa de apoio na criacao de sites rnais inrerativos e agradave is) enriquecendo a experiencia do usuario, Profissionais da area de design, familiarizados com as recmcas aqui descritas, conearso com uma vaHosa fonte de :inspira~ao no planejamento das funcionalldades para incremcntar suas cria~oes.

Os inicmal1nes, de posse das no~oes basicas da Iinguagern Jav.aScript, irao sec beneficiar deste livre POf h'iliciaf seus estudosem uma Conte que aborda as rnais modernas recnicas de escrita do codigo, ensejando uma rmidanca rw rumo de seu estudo que ira. reduzir a curva de aprendizado eacelerar tal processo, Nao se intimidem com coneeitos outerminologias que lhes sejam completamente desconhecidos nQS prhneiros capitulos .. Com. a sequencia de leitura, as duvidas tenderaoa desaparecer naturalmente ..

COl1l1 a finalidade de destacar diferentes tipos de in orma~ao neste Hvro, adotaram-se aJgumas convencoes tipograficas mosrradas a seguin

Texto contendo uma dica sabre 0 assunto tratado:

o valor do a.lriblJto sire indica 0 caminho (dire1orio) no qua'il S9 eneornra gr,av,ado e arqt!ivo"dal bib'llotec9.

Alena

Te:Ji([Q contendo urn lembrete sabre prccedimenro extra corn relacao ao aSSlLln1:O traeado:

jQuery. 80 contrariD de' J'avaS cript maD requer Ilcm,ps 1'8 ra comslnuir al1fa1J$ quando busca elemenlos no 100M. 0 consirutor SO armazen8.1udoqueenc(!Intra, automaticament:e,. em l!Irn Qb:eto amrv.

1'v1 aterial COM direilos aurora's

18

Jerminologia

Texro estabelecendo a ado~ao de grafia-padrao em todo 0 livre para terrnos Ott rases com mais de urna terminologia, traducao ou significado:

Chamada

Uma chamada para usna se~aoanlJ.erior na qual 0 assunto em questao fot explicado com detalhes,

Esta funliao desti na-se a servir de container para scripts j Qu ery que devam ser executados somente apos 0 earregamento do DOM. t: uma fLlru;:ao que substitui o metodo re·adyO estudadc em [Cl 51.1.6.2]. Neste exemplo a chamada e para a se~ao l1.6.2 do capitulo 1.

as marcacoes e scripts que exernplificam a teoria, transcreverarn-se somenre os trechos que interessam ae assunto tratado, Omitiram-se os trechos que nao dizem respeito ou l1ao sao relevantes para 0 entendimcnto do assunro, para nao ocupar espaco desnecessario 1110 livro,

Blocos de marcacao sao marcados com fonte monoespacada: esc r,'pt type""'t:E!xt/]tlNasc:ri,Pt" SI"C .. " .• /j(jlll,ery-1. 2 .,6.,j s,'i'></s,cri'Pb escript t)!pe="textl]~vascri p;J;">

S(doc:ument). ready(fum::tionO {

S ('Ibtn~ve~rm,e 1 ha ') . c ~I; ek( funct i' on 0 { ~,( "cor") .csst I cotlorl t '#FFOOOO");: });

Trechos de marcacao que merecern destaque sao marcados em negrit«:

.- - 11 _' ,. • 1'1 ~II /' , 1 2- 6- .• ~ I' . ,

<scnpt tYJe~ text· ]8!VaScr1pt s Ii'C~ , •. J,queI'Y- _ , _ ._ • lS. »«» s'cr1 pt>

«scr+pt ty~:)I!",jjtextl]avascri,Pil:ii>

S(dOCl!lment). ready(functionO {

1'v1 aterial COM direilos aurora's

lntrod u ~a 0

$Clbt:n-ve~rmel ha') .di ck(functionO { ,:( I "cor 'I) • c 55 ( I col or ~ I' t ,#FFOOOO' ~ );: }):

}) : </scrip,t>

Para explicar passe a passo cada linha de um script, este e apresentado com suas linhas numeradas e, a seguu, os cornentarios sao referenciados ao rnimero cia linhe comentada:

1.

2. $(' <M da:s.s",111egellda"'></M> "). ~nsertA'ftel'"(' lege:lild~);

3. var textot,egenda '" $:( "le,ge~nd "). re.rno\leO, t,extO i

4. $,(' .1 eg;enda i ) • append(text:,otegenda) ;:

S. 3,(,fiel d:sd'), addClas:s(' fieldset ");

'6. });

Codigo comentado:

Unha

Des(rl~ao

Linha 2:

Insere logo apos 0 elemento legend urn elemeuto Ih4 corn ;1 classe ~eg:en.da e vazio,

Armazena 0 texro do clemente ll,egend em uma varievel denominada textol,e:gel1da e remove 0 elemenro do DOM.

Insere denrro do elemento h4, criado aneerionneme o rexeo dalegenda,

Define a classe fie 1 dset para 0 elemenro fie 1 ds et, para fins de estilizas:ao.

Linba 3

Lirnha.4\

Linha 5

Codigos, marcacoes e sinraxe CSS conridosem rextos sao marcados com fonte mon oesptl cada ,.

A flL1n~ao jrij,u@ry,lRo(onAi etO perrnite, entre outras funcionelidades, criar urn pseudon imo perso nal i zado para desenvolvi 11:1 en to.

Arquivos para dowmII ead

Os scripts mosrrados 110 livre estao dispontveis para download e/ou consulta on-l i 11 e no si re do livro.em http://,w.v..,livro,j query. (JIm. br .. Os docu m ell tos es Fan separados em pastas por capftulos e fora nil nomeados com simaxe propria) conforme 0 exernplo a segulr:

,arqlJivl'I,-2.,.ld. html

1'v1 aterial COM direilos aurora's

20

ESl1e e um arquivo ql!J.e mostra urn. script conndo no primeiro item do segundo capftulo (2.1) e e 0 quarto script desse item (leers d no. final do nome do arqoivo),

Adicionalmenre, ao final do scrtpr, hi! uma il1dka~a.ol do arquivo no qual foi inserido conforme conveneao mostrada noexernplo a seguir:

<script type="text/javascri pit" 51'(''''''' .. /jl:llliery-l. 2,,6 .. j5,'''><ls'Cripb <script type~"text/]avascri p;t">

$(functioll1($) {

$ (' dii\! j p'). css t(' backglround I, i ' grr'een ')j

D;

</scdp,t> </head>

<body> <div>DIV</div> <p>Palraglraifo<!IP> <div>DIV</div> </bCJdy>

</httmb

·.ilI[arq~iyo:~2Jd,html] ¢:lllll:~dilca,~ao do arq,!alvo que de:monst'ra '0 fUlm~ionamento doscriipt no site dOl livn!J .. Irata-se do quartoarqll1:i\!l~i Uetra d) do item 2.11mo s'e!)urnd~) ,calpitul~o ..

Palavras ou termos cujo significado deva ser destacado sao grafados em italico ..

for exemplo:

jQuery destina-se a adicionar interatividade e dinamismo incrementando de forma progressiva e nao obstr:utiva ;C} usabilidade, a acessibilidade e 0 design.

Va lila V'eis

Valores varlaveis em cedigos sao grafados em itd'Uco.

Por exemplo: jQuery(exP,ressaG t [con t:exito])

1\r1 aterial COM direilos aurora's

lntrod u ~a 0

21

Site d (II UvrlD

O site de suporte aeste liVID esta loealizado em hnp:IJ~AilI~.1iivr()j,qu:e:ry .. (IQm .. hr.

No site, incluiram-se as faci~idades telacionadas a. seguir:

!l!!All'quivo de1c:6d!lgo,.s: os codigos des exemplos mcstrados no Iivro estao disponfveis tanto para consulta on-line come para download,

• Errata: efetuou-se um exausuvo trabalho de revisso tipografica .. Contudo, a pratica mostra que nenbum livre ,es,Ca! isenco de erros - e COUl. este 11130 hra de ser diferente, Uma psgina do site dedicada a. ermra esta dispomvel para COl151.!.i1.ha.

II F,eedback: incenriva-se vivamenre os leltoresa emirir opiniao sobre qualquer aspecto do ~ivro. Serao de grande valia inforrnacoes sabre qualquer erro detectado para aperfeicoar futuras edicoes e atualizer a errata. Voce pede se comun icar co III a editorapelo e-mail novatec@llovatec.com.b r >0 u diretamente com 0 autor pelo e-mail malwjorc.:ss@mauj.olr.com.

1'v1 aterial COM direilos aurora's

1'v1 aterial com direilos aurora's

Parte I

Fundamentes te6ricos da bibUotleca jrQuery

A primeira pane desre livre compreende os capitulos de 1 a 7 e [em por objerivo apresentara biblioteca, examinar sua simaxe geral e estudar 0 ernprego e finalidade dos merodos, propriedades e dlferenres funcionalidades disponfveis ria biblioteca JQuery;,

23

1'v1 aterial COM direilos aurora's

1'v1 aterial com direilos aurora's

CAPITULO 1

Neste captculo, sera apresentada a biblioteca jQwery, relatando-se suas origens, finalidades e destinacao, Sera feito limn breve relate historico de sua evolucao, exasujnando as motivacoes que resultararu em sua cria~:liJol e serao descritas algumas de suas possibilidades, dando uma ideia do sen potencial e mosrrando a for,~a e poder da programacao Ja.vaScrip:rcom. 0 us cia biblioteca jQuerj;

1.1 Deffmi~iies, e '(onceitos

1.1 JI 0 ,que e j:Query7

[Query e uma biblioteca JavaScrlpt criada par John Resige dispcuibiliaada como software livre e aberto, ou seja, de emprego e usa regido segundo licence conferme as regras esrabelecidas pelo Ml'T (Massachusetts Institute of Technology) e pelo GPL (GNU General Public License). ills to, resumidamenre, significa que voce pode usar abiblioteca gratuitamente 'tanto para. desenvelver projeros pessoais como comerciais, Para maiores deralhes sobreesses uposde licenca, consuhe os seguintesenderecos na intemet:

• http: !/pt .I~i k i Dedi a, .. org/l~; [kij~~ii t_l i cense

!II! http::!/pt.I'II'; k ipedli a, o.rg/lvi Iki'j(;NUUGene ra l_Publ ; c_l'ice,nse

John Resig, 110 prefacio do ~ivro jQuery in Action:! diz 0 seguinte:

"0 foco principal da bibllcteca jQuery 'e a s implicid ad e ... Por que submeter os desenvolvedores ao martfrio de escrever longos e complexes codigos p~ra eriar simples efelros?"

25

26

jQrue:ry" A Biblioteca doProgramador JavaScript

Sem dt'rvicia., ele estava emum memento de rara iltSpiri1~ao, quandoassim escreveu, pois soube resumir multo bern [Query E Ulna maneira simples e Eacil deescrever JavaScrip( colocada ~10 slcance HaO 56 de programadores experienres, mas rambem de designers if! desenvolvedores CUIll pouco cotrhecimento de programacao,

Eo que. torna q estudo e eraendjmerno dos coneeitos b:as.icos de jQuery rnais fascmante' ainda eo fato de que voce nao precisa ser umprofundo conhecedor de ja'l,laScr'ip(, por mais esrranho que isso possa parecer, pols se rrara de urna biblioteca criada para ser usada com base nessa prograrnacao,

Sim.p]kidadee a palavra-chave que resume e norteia 0 desenvolvimento com JQuer}t Linhase rnais Iinhas de prog,rama~QJava.Script escritas para obrer U01 simples efei:to ern urn objeto $,30 substirutdas por apenas algumas, escricas com sintaxe jQuer~ Intrincados e as vezes confuses codigos JavaScripE destinados a selecionar um deterruinado elemento HTNIL ccmponerrte da arvore de dQCUmemo sao,substicuidos per urn simples metodo jQuery. Voce meSIDQ, aolengo cia leirura deste [ivro, ira eonsrararcome [Query consegue a preeza de crinr extraordinarios efemEOs com uma simplicidade impresslona nte.colocaado 0 deseavolvimente de scripes a seu alcaace e dispor imediatos, semexigir profundos ccnheclrnentos de prograrnacao,

1., 1. t.1 HlstdrlC(J'

o dia 22 de agosto de 20()5., John Resig, clIja: foro e. mostrada nil figura 11~ um desenvolvedor americana. profunda eonhecedor de JavaScript. que atua aa Corporacso MoziUa e e autor do livre Pro javaSc"lpt Techniques, escreve.~ em sell. hlogum artigo relarando sua. frustracao com a maneira verbosa de se escrever Jay,aScript para obter os resultados preteudiclos,

figura 1.1 - John Resig, a criodos de jQvar'!'.

(aprtu~'o 1 .. 0 que Ie ]Qm.Jery7

2J

Nesse artigo, publicou alguns exernplos no quais propunha 01150 de selerores CSS com 0 ebjerivo de simplificar e dar maier versatilidade ao codigo, Escreveu, enrao, que essa, ainda, nao era a forma definiriva do que tinha em mente, mas iria aperfeicoar e testar suas propostas, 0 nome ainda nao existia, mas nessa ocasiao {oi lancada a ideia que traria como resultado a biblioteca jQl.ler}("

Aproxirnadamente cinco meses apes a ptl blieacao (10 artigo em seu blog.john Resig aprescntou publicamente os resultados de seus esrudos em uma palesua inritulada "jIQuery;a nova cnda para Jav,aScrmpf; profenda no BarCampNYC - Wrap Up, 110 dia 14 de janeiro de 2006.

o ano de 2006 marcou a criacao do primeiro plUig-iu para a bibljoteca, 0 lans;amenro de umaversao 11ao obsrruriva de Lightlsox usando a. biblioreca jQu.ery.:

Nesse ano, ocorreram, ainda, 0 Iancarnento das versoes Hl, to'], 1.0.2, 1;0.3 e :1.04, da versao Xlvl.L da biblicteca e 0 primeiro conteste publico, de cria~a.Q com jQuery:

Elll 2007" lancaram-se as vcrsocs 1.1, 1.1.1, 1.1.2. 1..1.3a, 1.1.3, 1.1.3.1. 1..1.4, l2 e 1.2.1 No diaIl de marc;o ocorreuo primeiro encontro jQuery.

Em 2008; atea data em que escrevi este IiVIU, foram Iancadas as versoes 1.2,2.; l23" 1.2.4l 1.2.5e '.2:6.

jQuery desnna-se a adicionar interatividade e dinamismo as paginas web! proporcionando ao desenvolvedor funcionalidades necessarlas a criacao de scripts que visem a incrementar; de forma progressiva e nao obstruriva, a usabilidade, a acessibilidade e 0 design, enriquecendo a experiencia dousuarjo,

Use jQuery em sua pagina para:

.. adlcionar efeiros visuals e animacoes;

• acessar e manipular 0 DOM;

• buscar inf'Ormac;oes no servidor sern necessidade de reC31'regar a pagina (fora do escopo desre livre);

• prover inreratividade;

!II alterar couteudos;

1'v1 aterial COM direilos aurora's

28

II simplificar rarefas especfficas de JavaScripI;.

II realizar outras earefas relscionadas as descrieas,

1.1.3, jQ,lfIery em conformidade com es IPadniesWeb,

J'Query foi criada coma preocupacao de ser uma bihlioteca em. confcrmidade com os Padroes \Veb" ou seja, compatfvel com qualquer sistema operacional e navegador, alem de oferecer suporte total para as C$S 3. Sim, e isso tnesmo, voce pede usar todos os poderosos seletores previsros nas CSS 3 sem. se prieocupar se este au aquele aavegador suporta a. seleror para as CSS. Esclarecendo: 3. siataxe do seleror segue a sintaxe prevista nas CSS 3" mas quem usa IDS seletores e a biblioteca, com a finalidade de selecionerelementos 110 DOM e 118.10, estilizar,

Evidcneemente, isso nao significa que todo codigo escriro corn lISC dejQuery resulra ernum dccurnento valido segundo os PadroesWeb, A biblioreca foi criada eesta de acordo com. €IS diretrizes do W3C~m.a.s cabe a voce, desenvolvedcr; escrever seus scripts emconformidade,

Se vQce pretende escrever ern. ccnformidade com es Pad roes Web, adore C01110 regra basica de desenvolvimento de scripts €I filosofia de que jQuery se desnna a ad icionar intera tividade e d inam ism 0, i11cremen! tando de forma progress; VG' e mio obsirutiva a usabihdade, a acessibilidadee 0 design com .0 proposito de enriquecer a experiencia do usuario,

Leia a analogia a seguir,

for nao dispor de verba suficiente, Fulano compra lim carro, 0< modele rnais simples cia [inha, e alguns meses depois, tendo sobrado urna verba, resolve investir no carro equipando-o com alguns acesserios, como insulfilm, som, alarme, protetor solar e algl.ms outros irens mudando 0 aspecto inicial do carro e fazendo-o parecer urn modele intermediario d91 linha, Passado algurn tempo e tendo ecouomizado uma boa quantia, Fulano resolve melhorar 0 carro instalando caletas de aco es covad 0\, GPS, TV digital, frigobar, MPJe outros acessorios rnais sofisticados, conseguindo urn visual de carro ~op die linha.

F·-I 'd- Jved .. les r ,. b sem scrl

u ano eo .-_ esenvo venor, 0 carro mars snnp es e a pa.glna wee sem SCrIpts, 0

carro top de linha e a pagin:a web incrementada com jQueryas duas etapas de colocacao de acessorios represenram 0 incremento progressive eo faro de Fulano (e ninguem em ssconsciencial nao rer mandado retirar 0 motor do carro para colocar urn jerro de HOlies representa 0 incremento nao obsrrurivo,

(aprtu~'o 1 .. 0 que Ie ]Qm.Jery7

29

o carro top de linha de Fulano con ri 11IlHI.ra sendo Un1 carro CQm todas as suas funcionalidades, cumprindo rigorosamenre rodas para as quais. f6i projetado quando saiu da Iabnca, mesmo que dele sejans rerirados todos os acessorios, Corn scripts em gernl, e jQuery no 110550 caso, acontece a mesma sif.Ua~ao. Seu docuroenro estara em conformidade com os Padroes Web se ccminuar usavel e funcicnal caso os scripts parem de funcionar Um belfssimo menu de navegacao, com efeitos ulnassofisricados, nao valeranada se nao for acessfve] sem 0 script que 0 faz Iuncionar; Pede tornar-se esreticamente horroroso, mas deve eumprir SIJU. finalidade quando nao susrentado pelo script,

Algumas tecnicas para preservar a acessibilidade aos conreudos incrementados COUll jQuery sao basicas e serao abordadas ern momento oporEuflo. OUU:as situacaes de preservacao de acessibilidade per eS[an.!111 inseridas no contexte de um desenvolvimento particular nao['em so]uliao em IlITlaJ tecnice preestabelecida e dependern cia criatividade e capacidade de 0 desenvolvedor resolver situacoes especjficas,

Sempre que for 0 case, os ,e'xlilmplos, deS~B livro seraa cleSBlillolv,[dos, demrma nao cbstrutiva .een ludo, como dilo ,enten ormern1e" qua.nd:o! a obs1ruyao deperndeli de urn oonte,~to palilicular, sera enl.e·n,did<"que sua ayalia~aoe sol~Qa~ depend'em de cada esso,

1.1 . .4 Caracterlsticas da biblioteci jQuery

jQuery e uma biblioteca jav.aScripr q Lie possui as seguintes caracterfsticas:

• utiliza seletores CSS para localizar elementos componentes da estrutura de marcacao Hf'Ml, da pagina;

• possui arquitetura oompanvel com instalacao de plug-ins e extensoes em gera];

!II! e indi ferenle .as inconslseendas de renderizacao entre navegadores;

!II! e capaz de interat;ao implfcita, isto ,e) nao h3 neeessidade de construcao de Loops para localizacao de: elementos no documenro:

II admire programacao encadeada, ou seja, cada merodo rerorna urn objeto,

• e exrensfvel, pois admire crt<1i;ao e inser,~a.o de novas funcionalidades na biblioteca existente.

30

Nii.o se preocupe se algumas cas caraererisricas descritas seem sern senrido para voce. Com 0 prosseguimeneo rna leitura, os conceitos ficarao clarose compreensfveis, 0 faro ,e que: tams caractensticas possibilitaram a 'C'ria~ao de uma biblioreca basrante compacta e, ao mesrno tempo, poderosa 0 basrante para oferecer funcioaehdades que eornam 0 processo de desenvolvin ento igualmenre compacto e extremamenre simples.

Por ser distriburdacomo software livre, jQuery rem oapoio e oenvolvimenro de urns consideravel comunidade, Desenvolvedores do mundo redo tern contribufdo em largaescala cern novas ideias, scripts, plug-ins, extensoes e toda sene de implernentacoes, com a finelidade de incrementar nao so a biblioteca mas tarnbem as tecnicas de desenvolvirnento [Query

'1.1.5 Como insta.l1ar jQue:ry'

A biblioteca jQuerj: rtada mais 'e que urn arquivo JavaScript (arquivo do ripo texto puro gravado com a extensao .js, COH.l0 i'li:@u_arquiV1o .. h) que del/era ser linkado a pagina web onde serao aplicados efeiros.ou seja, a pagjna web onde serao aplicados 0.5 efeiros devers "ehamar" biblioteca. E somenre isso, Voce :oa.o precisara instalar nada Basta fazer 00 download grannto do arquivo e "chama-lo" nats) pagi.na.{s,).

Uma pagina ou documento "chama" um arqutvo de script fazendo usa do elemente script e seus atributos ty~e e src colocados na se~ao head do documenro

A versao mais recente da biblioeecaesra no arquivo jqller,I~L2 ,[6, jis e adianre voce vera como e onde fazer 0 download dele .. E multo provavel que na ocasiao em quevoce estiver lendo este topicoja exista urna versao mais recente e e esta que voce devera baixar para. seus estudos e deseavolvimentos, Entao, um documento qu,e use a biblioteca devera ter rnarcado, em sua s,e~ao head, 0 seguinre elernento script, enrre outroselementos proprics de cada caso:

<script 'type=l1uxt/javascr; pt1! src-" Ic,aminho/jquery-l . .2~ .. 6 .. j.s!!></scriIPt> <I -- esta! 1 i nha chama ,a bi bli eteca jQueliY --)

<lh@a,G])

o valor do atribu~o Sire indica I) caminho (diretOtio) no 'Q1lJa'~ ss eneernra grava~o

o arquNoda biilllotec8. .

1'v1 aterial COM direilos aurora's

Capitulo 1 II 0 qUe!:e jQuery?

311

A partir daqui e imperative ter gravado em sell HD a ulrjma versao da hiblioteca para poder acompanhar os exercjcios deste livre e fazer funcionar seus experimentos emu jQuery, que, eenho certeza, irao fascina-lo,

Entre no sireoficia] http://jq,u,el)',,cOIll, va para apagina de download conforme mostrado na figura l2 e f.ac;a 0 download da (nti~ma versao cia biblioteea jQtlery:

Dl>M'"I)"""~ )(.),. , ,~p.....,~"'~t

L1'rc:~I1¥~~~~r 1.1Y';F.i'I'".J

'l.!r"''''~ T,.f>"

iiJl~ ~~.;..." ~ct(w,; .i~-.'tor..otf.Ml~Jl."J4I ~~ ... C!!

~.l'ft";:l:

'Fr~-I.

'~

Downloa,ding jQ.ueiry

,_lritJ~ I

1,," M" ~.I' ~. o; ... ~." tl-lh.. ,i",,*, rA .0 ~I.m:l" r~ ."':i',~.,=,,",'rlI. -:f ,od,. ~AA~' ,,~ ,rii!'.~ "" IQ~(I:.!!!, th.t CJ!I~!.t:J t"!! ~jo,~rt;':.!!!i.', -r;l.E~ ~t"i"IIIi-.,. til dlittaJ~r ~ ~ t.n.,ll []1Ii ..... Id'J.!l:I!IAi"\t' f'II,jf~"'..: t'l,.I.Ii ..... ' "JI:~~.; 'N<.I"t,:.O!i

'II r~,!,.:o.f~ iMtdt~I}".ki",o.$ :(:!F~'" -, )f:i~:-. «ll>V-ifI'Q'.:)Jltb-lmJiJ.IJi:it" ft ~ ~J J!'i'IIlj

oil l!t'J~~~~1i r.m.dl!!"'~~ d.-~.!U,;I~.1Iil"rlI ~II Ul\d!.I'!rU"·~ ~~[ 1I.~.Yn~ tl1.a oI'!Jf'Ji!A

,I r' ..... "~_I.,,; in ......."IO •• iq ~ili!:!. ~ "' .... ""->1 "A-"'""F ••• ~;~~"'" ~r"'.i""'''' ,~. ~""~~

J!ly-1I!'l'1~ ~ ~d!d l~r-i'll!"l'" ttJII! :M'~;:lT ~I"'d n=1 ~ ro'T·~.

l'ht:{b·tt1:~ ..e.~!r.I~.ft~!l;! ~~'" ~ Ji!tr'J!r'ft".::: !;k~ ~"~l· ~~~~J.c.t:tJi)lII 1)0& -c.D.i~hl!i rll'!o .1".t~~Il!' ~iJ~1 t. ~'~~!I •• '" ,;t.I;!. h ~. "'.:><Ii \'0' r,.v"".~

"~I!I r;;!!1tT.~~61:n.&~P:iii~lf.;roi~ ,1""1Vr ~"I;aMlll'lo!!lnH'.·F,liJ.r!ii;,l~'-th~:ni!r'"!ll!lil~·II,.I!i!' !I!i~ JJlrrlr.n Uh!~iIl· ~ ~r~~~~.,. dliJll»;PIiil!,!ib: .• 1"'- ~Idti!. ~ ~r"Ii r.i!lI1~I!!i~~ ~ri'1'''''! ~J\'f.~:i!I> r..rtr~~ ftm ~ Wi~~:;; ~ ~!IIa

II 1,11'1 ,(!i:ii~11I HUJlri)

101 ,rn .111. ~1i'. \ '< ",/" ,.' ~

'Figu1ro 1.1 ~ Site of'iciol do biblioter;;o [Query.

Observe, naarea de download em destaque na figura 1.2, que existem diferentes tipos de apresenracae da. biblioteca p.ara download e urn link para. urn docurnento hospedado no proprio site, con tendo urn relatorio das rnodificaeoes inrroduzidas na arual versao,

A apresentacao den cminada "Uncorn pressed" - j qu,!uy-l. 2 • 6. j s - d esrina -se ao uso em testes, esrudos e desenvolvirnento de. biblioreca .. Trata-se de urn arquivo no qual 0 sexto do script foi escrito C.OOll espaco entre cada Iinha de codigo, amplamente comentadc, 0 que fadbra a leitura.analise e enrendimento do codigo contido no arqulve, Esta e'a apreseneacao recomendada para voce baixare fazer uso 11'05 estudos e acompanhameuto dog, experi men [OS desenvolvidos neste livrn o tarnanho desse arq uivo e die 97l8KB.

32

.A. apresen [a.~an dencm i nadal'.~l inified il_ j que~ry·l. 2 .6.mi 1iJ. j.s ._ di £el'\~ daanrerior par terem sido removidos todos os cornentariose espa~8imentos entre IIDl1has e dedaracoes, eomando 0 codigo diffcil de ler para humanos e mais compacro, porus setransforma em urna sequencia corrida de codigo, sern quebras de linha.Esra e a apresentacao recomendada para ser usada no desenvolvimeneo de sites A vanragem sobre a versao anterior e que se [r.a'[aJ do mesmo arquivo com tamanho reduzido para S:4.4KB.

Finalrnenre, aapresentacso denominada "Packed" ~jClwe:ry~l. 2.6. pack.js ~e uma versao obtida por processo de compressao JavaScrip[ cia. biblioteca, resultando em urn. arquivo com tamanhe igual a 30JKB. Essa versao, POf ser codificada, nao e legfvel para humanos ..

Embora com ramano menor que 0 da versaoIiMinified~~!Q tempo de csrregamenta desta versao acaba sendo praticamente igual 9.0 daquela versao, pois lila. qjue se comput.atr 0 tempo de desoompressao quando 0 usuario recebea p.:;ig,ina. ES[a versao rem a desvanragem em rela(j;ao a anterior de nao h para 0 cache, tendo que ser carregada novamentetoda vez que 0' usuario volta ao she .. Ourra desvantagern que desaconselha seu uso e 0 faro de que 0 processo de descompressao pode, eventualmente, ser lmperfeito, iruroduzindo bugs nao existences na versao sern cornpressao Oil 113 compacta, A nao ser que voc.e tenha ulna boa j ustificativa pa ra usa-Ia I' nao use-a.

A partir daqijli, para testar es eXim,plos do ivro, sijJpoe;-se q,lIe vocElllba~xou e Igravou em se u H [) a spresen!a Qa,o"I,J noom,pliessed" ~ ji q,u e ry-l.2 . (I. j 5, ~. dSI bibliol.e ca, para sell c:hamada.lpel,as pagil1las de estudos eomorme e.xplicadoanleriOml.ente.

1.1 .. 6 jQ.uer,' na. pratica

Para que um script consiga imprhnir dinamismo, alterar comportaJlUentos ou apresentacao, no aedo 0.1.1 em panes de uma paguta web, precisa de tim metodo de acesso a drvore do documenro com a finalidade de encontmr e elemento HTML no qual sera vinculado 0 compertamento ..

Paraexernplificanimagine llm~ pagina web na qualextsre UI11 bctao que ao ser clicado, muda a cor de 11m cabecalho, de verde para verrnelha.

Nos ex,om,Plos oonstanles, des ar,quivos disponiveis para eorsuna ou download, voce ira ve·rificar D funcioll1smenla dos scripts, ililte;ra:~in:dCi! corm a p~glll9i I:ll!Je' cOlllhim (I exemplI), cHcandol um botao ow aglnd'o com G meuss .. F'am repetir e funcio~amelill0 doscriP't recarregue a llS.gine, (em: ,ambiente' Windows tec~' f'S).

1\r1 aterial COM direilos aurora's

(aprtu~'o 1 .. 0 que Ie ]Qm.Jery7

33

<1; ty 11 e type::::" te x t/cs 5;;1 .m:ed i ,a;::; 1 1 1.111 'I '>

ht {color:,#090;} I" cor verde para 0 c:abe~allh:o, *1 '<lsty'~le>

</head1>

<body>

<hI ~ d;:'u,co r'''>f.abe,~a 1 ho mwda ee cOI'</hl>

dlultfon t)fle=:"oottom" encltck !i!:. "OOC1lrl1€!I'lt..gEI;tiEl ementiByldC cor') .style, cololJ"!:!:'#froJOO' ;"'> Vel"me1ha

</buttOiiil>

A tecnica usada uessa solu'iaoconsisEe em, inserir script denrro de 1l1arcaqao HTML (in-line), sendo uma pratica ultrspassada e, infelizmen teo ainda amplamente ernpregada por rnuitos desenvolvedores, Essa solucao contraria um princtpio fundamental dos Padroes Web que preconiza separacao total entre estrurura de marcacao com HTNIL, apresenracao com CSS e comportamento com scripts, Cada codigo no seu arquivo correspondente e separado, Evire usa!' essa solucao .

.. ' 50'lu~jo com fln~iD J'avaScript

<s:ty 11 e type"," text/c s s:'nte~,d i i= " a 11 ~j,> hl {color:#090;}

<:/sty~e:>

<script type=Ht,e:xil;! ]avasc:ripil;u> function lIudaCorO {

doc.umemt.g;etiE1 MenltById( 'cor ') •. slyle .• color .. ilftl=OI)O(!l" i

it. ~

<lscriiplt;:. </hea.d> <body;.

<hl. ild'...,''''(()r'''>C;tbe~alhl) mwda de cOI"</lhb ebutten tYlpe='~butt>Qrltoltclick. ::: 11lmudaCo.rO ;:11:> VermeUa

</buttGn>

1\r1 aterial COM direilos aurora's

jQulery • A, IBibliotec,a do Programadm JavaScript

A recnicausada nessa sohJ~ao e uma melhoria da soll.lr;iioanrerior e consisre em definir uma fun~ao dentro da s,e~ao head do documento, que pede ser chamada por varies bOHJf'S dentro de urn rnesmo documento, permirindo ampliar 0 uso do script para alem de Ul11 botao. Uma va ria nte dessa solucao consisre em colocara fun~ao em urn arquivo exrerno e linkar 0 arquivo ao dccurnerue, 1550 permire usar a flJ.ln~ao em varlos botoes denrro de varies dccumenros, Essa sclueao continua misturando estrutura com composramento e.)rai como a anterior, deve ser evitada.

<stylle type;"t,ext/css:" media;"a.ll H> h1 {collor:·,090;}

4sty~le>

<5 CI"] pt tYIlIE:=11 t,exti j avas c r i pit "> window.onloa.d :c funtt.iionO {

documemt.geltlE1 ernenltById( Ilbtin-ver,lle1 ha ') .oncl l·ck ,.mudaCol';i

};

function lliudaCorO {

doc !Jmeliilt • getiEl enumtElyl(il (' 'C'O r i ) ,. st.y 1 e .• (01 or= i# ffQI)OO 'I ;

11:.. iri

<lSCr'~p,b </head> <body.;.

<hi. ~d' .. ''''(or'''>t(ahe~alho m'l!da de (01'</111.>-

ebu tten tYlpe=!~butt'ol1i!! ; d= '~btn~Vf!nll.e lila'''> \l1erme 1 ha<ltb~tt()n>

,.i) I[ arq Wllvo:~l J.S.e.hlml]

Agora, sim' A marcacao HTML esta isenra de codigo Ja\!aScripr., pais se incorporou 0 script a :se~ao ~ead do documenro .. Resta agora colocar 0 script em urn arquivo exrerno separado IE': linkar para 3(5) pagina(s). Essa e uma boa solw;ao sob 0 P011.[o de vista da separacao do comportamenro, mareacac e estilizacso,

1'v1 aterial COM direilos aurora's

(aprtu~lo 1 .. 0 que Ie ]Qm.Jery7

.. So'lu~ao (om jQuery:

Caso VOQe nada conheca de jQuery; n3,0 se intimide CQ,m 0 script a seguir, Limite-se a observar com atencao cada linha do codigo que seu conhecimemo de java.Scrjpt lhe dad LIma no~aiQ bem proxima de sell. funcionamen ED. Com 0 prosseguimento da Ieitura, voce enrendera a finalidade de cada linha do script:

<head>

<styl1e type","iI;lext/css:" m:e~dia","a,ll "';.

hl. {color: ,!I! 09:0 i } 4sty~le>

<scil'ipt. type="texit! javascript" 5 rc:=:II' •. /j,queliy-l.2. 6. js,~'></s,c rip'b <script type="textljav8iscriptfO:>

Hdocumen't). r,eady(func'tionO {

$:( !~b,t:Ii!J-v,e:rllle 1 h a, !) . (11; ek( fiu:nc.t1 on, 0 { $( I' 'cor ") . C5S'( I co]or'!~. '''IFFOOOQ: i') 't

<lsc:riipib </head> <body>,

<h:lL ild:",'i'cor";>Ube~a,'ho muda de cOI'</hl>

eb u t to iii tYI~e=!~ b uno nl" i d='~ [bit n - ve nne 1 ha"') Vie rme 1 h a. </ b~ tton>

~ l[a.rqlJiv'o-lJ.6d.ht:ml]

Ao contrario das solucoes tradlcionais COlD JavaScripc, como as mostradasanteriorrnenee, 0> usa cia bjblicreca [Query nao perrniee misturar script com marcaeao HTNIL. Nita e previsto nem existe urna siruaxe para, [Query in-line, Voce e obrigado a inserir sell scnpt incorporado na secao head do documento ou escreve-lo em urn arquivo separado e iinkar para os documenros onde serso utllizados, Como regra geral, adore as mesmas direrrizes que regern a vinculacao de folhas deesrilo, isto e~ se seu script serve a mais de uma pag,ina,. adote a solucao de linkar, sella 0,. a solucao de incorporar na ser;a,o head do documenec.Mas lembre-se que mesmo para uso em urna so pagina, em script'S que demandern tempo de carregamento nao desprezfvel.a solucao de linkae e melhor, pois nesre caso 0 script vai para 0 cache da maquina do usuarin

Os qua [['0 exem plos aqu i apresel1 rad os tiveram por 0 bjetivoun ico mosrra r na pratiea lim efeito bean simples criado de tres rnaneiras difercntescom ja'itaScript

1\r1 aterial COM direilos aurora's

36

e a. maneira jQuery.. Ainda ql!l,e seus conhecimencos basicos de JavaScri.pI sejarn limitaclos, na.o se intimide, simplesmente oonsulte com a[en~a.o os codigos e v.a em frente, Mas tanto voce quanro aqueles farmliarizados com Iavaxcript na.o deixern de abri rcada uma das paginas CO 11 tendo as scripts, constatar seu funcionamenro e olhar no ccdigo-Ionte dapagina. Os arquivos das paginas esrao no site do livro, disponfveis para consults on-line e rambem para download,

To~a pagina rna ·qual S9 p r·ete Me' fa~er furnciomar LIm :scriipt jQuery de vera eslar lilikadal palla. I) 2rql.fVO dial bilJliotecal 'ba:ixado do site jQuery.

1.7 .. 6.1 EvenfO ~I:ii ndow, on load

JavaScript e urna tecnica de programacao que funciona percorrendo e bus cando seus alvos (elementos da marcm;ao) na arvore do docunrento eu no DO.M! ou seja, urn script so consegue executar sua a.~ao se redo 0 documento J~ over sido carregado .. Os elementos da marcacao de uma pagina so exisrem depois que a pagina Ie carregada, (!lUI' mais precisarnente, vao exisrindo it medida que a paig,in3 val sendo carregada e na sequencia em que aparecem na marca~ao a partir cia declacacao do I[lOCiYPE ate a ta.g de fccharnento do elemenro Iiltml.

Na pratica, isso significa que Sf: voc·€: inserir na marca''t3o de JJ1ma pagina urn script que se refira a urn. elemento hl, pOI: exemplo, em local acima daquele no qual foi escri CoO 0 elem e nto hl, seu script n§ o i ni f u nciona r, porque sera carregado na pagina antes do carregamento do elemento hi,

Observe, a seguir, a transcricao do teroeiro exemplo rnosrrado no item 1L6 no, qual todo JavaScript foireriracio da marcacao e passado parae secao mead do docurnento,

<styli e typet:ll"l!:lext/css," me~di .B= n all "':> hi {collor:i09.Q;}

</sty~le;.

<script type",itltext/javascri pit"> wiJndo~.on1oad '" funct1on() {

dOCUllie'ilt. 'g:etEl ementBy:[d( 'btn-vernel ha ~,) . cncl i ck = mlUdaC'i;Uf':;

};

furneti ~n i:m.~daIGotrO {

docume'nt.,~:etEl e:rnentById(' cor , ). styli e. co1,iHi' ;;;, t 'HIlOOD! ;

1'v1 aterial COM direilos aurora's

(aprtu~'o 1 .. 0 que Ie ]Qm.Jery7

31

</sc.dpt> .:Ihead> <body>,

<,hlL ~d,,'''cor;;>(abe~alho mil.ida ,de COIf</hb

«button tYlpe",,"butt,oR" i d="bl;n-vem;e'l ill a'''> V,erllle 1 ha </~i!.Ittol]>

Vamos alterar ligeiramenre 0 script anterior reescrevendo-c conforrne mostrado a seguin

<styli e type"'''t,extlcss;''rtte~,dia=1i al 1'"> hl {co,lorr:,#090 i}

<!sty11@:>

<script type",,'itE!xt/jaNascri pf'i>

documenlt" g!!ltE1. ementByld C' bm-verne 11 ha !) .onc 1 i ck '" ml!.ldaCo r ; fUJ1(;;t~ on m~dalGlJrO {

document:.,g;eItElementBy:[d]('<cor') • stylle" (01 'Ill' ::I. r'ffOOO(J!;

}

<I sc ri Il't> ,</head> <body>

<hi. i d~"'(or"::~.c,abe~a Iho ItllJlda de cor</hl:>

<button type:="ibutton" ii d= libtn-veli'llie ~l hau>Verrnell ha</blilttO!1>

Observe que 0 que se fez foi rerirar do script (I, declaracso que diz: ~1;nd'o~e.oI11ttad "" fUllct;0l10 {

.. ., fa~a is,so"".

}

Mesmo para quem POllCD conheoe de JavaScri PE, a decla l.'a~aQ e a utoexplicativa, pOIS~ri ndcw, on load. rradu zindo para 0 p or rugues, sign inca: depots que 0 docu mente for carregado, fS':t3 i5.50. Fa~a isso e a fun~,ao mucla(orO.

Agora. com a. retirada que se fez; 0 script (, .. fa~a is.5.0". .) nsoesperara a pagina ser carregada e, consequenremense, ndio funcionara eo borao 03.0 trocara a cordo cabecalho, conforme se pede consrarar no arquivo exisrente 110 site do. livre, lsso ocorre pela razao explicada anteriormente: 0 scriptfoi escrito ames dos elementos hl e button com seus idscor e btn-vermeUa constantes do script, au seja, quando 0 script e carregado, ainda nao exisrem os ids de que precisa para funcionar,

1\r1 aterial COM direilos aurora's

38

Se ti rar 0 script da s:e~ae head do docnmentc e posiciona-lo depots des elementos errvolvidos, funciol1anl norm alrnen te .. Fa':taaSS[lln:

<stylle type, .. "text/css' m:e!·di,a","allH>

hl {co,lor:#09:O;} <lsty~le>

<lhead>

<body>

<h1L iid:",''''cor''~>[a.b@.~a.1hal mwda de corr</hl>

<bLY t to n tYlpe::::; '" b utto I1J n ·i (I", "br n - ve lrlme 1 ha'''>'Vle nilI'!' h a</ib~ tton> cs C 1"; pt. type;::::"te:xt I j avas c ri pit ">

doc'u ~e.nrlt" get:E1,ellentByl:d(! btn-verme:11 ha') .encl ick '" lIudaCor;: function lIudaCorO {

decu m.el1t • g:etHem.enlt.ElyId ( I co r I ) " st.),' e • (010 r= I, FfOOOIll' i

\1:. If

E tudo voltard a funcionar, VEja 110S arquivos existences no site do livro as paginasrnosrrando as duas simac;;:o.es descritas aneeriormenre.

(ol1lclusao

Para possjbifitar a retirada de seus scripts da rnarcaeao HTML, a [inguagem Ja..vaScrmpt dispoe da declaracao wi ndow .. enload que arua como uma especie die aviso para que a fun,~a.o entre em a~ao (au comecea "rcdar'Tsornente aposa. pag,illa, rer side completamente carregada,

Exisrem outros metodos que cumprem a mesma finalidade e oferecem outras funcionalidades, como perrninr declarer vsries fu.n~5es:,. mas nao e 0 escopo deste livre aprofundar a linguagem JavaScript.

1. ',0.2 Mttod'o readyO

Tal como vimos para JarvaScript,jQueq) que se basela uessa linguagem, tambern precisa que seus scripts conhecam a arvore do documento para poder [uncicnar,

1'v1 aterial COM direilos aurora's

(aprtu~lo 1 .. 0 que Ie ]Qm.Jery7

39

Na siruaxe jQuery" oequivalenre 210 'Ivindow"onlo.3ld e rodas as suas variantes e mostrado a seguin

$( docunent) . re,ady( functi on 0 { , •. ' fa~a h;:,:oo, ..

})j

Essa no~a~ao e conhecida como sintaxe jo.I'lnal para esc rim do metodo ready()" que signinca 0 seguinte: "quando o docurnento estiver prontO', fal!fu isso" Faca isso eo script a executar,

Voce pode ornirir 0 pararnetro docunent passado para afun~aio jQuery consrrutora $,0 e escrever com. a seguinte sinraxe:

SO "rea.diy(fu.r1CIri'onO { ; .. fa~a tssc. ' ..

});

o rnerodo jQuery n:!adO oferece duas vanragens sobre sell equivalente JavaScripr:

• 0 script esra pronto paea funcionar tao logo a arvore do documenro tenha sido carregada, Nao e uecessario que todos os componentes da pagina, tais (:0111.10 imagens, foHms die estilo, anima~5ese mfdias ern g.eral, tenbam sido carregados, Basta que a. estrutura de rnarcacao da pagina esteja disponfvel eo script ja podera funcionar.

• Nao ha varia~:oes funcionais para 0 metoda e pelo faro de [Query !laO adrnitir mistura de script com rnarcacao, utiliza-sea sintaxe III os erada para servir de container aos scripts.

Existe urna sintaxe alternativa a sintaxe formal rnostrada anreriorrnente para ometodo I'le:adyO, chamada de sintaxe .Q.brellia.da; que e a. seguinte:

S(functiionO {

... faca lSSQ ..•

» i

Nos cooigos desel'lf!loMd'os Iilesfe livre, s8raadotad'a 611 sinl.aXe f()flll1ITla'li pais se cOlllsidera que, apesar ,a'e se~ mals e:densa, oferece melhor leglbiHdade,sendo em COIISIH!luincia mais facil de SIH vistlalizada. [Em ssus desenvobimentos reals, sinla,.se al v(lrnla.cle para usar a sinta!x:e s.breviada que", oe,!itamente, reduz o lra'bs 110 de c:ligita~o.

1'v1 atertai COM direilos aurora's

40

1.1.,7 Fundamentos jQuery

A finalidade do uso de [Query e controlar 0 oomportamerno de toda ou partes de uma pagjna web, Sabe-se que urna pdginaweb nada mais e do que marcacao HTML Entao, e ltcito ccncluir que 0 princtpio de [uncionamento de jQuery fundamenta-se em sua capacidade de encontrer os elementos HTl\rH_ que constiruem a pagina e a estes anexar seus merodos,

1.1.7.1 r[onsrrutorjQuery

Inicielmente, veja OJ encarregado deencontrar elementos H'I'Ml, em urn doeumente:

so

Tecnicamenre, rrara-se do que se denomina, ern ~il1guagem de programacao, de construior. 0 co nstr LI tor ${) ou, ainda, a funr.;ao construtora SO estara presente em todos os scripts que voce escrever, portanto decore desde ja sua sintaxe: urn sinal de cifrso seguido de par-emeses (0 que, convenha, n30 e t8.0 complicado de decorar),

Outras bibliorecas JavaScript tambern usarn a fun~ao so. Isso pode causal' contliros e mau funcionamenro de scripts quando se usamais de uma bjblioteca no mesmo documento, Nesses cases, existem merodos para evitar confliros e urn. deles e usaf a. sintaxe altemativa mostrada a seguin Outros metodos para evirar conflitos serao apresentados posteriormente.

jiQueryO

Nos oodig:os. d:esenvolvidos nesleliMnlOj seral ado1adaa sints!Xe:. :SO .•

Simp~icidade ea filosofia que orienta 0. desenvclvimento de jQuery desde SLHi criacao, Observe os codigosa seguir, Voce, mesmo nao conhccendo nada de jQuery, seria capaz de concluir a finalidade de cada uma das linhas do codigo a seguir?

S('~l');: $(' j] I) i

$( I span I');: $(' table") j

1'v1 aterial COM direilos aurora's

(aprtu~lo 1 .. 0 que Ie ]Qm.Jery7

4.1

Bem simples! naO!! mesmo? Voc'e esta msrruindo seuconsrrutor a. eneontrar todos os elementos U, p spane table: respectivamente ..

jQiuel)l,. ee oontraAO a"e'J!a",aSeM,Pt mao re;querlloo,ps~arn COIliSlfiuin:urrays qua.ndo buses elementos no docl!Imen'!cl. 0 loonstrulor SO armaZiena s[.llomaticarnelille em urn, o~jel;o arra,y'luGO qllle eliltOliltma,.

Encontrar tod'os os elemenros die urn dererminadotlpondo parece multo (lciL Seria bern rnelhor se voce pudesse encontrae urna ocorren ~a especffica de urn elem en to,

for exernplo: quem encontrar 0 rerceiro paragrafo do documenro, Bern, neste caso, uma SOII,l,~aQ seria marcar 0 terceiro paragrafo com 0 atributotd para identi ficar sua. ocorrencia:

e escrever 0 consrruror assim:

Voce conhece CSS? Ainda naio? E essencial comecar a aprender hoje mesmo, sobpena de ticar ultrapassado 113S eecnicas de desenvolvimento web. jQuery nao e exoe~ao a regra e faz arnplo emprego de seletores CSS. Como se disse anterjormente, adora os poderosos seletores CSS 3 para! localizar elementos no documeneo, E aao se pn':!ocllpe, pois .0 usa' de seletores CSS em [Query em nada se relaciona com suporte pelos navegadores, Use e abuse desses seletores que seus scripts funcionarao em qualquer navegador;

Observe 0 ccdigo 11 seguir: $(' bo~y' p: nth-ch'il dU) ")

Aqui 0 consrrutor esra usando urn seletor CSS 3 que tem como alvo o terceiro parsgrafo descendente do elemento body. Trara-se de uma busca simples, sem necessidade de atribuir tim identificador ao terceiro paragrafo como se f-l antertormente.

A verdade e que jQuery Lisa amplamente selerores CSS e.assim sendo, e pre-requisite para bern desenvolver jQuery 0 conhecimento profundo dresses seletores .. '10 apendice A,. voce encontra umguia de consulra aos seletores que ira ajuda-Io a acompanhar os exemplos desre hvro,

1'v1 aterial COM direilos aurora's

42

1.1,.7.2 En,codeamenfo jOvery

U m conceiro impor tanre da biblio reca j Querye a encadeamen to .. 0 bserve a linha de' codigo a seguin

$( idi·v'). c.hil dren( "p'). fa,'ceOul!() .addClass (' xpto")

Nao se preocupe se 0 codigo parecer confuso ou iFilin.tel:igJvel. PO]$ logo voce estara enrendendo-o O codigo diz 0 seguinte:

"Consmuor, enccntre todos os elementos panigrafos que sejam filhos dos elemenros dllv" neles aplique urn efelto de esmaecimento (fadeOut) e adicione a classe xPto'~

Denomlna-se encadeamenro a caracterfsrlca de se pcder encadear diversos rnerodos em uma declaracao, Isso ,e possfve] porque se criou [Query de modo a que cada merodo retorne urn objeto pronto para receber outre metodo, que, pOI sua vez, retomara outro objero, e assim por diante, permitindo ao desenvolvedor consrruir uma cadeia infinite de objetos e metodos .. Em JavaScrip[ tradicional, na.o exisee encadearnento como 0 projetado para jQuerj; 0 que obriga 0 usa de multiplas declaracoes para Sf consegair urn efeito que, em. jQl.1ery; Sf consegue com lima linha de codigo apenas,

1.1 .. 7.3 Funrdefutilitarias

Servir como insperor e selecionador decomponerues do DOM~ conforme viS1::QI anteriormenre, naoe a (mica arribuicao da funcao so. ]1 Query preve urn conjunro de' funcfies chamadas utiluarias qu,e usa o sinal $ como umidentificador tal qual qualquer Dutro idenrificador previsto em JavaScript. A sintaxe para as Iuncoes utilitartas e mosrrada no exernplo a seguir:

s. b.rowser;.

ou com a opcao de uso do IdendfkadoT jQuery;

jQuery.brOlflseli

o exemplo mostra urna fu n~ao para ideo tificar 01 tipo de navegador do usuario que equivalc il fun~ao mwiga.tiol"',1!I5erAi'gent do Jav:aS ripr,

E rnuito pouco provavel que voce use uma funcao utilitaria no desenvolvimemo de scripts para fundonar em uma pagina web. Elas te.m sua. utilidade no desenvolvimento de extensces para a biblioteca jQlIery; como a criacac de plug-ins,

1'v1 aterial COM direilos aurora's

(aprtu~'o 1 .. 0 que Ie ]Qm.Jery7

4.3

1.1,.7.4 {onflitos>ClJm outras bibJiotecas

Sem dllvida, a inven~ao de bibliotecas revigorou 0 uso de JavaScript no desenvolvimenro de paginas web, pois alem de' tornar 0 processo de criacao bern mais simples, fomeceu mecanismos (pIe possibilitam criar codigosnao obstrutivos e, em consequencia, scm prejufzos para usabilidade e acessibilidade da pagina, jQuery nao detemexclusividade no campo das blbliotecas javaScript, pelo contrario, muitas bibliorecas surgiram nos ultirnos tempos, entre etas: Pro« type; Mochikit, Moo'Iools, Yahoo User Interface (YUl) e DO!vIAssls[::mt ..

o identificadort rambern nao e exclusividade de jQue:ry e IQIIHra.s bihliorecas fazem I!.lSO dele. Se urn documento usa mais de urna biblioteca, e provavel que ocorram conflitoscom diferenees bibliotecas tentando interpreter urn mesmo identificador e cstabelecendo-se uma enorme confusao.

o sinal ~, e um pseudonimo e, no jargao tecnico, die-se "alias" para 0 identificadoe da biblioteca, 0 identificador utilizado foi jQuery~ assim, ao usar essa biblioteca, $ eo pseudonimo de jQuerye as duas sintaxes mosrradas a seguir sao equ ivalen tes:

so

jQueryO

Usaf jQ~e;ryO eljrnina 0 risco de confliros, F11S!S obriga 0 desenvolvedor a abrir mao de escrever com a forma abreviada do pseuddnnuo,

Felizmeote, pam evirar conflitos com outras bibliotecas, sern ptescindir de uma formaabreviada existea fUl'l'S3.0 jQuery. noCornflict 0 que permiee, entre ou eras funcionalidades.criarum pseudonnno personalizado para desenvolvhnento.Tal fun~a.o serd abordada no capitulo 2~ em [C252.1].

1'v1 aterial COM direilos aurora's

1'v1 aterial com direilos aurora's

CAPITULO 2

Fun~:o,es~p,adraoe seletores jQuery

Na primeira parte desre cap Iru 1011 serao explicadas .8JS funcoes-padrao, de ernprego meis COl1llUl11; da biblioteca jQ\Jler~ examinando a sintaxe, aplka'!rao e funcionamento de objetos, meeodos e propriedades que consnruern 0 coracao da biblioteca ... Ia sequencia, serao exarninados os poderosos seletoresjfjuery apresentando-se SLUli sintaxe e desenvolvende-se exemplos de .al>lka~ao.

2..1 Fun~o@s-padrao jQUE!lfY

Os arquivos exemplo contendo a demonsrracao pratica das fUll~6es e selerores apresentados neste capitulo se baseiam na tecnica de esrilizar o(s) demento(s)alva(s) de bnna diferersciada no rnomenro em que' 0 script "roda" por ter sido acionado urn. disparador de eventos, em geral 0 cliqueem um borao.

Para adicionar esalos em uma selecao jQuery~ pode-seusar duas sintaxes qllie serao estudadas com detalhes em. [C4 S4JL contudo veja a apresentaciio da sinraxe mais simples que sent usada neste capitulo com 0 am proposro no paragrafo anterioc

A sintaxe geral para adicionar estjlo ao elernento-alvo de UlU selewrjQuery e mostrada a seguir:

s e.l e to Ii'jQl.lery • cs S ( t ptopr i f!dad~', !I va,l 0 r' ')

o parfulletro p.mpri edade e uma propriedede CSS e o parameuo 'V<llj'Or:jl a quantificaJ~ao ou caracrenstica da propriedade, Nestecapitulo, serilo usadas frequentemente as propriedades backgr'ot!!d e color com os valores red (vermelho) e glre,en (verde),

45

46

Esta e a principal flLU1~ao [Query rnencionada no capitulo 1, a qual aceita dois argumentos.Veja-os a seguir,

Demi~ao

exp,ressaD

Urn seletor CSS 011 urn dos seletores especfficos da bibhoteca.

o coneexeoem que sera feira a procura do seleror .. Omirindo esse: argumenm, 0 valor-padrso de precura sao. os elementos do DOM no documenco arual, Voce pode limitar a procura ao coneexro de urn elemenro Q'IJ conjunto de elementos. do IDOM ou mesmo a urn objeto jQuery.

Exernplo:

<head>

.::st.ylle type;::"t,extlcss," rn:ediac:::"a.l1 "'>

div {width:200px; height:l00px; ~ordE!r::Lpx sol id #000; t!I!aJ"1gin:2Upx:J <!st!tdle>'

-escr ipt type;;;;"text/javascri pit" src-" .. /j(Jl!,ery-L 2 ,,6.js'''></scripb <script type="text/javascri pt"»

s (oocllIment) ,ready(ful1ct:1ionO {

SC#difeli'ente I).. essC back'Qiliound '! I red ') : /I sem uso do pal"'ametro centexto

$('p', $.C#'c:ontain,er~)) .csst ' calor I" ~Qlreefit!); 1/ !C(Jm 'USO do par~metro r(Ol1Jtexto

})t j: </scrip't> </head> <body>

<dii'\I></d~ \1>.

edjv i d!",."ldJf,eri!nte"><ld~v> <di'v>,.::::/di If>

<dill id:""cont:ainer,r,>

<pf;:.P'aragr:aJfo denttl'\o, db d1vlc<Onta,~ner</p> </dI1'-'>

<p>Paragrafo fora do dliv~c()nli:a.i ner</p>

.iJ l[a:rqlJlivo-l.la .. btml]

Nesse script, veritica-se 0 uso do construror $0 sem 0 paramerro (ont,eXt'o, qu:ando se da a busca pelo elemenro cuje id e dHerentle, busca esra em eodo 0 documenro, para esnhzar sell fundo na cor vermelha, Na <Dutra siruat;ao. constata-se 0 Ii.l.SO do parametro contexto igual a SC'~conta,-rune:r!'), quando se da a busca pelos paragrafos denrro do diiv#contalner'" para estiliza-los na cor verde, Sf: omitisse o pararnetro conrexto nesse segundo easo, rodos os paragrafos no documento seriam estilizados na cor verde.

1'v1 aterial COM direilos aurora's

4.1

Esta funs;a.o destina-se i:l! criar marcacao H'l'Ml., 0 valor do argumento passado e ume string contendo marcacfo esrrntural que pode ser escrira manualmente em texeo puro: usando urn gerador de template, urn plug-in ou AJAX. Neste livro, voce vera a g,er.a!\.ao via rexto pure escrito manualmente. Lembre-se de que triac lllarca~ao via JavaScript rorna 0 corrreudo compleramente inacessfvel a recnologias assistivas, Use essa fun~ao consciente dessa hmn[.a.~ao,.lembra.ndo que scripts ]iQuery destinam-se a urn incremento progressive do documento, ponanro nfio erie marca,~50 em desacordo com esse objetivo, Ha timimc;oes na criacao de controles do aipo input para formularios com essa fun~.ao assjrn evite cria-los com 0 IlS0 de script. Barras, quando presentes na string do aq~umemo, d eve rn ser escapadas,

Exemplo:

<head>

<5C ui ptt:)lpel:::"t:extljavascri pt" src~,j .• /j€lll,ery-lo 2.6.j s"></sui pt:> <script type=ltuxtljavascript!l>

$(aOC!!Illlent). recddy(fUllctionO {

S (! <p,>!EUI sou um pa.raglrafocriado com jQue.l'y. </P> II) .. prependfo ( ! bod)'ll) ;

D:;

</scrip't.>

</head>

·<:b0 dy->

·</body>

</htm~l>

itll[arq~ivo:~2.1Ib.htm.l]

Este script cria a tnarcacilo para urn paragrafo e seu respective texto ells;'Wndo 01 metodo prependToO j que sera apresentado ad ian te, escreve a marcaciio no elemenro body .. Se vocevisualizar Q ccdigo-fonte cia pagina, a marcacao do paragrafonao estara lae e iSSQ que um leiter de tela enconrra, OUi seja, absoluramenre nada

:$I(,eJemenlOS)

Esta fun930 destina-se a procurar elementos HTM" no DOM. Aceita tarnbem documeneos XML e objeros nrindO'lJ" ainda quenao sejarn componenees do DOM, co 111.0 .argu men tos,

1'v1 aterial COM direilos aurora's

48

Exernplo:

<h@ad>

(script type",,"textJjavascri pt" src-" .. /j(j1ll'ery-1.2 J'i"js,II'></suipb (,SC ri pt type=" Itext/j avascri pit ">

S(dOC:l!lm~nt). ready(functionO {

S('div, pl).css('background1, tgreenl);

}):: </scriplt> </head> <body>

.;:dtv>DIV<:/,~; \I) <Pi} P',a rag Ira fo</p'> <di'v>[)IIV<!,rnli \I>

</bQdy> <Ihtm11;>

~ l[arq~iv'o:-2.,1,c.html]

St(callback,

Esra funcao desrina-se a servir de conrainer para scripts jQlJe,fY qIL1C devam ser exeeurados scmenre apos 0 carregamento do DOlVt.:E urna fUJn~ao idel'nica ao metoda IrQa~yO esrudado em [C] St16.2]. 'Iecnicamence, pode-se dizer que se trara de uma forma abreviada de escrever .$(d'ocument). rIB'ldyO.

Observe, no exemplo a. seguir, que se nata do mesmo exemplo mostrndo no item anterior; no qual se substiruiu 0 metodo r,ea.d:yO pOI esta fun~.aio.

Exemplo:

<head>

<script type","tex:t/jav.ascri pt" slre",'t •• /j{jl!lery-l. 2 .6.js"'></su;pt>' esc ri pt type","ll:ext/j avasc ri pt?»

$( fu ncti 011 C$) {

SC'divj p') .cssCbackground" i 'green');

})I;

</scrip,t> </head>

<body> o:;div.>OlV<ldiv> <p;:.Pa.ra·91rafo</IP> <d;v>DIV<ld~v> </bCildy>

</htiltl11>

iJ l[ar{jWlivQ:-2Jd.htm'l]

1'v1 aterial COM direilos aurora's

4.9

seletofj()uery •. e,ach(callback)

Ussmes o tSmilO< se l'retorjQuerypar:a des.ignar genericamente' um cbjeto OlJ ,anray de objetQs retemade per urn simples se4elor iQue~ eu per un ell1tad:eamenl.o jQuery.

Este mctodo destina-se a executa]" uma fun~ao toda vez qlle encontra 11m elernento constanee do conjunto procurado, Por exernplo: VDC,@: deseja percorrer 0 DOM e mudar a cor de fundo de eodos os divs do documento, Observe, a seguir, que se criouum borao para disparar 0 evento c percorreu-se 0 DOM usando 0> mcrodo @.achO para execurar amudanca de cor de fundo,

Exemplo:

<:s:tylle type:l:"t,ext/ess:' .me~di,a~"all ''':> p {cur$or:IPo1.nt,@r;: COllor:#OOf;}

div {wiidth:200DX; height:100px; bord'er:lp:x so,1idiOOO; lmal"'~in;2rQpx;1 <!styllr@>

<script tYI)e""l1uxt/jflivascri pt" sire",," .. /j{llJlery-1.2 ,.6 ,.js,"'></s'cript;:., esc ri pt type:~ "te.xt/j avasc r i pit">

S(doctl!lle!1lt). ready(fu."ctionO { SCbuttoll') .click(function() { $,( "d-ruv') .,.e,iKh(funct~onl(i) {

$ (thi s) . css (' backgrrolJ::~'Ir!I" i I red I ) ; D:

});

</scrip't> </head> <body>

<div>[)lV<I,~iv> <div>I)!V<lldii \I> <d]v>I)IV</I~li \I>

ebutten tYI!)e~"butt,ol1l">(o 1,0 ri r DIVS<llimtt:,ol1>

o scrip~ comeca procurando 0 botiio e a este atribui a tarefa de' disparar a execucao de lima fun~,a.o 810 ser clicado, Tal fll.1'l1r;aO pmellrs cada urn dos divs no. dOCUI1.lelUO e esriliza-os corn fundo na cor vermelha, Voce deve esrar se pe'fg:un rando: por que com pika r se basra decla rar $ (" d~ v'), css ( , b.ackground', ' red' )r? Cerro, essa simples d,edara~ao retia 0 mesmo efeito, contudo note que existe rum parametro i na fun~~o definidaemeecnn. Esse paramerro retorna urn conrador dos elementos encomrados.Essa fu ru;a,o fu nciona como um ~oopfor do JavaScri pt. No arquivo de exernplo, acrescenrou-se urn al,ert(i) para voce acompanhar 0 funcionamenro da fUr:J.llj;ao.

1'v1 aterial COM direilos aurora's

50

seletofjQuery •. length

Esta propriedade retoma 0 mimero de ocorrencios do elemento-alvo,

Exemplo:

o:;stylle titP:~"'''t,@)(tlcss:'me''[j;,a"na.ll "> P ,{cl.lrsor:l!l!oi nter;:}

di \I' {width :200px; he; gilt: loopx j. border: lpx solHiOOO; lmargin: 2'Opx;} </ S 'ty ~1 E!;>

escri pt type=!1text/jaV'ascri pt" sire",," •• /j'(jllery~l. 2.6.j s~';><;s,cript> <script type:=l1text/jallascript">

$(docwment). ready(fullc:tiionO { $('p').clh:k(functionO {

var nDlv ;; S (' dhr i) .. 1 e'lilgth j

S('<sparn:>Fiorarn enomtradas '+ nD;v .. H DIVs. </:S:P,!in> !) .. a:ppefl.dTo(" p') ; D;

» ;; </scrillit> </hea~> <body>

<p,)(l ii q;ue ,aqul para saber quantos di vse:xi stem n esse dOCI!.HDe:nto .<br /><ltp> <di v>OrV</di v»

<div>O:l\k/div>

<di v>DIV·</di v»

~ l[arqu'iv'Q:-l.,.U,lltml)

Esta fun~a.o retornauma dererminada ocorrencia do conj unto deelemenros-alvo, O,lrgumem:o poslfao refere-se a posicao da ocorrencia no conjunto selecionado, ~ 0 exemplo a segui fi. seleei onou-se Q tercel ro i tern da lista, NSi oesqueca que ern JavaScript a contagemcomeca em () (zero).

Exemplo:

esc ript type~ntext!javascri pt" SI"C~" .. /j(j!.llery-l. 2.6.j s!l'></sl(ript> <script typ,e=Utext/javascri pit">

$ (doclllment) • ready(functionO { $(' HI) .eq(2)., esse (Oilor' j I red')

)}:

<lhea~>

1'v1 aterial COM direilos aurora's

51

<body>

<ul:;.

dli>It@m 141 b dhItem 2.;;/1 h el hItem 3,</1 b <~Ii>It~m 4</1 i> d hltem 5,</1 i>

</1.11:>

.i) l[atq~iv'o'-2Jg . .html]

Esta fu~~ao desema-se a acessarelementos do DOM sememprego das Iuncionalidades jQuery; Pode ser usada para manipular direramenee 0 DOM e foi crlada para. resolver problemas de rerr -compatibilldade. Retorna urnarray de elementos,

Exernplo:

<stylle typ:a"'''t'Q)(tlcss,'!nte~,dia'''''a.11 ":;.

div {margiill1aop'x: 0: cQllor:red:l </5 tyll e>

<scri pt tYP@iI:"t:ext/javascript" 51"(;:::;" •• /j~lI,ery~1. 2.6 .js"></suipt> <51: 1'; pt '[ype",,"t:ext/jav'asc:ri pt"»

$(aocwment). ready(func.tiionO { functt on conte.udoP'ar'agraflos(p,) { var arrayClOllteudos = [ ]]:;

for (var l = 0; 1 <: p.length; h+) { arr'ayCol1Jte~dos • pUIS h(p [i] . i nne,rHTML) i

I(idiv!).text(array(owteudos.joirn(! - ~));

}

S ('bu tton") . c 11 c k (fu meti 0 nO {

cornte!!Jd'oPa ragrafo'$ ($.( I' P ') . !get 0 . trev,erse (»)i });

$C .reset") .click(furtctionO { I(rdivr).empty();

});

Hi: </scdp,t> </hea~>

1'v1 aterial COM direilos aurora's

52

<body>

<buttonl tYlpe","buu,otli">Rodarsc:ri Pt</butt,on>

ebu tto 111 t¥IP@",lbbuuoni' ell ass-" I'!lS@el>j1;I@sQt</buU:OIlI> <·Pl> P'aragrawo 1H111.<!p>

<Pi} Paragtrafo doi s ,,</P'}

<p<> P's.rigrafot: res .' </pi>

<dii'v></dllv>

s eleto'jQuery.ge,t{indJre)

ESC8 funs:ao rem a mesrna Iinalidade rna anreriore destins-se a acessar urn elemenro especffico do conjunto de elemenrosretomado, 0. paramerro lRdice indica a pos:h;ao do elemenro na array retornada,

s eletotjOuery .. in d e)l:(,o/~(jI}

Esra fu nc;a,o rerorna Or Indice do elemen to defin id 0' no para metro al '10. A con ragerr; comeca em 0 (zero) e, case nao exista lim ~ndlice para 0 alvo..a fun~a,rQ n toma Or valor -1., No exernplo a seguir, 0 script percorre e enconua todos os paragrafos do documenro e recolhe seus Indices. A dernonstracao, no exernplo se falz com urn clique em cada urn dos paragrafos,

Exemplo:

<stylle type:"'''tle)!t/css!' l1i:e~,d;'a:::::1!a.ll "';. div {margi~:20p~ 0;)

span {collor: red;}

p {cursor:IPo; nter;} </sty1Ie>

<sc.ript type=l1textljavascl"'l pt" sre-" .. /j~l,iIery-l. 2 .. 6.,js'"'></$lcdp't> <seri' pt type","lIextjj avasc ri pt"»

$(docullient). ready(functionO { S("p"}.click(functl0nO {

va.lr indli,cE! ~ SCp!).·~rnd(n:r(thi.s);

$("div!) .appendeO indiice deste par,agrafu e:: <SpaJ1> ~ + indi ce + '</span><br I> '); });

$(' .res@t!).c1ick(function() { $,( ·'dilv") .. emptyO i

});

}); </scdplt> </head>

1'v1 aterial COM direilos aurora's

53

<body>

<buttonl tYlpe","butt,otli" class",IHlieset">~les,et<lbuucnl><br I> <b>Cli q,llll! I@m cada um des p.ar.agraf;os. aha4 XO <.or I,.·

palra revelar seu ~Mi CE!</b;>

<p,>ParagrrSifo 1H1ll, </p>

<p<> P'arigrafo ,do'l S .' </pi>

<p>Paragraifo tl'e.s . </PI>

<div><:/d-mv>

.i) l[atq~iv'ol-2Jii .html1

jQuery .. n:o'Coli'lflictO

ES[<l flln~ao e utilizada paraevitar conflitos da blblioteca jQuery com ourras bibliotecas usadasno mesmo documento e que fazern uso do alias $,

Existent varias bibliotecas JavaScripI dispontvels e, Sf! voce optou par usar jQuery, sem diivida fez uma escolha in religente e nao es [Ora im pedido dell tilizar outras bibliotecas em um mesrno projeto, desde que tome alguns cuidados para evita r con A h05.

Confliaos ocorrern porque difereliltes bibliotecas, com seus drversos metodos, usando uma sjntaxe comnm para invocar silas funcionalidades (0 ,;:iJias $ ou 0 consrruror 10)) acabampor permirlr que as dlferenres biblioreces tentem interprerar 0 mesmo codigo, criando urn C~I!OS como este: a biblioreca A tentando interpretar uma flUl1~ao criada para a bjblioreca Be vice-versa,

Existern diferentes [Ie,cnicas para evitar conflitos e a rnais simples e escrever codigos US3rtdO 0 prefixo jQuery no Ingar do alias $,. Essa solucao, apesar de simples, tern a. desvantagem de aumentar omimero de caracteres a drugitar e ,e facil perceber que furs exiglr rrabalho extra; principelmenteem scripts extensos A sintaxe geral para esse solu~i.o e mostrada a seguir:

«scri pt src .. "olJtra_bibHolLeGL jsij::.</scrii pts

esc ri pt type .. " text!j avast ri pt" Slt,,,", ./jl~l.iIery-l. 2 ,.6 ,.jsc"'> </slcr;pt>· <script tYpe="tex:t!javascri pit">

jlQ~ery .noC,GnAic:tO;

/I Scd pt para bi b H oteca jlQuery usa.il1do jQuel'YO j(~uery(dQcl~me!1t) .lready(functi'onO (

jQuery(!1 pi) . showO ; jQuery(~diw').css(~color'i 1red'); jQuery(, ... ,.;

});

1'v1 aterial COM direilos aurora's

54

1/ Segu:e scr-ipt para oatra hibl ieteca usendaal ias .S{) $ ( 'Inome-ii I~ ~ )I., showO ;

$(". .:

</scriprt>

A segunda solucsoccnsisre em personaljzar urn alias para uso proprio. Cracas a funcionalidades nadvas da biblioteca, voce pede criar 0< nome que hem entender para substiruir 0 alia: native S. Assim, e possfvel adotar sincaxe taIDS como as mostradas a seguir:

Smaujor('div').hide();

Sca.1' 110.s a 1 b:erto(1 p! ) . s.hm~O : $j ('spanm). fadeInO i

o primeiroe segundo exernplos f'iao sao uma boa escolha para urn aHas, porus deve-se procurar sirnplicidade e reducao de digj[ao;~i.o, 0 ldtimo exemplo e bern melhor e <0 rnais simples possfve], pais se escolheu uma letra apenas para alias. Veja a seguir a sintaxe para sua cria~ao;

<script slrc","Ol.n:rLbiMi ouca,js"></scr1 ~t:>

·<script ·type",,"uxt/javascri pt" SIl'C"''', ./j{lI.iHi!ry-l. 2 ,6. j.s."> <bH:ri P't> esc ri pt type,., "text/ j avasc ri ,Pti'>

'" ar S.j ;::; j Que ry , no Con ~iict 0 i

II Script [para. bibl iotece jlQuery Lls.('jmdo ijO $j (do(lijJllf!nt)" ready(fun.c:d,onO {

$j (Jp'!) .. s~OI'lO i

$jCdiv"). .. (ssCcolor·11 I red") i $j(" .. ;

})I"

. I'

/ / SegtJe sc-i pt ptl..i'tl. euera bibli oteca usandoal bs 5,0 $( i#nQme-iild[H). showO;

$(.. ... ;

<Iscri~lt>

A eerceira solucao perrnire-lhe usar 0 alias ~ tanto para a biblioteca jQuery como para outra biblioreca, Nessa solucao, voce cria urn script que hmciona como 1.:1 ma especie de container para seus ccdigos jQllery e insere os scripts da outra biblioteca fora desse container. 0 container nada mais e que uma funcao definindo $; como jQuery; 0 exemplo a. seguir esclarece essa solucao:

1\r1 aterial COM direilos aurora's

<5C ri pt src .. "ou tra_bi bl i oteca. j s 'I> </:serii PI:>

< S C 1"" pt typ e", It IJ:@xt/j avas c r; pit" s Ii'C"''' •• / j {J IJU! ry -1. 2 .6.,j sU'> </s[c ri' pt» esc ript t)lpe:=:"tE!xt/jav.asc:ri pt"»

j[QLJE!lry .tlIo(l~ilni ctO: $(document). ready(functionO {

(funct'iol1(O {

/I Script [para hi bl toteca j[QUI:lII"Y usaadc SO ~,( !p") ,S~OWO:

3,(! dilvi[) "~,(SSt I color I'. I red i)1; $(,., ;

}) (jQuery): )h

Il S,egu:e s;,eri pt p,ua outra btb l ioteca usandeal tas 5;0 $( l#nollle-~I~'"), showO;

$(" .. ;

Paraurn solido entendimento de seletores, e necessario que voce esteja familiarizado com a arvor(! do documento eo consequente relacionameneo entre os elementos que a compcem. Naoe sem raza,o que se ,emprega 0 termoarvore do docurnento e a melhor rnaneira de se eutender seu funcionamento e relacionamentes e fazer analogia [com a onhecida arvoregenealogica examinando 01 grau de paJentesco entre os elementos de urn docurnento.

A terrninologia tecnica de referenda [1105 lnrer-relacionarnentos na ~!rVi)r,e do dccumenro utiliza os mesmos termos usados em arvore genealogica, Na .al·vore de u m docu men eo, existem elemen tos-pa I., eletne nros ancestra is, elemenros-fil ho, elemenros-Irmsc e assim por diante,

Considere urn documento com a seguinre rnarcacao:

<body>,

<diiv i d!=!'t,t}po'~:> <hl>emptresi</hl> (~l i'd","lliV">

<lii><a hrd="#">Link l</a></l i> <:1 h<:a href:"#">l iil1k 2</a></1 i> <lii><a href="#">l'iil1k l<la> </1 i>

</ub </div>

1\r1 aterial COM direilos aurora's

56

<diiv H!;"'priIOCipal") .:h2> TitUllro</h2>

<p> •... paragrafo <@m;.idlircro</@i11!> .•. <lIP> <h2> rt tul,o<Jh2>

<ell 1 Gckquote><pi> .... c1 tat;ao ... " </p></b ~ eckquete-

<ldiv> <hI" I>· </bGdy> </htJrnh

Veja.na tigura 21,0 diagrama representanvo da ainrore do documento.

IFI~gum 2 .. 1 - ANora do doeumento.

Veja .. alguns exemplos da terminologia que se aplica aos elementos mostrados na arvore do documento:

• body e tmcestral de todos os elementos, 'Iodos os elementos .sao descendentes de bo~y"

• ul e ancestral de H e dea. H e a sao descendentes de ul.

• 1; e elemento-fillw de 1.11. Ill' It eJem,ento-paiae 1 i,

• b'lcckquore e irma"o de p e tambem rem urn fmlO p,

• b 10 ckeuote e irma-o adjacel1te de 1hZ

• em e p nne sao irmaos ..

• 1 i nao e filho de div ~ mas e seu descende nte.

A tabela 2.1 mostra como 0 relacioaarnento entre elementos nil arvore do documento deterrnina a sinraxe do seleror, Os rermos serao Irequenternenre citados oeste capitulo e seu enrendimento ,e fundamental para a cornpreensao do funcionamento dos seletores,

1'v1 aterial COM direilos aurora's

51

Iobelo 2.1 - Hemenlos no arvol"@ do docemento

ife.rmo

Oesceade nle· oi reto do elemenlo pal:> flIho

Rela,cionamernto Slnta)le ;adol;ada

A+8

E!emsnJio-pai

E~emenlo-ilHho

o dascendenta dir;eto do elemenl.o p8i) mho

2 .• .2.:11 Seletores :simples

Seletor de i d: acessa 0 elemento ClJ.1~O valor do .. uributo,d tenha sido especificado noa rgu men to,

Exemplo:

<Sity 11 e tyPl(:l="tl@xtltss," med ta=" a IT'>

di v {wii dtl1 : 200px; hei Qlilt: lOOpx;. borde r: lpx sol; d #000 i lli1ar,~i n : 20px ;:} </stylle>

<script type","textljavascri ptl' 51""''' •• /j(]lJIery-l. 2 ,.6,.js,"'></saipt> <script type~nt:ext!]a\lascri ptl';l'

.$ (docl!Jrnent) • ready(fu.nc:t~onO { S(,buttol1l) .,elick(fu(1ction() {

$,( I #dii ferente I) .css(' backqround", II red") ; });

});: </scr1IH> </heaih <body>

<bu tten t)'l~e='"buttl'ltli">V{H'lme 1Iha</buttoli,> <div>DIV</div>

<div>OIl,k/div)

<di v i d="di f,e!"ente'~'>D:[\t'</rd tv>

,iJ l[arqlJlv'o;-2.2.1a.htiml]

Nesse exernplo, urilizou-se 0 seletor l,dS!('·#dif(![reRte!) paraacessar 0 div 3.0 qual sera anexado 0 componamenco defil'llid!o no script (mudar a cor die fundo para vermelha),

1'v1 aterial COM direilos aurora's

58

Seletor de classe: acessa os elementos cujo valor do a tribute elass tenha sido especificado no argumento

Exemplo:

<.s:ty 11 e tlfpe,l!il"iI:,e)(tlc.ss;"rn:e~di .a~lIa.ll ",.

dtv {,yidt:h:20:0p'x; heig.ht:lOOpx: border npx solid #000: Imargin:2IOpx.;:] 4sty~le>

<scri pt 't)lpe",lItext/jaV'ascri pt" SIi'c~" •• /j~I.!Iery-l, 2.6 .js,"></slc,riPt> esc ript type",ltuxt/javasc:r; pit;'>

$(oocument). r@ady(functionO { S('buttOiil') .,click(funn;on() -{

$,( i • d~ ferente i ) ,c:s:s(' ~(lIc:kgroundi I' II red n) : });

Hi: </script> </head> <body:.

<b~ ttcn tYlpe~"butt(mu>Ve:rlme 11 ha</butto.iIt,. <I~i 11 class» lid; feren,te"'>DIV</dliv>

<oi II c'lass="di fereliite/~>DIV<ldli",> .::div>Ol\k/div>

~ l[a.l1IW1ivol~l.l .. l b.htm II]

Nesse exemplo, utilizaram-se urn botao para disparar 0 evenroe 0 seletor de classe :S('! .diferente·) paea acessar os dois divs, os quais sera anexado 0 cornportamento defiFlido 1"'10 script (mudar a COl" de [undo para vermelha),

Seletor de elementos: acessa todos os elementos especificados 110 argumento,

Exernplo:

<S:ty'l~ t)'P~ .. "texr/css" ml1!',dia .. "al 1 iii:>

div {wiidth;200px; height:100PXi ~ord'er:lp:x 50,lid #000; mar'9in:20f}x;] <lsty~le>

<script type="textlj aN as c ri pt" site:" .. /j(]llI'ery-1.2 .6.j.s"I></suipb

.' - n -_ '''' _ • _ II

<sen pt typ,e=li:ex.t javascr: pit >

S(dotwm~nt). ready(fU:l1ct~onO { S(,buttOI1l') .,click(funcrionO {

1'v1 aterial COM direilos aurora's

59

$(' div") ",(55(' backgroulild" I 'red'); });

D; </scriprt> <{head> <body>'

ebuttnn tYlpe= "button" >Veril11e 11 ha</~utt{m> <div:>DIV<!,dliv>

<d~ v>DIV</I~I'i \I>

<di'v>mv</,dli v>

-il1[arqllliyo:~2.2.1 c~html]

Nesse exemplo, utilizaram-se urn batao para disparar 0 eventoe 0 seletor de elemento $("dh") para acessartodos os divs existentes no documenro, os quais sera anexado >0 comportamento definido no script (rnudar a. cor de [undo para vermelha),

:$(setetor 1, sele/all, se/etor 3" ••. )

Grupamel1to de seletores: acessa um agrup31nento de seletores, 0 ,ilrg,umento e urna Iista dos selerores a aeessar,

Exemplo:

<styli e type="'1!:lextlcss;F! me~,di i=" a 1.1 H>

div {~~iidth:200px; hei~ht:l00px;. bord'er:lpx solid #000; Itllar,~!in:2rOpx.;:} .::/styh!>

<script type="text/javasc:r;pt" 51'(='1 •• /j~llIery-l. 2 .. 6 a, js,!"></srcript> cscript type","textfjavasc:ri piJ:">

$ (docl!Jiment) . ready(func.t:~onO {

s C' but.ton") .cl i ckr(ful1;ct'i cnf) {

~,( 'p, .d~frerente, '1 ~'). ess (' ba.ck9Jround" 1 'red "); });

}) ; </scriprt> </head> <body>

ebutten Wlll'e="buu.on">Venme 11 ha</buttcm> <'(~iv>.Dl\k/di:v>

<p>Texto de um pall'.agra:fo</p>

<di 11 cl ass="di ferel1lte~~>DIVcom [1 ass,="~di ferentelit,</dhl) <p clla.ss",,"outra"> falragrafro com das,s","oUJtra"'</pr)

1'v1 aterial COM direilos aurora's

60

<uh

<1 hltl'l1l1 :1</1 i::. <l blt@tn 2~<I11i> .;;lhItetn 3</11'1:;.

</uh

Nesse exemplo, urilizaram-se urn botao para disparar 0 evento e 0 grupo de selerores ~,' .diferente e 1i para aeessartodas as instancias dos elementos as quais sera anexado oca,mponan'ienm definido no script (mudar a cor de fundo para. vermelha). Note q[ue 0 paragrafo ao qual se arribuiu a classe outra e alvo do seletore foi estilizado, pois a presence do nrributo class nt'iio altera a condilfao do de-meum de ser urn paragrafo.

2..2.2 Seletores 'COl1p'ostos

Seletor composto eaquele constitufdo pela combinacac de dois ou mails selerores simples, Acombi.l1a~ao entre seletores simples para criar LUll seletor cemposto segue lima sinraxe propria e e feita com 0 emprego de rres sinais de combinacao como descriro na ta bela 2 .. 2.

TobeJ!J 2.2- Sinols de cornbinccec

S:illla:1 de combina~ao I Exem;p'lol ilustl'aliv,Q INota I

IEspa~ em braneo div p em Obrigalorb usaf um ,oumais espa!fOSi ,en(re selel:ores

Sinal de rmaior ",."

dill ,., P QU div>p

Espa~amenlo facultativo entre, seletores

Espacamento facuUativo ernre seleDDres:

J

Acessa 0 elemento descendente do ancestral especificado no argume nto,

Exemplo:

<.stylle type","t,extless" medi a="a.l 1 ''',.

div (wiidth:200pXi he;ght:l00pXi bOlrd'er:lpx 5011id #000; It!lar'9,in:2<Opx;) </5W~le)

esc ript t)lpe .. nl!:ex:t/javascri P'l:H SIi"""" •• /j'~lJIery-l. 2 .. 6 . .j.s"></s,e.ript> esc I'i' pt type",," text/] avasc rl pt":>

1\r1 aterial COM direilos aurora's

61

$ (doclllment) • ready(fullctionO { SCblllttGI1I) .,eliek(flllnction() {

$,( ! d~i v span"). ess (' baJC.~gN)und I" ! re:d ') : });

});; </scdpt> </head> <body:.

<biJttoJill tYIP@='"'buuon">VEmtl1@lha<lbuttonc<div>,

<p[)P'aragrarofilho do dii\f c(lm <sp,an>texto</span> man:,ado 'com sp'an</p> </div>

<p,>ParagratToHho de body >corn <span>t,exto</sp'an> mar'cado ('Ilm span </p>

esse exemplo, utilizaram -se urn botao para d isparar 0 even to e 0 seleror ancestral descendente para acessar os elementos s,pan descendentes do di", (neste exemplo, apenas urn elemenro span) aos quais sera an ex ado 0 comportaruento definido 1110 script (mudar a cor de fundo para verrnelha) Note que os dais elementos span coastanrcs do DOM sao 61hos: de urn paragrafo, mas somente 0 primeiro e descendente do div,

$ (pai > litho)

Acessa 0 elemenro-filho do pei especificado no aJm:gumeow.

Exernplo:

,<sw1Ie type","iI)ED<t/CSS.i1 me~.di.a",jja" >i!>

div {widtlt!;200pxi height;lOOIlXi bord'er:lpx so,lid #000; Ima.ri9in:2'Opx:;'} </stylle>

<script type~nll:ext!]avasc:ri pt" SIi'~" •• /jqlH;!<ry-1.2 .6.js"'></sai'Pb <sed pt type=!!text!j avast ri pt!'>

S(document). ready(fullctilonO { S(,buttol1!) ,·c1ick(fum::tion() -(

3;( • dli v > span"), cs:s( ~ olalckground Ii·' red n) ; });

». <./scdpt> </head> (body>

eburtcn tYlpe"" "button" >V(!!rJme 11 ha</buttM>

1\r1 aterial COM direilos aurora's

62

<diiv)

<1»Paraglrarofilho do diiv com <span>'t.elfto</span> marc,ado ,com SIl'an</p> </0;\1;-

<.p,>P'aragrawo mho de body ICom <span>tIE'Xl!,o</span> m'aricado c,om span <il»

.i) [[a.rqlJivo,- 2.1.2b. htlllll]

Utilizaram r -se urn batao paul disparar Q evento e 0 scjeter-pei-filho para acessar os elementos span filho do div (nesse exernp]o, htl duas ocorrencias do elemento span) aos quais sen! anexado 0 comportarnento definido no script (mudar a cor de [unde para vermelha), Observe que a mal!'c,l~ao usada nesse exemplo ,e a mesma do exemplo anrerlor, no entanro como nao ha elemenro span 61110 do div - S3.0 filhos dos paragrafos -" nada acontece quando se clica 0> batao. Caso tivessc usado 0 seletor S( 'IP > span '), os dais elementos spa.n seriarn alvo do seletor, Fa~a uma copia do arquivo e altere 0 seletor como sugerido,

Acessa 0 elemento proximo que se segue imediaramenre ao elemenro anterior a,

<stylle type"'''It,e:<t/css:'' me~dia",na.ll 'PI>

di v {wi dtl:! : 200px i hei ght: lOOpx; border: lPll soli d #1)00: rmargi n ; 2'Opx ;] <!sty1e>

<sc.ript type="t@xtljavasc.ripit" SIi"!'::" •. /j~iJjery-1. 2 .. 6 .. js,"'></s:c.ri pb <script type=nt@xt/javascr;pt">

$ (ciOCl!unent) • ready(func'ti on 0 ( SC'blllt'tonl) .,elick(fuRction() ,{

$(fdtv + p').css(fbackground', 'red1): }):

l)I" .IT I'

e/script» </head> <body::.

«button tYrpe","butt,ol1i">venme 11 h ae/bu tt 0 111> <p,>Paragrafoantes dOl d1iv</p>

<div),

<p,)Par'agr.9Jro Hhol do dliv</p> </div>

<P'> p'araglrawo que se se.gu:e ao di v</p> <pi)P'aragraro I~ue segl,J]l'!te</p>

1\r1 aterial COM direilos aurora's

63

Nesse exemplo, utilizaram-se um bota.o para disparar 0 evento e 0 seletor anterior proximo para acessar o elernento Pi irnediaramenre apes 0 div ao qual sera anexado 0 comportamento definido no script (mudar a cor de Iundo para vermelha).

:S{,anterior ...... irmaos)

Este e urn seleror prevlsto nas CSS 3 que acessa rodosos elernenrossoses e que se seguem aoelemenro anterior.

Exemplo:

<stylle typ~"'!;t,extlcss:tnte.di.a,,"aJ 1 ~!>

div {wlidt:Iil:20:0px; height:100px; bord'er:lp:x SOtHd #000; mar~in!2UPx;} </stylle>

<script typ'e~"textl]8!vascri pt' S!iC~". '/j~i.iH:ry-l. 2 .6.jS"'></SA:ript> <5 c ri pt. tYI)!!=" IJ: ext! j avas c: ri pt ">

S(doc~m@Rt). ready(functionO {

$(' I1btn-llerm'el ha I) .eli ck(functi'onO { ~(!h2 - ~I).css(!back~roundt. ~red~); })i

D; </script> </head> <body>

<button type","ihuttCin"'>Velrme1 ha<./buttolil> <p>Pa.ra.glrafo antes do cabecalho h2<./p'> <h2>Cabe~allho In2</h2>

<p>Pdrlu!llro paragrafo allos I) tCabE!l;a~lho h2</p> <p>S@g;ul1do Ipal"-,aglrafo apos, ,0 cabe\;alJh.o' hl</p> <div>DIV,</div>

<I» lelrcei rc Ila ragl"a.foap6s 0 tCabe~a.~1 he 1'12 <./p>

<div.>

<p>Pa.lra.91ra'fo dent 1"0 de !!1m div<!p> </diiv>

.i) l[arquhtOI~2.2.2dJnmll]

Nesse exernplo, utillzaram-se urn borao par,tJj disparae 0> evento e 0 seletor anterio';' irma.o para acessar todos os elementos p irmao que eS[3.0 apos 0 cabecalho 112 e aos q)uallis sera anexado 0 comportamento definido no script (mudar a cor de Iundo para vermelha),

1'v1 aterial COM direilos aurora's

64

Note 0 seguinre:

.. 0 paragrafo ames docabecalho 1hZ nao e selecionado, pois 0 seleror e para elementos posteriores a Ih2:.

• 0 primeiroe segundo paragrafos apes h2 sao selecionados porque sao filhos do mesmo pai (0 elemento [body), portanto irmaos,

• 0. elemenro div que se segue nan e selecionado, pois 0 seleror e para paragrafos,

• 0. panigrafo que Sf: $'e,gue: aodiv e selecionado, pols, efilho de bO~yjesta apes h2 e, ponamo, ,e irrnfio dos paragrafos aruerjores,

• a. panigrafo dentro do di II que se segue nan (~ selecionado, pois nao sendo

fill d b d (' fin -l. -") - e : - d .' £, "

____ loc_eo,.y e L~_W ae UUl! dilV l' nao e mnao aos paragraros anrenores,

2,.23 Seletores ~ FiHros bas'i(tOS

Denorninam-se seletores fileros basicos as seletores do. €ipo pseudosseletores que se destinam a filtrar urna condicao particular de urn seleror simples ou composro,

5 ele,tor.fi rst

Acessa a primei ra ocorrencia do conj unto de elementos selecionados por .seletor.

Exemplo:

<script type~nt:@xt/javascri pt" SIr'C~" •• /jqu,e:ry-l. 2 .6.js'''></s'c.ript> escript tYlle=!!li:ext/javascri pt">

S(docl!lmel1lt). ready(fullct~onO {

$(' ~bt:ii'I-vermel hal) .eli ck(func,tionO {

S' C lii :first:'i), cssCbac~9r,ound!" I red') ; });

})t ,.

_ ,1

,</scdIJlt> </head> <body>

ebutten tYlpe", ,fibuuoni'>Vertme 11 ha<;/outtone><uh

dh"lrime-i re itern</llh

1\r1 aterial COM direilos aurora's

dlbSegulild'o 1tem<j1i> cl i> Tercei 1'0 item.:!ll i> dlhQuailrt,fj it@In</1i> dhQulrltro item<i1 h

</LJh

,.i.l [[a:rquivo~2.2Ja,htmll]

Nesse exemplo, udlizaram-se uru botao para disparar 0 evento eo seletor :,first para acessar to primei ro item da lista 8:0 qual sera anexado 0 comportamenro definido no script (mudar acor de fundo para vermelha),

sele.rodast

Acessa a ultima ocorrencia do conjtmto de elementos selecionados por :se7etor.

(script type="text/jav,ascri pt" slre=:" .• /j~l.lIery-1.2.(I . .j.s"'><./sreript> escri pt tYIJe="lrext/j avasc ri pt ">

$(aocument). ready(ful1ct:~onO {

SCCbtifl-vermel ha I) . eli c:k(functionO { 1('li:~a5t'),cs5('background'i 'red1)i

});

H: «sed pt»

<thead> <body>

eb LJ1; to 1111 tYlpe"," b utto R jj >Ve me 11 ha,</ bu tt on> <ul>

.;;;lbP'rimeii ro itelll<llli;> ,dli>Segundo i tem</li> dli>Tercei ro i tern<Jllh d ;,'QlIililftli) i tem</l b cl i>Quri nto item</l b

</tjh

Nesse exemplo, utilizaram-se urn batao para disparar 0 evenro e usamos 0 seleror : Iast para acessar Or ultimo hem da lista ao qua] sera anexado 0 compertamento definido no script (mudar 8J cor de [undo para verrnelha).

1'v1 aterial COM direilos aurora's

66

seleton :not(sele'tor2)

Este e urn seleror previsto nas CSS 3 que acessa 0 C011jUflEO de seletores selet,orl, excluindo as instancias definidas ern sehu:orZ'.

Exemplo:

<script type~"text/]ava.scri pt'' SI'C~" •• /jqll,ery-l. 2,,6 .. js"l;..::/suipb <5C ri pt type","t:ext/j avasc ri pt I';>

$ (doclllment) • ready(functiionO {

$(' ~btIHfe~rm'el hal) .dick(func.tionO {

$.( i 1 ~ : not(l 'i : ~1i'S,t) I) • ess ( 'bae k.ground I. 'I red i ) :: });

H: </lcril)lt> </head> <body>

<b~ttoli1l tYI~@="bunon">Verlm@ lIha</bIJttont> <uh

di>"lrimeiro item<Jllh, <: lhS e:gu 11 do i t em<;/1 i;:<JI bTerceii re item.::!ll h dl i>Qu.1lrtloi telll</l h <~i >Ql.ili ntlo; tern.::/l 1>

</ul>·

~ l[arql!llivol~2 .2J(·.html]

Nesse exemplo, utilizaram-se um botao para disparar 0 evento, 0 seletor 1 i para acessar moos os elementos mEens die lista e 0 seletor .not para excluir 0 primeiro item da lista ao qual sera anexado 0 comportamenro definido no script (mudar a cor de fundo pa.ra vermelha), Todos os hens da lis'ta serao seleciouados, mien os o primeiro {rwt(H ::first).

1'v1 aterial COM direilos aurora's

61

seletor.even

Este e urn seletor nao previsto 1i13S CSS e exclusive da biblioreca, que acessa as ocorrencias de ordern par do conjunto de elementos selecionados pOI s·~lretolr.

Exemplo:

<script type~"text/]ava.seri pt'' SI'C~" .. /jqllrery-l. 2,,6 .. js"I>4suipb <5C ri pt type","t:ext/j avasc ri pt ";>

$ (doclllment) • ready(functiionO {

$(' ~btIHfe~rmrel hal) .dick(func.tionO { '(ttr:~~Qni).css(tbackgroundi, ir@d!); });

H:

</ lcri !l't> </head> <body>

<b~ttoli1l tYI~@="bunon">Verlm@ lIha</bIJttont> dable~ borlder","!";:.

<tr~'"

.:::tdf;.Cel ullai ndli ce (k!td> <!tF>·

<til'>

.:: t:di> Ce·l ul ai ndii eel <ltd:. </n>·

<.til'>

<td'>Ce·1Uilaindlice 24M> </tli>

<[Ir>

< t:di>Ce·' UI1a ·i ndli ce 3<:ftd:> </tli>

<tID

<tdl>OHYllaJi ndii ce 4</td> <It!'>

<ttable:>

·.i)[[arql.liVQr-2.2Jd,hlrnl]

Nesse exemplo, udllzamm-se urn botao para dlsparar 0 evenro e 0 seletor tr: even para acessar todas as linhes pines da rabela ais quais sera anexado OJ comporrameuro definido no scrip [ (mudar a corde fundo para vermelhal.Lembre-se de que, na linguagemjavaficripr, roda contagern comecaem O (zero)el em consequencia, as oeorrencias pares sa08i prirneira (Indice OJ, que e concado como selecao par), a tereeira ({ndice 2), _ quinta (indke 4), e assim por diante,

1'v1 aterial COM direilos aurora's

68

seletor.odd

Este ,e urn seletor narD previsto nas CSS e exclusive da biblioceca, que acessa as oeorrencias de ordem Impae do conjunro de elementos selecionados por se'~ertar.

Exemplo:

<script type~"text/]ava.scri pt'' srce" .. /jq1l1ery-1. 2,,6 .,js"l;..::/suipb <script type","t:ext/jtlJViScript";>

$ (doclllment) • ready(functiionO {

$(' ~btIHfe~rmiel hal) .dick(func,tionO { $,(itr:Gddi),css(iba.c~glroundt I ilre,dil): });

H:

</ lcri !l't> </head> <body>

<b~ttoli1l tYI~@="bunon">Verlm@ lIha</bIJttont> dable~ borlder","1";:.

<tr~'"

.:::tdf;.Cel ullai ndli ce (k!td>

<!tF>'

<til'>

.:: t:di> O§'l UllraJi ndii eel <ltd:. </n>,

<.til'>

<td'>C.e'lUilaindlice 24M> </tli>

<[Ir>

< t:di>Ce" UI1a 'i ndli ce 3<:ftd:> </tli>

<tID

<tdl>OHYllaJi ndii ce 4</td> <It!'>

<ttable:>

,.i) l[arql..liVQr-1.2J@.html]

Nesse exemplo, uollzaram-se urn borso para disparar 0 evento e 0 seleror tr: odd para acessar todas as linhas fmpares da tabela as quais Seta anexado 0 comportamenro definido no script (mudar a cor de {undo para vermelha), Lembrese de que) na linguagem JavaScript1corla contsgem eomeca em 0 (zero) e, em consequencia, as ocorrencias Irnpares sao a segunda (fndice I), a quarta Hndice 3), a sexta (indioe 5)11 e assirn por diante,

1\r1 aterial COM direilos aurora's

li9

seletor.eq (lndice)

Este e urn seleror nao previsto nas CSS e exclusive da biblioteca, que acessa a ocorrencia de OrdemTf!(;Uc'e no conjunto de elementos selecionados por se'~etQr,

Exemplo:

<script type .. "text!javascri pt' SIi"" .. " •• /j'~I,iI,erY-l. 2,,6 . .j.s"></s,cript> <script type","uxt/javascript">

S(dOCIlIIIi€!l1It). re,3dy(func:tilonO {

$ (I ibtll-ve!rm,e 1 ha' ) • c ~ i ell: (funct i on 0 {

S( !td;@'q(4) '), css(!b~c~gr,ou!1d'" 'red'): }) ;

Hi

</ sc ri Ilrt> </heacb <body>

<bu rten t:Ylpe- "buuont>Veflll1e,ll ha</buttou> <table' border.::::"l">

<u>

<td>td O</td> <t~>td l<ltd> </tlr>

<t:Ii>

<t~> td :2</td> <il:cbtdJ</td> </tlr>

<til">

dGi>td 4</lJ:d> <td>tdS<ltd> </tlr>

<,til">

<tdr>td 6<1td> ddr>td7<ll!d> <ltlr>

</table,>

,i) l[arq~hl'o~1.2.3f,btml]

Nesse exemplo, unllzaram-se IUIll batao para disparar a evento eo seletor tdl:

:(4)'-" i '<j " ,', ",- 'I- la ds ; b la - ,,0 -ID' a, 1--' r- 0 ' "'":0 ," 0-1' ", 0 d

e(l , par4, acessar a cem a _ a ta _ e (, que _ CLJ.k CI! qua_ ra p _ Sl~a _ n_ conJunt __ ,as

eelulas selecionadas a qual sera anexado 0 comporramenro definido no script (mudara cor de fundc para vermelha), Lernbre-se de que; na linguagernjava'icript, roda conragem comeca em 0' (zero) e) em consequencie, a quarra ocorrencia corresponde ~,quinta celala.

1\r1 aterial COM direilos aurora's

70

Este e urn seleroe nao previsto nas CSS e exclusive da biblioreca, que acessa rodas as ocorrencias do conjunro de elementos selecionados POf sel'et"or cujo indice e rnaior que 0 fndice dehnido no paramerro lndlce.

Exemplo :;

escrtpt type="Ii:€:!xt/java:scri pt" SIiC=," •• /j~lI,ery-1. 2.,6 .js "'>-</su;'pb <script tYPQ;;Utext/javasc:ript">

$ (aocllI'ment) • ready(funcdonO {

$(' #btl1-ve:rmlel hal) .c~; d::(f'unctionO {

S{' td: gil: (4) ') , C:SS (' bac~g r,ound' " 'red'); }):

~')I .,

Jr. II

</script> </head> <body>

<bu ttonl tYlpe="butt,onU",Venne llha</buttcJni> erab'le bor,der='!1">

<tli>

<t~> td O</t(h <t:d>td l</t~h </tlr>

<til>

ddl>td 2.:;ltd> <td>td3<ltrd> </tlr>

<til">

<td>td 4</td> ddl>td S</i:d> </tr>

<til'>

d~>td 6<jtd> <tdl).t'd '7</td>

<In> <ltab1 e-

,~ l[arq~iy'o:~2.2Jg.htrlill]

Nesse exemplo, utilizaram .. se urn botao para dispasar 0 evento eo seleror tdl: gt(4) paraaeessar as celulas CU]IO Indice e rnaior que quatro no conjunto das celulas seleclonadas, as quais sera anexado 0 cOn'Tlportamento definido no script (mudar

1'v1 aterial COM direilos aurora's

11

a cor de fundo para vermelha), Lembre-se de que, na linguagem JavaScdpt~ roda conragem comecaem 0 (zero) e, ern consequencia, a quarta ocorrencia corresponde ,;) quinta celula

seletor.:lt(i:n dice)

ESEe e urn seletor 1180 previsto nas CSS e exclusive cia biblioteca, que acessa todas as ocorrencias do conjunto de elementos selecionados por selet~r cujo Indice e menor qu.e 0' Indice definido no paramerro iild'ice.

Exemplo:

de ri'pt type",UUxt!38iVascri pt" SI'I:"''' .. /j{ll.!ll'!ry-l. 2 . 6 .. ,j.s."'> <Jslcri'pt>, '<$C d pt type","text/j avasc ri pit!'>

$ (dO(llJlllellit) • ready(functiicmO {

$(' libtn-vermel ha') .d'i ck(functionO { l(rtd:1t(4)!),css(!backg~ound'~ !red~); });

i» </scr1prt> </hea~) <bad'y>

ebu tten t:YIPE!~"butt(m">VEmme 11 ha,</button> etabl re: bl]md~er=!! 1 !')

<tr>

dah>td O</td> dab,tlll l<lll:d> </tlr>

<til'')

<tcbtd 2</lJ:d> <td~td 3</td> </tlr>

<til'>

dOl>td 4<ltd> <:td>td S</td> </tlr>

<tr>

<td>td 6<lli:d> <1tdr>t:d '7</td> </ttr>

</table'>

.i) l[a.rqmliv'o-1.2.3h.htmll

1\r1 aterial COM direilos aurora's

72

Nesse exemplo, utilizaram-se um bota.o para disparar 0 evento e 0 seletor td: 1 t(4) para aeessaras celulas cujo Indice ,e menor qMe quatm no COl1jUll.lI£O das celulas selecionadas, as quais sera anexado 0 ccmportamento definido no scripe (mudar a oar de fundo para vermelha), Lernbre de' que', na HnguagemJavaScript~ eoda contagem comecaern 0' (zero) e. em consequencia, a quarta ocorrencia corresponde a quintaeel ila.

Este e urn seleror nao previsto nas CSS e exclusive cia biblioteca, que acessa rcdas as ccorrencias de' cabecalhos de qualquer nfvel, ou seja, eodos os elementos hi a~e h6.

Exemplo:

esc ri'pt type="It12xt!j3!vascri pit" 511(=" .. /jl:1l1,ery~l. 2.6 .. j 5"'></s,cript> <scri pt type;:;"tex:t/javascri pt">

$(do(ument). ready(ful1c.tionO {

$C~btlil~\le:rm'el ha') .eli ck(runcti'onO {

~('; header '). css,( 'backgr(rund', 'red') i. }):

})Ii:

</ scri !lIt> </head> <body>

«button tYIPe",,"buu.oR">Vermellha</button> <hbcabe~d!lllo nivel 1</1'11>

<p)texto ,de urn paragJrSiro</p>

.;: h h cabel;alllo n i 'Ie 1 2 ,,/Ilii:>

<p>texto ,d~ um p3l'agfatro</p> <h3>cabe~/a!lho nive13</h3·>

<p>teX'to de um par.a,glrafo</p>

.; h 4> cabe!;al ho n i ve 1 4 </1t4>

Nesse exernplo utilizaram-se urn bodio para dispararo evento e nsamos 0 seleror rheader para acessar rodos os cabecalhos, aos quais sera. anexado 0 componalJ!lem:o definido 110 script (mudar a cor' de fundo para vermelha).

1'v1 aterial COM direilos aurora's

13

seietor:ani:mated

Este e urn seletor nao previsto 1i13S CSS e exclusive da biblioreca, que acessa as ocorrencias do elemenro s'ili'1nor para as quais se tenha definidoum script de anirnacao, Esse seletor sera visro com mais detalhesao se abordarem as recnicas [Query de an]ma~ao.

2,.2.,4 Seletores de (ontejud~o

s eletol':c:on ta il,ns,(texto)'

Este e urn seleror nao previsto nas C55 e exclusive da biblioreca, 'queaC,e5sa todas as ocorrencias de seTetor que contenharn urn texto (string) definido no parametro texto.

Exemplo:

<scd pt type="text/jtIJvascri pt" sre-" .. /jl:jliH~~ry-l. 2.,6 .,j.s,"'></s'cript> esc ri pt type .. '! text!] aV'!lSC: ri pt 1':.-

$ (oocument) . ready(funct:~onO {

$(' tfbtl1-vermel ha') .eli ck{functionO { l(rp:cBnt~ins(!Ma~jor!).(ss(!backgro~nd1, !red');

})i

J);:

</ sc ri pit> </head> ,<body;:.

ebu tten tYI!l'e='~buUron!!>Verlme llha</buttonr> <p>Vhlte o site do Malljor</p> <p,>Es,tu:de less e jQ;uery</p>

<p>HTIU 5 lesd ern fase de ,estudo,s<'/p> <p>Mal!Jjor escreveu este 1 ivrro.;jpc. <spafli>Elemel'!I:'Ii) span contendo ~1:aujlor'(/5pan> <p,>paragrafo c,ontendo l11allljor</p>

Nesse exernplo.urilizaram-se urn botao para disparar 0 evento e 0 seletor : conrai s para acessar rodos os elementos III qlle coutern a palavra Maujor, aos queis sera anexado .0 comportamento definido no script (rnudar a. cor de Fundo para vermelha), Note qlil1e nao se selecionaram 0 elem en, Ito span (n.ao e paragrafo) nem Or elementop conrendo maujor (mimisculaj.pois 0 seleror e sensivel ao tamanho cia caixa da string passada pelo panlrnetro te'xt,Q.

1\r1 atertai com direilos aurora's

jQulery • A. IBibliotec.a do Programadm JavaScript

.. ~1 ~t ~ r.emptiu ",(1_ e. 0 L~~ _,~ "

Este Ie urn seletor previsto nas CSS 3. que acessa todas as ocorrencias vazias de selercr.

Exemplo:

<.s:ty 11 e tlfpe.l!il"iI)ID(tlc.ss;"rn:e~di ,a~lIa,ll ",.

table tr td {heignt::2Q:px:} 4sty~le>

esc ri pt 'type"," text/] avasc ri pt 11 SIi·c~" •• /j~I.!Iery-l, 2 .6 ,js,"> </slc.ri Pl:> esc ript type",lluxt/javasc:r; pit;'>

$(oocument). r@ady(functionO {

$ (' Ibtm-v@!rm,el ha') .di ck(func.tiofl 0 { S,('td:empty.,cssCbactglround' , "red"): });

Hi: </script> </head> <body:.

<b~ ttcn tYlpe~"butt(mu>Ve:rlme 11 ha</butto.n,. d.able borld~er~"l">

<til'>

0:: t:di;) O§'l ul ai ndi; c e Ck:/td1:. </n;.,

<1ttr:"

<td'></td>

</tli>

<til>

< t:di>Ce" UI1a 'i ndli ce 2..::ftd1:> </tli>

<tID

<tdl>CelullaJi ndii ce h/td> <It!'>

<u>

<td'> </'t(i> </u>

</tab1 eo>

~ [[a,rq~iyo~1.2.4b.html]

Nesse exemplo, utiliaaram-se 11m batao para dispmrar 0 evento e 0 seletor tdl: empty FiI:lIra acessar eodasas celulas da tabela que estao vazias, as quais sera anexado Or compoetamento definido no script (rnudar a cor de fundo para vermelha),

1'v1 aterial COM direilos aurora's

seleton :has (s eleto(2)

Este e urn seleroe nao previsto nas CSS e exclusive da biblioreca, que acessa rodas as ocorrencias do elemenro definido pdosele't'orl que contenham pelo memos urna ocorrencia do elemento definido pelo se]etor2..

Exemplo :;

escrtpt type="Ii:€:!xt/java:scri pt" SIiC=·" •• /j~lI,ery-1. 2 Ji "js"'>-</su;'pb <script tYPQ;;Utext/javasc:ript">

$ (dOtlll'ment) • ready(funcdonO {

$(' #bt:l1-ve:rm'el hal) .c~; d::(functionO {

S{' p': has (5 t mng) . C:'SS.(' back~'round " 'I red' ) ; }):

~')I .,

Jr. II

</script> </head> <body>

ebutton tYl~e","but,t,ol1l">Verltllellha,<lbutton> <p,;>Texto (,om <i>p'alavra</i>e;ml itallico'</p> <pr;.Texto ('00') <b>p'a 1 avrae/bs ,ernl negri to</p>

<p>Texto (IGln <spatl>pahvrSi<!span> del'ltro despafl</p> <p,}TeXlO ('Gm<strong>pahv.ra</siI;li',ong> com fOli't@ 4nhs@</I'> <P> Textn sen matrl:a~aQ< extra<jp>

Nesse exernplo, utllizaram-se UlT1i. botao para disparaJ 0 evento e 0 seletor p:has,'(stlr'Qltg) para acessar todas as ocorrencias de paragrafos que conaenhanr 0 elemeruo strong, nos quais sera anexado 0 comportamento definido I'los.cript (mudar a cor de fUlldo para verrnelha),

Note' que enquanto 0 selewr:comtallls0 estudado anreriormeute selecionou elementos que contem urn dererminado eexto, este seleror :has() selecionou elementes que contem um outre dererminado elemento,

seletor.parent

Este e urn seletor nao previsto nas CSS e exclusive da biblioteca, que acessa eodas as ocorrencias deelementos que sejam elemenrcs-pei, ou se]a, elementos que tenham filhos, inclusive sexto (text-node) COInO filho,

Exemplo:

1'v1 aterial COM direilos aurora's

76

<5tylle type",":u'l.xtICSs.01 m:edta .. Hall ":>

P {l'u!i gh t: .2 0 p.K : } </stylle:>

<script type","textljavascri pt" 51"C=" •• /j~(JIery-l. 2,,6 ,.j.s"'><hcript> esc 1"1 pt tY'P,e;:;"lJ:ext/j svasc ri ptH)

HdocumEmt). r~ady(func.tionO {

$(' ~btn-verm,el ha') "eli c:k(func.tionO {

~,e p: par,ent) . ess,e backg round! ,t Ired') : });

})i;

.::/ se rfI Pit> </head> <bodY"

ebuttnn tYlpe","buttmli";.V,mtlellha</button>

..; Pi:> T exro CIGf!1, < i> pa 1 a II r a</ i>e,i:I1l ; dJi ; C~)<I P> <.PI:> </Pc>

<p'> Texto slem aarc a~ao ext ra <f p>

. .i,) l[a.rqlLliv'ol-1.2 •. 4d.htm.I]

Nesse exernplo, unlizaram-se um botao para disparar 0' eventoe 0 seletor p: p.Brent para. acessar todas as ocorrencias die paragrafos que concern elemenros-fiIho as quais sera anexado 0 coruporramerao definido no script (mudar a. cor de undo para vermelha), Observe que na marcacao hoi urn elemento padgrafo vazic e que nas CSS se definiu uma altura de 20px para as paragrafos, Esse elernento naoe 811vo de seu seletoc Paca eneender o funcionamento desse seleror, fer;a lima copia doarquivo exemplo e altere 0 seletor para S('pt), pois assirn . n ora ra. que na visualizac;a.o de sua copia, 110 funcionamento do script, aparece 0 paragrafo vaaio com fundo na cor vermelha

2..2.5 Seletores devisibilidade

:hiddem

Este e urn seletor nao previsto nas CSS e exclusive da biblioteca, que acessa todas as ocorrencias de elementos qu.e esteja m ocul tos no. docu mente, incl uindo at mpos de formulario in;pul! do ripo Mdden.

NormalililEm!e. asia 'seleloliacessa taml!lem es el'emelillos de marca~o oontid'os na se~o In.eil.~ 110 dowment!)" portanlo se esm niiJJ. e sua Irl1lten~o" I~mile abusca Ii se.;:ao body com ,8 ssg,llIhnte sintaxe: $(1: hJiddetilII , $(1 body!))

1\r1 aterial COM direilos aurora's

11

Exernplo:

<5 tyll e titP!!'" " 1:,8)( tits s "mE~'~ i ,a~" all" >-

hl {di sp 11 Olley: hi dden ; } Ii!: escende 0 e,1ementa< hi */

<!styh>

<sed pt type=!ltext/javascri pt" SIi'c:=,'I •• /j~lIH~ry-l. 2 .6,.j!:/'></saipt> <script type","text/jav.ascri pt">

$ (ooclllment) • ready(functionO {

$Cbuttom') .click(ftmction() .£

var totall Ocul tos ~ $:(": hi dden I" $, ( !'Ibody" » . 1 engtih,; var -ruflPliltOClultos '" $,Cinput:hidde'l1i').lengthi 5(':51)21111"). t,extCForam encontrados II t tot,alIOcuh~:s f

! e~hmtl:n,t~.s oCtJ.lltoi!i, $,(mdo ! + 1iiilfmtOciultios+

f @,h:me,nlto.$ input d:o ripo hid'~en. ') /* esc~'e\ler e rssulrado "j

});

'iq •. s j .1

</scrip't> </head> <body>

<buttonl tYlpe="butt,on" >Qct! Itns </butto'li1> <hb(abe~al ho ocu 1 to parr dec 1 ara~(ao eSS</hl> <form>

<i nput type~"hi dden" I> dnput type:="hiddeni" I> </f:otrm>

<sJ)m:rr:.4s:pan> <!.'--aqu; jQuery @screv(! GS lresUltadOS de elementos OCUltOiS en:contraoos -->

.i) l[arqLliv'oi-i.2 .. Sa .htlll'lll]

Nesse exemplo, utilizaram-se urn borso pan disparar oevento e 0 seletor : hidden duas vezes: a primeira para acessar 0. coral de ocorrencias de elementos ocultos e a segunda para acessar a ocorrencia de elemenros i nput do ripo hidden. Os nurneros de ocorrencias foram passados a varjaveis e escritos 110 docurnento para constatacao do funcionamemuo do script.

Note queelemenms ocultos pelas declaracoes CSS ,diSlllay:none (como mostrado no exemplo) ou ·visiibilit:y:lhidd.en sao aeessados pelo seletor,

Esse seletor admire as seguintes sintaxes:

$(': hi d'deliJ")

Acessa rodos os elementos ocultos no documeneo, incluindo os elementos consranres cia set;;~o Iheadl~[a is como t'i tl e, sty1 e, scripts" aeta etc,

1'v1 aterial COM direilos aurora's

$(' :~idden!! St'lbody'!)) Acessa todosos elementos ocultos no documento que constem da se~io body .. Veja jQuery(expr!;'ssio, [cl!J.l1te;a;;a]) ern [C2 S2'!]..

$( I seJ,eror:lli dden ') Acessa rodos os elemeneos do. ripo stf1eto,r. oculros no dccemenro,

Sugestao: fa~a umacopia do arquivo de exernplo e retire a sele':rao contextual $ ( i lJodiy i)1 do seleror; Voce ira. 110[ar que 0 numero de elementos oculros retornados aumentou, pais na visualizacao de sua copia alterada, no fI .. mcionarnento do script, Coram inchndos os elementos da set;ao head,

Este e urn seletor nao previsto nas CSS e exclusive da biblioteca, que' acesse rodas as ocorrencias de elementos visfveis (nao ocultos) no dccumento,

Normalmenle. ssts 'selehn aeessa tam~m os el'emenlos de marca~a:ooontid'os na seyao Ih ead do dowl1I1enlo, po.rtan[o se esla n 8.0 e sua [rnte,n r;ao, I [mile 8. busoa a se~o body com a se:g,l!Iimtesinta;r;e: HI: 'J'isiilbl,el, SCbody"))

Exemplo:

<script type",,"text/javascri Pit" SIiC""" •• /j(.1l.1ery-l. 2,.6 ,.js,"></sl(;.ripb· esc r,' pt type",,"rE!xtj] avasc ri pt?»

$ (doc:uRlent) • r,eady(functiionO { $('buttom') • .c;Hc;k(fuRctionO {

var total Vis· 1 v'E65 - S{!I: vi 51 bl E!! I S (' body ')) . llerngth:; $('spall").,.text('Folram eacontrades ' + totalVisiveis -!I-

Ii el emE:!'Itos vi s i vets no documento. ") r escrever 0 resu Itado til

}) :

11.'1 , . ..Ii ;11

e/scr+po </h@ad) <body:>

«button tYlpe""iibutt.orli'>Ocl\ll 'lOS <lbuttom> <hhCabe!;Si 1 ho de m; vel l<!hl>

<P'> Textn de: tUm panigra·fo<!p>

<span:></sll'an> <.! --aqwii jQuery escreve ,!} resal tado de: eleml!:l1itJoS visiveis e:J1C1ol!ltrad'os--:>

.i) [[arq~i\lo-2.2.5b.html]

Nesse exemplo, unlizaram-se 111m botao para disparar o evento e usamos 0 seletor :vi stble para acessar >0 rota] de ocorrencias de elementos visfveis na se~ao body do documento Os resultados foram passados a uma varidvel e escriros no. documeneo para consratacao do funcionamenlw do script

1'v1 aterial COM direilos aurora's

19

Note que elementos ocnltos pelas declaracees CSS displaty:m:me OU visibility: hi dden nao sao acessados pelo seleror.

Esse seleroradmire as seguinees sinraxes:

$(' :V1 stb'le") Acessa todos os elememos visfveis no dccumento, incluindo os elementos constantes da se~ao head j tals como tilt 'le, ,styl e" .sc r i pts, meta etc,

S (j : \11 s1 b 1 [e'~" Ht body t')) Acessa rodos es elementos visfveis no d oeu memo qu e consrem da ser;ao body,

$(' sel,etor:vi sib'ls ') Acessa rodos os elementos do tipe se,letor, visfvei.s no documeneo,

2..2.,6 Seletores, de at:ributo

Os seletores de atriburo sao previstos nas CSS 3.

seleto~[atribulol

Acessa (Odes as ocorrencias do elemento seJ"etor para 0 qual se renha declarado o arribum definido no paraTm~[m a,'[ribll'to.

Exemplo:

<sed pt type=Utext/j avast r1 pt" s 1"(;:;::;:" •• /j~i,IH:r.Y-l. 2 .6, j,s.'''><ha:ri pt> esc I'i pt type-"!J:extf]avasc:ri pt":>

$ (OOClllment) • ready(fu.nc.'tionO { S('button') .,elick(furtctionO {

~,( !p{tit1Ie] i). css.("back,gll'ound!I, i r,ed!);

})i

});: </scriP'D </head> <body>

<buttorll tYlpe""j'bu!l:t,onl";.Verimellha.</buttol1l> <h3>Cahe~all1o nillel 3</1'13>

<P'> Textn de urn pa:ra.gr'afo <b>sem</b> ilItri buto ti t 1 e. <P>

cp Utb='''mE!u_titulo''>lexto de uilllpar,agrafo <b>Com</lb> atributo ti tle, </p> cp laliig:="llt-'br"> Texto de um para,gl"afo (om atjributn 1,aii1g.<!p.>

<p tit1e"''''Ci'utr,o:_,thul ci"'>Te:xt[1) de um I)ar.iigra~o[ com atrilbuto ti th ,.<:!p>

..il1[arQlliI/O:-2.2.6a.htm.ll]

1'v1 aterial COM direilos aurora's

80

Nesse exemplo, utilizaram-se um bota.o para disparar 0 evento e 0 seletor p[title~] para acessar os elementos paragrafo que conrem 0 atrjbuto tit~le aos quais sent anexado 0 comporramento definido no script (mudar a. cor de Iundo para vermellia).

seleton[atributo :=; !Iva/or"]

Acessa rodas as ccorrencias do elemenro s·e]\etor para 0 qual se eenha declarado o paratribut£l .., "va1or".

Exemplo:

de ri'pt type",UUxt!38iVascri pt" SI'I:"''' .• /j{ll.!ll'!ry-l. 2 .6 ... j.s."'><Jslcri·pt>· '<$C d pt type","text/j avasc ri pit!'>

$ (dO(llJlllellit) • ready(functiicmO { S('buttoll') ,.,eHck(funct'ion() {

S,("p{titlle :::: ·'lI:'II.eu~titullo"]!)I, css.("lba:d'9round II I I' r<!!d!); });

i» </SCr1prt> </hea~) <:bod'y>

ebu tten t:YIPE!~"butt(m">VEmme 11 ha.</button> <h3>(ahe~all1o nivel 3</111>

<1:)1;> Terto de rum palfagrafo <b>sem</h> atri buto title ., '''meu~ti tulo" . <./p> (p'l:h1e.=Ji~'illeu_t:itulou»,lexto ,d~ umpa.!',agrarfo <b>cCMl1</lb> au; buee

thh ::::"meu_titulo'''.·</p>

<P' 1 allg:","llt·-[br"> Taxto de lUllparagrafo (om aui bute lallg .<!p> <Pi Uth="\~utrl0!_thUl1 o"">TexJtlo de. Uiii par,agraf:ol COlli atrilbuto dth ii ''',Dutro_dtu1Io'; .. <IIP>

,i) [[Clrq~ivo~2.2.6b.htmll]

Nesse exernplo, utilizaram-se lll1l1 botao par,a disparae o evento e 0 seletor phitl e = "lmgu_tiil;;~l,o'"] para acessar os elementos paragralo ,que content <0 ambuto ti tla com 0' valor "'meu~1I:itul oaos quais sera anexado 0 compcrtamento definido no script (mudar a COli de Iundo para vermelha),

1\r1 aterial COM direilos aurora's

81

Acessa todas as ocorrencias do elemento seletor para o qual 0 valor do auibuto declarado em .:ttrfblllt:O' nao seja "!Ia'r,or. Esse seletor e .a negacao do seletor anterior, ou seja, aces sa [ados os elementos dehnidos em. se]~torque nao sejam acessados pelo seletor estudado anteriormence,

Exemplo:

escript type="text/javascri pt" SI"(,=" •• /j~lIeI'Y~1. 2.6 "js"'></sui pt> <script tYPQ="uxt/javascri pt">

S(docwment).ready(function() {

$(,buttGI1').cl ick(fuRcti onD -(

~,Cp[tiit'lle != "ml!tLtHlIlo"] ") , cssCbackground'. "red'): });

l),I" Ji I'

</scrill't:;. </h@ad> <boGy>,

«buttnn t)"IPE!",lh b,utt<CHli">Veril'lle 11 ~a,<lbutton> <h3>(a~e~a! 1 ho ,ni ve13</h3>

<p> Texto de urn paragrafo<b_>sem</b> iliui bUI:'iJ ti t le = '''me:u_Htu1o''. </p> ep til'th!="'meu_:titulo">i@xto de umpar,agrafo <b>C.OOI</lb> atr tbutc

tiide = '''meu_ti tulo' ,·<lP>

<P' lan~;",I'lpt-[br"> Texto de urn para,~liafo com at!l'ibllt:o 1,a.llg.</p> <p 1: -rut 1 e= '~\0U t po_ It hUll o'!!'>T ex to de, um p a r.ag r a fo com at ri buto title = "!outro!_thullo'" • <liP>

~ l[a.rq~iv'o:·1..2.6c.hlml]

Nesse exempla utilizaram-se UI1il botflo para dtsparar 0 evento e 0 seletor Il[title I", '''Im:el!_htiUIlo''] para acessar os elementos pam:l.g:rafo que nao contem 0 atriburo ti tlle com 0< 'valor "meu_ti tule" aos quais sera anexado 0 comportamento definido no script (mudara cor de hmdo paravermelha),

Note que 0 seletor de negacao nao procurou somenre os elementos que possuem 0 atributo negado, Caso 0 elemento nao POS-SU,3. 0 atributo, e considerado alva do seletcr. Ao usar 0 seleror de negacao, e mais seguro raciocinar com a selecao complemenrar da selecao negada,

1\r1 aterial COM direilos aurora's

82

seletoi![atributo A:=:(J~alot']

Acessa todas as ocorrencias do elemento seletor para o qual 0 valor do auibuto declarado em arrfbut'a comeca com a string va l,or'.

Exemplo:

<script type~"text/]avascri pt'' SI"C~" .. /jqll,ery-l. 2.,6 .,js"l;..::/suipb <script type","t:ext/jt!Jviscript";>

$ (doclllment) • ready(functiionO { SCbuttol1l) .,click(fl!mctionf) {

$Cp{t'iitll@ A""" 'IOUt'!iJji) • esse backglr(l~nd'!, ! Ired!); });

H: </lcril)lt> </head> <body>

<bIJ1:t0Ii11 tYI~@="bunon">Verlm@ llha</blJttont> <hl>(abe~di 11lo nivel 3</1"13::-

<pr>Texto de tUm paragrdo <b>seoo<lb> atr-tbute title = '''me:u_l1:itul,o'' • </p> <P' thb","'meLti tu 1 o";;.iexto de umpar,agrafo <b;;.c om</ib;. Qi,t,ri buto

ti U e '" '''me::u~ti tul 0'" • <fPC>

<Pi langi="pt-tbr"> Texto de urn pa.ragrrafo corn atr ibutn l,al1g.<lp.> <p UUe"'''\Gutro~.il:Hul o'''';.Te:xil;o de um ~ar.agra'fol com atr-ibutn thh =1i'DUICrOI~l:hulloM .. </I~)

~ l[arql!llivo:~2 .2.6d.htm II]

Nesse exemplo, 1IiiI izararn-se um borao para disparar 0 eversto e 0 seletor p{titJe 1\"" "out"] pa fa acessar os elementos par.agra Eo quecontem 0 va lor do :3J tribu to t.it~ e~ comecaodo coma string "out'taos quais sera a nexad 0 0> comportarnento definido no script (mudara cor de [undo para vermelha), 0 acesso sera. ao paragjafo com o atributorttle de valor igual a outr,o_il:itulo.

seleto'l[atributo $~ "vafor1

Acessa I:Oci:9S as ocorrencias doelemento seletof' para 0 qual 0 valor do amburo declarndo em atrfblfto termina com a string 'valor.

Exernplo:

<script tYPQ~nt:extl]~vasc:ri pt" SI'C~" •• /j~l.I,ery-l. 2 .6.js"';;,</sicr'·pt> (sed pt tY~le=!It:extn avasc ri pit">

1'v1 aterial COM direilos aurora's

83

$ (doclllment) • ready(fullctionO { SCblllttGI1I) .,click(flllnction() {

$,( 'p{thll@ $", "tulo") !'). cssCbadground', 'red '): });

});; </scdpt> </head> <body:.

<biJttoJill tYIP@='"'buuon">VEmtl1@lha<lbuttonc<h3>(alse~a1l10 nivel 3</h3>

<p[)Text:o de rum pa.ra.grdQ <b>sem</b> atri buto ti tle "l "aeu.ti tulo" . <!rr" <p Uth~"'l!!eu_tilt~lo">fexto de umpar,agrafo <b>CQi!11</liJ> etrtbuto

tide ="meu~titlllo"'.</Il>

<p lal!lgr-=~'l!lt-hr">Te.xtQl de urn pa.ragrr.afo corn atr ibutu lall1g.</p.> <p Ht1e;;;;"'r()utr,o:_t.i1tUllor''''::.Texto de um Ilaragra'fo, com atr-ibutn tH~e ~"lo1.!tror~tHullo" .. <lIP>

Nesse exemplo, udlizararn-se urn borao para disparar 0 evento e 0 seleror pr[titJle :S~ "tu'lo"] para acessar os elementos pEiragrafo que contern 0 valor do atributo title rerminado com a string "tulo" aos quais sera. anexado 0 comporramento definido no script (mudar a cor de [undo para vermelha).

seleto4atributo*::: JJralor"]

Acessa rodas as ocorrencias doelemento seletQr para 0 qual 0 valor do atributo declarado em atributo contem a string valor.

Exemplo:

-esc ript type="It@xt/javascri pt" SI'C",," .. /j~lI,er!l-1. 2 .. 6 .. j s"':></s,cri'pb <script type="ti!xt/javas(;r; pil;">

$ (docliJilient) • ready(functionO { S('bUttOlili) .'c1ick(fuRction(Jr (

gCIP{ti·tlle1l!= l!_ti·t~T), c:ss('bac:tground\ 'red'); }) ;

lq •. ji J' II

</scdprD </head> <body>

ebu ttnn tYlpe","buuon">Verme 11 ha</buttcm> <hl>Caber;a 1 ho ni ve 1 l<Jh3>

1'v1 aterial COM direilos aurora's

84

<Pi) Textn de urn para,gra'fo <b>sem</b> atri buto ti t le == "'meu_lJ:; tulo" • </p> <IJ' tttle;;;:"meu_'ti tul 0"> lext':o de umpar,agnfo <b>cGfI1,</lb> aui butc

tilth '" '''ml!!u_til:u1or ,</rp'

<.p lang;="llt,-ibr">Texto de umparagrrafo com auibtJto l.allg.</p> <pi tUle",,';\~utr,o_tiitul o''''>Textll de Uill par,agrat:o com ,atrilbuto tith ;::;",outro,_thlJ110'; .</I~>

Nesse exernplo, utilizaram-se urn botae IPBiI!"a disparar 0 evento e 0 seletor 1:l[1title~ ':'", '''_til;:''] paraacessar os elementos paragrafo que contem no valor do atributo titl e a. string ~ti taos quais sera, anexado 0 ccmportamento definido no script (mudar a cor de fundo para vermelha),

s eleto4filtm 1 otr:iou (0 ] ••• [filtrof"l otributo]1

Acessa rodas as ocorrerscias do elemersto se,lemr para as quais os arributos satisfazem eodas as condicoes declaradas nos filcros de atributos. Voce pode usar quantos filtros quisez

Exemplo:

«scrtpt type=l1tex:t/javasc:ri pt" SI'·(,=:OI •• /j<qUlery-l. 2 .. 6.js"'><lsoeri'pt:>, <script type",!!text/javascri pt!!>

$ (doc!!IlIlent) . ready(fullctiionO { S('buttorll) .,e1ick(fun(tionO .£

SCp(titlle i= "Io"] (lidl]~) .,ess{"background' t 'red"):; });

D;: 4SCdp,t> </head> <bod'y>

.:;buttor!1 tYIPE!~ "butt,ol1i";:;Verlll1e llha<l~l!tton,> <h3>(ahe~<lill1o nive13</h1>

<p:>'Texto de tUm pawagrafo <lb>sem</h> atri bute ti tle iii '''meu~ti tulo" . </p> <p thh: .. "'mel!,...:titlilo" 'id""'l!m">

Texto deum par.agrarn <b;:.c'om</Ib> a.tributo ti t1 e .. "tme:u~tit<ul 0" ,e aui buto id, </p>

<p lang:="pt-br">Texto, de l:impara.gnfo (om aU'lbvto l.alflg.</pl>

<p' t1itle="'t~utr,o'~il:Hulo''':>Texto de, um paragrafo, comatrilbuto title = "autre; t i tu'le'' • <ll~>

,i) l[arqllivQ:-2.2.6g.htm.ll]

1\r1 aterial COM direilos aurora's

Nesse exemplo, udlizaram-se urn. botao pam disparar 0 even to eo seletor de atributo com 6hros p[title ~, "10"] [id] pam acessar O'S elemenros paragrafo que conrem 0 arributorit'le com valor rerminado na string "lo" e tambem urn atriburoid com qualquer valor aos quais sera anexado 0 comportamento definido no script (mudar a oar de fundo para vermelha),

2..2.,7 FUtms para seletores~fiIhll

As pseudcdasses para seletores-filho sao previsras trlaJS CSS 3.

s eletor.first -child

Acessa 0 elemenro que e a primeiro filho do elemento definido em s,ell,e'tor.

Exemplo:

<script t:ype",,"tex:t/j8Jvascri pit" src-". ./jl~lJJery-l. 2 .,6.,js,"><!slcr;pt;:., esc ri' pt type .. "text/j avasc r i pt?»

S(doCI!lIli!l!rlit). r,eady(funcd on 0 {

$(!bUttOIl') .cl icktfuncrionf) {

$,( i 0.1 1 i :: fi rst-cbi 1 d il) • (55 r( ! backgrollnd!, ! red I) ; });



<I sc r"f Pit> </hea,d> <body->

<b~ t'EOIiI tYIP@:'"butt:ollJ">Verlme1Iha</buncm> <01>

,dl hltem del; sta 1</11> dhltem ,delis1ta 2</lh db-Item de l isea 3<jlh el hI tern Ideli s til 4</1 h <Jlhltem de 1ista5<l1i>

<lob

.it) [[arq11.1 iVQ:-2 .2.Ta.htrn II]

Nesse exemplo, utilizaram-se tun botdo para disp;]rar oevento e 0 seletor 01 , 1: first-dl'ilrd para acessar 0< elernento 1 i, primeiro Iilho da li$[a ordenada 01, ao qual sera anexado 0 compcrramenro deflnido no script (rnudar a cor de fundo para vermelha),

1'v1 aterial COM direilos aurora's

86

seletodast-child

Acessa 0 elemento que e 0 ultimo Iilho do elernento definido em selet()'r.

Exemplo:

.;scri'pt typ@","uxtlj(1jvascriplt" src-" .. lJ'qI.!H;!ry-l. 2 .6.,js''';,-</slcript:> <script type","text/java:sc:ri pit">

S(doclll!llent). ready(fullcd on 0 {

S('bu~ton').(lick(fun(tion() {

~,Col ~i cIast-chd Id II) .csst.' backgrrollnd! ~ ! red'); });

});;

<I sc rT Pit:> </head> <body,.

<bLUttOl'ilr tYrp@='"buuM">Ve:I'I[]11l1Iha</buttoi1"" <O,l>

dli>Item de l i sta 1</1h d hI tem de1i Sit a 2 </1 i:> dbltem de 'li sta 3</1 h dhltem Ide lis'ta 4</1i> dlhltem d~ 1 ista 5</1i>

</01;0·

Nesse exernplo, utilizaram-se urn bO[30 pan) disparar 0< evento e 0 seletor 01 1i:1.aSit-chHd para acessar 0 elemento 'Hi. ulomo filll0 da lista ordenada 01, ao qual sera anexado 0 comporeamento definido no scrips (rnudar a cor de Iundo para vermelha),

seletor.only-chl:l d

Acessa 0 elemento que ~ 0 filho unico do elemenro definido em .se~etor.

Exemplo:

<script type","text/jaNascri pt" 5I'e .. " .• /j~l.iIery-l. 2.6 • j.S,UI></stcrip't>, <script type"'''trext/javascri,PiI:''>

$ (oocwment) • ready(fullctiionO { SCbuttolil") .c'l ickffuncri co() ,{

1'v1 aterial COM direilos aurora's

81

$( '011 1 i :: on 1 y-chi 1 d ") • (55 ( 'backglroUind '.~ , red' ) i });

D; </scriprt> <{head> <body>'

ebuttnn tYlpe= "button" >Verrrne 11 ha</~utt{m> <01>

di>It@m 'o!a ltsra 1<l1b dbltem de lista 241h <~li>Item delista 3</11> -dl i >Itcm del i sta4</li> <Jlhltem de 1; s ta5</1 b

</01> <oh

di>It:em ~l1Ii'col de Hsta.::/h> (/ob

.i) l[arqLllvo~2 .1 Jc.i1 I:m II]

Nesse exernplo, utilizararn-se um borao para. disparar oevento e 0 seleror 0,1 1; .onl y-chl1d paraacessar 0 elernento u, filho unico que ocorre na segunda lists ordenada 01, ao qual sed, anexado 0 eemportarnento definido no script (mudar a cor de fundo P,U9J vermelha).

Acessa 0 elemenro que e filho do elemento deficido em seleto« e ocupa urna posic;ao definida ccnforme mostrado a seguir.

Argumento

fnd;ke

Descri~ao

even

odd

Urn ruimero inteiro cornecando com urn para acessar 0 primei.roj segundo etc. filho .. Exemplo: nth-crmild(3).

Acessa os filhos de ordern par.lembrandc que a ccntagem com ~a em 0 (zero) (par por padrao) e assim sao pares os filhos IU primetra, eerceira ere, posicao, Sinraxe: n th-cM·~ d (evein)"

Acessa os .filhos de ordern Impar; lernbrando 'Cj.IJ.e a contagern come'Saem 0 (zero) (par por padrao) e assim sao fmpares os filhos l1a segunda, quarts etc. posi.~:a.o. Sintaxe: nth-chi Idfodd).

Urna expressao maternatica para acessar dererrninada posicao, Exemplo: Inth-ch'i~dOn)acessa as filhos nas I)osicoes 3,6,9; 12 etc, (n 'e a sequencia d numeros naturais), Ourro exemplo: nt:h-chHaUn - 2) acessa os filhos uas posicoes 1, 4. 7, lOe[c,

1'v1 aterial COM direilos aurora's

88

Exernplo:

esc r+pt type", "uxt/j avasc ri pt:" Slit"''' •• /j~l.iHilrY-l. 2.,6.j s"';></slcri'pt> <script type",,"textJjavascri pt">

$ (docl!lm!E!nt) . ready(fullctionO { $CbuttQ~ I ),(;1 ick(fum:ti on() {

'(tal ~i:mth-child(3)r).CS5('backgro~nd11 Ired'); });

}); </script> </head> <body>

<bLJttol'ill tY,P@="buttoni">vEmm@:llha<!buttont> <oh

cli>Item de 1ista lc/li> <J hI tem de1i:s ita 2 <:/1 i> dlhltem de l tsra 3</1h <Jlhltem die l tsra 4</lh dhltem d~ l isaa 5<11h

<;/01>,

~ l[arq~ivo:-2.2.Jd.htrnl]

Nesse exemplo, utilizaram-se 11m botao para disparar oevenro e 0 seletor 01 1 i : nth-chi 1 d 0) para acessar 0 elemen [0 1 i , quee o rercei I'D fil ho na lista ordenad a 01) ao Qual sera anexado 0 comportamente definido no script (mudar a cor de fundo para vermelha),

:il1lpl!Jt

"

Acessa os elementos i nput, textarea, s@llec:t e button em urn formulario ..

Exemplo:

esc rip·t 'cype=utext/javascri pt" 51"'(;::::" •• /j,~I,iI,ery-l. 2.6 .] s."></s:criP't> o:;scri' pt type","text/j avasc ri ,pfii;>

S(dOCl!lment). ready(fullctionO {

SCbuttQIil") ,.,e;1ick(fun,tionO {

i,(! : 11 miPllt' ). cs s (' bonier ~ ~ '2px scl i diffOOOa ') ; });

})i; ,</scrip't> </head>

1\r1 aterial COM direilos aurora's

89

<body>

<buttonl tYlpe","buu,otli">8ord.as nos i nputS<!lbuttofl>

,<fo,m action:",U'i':>

<.p,><1Iabe ll;:'lllPut de texto: <i'nput type=,iO'l!exl:" /><nabe~l><Jp>

<p'> <:1 ahe II >1 nput de. senna : «tnput type",'''piliss\'i'ord'' I></labe 11></1» <p;><1at)ehiliput eeu'lte: <input type;:;:"MMl1ln'" /></labeh<Jp>

<p>< 1 abs II >i I1PlJt cnecl<box:<i nput type,::'''checkbox"' J></labe 11> </p>

<p><:l abe hd I1pU t radi Q:: <'1 n:pu t type ... " radio l' [» <.{1 abe h<Jp> <p,><lalJell>il1put imagem: <input typ!!:"im.ag,@" src="'ok.,grif" /></labeh</p> <p>.;:1 abe 1 ;.Se lect ;.;s.el eel>

<O'DHoli,>Op~a.o l</opti 011>

<opU alii sel ected~" se 1 acted !!)I)p~ao sel 'eci,onada<lopt~ on> <opt~icm~OIl~a:o 3</opti on>

<optii o iii di.sahl ed~~!d"ii:s ab'l ed II>Op~ao de.sabi li tada</optii 0111> <opt'ID Orl,>OIil~ao ,4</op,ti 0·1i!>

<opUofl,>Op~iilo S</opti 0:111>

-::./ se 1 ect::></l abe 1 ></P>

<Pig 1 abe II ;;. T eKI1 are a: <text a rea co 1 s"," 2: 5 '" rO\~s.",,"' 8" ;;.</tle:xt a rea> </1 abeh <Ill> <p<><l abe!1 >1 !ilp~t si.lbilli t: -ci np~t type;:;:"su'bmi t" /></1 abel ><Jp> <p,><ila~e1>inplJt reset: d nput type=" I'Ie;set" 1></labe:l></p> <p><1abeh,'iIl.put bctao: d nput type-"bu't!i:'on" /></h'beh<:/p>

<p'> <1 abe II >@l ensnte bo,tao :<:b IJ t'W:!'1> Bo,t,ao 0:: /I:m Ii: ton> </ ~ a'b@ 1></ p;>

<If o I'm>

.i) [[arqIJI\lo:~2.2.8a.html]

Nesse exernplo, utUizaraul-s,e urn botao pam disparar 0 evento e usamos 0 seleror :: ; In P'1lJt para aeessar os elementos inp1!:lt" textarea, select e button do fonnuMrio aos quais sera anexado 0 comportarnemo definido no scrips (adicionar urna borda na cor vermelha),

Acessa as elementos i nput do tipo text ern urn formul;;fudo.

Exemplo:

«script ty~e",iitextl]avascri,pil:ii SI"C",,'i .• /j(jl!,ery~1. 2 .6."js,i"><hcri'Pb esc ri pt type="text/j aNase: ri pt I'>

S(dOCl!lment). ready(fullctionO {

$('buttoll') ,(.;lick(fullction() {

iC: text") ,,(ssCborder' ~ '.2px solid #HOOOO');; });

})i; </scrip't> </hea.cb

1'v1 aterial COM direilos aurora's

90

<body>

<buttonl tYlpe","buu,otli">8ord.as nos i "puts d'e texto</b~tton>

,<fo,m action:",U'ii:>

<.p,><1Iabe ll;:'lllPut de texto: <i'nput type=,iO'l!exl:" /><nabe~l><Jp>

<p'> <:1 ahe II >1 nput de. senna : «tnput type",'''piliss\'i'ord'' I></labe 11></1» <PH' at)e hi liput checkbox ;<1 npu.t typei;:;'i'checkbox." /></labe11></pi> <p>< lab:e II >i I1PlJt subai t: <i I'IPlJt 'l'_ype='~su'bmi t" l><llabe h </p> <p>(:la~ehdI1PlJt reset: <'1 nput type ... " reset" /></1 abeh<jp::. <p,><lalJell>il1put bctao: <1n~put typ@="butt,on" /><!1ab@l></IP>

</form>

-il l[arqllliyo:~2.2.8bhtm II]

Nesse exemplo, utilizararn-se lim borao para disparar 0 evento e 0 seletor : text para acessar 0 elemento il1put do tipo text no :fOrll111lairio ao qual sera anexado o cornportamento definido no script Iadicionar uma borda na oor verrnelha),

:password

Acessa os elementos; nput do tipo passl'!'ord em um formuldric,

Exemplo:

cscr ipt type","text/javascr; pt" 51"( .. " •• /jqllery-L 2.,6 .j.s"'></suipt> esc 1'1 pt type=l;tex:t/j avasc 1"1 pit")·

S(docIlIRlE:nt). ready(functiionO {

$('button'!) .cHck(furtctlonO {

s,e : p.:ll$S~fO rd r ) .css C' bGl'der I I '2px $,(I li dflffOOOO j) ; });

J);

<./ sc r i Pit> ,o:;/hea.~> <body>

<blj '[toni tylpeili<"butt,ol1l">i3ordas nos i nput:s de senha<:/b~ttM>

<fo'.rlm act-IDo,I1I=!1!'>

<p,><labeh"illput de texto:<;nput type",'''teXi!:'' /></label>.:;/p>

<Pi» <1 abe 11 >1 nput de senha :<; nput type='''passwolrd'' 1><:/l.abell> </p> <P'> <1 abe II >i Il,put checkbox :<i nput type="'chedbox" /><flabe 11> </P> <p><;1abe11:>ill,pijJt subni t:: cinput type:~';su'bmit" /><llabeh</p> <p><:la~~ hinpu!: reset: <iinput: ty~e=" reset" /></labeh</p> <pl><h.~e hillput batao: <1 npu1; type="l'Iu'!:t(l.n" /></h'be h</IP>

</form>

,i) I[arq l]ivo:-2.2. 8 (.lUm I]

1'v1 aterial COM direilos aurora's

91

Nesse exemplo, utilizaram-se um bota.o para disparar 0 evento e 0 seletor :password para acessar 0 elemento input do tipo pa.s:sW'ord no formukirio ao qual sera anexado 0 comportamento definido no script (adicionar urna borda nacor vermelha).

:radio

Acessa os elementos input do ripo radi 01 em um formulario ..

Exemplo:

esc ri pt ·type","textj]aV'ascri pt" SIre-" .• /j(jll,ery~1. 2,,6 .. j S")<;s,crip·t> <5C ri pt type: 11 text/j avast r; pt">

S(doc!!IlIlent). ready(fullctiionO {

$C'bwttoni) .,c1ick(fwnctlon() .(

SC : ra~io·).. pal'entO. csst 'border-' I 'i 2[px 50111 d~ffOOOO I) ; l);

i» </scdp,t> </hia.d1> <body;>

ebuttnn tYI!)e::"butt<cm">Sordas nosi nplJt:s r,adi'o</oIJtto.n>

<form act'iio:n:=!!!'>

<p,)<Jabeli>ill'plJt de texto: -dnput type,,,,'''text'' /></lali:!eh</p> <p'>.:;] abe hi nput de senha : <inputtype.,,'''pass\,(ord'' />·</labe 11> </p> <pc> <1 abe II >1 I1PUt checkbox :<i nput typ,e",'''eheckbox'' /><./1 abe 11> <lr» <p> <1 ahe ll:>l I1pUt radi 0<: <1i "put type-" radio" I> <lhbe b</p>

<po> <:1 a 1)12 11 >1 ifloP ut reset: <l nput type=" rese t " I> <l1abe 1 »«] p> <p,><labeil>'il1lplJt botao: <i nput type="I:lUtton" j></bbeh</p>

</forll1>

..il l[arq~iYOI~2 .2.8d.tnm I]

N esse exernplo, utiliza ram -se tI In botao pa ra disparar 0 evenro e 0 seleror : radii G para acessar 01 elementoteput do tipo radio, no formularioao qual sera anexado 01 comporramento definido no script (adicionar uma borda na cor vermelha),

Neste script 19 I'm :script a seguiri passou-ss a esti liza{iBo da bor~a para 10 eiermen:l.opai parlentO IPorque al!:l,l!ns na.lJemadores, eome fi~erQ_lI. 3,n9o suportam bolld'as em Inputs dostip05. radl.o, e ch:ecklwJ(.

1\r1 aterial COM direilos aurora's

92

:checfkbox

Acessa os elementos i r1put do tipo checkbox em urn formulario, Exemplo:

(SC dpt type="![extjj3Jvasc:ript" SI'(::!:" .. /j~lIery-l. 2,,6 "j s"></s:eript> <scri' pt type:=" text/] avasc r ipt">

$(Oocument). ready(functionO {

$ (' buttol1' ) . eli ek(fufltti on () "

Sf: che:ekbo:x t) .palr'e,RtO ,esse bor~er". j 2p:x $'011 d #ffOO[lQ'): });

}); </scdpt> </heach <bod'!/>

ebu tten tYlpe","bwtt,oR">8Qrdas nos i npwts chec kbo)i; </bllJJttoi:!>

<form ;a,ctio;n","",.

<p,><labeli>il1pllt de textcr xinput type,='''text'' /></labeh</p> <p><labehill,put de senha: <input type;",'''passwo:rd'' I></l,abell></p> <p>.:;1 abe II ;>,i I1,PIJ t checkbox: <i I1pUt type.,'''checkbox'' I></labell> </rY> <p><:laheli>input radio,: d n:pu~ type=" radio' /:></1 abeh</p> <pi><la~e11>iIlPut reset: cinput type","r[eset" l></labeh</p> <p,><labe1>in,put betao: <i npul1: type=ubutt,on" /><l1abel></Il>

</form>

,i) l[a.rq~ivo~1.1.8e.!htrnl]

Nesse exernplo, utilizaram-se urn botao para disparae 0: evento e 0 seletor pai dccneckbex existeme 11,0 formulario ao qual sera. anexado 0 eompcrramento definido no script (adicicnar uma borda na cor vermelha),

:submit

Acessa os elementos input do ripo sublllrh: em urn formulario.

Exernplo:

esc ri pt type=!;text!j avasc ri pt l' s rc=," .. /j(jlilery-l. 2 .6. j.s!;) <her; pt> <script type=nt:ext/javascri pt":>

.$ (oocument) . rea.dy(fuflct~onO {

$ ('buttollI) . click(functionO {

$(' : s.~hlmiit ') • c ss.(' bord~e r", ' 2 px s01 i d#ffOOOO '[)I ; });

}):; </s,rip,t>

1\r1 aterial COM direilos aurora's

93

</head> <body:.

«button t¥IP@",lbbuuol1lil>Bordas nos inpwts s1Jbm; t..:/buttol'l:>

<fo,m act~o.n:",jHj»

<p'> <.1 ahe II >1 nput de. texto : «tnput type",'''texf' /><./1 ,al:H!:l ><./p> <.p;><1at)ehiliput de senha;<inpu.t typei;:;,j'pass\'((ilrf' /></labe11></pi> <p>< 1 able II >i I1PlJt cnecl<box::<i nput type,::'''checkbox"' J></labe 11> </p> <p>(:la~ehdI1PlJt radio: <'1 nput type ... " radic" /><./1 abeh<jp::. <p,><lalJell>il1put reset: <1n~put typ@="rle~!Hlt" 1><lhtH~h</p>

<p>o;:1 abe 1 ;.:i I1PlJt subai t: <: i I1PUt il:ype;;;i~sl!!'bmit'" 1><.11 abe l></p>

<pr> <:1 abe 1 >i nput bo tao: <1 nput type"," button" /></1 abe l> <!p>

,,{form>

.i) I[a.rq ui VOI~ 2,.2 .S,f.h't.m I]

Nesse exemplo, u til i zara m-se urn bceao para disparar 0 evenro e 0 seletor ::subrnit paraacessar 0 elemenro lnplJt do dpo submit no formularioao qual sera. anexado 0 comportemento definido no script (adfucionar uma borda na cor vermelha),

: reset

Acessa cs elementos i nput do tipo reset em urn formulario ..

Exemplo:

<script type="li:extfjavascri pit" SIi'C=" •• /jqll:ery-L 2,,6 "js"'></s,eript> <scri'pt type="textjjavascrl pit">

$(document). ready(ful'lc:t1 on 0 {

$(!bu·ttoni) .'c1ick(fuR(tion() (

S( , ; reset'), en (' border 0, • 2px so 1 ~ d :#ffOOOO'); });

});:

</ s c r~Il't> <lhead:> <body>

ebuttnn tYlpe","buttcm".>Bordas nos inputs r,eset</button>

·<fofim a.ct'ffiol1:="I!>

<p,><labell>inpu-i: de te1<1;o:<input type="'text" /></labe:l></p>

<p> <:1 abe 11 >1 ll,pijJ t de semlla:<:i "put type~"'pillSSl'fOrd" l><11abe 11> <lp> <p><:l a~~ hi nput checkbox::d nput type.='''checkbox'' /></labe 11></p> <pl><h.~e hinput r'ad~o: <1l'1pU1; type=" radio" /:></labeh</p> <p,><1ahehillplJt rssst: ci n:puit type .. " I'les,etij /></1 aheh</p>

<Pi> <1 abe 1 >,i Ilput s~bmi t :<i I1PUt ty~ei:iill'15u'bmi t'~ /></1 abe~l> </P>

1\r1 aterial COM direilos aurora's

94

<p,><label>"il1put bctao: ei nput type="I:wtton" j></hbeh</p> .:Iforill>

,i) l[arqlJ'ivQ:-1.2.8g.lnmll]

Nesse exernplo, utilizaram-se um bo[ao para disparar 0 evento e 0 seleror : reset pan) acessar 0 elementoinpue do tjpo resetno formulario ,10 qual sera anexado 0 comportamento definido no script Iadicionar uma borda na cor verrnelha),

:hil1:age

Acessa os elementos i nput do tipo image em urn for.nulario ..

Exemplo:

<Stu; pt ·tYiPe .. "textj]avasc:ri pt" SI"(-" .. /j~I,I'ery~1. 2 .. 6 .js"></sui pt> <script typ@=l1uxtfjavascriptH>

S(doc!!!ment). ready(fullctiionO {

S(,buttGlf') ,click(function() -{

$.(' : ~mag·e·), esse' border".! '2px solid ·CffOOOO') i });

});: </scdlllt> <!head> <body>

ebuttnn tYlpe="butt,cm">8ord.as nos; npwt:s ima9:em</bllttOli>

<fl)rurl act~on:="">

<p,><labehinplIt de text!): <input type='''text'" /></l.ahh<jp> <p,><1alJeh"il1put de selilha:<;llputtYPE!",,'''password'' !></labe11::.<!p>

<p!J> <1 a~e ll:>i Iilput checkbox :.::; nput typ,@",'''checkbox'' /></1 abe 1> <"po. <pi><lahehinput rad~o:: -dinput type~lIra.di'o" 1><llabeh<lp>

<P'> <;1 a..be 11;> i lip iJ t reset: .. d npuli: type"," r,es·et" I;> <{1 abe 1><1 pi> <p'><labehilJ1pnJt image:: ci nput type="~mage" Sl!'c="!)~."gH" l><llabel></p> <p,><'labell>ll1put botao: <ii nput: type~lIbuuon" /><l1abeb<!lJ>

</form>

,.i) I[ arq llIiv·o:-l.2 .8h . .htm 11

Nesse exemplo, udlizaram-se IUIn botao para disparar o evenro e 0 seleror :imag:~~ para acessar 0 elementctneut do tipoimage no formulario ao qual sera anexado 0 comportarnenro definido no. script (adicionar uma borda na cor vermelha),

1\r1 aterial COM direilos aurora's

ibutten

Acessa os elementos ~ nput do tipo buttOi1 e as elementos buttlJnem um furmuMrh

Exemplo:

-sc r,' pt typ@",nuxtl]avascri pit" src-" .. /j'qI.!H;!ry-l. 2 .6,. j 5"';.- </s,c r; pc:> <script type","text/java:sc:ri pit">

S(doclll!llent). ready(fullcd on 0 {

S('bu~ton'),(lick(fun(tion() {

~,C :bu~tOI1I). esse border' I t 2px soli d 'ffOOOO~); });

});:

<I sc ri p,t:> </head> <body,.

<:bLUttCII'ill tYIP@",,'"bUuM">Bord,3s nos inpwts buu,on</bl!lttoli'i>

<fOfltn a.ction",i'1i;,.

<p,><1a~e'l>ili'lput de texto:dnpui!; type",'''texil;'" !><!1abe1:><!p>

<pi) <1 a.be 1 >i npUl: de. senha : <;nput type",,'''password'' /></1 abe 11> </p'> <p><:labe ll:>"ill,put cnedbox::<input typE!~I1·che.ck.box" I> </labe 1> </p> <p,><lahell>'ilJ1p~t radio,: <Ii npult type=" radic" l></labeh<jp> <p'><labl!hi!i'lp~.t reset: <input type="r,es,et" /></labeh</p>

<P'><: 1 abe II >1 nput suhait: -c i I1PlJt t.ype",,"'sw'bmi t'' 1></1 abel> </p>

< p> <1 abe II >, i 11,P ut b 0 tao, :: <1 n:pu t type"," b u tten" /><1 label> <lIP>

<P'> <:1 ahe II >i!: Ieaento buttoa: <button> IBotao</b uttcm></la'beh"lp> </form>

.iJ l[a.rq~jv'o,~2 .2.S,i.htmll]

Nessc exernplo, utilizaram-se urn botao para disparar ,0 evenro e usamos 0 seletor ebutton para acesssr 0 elements input do dpo bl.litton, berncomo <0 clemente button no formulario aos quais sera anexado-o componamenno definido l!10 script (adicionar lima borda na cor vermelha) .

• iIliile-

'I!'~ 1- _

Acessa os elernenros ; I'Iput do tipo He em !lIU formulario.

Exemplo:

(script typ,e="li:ex.tfjavascr; pit" SfC:" •• /j~lIery-1.2.6 . js,"'></suipb escri pt typ,e;o;"text!javasc:ript">

S(docl.I!menr). ready(funcl:iionO {

1'v1 aterial COM direilos aurora's

96

$Cbuttoll1') .c1ick(fullction() {

,:( , : ftl e 'I) .css C boder ~" ,', 2px sol i ~ #ffOO{)O'); }):

}) : </scrip,t> </head> <body)"

ebuttnn tYlpe"" "buttlolll!')Sordas nosi np'llIts ~'l e</but ton::.

,<fO,tilll actl1o,n="">

<p>o;:1 abe 1 ;'.'1 I1PUt de texto:d npurttype",'''text,n l><.n abe h</p>

<pi> <:1 abe hi nput de senha: <i nput type",'''pilissword'' /></labe 11> </pr-:> <p><l abe hi nput file: <i nput type;;" fil e" /><:/1 aheb,</p>

<p,><ll abe ll:> i nput radi 0: <.ii n~pu t type=" radi '0 11 I:> </hbe h</p> <p:::.<:lahehil1put re.set: <1 n,put ty'pe"''' reset" /></hbeh</p>

<p> <:1 abe hi 1l,P1J t subni t: <i nput il:ype .. ;"'submit" /></1 alle'l> </p> <1J<><labehil1pllt bctao: <iin:put. type","bu.U,on" l></h'bel></p> (,p,>(:la~ell>"el,emenrto burton: <button> IBotao</buttoli()o(/la'bel:></p>

</form>

Nesseexemplo, utilizaram-se urn botao para disparar 0 evento e 0 seletor :fi~le' para acessar <0 clemente i n,put do tipo ~l e' no formulario ao qual sera anexado o cornporramenro definido no script (adiciorar uma borda na cor vermelha),

Neste seripl, passou-se ,aestiH~.Qao d!a borda para. 0 elemento-;pai ijJar,e:uO do in put Ii po n] e pOrqlll (ii. algu ns n8veg:,adores. ,como ri~re·fox 3. nao suporta m bOIld'as em inpuls ~o U,IiIt! file.

:h'iddem

Acessa 05 elementos ; nput do npo Mdde.n em um formulario,

\lej.a [C2 52.2.5] - Seletores de visibilidade,

Para limita~ o 8085:50 de ~L1alql.!ler urn do:s se'lelores de, fOllmul8~in iflg~lJrl:ad'os anteriormen1e a rum dete~minado, (o.mnuMlrio em ema pa~lna, lise' umselelor rnais eS!,l!clfiC{!. p10r eX'l!u1iIplo: rorm#uml i np:ut: text IUmila <0 aeesso aDI campos de le~o dOl fcrmlUlaliil) eem i d="lJiII".

1\r1 aterial COM direilos aurora's

91

2,.2.,9 FUtms [para formlllhirios

:elila blled

Acessa os elementos queestejam habilitadosem UIn formularin

[E:m lrliTMI_" todos 05 elem.enms de blm fommulanio €slao lrlabIlitados [por pad'mo. Vo~ pode desabiUlal',el'emenlOSloom 0 ruso dcatJibuto d~ sahled.

:disabled

Acessa os elementos queestao desabilitados ern um formularto Exernplo:

escrtpt typ,e="lrext/jaJvascr; pt" src-" .. /j~llI'ery-l. 2.6 . .j.s·"></suipt> esc ri pt type- "text/] avasc ri 'Pt">

S(do(umel1lt). ready(fun(l:~onO {

SCbuttOIl' ).c1 ick(funni anO {

S,(, :dha'blled') .C5S ("bOlrde!"'! i 2pl)( solid #ffOOOO'); });

});

<:/ sui pt» </hea~> <body>

<b~ tten tYll!'e=ubuu,on">8ord.as nos campos di sabol eo <!Ib~tton>

<folrm a,ttl on",,!1 ">

<p,><labeh,input de te.x.to:<lnput type","'te:n" d;sal:i~e,dl,.,,"disab1eG" i></la'bel><lp> <Pi) (1 a~e II >"1 nput checkbox :<; nput type:"'chedbox" /></1 abe 11> </p'>

<p><~labell>iI1PlJt checkbox: <input type;!I'''checkbox'' I><./l,abell></p'>

<1»<1 ,abehi npuli:checkbox.: <i nput 1J:)'IlE!,.."checkbox" dl@cked;o;;"check€,d" />,</11 a'bel><l~> <I» <1 ahe hi npu 1: chled.box:<i npu r type.='!~checkbox." /></l.abe 11> <lP>

<pr;.<label[>ll1put radioe <i n,put type",," radio" l></hbeb</p>

<pi><labell>input radio: <i nput type=" radie" /></labeh</p>

<p,>.::l abe l[ >'Se l[ect: <s·e·l ect>

<opJjon,>Op~'ilO l.</opti on>

<optl11 en se 1 eeted=" se 1 acted ">I)p~ao s,el,eci ,onada</o Pt~ or1> <oPt-mO!i!>Op~ao 3<1opti an>

<opt-m M di .sab1 ed","dii sab 'l,ed;i>Op~ao de's,abi li tada<! Gptl 011> <0'[:) ti on;;.Qpl;ao ,4</op,ti 0111>'

<opUornl>Op~.ao 5</opti on>,

</se 1 e ct> </1 abe h</p>

<p>< 1 a~e ll:> i nput be tao: <i n,put tllpe=" butlJ)on" di sah 1 ,e<d="'di sab led" 1:></~afuell><lp> </fOfm> ••.

~ Ira·rq~ivo·2.2.9'a .. html[]

1'v1 aterial COM direilos aurora's

98

Nesse exemplo, utilizaram-se urn botao para disparar 0 evento e 0 seletor : disabled para acessar todos os elementos no fotlnulario flIOS quais sera anexado 0 comportamenro definido no script (adiciouar uma borda na cor vermelha),

:checik:ed

Acessa os elementos radio e dileC.kbox: em UlTI formuhi.rio para os quais se tenha declarado 0 ambuto decked.

Exemplo:

esc ri pt 'type","textj]aV'ascri pt" SIre-" .• /j(jll,ery~1. 2,,6 .. j S")<;s,crip't> <5C ri pt type: 11 text/j avast r; pt">

S(doc!!IlIlent). ready(fullctiionO {

$C'bwttoni) .(;1ick(fwnctlon() .(

$,( i : che~cked i) . parentt) • cs s ( , border ii, i 2px so 11 d ,#ffOOOO ') i l);

i» </scdplt> </hia.d1> <body;>

ebuttnn tYI!)e::"butt<cm">sordas nos c.ampo:s clhecked</bUittolt>

<form act'iio:n:=!!!'>

<p,><J abe hi 1l'p1J t de texto: -d nput typei .. "text" di s abl e,d;;;"di sab1 eo" />·</1 aibe l:></p> <p,><J abe 1I>i nput checkbox : <inputtype.,,"'checkbox" />'</labe 11> </p>

<pc> <1 abe 11 >1 nput checkbox :<i nput typ,e",'''eheckbox'' /><./1 abe 11> <lr»

<P:>< 1 abel >1 nput checkbox: <i nputt:Y1H!,-"checkbax" ,chec:ked~'" checked" /></llabe 1 > <'1'P> <p'> cl aee 11 >1 iflput cfleckbox ::<input type;='''checkbox'' /></labell> </p;>

<p,>(1abeil>'ilflput radio: <input type="r,adi,oll /:></label></p>

<pi> <1 abe hi nput radi 0.: <1 nput type.:" radi 10!I C h·ecked:::"(llecked" /></hhe 1></p></form>

,i) l[arqmJilJol~l • .2 .9b. him II]

Nesse exemplo, unlizararn-se urn borao para disparar 0 evenro e 0< seletor : checked para acessar rodos os elementos no formulario que tenham 0 atributo checked! aos quais sera anexado (I comportarnenro definido no script (adicionar urna borda na cor vermelha),

Neste script, paSSOijJ"S@' a es~liza!iao da Iloli'da para 0 lelementOoipai par,entO des elemen!os com atrllbulo dteck,ed porqta .argulls nEwB9:8dores, romo Firefo'x 3, nao suportam hordes ermelemrelrlt~soollll s.lrilmllo checked.

1\r1 aterial COM direilos aurora's

99

:selected

Acessa os valores quetenham sido selecionados em controles de um (ormlliario.

Exemplo:

o:;stylle titP:~"'''t[@)(tlcss:'me''[j;,a"na,ll ">

b{c,Q,lor:iI!'c30; } </stylle>

<script type=l1t:ext/javascri pt" SI"(=;" .. /j~ll>!!ry~1. 2,,6 .js";></suip'[> escri pt type=!1text/jaV'ascri pt">

$(oocument). ready(fu.nctionO { $Cse~ect'l) ,.change(flllilct;lonO { $,( j':spalii") ,[emptyO;

$,( j opti alii: se 1 e ctedll ) • e'(!Jch(functi Oi1() {

S(,sllanl).appelld(IVoce: se'Iectonou: dt>' ... S(thfs)"textO T' "<:jIJ><br />1); ])::

});

)); </scdp,t> </head> <body>

<:fO>rtm ac't-mon.",!!I! method","''')

<P'> <;1 abe ll>Se 1 ec i 0 rJ e unes tad I) : ebr I> <5 e 1 ect mu It ] p l e .. "m II H: ipl e "> <opU Qn(;>Amazonas <f'opt] on>

<:op h ClrJr>/l.c re</,opt](II1!>

<opU oJi[>Ce,a.ra <.!opti on>

<op1:~orJ>E:s:pi rita Santo<!oplt:i'on>

<opU on[:>Goi as </opti Oil>

<! sell ec:t></l.a b@ 1> </p>

</fGrm> espans </spanr>

..il l[arquivo:~1.2.9[('.html]

]P,am usar lI!Tl dos rneliacaltacle,es empregado ria sintilxe dos se~etllres do lipo (: [ ]) erm time string GOfillO parte de urn nome, escape' 0 'C8r(lctere 'com <lIlBS \\ (b91iT9S irMlerMas~. ~or exemplo: para aeassar !JIm elemento com 0 sele~or de atribulo rl~a:me, se 10 lIalof de name: e xp] to, ao definir 0 seletor, LIse I I{' [name - !' xp \ \ [to" ]11) em lugar de S (I (rn,ame = ~'x p [to["] I[) , MeIlilor ainda,: ewle I1Isali

esses m.etacara.c~oo$ ernSlII'3 matcaliio,

1'v1 aterial COM direilos aurora's

100

rv1 aterial COM direilos aurora's

CAPITULO 3

Metodos de mlanipul,al~a,ol do DOM

Neste capirulo, serao esrudadas as Iuncionalidades disponfveis em jQuery para inspecienar e definir arriburos e seus respectivos vamores aos elementos corrtponenres de uma pagina,

l.1M,anli prllll!,a~ao de ,at!ri b utes gerais

seletorJQuery •. aur(nome_ otflbu.tr;)

Acessa o valor do atributo definido no parametwnome....atf'1blJt.o, para 0 prirneiro elememo eneonrrado pelo seletorjQu€'ry. Case nao exista 0 atriburo na marcacao, 01 valor retornado sera undefined (indefinido),

Exemplo:

<stylle type="!l:IE!xt/'css,!! media=1!a.ll ~I>

Iresultaclo {display:rmn,e: width:300px; padd;lng:8px HIPx: Ibordelr:lpx solid #000;

ba.ckgmun:d,: ifm:} ,<!style>

escrtpt type~lIll:extJjaya:scriIPt" src~" .. /j(jUlE!l'y-l. 2 .6.,js'''></s(ri'pb <script t)lpe=ntext/j~vas(riIPt">

1... S(doc~lII~rlt) .. ready(ful'lctionO {

2. $('but:ton!) • c1ick(rurn:,ctionO (

3., var vS!lorAtlributo '" S('lhl') •. attlr('titJe"):

4. S·c #resl!1 tado") .. ess(' ,~Ii sp 1ay!, ' IJ 1 ock !)

.. textCO v.aloi:r do :atrilbut:,o, Itlith e: · + valoIi'Atlributo): });

SOl

6. H;:

un

Vale a pena ter este livro como fonte de consulta

102

</sc.dpt> .:Ihead> <body>,

<,blJ no iii tYlpe='"buttm~i'>Atri lJutto<l~utton(;>

<hlL ti tl e="~ ogoti PQt">Cabe~a 1 ho ntvel 1 C,Ofllatri buto,ti t 1 e=" 1 ogo ti iPO" </111> < p i d;:;t' lJ!m "') f ri me i ro pa rag r a fo com at ri b ute i d;::; jj lJm"'</[p>

ep clas:s='~trd[Hel"ente">segtlndo parigrafo(tom atr-i buto dass='"di fuente" </[p> <p 1:1 ass .. '~trdlih I"ente">segwndo paragra.foc,om atr'i buto class-' di fe rente" </[p>

Nesse exemplo, utilizou-se Lim botao para disparar o evento, Acompanhe a seguir 0 fl.ilncionamento de cads linha do codigo desenvolvido para este exemplo.

Codigo comentado:

Unha(s)

Linhas ] e 5 Container obrigtlt6rio para todoscnpt jQuery. \ireja (Cl 5lJ.621.

Linha 2: Define uma ftlncao a set" executada quando 0 usuario clica 0 borao existenre na pagina,

Pega 0 valor do! atriburo title do prirneiro elemento ~l que aparece na marcacao e armazena na variavel val O,tAtrilbut,o.

Seleeiona 0 div#re'sUilUdo 'que foi inicialrnente escondida corn a regra CSS IFlresult.tJ.do {di sph.y: nome; J e a torna visfvel com. 0 metodo j Query (SS ( I di' sp lay", ~ hl ock I) .. Em seguida, usal'ldo 0 metodoj Query textCO vaJoli' do atr ibutc title e: 1+ valorAtrii[muto)escl'fvedel1ltro do di vlrtesultad'o a (rase apresenrando 0 valor do arributo acessado, que havia sido armazenade em va'lorAtrilbUilo.

Unha3

Veja 0 fUlllcionarnenw desse scriptclicando 0 botao"Axribllnd' no arquivo indicado, disponrvel no she do livre.

seletorjOuery: •. attr({atr1buto:volor})

Acessa 0 elernento definido em seJe'torjQtte'ry e insere 0 par aufbU'tr!) ;; "valor" no elem en to, Voce pede inserjr quantos pares quiser, No exernplo a segult, inserjram-se dois pares.

Exemplo:

<styl[e type","lttext/css:" m9"ci.a",II a.l1 "'> i mg {displ.ay:: none.,:}

</sty~[e>

1\r1 aterial COM direilos aurora's

(aprtu~:o 3 .. M@tocos d@ lllanjpl!Jla~a,o do DOM

11113

(5(1'; pt ty~"e="text/jiwascri pt" SIl'(;''' •• /j(jt!lery-L 2 .6.,js"></st(ri pt> <5cri pt t:ype",Utext/jaV'ascri pt;H::.

L S,(~oc~m@Rt). r@ady(fullctionO {

2., $CbUttOlli) .cl icktfuncriont) {

3. I('img').css('display', 'b~ock').attr({

,4.,

S.

6. });

1. });

8. ]);:

</script> .::/head> <body>

<img I>

src: "maujol" .,j pg'iI., alit:: ~. Fo'tDdo, ~a:uj or'~

,ill[a,rq~iVO:~3.Jlb.lltm,l]

Nesse exemplo, utilizou-se urn botae para disparar 0 evenao, Aeompanhe a seguir o fundonamerno de cada linhe do codigo desenvolvido para esse exernplo

Note que se inseriu urn clemente irnglva:zio no documento e escondeu-se com a declaracao C55 ;lIIg {disp,laY::l1lolle;}.

Codigo cornentado:

Unha(s) Demi~ao

Linhas] e 7 Container obrigllt6rio para rode script jQuery:'Jeja [CI51.].6.21.

Lioha 2:

Define uma fll]l~aO a ser executada quando 0 usuario clica 0 botdo existence na pagina,

Selecion a o{s,) elementols) i mg existenre (s)na pa,gina (110 exempln, h.a um. elemento) e revela-o com uma declarscso CSS. A seguir, insere no elemenro os arribueos src ,que definem 0 caminho para Ulna imagem eo auibuto ah que descreve sumarjamente a imagem,

Lililha 3

Veja e [uncionamento desse scripr clicando 0 botiio'~n·ibuto" no arqmvo irtdicado, disporrfve! no sire do livro .

s ele,rorjOuery •. aUrtatriv'Uto, valor)

Acessa 0 clemente definidoern seJe'to'rjQue:ry e insere 0 par arribut,!) ~ "valor" 110' elemento, Ao conrrario do metodo antericr, este metodo perrnire inseri r sornente um par atributo/vclor,

Exemplo:

1'v1 aterial COM direilos aurora's

104

<5tylle type",":u'l.xtICSs.01 m:edta .. Hall ":>

i mg {diisplay:: non@';} </stylle:>

<script type","textljavascri pt" 51"C=" •• /j~(JIery-l. 2.,6 .. j.s"'><hcript> esc 1"1 pt tY'P,e;:;"lJ:ext/j svasc ri ptH>

HdocumEmt). r~ady(func.tionO { $('button').click(function() {

~,( ! '; m!}!). es s ( ! di sp,l.ay! " block!')1 • attr{ III s ItC r I !lllIi'iujor. jlPg !) : });

})i;

.::/ se rfI Pit> </head> <bodY"

dmg [»

Nesse exemplo, utilizou-se um borao para disparar o evemo. 0 funcionamenro deste script e identico 810 aneerior, mas aqui !laO seinseriu 0 atributo al t.

Veja 0 funcionamento desse scripr clicando 0 botao ':A.triburo" no arquivo indicado, dispomvel no site do livre,

seletorjQuery .. rem GveAUr( otribu to.)

Acessa 0 elemento definido em s~le'tlorJQlIery e remove 0 atr-ibuto definido 110 paramecro atrjb~tO'.

Exemplo:

<sty'l~ typ~-"tlext/css;'! me:dia-"a.ll ;'>

di v {wi dth : 300px; he; ght: 175px: borde r: lpx soli d #OOO;} #remover {Iback,groundl :iiOfO; }

</sty~le>

<script type~l1ll:ext!javascri pt" src-" .. /j~LI,ery-L 2 .,6.jsll'></s<cript> esc ri pt type=nt:ext!j avasc ript">

$ (aOCUillent) • rea.dy(func:HonO {

$ c button' ) .cl i ck(fultcti on o {

S:( i#remover i), relll!GveAttr( I iid') j });

}]I;

-</ s c ri !l't> </head>

1'v1 aterial COM direilos aurora's

(aprtu~:o 3 .. M@tocos d@ lllanjpl!Jla~a,o do DOM

<body>

<buttol'll tYlpe","butt,otli">Remover</buttol1> <div i d!",il rl@IMO\l@lrii></dill)'

Nesse exemplo, utilizou-se urn batao para disparar oevento, Observe que um di v com i d = "'l'e.mO'f,er'!' e estill zado com CSS" A cor de Iundo verde {#ofo)foi declerada em uma regra CSS para 0 div. Se remover oid do div, 8 regra CSS perdera 0 efeiro, 0 script faz exararnente isso, remove old e 0 div perde 0 fundo verde.

Veja 0 funcionamento desse script clicando 0 botao "Remover" no arquivo indicado, d isponfve] no site do livre,

l.2M,anipiluta~ao do atributo class seletor1Query.addC'ass( valoc classe}

Acessa 0 elemeneo definido em s'eletorj'O~N;'ry e atribui-lhe uma classe de nome igual a 'val0Lc~a5se.

Segundo as eS,peeifica¢es pam a H1Ml, 10 alrlbuto clas,s aoeita urn ·OlJ mais vat'ores, N0C8S0 de liTla:s de urn va'tor, as, nomes !':le'lllem ser separad'os per espaQO. I::x:emplo de para:gr,afo corm Ires cl'asses rdifererdes:-=p (lass iii "lim sete o!Jtra/I'>.

Exernplo:

<stylle type="tt,e.xtlcss," m:e~,d;a="al1~'>

p , mi nha._cl.asse {col or':#fOO; fcnt-sjze :.4Spx;} </styh>

escrlpt type=Utext/jav.asc:ri pit" SIi"I':=" •• /jqwery-l. 2 .. 6.,j s,"'></s,eri pt> <sed pt t)/IJe",Htext/javasc:ri pitH>

$(oocument). ready(functionO {

S ('button' ) . ,c11 ck(funct'i on .0 .£ $.('p") "addUass(' JIIinhl_(;lasse') i })i

})Ii: </scrilllt> </head> «bo dy;:.,

ehu tten tYlpe="bu1l:t,on">Adii ci ona.r</bulttoll>

<p') P'aragrafo ao qual foi adi ci onada !lima cl as se COOl jQuery. </p>

.iJ l[a.rquiv'o:-1.2a.html]

1'v1 ateriat COM direilos aurora's