Jquery A Biblioteca Do Programador Javascript PDF

Aprenda a criar efeitos de alto impacto
em seu site com a biblioteca

JavaScript mais utilizada
pelos desenvolvedores web
-
-- .
.... - ....
-
' M aurício Samy Silva
novatec ' www.mau;or.com
. \ '
Sumário
A radecimentos ....................................................................................................... 11
onsa bilidade.·-··· ............................................................................... 12
Sobre o autor 13
Introdução .............................................................................................................. 15
Parte 1. Fundamentos teóricos da biblioteca jQuery ............................. 23

Capítulo 1• Oque é jQuery? .................................................................................... 15
1.1 Definições e conceitos ...... .......... .... ................................... .. .................... 25
Ll.l O g ue é jQuery? ... ... .... ... ... ... .......... .. ................ ......... ... ......... ... ...... .25
1.1.2 Para g ue serve jQuery? ... .. .. ................... ............. .. ........................... 27
1.13 jQuery cm conformidade com os Padrões \Veb ................................. 28
1.1.4 Características da biblioreca jQuery ............. ..... ............................... 29
11.5 Como instalar jQuery ........ .............. .. ................. .. ................. .. .......30
1.1.6 jQuer y na prática ............................................................................ 32
1.1.7 Fundainentos jQuery .......... .. .. ..... .............................. .. .......... ........ 40
Capítulo 2 • Funções-padrão e seletores jQuery ........................................................ 45

21 Funções-padrão jQuery .......... .. .......... .. .... ............ ............. ............ ..... .. .. 45
2.2 Seleto res jQuery... ........... .. ..... ........... ..................................... .. ..... ..... .... 55
2.2.l Seletores simples ..... .......... ... ............ ......................... ..... ....... ....... ..57
2.2.2 Selerores con1poscos ........ ........... ... .... .. ... .................. .... ... ...... ....... .. 60
2 2 3 Selemres - Eilrros básicos 64
2 24 Seletores de conteúdo 73
2 ?..5 Seletores de visibilidade . . .. . . .76
22.6 Seletores de atriburo .. .... ... ,, ... """ .. .. ............ " .. .... " ...... .,, ,, .. ,, ....... .. .79
2.2.7 Filtros para seletores-filho ........ .. ... .... .................. .... .. .. ...... ........... .. .85
2.2.8 Seletores para formulários ..... .. ....... ... ..................................... ...... .. 88
2.2.9 Filtros para formulários .................................................................. 97
Ca ítulo 3 • Métodos de mani ula ~o do DOM ....................................................... 101

3.1 Manipulação de atribu tos gerais ............................................................. 101
3.2 Manipulação do arriburo class . .. ......... ... ................... . . . ..... 105
33 Manipulação de comel!dos hnnl.. ......................................................... 108
7
8 jQuery • A Biblioteca do Programador JavaScript
3.4 Manip ulação de textos .... ... ... .. .......... .... .. .... .... ..... .................. .. ..... ....... 109
3.5 Manip ulação de valo res ... ... ........................... ... .... ........... ... .... ....... ....... . lll
3.6 Manipulação de conteúdos .................... ................... .......... .................... 113
Ca ítulo 4 • CSS e ins e -odo DOM ....................................................................... 123

4.1 Estilização geral ........................................................................... .. .... .. 123
4 J Posjcionmuenro )) 5
43 Largura e altura ................................................................................... 130
4.4 lnspeção do DOM .. ........... .. ..... ............ ...... ... ......... .......................... ... 136
Ca ítulo 5 • Eventos............................................................................................... 151

51 Evemos aux iliares .. . . . . . . . . . . . . . . . . . 1.51
5.2 Eventos de interação ............................................................................ 164
53 Manip uladores de eventos .. .......... .. ..................... .. .. ... .... .. ...... .. .... .. ...... 166
54 Notas sobre evenros 169
Ca ítulo 6 • Efeitos................................................................................................ 173

6 1 Efeitos básicos 173
6.2 Efeitos corrediços .................... ................ ....... ......................... ..... .... ... . 177
6.3 Efeicos d e opacidade ......... ........................... ... ........................... ...... ... .. 179
6.4 Efeitos personalizad os .............. ... .......................................................... 181
Capítulo 7 • Funções utilitárias.............................................................................. 185

7.1 lnrrodução ............................... ....................... ...................................... 185
7.2 Flags para agentes de usuário .... ............................ .............. ...... .... .... .... 186
73 Operações com arrays e objetos ........................................................... 190
7.4 Teste de função ................................................................... ... .............. 196
7.5 Operação con1 string ... ... ............................................... .. .. ... .... ... ........ 197
7.6 Funções utilitárias personalizadas ......................................................... 198
7.6.l Sintaxe geral ...................................... ....... ....... ........... ..... .... ... .... ... 198
7.6.2 Funçao $. corTexto .............. . .......... . . .. . .......... . ... . ..... 200
Ca ítulo 8 •Anima ões básicas .............................................................................. 213

81 Marcação mfnin1a ...................................................................... .... .. ..... 213
82 Animação com show() e hide() ............. .. .......................... . . 215
83 Animação com toggle() .......... , ....................... . .............. 219
8.4 Suavizando a animação ........................................................................ 228
85 Animação com slideUp() e slideDown() .......... .... ..................... 231
8.6 Animação com fadeln() e fadeOut() ....... . .......... . ... . ............ . . . 233
8.7 Animação personalizada com animate() . . . ... . ........ . . . .......... . . . . . 234
Ca ítulo 9 • Revelando conteúdos ......................................................................... 239

9.1 FAQ CSS ......................... .. ................... ................................................ 239
~1arcação básica .... ......... ... ... ............ ....... .................. ............ ....... ....... 240
Sumario 9
Primeira etapa ........................................................... .. ........................ 243

Segunda eta pa ......................................... ............................................ 248
lercei ra e capa ....................................... ................................................ 254
Quarta etapa ............. .. ............... .. ..................................................... .. 259
Quinca ccapa ....................................................................................... 261
9.2 Página de notícias .. .... .. ......................... .. ................... .. .... .. ................ .. 265
:Marcação básica .................................................................................. 266
Prin1eira etapa ....................... .. .............................. ..............................268
Segunda eta pa .... .. ......................................... ............ .. ........................ 271
Ca itulo 1O• Efeitos em tabelas............................................................................ 275

10.l Desrinação das rabeias HTML. ........................ .......... .. ........................ 275
10.2 Marcação de cabelas .......................................... .. ..... .. .... .. ........... ..... .. 275
103 Tahela de horários de ônjbrn; 276
Marcação básica ... ......... .. ........... .. ............. .................................. .. ...... 276
10.4 Efeiro zebn1 ............................... .. ..... .. ...... ...................... .. .................. 280
Zebra par-ímpar....... ............. .. ....................................................... .... .. 281
Zebra dois-dois .. .......................... .. ............................ .. ......... ...... .. ....... 283
Progressão aritmética ................ .. ................. .. ................... ................... 286
Z ebro três cores 286
Zebra três-três .......................................... ............... .. ........................... 288
10.5 Efeitos para destacar ......... .. .............................................................. .. 290
Desracar linhas .... .. ................... .. ............................................... .. ...... .. 291
Desracar colunas 292
Dcsracar li nhas selerjvamenre 29'i
Revelar e esconder linhas ........... .. ... ......................................................300
Advertência 305
Ca ítulo 11 • Efeitos em formulários...................................................................... 307

1ll Validação de formu lários .. .... .. ............................. .. ................ .. .... .. ...... 307
112 Placeholder para c-ampos ............. ........................................................ 307
llJ Dicas de preenchimento .... .. ..... .. .......................................................... 311
ll.4 Dcsabilirar campos ... ........................ .. .. .. ............................................. .312
115 Revelar ca1npos ................................................................................... 316
11.6 Elen1enro legend .. .................... .. .. ........ .. ..............................................318
11 .7 Selecionar todos .. ,........ ,,,, ........ ,,,,, , , ,, , ,, ,, .,, .. ,...... ,, ...... ,, .. ,, ,, .... , ........ .. 320
11.8 Validar. .. .......................................................................... ................... 322
Capítulo 12 • Imagens ...........................................................................................325

12.l Tntrodução ................ ............... .. ................. .. ................... .......... .. ....... 325
12.1.l 1magens acessíveis ................ .. ....................................... ............... 326
12.2 Ampliação de imagens ............. .. ....... .................................................. 327
123 Galerias de imagens .......................... .. ...... .......................................... 340
123.l Galeria com thumbnails .. .... .. ........ .. ................... .. .......... .. .... .. ...... 342
124 Slide-show 347
Capitulo 13 • Plug-ins ........................................................................................... 355

13.l 1ntrodução .... .. .. ........ ...... .. ..... ....... .. ... ............... .... ...... .... .. ....... ... ....... . 355
13.U Plug-ins de terceiros ............. ............ .. ... ... .... .... .... .......... .. ..... ....... 355
13.12 Plug-ins nativos ...... ....... ....... ........... ..... ....... ... ........ ....... ....... ....... 356
13.2 Plug-in jCarousel ... ... ..... ..... .................... ............ ... .......... ..... ....... ..... .. 356
13.2.1 1nsralação .......... ..... ............ ............. ..... ....... ............. ..... ....... ..... .. 358
13.2.2 No1nc das iln agcns ........ ........... ............ .............. .... ....... ....... ....... 359
133 Carrosséis horizontal e verrical.. ... .... ....... ..... .. ..... ..... ... ... ....... .. ..... .......360
134 Carrossel com scroll au romático ... . .. . . . . ... . .. ... . ... . . ... .162
13 5 Car rossel co m com and os ex rem os 365
13.6 Carrossel com efeit0 thickbox .. .... ........... .......... ... .. .... ........ .. ....... .. ..... .368
13.7 Plug-in jQuery Accord ion ..... ...... .... ........ .... ....... .... ... .. .. .................. .... 370
13.7.1 lnstalação .. .......... .. .. ............ ........... ..... .. ..... ... ...... ....... ..... ..... ........371
13.Z2 Folhas de estilo .. ... .. ...... ... ... ... ... ... .......... .... ....... ..... .... ...... ..... .... .. . 372
13.8 Sanfona sin1ples ........ ..... ....... ....... ... ... ..... ...... ...... ........... ... .... ...... ...... .. 372
l3.9 lv1enu sanfona .... ...... ........................ ...... ....... ................. ...... ...... .. ...... 375
Ca ítulo 14• Menu Mau'or....................................................................................... 379

14.1 1ntrodução .. ....... .... ........... ........ ........ .. ... ... ... ... .. ...... ..... .. ... ... .... .... ..... .. 379
14 7 HT M 1 e CSS 380
143 Script .. ...... .. ....... ... ... ........ .... ... .. .. .... ...... ..... .... ... .... ... .... ... ..... ... .. .. .... ... 387
Apêndice A• Seletores .......................................................................................... 389

A.l Seleto r ti po ..... .... ...... ...... ... .... ... .. .. ..... .. .... ... .. .. ..... ...... ..... ............. .. .... .. 389
A 2 Se(eror idenrjficad or 1í n ico 39 0
A 3 Seleror classe .. ... ,, . .. .... . ,, . .... . ........ ....... .... ,, . ,,,, .,,,, . .... .. .. . ,, . .190
AJ.l Classificação d os seletores .................. ........... .... ...... .. ...... ..... .. ...... 390
A.4 Seleto res avançad os .. ...... ...... ............. ...... .. ... ... .... .... ... ..... ...... ..... .. ..... .. 396
Apêndice B• Codificação de caracterespara HTML ................................................. 397

Caracteres especiais para HTML .................. .. ........... .. ................ ....... ... .... 397
Caracteres matemáticos, gregos e símbolos para HTML ......... ...... ... ... ... ..... 398
Caracteres para HTML - lS0-8859-1. ................................................... ...... 399
A êndice C• ElementosHTML ............................................................................... 401
apêndice D• Atributos HTML ................................................................................. 405
a êndiceE•FAQ .Que ........................................................................................ 415
Referências biblio ráficas...................................................................................... 425
Índice remissivo .................................................................................................... 427

Agradecimentos
Agradeço a Deus por ter me dado forças, disposição e motivação para escrever
este livro.
Sou grato aos profissiona is da Novatec Editora, diretamente envolvidos na

publicação do livro, em particular ao editor Rubens Prates, que, ao longo de rodo
o processo de criação, esteve presente guiando-m e com suas dicas e informações
sobre as particularidades e implicações editoriais próprias à fase de criação de
um livro.
Meu maior agradecimento é a você, leicor, por interessar-se em aprender jQuery

e honrar-me com a leitura deste livro.
11
'vlatenal com '111 J& autorais
Isenção de responsabilidade
Todos os esforços foram feiros na elaboração deste livro para assegurar o for-
necimento de informações as mais precisas, completas e exatas. Contudo, as
informações aqui contidas são fornecidas "como esrão" e sem nenhuma garantia,
seja expressa, seja implícita. O autor, a editora, os distribuidores e qualquer en-
tidade envolv ida direta ou ind iretamente na sua comercia lização não assumirão
nenhuma responsabilidade por qualquer prejuízo ou dano, direco ou indireto,
consequente às informações contidas nesre livro.
12
'vlatenal com d1re1to& autorais
Sobre oautor
Maurício Sa my Silva é g raduado em Engenharia Civil pelo lnsàturo Militar d e

Engenharia (! ME). Fundador e ex-diretor-presid ente d a Planep Engen haria,
exerceu o magisté rio paralelamente à Engenharia, tendo sid o, ao lo ngo d e 25
anos, professor d e Geometria Descriàva e Matemática. Seu primeiro comaro
com prog ramação para co mputad ores deu-se ainda quando aluno, ao aprender
a linguagem Fortran. Àqu ela época, era comum passarem-se noites traba lhando
em uma máquina per furado ra de cartões que seriam processados em um então
poderoso IBM/ 360. Em 1982, adquiriu seu primeiro computad or pessoal, um
T K-80 com processad or Z-80A d e 3,25 MH z, teclad o d e mem b rana com 40 teclas
e memó ria RAM d e lKB expansível até 16KB. Trabalho u com os mode los TK-82,
TK-85, TK-2000, DGT-100 e assim por d ia nte, até os dias atuais.
Sua experiência com d esenvolvimen ro d e sites inicio u-se em 1999, com o

Fron tPage, con siderad a um a ferramen ta sensaciona l na constr ução d e sites. Em
2002, po r acaso teve seu primeiro contato com o site d o \VJ C e, como fico u vi-
vamente impressionado com a proposta desse consórcio, começou a pesquisar e
a estudar as Web Standard s, rendo como fonte d e consulta o material publicad o
na internet em líng ua inglesa. Ao contrário d o que ocorre nos d ias a tua is, qu an-
do vá rios d esenvo lved ores escrevem em blogs pessoais sobre \Veb Standards, a
literatu ra a respeito d o assu nro em portug uês era, então, p ratica mente nula, mas,
mesmo assim, quando encontrada, limitava-se ao básico do básico.
No segundo semestre d e 2003, estimulad o pela completa fa lta d e material

de consulta g ratuita na intern et e impu lsionado por s ua veia d e educad or de-
senvolvida durante anos em sala de aula, decidiu lançar o site CSS para Web
Design, o qual é nacionalmente conhecido como o site lvlaujor, hospedado em
http: / / www.mau jor.com/ . A proposta inicial d o site era a de divulgar a cascading style
sheec (CSS), ou folh a d e estilo em cascara, com base no compartilhamen to d e
suas experiências com tal técnica . Com a pronta aceitação e o sucesso crescence
do site, o objetivo inicia 1tornou-se mais ambicioso e passou a ser a d ivulgação
das \Veb Sta nd ards.
13
'vlatenal com '111 1& autorais
No início de 2006, com a popularização e a adesão maciça aos blogs, criou o

Blog do Nlaujor hospedado em http://v.ww.maujor.com/ blog/, com propósito seme-
lhante ao do site, mas com uma dinâmica mais ativa e a efetiva participação de
seus leitores.
Tanto o sire como o blog constituem-se em referência nacional para Web

Standards e, sem dúvida, foram e continuam sendo um dos grandes responsáveis
pela divulgação e popularização das \Veb Standards, assim como, em parricular,
das CSS no Brasil.
Maujor, como é conhecido o autor, é ainda um ativo frequencador de fóruns,

escreve para vários porcais brasileiros voltados a desenvolvedores web, é auror
de artigos em inglês e de u-abalhos relacionados às CSS publicados em sites in-
ternacionais sobre \Veb Standards. Ocupa o segundo lugar na lista de trndurores
mundiais de documentos do W3C por quantidade de documentos versados.
Publicou em seu site mais de 40 traduções de arrigos sobre Web Sca ndards
escritos por consagrados aurores internacionais. Traduziu para o português as
fe rramencas para testes de acessibilidade em sites, denominadas Analisador de
contraste de cores e Barra de ferramentas para acessibilidade na web, ambas em
parceria com o WAT-C, um consórcio austra liano volrado ao desenvolvimento
de ferramentas destinadas a testes de acessibilidade.

Introdução
Este livro tem por objetivo fornecer aos profissionais envo lvidos com o desen-
volvimento para a ·web os conceitos fundamenta is e técnicas de programação
necessár ias ao emprego da biblioteca jQuery na criação de efeiros especiais e
obtenção de comportamentos de variadas naturezas em sites web, tornando-os
mais interativos e visualmente mais agradáveis e amigáveis. Aborda o uso da
linguagem de programação JavaScript segundo a sintaxe especificamente criada
para fazer funcionar e tornar usável a biblioteca jQu ery.
O livro está dividido em duas partes como descrito a seguir.
Primeira parte - Fundamentos teóricos da biblioteca jQuery
A primeira parte compreende os capítu los dela 7 e tem por objetivo apresentar a
biblioceca,cxaminar sua sintaxe geral e escudar o emprego e finalidade dos métodos,
propriedades e d iferentes funcionalidades disponíveis na biblioteca ]Quer}(
No esmdo dos métodos, adorou-se um modelo que consiste na apresentação

da sintaxe do método seguida de uma explicação da sua finalidade, em um pe-
queno trecho de código de emprego real demonstrando o uso geral do método
e, finalmente, na disponibilização de um a rquivo HTML para download ou
consulta on-line, hospedado no site do livro, comendo a demonstração prática
do método escudado.
Segunda parte - jQuery na prática
A segunda parte do livro compreende os capítulos de 8 a 14 e tem por objetivo de-

mon strar efeitos jQuery de variadas naturezas e de emprego real em um site.
Cada capítu lo desta parte está estruturado para escudar efeitos em elementos
específicos do HT ML O capítulo 8 introduz a parte prática do livro e dedica-se
ao estudo dos efeitos de animação básicos com ênfase nas técnicas de revelar e
esconder conteúdos marcados com diferentes elementos HTML.
15
O capítu lo 9 mostra a criação de efeitos para esconder e revelar conteúdos,

demonstrando as técnicas aplicadas a uma página contendo um FAQ CSS e a
outra, contendo notícias.
O capítulo 10 dedica-se aos efeitos em tabelas de apresentação de dados,

estudando técnicas para destacar trechos delas qu e recebem o foco do usuá rio,
bem como maneiras de apresentar rabeias extensas, com mecanismos de reve-
lação de trechos destas.
O capítulo li aborda os formulários HTML, mostrando os efeitos fundamen-

tais normalmente implementados no desenvolvimento deles, tais como criação
de máscaras e dicas de preenchimento de campos.
No capítu lo 12, examinam-se os efeicos em imagens, abordando não somente

a manipulação de imagens individualmente, mas também a criação de galerias
de imagens.
O capítulo 13 dedica-se à criação de efeitos em mecani smos de navegação.
No capítulo 14 examinamos o caso real de um menu tipo sanfona. Trata-se do

menu do site 1Y1wt.maujor .com. Ensinamos não só o script jQuery que faz funcionar
o menu, mas também as técnicas CSS da sua construção.
Para quem foi escrito este livro

Este livro foi escrito para aquelas pessoas envolvidas na criação de sites tanco na
área de design quanto na de desenvolvimento e programação, sem conhecimento
das técnicas jQuery ou com conhecimentos superficiais.
O objetivo do livro é fornecer informações deta lhadas do funci onamento

básico da biblioteca, estudando seus métodos e funcionalidades. Explicações te-
óricas em linguagem corrente e clara, dispensando, sempre que possível, o jargão
técnico avançado, são acompanhadas de exemplos práticos explicados passo a
passo e complementados por arquivo HTML para consulta. Ião se abordaram
técn icas avançadas de emprego da biblioteca, construção de plug-ins, interação
com AJAX nem outra linguagem o u biblioteca.
Para tirar o máximo proveito dos ensinamentos contidos em cada capítulo

é pré-requisito conhecer os fundamentos e a sintaxe da linguagem javaScript,
não sendo necessá rio um conhecimento profundo dela, bem como razoável
conhecimento de folhas de estilo, em particular seletores CSS.

Introdução 17
Os conceicos e o entendimento das cécnicas de desenvolvimento com jQuery

são uma poderosa ferramenta de apoio na criação de sites mais interativos e agra-
dáveis, enriquecendo a experiência do usuário. Profissionais da área de design,
familiarizados com as técnicas aqui descricas, contarão com uma va liosa fonte de
inspiração no planejamento das funcional idades para incrementar suas criações.
Os iniciantes, de posse das noções básicas da linguagem JavaScript, irão se

beneficiar deste livro por iniciar seus esrudos em uma fonte que aborda as mais
modernas técnicas de escrita do código, ensejando uma mudança no rumo de
seu escudo que irá reduzi r a curva de aprendizado e acelerar tal processo. Não
se intimidem com conceitos ou terminologias que lhes sejam completamente
desconhecidos nos primeiros capítulos. Com a sequência de leitura , as dúvidas
tenderão a desaparecer naturalmente.
Convenções tipográficas
Com a fina lidade de destacar diferentes tipos de informação neste livro, ado ra-
ram-se algumas convenções tipográficas mostradas a seguir.
Dica
Texto contendo uma dica sobre o assunto tratado:
O valor do atributo src indica o caminho (diretório) no qual se encontra gravado

o arquivo da biblioteca.
Alerta
Texto comendo um lembrete sobre procedimento extra com relação ao assunto

tratado :
jQuery, ao contrario de JavaScript, não requer loops para construir arrays quando
busca elementos no DOM. O construtor S() armazena tudo que encontra,
automaticamente, em um objeto array.

Terminologia
Texco estabelecendo a adoção de grafia-padrão em todo o livro para termos ou
frases com mais de uma terminologia, tradução ou significado:
~e Nos códigos desenvolvidos neste livro, adotou-se a sintaxe: $() .

cmmi
Chamada
Uma chamada para uma seção anterior na qual o assunto em questão foi expli-
cado com detalhes.
Por exemplo:
Esta função destina-se a servir de container para scripts jQuery que devam ser
executados somente após o carregamento do DOM. É uma função que substitui
o método ready() estudado em [C l Sl.1.6.2]. Neste exemplo a chamada é para a
seção 1.1.6.2 do capítulo 1.
Marcação e scripts
as marcações e scripts que exemplificam a reoria, transcreveram-se somente
os trechos que interessam ao assunto tratado. Omitiram-se os trechos que não
dizem respeito ou não são relevantes para o entendimento do assunto, para não
ocupar espaço des necessário no livro.
Blocos de marcação são marcados com fonte monoespaçada:

<scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. js"></sc ri pt>
<script type="text/javasc ript">
$(document) .ready(function() {
S( '#btn-vermelha').click (function() {
$('#cor').css('color', '#FFOOOO');
}) ;
}) ;
</scri pt>
Trechos de marcação que merecem destaque são marcados em negrito:

<scri pt type="text/javascript" src.=" . . / jquery-1. 2. 6. js"></scri pt>
<Script type="text/javascript">
S(document).ready(functi on() {
'vl atenal com d1re1to& autorais

Introdução 19
S('#btn-vermelha') . click(function() {
S('#cor ' ).css('color', ' #FFOOOO');
});
} );
</scri pt>
Para explicar passo a passo cada linha de um script, este é apresentado com
suas linhas numeradas e, a segu ir, os comentários são referenciados ao número
da linha comentada:
1.
2. S(' <h4 cl ass="l egenda"></h4> ' ). i nsertAfter(' 1egend ' );
3. var textolegenda = S('legend').remove().text();
4. $( ' .l egenda') . append(textolegenda) ;
5. S('fiel dset') .addClass( ' fieldset');
6. }) ;
Código comentado:
linha Descrição
Linha 2 lnsere logo após o elemento legend um elemento h4 com a classe
l egenda e vazio.
Linha 3 Armazena o cexro do elemenco legendem uma variável denominada
textolegenda e remove o elemenco do DOM.
Lin ha 4 Insere dentro do elemenm h4 criado anteriormente o texto da legen-
da.
Lin ha 5 Define a classe fieldset para o clernenco fie l dset, para fins de estili-
zação.
Códigos, marcações e sintaxe CSS contidos em textos são marcados com fonte
monoespaçada.
A função jQuery.noConOict() per mite, entre outras funciona lidades, criar um

pseudônimo personalizado para desenvolvimento.
Arquivospara download
Os scri pts mostrados no livro estão dis poníveis para download e/ ou consu lta
o n-line no site do livro, em http://1w.w.livrojquery .com. br. Os documentos estão
separados em pastas por capítulos e fora m n o m eados com s intaxe própria , con-
forme o exemplo a seguir:
arquivo-2 . ld . html

Esce é um arquivo qu e mosrra um script contido no primeiro icem do segundo

capículo (2.1) e é o quarco script desse item (letra d no final do nome do arquivo).
Adicio nalm ente, ao fin al d o script, há uma indicação d o arquivo no qual foi
inserido conforme convenção mostr ad a no exemplo a seguir:
<scri pt type="text/ j avas e ri pt" src=" . ./jquery-1. 2. 6. j s"></ sc ri pt>

<script type="text/ javasc ript">
S(function(S) {
S('div , p' ) .css('background', ' green' ) ;
});
</ scri pt>
</ head>
<bOdY>
<diV>OlV</diV>
<p>Parágrafo</p>
<di V>DIV</div>
</ body>
</ html>
.iJ [arquivo-2.1d.html] ç, 1ndicação do arquivo que demonstra ofuncionamento do script no

site do livro. Trata-se do quarto arquivo (letra d) do item 2.1 no segundo capítulo.
Destaques em geral
Palavras o u termos cujo significado deva ser destacado são grafados em itálico.
Por exemplo:
jQuery destina-se a adicionar interatividade e dinamismo incrementando de

fonna progressiva e não obstrutiva a usabilidad e, a acessibilidade e o d esign.
Variáveis
Valo res variáveis em códigos são g rafados em itálico.
Por exemplo:
jQuery(expressão, [contexto])

Introdução 21
Site do livro
O site de suporte a este livro está localizado em http ://vAYw. l ivrojquery. corn . br.
No site, incluíram-se as faci lidades relacionadas a seguir:
• Arquivo de códigos: os códigos dos exemplos mostrados no livro estão dispo-

níveis tanto para consulta on-line como para download.
• Errata : efetuou-se um exaustivo traba lho de revisão tipográfica. Contudo,

a prática mostra que nenhum livro está isento de erros - e com este não
há de ser d iferente. Uma página do site dedicada à errata está disponível
para consulta.
• Feedback: incentiva-se vivamente os leitores a emitir opinião sobre qualquer

aspecto do livro. Serão de grande valia informações sobre qualquer erro
detectado para aperfeiçoar futuras edições e atualizar a errata. Você pode se
comunicar com a editora pelo e-mail novatec@novatec .com. br ou diretamente
com o autor pelo e-mail maujorcss@maujor.com.

Material com direitos autorais
Parte 1
Fundamentos teóricos da biblioteca jQuery
A p rimeira parte deste livro compreende os capítu los dela 7 e cem po r objetivo
apresentar a biblioteca, exa minar sua si ntaxe geral e escudar o emprego e fina-
lidade dos métodos, propriedades e diferences funcio nalid ades d isponíveis na
biblioteca JQuery.
23
CAPÍTULO 1
Oque é jQuery?
Neste capítu lo, será apresentada a biblioteca jQuery, relatando-se suas origens,
fin alidades e destinação. Será feito um breve relato histórico de sua evolução,
exam inando as motivações qu e resultaram em sua criação, e serão descritas
algumas de suas possibilidades, dando uma ideia do seu potencial e mostrando
a força e poder da programação j avaScripr com o uso da biblioteca jQuery.
1.1 Definições e conceitos
1.1.1 Oque éjQuery?

jQu ery é uma biblioteca JavaScr ipt criada por John Resig e disponibilizada como
software livre e aberto, ou seja, de e mprego e uso regido segundo licença confor-
me as regras estabelecidas pelo MIT (Massachusetts lnstitute of Techno logy) e
pelo GPL (GNU General Public License). Isco, resumidamente, significa qu e você
pode usar a biblioteca gratu itamenre tanto para desenvo lver projetos pessoa is
como comercia is. Para maiores detalhes sobre esses tipos de licença, consulte os
seguintes endereços na internet:
• http : / / pt. wi ki pedi a. org/ wi ki/Mi t_l i cense
• http : / / pt. wi ki pedi a. org/ wi ki / GNU_Genera l_Pub1i c_L i cense
John Resig, no prefáci o do livro jQuery in Action, diz o seguinte:
"O foco principal da biblioteca jQuer)' é a simplicidade. Por que submeter

os desenvolvedores ao martírio de escrever longos e complexos cód igos
para criar simples efeitos?''.
25
Sem dúvida , ele estava em um momento de rara inspiração quando assim

escreveu, pois soube resumir muito bem jQuery. É uma maneira simples e fáci l
de escrever JavaScripr co locada ao alcance não só de programadores experien·
res, mas rambém de des igners e desenvolvedores com pouco conhecimento de
programação.
E o que torna o estudo e emendimenco dos conceitos básicos de jQuery mais

fascinance ainda é o faro de que você não precisa ser um profundo conh ecedor
de JavaScripc, por mais estranho que isso possa parecer, pois se trata de uma
bib lioteca criada para ser usada com base nessa programação.
Simplicidade é a palavra-chave que resume e norteia o desenvolvimen to com

jQuery. Linhas e mais linhas de programação JavaScript escritas para obter um
simples cfeim em u m objeto são substituídas por apenas algumas, escritas com
sincaxe jQuer)' lntrincados e às vezes confusos códigos JavaScript destinados a
selecionar um determinado elemento HTML componente da árvore do docu-
menro são su bsricuídos por li m simptes método jQuery. Você mesmo, ao longo
da leitura desre livro, irá constatar como jQuery consegue a proeza de críar
extraordinários efeicos com uma simplicidade impressionante, colocando o de-
senvolvim ento de scripcs a seu alcance e dispor imediatos, sem exigir profundos
conheci mentos de programação.
1.1.1.1 Hist6rico
o dia 22 de agosto de 2005, John Resig, cuja foro é mostrada na figura 11,
um desenvolvedo r americano profundo conhecedor de JavaScripc, que atua na
Corporação Mozilla e é autor do livro Pro )avaScript Techniques, escreveu ern
seu blog um arcigo re latando sua frustração com a maneira verbosa de se escrever
JavaScript para obter os resultados pretendidos.
Figuro l. l - John Resig, o criador do jQ uery.
Matcnal cori 01re1~os au·ora1s

Capitulo 1 • O que é jQuery? 27
Nesse artigo, publ icou alguns exemplos no quais propunha o uso de seletores
CSS com o objetivo de simplificar e dar maior versatilidade ao cód igo. Escreveu,
então, que essa, ainda, não era a forma definitiva do que cinha em meme, mas
iria aperfeiçoar e restar suas propostas. O nome ainda não existia, mas nessa
ocasião foi lançada a ideia que traria como resulrado a biblioteca jQuery.
Aproximadamente cinco meses após a publicação do artigo em seu blog,John

Resig apresemou publicameme os resultados de seus estudos em uma palestra
inticulada "jQuery, a nova onda para JavaScript'; proferida no BarCampNYC
- Wrap Up, no dia 14 de janeiro de 2006.
O ano de 2006 marcou a criação do primeiro plug-in para a biblioteca, o lan-

çamento de uma versão não obstrutiva de LighcBox usando a biblioteca jQuery.
Nesse ano, ocorreram, ainda, o lançamento das versões 1.0, 1.0.1, 1.0.2, l.0.3
e 1.04, da versão XNIL da biblioteca e o primeiro contes te público de criação
com jQuery.
Em 2007, lançaram-se as versões 1.1, 1.1.l, 1.1.2, 1.1.3a, l.l.3, l.1 .3.l, 1.l.4,
1.2e1.2.1. No dia 11 de março ocorreu o primeiro encontro jQuery.
Em 2008, acé a data em que escrevi este livro, foram lançadas as versões 1.2.2,
1.23, 1.2.4, 1.2.5 e 1.2.6.
1.1.2 Para que serve jQuery?

jQuery destina-se a adicionar interatividade e dinamismo às páginas web, pro-
porcionando ao desenvolvedor funcionalidades necessárias à criação de scripts
que visem a incrementar, de forma progressiva e não obstrutiva, a usabilidade,
a acessibilid ade e o design, enriquecendo a experiência do usuário.
Use jQuery em sua página para:
• adicionar efeitos visuais e animações;
• acessar e manipular o DOM;
• buscar informações no servidor sem necessidade de recarregar a página

(fora do escopo deste livro);
• prover interatividade;
• a lterar conteúdos;
• modificar apresentação e estilização;

• simplificar tarefas específicas de JavaScripc;
• rea lizar ou eras carefas relacionadas às descricas.
1.1.3 jQuery em conformidade com os Padrões Web

jQuery foi criada com a preocupação d e ser uma biblioteca em conformidade
com os Padrões Web, ou seja, compacível com qualqu er sistema operacional e
navegador, além de o ferecer suporce tocai para as CSS 3. Sim, é isso mesmo, você
pode usar todos os poderosos seletores previstos nas CSS 3 sem se preocupar se
este ou aquele navegador suporca o seletor para as CSS. Esclarecendo : a sintaxe
do selecor segue a sintaxe prevista nas CSS 3, mas quem usa os seletores é a bi-
blioteca, com a fina lidade de selecionar elementos no DON! e n ão estilizar.
Evidentemente, isso não significa q ue rodo código escrico com uso de jQuery
resulta em um d ocumento válido segundo os Padrões Web. A biblioteca fo i cria-
d a e escá de acordo com as diretrizes do W3C, m as cabe a você, desenvolvedor,
escrever seus scri prs em con formid ade.
Se você precende escrever em conformidade com os Padrões Web, ad ore com o

regra básica de desenvo lvimento de scripcs a fi losofia de qu e jQuery se destina
a ad icionar interatividade e dinamismo, incrementando de forma progressiva
e não obstrutiva a usabilidade, a acessibilidade e o design com o propósico d e
enriquecer a experiência do usuário.
Leia a analogia a segu ir.
Por não dispor de verba suficiente, Fu lano compra um carro, o modelo mais
simples da linha, e alguns meses d epois, ten do sobrado um a verba, resolve in-
vesti r no carro equipando-o com alguns acessórios, como insulfilm, som, alarme,
prorecor solar e algu ns outros irens, mudando o aspecco inicial do carro e faze n-
do-o parecer um modelo intermediário d a linha. Passado algum tempo e tendo
economizad o uma boa quantia, Fulano resolve melhorar o carro instalando
ca lotas de aço escovado, GPS, TV d igita l, frigobar, MP3 e oucros acessórios ma is
sofisticados, co nsegui ndo um visual de carro top d e linha.
Fulano é o d esenvolvedor, o carro mais si mples é a página web sem scripts, o

carro top de linha é a página web incrementada com jQuery, as duas etapas d e
colocação de acessórios representam o incremento progressivo e o fato d e Fu lano
(e ninguém em sã consciência) não rer mandado retirar o morar do carro para
colocar um jarro de flores representa o in cremento não obstrutivo.
O carro top de linha de Fulano continuará sendo um carro com todas as suas
funcionalidades, cumprindo rigorosamente todas para as quais foi projetado
quando saiu da fábrica, mesmo que dele seja m retirados todos os acessórios.
Com scripts em geral, e jQuery no nosso caso, acon tece a mesma situ ação. Seu
documenro estará em conformidade com os Padrões Web se continuar usável e
funciona l caso os scripts parem de funcionar. Um belíssimo menu de navegação,
com efeitos ulcrassofisricados, não valerá nada se não for acessível sem o script
que o faz funcionar. Pode tornar-se esteticamente horroroso, mas deve cumprir
sua fina lidade quando não sustentado pelo script.
Algumas técnicas para preservar a acessibi lidade aos conteúdos incrementa-

dos com jQuery são básicas e serão abordadas e m momento oportuno. Outras
situações de preservação de acessibilidade por estarem inseridas no contexto de
um desenvolvimenco pa rticular não têm solução em uma técnica preestabelecida
e dependem d a criativid ad e e capacid ade de o desenvolvedor resolver situ ações
específicas.
Sempre que for o caso, os exemplos deste livro serão desenvolvidos de forma
li' não obstrutiva, contudo, como dito anteriormente, quando a obstrução depender
·- de um contexto particular, será entendido que sua avaliação e solução dependem

de cada caso.
1.1.4 Características da biblioteca jQuery

jQuery é uma biblioteca JavaScript que possui as seguintes características:
• utiliza seletores CSS para localizar elemenros componentes da estru tura

de marcação HTlv(L da página;
• possui a rquitetu ra compatível com instalação d e plug-ins e extensões em

gera l;
• é indiferente às inconsistências de renderização enrre navegadores;
• é capaz d e interação implícita , isto é, não há necessidade de construção de

loops para localização de elementos no documento;
• admite programação encadeada, ou seja, cada método retorna um obj eto.
• é extensível, pois adm ire criação e inserção de novas fu ncionalidades na

biblioteca existente.
Não se preocupe se algumas das características descritas soem sem senrido

para você . Com o prosseguimento da leitura , os conceitos ficarão claros e com-
preensíveis. O fato é que rais características possibiliraram a criação de uma
biblioteca baseante compacca e, ao mesmo tempo, poderosa o baseante pa ra
oferecer funcionalidades que tornam o processo de desenvolvimento igualmenre
compacto e extrema mente simples.
Por ser distribuída como software livre,j Queq1 tem o apoio e o envolvimento
de uma considerável comunid ade. Desenvolvedores do mundo rodo têm contri-
buído em larga escala com novas ideias, scripcs, plug-ins, extensões e toda sorte
de implementações, com a fina lidade de incrementar não só a biblioteca, mas
também as técnicas de desenvolvimento jQuer)\
1.1.5 Como instalar jQuery

A biblioteca jQuery nada mais é que um arquivo JavaScript (arquivo do tipo
texto puro gravado com a extensão . js, como meu_arquivo . js) que deverá ser
linkado à página web onde serão aplicados efeicos, ou seja, a página web onde
serão aplicados os efeitos deverá "chamar" biblioteca. É somente isso. Você não
precisará instalar nada. Basta fazer o download gratu ito do arqu ivo e "chamá-lo"
n a(s) página (s).
Uma página ou d ocumento "chama" um arquivo de script fazendo uso do ele-

mento script e seus atributos type e src colocados na seção head d o documento.
A versão mais recente da biblioteca está no arquivo jquery-1.2.6.js e adiante

você verá como e o nde fazer o down load dele. É muito provável que na ocasião em
que você estiver lendo este tópico já exista uma versão mais recente e é esta que
você d everá baixar para seu s estudos e desenvolvimentos. Então, um d ocumento
que use a biblioteca d everá ter marcado, em sua seção head , o seguinte elemento
script, entre outros elementos próprios de cad a caso:
<head>
<Script type="text/javascript" src="/caminho/jquery-1.2.6 .js"></script> 
</head>
O valor do atributo s rc indica o caminho (diretório) no qual se encontra gravado

o arquivo da biblioteca.

A partir daqui é imperativo rcr gravado em seu HD a última versão da bi-

blioteca para poder acompanhar os exercícios deste livro e fazer funcionar seus
experimentos com jQuery, que, renho cerceza, irão fasciná-lo.
Entre no site oficialhttp://jquery.com, vá para a página de download conforme

mostrado na figura 1.2 e faça o download da última versão da biblioteca jQuery.
Down loading jQuery

1i..,.1P~'-c
~b:otr;::t.'.l.'I .-
~)~-.1'/•,\){U
,... ~
About The Code
M>n"
Li.'TC n,teryWTltl~f!( l!"it'cc.d: fu t"t' 1.$ ....~\«1 n t t'. c. e ~ •"*t ln 4 fUlt i:fTO'. t o -tetí coe-•. m.: N.. i..,<::v'·,;c :p.:;t:~ i~111e
lbr'6. ..J tr·e a .,, coct,i th tt ~"~ t'~ f,-.r• tr·'ll ~, rl111t.•• fe.tl •ro1t 1ti diceu~t tt O"'I '""ti•.,. ~""MI#' ,.wil..i•
v.tr \11,. Tor>&-..: .fil.. 1.t .,.." k cltct•v tr.aciit•~ttfllf

A,I !"t \h! c9'fc 111 •'liJtt::l.t rn '"""" fDl'f'irtn
• f'~,·e.nod ~'til;; l)41Jo'..-; vt:u w h_." .1Jo.i'tr ltk tfl1~:m ~je l"'l'f e ~ 1 !~d
• l!~ceft'fí"USAlll (lped Mt' d 1t~i nt ..WS to u~!f•n• V.d W\.-'tt li t • 11ftl! (h• .11a,) tt.
' r'.J!4lrf int.wti\•i m.......t'I~.,

!.:!st.!:.:_8 ~~
. . t..•&.::1.. ,......~ i,., J.<-JVr11>011\f\boll\ IP"', , il ~nt ·A:ik t h w
jl)l.:11!"', n P"'(l'.I~ un:.,.. the f'(.IOJITC .! ~ trd ffl l!r'!l"t-
Download jQuery
Tn.. "'~fW,ç! .,,....6tto~ ,,..Mi... 1~.,,-''1!> 1 l"'Sl'' J!)ni" u••,.. th• p 1~d •"""""'• lt vn.. ,...a-, t"-
:.Ul 4• n1o.n u u:.c trt ~recu:.tl~tl d e,,:.0-'ill'Hl'b. í ha ~l d-" '1 'l...ntt:n re1111lru ~trt.&tl
G'Í111Y.0$$:'.it IW\:l<A:it!f'« ~N to UTC'4-T"pr &i: tht <ca:!+
Current Relea$e
• t.l ~,.~\li tli•••»
~:f, Uii.J •,• fll~\H ~
Figuro 1.2 - Site oficial do biblioteca íOuery.
Observe, na área de download em destaque na figura 1.2, que exis tem di-
ferences ripos de apresentação da biblioteca para download e um link para um
documento hospedado no próprio site, contendo um relatório das modificações
introduzidas na atual versão.
A apresen ração denominada "Uncom pressed" - jquery-1. 2. 6. js - destina-se ao
uso em tes tes, estudos e desenvolvimenro da biblioteca. Trata-se de um arquivo
no qual o ce.xto do script foi escrito com espaço entre cada linha de código, am-
plamente comentado, o que fac.ilita a leitura , análise e entendimento do códi.go
contido no arquivo. Esta é a apresentação recomendada para você baixar e fazer
uso nos estudos e acompanhamento dos experimentos desenvolvidos neste livro.
O tamanho desse arquivo é de 97,8KB.
Matcnal cori 01re1~0::. au·ora1::.

A apresentação denom inada "~iinífied" - jquery-1. 2.6.min. js - difere da ancerior

por terem sido removidos todos os comentários e espaçamentos entre li nhas e
declarações, comando o código difícil de ler para hum anos e mais compacto, pois
se transforma em uma sequên cia corrida de código, sem quebras de lin ha. Esca
é a apresenração recomendada para ser usad a no desenvolvimento de sires. A
vanragem sobre a versão anrerior é que se era ta do mesmo a rquivo com tam anho
red uzido para 54.4KB.
Finalmence, a apresentação d enominad a "Packed" - jquery-1. 2.6.pack .js - é uma

versão obcida por processo de compressão j avaScripc da b iblioteca, resultando
em um arquivo com tamanho igual a 303KB. Essa versão, por ser codificad a, não
é legível para humanos.
Embora com ta m ano menor que o d a versão " M in ified" o tem po de carrega-
mento desta versão acaba sendo praticamente ig ual ao d aqu ela versão, pois há
que se computar o tempo de descompressão quando o usuário recebe a página.
Esta versão tem a d esvantagem em relação à anterior d e não ir p ara o cache,
tendo que ser carregada novamente toda vez que o usuário vo lta ao site. Outra
desvantagem que d esacon selha seu uso é o fa to de que o processo de descom-
pressão pode, evenrualmenre, ser imperfeito, introdu zindo bugs não existentes
n a versão sem compressão ou na compacta. A não ser que você tenha uma boa
justificativa para usá-la, não use-a .
Apartir daqui, para testar os exemplos do livro, supõe-se que você baixou e gravou
·- em seu HD a apresentação 'Uncompressed" - jquery-1. 2. 6. js - da biblioteca,

para ser chamada pelas páginas de estudos conforme explicado anteriormente.
1.1.6 jQuery na prática

Para que um script consiga imprimir dinamism o, alterar compo rtam entos ou
apresentação, no todo o u em panes de uma página web, precisa d e um m étodo de
acesso à árvore do documento com a fina lidade de encontrar o elemento HT!vlL
no q ual será vinculado o comportame nto.
Para exemplificar, imagin e uma pág ina web na qual existe um botão que, ao
ser clicado, mud a a cor de um cabeçalho, de verde para vermelha.
Nos exemplos constantes dos arquivos disponiveis para consulta ou download,

você irá verificar o funclonamento dos scripts, interagindo com a página que
contém o exemplo, clicando um botão ou agindo com o mouse. Para repetir o
funcionamento do script, recarregue a página (em ambiente Windows tecle FS).

..,.. Solução comJavaScript in-line:
<head>
<styl e type="text/css" media="all ">

hl {color:#090;} / 9 cor verde para o cabeçalho */
</St yl e>
</head>
<body>
<hl id="cor">Cabeçalho muda de cor</hl>
<button type="button" onclick = "docunent.getElementByld('cor') .style.color='#FFOOOO ' ;">
Vermelha
</button>
.iJ [arquivo-1 .1.6a.html)

A técnica usada nessa solução consiste em inseri r script dentro de marcação
HTML (in-line), sendo uma prática ultrapassada e, infelizmente, ainda
amplarnentt: t:rnpn::ga<la pur mu icus <lest:nvulvec.lurt:s. Essa solu<_rão c.:onrra-
ria um princípio fundamenta l dos Padrões \Veb que preconiza separação
torai entre estr utura de marcação com HTML, apresentação com CSS e
componamenco com scripcs. Cada código no seu arquivo correspondente
e separado. Evite usar essa solução.
..,.. Solução com função JavaScript:
<head>
<Style type="text/css" mediao::"all ">

hl {color:#090;}
</styl e>
<script type="text/javascript">
function mudaCor() {
document.getElementByld( 'cor').style.color = '#FFOOOO';
}
</script>
</head>
<body>
<hl id="cor">Cabeçal ho muda de cor</hl>
<button type="button" oncl ick = "mudaCor (); ">
Vermelha
</button>
~ [arquivo-1.1.6b.html]

A técnica usada nessa solução é uma melhoria da solução anterior e consiste

em definir uma função d entro da seção head do documento, que pode ser
cham ada por vários botões dentro de um mesmo documento, permitindo
ampliar o uso do script para além de um botão. Uma variante dessa solução
consiste em coloca r a [unção em um arquivo externo e linkar o arq uivo ao
d ocu mento. Isso perm ite usar a fun ção em vários botões dentro de vários
d ocumentos. Essa solução continua misturando estrutura com compor-
tamento e, tal como a anterior, deve ser evitad a.
~ Solução com JavaScript fora da marcação :
<head>
<style type=" text/ css" media="all ">

hl {color:I090 ;}
</style>
<Script type="text/ javascript">
window.onload = function() {
document .getElementByld('btn-ver1elha') .onclick = mudaCor;
} j
document.getElementByld( ' cor') .style.color = 'IFFOOOO ';
} j
</script>
</head>
<body>
<hl id,,"cor''>Cabeçalho muda de cor</hl>
<button type="button" id="btn-vermelha">Vermelha</ button>
.i) [arquivo-1.1.6c.html]
Agora, sim! A m arcação HTML está isenta d e cód igo JavaScript, pois se
incorporo u o script à seção head do d ocumen to. Resta agora colocar o
script em um arquivo externo separado e linkar para a(s) página(s). Essa
é um a boa soluçã o sob o ponto de vista da separação do comporta mento,
m arcação e estilização.

..,.. Solução comjQuery:
Caso você nada conheça de jQuery, não se intimide com o script a seguir.
Limite-se a observar com atenção cada linha do código que seu conheci-
mento de JavaScript lhe dará uma noção bem próxima de seu f unciona-
m ento. Com o prosseguimento da leirura, você entenderá a finalidade de
cada linha do script:
<head>
<style type="text/css" media="all">

hl {color:#090;}
</Style>
<script type="text/javasc ript" src=" .. /jquery-1. 2.6.js"></script>
$(document).ready(function() {
S('#btn-vermelha').click(function() {
S(' #cor'). css( 'color", "#FFOOOO');
});
});
</script>
</head>
<bodp
<button type="button" id="btn-vermelha">Vermelha</button>
~ [arquivo-1.1 .6d.html]
Ao contrário das soluções tradicionais com javaScripr, como as mos-
tradas anteriormente, o uso da biblioteca jQuery não permite misturar
script com marcação HTML Não é previsto nem existe uma sincaxe para
jQuery in-line. Você é obrigado a inserir seu script incorporado na seção
head do documento ou escrevê-lo em um arquivo separado e linkar para
os documentos onde serão utilizados. Como regra geral, adote as m esmas
diretrizes que regem a vinculação de folhas de estilo, isto é, se seu script
serve a mais de uma página, adote a solução de linkar, senão, a solução de
incorporar na seção head do d ocu mento..Mas lembre-se que mesmo para
uso em uma só página, em scripcs que demandem tempo de carregamento
n ão desprezível, a solução de linkar é melhor, pois neste caso o script vai
para o cach e da máquina do usuário.
Os quatro exemplos aqui apresentados tiveram por objetivo único mostrar na
prática um efeito bem simples criado de três maneiras diferentes com JavaScript

e à maneira jQu ery. Ainda que seus con hecimentos básicos de j avaScripc sejam
limitados, não se intimide, simplesmen te consulte com acenção os cód igos e vá em
frence. M.as can to você quanto aqueles fa mi liarizados com j avaScript não d eixem
de abrir cada um a d as páginas contendo os scripts, conscara r seu fun cionamento
e o lhar no código-fo nte da p~íg in a . Os arqu ivos das páginas estão no sire do livro,
d ispo níveis para consulta o n-line e ta mbém para download.
~ Toda pãgina na qual se pretende fazer funcionar um script jQuery deverá estar
·- linkada para o arquivo da biblioteca baixado do site jQuery.
1.1.6.1 fvento vli ndow .onload
j avaScripc é uma técnica de programação que fu nciona percorrendo e b uscando

seus alvos (elementos d a marcação) na árvore d o documento o u no DOM, ou
seja, um scripc só consegue execu tar sua ação se tod o o do cumento já tiver sido
ca r regad o. Os e le m e ntos d a m a rca ção de um a p ágin a só exis te m depo is que a
pág ina é ca rregad a, o u, mais p recisamence, vão existindo à medida que a página
vai sendo carregada e na sequência em q ue aparecem na marcação a par tir d a
declaração d o DOCTYPE acé a tag d e fecha mento do elemen ro html .
Na p rácica, isso sign ifica que se você inserir na marcação de uma página um
scripr que se refira a u m elemento hl, por exemplo, em local aci ma d aquele no
qual foi escrito o elemenro hl , seu scripc não irá fu nciona r, porque será car regad o
na página a ntes d o carregamen to do elemento hl.
Observe, a seguir, a transcrição do terceiro exemplo mostrado no itern l.l.6

no qua l todo JavaScript foi retirado da marcação e passad o para a seção head d o
documento.
<head>
<styl e type,."text/ css" media="all ">

hl {color :#090 ;}
</Style>
<script type="t ext/javascri pt">
window.onload = function() {
document.getElementByld(' btn-vermel ha ') .onclick = mudaCor;
};
document .getElementByld ( 'cor ' ) .style.color = ' #FFOOOO' ;
};

</script>
</head>
<body>
Vamos alterar ligei ramente o script anterior reescrevendo-o conforme mos-

trado a seguir.
<head>
<Style type="text/ css" media="all ">

hl {color:#090;}
</Styl e>
document.getElementByld('btn-vermel ha').oncl ick = mudaCor ;
function muda(or() {
document.getElementByld('cor ' ) .style.col or = '#FFOOOO';
}
</script>
</head>
<body>
<hl i d="cor">Cabeça1ho muda de cor</hl>
~ [arquivo-1.1.6. la.html)
Observe que o que se fez foi retirar do script a declaração que diz:
windovi.onload = function() {
... faça i sso ...
}
Mesmo para quem pouco con hecedejavaScripc, a declaração é aucoexplicaciva,

pois vii ndovi. on load, traduzindo para o português, significa: depois que o doeu menco
for carregado, faça isso. Faça isso é a função mudaCor () .
Agora, com a retirada que se fez, o script ( ... faça isso ... ) não esperará a página
ser carregada e, consequentemente, não funcionará e o botão não trocará a cor do
cabeçalho, conforme se pode constatar no arquivo existente no site do livro. Isso
ocorre pela razão explicada anteriormente: o scripc foi escrito ames dos elementos
hl e button com seus ids cor e btn-vermelha constantes do script, ou seja, quando o
script é carregado, ainda não existem os ids de que precisa para funcionar.

Se tirar o script da seção head do documento e posicioná-lo depois d os ele-

mentos envolvidos, func ionará normalmente. Faça assim:
<head>
<style type="text/css" media="all ">

hl {color:#090;}
</Style>
</head>
<bOdY>
<button type="button" id= "btn-verme1ha">Vermelha</button>
docu1ent.getEle1entByld('btn-vermelha').onclick = mudaCor;
document .getElementByld(' cor' ) .style.color = '#FFOOOO';
}
</script>
~ [arquivo-1.1.6.1 b.html]
E tudo voltará a fu ncionar. Veja nos arquivos e."Xistentes no site do livro as

pági nas mostrando as duas situações descritas anteriormente.
Conclusão
Para possibili tar a retirada de seus scripts da marcação HTML, a linguagem

j avaScript dispõe da declaração wi ndow.onload que atua como uma espécie de aviso
para que a função encre em ação (ou comece a "rodar") somente após a página
ter sido completamente carregada.
Existem outros métodos que cumprem a mesma finalidade e oferecem outras

funcionalidades, como permitir declarar várias funções, mas não é o escopo deste
livro aprofundar a linguagem j avaScript.
1.1.6.2 Método ready()
Tal como vimos para javaScript, jQuery, que se baseia nessa linguagem, tam-
bém precisa que seus scripts conheçam a árvore do documento para poder
funcionar.

Na sintaxe jQucr)~ o equivalente ao window.onload e todas as suas variantes é

mostrado a seguir.
. .. faça i sso ...
}) ;
Essa notação é conhecida como sintaxe formal para escrita do método ready(),
que significa o segu inte: "quando o documento estiver pronto, faça isso''. Faça isso
é o script a executar.
Você pode omitir o parâmetro document passado para a função jQuery cons-
trutora SO e escrever com a segu inte sincaxe:
$().ready(function() {
... faça isso ...
}) ;
O método jQuer y read() oferece duas vantagens sobre seu eq uivalente

JavaScripr:
• O script está pronto para funcionar tão logo a árvore do documento tenha
sido carregada. Não é necessário que todos os componentes da página, tais
como imagens, folhas de estilo, animações e mídias em geral, tenham sido
carregados. Basca que a estrutu ra de marcação da página esteja disponível
e o scripc já poderá funcionar.
• Não há variações funcionais para o método e pelo fato de jQuery não ad-
mitir mistura de script com marcação, utiliza-se a sintaxe mostrada para
servir de container aos scripts.
Existe uma sintaxe a lternativa à sintaxe formal mosn-ada a nteriormente para

o método ready(), chamada de sintaxe abreviada, que é a seguinte:
$(funct ion() {
.. . faça isso .. .
}) ;
[ e Nos códigos desenvolvidos neste livro, será adotada a sintaxe formal, pois se
considera que, apesar de ser mais extensa, oferece melhor legibilidade, sendo
em consequência mais fácil de ser visualizada. Em seus desenvolvimentos
reais, sinta-se à vontade para usar a sintaxe abreviada que, certamente, reduz
o trabalho de digitação.

1.1.7 Fundamentos jQuery

A fina lidade do uso de jQuery é controla r o comportamento de toda ou partes
de uma página web. Sabe-se que uma página web nada mais é do que marcação
HTML Então, é líci to concluir que o pri ncípio de fun cionamento de jQuery
fundamenta-se cm sua capacidade de encomrar os elementos HTML que cons-
tituem a página e a estes anexar seus métodos.
1.1.7.1 ConstrutorjQuery
Inicialmente, veja o encarregado de encontrar elementos HT ~1L em um docu-

mento:
$()
Tecnicamente, trata-se do que se denom ina, em linguagem de programação,

de construtor. O construtor S() o u, ainda, a função construtora$() estará presente
em todos os scripcs que você escrever, portanto decore desde já sua sinraxe: um
sinal de cifrão seguido de parênteses (o que, convenha, não é tão complicado de
decorar).
Outras bibliotecas JavaScript também usam a função S() . Isso pode ca usar
conflitos e mau funci onamento descripts quando se usa mais de uma biblioteca
no mesmo documemo. Nesses casos, ex istem métodos para evitar conflitos e u m
deles é usar a sin taxe alternativa mostrada a seguir. O utros métodos para evitar
conflitos serão apresentados p osteriormente.
jQuery()
m
e.-. Nos códigos desenvolvidos neste livro, será adotada a sintaxe: S() .
r:mmJ
Simplicidade é a filosofia que orienta o desenvolvimento de jQ uery desde

sua criação. Observe os cód igos a segu ir. Você, mesmo não conhecendo nada
de jQuery, seria capaz de concluir a finalidade de cada uma das linhas do código
a seguir?
S('hl' ) ;
S('p');
S('span');
$(' table ' );

Bem símplcs, não é m esmo? Você escá inscruíndo seu construtor a enconrrar
todos os elementos hl, p, span e table resp ectivamente.
jQuery, ao contrário de JavaScript, não requer loops para construir arrays quando
busca elementos no documento. O oonstrutor $() armazena automaticamente
em um objeto array tudo que encontra.
Encontrar todos os elementos de um dererminado tipo não parece muico úti l.

Seria bem melho r se você pudesse encontrar uma ocorrência específi ca de um
elemento.
Por exemplo: quero encontrar o terceíro parágrafo do d ocu mento. Bem, neste
caso, urna solução seria marcar o terceiro parágrafo com o atribuco id para íden-
tificar sua ocorrência:
<P id="xpto">Texto do terceiro parágrafo</ p>
e escrever o construtor assim :

S( ' #xpto' )
Você conhece CSS? Ainda não? É essencial começar a aprender hoje mesmo,
sob pena d e ficar ultrapassado nas técnicas d e d esenvolvimento web. jQuery
n ão é exceção à regra e faz a mplo emprego de seletores CSS. Com o se d isse
anteriormente, ad ota os poderosos seletores CSS 3 para localizar elementos no
documento. E não se preocupe, pois o uso de seleto res CSS em jQucry em nada
se relaciona com suporte pelos navegadores. Use e abuse d esses seletores que seus
scripts funcionarão em qualquer navegador.
Observe o código a segu ir:

$('body p:nth-child(3)' )
Aqui o co nstrutor está usa ndo um seletor CSS 3 que cem com o alvo o ter-
ceiro parágrafo d escendente do elemento body. Trata-se d e uma busca simp les,
sem necessidade de atribuir um identificador ao terceiro parágrafo como se fez
anteriormente.
A verd ad e é que jQuery usa ampla mente seletores CSS e, assim sendo, é
pré-requisíto para bem desenvolver jQuery o conh ecim ento profundo desses
seletores. No apêndice A, você encontra um guia de consulta aos seletores que
irá ajudá-lo a aco mpanhar os exemplos deste livro.

1.1.7.2 Encadeamento jQuery
Um conceito importan te d a b iblio teca jQuery é o e ncadeam ento. Observe a linha

de cód igo a seguir:
$( 'div' ) .chi ldren( 'p' ) .fade0ut(). addClass('xpto' )
N ão se preocupe se o cód igo parecer con fuso o u in inteligível, pois logo você
estará en tendendo-o. O código d iz o seguinte:
"Construtor, enconcre rodos os elemen tos parágrafos que sejam fil hos
dos elementos di v, neles aplique um cfeico de esmaecimento (fadeOu t) e
ad icione a classe xpto''.
D enom in a-se encadeam enro a característica de se poder encadear diversos

métodos e m uma d eclaração. Isso é possível porque se criou jQu ery de modo a
que cada método retorne um objeto pronto para receber ou tro métod o, que, por
su a vez, retornará o utro objeto, e assim po r diante, p ermitindo ao d esenvolvedor
construir uma cadeia infinita d e o bjetos e métod os. E m JavaScript a-adicion al,
não existe encad eamento como o p rojetad o para jQuery, o que obriga o uso d e
m ú ltiplas declarações para se consegu ir um efeito que, em jQuery, se consegue
com uma linha de código apenas.
1.1.7.3 Funções utilitárias
Servir com o inspetor e selecio nad or de compo nen tes d o DO M, con forme visto
an terio rmente, n ão é a única atribuição d a função S() . jQ uery prevê u m conjunto
d e funções cha mad as utilitárias que usa o sinal Scomo um identificador cal qual
qualquer o utro identificado r previsto em JavaScript. A sintaxe para as funções
ucili tárias é mostrad a n o exemplo a segu ir:
$. browser ;
o u com a opção d e uso d o idenri fica do r jQ uery:

jQuery.browser
O exemplo mostra u ma função para id entificar o tipo de navegador do usuário

que equiva le à fu nção navigator . userAgent do JavaScript.
t: mu ito pouco provável q ue você use u m a fu nção u ti litária no desenvolvi-

m ento d e scripts para funcionar em uma página web. Elas têm sua u tilidade
n o desenvolvimento d e extensões pa ra a bi blioteca jQuery, como a criação de
p lug-ins.

1.1.7.4 Conflitos com outras bibliotecas
Sem dúvida, a invenção de bibliotecas revigorou o uso de JavaScript no desen-

volvimenco de páginas web, pois além de tornar o processo de criação bem mais
simples, forneceu mecanismos que possibilitam criar códigos não obsu-utivos
e, em consequência, sem prejuízos para usabilidade e acessibilidade da página.
jQuery não detém exclusividade no campo das bibliotecas JavaScript, pelo con-
trário, muiras bib liotecas surgiram nos últimos tempos, entre elas: Prototype,
MochiKit, ivlooTools, Yahoo User Interface (YUI) e DOMAssisrant.
O identificador $ também não é exclusividade de jQuery e ouu-as bibliotecas

fazem uso dele. Se um documento usa mais de uma biblioteca, é provável que
ocorram conflitos com diferentes bibliotecas tentando interpretar um mesmo
identificador e estabelecendo-se uma enorme confusão.
O sinal s é um pseudônimo e, no jargão técnico, diz-se "a lias" para o iden-

tificador da biblioteca. O identificador utilizado foi jQuery, assim, ao usar essa
biblioteca,$ é o pseudônimo de jQuery e as duas sintaxes mostradas a seguir são
equivalentes:
$()
e
jQuery()
Usar jQuery() elimina o risco de conflitos, mas obriga o desenvolvedor a abrir

mão de escrever com a forma abreviada do pseudôn imo.
Felizmente, para evitar conflitos com outras bibliotecas, sem prescindir de

uma forma abreviada, existe a função jQuery .noConflictO que permite, entre o urras
funcionalidades, criar um pseudônimo personalizado para desenvolvimenro. Tal
função será abordada no capítulo 2, em [C2 S2.1].

CAPÍTULO 2
Funções-padrão e
seletores jQuery
Na primeira pane deste capítulo, serão explicadas as funções-padrão, de em-

prego mais comum, da biblioteca jQuery, examinando a sinraxe, aplicação e
funcionamento de objetos, métodos e propriedades que constituem o coração
da biblioteca. la sequência, serão exam in ados os poderosos seletores jQuery,
apresentando-se sua sintaxe e desenvolvendo-se exemplos de aplicação.
2.1 Funções-padrão jQuery

Os arquivos exemplo co ntend o a demonstração prática das funções e selerores
apresentados neste capítulo se baseiam na técn ica de esti lizar o(s) elemento(s)-
alvo(s) de forma diferenciada no momento em que o script "roda" por ter sido
acionado um disparador de eventos, em geral o clique em um botão.
Para adicionar estilos em uma seleção jQuer)~ pode-se usar duas sintaxes
que serão estudadas com detalhes em [C4 54.l], contudo veja a apresentação
da sintaxe mais simples que será usada neste capítu lo com o fim proposto no
parágrafo anterior.
A sintaxe geral para adicionar estilo ao e lemento-alvo de um selerorjQuery

é mostrada a segu ir:
seletorjQuery.css('propriedade', 'valor')
O parâmetro propriedade é uma propriedade CSS e o parâmetro valor, a quantificação

ou característica da propriedade. Neste capítulo, serão usadas frequentemente as
propriedades backgroud e color com os va lores red (vermelho) e green (verde).
45
$(expressão, [contexto])
Esra é a principal função jQuery mencionada no capítulo 1, a qual aceita dois
argumentos. Veja-os a seguir.
Argumento Oescriçáo
expressão Um selecor CSS ou um dos selewres específicos da biblioceca.
contexto O concexto em que será feita a procura do seletor. Omitindo esse
argumenco, o valor-padrão de procura são os elementos do DOM
no documenco atual. Você pode limitar a procura ao contexto de
um elemenco o u conjunto de elementos do DOM ou mesmo a um
o bjeto jQuer y.
Exemplo:
<head>
<style type="textl css" medi a""all ">
div {width:200px; height:lOOpx; border: l px solid #000; margin:20px;}
<lstyle>
<scri pt type="text/ javasc ri pt" src=" .. l j query-1. 2. 6. js"></ sc ri pt>
<script type="textljavasc ri pt">
S(document) .ready(function() {
S('#diferente').css('background' , ' red'); li semuso do parâmetro contexto
S('p' , S(' #container')) .css( ' color', ' green' ); li com uso do parâmetro contexto
});
<lscript>
<lhead>
<bOdY>
<di v></di v>
<div id="diferente"></div>
<diV></diV>
<div id="container">
<p>Parágrafo dentro do di v#container<IP>
</diV>
<p>Parágrafo fora do di v#container<IP>
~ [arquivo-2.1a.html]
Nesse scripc, verifica-se o uso do co nstrutor SO sem o parâmetro contexto,
quando se dá a busca pelo elemento cujo id é diferente, busca esta em rodo o
documento, para estilizar seu fund o na cor vermelha. Na outra situação, cons-
tata-se o uso do parâmetro contexto igual a S('#container') , quando se dá a busca
pelos paragráfos dentro do div#contai ner, para estilizá-los na cor verde. Se omiásse
o parâmetro contexto nesse segundo caso, rodos os parágrafos no documento
seriam estilizados na cor verde.

Capitulo 2 • Funções-padrão e seletores jQuery 47
$(hrmn
Esra função d estina-se a criar marcação HTlvlL. O valor do argumento passad o

é uma string contendo marcação estrutural que pode ser escrira manualmente
em texto puro, usando um gerador de template, um plug-in ou AJAX. Neste
livro, você verá a geração via texto puro escrito manualmente. Lembre-se d e
que criar marcação via JavaScript torna o conteúd o compleramente inacessível
a tecnologias assiscivas. Use essa função consciente dessa limitação, lembrando
que scripts jQuery destinam-se a um incremento progressivo do documento,
portanto não crie marcação em desacordo com esse objetivo. Há limitações na
criação de contro les do tipo input para formulários com essa função, assim evite
criá-los com o uso de scripr. Barras, quando presentes na string do argumento,
devem ser escapadas.
Exemplo:
<head>
<scri pt type="text/ javasc ri pt" src=" .. / j query-1. 2. 6. js"></scri pt>
<script type="text/ javascript">
S('<p>Eu sou um parágrafo criado com jQue ry.</p> ') .prependTo( 'body' );
});
</scri pt>
</head>
<body>
</ body>
</ html>
.iJ [arquivo-2.lb.html]
Este script cria a marcação para um parágrafo e seu respectivo texto e usando o
método prependTo(), que será apresentado adiante, escreve a marcação no elemento
body. Se você visualizar o cód igo-fome d a pági na, a marcação do parágrafo não
estará lá e é isso que um leitor d e tela encontra, ou seja , absolutamente nada.
$(elementos)
Esta função desti na-se a procurar elementos HTML no DOlvl. Aceita também
documentos XML e objetos window, ainda q ue não sejam compo nentes d o D OM,
como argumentos.

Exemplo:
<head>
<scri pt type="text/ javasc ri pt" src=" . ./j query-1. 2. 6. js"></scri pt>
S(document) .ready(functi on() {
S('div, p') .css( 'background' , 'green');
});
</scri pt>
</head>
<body>
<div>DIV</div>
<p>Parágrafo</p>
<div>DIV</div>
</body>
</htmh
.iJ [arquivo-2.1c.html)
S(callback)
Esca função descina-se a servi r de concainer para scripts jQu ery que devam ser
execucados somente após o carregamento do DOM. É uma funç ão idênàca ao
mérodo ready() escudado cm [C l 5 1.1.6.2]. Tecnicamente, pode-se dizer que se
trata de uma forma abreviada de escrever S(document) . ready() .
Observe, no exemplo a seguir, que se crara do mesmo exemplo mostrado no
item anterior, no qual se subscicuiu o mécodo ready() por esta função.
Exemplo:
<head>
<scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. js"></scri pt>
$(function($) {
S( 'div, p').css('background' , ' green');
}) ;
</sc ript>
</head>
<body>
<div>DIV</div>
<p>Parágrafo</p>
<diV>DIV</div>
</body>
</htmh
.iJ [arquivo-2.1 d.html)

se/etorjQuery.each(callback)
Usamos o termo se letorjQverypara designar genericamente umobjeto ou array
de objetos retomado por um simples seletor jQuery ou por um encadeamento
jQuery.
Este método destina-se a executar tuna função roda vez que encontra um elemento
constante do conjunto procurado. Por exemplo: você deseja percorrer o DOM e
mud ar a cor de fundo de rodos os divs do documento. Observe, a seguir, que se
criou um botão para disparar o evenro e percorreu-se o DOM usando o método
each() para executar a mudança de cor de fundo.
Exemplo:
<styl e type=" text/ css" media="a11 ">

p {cursor:pointer; color:#OOf;}
div {width :200px; height:lOOpx; border:lpx sol id #000 ; margin:20px;}
</Styl e>
<script type="text/javasc ript" src=" . ./jquery-1.2 .6. js"></sc ript>
S('button').click(function() {
S('di v' ) .each(function(i) {
S(this) .css( ' background', ' red' );
}) ;
});
</script>
</head>
<body>
<div>DIV</di v>
<div>DIV</div>
<div>DIV</di v>
<button type="button">Colorir OIVS</button>
.iJ [arquivo-2.1e.html)
O scripr começa procurando o botão e a este atribui a tarefa de disparar a
execução de uma função ao ser clicado. Tal função procura cada um dos divs
no documento e estiliza-os com fundo na cor vermelha. Você deve estar se per-
guntando: por que complica r se basta decla rar S(' div') .css('background' , 'red')?
Certo, essa simples declaração teria o mesmo efeito, contudo note que ex isce um
parâmetro i na função defi nida em each() . Esse parâmetro retorna um contador
dos elementos encontrados. Essa fu nção fu nciona como um loopfor do JavaScript.
No arquivo de exemplo, acrescentou-se um alert(i) para você acompanhar o
funcionamento da função.

se/etorjQuery.length
Esra propriedade rerorna o número de ocorrências do elemento-alvo.
Exemplo:
<style type="text/css" media,,"all ">

p {cursor:poi nter;}
div {width:200px; height:lOOpx; border:lpx soli d #000 ; margin:20px;}
</Styl e>
<scri pt type.."text/ j avas e ri pt" src=" . ./j query-1. 2. 6. js"></scri pt>
S('p ' ).click(function() {
var nDiv = S('div' ).l ength;
S('<span>Foram encontradas ' + nDiv + ' DIVs .</span> ').appendTo( ' p');
}) ;
});
</scri pt>
</head>
<body>
<p>Clique aqui para saber quantos divs existem nesse documento.<br /></p>
<div>DlV</di V>
<div>DIV</div>
<div>DIV</di v>
.iJ [arquivo-2.1f.html]
seletorjQuery.eq(posição)
Esta função retorna uma determinada ocorrência do conjunto de elementos-a lvo.

O a rgumento posição refere-se à posição da ocorrência no conjunto selecionado.
No exemplo a segu ir, selecionou-se o terceiro item da lista. Ião esqueça que em
JavaScripc a contagem começa em O(zero).
Exemplo:
<scri pt type="text/j avas e ri pt" src=" . ./j query-1. 2. 6. js"></sc ri pt>

<script type="text /javascript">
$('li ' ) .eq(2) .css('color', ' red ' )
)};
</head>

<hody>
<Uh
<l i>Item 1</ l i>
<l i>Item 2</l i>
<li >ltem 3</l i>
<l i>Item 4</ l i>
<l i>Item 5</l i>
</uh
.iJ [arquivo-2.lg.html]
seletorjQuery.get()
Esra fun ção desrina-se a acessar elernenros do DOM sem emprego das funcio-
nalidades jQuery. Pode ser usada para manipu lar direramence o DOM e foi
criada para resolver problemas de retro-compatibilidade. Retorna um array de
elementos.
Exemplo:
<Style type="text/css" medi a="all ">

div {margi n:20px O; color: red ;}
</style>
<scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. j s"></scri pt>
S(document) .ready(func ti on() {
function conteudoParagrafos(p) {
var arrayConteudos = [ ] ;
for (var i = O; i < p.length; i++) {
arrayConteudos.push(p[i] .innerHTML);
}
S('div' ) .text(arrayConteudos.join(' - ' ));
}
S('button' ) .click(function()
conteudoParagrafos(S('p ' ).get(). reverse ());
}) ;
S( ' .reset') .click(funct ion() {

S('di v') .empty();
}) ;
});
</script>
</head>

<hody>
<button type="button">Rodar script</button>
<button type="button" class="reset"> Reset</button>
<p>Parágrafo um.</ p>
<p>Parágrafo dois.</p>
<P>Parágrafo t rês.</P>
<diV></di V>
.iJ [arquivo-2.1h.html]
seletorjQuery.get(índice)
Esca fu nção tem a mesma fi nalidade da anterior e destina-se a acessar u m ele-

mento específico do conjunto de elementos retornado. O parâmetro índi ce indica
a pos ição do elemento na array retornada .
seletorjOuery.index(olvo}
Esta função retorna o índice do elemento defin ido no parâmetro a1vo. A contagem
começa em O (zero) e, caso não exista um índice para o alvo, a função retorna o
valor -1. No exemplo a seguir, o script percorre e encontra todos os parágrafos
do documento e recolhe seus índ ices. A demonstração, no exemplo, se faz com
um clique em cada um dos parágrafos.
Exemplo :
<style t ype="text/css" media="all ">

div {margi n: 20px O;}
span {color: red ;}
p {cursor:poi nter;}
</styl e>
<Scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. js"></sc ri pt>
S('p ' ).cl i ck(function() {
var í ndice = S('p' ).i ndex(this);
S('div') .append('O índice deste parágrafo é: <SpaJ'l>' +índice + '</Span><hr />');
}) ;
$(' . reset').click(function() {
S( ' di v') .empty();
} );
}) ;
</scri pt>
</head>

<body>
<button type="button" class.."reset">Reset<lbutton><br I>
<b>Clique em cada um dos parágrafos abai xo <br />
para revelar seu i ndice<lb>
<p>Parágrafo um.</p>
<P>Parágrafo dois.<IP>
<p>Parágrafo três.<IP>
<div></di V>
.iJ [arquivo-2.1 i.html)

jQuery.noConflictO
Esta função é utilizada para evitar conflitos da biblioteca jQuery com outras
bibliotecas usadas no mesmo documento e que fazem uso do alias S.
Existem várias bibliotecas JavaScript disponíveis e, se você optou por usar
JQuery, sem dúvida fez uma escolha inteligente e não estará impedido de utilizar
outras bibliotecas em um mesmo projeto, desde que come alguns cuidados para
evitar conflitos.
Conflitos ocorrem porque d iferences bibliotecas, com seus diversos métodos,
usando uma sintaxe comum para invocar suas funcionalidades (o alias Sou o
construtor S()), acabam por permitir que as d iferentes bibliotecas tentem inter-
pretar o mesmo código, criando um caos como esce: a biblioteca A tentando
interpretar uma função criada para a biblioteca B e vice-versa.
Existem diferentes técnicas para evitar conflitos e a mais simples é escrever
códigos usando o prefixo jQuery no lugar do alias $. Essa solução, apesar de
simples, tem a desvantagem de aumentar o número de caracteres a digitar e é
fácil perceber que irá exigir trabalho extra, principalmente em scripts extensos.
A sintaxe geral para essa solução é mostrada a seguir:
<scri pt src="outra_bi bl ioteca . js"><lscri pt>

<script type="textljavasc ript" src=" .. l jquery-1.2 .6.js"><lscript>
jQuery.noConflict();
li Script para bibl ioteca jQuery usando jQuery()
jQuery(document).ready(function() {
jQuery('p') .show();
jQuery( 'div').css('color', 'red');
jQuery( . . . ;
});

li Segue scri pt para outra biblioteca usando alias S()

S(' #nome-id').show();
se ...;
<lscript>
A segunda solução consisre em personalizar um alias para uso próprio. G ra-

ças a funcionalidades nativas da biblioteca, você pode criar o nome que bem
entender para substitu ir o alias nativo S. Assim, é possível adotar sintaxe tais
como as mostradas a seguir:
$maujor( ' div ' ).hide();
Scarlosalberto(' p'). show();
Sj('span ' ).fadeln();
O primeiro e segundo exemplos não são uma boa escolha para um alias, pois
deve-se procurar simplicidade e redução de digitação. O último exemplo é bem
melhor e o mais si mples possível, pois se escolheu uma ]erra apenas para alias.
Veja a seguir a sintaxe para sua criação:
<script src="outra_bi blioteca . js"></scri pt>

<scri pt type="textljavasc ri pt" src=" . ./j query-1. 2. 6. js"></sc ri pt>
var $j = jQuery.noConflict() ;
li Script para biblioteca jQuery usando $j()
Sj(document).ready(function() {
Sj(' p') . show();
Sj('div').css('color', ' red');
$j( ... ;
});
li Segue scri pt para outra biblioteca usando alias S()
S('#nome-i d').show();
$( .. . ;
<lscri pt>
A terceira solução permite-lhe usar o alias s tanto para a biblioteca jQuery

como para outra biblioteca. Nessa solução, você cria um script que funciona
como uma espécie de container para seus códigos jQuery e insere os scripts da
ourra biblioteca fora desse container. O container nada mais é que uma função
definindo S como jQuery. O exemplo a seguir esclarece essa solução:

<scri pt src.."outra_bi bl ioteca. js"><lscri pt>

<Scri pt type="textljavasc ri pt" src=" . ./j query-1. 2. 6. js"><lsc ri pt>
<script type="textljavascript">
jQuery.noConflict();
(function(S) {
li Script para biblioteca jQuery usando $()
$('p') .show();
S('div').css('color', 'red');
$(. . . ;
}) (jQuery);
)};
li Segue scri pt para outra biblioteca usando alias$()
$('#nome-i d').show();
$( ... ;
<Is cri pt>
2.2 Seletores jQuery

Para um sólido entendimento de seletores, é necessário que você esteja fami -
liarizado com a árvore do documento e o consequente relacionamento entre os
elementos que a compõem. Não é sem razão que se emprega o termo árvore do
documento e a melhor maneira de se entender seu funcionamento e relaciona-
mentos é fazer analogia com a conhecida árvore genealógica examinando o grau
de parentesco entre os elementos de um documento.
A terminologia técnica de referência aos inter-relacionamentos na árvore do
documento utiliza os mesmos termos usados em árvore genealógica. Na árvore
de um documento, existem elementos-pai, elementos ancestrais, elementos-fi lho,
elementos-irmão e assim por diante.
Considere um documento com a seguinte marcação:
<body>
<div id="topo">
<hl>empresa<l hl>
<Ul id="nav">
<li><a href="#">l i nk l<la><ll i>
<li><a href="#">Link 2<1a><lli>
<li><a href="#">Link 3<1a><lli>
<lul>
<ldiv>

cdiv id=''princi pal''>

ch2>Título</h2>
cp> . .. parágrafo cem>itálicoc/em> ... c/p>
ch2>Tituloc/h2>
cblockquote><p> .. . citaçào ... c/p>c/blockquote>
c/div>
chr />
c/body>
c/html>
Veja, na figura 2.1, o diagrama representativo d a árvore do documento.
body
div dlv
hr h2 p h2 blockquote
em p
li
a a a
Fig ura 2. l - Árvore do documento.
Veja alguns exemplos da termino logia q ue se aplica aos elementos mostrados

na árvore do documento:
• body é ancestral de todos os elementos. Todos os elementos são descendentes

d e body.
• ul é ancestral de li e de a. li e a são descendentes de ul.
• li é elemento-fi lho de ul. ul é elemento-pai de li.
• blockquote é irmão de p e também cem um filh o p.
• blockquote é irmão adjacente de h2
• em e p não são irmãos.
• li não é filho de di v, mas é seu descendente.
A tabela 2.1 mostra como o relacionamento entre elementos na árvore do

documento determina a sintaxe do seletor. Os termos serão frequentemente
citados neste capítulo e seu ente ndimento é fundamental para a compreensão
do funcionamento dos seletores.

Tabelo 2 .1 - Elementos no órvore do docume nto
Termo Relacionamento Sintaxe adotada
Elemento-pai O ascendente direto do elemento pai> filho

Elemento-filho O descendente direto do elemento pai> filho
Elemento-irmão Elementos-filho de um mesmo pai
Elemento adjacente Elemento que se segue a outro A+B
Elemento-irmão adíacente Elementos-filho do mesmo pai A ~B
2.2.1 Seletores simples
$(id)
Seletor de i d: acessa o elemento cujo valor do atributo id tenha sido especificado

no argumento.
Exemplo:
<styl e t ype=" text/ css" media="all">

div {width:200px; hei ght:lOOpx; border:lpx sol id #000 ; margi n:20px;}
</style>
<Script type="text/javasc ript" src=" . . / jquery-1.2 .6.js"></sc ript>
S('button' ) .click(function() {
S('#diferente' ) .css(' background' , 'red' ) ;
}) ;
} );
</script>
</head>
<bOdY>
<button type="button">Vermelha</button>
<diV>DIV</ di v>
<diV>DIV</ div>
<div i d="di ferente">DIV</di V>
~ [arquivo-2.2.la.html)
Nesse exemplo, uàli zou-se o selecor id S('#diferente') para acessar o div ao

qual será anexado o comporcamenro definido no sc ripr (mudar a cor de fundo
para vermelha).

$(classe)
Seleror de classe: acessa os elementos cL1jo valor do atriburo class tenha sido
especificado no argllmenco.
Exemplo:
<style type="text/css'' media="al l">

div {width:200px; height:lOOpx; border:lpx solid #000; margin:20px;}
</style>
<scri pt typeo!'text/javasc ri pt" src=" .. / j query-1. 2. 6. js"></scri pt>
S(document).ready(function() {
S('button' ) .click(f unction{)
$( ' .diferente').css('background' , 'red ' );
}) ;
});
</script>
</head>
<body>
<button type="button">Vermelha</ button>
<div class="diferente">DIV</div>
<div class="diferente">DIV</div>
<div>DIV</div>
~ [arquivo-2.2.lb.html]
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor de

classe $(' .diferente' ) para acessar os dois divs, os quais será anexado o compor-
tamento definid o no script (mudar a cor de fundo para vermelha).
$(elemento)
Seletor de elementos: acessa todos os elementos especifi cados no a rgumento.
Exemplo:
<style type="text/css" medi a="all ">

di v {wi dth: 200px; hei ght: lOOpx; border: lpx sol i d #000; margi n: 20px;}
</styl e>
<scri pt type="text/ j avas e ri pt" src=" . . / j query-1. 2. 6. js"></scri pt>
S('button' ) .click(funct ion() {

S('div').css('background' , ' red ' );

}) ;
});
</script>
</head>
<body>
<div>DIV</div>
<div>DIV</di v>
<div>DIV</ div>
.iJ [arquivo-2.2.1c.html)
N esse exemplo, utilizai-aro-se um botão pa ra disparar o evento e o seletor d e
elemento S(' div') para acessar codos os divs existentes no documento, os quais
será a nexado o cornporra rnento definido no scr ipt (mud a r a cor d e fundo para
vermelha).
$(seletor 7, seletor2, seietor3, ... )

Grupamento d e seletores : acessa um agrupamento d e seletores. O argumento é
uma lista d os seletores a acessar.
Exemplo:
<styl e type=" text/ css" medi a="all ">

div {width:200px; height:lOOpx; border:lpx solid #000; margin :20px;}
</style>
<Scri pt type="text/javascri pt" src=" . ./j query-1. 2. 6. js"></scri pt>
<script type="text/javasc ri pt">
S('button' ) . click(function()
S( 'p, .di ferente, l i ').css( 'background ', ' red');
}) ;
}) ;
</scri pt>
</head>
<body>
<button type="button">Vermel ha</button>
<div>DIV</di V>
<p>Texto de um parágrafo</ p>
<div class="diferente''>DIV co11 class="diferente"</ div>
<P cl ass="outra"> Parágrafo com class="out ra"</p>

<Uh
<li>Item l</li>
<li>Item 2</li>
<li>Item 3</l i>
</uh
.iJ [arquivo-2.2.1 d.html]

Nesse exemplo, util izaram-se um botão para disparar o evenco e o grupo de
sclcwrcs p, .di ferente e li para acessa r todas as instâncias dos elementos às qua is
será anexado o comporta mento definido no script (mudar a cor de fundo para
vermelha). Note que o parágrafo ao qua l se atribuiu a classe outra é alvo do se-
letor e fo i esti lizado, pois a presença do atributo class não altera a condição do
elemento d e ser um parágrafo.
2.2.2 Seletores compostos

Seletor composco é aquele constituído pela combinação de dois ou mais seletores
simples. A combinação encre seletores simples para criar um seletor composto
segue uma sintaxe própria e é feita com o emprego de três sinais de combinação
como d escrito na ta bela 2.2
Tabelo 2.2 - Sinais de combinoçõo
1 Sinal de combinação Exemplo ilustrativo Nota 1
Espaço em branco div p em Obrigatôrio usar um ou mais espaços entre seletores
Sinal de maior ">" div > p ou div>p Espaçamento facultativo entre seletores 1
1 Sinal de adição •+· , p +a ou p+a Espaçamento facultativo entre seletores 1
$(ancestral descendente)
Acessa o elemento descendente do ancestral especificado no argumento.
Exemplo:
<Style t ype="text/css" media="all ">

div {width: 200px ; hei ght:lOOpx; border: l px soli d #000 ; margin:20px;}
</styl e>
<script type="text/ javasc ript" src=" .. / jquery-1.2 .6. js"></script>

S('button') .click(funct ion() {
S(' div span') .css('background' , ' red') ;
}) ;
}) ;
</script>
</head>
<body>
<but ton type=" button">Vermel ha</button>
<div>
<P>Parágrafo filho do div com <span>texto</span> marcado com span</P>
</div>
<p>Parágrafo filho de body com <span>texto</span> marcado com span </p>
~ [arquivo-2.2.2a.html]
1 esse exemplo, utilizaram-se um botão para disparar o evento e o seleror ancestral

descendente para acessar os elementos span descendentes do div (neste exemplo,
apenas um elemenco span) aos qua is será anexado o comporramenco defin ido
no script (mudar a cor de fundo para vermelha). Note que os do is elementos
span constantes do DOM são filhos de um parágrafo, mas somente o primeiro é
descendente do div.
$(pai> filho)
Acessa o elemento-filho do pa i especificado no argumento.
Exemplo:
<style type="text/css" media="al l ">

div {width:200px; hei ght:lOOpx; border: l px sol id #000; margin :20px;}
</Styl e>
<script type="text/javasc ript" src=" . ./jquery-1.2 .6.js"></script>
<SCript type="text/javasc ript">
S('button') .click(function()
S( ' div > span ') .css(' background' , 'red' );
}) ;
} );
</script>
</head>
<bOdy>
<but ton type="button">Vermel ha</button>

<div>
<p>Parágrafo filho do div com <span>texto</span> marcado com span</p>
</diV>
<p>Parágrafo fi l ho de body com <span>texto</span> marcado com span </P>
.iJ [arquivo-2.2.2b.html)
Utilizaram-se um botão para d isparar o even to e o selcror-pai-filho para acessar
os elementos span filho do div (nesse exemplo, há duas ocorrências do elemento
span) aos quais será anexado o comportamento defi nido no script (mudar a cor
de fun d o para vermelh a). Observe que a marcação usad a nesse exemplo é a
mesma do exemplo anterior, no entanto como não há elemento span filho do div
- são filhos dos parágrafos - , nada acontece quando se clica o botão. Caso rivesse
usado o seletor S(' p > span ' ), os dois e lementos span seriam alvo do seletor. Faça
uma cópia do arquivo e altere o seletor como sugerido.
$(anterior+ próximo)
Acessa o elemento próximo q ue se segue imediatamente ao elemento anterior.
Exemplo :
<style type="text/css" media="al l">

div {width:200px; hei ght:lOOpx; border :l px sol id #000 ; margin :20px;}
</Styl e>
<scri pt type="t ext/javasc ri pt" src=" . ./j query-1. 2. 6. js"></sc ri pt>
<Script type="t ext/javascript">
S( ' button') .click(function()
S(' div + p' ) .css( ' background ' , 'red ' );
}) ;
} );
</scri pt>
</head>
<bOdY>
<button t ype=" button">Vermel ha</button>
<p>Parágrafo antes do div</p>
<div>
<p>Parágrafo filho do div</p>
</div>
<P>Parágrafo que se segue ao div</p>
<p>Parágrafo que seguinte</p>
.iJ [arquivo-2.2.2c.html)
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor

anterior próximo para acessar o elemento p imediatamente após o div ao qual
será anexado o comportamento definido no script (mudar a cor de fundo para
vermelha).
$(anterior~ irmãos)
Este é um seleror previsto nas CSS 3 que acessa codos os elementos irmãos e que
se seguem ao elemento anterior.
Exemplo:

div {width:200px; height:lOOpx; border:lpx solid #000 ; margin:20px;}
</Styl e>
<scri pt type="text/j avas e ri pt" src=" .. / j query-1. 2. 6. js"></ sc ri pt>
S('~btn-vermelha').click(function() {
S('h2 ~ p').css('background ' , 'red');
}) ;
});
</scri pt>
</head>
<body>
<P>Parágrafo antes do cabeçalho h2</p>
<h2>Cabeçalho h2</h2>
<p>Primeiro parágrafo após o cabeçalho h2</p>
<p>Segundo parágrafo após o cabeçalho h2</p>
<div>DIV</div>
<p>Terceiro parágrafo após o cabeçal ho h2</p>
<dÍV>
<P>Parágrafo dentro de um di v</P>
</div>
.iJ [arquívo-2.2.2d.html)
anterior irmão para acessar todos os elementos p irmão que estão após o cabeçalho
h2 e aos quais será anexado o comportamento definido no script (mudar a cor
de fundo para vermelha).

Note o seguinte:
• O parágrafo antes do cabeçalho h2 não é selecionado, pois o seletor é para

elementos posteriores a h2.
• O primeiro e segundo parágrafos após h2 são selecionados porque são

filho s do mesmo pai (o elemento body), portanto irmãos.
• O elemento div que se segue não é selecionado, pois o seletor é para pará-
grafos.
• O parágrafo que se segue ao div é selecionado, pois é filho de body, está após
h2 e, portanto, é irmão dos parágrafos anteriores.
• O parágrafo dentro do div que se segue não é selecionado, pois não sendo
filho de body (é filho de um div), não é irmão dos parágrafos anteriores.
2.2.3 Seletores - Filtros básicos

Denominam-se seletores filtros básicos os seletores do tipo pseudosseletores
que se destinam a filtrar uma co ndição particu lar de um seletor simples ou
composto.
se/etor.first
Acessa a primeira ocorrência do conjunto de elementos selecio nados por
seletor.
Exemplo:
<script type="text/javascript" src=" . ./jquery-1.2 .6. js"></script>

<SCript type="text/javasc ript">
S('#btn-vermelha' ).cl ick(function() {
$ (' l i:first').css('background', 'red');
});
});
</script>
</head>
<body>
<Uh
<l i>Primeiro item</li>

<l i>Segundo i tem</li>

<l i>Terceiro i tem</l i>
<l i>Quarto item</ li>
<l i>Quinto item</ li>
</uh
.ij [arquivo-2.2.3a.html)
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor :first

para acessar o primeiro item da lista ao qual será anexado o comportamento definido
no script (mudar a cor de fundo para vermelha).
seletor.last
Acessa a última ocorrência do conj unto de elementos selecionados por seletor.
Exemplo:
<script type="text/javasc ri pt" src=" .. / jquery-1.2 .6.js"></sc ript>

<script type="text/ javasc ri pt">
S('#btn-vermelha' ) .click(function() {
S('li :last') .css(' background', 'red' );
}) ;
});
</se ri pt>
</head>
<bOdy>
<Uh
<l i>Segundo item</li>
<l i>Terceiro item</l i >
<l i>Quarto item</li>
<l i>Quinto item</li>
</Uh
.ij [arquívo-2.2.Jb.html)
Nesse exemplo, utilizaram-se um botão par a disparar o evento e usamos o

seletor :last para acessar o último icem da lista ao qual será anexado o compor-
tamento definid o no script (mudar a cor de fund o para vermelha).

se/etor1:not(seletor2)
Este é um seletor previsto nas CSS 3 que acessa o conj unto de selerores se1etorl,
exclu indo as instâncias d efinidas em se1etor2.
Exemplo:

S(' li:not(li :first)').css( 'background', 'red');
});
} );
</script>
</head>
<body>
<button type=" button">Verme1ha</button>
<Uh
<l i>Segundo i tem</li>
<l i>Terceiro item</li>
<l i>Quarto item</li>
<l i>Quinto item</li>
</Uh
~ [arquivo-2.2.3c..html]
Nesse exemplo, utili zaram -se um botão para disparar o evento, o seletor l i para
acessar rodos os elementos irens de lista e o seletor :not para exclu ir o primeiro
item da lista ao qua l será an exado o comporcamenco definido no scripc (mudar
a cor de fundo para vermelha). Todos os itens da !isca serão selecio nados, menos
o primeiro (not(li :first)).

se/etor:even
Esre é um seletor não previsto nas CSS e exclusivo da biblioteca, que acessa as
ocorrências de ordem par do conjunto de elementos selecionados por seletor.
Exemplo:

S('tr:even').css ('background', 'red');
});
});
</script>
</head>
<body>
<table border=''l">
<tr>
<td>Célula índice 0</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
.iJ [arquivo-2.2.3d.html)
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor tr:
even pa ra acessar todas as linhas pares da tabela às quais será anexado o comporta-
mento definido no script (mudar a cor de fundo para vermelha). Lembre-se ele que,
na linguagem javaScript, roda contagem começa em O (zero) e, em consequência,
as ocorrências pares são a primeira (índice O, que é contado como seleção par), a
terceira (índice 2), a quinta (índice 4), e assim por diante.

se/etor.odd
Este é um seleror não previsto nas CSS e exclusivo da biblioteca, que acessa as
ocorrências de ordem ímpar do conjunto de elementos selecionados por se1etor.
Exemplo:

S('tr: odd ' ) .css( ' background ' , 'red');
});
} );
</script>
</head>
<body>
<button type=" button">Verme1ha</ button>
<table border=''l">
<tr>
<td>Célula índice 0</ td>
</tr>
<tr>
</t r>
<tr>
</tr>
<tr>
</tr>
<tr>
<td>Célula í ndice 4</td>
</tr>
</table>
.iJ [arquivo-2.2.3e.html]
Nesse exemplo, utilizara m-se um botão para disparar o evento e o seletor tr:
odd para acessar todas as li nhas ímpares da tabela às quais será anexado o com-
ponamemo definido no script (mudar a cor de fundo para vermelha). Lembre-
se de que, na linguagem javaScript, toda contagem começa em O (zero) e, em
consequência, as ocorrênc ias ímpares são a segunda (índice 1), a quarta (índice
3), a sexta (ú1d ice 5), e assim por diante.

se/etor:eq(fndice)
Este é um seletor não previsto nas CSS e exclusivo da bib lioteca, que acessa a
ocorrência de ordem índice no conjunto de elementos selecionados por selet or.
Exemplo:
<script type="text/javasc ript" src=" .. /j query-1. 2.6.js"></sc ript>

<Scri pt type="text/javasc ript">
S(document) . ready(funct i on() {
S('#btn-vermel ha' ).cl ick(function() {
$('td: eq(4)').css('background ' , ' red') ;
}) ;
} );
</scri pt>
</head>
<body>
<button type=" button">Vermel ha</button>
<table border="l">
<tr>
<td>td 0</td>
<td>td l</td>
</tr>
<tr>
<td>td 2</td>
<td>td 3</td>
</tr>
<tr>
<td>td 4</td>
<td>td 5</td>
</tr>
<tr>
<td>td 6</td>
<td>td 7</td>
</tr>
</tabl e>
.i) [arquivo-2.2.3f.html]
Nesse exemplo, uri lizaram-se um botão para disparar o evento e o seletor td:
eq(4) para acessar a célula da tabela que ocupa a quarta posição no conjunto das
células selecionadas à qua l será anexado o comportamento definido no script
(mudar a cor de fundo para vermelha). Lembre-se de que, na linguagemjavaScript,
toda contagem começa em O (zero) e, em consequência, a quarta ocorrência
corresponde à quinta célula.

se/etor:gt(índice)
Esre é um seletor não prevista nas CSS e exclusivo da biblioteca, que acessa rod as
as ocorrências do conjunta de elementos selecionados por se1etor cujo índice é
maior que o índice definido no parâmetro indice.
Exemplo:

<script type="text/javascri pt">
S(document) . ready(function() {
S('#btn-vermelha').click (function() {
S('td:gt(4)') .css('background', 'red');
} );
}) ;
</script>
</head>
<body>
<button type="button''>Verme1ha</button>
<table border="l">
<tr>
<td>td 0</td>
<td>td l</td>
</tr>
<tr>
<td>td 2</td>
<td>td 3</td>
</tr>
<tr>
<td>td 4</td>
<td>td 5</td>
</tr>
<tr>
<td>td 6</ t d>
<td>td 7</ td>
</tr>
</table>
.iJ [arquivo-2.2.3g.html)
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor td:
gt(4) para acessar as células cujo índice é maio r que quatro no conjunto das células
selecionadas, às quais será anexad o o comporta mento defin ido no scripc (mudar

a cor de fundo para vermelha). Lembre-se de que, na linguagem JavaScript, roda

conragem começa em O (zero) e, em consequ ência, a quarra ocorrência corres-
ponde à quinta célula.
seletor.lt(índice)
Este é um seletor não previsto nas CSS e exclusivo da biblioteca, que acessa rodas
as oco rrências do co njunto de elementos selecionados por seletor cujo índice é
menor que o índice defin ido no parâmetro indice.
Exemplo:
<scri pt type="text/ javasc ri pt" src=" . ./j query-1. 2. 6. js"></ scri pt>
S(' td:lt(4)') .css('background' , 'red');
}) ;
} );
</scri pt>
</head>
<bOdY>
<tabl e border="l">
<tr>
<td> td 0</td>
<td>td 1</td>
</tr>
<tr>
<td>td 2</td>
<td>td 3</td>
</tr>
<tr>
<td>td 4</td>
<td>td 5</td>
</tr>
<tr>
<td>td 6</td>
<td>td 7</td>
</ tr>
</table>
~ [arquivo-2.2.3h.html]


td:lt(4) para acessar as células cujo índice é menor que quan-o no conjunto das
célu las selecionadas, às qua is será anexado o comportamento definido no script
(mudar a cor de fundo pa ra ve rme lha). Lembre de que, na linguagem j avaScript,
roda contagem começa em O (zero) e, em consequência, a quana ocorrência
corresponde à quinta célula.
$(:header)
Este é um seletor não previsto nas CSS e exclusivo da biblioteca, que acessa todas
as ocorrê ncias de cabeçalhos de qualquer nível, ou seja, rodos os elementos hl
até h6 .
Exemplo:
<script type="text/ javascript" src=" . ./jquery-1.2 .6.js"></sc ript>

<script type="text/javascri pt">
S(':header').css('background', 'red' );
} );
});
</script>
</head>
<body>
<hl>cabeçalho nível 1</hl>
<P>texto de um parágrafo</P>
<h2>cabeçalho nível 2</h2>
<P>texto de um parágrafo</p>
<P>texto de um parágrafo</p>
.iJ [arquivo-2.2.3i.html)
Nesse exemplo, utilizara m-se um botão para disparar o evento e usamos o
selewr :header para acessar todos os cabeçalhos, aos quais será anexado o com-
portamento definido no script (mudar a cor de fundo para vermelha).

se/etor.animated
Esre é um seletor não previsto nas CSS e exclusivo da biblioteca, que acessa as
ocorrências do elemenro seletor para as quais se tenha definido um script de
animação. Esse seletor será visto com mais detalhes ao se abordarem as técnicas
jQuery de animação.
2.2.4 Seletores de conteúdo

seletor.contai ns(texto)
Este é um seletor não previsto nas CSS e exclusivo da b iblioteca, que acessa
todas as ocorrências de seletor que concenham um texto (string) definido no
parâmetro texto.
Exemplo:
cscript type•''text/javasc ript'' src•" .. / jquery-1. 2. 6.js">c/script>

<script type"'"text/javasc ript">
S('p:contains( 'Maujor').css('background', ' red ' );
}) ;
});
</scri pt>
</head>
<bOdY>
<button type"'"button">Vermel ha</button>
<p>Visite o site do Maujor</P>
<p>Estude CSS e jQuery</p>
<P>HTML 5 está em fase de estudos</P>
<p>Maujor escreveu este livro</p>
<span>Elemento span contendo Maujor</span>
<p>parágrafo contendo maujor</P>
.i) [arquivo-2.2.4a.html]
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor :

contais para acessar todos os elementos p que contêm a palavra .Maujor, aos quais
será anexado o comporta mento definido no script (mudar a cor de fundo para
vermelha). ore que não se selecio naram o elemen m span (não é parágrafo) nem
o elemento p contendo maujor (minúscu la), poi s o seletor é sensível ao tamanho
da caixa da string passada pelo parâmetro texto.

se/etor.empty
Esre é um seletor previsto nas CSS 3 que acessa todas as ocorrências vazias de
seletor.
Exemplo:
<style t ype="text/css'' media="al l">

table tr td {height :20px;}
</styl e>
S('#btn-vermel ha').cl ick(function() {
S('td:empty.css( 'background ' , 'red');
}) ;
} );
</scri pt>
</head>
<body>
<button type=" but ton">Vermel ha</button>
<table border="l">
<tr>
</tr>
<tr>
<td></td>
</tr>
<tr>
</tr>
<tr>
<td>Célula í ndice 3</td>
</tr>
<tr>
<td></td>
</tr>
</table>
~ [arquivo-2.2.4b.html)
Nesse exem plo, uti lizaram-se u m botão para disparar o evento e o seletor td:
empty para acessar todas as células da rabeia que estão vazias, às quais será anexado
o compor tamento definido no script (mudar a cor de fundo para vermelha).

se/etor1:has(seletor2)
Este é um seletor não prevista nas CSS e exclusivo da biblioteca, que acessa rodas
as ocorrências do elemento definido pelo se1etorl que contenham pelo menos
uma ocorrência do elemento definido pelo se1etorZ.
Exemplo:
<scri pt type="text/javasc ri pt " src=" . ./j query-1. 2. 6. js"></scri pt>

S('p:has(strong) .css('background ' , 'red ' ) ;
} );
}) ;
</script>
</head>
<body>
<P>Texto com <i>palavra</i> em itál ico</ P>
<p>Texto com <b>palavra</b> em negrito</ P>
<p>Texto com <span>palavra</span> dentro de span</P>
<P>Texto com <Strong>palavra</strong> com forte ênfase</p>
<p>Texto sem marcação extra</p>
.iJ [arquivo-2.2.4c.html]
p:has(strong) para acessar todas as ocorrências de parág rafos que contenham o
elemento strong, aos quais será anexado o comportamento definido no scripr
(mudar a cor de fundo para vermelha).
Note que enquanto o seletor :contains() estudado a nterio rmente selecionou

elementos que contêm um determinado texto, esre seletor :has() selecionou ele-
mentos que conrêm um outro determinado elemento.
se/etor:parent
as ocorrências de elementos que seja m elementos-pai, o u seja, elementos que
tenham fi lhos, inclusive texto (texr-node) como filh o.
Exemplo :

<style type.."text/css" media.."al l">

p {height:20px;}
</styl e>
<scri pt type="text/j avas e ri pt" src=" .. / j query-1. 2. 6. js"></sc ri pt>
<script type,."text/javascript">
S(' p:parent).css ('background ', ' red');
});
});
</script>
</head>
<body>
<button type"" button''>Verme1ha</ button>
<P>Texto com <i>palavra</i> em itál ico</P>
<P></P>
<P>Texto sem marcação extra</P>
.i) [arquivo-2.2.4d.html)
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor p:

parent para acessar todas as ocorrências de parágrafos que contêm elementos-fi-
lho às quais será anexado o comportamento definido no script (mudar a cor de
fundo para vermelha). Observe que na marcação há um elemento parágrafo vazio
e que nas CSS se definiu uma altura de 20px para os parágrafos. Esse elemento
não é alvo de seu seletor. Para entender o funcionamento desse seletor, faça uma
cópia do arquivo exemplo e altere o seletor para S('p'), pois assim notará que
na visualização de sua cópia, no funcionamento do scripc, aparece o parágrafo
vazio com fundo na cor vermelha.
2.2.5 Seletores de visibilidade
:hidden
as ocor rências de elementos que estejam ocultos no documento, inclu indo campos
de formu lário input do tipo hidden.
Normalmente, este seletor acessa também os elementos de marcação contidos

na seção head do documento, portanto se esta não é sua intenção, límite a busca
• à seção body com a seguinte sintaxe: S(' : hidden', $(' body '))

Exemplo:
<style typec"text/css" media,,"all ">

hl {display :hidden;} /* esconde o elemento hl */
</styl e>
<scri pt type="text/j avas e ri pt" src=" . . / j query-1. 2. 6. js"></scri pt>
S(document) . ready(functi on() {
S( ' button ' ) .click(funct ion()
var total Ocultos = S(' :hi dden', S('body')) .length;
var i nputOcultos = S('input: hidden').lengt h;
S( ' span' ).text('Foram encontrados ' + totalOcultos +
' elementos ocultos , sendo ' + i nputOcultos +
' elementos input do tipo hidden . ') ;~ escrever o resultado */
}) ;
});
</scri pt>
</head>
<body>
<button type=" button">Ocu ltos</button>
<hl>Cabeçalho oculto por decl aração CSS</hl>
<form>
<i nput type,,"hidden" />
<i nput t ype,,"hidden" />
</form>
<span></span> 
.iJ [arquivo-2.2.Sa.html]
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor :
hi dden duas vezes: a primeira para acessar o total de ocorrências de elementos
ocultos e a segunda para acessar a ocorrência de elementos input do tipo hidden.
Os números de ocorrências fora m passados a variáveis e escritos no d ocumento
para constatação do funcionamento do script.
Note q ue elemencos ocultos pelas declarações CSS di splay:none (como mostrado

n o exemplo) ou visibility:hidden são acessados pelo seletor.
Esse seletor adm ite as seguintes sintaxes:
Sintaxe Descrição
S(' : hi dden') Acessa todos os elementos oculros no documento, incluindo
os clememos constantes da seção head, cais como ti tle, style,
scri pts, meta etc.

Sintaxe Descrição (cont.)

S(' :hidden' , $('body')) Acessa todos os elementos ocu ltos no documento que
constem da seção body. Veja jQuery(expressão, [contexto])
em (C2 52.1 ).
S(' seletor: hidden') Acessa rodos os elementos do tipo seletor, oculcos no
documento.
Sugestão: faça uma cópia do arquivo de exemplo e retire a seleção contextual

S('body') do seletor. Você irá notar que o número de elememos ocultos retornados
aumentou, pois na visualiza ção de sua cópia alterada, no funcionam ento do
script, foram incluídos os elementos da seção head.
:visible
Este é um seleror não previsto nas CSS e exclusivo da biblioteca, que acessa rodas
as ocorrências de elementos visíveis (não ocu ltos) no docu mento.
Normalmente, este seletor acessa também os elementos de marcaçáo contidos

na seção head do documento, portanto se esta não é sua intenção, limite a busca
à seção body com a seguinte sintaxe: S( ' : vi si bl e' , $( ' body'))
Exemplo:
<scri pt type="text/javasc ri pt" src=" . . / j query-1. 2. 6. js"></scri pt>

var totalVisiveis = S(' :vi sible', S('body ' )).length;
S('span') .text( 'Foram encontrados ' + totalVisiveis +
' elementos visíveis no documento.') / 2 escrever o resultado ~1
});
});
</scri pt>
</head>
<bOdY>
<button type=" button">Ocultos</button>
<hl>Cabeçalho de nível l</hl>
<p>Texto de um parágrafo</p>
<Span></span> 
Nesse exemplo, utilizaram-se um botão para disparar o evento e usamos o
seletor :visibl e para acessar o cocal de ocorrências de elementos visíveis na seção
body do documenro. Os resultados foram passados a uma variável e escritos no
documento para constatação do funci o namento do scripc.

Note que elementos ocultos pelas declarações CSS display :none ou visibility:
hi dden não são acessados pelo seletor.
Esse seletor ad mite as segu intes sintaxes:

Sintaxe Descrição
S(' :visible ' ) Acessa todos os elementos visíveis no documento,
incluindo os elementos constantes da seção head, tais
como title , style, scripts, meta etc.
$(' :visible ' , $(' body' )) Acessa rodos os elementos visíveis no documento que
constem da seção body.
S(' se 1etor:vi sible ') Acessa todos os elementos do tipo seletor, visíveis no
documento.
2.2.6 Seletores de atributo

Os seletores de atributo são previstos nas CSS 3.
seletor[atributo]
Acessa todas as ocorrências do elemento seletor para o qual se tenha declarado

o atributo definido no parâmetro atributo.
Exemplo:
<scri pt type="text/j avas e ri pt" src=" . ./j query-1. 2. 6. j s"></sc ri pt>

S('button' ) .click(funct ion()
S('p [titl e]' ) . css('background', 'red');
}) ;
});
</scri pt>
</head>
<body>
<h3>Cabeçalho nível 3</h3>
<P>Texto de um parágrafo <h>sem</b> atributo title .<p>
<p t i tle="meu_titulo">Texto de um parágrafo <b>Com</b> atributo t itl e.</p>
<P lang="pt-br">Texto de um parágrafo com atributo lang.</ p>
<p title="outro_ti tulo">Texto de um parágrafo com atributo title.</ p>


p[title] para acessar os elementos parágrafo que contêm o aa-ibuto titl e aos
quais será anexado o comportamento definido no scripc (mudar a cor de fundo
para vermelha).
seletor[atributo = "valor"]
Acessa todas as ocorrências do elemento seletor para o qual se cenha declarado
O par atributo "' "valor".
Exemplo:

S('button').click(f unction()
S('p[title = "meu_titulo"]'). css('background', 'red');
}) ;
});
</script>
</head>
<bOdY>
<button type=" button">Vermelha</button>
<p>Texto de um parágrafo <b>sem</b> atributo title = "meu_titulo".</p>
<P title="meu_titulo">Texto de um parágrafo <b>corn</b> atributo
ti tle = "meu_titulo".</P>
<P lang="pt-br">Texto de um parágrafo com atributo lang.</P>
<p ti tle:"outro_titulo">Texto de um parágrafo com atributo
ti tle = "outro_ti tulo".</P>
Nesse exemplo, utili zaram-se um botão para disparar o evento e o seletor

p[title = "meu_ti t ulo"] para acessar os elementos parágrafo que contêm o atributo
title com o valor "meu_titulo" aos quais será anexado o comportamento definido
no script (mudar a cor de fundo para vermelha).

seletor[atributo != "valol']
Acessa todas as ocorrências do elemento seletor para o qual o valor do arributo

declarado em atributo não seja valor. Esse seletor é a negação do seletor anterior,
ou seja, acessa to dos os elementos definidos em seletor que não sejam acessados
pelo seletor estudado anteriormente.
Exemplo:
<scri pt type="text/javasc ri pt" src=". ,/j query-1. 2. 6. js"></ scri pt>

S('p [titl e != "meu_titulo"] ' ). css('background' , ' red ' ) ;
}) ;
});
</script>
</head>
<body>
<p>Texto de um parágrafo <b>sem</b> atributo titl e = "meu_titulo".</P>
<P title="meu_titulo">Texto de um parágrafo <b>com</b> atributo
ti tl e = "meu_ti tulo".</p>
<P lang="pt-br">Texto de um parágrafo com atributo lang.</ p>
<P t i tle="outro_titulo">Texto de umparágrafo com atributo
ti tle = "outro_ti tulo" .</p>
i) [arquivo-2.2.6c.html]
Nesse exemplo, utilizaram-se um botão para dispa rar o evento e o seletor

p[title != "meu_titulo"] para acessa r os elementos parágrafo que não con têm o
atributo title com o valor "meu_ti tu lo" aos quais será anexado o comportamento
definido no script (mudar a cor de fundo para vermelha).
N ote que o seletor d e negação não procurou somente os elementos que pos-
suem o atributo negad o. Caso o elemento não possua o atributo, é considerado
alvo do seletor. Ao usar o seletor de negação, é mais seguro raciocinar com a
seleção complementar da seleção negada .

seletor[atributo " ="valor"]

Acessa todas as ocorrências do elemento seletor para o qual o valor do arributo
declarado em atributo começa com a srring valor.
Exemplo:

S('button').click(function()
S('p[titl e A= "out"] '). css('background', ' red ' );
});
});
</script>
</head>
<body>
<P>Texto de um parágrafo <b>sem</b> atri buto title = "meu_titulo".</P>
<P title,,"meu_titulo">Texto de um parágrafo <b>corn</b> atributo
<P lang="pt-br''>Texto de um parágrafo com atributo lang. </p>
<P title="outro_titul o">Texto de um parágrafo com atributo
title = "outro_titulo" .</P>
~ [arquivo-2.2.6d.html)
Nesse exemplo, uàlizaram-se um botão para disparar o evento e o seleror p[ti tle
A= "out") para acessar os elementos parágrafo que contêm o valor do arriburo title
começando com a string "out" aos quais será anexado o comporcamenro defi nido
no script (mudar a cor de fundo para vermelha). O acesso será ao parágrafo com
o arributo title de valor igual a outro_titulo.
seletor[atributo $="valor'1
Acessa todas as ocorrências do elemento seletor para o qual o valor do acriburo
declarado em atributo termina com a string valor.
Exemplo:


S('button' ) .cl ick(function() {
S('p[titl e S= ''tulo'']'). css( ' background', 'red ') ;
}) ;
});
</ script>
</head>
<body>
<P>Texto de um parágrafo <b>sem</b> atributo title e "meu_titulo".</P>
<P ti tle="meu_titul o">Texto de um parágrafo <b>corn</b> atributo
<P lang="pt -br">Texto de um parágrafo com atributo lang. </p>
<P title="outro_titulo">Texto de umparágrafo com atributo
title = "outro_titulo".</ P>
.i) [arquivo-2.2.6e.html]
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor p[title

$= "tulo"] para acessar os elementos par ágrafo que contêm o valor do arributo
title terminado co m a string "tulo" aos quais será anexado o comporrn menro
definido no scripc (mudar a cor de fundo para vermelha).
seletor[atributo *="valor'']
Acessa todas as ocorrências do elemento seletor para o q ua l o valor do atributo

declarado em atributo contém a string va1or.
Exemplo:

S(' p[title *= "_tit"] '). css('background ' , 'red ') ;
});
} );
</scri pt>
</head>
<bOdy>


<P>Texto de um parágrafo <b>sem</b> atributo title = "meu_titulo".</p>

<P title="meu_titulo">Texto de um parágrafo <b>com</b> atributo
title = "meu_titulo".</P>
<P lang="pt-br">Texto de um parágrafo com atributo lang.</P>
<P ti tle="outro_titulo">Texto de um parágrafo com atributo
ti tle = "outro_ti tulo".</p>
.iJ [arquivo-2.2.6f.html]
Nesse exemplo, utilizaram-se um botão para disparar o evenro e o seletor
p[title ~= "_tit"] para acessar os elementos parágrafo que contêm no valor do
atributo title a string _tit aos quais será anexado o comportamento definido no
scripr (mudar a cor de fundo para vermelha).
seletor[filtro 1atributo]••• [filtroN atributo]
Acessa todas as ocorrências do elemento seletor para as quais os atributos sa-

tisfazem rodas as condições declaradas nos filtros de atributos. Você pode usar
quantos filtros quiser.
Exemplo:

S('p[title S= ''lo''][id] ' ).css( 'background' , 'red' );
}) ;
});
</script>
</head>
<body>
<p>Texto de um parágrafo <b>sem</ b> atributo title = "meu_ti tulo" .</p>
<P ti tle="meu_ti t ulo" id="um">
Texto de umparágrafo <b>com</b> atributo title = "meu_titulo" e atributo id.
</p>
<P lang="pt-br">Texto de um parágrafo com atributo lang.</p>
<P title="outro_titulo">Texto de um parágrafo com atributo title = "outro_
titulo" .</P>
.iJ [arquivo-2.2.6g.html)

Nesse exemplo, utili zaram-se um botão para dí sparar o evento e o seletor d e

atributo com filtros p[title &= "lo"] [id] para acessar os elementos parágrafo que
contêm o atríbuto title com valor terminado na stri ng "lo" e ta mbém um atri-
buto id com qualquer va lor aos quaís será anexado o comportamemo d efiníd o
no script (mud ar a cor d e fund o para vermelha).
2.2.7 Filtros para seletores-filho

As pseudoclasses para seletores-filho são previstas nas CSS 3.
se/etor:first-child
Acessa o elemento que é o primeiro filho d o elemento d efinido em seletor.
Exemplo:
<Sc ri pt type: "text/j avasc r i pt" src:" . . / j query-1. 2 . 6. js"></sc ri pt>

<script type:"text/ javascript">
S('ol li :first-child') .css('background' , ' red') ;
}) ;
} );
</script>
</head>
<body>
<button type:" button">Vermel ha</button>
<Oh
<l i >Item de l ista l</li>
<l i >Item de l ista 2</li>
<l i>Item de l ista 3</li>
</oh
N esse exemplo, utílízaram-se um botão para dísparar o evento e o seletor ol

li : first -child para acessar o elemento li , primeí ro filho da lista ordenada ol, ao
qual será anexado o comporcamenro definido no sc rípt (mudar a cor de fundo
para vermelha).

se/etor.last-child
Acessa o elemenro que é o último filho do elemento definido em se1etor.
Exemplo:

S('ol li :last-child').css('background', 'red');
});
});
</scri pt>
</head>
<body>
<Oh
<l i>Item de lista 3</li>
</oh
Nesse exemplo, utili zaram-se um botão para disparar o evento e o seletor

ol li :last-child para acessar o elemento l i , último filho da lista ordenada ol, ao
qual será anexado o comporcamenco definido no scripc (mudar a cor de fundo
para vermelha).
se/etor.only-child
Acessa o elemento que é o filho único do elemento definido em se1etor.
Exemplo:
<Script type=''text/javascript'' src=" .. / jquery-1.2.6.js''></script>

<Script type="text/javasc ript">

S('ol li:only-child').css('background', 'red');

}) ;
});
</script>
</head>
<bOdY>
<Oh
<li>Item de l ista 1</li>
<l i>ltem de l ista 4</li>
<l i>Item de l ista 5</ li>
</oh
<Oh
<l i>Item único de lista</li>
</Oh
~ [arquivo-2.2.7c.html]
Nesse exemplo, utilizaram-se um borão para disparar o evenro e o seletor ol

li :only-child para acessar o elemenro li, fi lho único que ocorre na segunda lista
ordenada ol, ao qual será anexado o comportamento definido no script (mudar
a cor de fundo para vermelha).
se/etor.nth-child (fndiceleven/od d/equação)

Acessa o elemento que é filho do elemento definido em seletor e ocupa uma
posição definida conforme mostrado a seguir.
Argumento Descrição
índice Um número inteiro começando com um para acessar o primeiro,
segundo etc. filho. Exemplo: nth-child(3).
even Acessa os filhos de ordem par, lembrando que a contagem começa
cm O(zero) (par por padrão) e assim são pares os filhos na primeira,
terceira etc. posição. Sintaxe: nth-chi 1d(even).
odd Acessa os filhos de ordem ímpar, lembrando que a contagem co-
meça em O (zero) (par por padrão) e assim são ímpares os filhos na
segunda, quarta etc. posição. Sintaxe: nth-child(odd).
equação Uma expressão ma remá rica para acessar dererm inada posição. Exem-
plo: nth-child(3n) acessa os filhos nas posições 3, 6, 9, 12 etc. (n é a
sequência de números naturais). Outro exemplo: nth-child(3n - 2)
acessa os filhos nas posições 1, 4, 7, 10 etc.

Exemplo:
<scri pt type="text/j avas e ri pt" src=". ,/j query-1. 2. 6. js"></sc ri pt>

<script t ype="text/javasc ript ">
S('button') .click(funct ion() {
S('ol li :nth-chil d(3) ') .css(' background', ' red ' );
}) ;
} );
</scri pt>
</head>
<body>
<Oh
<l i>Item de lista l </li>
</Oh
,iJ [arquivo-2.2.7d.html)
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor ol
l i :nth-child(3) para acessar o elemenco l i , que é o tercei ro fil ho na lisca ordenada
ol , ao qual será anexado o comportamento definido no script (muda r a cor ele
fundo para vermelha).
2.2.8 Seletores para formulários
:input
Acessa os elementos i nput, textarea, select e button em um formulário.
Exemplo :
<scri pt type="text/javasc ri pt" src=". ,/j query-1. 2. 6. js"></sc ri pt>

S('button') .click(f unct ion()
S(': i nput ' ).css( ' border ' . '2px sol id #ffOOOO');
}) ;
});
</ scri pt>
</head>

<hody>
<button type="button">Bordas nos inputs</button>
<form action="">
<P><label>input de texto: <i nput type="text" /></label></p>
<P><label>input de senha: <i nput t ype="password" /></labeh</p>
<P><label>input oculto: <input type="hi dden" /></label></P>
<P><label>input checkbox: <i nput type="checkbox" /></labeh</p>
<P><labeh input radio: <input t ype="radio" / ></labeh</p>
<P><label>input imagem: <input type="image" src="ok .gif" /></label></p>
<P><label >Sel ect : <select>
<option>Opçào l</opti on>
<option selected="selected">Opção selecionada</opti on>
<Opt ion>Opçào 3</option>
<Opti on disabl ed="disabled">Opção desabi litada</option>
<opt ion>Opção 4</option>
<Option>Opçào 5</option>
</select></label ></P>
<P><label> Textarea: <textarea cols=" 25" rows="8"></textarea></l abe h</P>
<P><labehinput submit: <input type="submit" /></labeh</p>
<p>< labe hi nput reset: <i nput t ype=" r eset" /></l abe h</p>
<P><labeh input botao: <input type="button" /></labeh</p>
<P><1abeh el emento botao: <hut ton>Botão</button> </l abe l></P>
</form>
.iJ [arquivo-2.2.Sa.html]
Nesse exemplo, uà lizara m-se um botão para d isparar o evento e usamos o
sele tor :input para acessar os elemen tos input, textarea, select e but ton do fo rmulá-
rio aos quais será anexado o comportamento definido no script (ad icionar uma
borda na cor vermelha).
:text
Acessa os elementos i nput do tipo t ext e m um formulário.
Exemplo:
<Scri pt type="text/javasc ri pt" src=" . . / jquery-1. 2. 6. js"></scri pt>

S( ' button ' ) .click(function()
S( ' :text' ) .css('border', '2px solid #ffOOOO') ;
}) ;
});
</scri pt>
</head>

<hody>
<button type="button">Bordas nos inputs de texto</button>
<form action="">
<P><l abel>input de texto: <input type="text" / ></label></p>
<P><l abel>input de senha: <i nput t ype="password" /></labeh</p>
<P><label>input checkbox: <input type="checkbox" /></label></ P>
<P><l abel>input submit: <input type="submit" /></label></p>
<P><l abehinput reset: <input t ype="reset" / ></labeh</p>
<P><label>input botao: <input type="button" /></label></P>
</ form>
.iJ [arquivo-2.2.Sb.html)
N esse exemplo, utilizaram-se um botão para disparar o evento e o seletor :text
para acessar o elemento input d o tipo text no fo rmulário ao qual será anexado o
comportamento definido no script (adicionar uma borda na cor vermelha).
:password
Acessa os elementos i nput do tipo password em um formulário.
Exemplo:
<script type=''text/ javasc ript'' src=" .. / jquery-1.2.6.js"></ sc ript>

S('button') . click(funct ion()
S(':passviord ' ).css('border', '2px solid #ffOOOO');
}) ;
});
</se ri pt>
</ head>
<hody>
<button type"'"button">Bordas nos inputs de senha</button>
<form action="">
<P><l abel>input de texto: <i nput type="text" / ></label></ p>
<P><l abel>input de senha: <i nput type="passv1ord" / ></label></p>
<P>< l abel>i nput checkbox: <i nput type="checkbox" / ></ 1abe l></ p>
<P><l abel>input submit: <input type="submit" / ></labeh</ p>
<p><l abehinput reset: <input t ype="reset" /></labeh</p>
<P><l abehinput botao: <input t ype="button" /></labeh</p>
</ form>
.iJ [arquivo-2.2.Sc.html)
Nesse exemplo, uti li zaram-se u m botão para disparar o evento e o seletor

:password para acessar o elemento input do tipo password no fo rmu lário ao qual
será ane,xado o comporcamenco definido no script (adicionar uma borda na cor
vermelha).
:radio
Acessa os elementos input do tipo radio em um formulário.
Exemplo:
<scri pt type"'"text/javasc ri pt" src=" .. / j query-1. 2. 6. js"></ scri pt>

<script ty pe="text/javasc ript ..>
S('button') . cl ick(f uncti on()
$(':radio').parent().css('border', '2px solid #ffOOOO ' );
}) ;
});
</scri pt>
</ head>
<body>
<button type=" button">Bordas nos inputs radio</button>
<form action="">
<P><labehinput de texto: <i nput type="text" / ></labeh</ p>
<P><labehinput de senha : <i nput type="password" /></ labeh</ p>
<P><l abeh input checkbox: <i nput type="checkbox" / ></labeh</ P>
<p><labeh input radio: <input t ype="radio" /></ labeh</ P>
<p><labehi nput reset: <i nput t ype=" reset" /></ l abeh</ p>
<p><labehinput botao: <i nput t ype="button" /></labeh</p>
</ form>
.iJ [arquívo-2.2.Sd.html)
Nesse exemplo, utili zaram-se um botão para disparar o evento e o seletor : radio
para acessar o elemento input do tipo radio no formulár io ao qual será anexado o
comportamento definido no script (adicionar uma borda na cor vermelha).
Neste script e no script a seguir, passou-se a estitrzação da borda para o elemento-

pai parent() porque alguns navegadores, como Firefox 3, não suportam bordas
em inputs dos tipos radio e checkbox.

:checkbox
Acessa os elementos i nput do tipo checkbox em um formulário.
Exemplo:
<scri pt ty pe="text/javasc ri pt" src=" . ./j query-1. 2. 6. js"></scri pt>

S('button').click(f unction()
$(' :checkbox' ).parent() .css(' border ' , ' 2px sol id #ffOOOO');
}) ;
} );
</script>
</head>
<body>
<button type=" button">Bordas nos inputs checkbox</button>
<form act ion="">
<P><labehinput de t ext o: <i nput type="text" /></labeh</p>
<P><l abehinput de senha: <i nput type="passv1ord" /></labeh</p>
<P><l abeh input checkbox: <i nput type="checkbox" /></labeh</P>
<P><l abeh input radi o: <input t ype="radio" /></labeh</P>
<p><labeh input reset : <i nput t ype="reset" /></labeh</p>
<P><l abel>input botao: <input t ype="button" /></labeh</p>
</form>
.iJ [arquivo-2.2.8e.html]
pai do checkbox existente no formu lário ao q ual será anexado o comportamento
definido no script {adicionar uma borda na cor vermelha).
:submit
Acessa os elementos input do tipo submi t em um formulário.
Exemplo :
<scri pt ty pe="text/javasc ri pt" src=" . ./j query-1. 2. 6. js"></sc ri pt>

S('button') . click(funct ion() {
S(':submi t') .css('border', ' 2px sol i d #ffOOOO');
}) ;
} );
</script>

</head>
<body>
<button type="button">Bordas nos inputs submit</button>
<form acti on='"'>
<P><l abel>input de texto: <input type="text" /></label></p>
<P><label>input de senha: <Ínput type="password" /></label></P>
<P><l abel>input checkbox: <Ínput type="checkbox" /></labeh</p>
<P><l abehinput radio: <Ínput t ype="radio" / ></label></P>
<P><label>input reset: <i nput type="reset" /></label></p>
<P><labehinput submit: <input type="submit" /></label></P>
<P><l abel>input botao: <input type,,"button" /></label></P>
</form>
.i) [arquivo-2.2.8f.html]
Nesse exemplo, urilizaram-se um botão para disparar o evenco e o seleror :submit

para acessar o elemenco input do tipo submit no formulário ao qual será anexado o
comportamento definido no scr ipt (adicionar uma borda na cor vermelha).
:reset
Acessa os e lementos input do tipo reset e m um formulário.
Exemplo:

S('button').cl ick(function()
S(':reset') .css('border ' , '2px solid #ffOOOO');
});
});
</scri pt>
</head>
<body>
<button type=" button">Bordas nos inputs reset</button>
<form action="">
<p><label>input de texto: <i nput type="text" /></label></p>
<P><labe l> input de senha: <Í nput type="password" /></1abe1></P>
<p><l abel>input checkbox: <i nput type="checkbox" /></labeh</p>
<P><l abel>input radio: <input t ype="radio" /></label></P>
<P><label>input reset: <input type="reset" /></label></p>
<P><l abel>input submit: <input type="submit" /></label></P>

<P><labehinput botao: <input type=" button" /></labeh</p>

</form>
~ [arquivo-2.2.8g.html)
Nesse exemplo,
. utilizaram-se um botão para
. disparar o evento e o selecor : reset
para acessar o elemento i nput do tipo reset no formu lário ao qual será anexado o
componamento definido no scripc (adicionar uma borda na cor vermelha).
:image
Acessa os elementos input do tipo image em um formu lário.
Exemplo:
<scri pt type•"text/j avas e ri pt" src•" .. / j query-1. 2. 6. js''></scri pt>

S('button' ) . click(f unction() {
S( ': i mage').css( 'border ', '2px soli d #ffOOOO');
}) ;
});
</script>
</head>
<body>
<button type=" button">Bordas nos inputs imagem</button>
<form action="">
<P><labehinput de t ext o: <i nput t ype,,,"text" /></labeh</P>
<p><labehinput de senha: <i nput type="password" /></l abeh</p>
<P><l abeh input checkbox: <i nput type="checkbox" /></label></P>
<p><labeh input radio: <input t ype="radio" /></labeh</ P>
<P><labeh input reset: <input t ype="reset" /></labeh</ P>
<p><labehinput image: <i nput type=" image" src="ok.gif" /></labeh</p>
<P><labehinput botao: <input type.."button" /></labeh</P>
</form>
~ [arquivo-2.2.8h.html]
Nesse exemplo, utilizaram-se um botão para disparar o evento e o seletor :image

para acessar o elemento i nput do tipo image no formulár io ao qual será anexado o
comportamento definido no scripc (adicionar uma borda na cor vermelha).

:button
Acessa os elementos i nput do tipo button e os elementos button em um formu lário.
Exemplo:

S(document) . ready(funct i on() {
S('button ' ) . click(f unct ion() {
S( ' :button') .css('border', ' 2px soli d #ffOOOO');
});
}) ;
</scri pt>
</head>
<body>
<but ton type=" button">Bordas nos inputs but ton</ button>
<form action="">
<p><labeh input de texto: <i nput type="text" /></labeh</p>
<P><l abeh input de senha: <i nput type="passv1ord" /></labeh</P>
<p><labeh input checkbox: <input type="checkbox" /></labeh</P>
<P><labehinput radio: <i nput t ype="radio" /></labeh</p>
<P><labehinput reset : <input type="reset" /></labeh</p>
<p><labehinput submit: <input type="submit" /></label></p>
<P><l abeh input botao: <input t ype="but ton" / ></label></P>
<p><l abel >elemento butt on: <button> Botão</button></label></P>
</form>
,iJ [arquivo-2.2.Si.html]
Nesse exemplo, utilizaram-se um botão para disparar o evento e usamos o

selewr :button para acessar o elemento input do tipo button, bem como o elemento
button no formu lário aos quais será anexado o com portamento definido no script
(adicio nar uma borda na cor vermelha).
:file
Acessa os elementos i nput do ripo fi le em um fo rmulário.
Exemplo:

<scri pt type="text/javasc ript">
S(document) . ready(func ti on() {

S('button') . click(function() {
S( ':file ' ).css('boder', '2p~ solid #ffOOOO');
});
});
</ script >
</ head>
<body>
<button type.. "button''>Bordas nos inputs fil e</ button>
<form action: "">
<P><labehi nput de texto: <input type="text" / ></ labeh</ P>
<P><l abehinput de senha: <input type="password" / ></ labeh</ P>
<P><l abehinput file : <input type="file" / ></l abeh</p>
<P><l abehi nput radio: <i nput t ype=" radio" / ></labeh</P>
<P><l abeh i nput reset: <input type.."reset" / ></ labeh</p>
<P><labehi nput submit: <input type,,"submit" / ></l abeh</ p>
<P><labehinput botao: <input type=" button" / ></labeh</p>
<P><l abel >elemento button: <button> Botão</ button></ label></ P>
</form>
.i) [arquivo-2.2.8j.html)
Nesse exemplo, uti lizaram-se um botão para disparar o evento e o seletor :fil e
para acessar o elemento input d o tipo fil e no formulário ao qual será anexado o
comportamento d efinid o no scripr (adicionar uma borda na cor vermelha).
Neste script, passou-se a estilização da borda para o elemento-pai parentO do

input tipo fil e porque alguns navegadores, como Firefox 3, não suportam bordas
em inputs do tipo file.
:hidden
Acessa os elementos input do tipo hi dden em um formulá rio.
Veja [C2 52.2.5 ] - Seleto res d e visibilidade.
Para limitar o acesso de qualquer um dos seletores de formulário estudados

anteriormente a um determinado formulârio em uma página, use um seletor mais
especifico. Por exemplo: form#um input: text limita o acesso ao campos de
texto do formulário com i d="um·.

2.2.9 Filtros para formulários
:enabled
Acessa os elemenros que estejam habilitados em um formu lário.
Em HTML, todos os elementos de um formulário estão habilitados por padrão.

Você pode desabilitar elementos com o uso do atributo di sab l ed.
:disabled
Acessa os elementos que estão desabilirados em um formulário.
Exemplo:
<script type="text/javasc ri pt" src=" .. / jquery-1.2 . 6.js"></ scrípt>

S('button') . click(f unction() {
S(':disabled ' ).css('border' , ' 2px solid #ffOOOO') ;
});
});
</scri pt>
</head>
<bOdY>
<button type="button''>Bordas nos campos di sabl ed</button>
<form action="">
<p><labeh input de texto: <i nput type="text" disabl ed="disabled" /></l abeh</P>
<p><labehinput checkbox: <i nput type="checkbox" /></l abel></ p>
<P><l abehinput checkbox: <i nput type.."checkbox" /></labeh</p>
<P><labehinput checkbox: <input type:"checkbox" checked:"checked" /></l abeh</p>
<p><l abehinput checkbox : <i nput type="checkbox" /></labeh</p>
<p><labeh input radio: <input t ype="radio" /></l abeh</ p>
<p><labehinput radio: <input t ype=" radio" /></l abeh</ P>
<P><l abel>Select: <select>
<opti on>Opção l</option>
<Opti on selected="sel ected">Opção selecionada</opti on>
<option>Opção 3</ opti on>
<option disabled="disabl ed">Opção desabilitada</ option>
<Opt ion>Opção 4</ opti on>
<opt i on>Opção 5</option>
</select></l abel ></p>
<P><labehinput botao: <input t ype="button" disabl ed="disabled" /></l abeh</p>
</form> ...
.iJ [arquivo-2.2.9a.html]
Nesse exemplo, utilizaram-se u m botão para disparar o evento e o seletor :

di sabled para acessar rodos os elementos no fo rmulário aos quais será anexado o
comportamento d efinido no script (adicionar uma borda na cor vermelha).
:checked
Acessa os elementos radio e checkbox em um formu lário para os quais se renha

declarado o atribu to checked.
Exemplo:
<scri pt type"'"text/javasc ri pt" src=" .. / j query-1. 2. 6. j s"></scri pt>

<script ty pe="text/javascript ..>
S('button') . click(functi on()
S(':checked').parent().css( ' border', '2px solid #ffOOOO');
}) ;
});
</scri pt>
</head>
<body>
<button type=" button">Bordas nos campos checked</button>
<form action="">
<P><labehinput de texto: <i nput t ype=" text" disabled="disabled" /></labeh</p>
<p><labehinput checkbox: <i nput type="checkbox" /></l abeh</ p>
<P><l abeh input checkbox: <i nput type="checkbox" / ></ labeh</ P>
<P><1abe h i nput checkbox: <input type="checkbox" checked=" checked" /></l abeh</P>
<p><labehinput checkbox: <input type="checkbox" /></l abeh</ p>
<p><labe hinput radi o: <input t ype=" radio" /></1 abeh</p>
<P><labehinput radi o: <input type="radio" checked"'"checked" /></labeh </p>
</form>
.i) [arquivo-2.2.9b.html]
N esse exemplo, utiliza ram-se um botão para disparar o evento e o seletor:

checked para acessar todos os elementos no formulário que renham o atributo
checked aos quais será anexado o comportamento definido no script (adicionar
uma borda na cor vermelha).
Neste script, passou-se a estilização da borda para o elemento-pai parent ()

dos elementos com atributo checked porque alguns navegadores, como Firefox
3, não suportam bordas em elementos com atributo checked.

:selected
Acessa os valores que renham sido selecionados em controles de um formulário.
Exemplo:
<style type="text/ css" media,,"all ">

b{col or: #c30;}
</style>
<scri pt type=''text/ javasc ri pt" src=" .. / j query-1. 2. 6. js"></scri pt>
<script type.."text/ javascript">
S('select' ) . change(function() {
S('span' ).empty();
S('option:selected').each(funct ion() {
S('span').append('Você selecionou: <b>' + S(this).text() + '</b><br /> ');
}) ;
}) ;
}) ;
</script>
</head>
<body>
<form action .."" method="">
<p><label>Sel ecione um estado:<br /><select multipl e="multiple">
<Option>Amazonas</option>
<option>Acre</option>
<option>Cea rá</option>
<Opti on>Espirito Santo</ opt ion>
<option>Goiás</option>
</sel ect></ label></ p>
</form>
<span></ span>
~ [arquivo-2.2.9c.html)
Para usar um dos metacaracteres empregado na sintaxe dos seletores do tipo

( : [ ] ) em uma string como parte de um nome, escape o caractere com duas
\\(barras invertidas). Por exemplo: para acessar um elemento com o seletor de
atributo name, se o valor de name é xp] to, ao definir o seletor, use S(' [name =
"xp\\[to"] ')em lugardeS(' [name = "xp[to"] '). Melhor ainda: evite usar
esses metacaracteres em sua marcação.

100
at a
CAPÍTULO 3
Métodos de
manipulação do DOM
Neste capítulo, serão estudadas as funcionalidades disponíveis em jQuery para

inspecionar e definir atributos e seus respecàvos valores aos elementos compo-
nentes de uma página.
3.1 Manipulação de atributos gerais

seletorjQuery.attr(nome_ atributo )
Acessa o valor do atributo definido no parâme tro nome_atributo para o primeiro
elemento encontrado pelo se1etorjQuery. Caso não exista o atributo na marcação,
o valor retornado será undefined (indefinido).
Exemplo:
<Style type=" text/ css" media="all ">

#resultado {display:none; width:300px; padding:8px 12px; border: lpx solid #000;
background:#ffO;}
</styl e>
<script type="text/ javascript" src=" . ./jquery-1.2 .6.js"></ script>
1. S(document) . ready(function() {
2. S('button' ) .click(function() {
3. var valorAtributo = S('hl ' ).attr( ' ti tle ');
4. S('#resul tado') .css( 'display', 'block')
.text('O valor do atributo title é: ' + valorAtributo);
5. }) ;
6. }) ;
101
Vale a pena ter este livro como fonte de consulta
</scri pt>
</head>
<body>
<button type="button">Atributo</ button>
<hl title="l ogotipo">Cabeçal ho nivel 1 com atri buto title="logotipo"</ hl>
<P id•"um">Primei ro parágrafo com atributo i d,."um"</P>
<P cl ass="diferente">segundo parágrafo com atri buto class .. "diferente"</P>
<P cl ass="diferente">segundo parágrafo com atributo class="diferente"</P>
<div i d="resultado"></ div>
.iJ [arquivo-3.1a.html]
Nesse exemplo, utiliwu-se um botão para disparar o evento. Acompanhe a se-
guir o fu ncionamento de cada linha do código desenvolvido para esce exemplo.
Código comencado:
Linha(s) Descrição
Linhas 1e6 Conrainer obrigatório para todo script jQuery. Veja [Cl Sll.6.2].
Lin ha 2 Define uma fu nção a ser execurada quando o usuário clica o borão
exisrente na página.
Linha 3 Pega o valor do atriburo t itle do primeiro elemenro hl que aparece
na marcação e armazena na variável val orAtributo.
Linha 4 Seleciona o div#resultado que foi inicialmente escondida com a re-
gra CSS #resultado {display: none; } e a torna visível com o método
jQuerycss('display', 'block ' ). Em seguida, usando o método jQuery
text('O valor do atri buto t i t le é: ' + valorAtributo),escrevedentro
do div#resul t ado a frase apresentando o valor do atributo ace.<;sado,
que havia sido armazenado em valorAtri buto.
Veja o funci onamento desse script clicando o bocão "Atributo" no arquivo

indicado, disponível no site do livro.
seletorjQuery.attr({atributo:valor})
Acessa o elemento definido em se1etorjQuery e insere o par atributo = "va1or" no

elemento. Você pode inserir quantos pares quiser. No exemplo a seguir, inseri-
ra m-se dois pares.
Exemplo:
<Style type="text/css" media="all ">

i mg {display:none;}
</Styl e>

Capítulo 3 • Métodos de manipulação do DOM 103
<script type="text/javascript" src=" .. / jquery-1.2 . 6.js"></ script>

<scri pt type=-"text/javasc ri pt">
2. S('button ' ) .cli ck(function() {
3. S('img') .css('di splay', 'block'). att r ({
4. src: "111au jor . jpg",
S. alt :"Foto do Maujor"
6. });
7. }) ;
8. }) ;
</script>
</head>
<bOdY>
<img />
.iJ [arquivo-3.1b.html]
Nesse exemplo, utilizou-se um botão para disparar o evento. Acompanhe a seguir
o funcionamento de cada linha do código desenvo lvido para esse exemplo.
Note que se inseriu um elemen to img vazio no documento e escondeu-se co m

a declaração CSS img {displ ay:none;}.
Código comentado:
Linhas 1 e 7 Conraincr obrigatório para todo script jQuer)i Veja [Cl $1.1.6.2].
Linha 2 Define uma fu nção a ser executada quando o usuário clica o botão
existente na página.
Linha 3 Seleciona o(s) elemento(s) img existente(s) na página (no exemplo, há
um elemento) e revela-o com uma declaração CSS. A seguir, insere
no elemento os atributos src que definem o cam inho para uma
imagem e o atriburo al t que descreve su mariamente a imagem.
Veja o funci onamento desse script clicando o botão ·~rributo" no arquivo

seletorjQuery.attr(atributo, valor)
Acessa o elemento definido em se1etorjQuery e insere o par atributo = "valor" no

elemento. Ao concrá rio do método ancerior, este mécodo permite inseri r somente
um par arribuco/ valor.
Exemplo:

<style type.."text/ css" media.."all">

img {display:none;}
</styl e>
<script type,."text/javasc ri pt">
$('img') .css('display', 'block') .attr('src', 'maujor .jpg');
});
});
</script>
</head>
<body>
<img />
.iJ [arquivo-3.1c.html]
N esse exemplo, utilizou-se um barão pa ra disparar o evento. O func iom1menro
deste script é idêntico ao anterior, mas aqui não se inseriu o atributo alt.
Veja o funcionam ento d esse script clicando o botão ''.Atributo" no arquivo

indicado, disponível no site d o livro.
seletorjQuery. removeAttr(atributo)
Acessa o elemento definido em se1etorj Query e remove o atributo definido no pa-

râmetro atributo.
Exemplo:
<style type="text/css" media="all">

div {width:300px; height:175px; border:lpx sol id #000;}
#remover {background:#OfO; }
</Style>
<script type="text/ javascript" src=" . . / jquery-1.2 .6. j s"></script>
S(' #remover'). re1110veAttr( 'id');
}) ;
}) ;
</script>
</head>

<hody>
<button type="button">Remover</button>
<div id="remover"></div>
.i:J [arquivo-3.1d.html]
Nesse exemplo, utilizo u-se um botão para disparar o evento. Observe que um
di v com id = "remover" é estilizado com CSS. A cor d e fundo verde (#OfO) foi d ecla-
rada em uma regra CSS para o div. Se remover o id do div, a regra CSS perderá o
efeito. O script faz exara mente isso, remove o ide o div perde o fundo verde.
Veja o funcio namento desse script clicando o botão "Remover" no arquivo
3.2 Manipulação do atributo ciass

seletorjOuery.addClass(valor_ classe)
Acessa o elemen m definido em seletorjQuery e atribui-lhe uma classe de nome
igua l a va1or_c1asse.
Segundo as especificações para a HTML, o atributo e1ass aceita um ou mais

valores. No caso de mais de um valor, os nomes devem ser separados por
espaço. Exemplo de parágrafo com três classes diferentes: <P class = "um
sete outra">.
Exemplo:
<Style type="text/css" medi a="all ">

p.minha._classe {color:#fOO; font-size:4Spx;}
</style>
S('button ' ) .click(f unction()
S('p'). addClass('minha._classe') ;
}) ;
});
</script>
</head>
<body>
<button type="button''>Adi ci onar</button>
<p>Parágrafo ao qual foi adicionada uma cl asse com jQuery. </P>
.i:J [arquivo-3.2a.html]

Nesse exemplo, utilizou-se um botão para disparar o evento. Observe que

um parágrafo p, sem aa-ibucos, não foi esti lizado. Uma regra CSS para parágrafos
com a classe minha_classe define cor de texco verm elha e tamanho de fonte 45px.
Com o uso de jQuery, insere-se a classe minha_classe no parágrafo e este assume a
esti lização consta nre da regra CSS.
Veja o funcionamento desse script clicando o botão '~d i cionar " no arquivo
seletorjOuery.hasClass(valor_ classe)
Acessa o elemento definido em se1etorjQuery e verifica se a classe de va lor igua l

a va1or_c1asse existe para ca l elemento no d ocumento. Retoma o valor booleano
TRU E ou FALSE.
seletorjOuery. removeClass( valor_ classe)
Acessa o elemento d efinido em se1etorjQuery e remove a classe cujo valor fo i defi-

nido no parâmetro va1or_c1asse.
Exemplo:
<Style type="text/ css" media="all">

p. remover {background:#ffO; border:lpx solid #000;}
</Style>
S('p'). re110veClass ('remover ' );
}) ;
});
</script>
</head>
<bOdY>
<button type="button">Remover</button>
<p class="remover">Parágrafo com a classe="remover" defi nida na marcação.</p>


um parágrafo p com class = "remover" é esti lizado com CSS, que lhe adiciona uma
cor de fundo amarela e uma borda na cor preca. Se remover essa classe, a regra
CSS perderá o efeito. O script faz exacamente isso, remove o atribuco classe do
parágrafo e esre perde o fun do amarelo e a borda definida pela CSS.
Veja o funcionamento desse script clicando o botão "Remover" no arquivo

seletorjOuery.tog gleClass(valor_ classe)
Acessa o elemento definido em se7etorjQuery e remove a classe cujo nome foi de-
finido no parâmetro valor_classe se este estiver presente ou adiciona o valor caso
não esteja presente.
Exemplo:
<style type="text/css" medi a="al l">

p.remover {background:#ffO; border :l px solid #000;}
</style>
<script type="text/javascript" src=" .. / jquery-1.2 .6. js"></script>
S('button') .cl ick(function()
$('p'). toggl eClass('remover' );
}) ;
});
</scri pt>
</head>
<bOdY>
<button type=" button">Mudar</button>
<p class="remover">Parágrafo com a classe="remover" definida na marcação.</p>
.i) [arquivo-3.2c.html]
Nesse exemplo, utilizou-se um botão para disparar o evento. Aqui cada vez
que você clica o botão, a classe do elemento pé alterada e o script entra em ação.
lote que com a classe, o parágrafo recebe uma estilização definida nas regras
de esti lo.
Veja o fun cionamento desse script clicando segu idamente o botão "Mudar"
no arquivo indicado, dispo nível no sire do livro.

3.3 Manipulação de conteúdos html

seletorjQuery.html()
Acessa o conteúdo html (conteúdo e marcação) dentro do elemento definido em

se 1etorjQuery.
Exemplo:
<style type="text/ css" media="all ">

span {display:none ; background:#ffO; padding:8px 12px; border:lpx solid #000;}
</Styl e>
<scri pt type="text/j avas e ri pt">
S('button' ) .cl ick(function() {
var conteudoHtml = S(' p'). html ();
$('span').css(' di splay', 'block ' ).text (conteudoHtml ) ;
}) ;
});
</scri pt>
</head>
<body>
<button type="button">HTML</ button>
<P>Esse é o l <SUP>O.</sup> parágrafo para <em>demonstrar</em> o método
<strong>jQuery</strong><code>html()</code>.</P>
<p>Outro parágrafo.</P>
<Span></span>
Nesse exemplo, utilizou-se um botão para disparar o evento. Observe que se
usou o método jQuery html O para selecionar a marcação HTML do primeiro
parágrafo p que aparece na marcação. O resultado foi armazenado na variável
conteudoHtml e a seguir se escreveu o resultado em um elemento span que havia
sido oculto por regras CSS.
Veja o fun cionamento desse script clicando o botão "HTML" no arquivo

Note que o elemenro span é vazio. Tivemos q ue ocu ltá-lo com regra CSS por-
que ele foi estilizado com uma borda e um fundo, fazendo com que estas fossem
renderizadas, mesmo estando o elemento vazio.

se/etorjQuery.htm 1(valor)
Acessa o elemento definido em se1etorjQuery e nele insere o html (conteúdo e mar-
cação) definido no parâmetro valor.
Exemplo:

p. um {color:#fOO; font:24px sans-serif;}
</style>
S('button' ) .click(f unction()
S( 'di v' ) .htlll( '<p class="u11">Conteúdo inserido CORI <COde>html(<i>valor</i>)
</code></p>');
}) ;
});
</script>
</head>
<body>
<button type=" button">HTML</button>
<div></div>
iJ [arquivo-3.3b.html)
usou o método jQuery htrnl (valor) para inserir um parágrafo p dentro de um div.
O parágrafo recebeu uma classe que havia sido estilizada por regras CSS.
Veja o funcionamento desse script clicando o botão "HTML'' no arquivo

ind icado, disponível no site do livro.
3.4 Manipulação de textos
seletorjQuery.text()
Acessa o conteúdo textual do elemento definido em seletorjQuery.
Exemplo:
<style type="text/css" media:o"al l ">

span {display:none; background :#ffO; padding:8px 12px ; border:lpx sol id #000 ;}
</style>

11 0 jQuery • A Biblioteca do Programador JavaScript
<script type="text/javasc ript" src=" .. / jquery-1.2 .6.js"></script>

<scri pt type="text/javasc ri pt">
var conteudoTextual = S('p').text() ;
$('span' ).css('display ' , 'block ' ). text(conteudoTextual);
}) ;
});
</se ri pt>
</head>
<bOdY>
<button type="button">HTML</ button>
<p>Esse é o l<sup>o .</sup> parágrafo para <em>demonstrar</em> o método
<Strong>jQuery</strong><code>text() </code>.</p>
<span></span>
se usou o método jQuery t extO para inspecionar o conteúdo html do primeiro
parágrafo p que aparece na marcação. O resultado foi armazenado na variável
conteudoTextual e a seguir se escreveu o resultado em um elemento span que havia
sido ocu lco por regras CSS.
Veja o funcionamento desse script clica ndo o botão "Texto" no arqu ivo indi-
cado, disponível no site do livro.
se/etorjQuery.text(valor)
Acessa o elemento definido em seletorjQuery e nele insere o conteúdo definido no
parâmetro valor.
Exemplo:
<Style type=" text/ css" media="all ">

div {color:#fOO; font:24p x sans-serif; }
</styl e>
S('button' ) .cl ick(function()
$(' di v' ) . text(' <P cl ass="u11">Conteúdo i nserido com <code>text(<i>va1</i>)
</code></p>');
}) ;
});

</script>
</head>
<body>
<button type="button">Texto</button>
<diV></di V>
..ij [arquivo-3.4b.html]
Nesse exemplo, utiliza-se um botão para disparar o evento. Observe que se

usou o método j Query text(valor) para inseri r um parágrafo p dentro de um div .
O parágrafo recebeu uma classe, um texto marcado com o elemento code e o utro
com o elemento i , mas tudo foi ignorado e inserido como sn-ing, pois o mécodo
jQuery destina-se a inserir texco puro e não insere marcação. Para inserir marca-
ção, use html (valor) como visto anteriormente.
Veja o funcionamento desse script clicando o botão "Texto" no arq uivo indi-
cado, disponível no site do livro.
3.5 Manipulação de valores

seletorjOuery. vai()
Acessa o valor do atribuco value do elemento definido em seletorjQuery.
Exemplo:
S('button' ) .click (function()
var valorValue = S('input' ) .val();
S( 'span').text(valorValue);
}) ;
});
</scri pt>
</head>
<body>
<button type="button">Va l or</button><br />
<i nput type="text" val ue="Entre U'll texto qual quer" /><br />
<span> </span>
..ij [arquivo-3.Sa.html]

No exemp lo, utilizou-se um botão para d isparar o evento. Observe que se

usou o método jQuery val() para inspecio nar o valor do au-ibuco value do cam-
po de te,'<to. Defin iu-se na marcação HTML um valor inicial para o atributo. Se
o usuá rio entrar com um va lor diference do inicial, o scripc reterá cal valor. O
script a rmazena o valor na variável valorValue e, a segu ir, escreve o resultado em
um ele mento span.
Veja o fun cionamento desse scripc, no arquivo indicado, disponível no site

do livro, inicialmente clicando o botão "Valor" existente na página. A seguir,
preencha qualquer texto no campo e cl ique o botão "Valor" novamente.
se/etorjQuery.vai(valor_atributo_ value)
insere, no elemento definido em seletorjQuery, o atributo value com o valor definido

pelo parâmetro va1or_atributo_va1ue.
Exemplo:

S( ' button') .click(function() {
S( 'input') .val ('Valor inserido com jQuery' );
}) ;
});
</script>
</head>
<bOdY>
<button type="button">Val or</button> <br />

<input type="text" size="30" / >
~ [arquivo-3.Sb.html]
Nesse exemplo, utilizou-se um botão para di sparar o evento. Observe que se

usou o método jQuery val (valor) para inseri r o rexco definido em valor no ca mpo
input.
Veja o funcionamento desse scripr clicando o botão "Valor" no arquivo in-

dicado, disponível no site do l.ivro.

3.6 Manipulação de conteúdos

seletorjQuery.append(conteúdo)
Insere o conteúdo definido no parâmecro conteúdo logo após o conteúdo d o ele-

menco definido em se1etorjQuery. O parâmecro conteúdo pode ser canco marcação
HTML como texto puro.
Exemplo:
<script type.."text/ javascript">

$('button') .click(f unction()
S('p'). append(' <Strong>Aqui texto i nserido com jQuery</strong>') ;
}) ;
});
</script>
</head>
<body>
<button type=" button">Inserir t exto</ button><br />

<p>Texto dentro do elemento parágrafo.</ P>
Nesse exemplo, utilizou-se um botão para dispara r o evento. Observe que se

usou o método jQuery append(conteúdo) para inserir marcação html e texto definidos
no parâmetro conteúdo, logo após o conteúdo existente no elemento parágrafo.
Veja o funcionamento desse script clicando o botão "Inserir com append()"

no arquivo indicado, d isponível no site do livro.
O parâmecro conteúdo desse método pode ser marcação já existente na árvore

do documento e, neste caso, duas situações são possíveis:
• Primeira situação: a inserção ocorrerá em um só alvo, ou seja, apenas um

elemenco receberá o conteúdo a ser inserido. O exemplo a seguir mostra
tal situação, na q ual um link já existente na marcação será inserido dentro
de um parágrafo.


S('p'). append(S(' a' ));

}) ;
});
</script>
</head>
<body>
<button type="button">Inseri r texto</button><br /><br />
<a href="#">Aqui um link</p>
<P>Texto dentro do elemento parágrafo . </P>
Como você poderá constatar no arquivo indicado, o script retira o link
de sua posição no documento e insere-o após o conteúdo existente no
parágrafo, ou seja, o conteúdo a inserir foi movido de sua posição para a
posição definida em append().
• Segunda situação: a inserção ocorrerá e m mais de um alvo, ou seja, dois ou

mais elementos receberão o conteúdo a ser inserido. O exemplo a seguir
mostra cal situação, na qual um link já existente na marcação será inserido
dentro de três parágrafos.
<script type="text/javascr"pt">
'S('button').click(function() {
'S'('p') .append(S( 'a ')) ;
}) ;
});
</script>
</head>
<body>
<button type="button">Inseri r texto</button><br /><br />
<a href="#">Aqui um link</p>
<p>Texto dentro do elemento parágrafo. </p>
<P>Texto dentro do elemento parágrafo. </p>
<p>Texto dentro do elemento parágrafo. </P>
Como você poderá constatar no arquivo indicado, o script faz cópias do link
e insere-as após o conceúdo de cada um dos três parágrafos, ou seja, o conteú-
do a inserir permanece em sua posição inicial, sendo copiado para as posições
definidas em append().

Mover ecopiar
Como se mostrou nos dois arquivos anteriores, o método jQuery append O, quando
roma como parâmetro marcação previamente existente no documento, compona-
se de maneiras distintas. Se o alvo de append() é único no documento, a marcação
tomada como parâmetro é movida de seu lugar no documento para a posição
onde será inserida. Se o alvo de append() é múltiplo, são feiras cópias da marcação
para as inserções e a marcação orig inal permanece em seu lugar.
seletorjQuery.appendTo(alvo)
Insere o conteúdo defin ido no se1etorjQuery logo após o conteúdo do elemento

definido no parâmetro a1vo. Este método cumpre as mesmas finalidades do mé-
todo append() estudado no icem anterior, usando uma sintaxe variante à sintaxe
desse método.
Exemplo:

S('button') . click(funct ion() {
S('<strong>Aqui texto inserido com j Query</strong> ' ).appendTo('p' );
} );
});
</scri pt>
</head>
<body>
<button type= "button">Inseri r com appendTo() </ button><br />
<P>Texto dentro do elemento parágrafo. </ P>
.i) [arquivo-3.6d.html]
Tal como estudado para o método appendO, este método também admite inserção
de conteúdos já existentes na árvore do documento e as duas situações estudadas
para aquele método são válidas para este, ou seja, havendo um alvo, o elemento
é movido; havendo dois ou mais alvos, o conteúdo movido é cópia do original.

se/etorjQuery.prepend(conteúdo)
se/etorjQuery. prependTo(a/vo)
Estes dois métodos são eq uivalentes aos métodos appendO e appendTo(), com a
diferença de que a inserção do conteúdo se faz antes do conteúdo que receberá
a inserção.
seletorjQuery.after(conteúdo)
seletorjQuery.insertAfter(alvo)
Estes dois mérodos são equivalentes aos métodos appendO e appendTo(), com a
diferença de que a inserção do conteúdo se faz antes do elemento (e não do
conteúdo do elemento) que receberá a inserção. Veja o mesmo exemplo mos-
trado para append() - arquivo-3.Ga.html) - alterando o mérodo para after(), com a
fina lidade de caracterizar a diferença. Compare o arquivo desse exemplo com
o arquivo-3.Ga .html .
Exemplo:
<scri pt type.."text/j avas e ri pt">

S(' p') .after(' <Strong>Aqui texto inserido com jQuery</strong> ' );
}) ;
});
</script>
</head>
<body>
<button type="button">Inseri r com after()</button><br />
<p>Texto dentro do elemento parágrafo.</ p>
..iJ [arquivo-3.6e.htm11
Conforme se pode constatar nos dois arquivos (arquivo-3. 6a.html e arquivo-3. 6e.
html), o método append() coloca a marcação do elemento span em linha com a do
parágrafo, ficando claro que foi inserida dentro do parágrafo, e o método afterO
causa renderização da marcação span embaixo, indicando que foi inserida fora
do parágrafo.
Para esses dois métodos, são válidos os critérios de mover e copiar, como
descritos para os métodos append() e appendTo().

se/etorjQuery.before(conteúdo)
se/etorjQuery.insertBefore(alvo)
Estes dois mécodos são equ ivalentes aos métodos anteriores, com a diferença d e
que o conteúdo é inserid o antes do alvo.
Para esses dois mérodos, são vá lidos os critérios de mover e copiar, como
descricos para os métodos append() e appendTo().
seletorjQuery.wra p(htmn
Cria o container definido no parâmetro htm1 para cada um dos elem entos d efi-
nidos em se1etorjQuery.
Exemplo:
.container {border:lpx solid #000; background: #ffc; margin:20px O;}

</styl e>
<script type: "text/ javasc ript">
S(' p'). wrap(' <div cl ass="container"> </div>') ;
}) ;
} );
</scri pt>
</head>
<body>
<button type="button">Definir container</ button><br / >
Nesse exemplo, util izou-se um botão para disparar o evento. Observe que a
marcação passada pelo parâmetro do método é um div com class = "container"
que será inserida na marcação como um conrainer para cada um dos parágrafos.
Para faci li tar a visualização d o funcionamento do script, definiu-se uma regra
CSS para a classe .container. Veja o funcionamento desse script clicando o botão
"Definir container" no arqu ivo indicado, disponível no site do livro.

se/etorjQuery.wrap(elemento)
O parâmetro elemento é um concainer para os elementos definidos em se1etorjQuery,
mas em vez de ser escrito no método, é escrito com JavaScript.
O container definido deve ser um elemento vazio, isto é, não pode haver conteúdos
denlro dele.
Exemplo:
div {border:lpx solid #000; background :#ffc; margin:20px O;}

</Styl e>
<scrí pt type="text/javasc ri pt">
S(document).ready(functíon() {
$('p'). wrap(document .createElement( ' div')) ;
}) ;
}) ;
</se ri pt>
</head>
<body>
<button type=" button">Definir container</button><br />
<P>Texto dentro do elemento parágrafo.</ P>
.i) [arquivo-3.6g.html]
N esse exemplo, utilizou-se um botão para disparar o evento. Observe que o

container é um dív criado com o método document. createElement(' di v'). Para facili-
tar a visualização do funcionamento do script, definiu-se uma regra CSS para o
div. Veja o funcionamento desse script clicando o botão "Definir concainer" no
arquivo indicado, disponível no site do livro.
seletorjQuery.wrapAll(hrmn
Cria o container definido no parâmetro htm1, para todos os elementos d efinidos
em se1etorjQuery. A diferença para wrap(html) é que naquele método o container é
para cada um dos elementos e neste, para todos.

Exemplo:
.container {border:lpx solid #000; background:#ffc; margin:20px O;}

</Styl e>
$(' p'). wrapAl l (' <div class="container"></diV> ') ;
}) ;
});
</scri pt>
</head>
<body>
<button type="button">Defini r contai ner</button><br / >
<P>Texto dentro do elemento parágrafo.</P>
<P>Texto dentro do elemento parágrafo. </p>
<p>Texto dentro do elemento parágrafo.</ p>
~ [arquivo-3.6h.html]
Nesse e,-xemplo, util izou-se um botão para disparar o evento. Observe que a
marcação passada pelo parâmetro do método é um div com class = "container"
que será inserido na marcação como um concainer para rodos os parágrafos.
Para facilitar a visualização do funcionamento do script, definiu-se uma regra
CSS para a classe .container. Veja o funcionamento desse scripc clicando o botão
"Defi nir concainer" no arqu ivo indicado, disponível no site do livro.
O uso desse mérodo causa uma alteração substancial na árvore do documento.

Io exemplo mostrado, os crês parágrafos estão em sequência. Considere um
exemplo mais complexo com vários parágrafos em uma página, intercalados por
outros elementos. Esse método cria o container e "puxa" todos os parágrafos para
uma posição imediatamente após o primeiro parágrafo encontrado pelo seletor,
colocando todos no container. Daí é fácil concluir a alteração no DOM.
seletorjQuery.wrapAll(elemento)
Este método é semelhante ao método wrap(e ]emen t o), com a diferença de que o
container é para rodos os elementos-alvo.

seletorjQuery.wraplnner(hrmn
Cria o container definido no parâmetro htm1 para os conreúdos (não para os

elementos) de cada um dos elementos definidos em se1etorjQuery.
seletorjQuery. wrapl nner(elemento)
Apresenta o mesmo efeito do anrerior, mas neste método o container é criado

com JavaScript.
seletorjQuery.remove(filtro)
Este método remove rodas as ocorrências do elemento definido em se1etorjQuery.

O parâmetro fi l tro é opcional e pod e ser usado para filtrar ocorrências específicas
da remoção.
Exemplo:
</styl e>
$('p') .re110ve( ' .remover ');
}) ;
});
</scri pt>
</head>
<bOdY>
<button type="button">Remover</button><br />
<P class="remover">Texto dentro do elemento parágrafo com classe remover.</P>
.iJ [arquivo-3.6i.html)
Nesse exemplo, utili zou-se um botão para disparar o evento. Observe que
o mérodo remove todos os parágrafos do documento cujo atributo classe tem
o valor remove r. O mérodo remove o elemento do DONL Veja o funcionamenro
desse script clicando o botão "Remover" no arquivo indicado, d ispo nível no s ite
do livro.

se/etorjQuery.empty()
Esre método remove rodos os conteúdos do elemento definido em se1etorjQuery.

Funciona como o mérodo anterior, removendo comeúdos, sem remover o elemento.
As tags de abertura e fechamento do elemento, permanecem no DOtvL
Exemplo de sintaxe:
$(' p' ). empty();
seletorjQuery. replaceWith(conteúdo)
Substitui o elemento definido no se1etorjQuery por aquele definido no parâmetro

conteúdo. Este parâmetro pode ser marcação HTML (como mostrado no exemplo)
ou elemento e seus conteúdos criados com JavaScript.
Exemplo:
<Script type="text/ javasc ript">

$(' p') . rep l aceWi th (' <hl>cabeça lho substitui parágrafo</hl>') ;
});
}) ;
</script>
</head>
<body>
<button type=" button">Substituir</button><br />
.iJ [arquivo-3.6j.html]
Veja o f unciona1nenro desse script clicando o botão "Substituir" no arquivo
conteúdo.replaceAll(seletorjQuery)
Este método cumpre a mesma fina lidade do anterior com uma sintaxe reversa,
ou seja, substitui o seletor defin ido cm seletorjQuery pelo parâmetro conteúdo, que
pode ser marcação HTML ou elemento e conteúdos criados com JavaScript.

O exemplo a seguir faz o mesmo efeito daquele mostrado no exemp lo do

arquivo anterio r (arqui vo-3.6j .html).
$( '<hl>Cabeçalho substitui parágrafo</hl> ' ). replaceAl l ('p');
seletorjQuery.clone()
Cria uma cópia do seletorjQuery.
Exemplo:

div {border :lpx solid #000; background:#ffc ;}
</styl e>
<scri pt type="text/ javasc ri pt" src=" .. /j query-1. 2. 6. js"></sc ri pt>
S( 'p').cl one() .appendTo( ' div') ;
}) ;
});
</scri pt>
</head>
<body>
<button type="button">Clonar</button><br />
<p>Parágrafo a clonar.</p>
<div>div para receber o clone</div> ...
.iJ [arquivo-3.6k.html)
Veja o funcionamento desse script clicando o botão "Clone" no arquivo
seletorjQuery.clone(true)
Idêmico ao anterior, cria uma cópia do seletorjQuery e de rodos os scripts a ele

anexados.

CAPÍTULO 4
CSS e inspeção do DOM
Neste capítulo, serão estudadas as funcionalidades disponíveis em jQuery para

definir estilização aos elementos componentes da árvore do docu mento. Também
se abordarão os métodos para acessar e selecionar componentes do DOM.
li'• Nos títulos de cada item usamos o termo seletorjQuery, genericamente, para
indicar um seletor, um método de seleção ou a seleção resultante de um
encadeamento.
4.1 Estilização geral

seletorjQuery.css(propriedade)
Acessa o valor definido para a propriedade CSS do elemento se JerorjQuery. A pro-
priedade a acessar deve ser declarada no parâmetro propriedade.
Exemplo:

div {width:lOOpx; height:lOOpx; margin:20px O; border:lpx solid llOOO; background:#ffc;}
</styl e>
<Scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. j s"></scri pt>
var corFundo = S('div').css('backgroundCol or ' ); // ver dica após o script
S('span ' ).text('A cor de fundo do di v é: ' + corFundo);
}) ;
}) ;
</scri pt>
123
'vlaterral corn 1111<> os autorais
</ head>
<body>
<button type="button">CSS</button><br />
<div>DIV estilizado com CSS</diV>
<span></span>
.ij [arquivo-4.1a.html]
Propriedades CSS com nomes compostos de duas palavras cuja sintaxe CSS
adota separação com hífen, tais como background-col ore li ne-hei ght, devem
ser escritas em sintaxe jQuery com a notação conhecida como ·camelCase•, ou
seja, backgroundColor e li neHei ght seguindo a sintaxe fonnal JavaScript.
Nesse exemplo, utili zou-se um botão para di spa rar o evenro. Observe que se
acessou o va lor da propriedade CSS background-col or para o div e armazenou-se
esse valor em uma variável denominada corFundo. A seguir, escreveu-se o resultado
em um elemento span existenre na marcação. Veja o funcionamento desse script
clicando o botão "CSS" no arquivo indicado, disponível no site do livro.
seletorjQuery.css('propriedade: 'valor')
Estiliza o elemento seletorjQuery com a declaração CSS definida nos parâmetros

propriedade, valor. Propriedade é a propriedade CSS a estilizar e valor, seu valor ou
característica.
Exemplo:
<script type="text/javascript" src=" . ./jquery-1. 2 . 6.js"></script>

S('div') .css('border ', ' lpx sol i d red ') ;
}) ;
});
</script>
</ head>
<body>
<button type"" button''> Es t i1 i za r</ but ton> <b r />

<div>DIV estilizado com regra CSS declarada por jQuery</div>
~ [arquivo-4.1b.html]

Capitulo 4 • C55 e inspeção do DOM 125
Veja o funcionamento desse script clicando o botão "Estilizar" no arquivo

seletorjQuery.css({propriedade:'valor', propriedade:'valor', •••})
Esti liza o elem ento se1etorjQuery com as declarações CSS definidas no parâmetro
propriedade: valor. A diferença para a anterior é que com esre mécodo se pode defin ir
duas ou mais declarações CSS.
Exemplo:
<script type.."text/ javasc ript" src=!' . ./ jquery-1.2 .6. js"></script>
S( ' button') .click(function()
S('div' ) .css({
width : '400px' ,
lineHeight:'60px' , li camelCase para lineHeight
background:'lffO',
border:'lpx dotted #000
});
}) ;
});
</script>
<lhead>
<bOdy>
<button type="button">Estilizar</ button><br />
<div>DIV esti lizado com regra CSS declarada por jQuery</diV>
~ [arquivo-4.1 c.html]
Veja o funcionamento desse script clicando o botão "Estilizar" no arquivo

4.2 Posicionamento
seletorjQuery.offset()
Acessa o valor das coordenadas CSS top e left do elemento seletorjQuery e m relação
à viewport.
Exemplo:


div {width:lOOpx; height:lOOpx; background:#OfO; margin:50px O O lOOpx;}
</styl e>
var coordenadasDiv = $( ' div').offset();
S('span' ).html('As coordenadas do div são:<br /> left: ' +
coordenadasOiv.left + ' px<br />top : ' + coordenadasDiv.top +' px');
}) ;
});
</script>
</head>
<bOdY>
<button type="button">Coordenadas</button><br />
<div>DIV para determi nar as coordenadas</div>
<span></span>
.iJ [arquivo·4.2a.html]
acessaram os valores das coordenadas, os quais se armazenaram em uma variável
denominada coordenadasOiv. A segui r, escreveu-se o resu ltado em um elemento span
exiscence na marcação.
Veja o funcionamento desse scripc clicando o botão "Coordenadas" no arquivo

indicado, disponível no sice do livro.
seletorjQuery.positionO
Acessa o va lor d as coordenadas CSS top e left do elemento seletorjQueryem relação
ao offset do elemento-pai.
Exemplo:

div {
width:300px;
height:200px;
background:#OfO;
margin:SOpx O O lOOpx ;
}

p {background:red;}
</Style>
<Scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. js"></sc ri pt>
var coordenadasPara = $('p:eq(2)'). position() ;
S('span' ).html('As coordenadas do 3o. parágrafo são:<br /> left: ' +
coordenadasPara.left +' px<br /> top : '+ coordenadasPara .top +' px');
});
}) ;
</script>
</head>
<body>
<button type="button">Coordenadas</button><br />
<div>DIV para determinar as coordenadas</div>
<span></span>
Nesse exemplo, urilizou-se um botão para disparar o evento. Observe que se

acessaram os valores d as coordenadas do rerceiro parágrafo, os quais se arma-
zenaram em uma variável denominada coordenadasPara. A segu ir, escreveu-se o
resultado em um elemento span existente na marcação.
Veja o funcionamento desse script clicando o botão "Coordenadas" no arquivo

Coordenadas de posicionamento de um elemento em relação a seu ancestral

dependem do contexto CSS de posicionamento. Noexemplo desenvolvido, tanto o
elemento-pai como o elemento-filho não foram posicionados com declaração CSS,
assim o contexto de posicionamento para ambos é a viewport e as coordenadas
a ela serão referenciadas.
Note que, ao executar o script do exemplo, a coordenada left para o parágrafo

é igua l à coordenada l eft para o di v e a coordenada top é igual à do div mais um
valor igual à distância do topo do parágrafo ao copo do div.
A melhor maneira de entender o funcionamento desse método é fazer algu-

mas cópias do arquivo de exemplo e nelas alterar o posicionamento do div e do
parágrafo com regras CSS (use regras CSS in-line para si mplificar). Execute o
script em cada situação criada para ver o resultado. Comece declarando posi tion:
relative para o div e posi tion:absolute; top:O; left:O para o parágrafo.

se/etorjQuery.scrollTop()
Acessa o valor da coordenada top que mede a distância em pixel de uma rolagem
vertical.
Exemplo:
<style type=" text/css" media="all ">

div {
width:400px;
height:250px;
border:lpx dotted #000;
margin:20px O;
padding:Spx lOpx;
background:#d6e2e5;
overflow:scroll;
}
p {vri dth: 600px;}
</Style>
<scri pt type="text/ javasc ri pt" src=" . ./j query-1. 2. 6. js"></ scri pt>
<sc ri pt type="text/javasc r i pt">
1. S(document) .ready(function() {
2. S('button:eq(O)').cl ick(function() {
3. var rolagemVertical = $('#rolagem') .scro11Top();
4. var rolagemHorizontal =$('#rolagem') .scro11 Left();
5. S( 'span' ) .html('Posição da rolagem vertical : ' + rolagemVertical +
' px<br />Posição da rolagem horizontal : '+ rolagemHorizontal + ' px');
6. }) ;
7. S(' button: eq(l) ') . cl i ck(function() {
8. S('#rolagem'). scrollTop(O);
9. S( '#rolagem ' ) .scrol l left(O);
10. S('span' ).empty();
11. }) ;
12 }) ;
</ script>
</head>
<body>
<p>Rol e as barras para qualquer posi ção e clique o botão <strong>Coordenadas scroll
</strong></ P>
<button type="button">Coordenadas scrol l </button>
<button type="reset">Reset</button><br />
<div id,,,"rolagem">
<P>Lorem ipsum
.. mui to conteúdo ..
</div>
<Span></span>
</body>
</html

Acompanhe a seguir o funcionamento de cada linha do código desenvolvido

para esse exemplo.
Cód igo comentado:
linha(s) Descrição
Lin has 1 e12 Comainer o b rigarório para todo scripr jQuery. Veja [C l
Sl.1.6.2] .
linha 2 Define u ma função a ser executada quando o usuário clica o
primeiro botão deno minado Coordenadas scroll.
Linha 3 Armazena, na variável rol agemVertical , a coordenada vercical d a
barra de rolagem, usando o mérodo scro1lTop() .
Linha 4 Idem para a coordenad a horizonral.
Linha 5 Escreve dentro do clcmcnro span o resultad o das coordenadas
da posição acuai das barras de rolagem vertica l e horizontal.
Linha 7 Define uma função a ser executad a quando o usuário clica o
segundo botão denominad o Reser.
Linhas 8 e 9 Define para ambas as coordenadas da barra de rolagem o valor
O (zero).
Lin has 10 Rerira da cela o res ultado das coordenadas inserido antcriomence
demro do elemento span.
seletorjQuery.scrollleft()
Funciona de modo idêntico ao método scrollTop escudado anteriormente, reror-
nando a posição da barra de rolagem horizontal. O arquivo-4.2c.htm1 do exemplo
anterior demonstra o funcionamento deste método.
seletorjQuery.scrollTop(valor)
Este método, quando defi nido com o parâmetro valor, permite movimentar a barra
de rolagem vertical para a posição indicada em valor. O parâmetro é um número
inteiro e a unidade de medida de valor é o pixel. O arquivo- 4.2c.html do exemplo
anterior demonstra o funcionamento deste método, quando se execu ta a função
disparada pelo botão "Reset" que define o valo r para scrollTop igual a O (zero).
seletorjQuery.scrollleft(valor)
Esce mécodo, quando definido com o parâmetro va lor, permite movimentar a
barra de rolagem horizontal para a posição indicada em valor. O parâmetro é um
número inteiro e a unidade de medida de valor é o pixel. O arquivo-4.2c.html do
exemplo anterior demonstra o funcionamento deste método, quando se executa
a função disparada pelo botão "Reset" que define o valor para scrol lleft igu al a
O (zero).

4.3 Largura e altura

seletorjQuery. width()
Acessa o valor da largura do elemento se1etorjQuery e retorna o resultado em

unidade pixel mesmo que tal largura tenha sido d efinid a e m regra CSS com
outra unidade. O valor rerornado não inclui as espessuras d e padding nem margin
porventura existentes.
No exemplo a seguir, a largura do elemento parágrafo foi definida em 20em.

Observe, no arquivo que ilustra o exemplo, como o resultado é retornado em
pixel. Sabe-se que por padrão 1em = 16px, logo 20em deverá rerornar 320px.
Experimenre au menear o taman ho d a fonre no navegador e rodar o scripr.
Exemplo:
<styl e type="text/ css" media="a11 ">

div , p {height:SOpx; background:#OfO; padding :O 20px;}
div {width:275px; }
p {vri dth: 20em;}
</styl e>
<scri pt type="text/ javasc ri pt" src=" . ./j query-1. 2. 6. js"></scri pt>
$('button' ) .click(funct ion()
var larguraDiv = $('div ' ).width();
S('div' ) .a~er('A largura do div é de: ' + larguraDiv + ' px');
var larguraPara = S(' p').width();
S('p').after('A largura do parágrafo é de: ' + larguraPara + ' px');
}) ;
} );
</scri pt>
</head>
<body>
<button type=" button">Larguras</button><br />
<di v>DIV para determi nar a largura .</div><br />
<P>Texto de umparágrafo para determinação da largura. </P>
acessaram os valores das larguras do div e d o p, os quais se armazenaram em duas
variáveis denominadas larguraDiv e larguraPara respectivamente. A seguir, escreveu-se

o resultado usando o comado after() [C3 53.6] para inserção de conteúdos. Veja
o funcionamento desse script clicando o botão "Larguras" no arquivo indicado,
disponível no site do livro.
É certo afirmar que o SCtipt desenvolvido neste exemplo, assim como em muitos
dos exemplos puramente demonstrativos dos métodos jQuery, não é a melhor
solução prática. Contudo, cumpre a finalidade do script, ou seja, demonstrar o
funcionamento do método. Na segunda parte do livro, quando se estudarem scripts
de aplicação prática, serão desenvolvidas soluções otímizadas.
seletorjQuery.width(valor)
Define o valor, em pixel, da propriedade CSS v1idth para o elemento seletorjQuery.

Isto é, define uma largura para os elementos-alvo do seletor.
Exemplo:

div, p {height:50px; background:#OfO; padding:O 20px;}
</style>
<scri pt type="text/j avas e ri pt" src=" . ./j query-1. 2. 6. js"></scri pt>
<script type,,."text/javascript">
S('div'). width(3SO);
$('p'). width(200);
}) ;
});
</scri pt>
</head>
<body>
<button type=" button">Larguras</button><br />
<div>DIV para definir a largura.</div><br />
<p>Texto de um parágrafo para definir a largura.</p>
iJ [arquivo-4.3b.html]
Nesse exemplo, utilizou-se um botão para disparar o evento. Observe que as
larguras do div e do p não foram definidas por regras CSS e assumem o valor-
padrão que é igual ao va lor d a largura do elemento-pai, nesse caso a largura da
janela. Definiram-se, com o método jQuery width(va7or), as larguras de 350px e
200px, respectivamente, para o div e o p. Veja o funcionamento desse script clicando
o botão "Larguras" no arquivo indicado, disponível no site do livro.

se/etorjQuery.height()
Acessa o valor da altura do elemento se1etorjQuerye retorna o resultado em unidade

pixel mesmo que tal altura tenha sido definida em regra CSS com outra unidade.
o exemplo a seguir, a altura do elemento parágrafo foi definida em 4em. Ob-
serve, no arq uivo que ilustra o exemplo, como o resultado é retornado em pixel.
Sabe-se que por padrão l em = 16px, logo 4em deverá retornar 64px.
Experimente aumentar o tamanho da fonte no navegador e rodar o script.
Exemplo:

div, p {width:SO%; background:#OfO;}
div {height :38px; }
p {height:4em;}
</Style>
<scri pt type="text/javasc ri pt" src=" .. / j query-1. 2. 6. js"></sc ri pt>
<scri pt type='"rext/j avas eri pt">
var alturaDiv = S('div'). height();
S('div').after('A altura do div é de: ' + alturaDiv + ' px');
var alturaPara = $('p').height();
S('p').after('A altura do parágrafo é de: ' + alturaPara + ' px');
}) ;
});
</se ri pt>
</head>
<bOdY>
<button type:"button">Alturas</button><br />
<div>DIV para determi nar a altura.</diV><br />
<p>Texto de um parágrafo para determinação da altura.</P>
acessaram os va lores das alturas do div e do p, os quais se armazenaram em duas
variáveis denominadas a1turaDivea1 turaPara rcspectivamen te. A seguir, escreveu-se
o resultado usando o comado after() [C3 53.6] para inserção de conteúdos. Veja
o funcionamento desse script clicando o botão '/\lturas" no arquivo indicado,

se/etorjQuery.heig ht(valor)
Define o valor, em pixel, da propriedade CSS height para o elemento se1etorjQuery,

isro é, define uma altura para os elementos-alvo do seletor.
Exemplo:

div, p {width:SO%; background:#OfO;}
</style>
S('button' ) .click(function{)
$('div'). height(70);
S('p'). height (100);
}) ;
});
</script>
</head>
<body>
<button type=" button">Al turas</button><br />
<div>DIV para definir a altura.</div><br />
<p>Texto de uma parágrafo para definir a altura.</p>
~ [arquivo-4.3d.html]
Nesse exemplo, utilizou-se um botão para disparar o evento. Observe que as

alturas do div e do p não foram definidas por regras CSS e assumem o valor-pa-
drão auto, que é igual ao valor necessário para circunscrever o conteúdo inserido
no elemento. Defin iram-se, com o método jQuery height(va7or), as largu ras de
70px e lOOpx, respectivamente, para o div e o p. Veja o funcionamento desse scripr
clicando o botão ' .A. lruras" no arquivo indicado, disponível no site do livro.
seletorjQuery.outerWidth([boo/eano])
Acessa o valor da largura do elemento seletorjQuery computando os valores dos
paddings e das bordas horizontais e retorna o resultado em unidade pixel mesmo
que as definições de largura e/ou padding tenham sido definidas em regra CSS
com outra unidade. No exemplo a segu ir, a largura do elemento div foi definida
em 275px e o padding esquerdo e direito, 20px, totalizando um padding de 40px.

Observe no arquivo que ilustra o exemplo como o resulrado recornado para a

largura do div é de: 275px + 40px = 315px.
Para o parágrafo, o valor retornado é de: 20em x 16px + 40px = 360px.
O parâmerro booleano pode ser declarado true ou fa lse. O va lor-padrão (quan-

do não se declara) é false. Quando declarado como true, o resultado retornado
para a largura do elemento inclui também o valor das margens horizontais, se
exisrenres.
Exemplo:
<Style type="text/css" media="a11">

div, p {height:SOpx; background:#OfO; paddi ng:O 20px;}
div {widt h:27Spx;}
p {width:20em;}
</style>
cscript type=''text/javasc ript'' src=" . . / jquery-1.2 .6. js''>c/sc ript>
cscript type=" text/javascript">
S( ' button ' ) .click(function()
var larguraOiv = $('div ' ).outerWidth();
S('div') .after('A largura do div (i nclui ndo o paddi ng mais as bordas
horizontais) é de : ' + la rguraOiv + ' px ' );
var larguraPara = S( ' p' ) .outerWidth();
S( 'p ').afte r('A largura do parágrafo(inclui ndo o padding lateral) é de: '
+ larguraPara + ' px') ;
}) ;
});
</scri pt>
</head>
<body>
<button type="button">Larguras</button><br />
<div>DIV para determi nação da largura+ padding + borda.</div>cbr />
<p>Texto de um parágrafo para determinação da largura+ padding.</p>
,iJ [arquivo-4.3e.html]

acessaram os valores das larguras do div e do p, os q uais se armazenaram em duas
var iáveis denominadas larguraOiv e larguraPara respectivamenre. A seguir, escreveu-se
o resultado usando o comado after() [C3 S3.6] para inserção de conteúdos. Veja
o funcionamento desse scripr clicando o botão "Larguras" no arquivo ind icado,
disponível no sire do livro.

Capitulo 4 • CSS e inspeção do DOM 135
seletorjQuery.outerHeight([booleano])
Acessa o valor da altura do elemento e funciona de maneira idêntica ao método

outerWidthO explicado anteriormente.
seletorjQuery. innerWidt h()
Acessa o valor da largura do elemento incluindo o valor de padcling horizontal
seletorjQuery.innerHeight()
Acessa o valor da alrura do elemento incluindo o valor do padding horizontal.
Figura ilustrativa
Observe, na figura 4.1, um diagrama do Box 1-lodel CSS esclarecendo os valores

de offsec e as larguras retornadas pelos métodos estudados anteriormente.
~ Mozilla Firefox ~@(8]

~ivo ~dtor Ec\b~ !jst!lrbl fll)!.<lfitos f.erramentõs At.!d>
ofntto~.J.••••••••
otfset left
LEGENOA:
conteúdo
Figuro 4. 1 - Métodos dimensionois.
Os valores no sentido vertical, não mostrados na figu ra 4.1, são rccornados de

maneira semelhante pelos métodos para alrura.

Os métodos dimensionais foram incluídos na biblioteca a partir da versão

jquery-1.2.6. Em versões anteriores, para pleno suporte a estes métodos, é
necessário a instalação de um plug-in denominado dimensi ons . js.
4.4 Inspeção do DOM
seletorjQuery.filter(filtro)
Acessa todos os elementos se1etorjQuery e seleciona somente aqueles definidos

em filtro.
No exemplo a seguir, acessaram-se todos os parágrafos e selecionaram-se

somente aqueles cujo atributo class é alvo, aplicando neles a cor vermelha.
Exemplo:
<script type="text/javascript" src=" . ./jquery-1. 2 . 6.js"></sc ript>

<scri pt t ype="text/javasc ri pt">
S( 'p ') .filter(' .alvo').css('color' , ' red');
});
});
</scri pt>
</head>
<body>
<button type=" button">Fil trar</button><br />
<p>Texto de parágrafo sem atributo classe . </p>
<P class="alvo">Texto de parágrafo co11 atributo class = "alvo". </p>
<P class="alvo">Texto de parágrafo co11 atributo class = "alvo" .</P>
<p>Texto de parágrafo sem atri buto classe</P>
<P class="alvo">Texto de parágrafo co11 atributo class = "alvo". </p>
iJ [arquivo-4.4a.html]
Nesse exemplo, utilizou-se um botão para disparar o evento. Veja o funcio-
namento desse script clicando o botão "Filtrar" no arqu ivo indicado, disponível
no site do livro.

se/etorjQuery.filter(função)
Este método funciona de forma idêntica ao método anterior, admitindo para

filtro uma função JavaScript.
seletorjQuery.is(expressão)
Acessa todos os elementos seletorjQuery e verifica se pelo menos um deles satisfaz

as condições estabelecidas no parâmetro expressão. Retorna os booleanos true/ false
caso positivo o u negativo respectivamente.
No exemplo a seguir, verifica-se se algum div possui a classe de nome cor e

escreve-se o resultado em um parágrafo com o método text(). Como existe tal
div, o va lor retornado deve ser true.
Exemplo:
<scri pt type,."text/javasc ri pt" src,." .. / j query-1. 2. 6. js"></scri pt>

var resultados= ($(' di v'). is(' .cor ')) ;
S('p').text('O valor retornado é: ' + resultados);
}) ;
});
</script>
</head>
<body>
<button type=" button">Resu l tado</button><br />
<div>Primeiro div</ diV>
<div class="cor">Segundo div</di V>
<div>Terceiro div</ diV>
<P></ p>
Nesse exemplo, utiliza-se um botão para disparar o evento. Veja o funciona-
mento desse script clicando o botão "Resulcado" no arquivo indicado, disponível
no site do livro.

se/etorjQuery.not(expressão)
Acessa rodos os elementos se1etorjQuery e exclui da seleção aqueles que satisfazem

a condição estabelecida em expressão.
No exemplo a seguir, selecionaram-se os divs e apl icou-se uma cor de fundo

naqueles que não poss uem a classe de nome sem-fundo.
Exemplo :
<style type="text/ css" media="al l">

div {float:left; margi n:lOpx; vridth:90px; height:90px; border:lpx sol i d #000;}
</style>
<scri pt type="text/javasc ri pt" src=" .. / j query-1. 2. 6. js"></ scri pt>
S('button').cl ick(function()
$(' di v' ) . not(' .sem-fundo') . css( ' backgroundCo lor' , '#ffO ' );
}) ;
});
</script>
</head>
<body:.
<button type="button">Resultado</button><br />
<div class="sem-fundo">Primei ro div</div>
<div>Segundo div</diV>
<div>Terceiro div</diV>
<div class="sem-fundo">Quarto div</div>
<div>Quinto div</div>
Nesse exemplo, utilizou-se um botão para disparar o evento. Veja o fun-

cionamento desse script clicando o botão "Resultado" no arquivo indicado,
seletorjQuery.slice(infcio [fim])
Acessa todos os elementos se1etorjQuery e selecio na desde o elemento na posição

início até o elemento na posição fim. Não inclui o elemento da posição fim. O
parâmetro fim é opcional e, se omitido, faz a seleçã o até o último elemento.
Lembre-se de qu e a contagem j avaScript inicia em O (zero), assim inicio= 3e

fim = 11 seleciona do quarto ao déci mo primeiro ele mento.

No exem plo a seguir, selecionaram-se os divs da posição dois à posição ci nco

e aplicou-se u m a cor de fu ndo neles.
Exemplo:
<style typec"text/css" mediao:"all ">

div {float :left; margi n:lOpx ; vridth :90px; height:90px; border :l px sol id #000 ;}
</style>
<Scri pt type="t ext/javascri pt" src=" . ./j query-1. 2. 6. js"></sc ri pt>
<scri pt type=''text/j avas e ri pt">
S( ' button') .click(f unct ion()
S(' di v' ) .slice(l, 5) .css( ' backgroundColor' , ' #ffO') ;
}) ;
} );
</scri pt>
</head>
<body>
<button type=" button">Resultado</butt on><br />
<div class="sem-fundo">Primei ro div</div>
<div>Segundo div</div>
<div>Tercei ro div</diV>
<div cl ass="se11-fu ndo">Quarto di v</di V>
<div>Quinto div</div>
<div>Sexto di v</div>
.ij [arquivo-4.4d.html]
Nesse exemplo, uti lizou-se um botão para disparar o evento. Veja o funciona-
mento desse scripr clicando o botão "Resultado" no arquivo indicado, disponível
no site do livro.
seletorjQuery.add(expressão)
Seleciona todos os elementos seletorjQuerye a estes adiciona os elementos definidos

no parâmeu·o expressão.
No exemplo a seguir, selecio naram-se os divs e a estes se adicionou o parágrafo

com a classe de nom e cl ear aplicando uma cor de fu n do no conjunto selecionad o
(os d ivs mais o parágrafo com a classe cl ear).
Exemplo :


div {float:left; margi n:lOpx; vridth: 90px ; height :90px; border :lpx sol id #000;}
.clear {clear:both;}
</styl e>
<scri pt type,."text/j avas e ri pt" src.. " .. / j query-1. 2. 6. js"></scri pt>
<script type,."text/javasc ript">
S('button ' ) .click(function() {
S( ' div') .add(' .clear ' ) .css( ' backgroundColor', ' tffO ' )
}) ;
} );
</scri pt>
</head>
<body
<div>Pri•eiro div</diV>
<div>Segundo div</div>
<diV>Terceiro div</diV>
<p cl ass="clear">Pr imei ro parágrafo</p>
<p>Segundo parágrafo</p>
<p.>Tercei ro parágrafo</p>
.iJ [arquivo-4.4e.html)
Nesse exemplo, utilizou-se um botão para disparar o evento. Veja o funciona-
mento desse script clicando o botão "Resulcado" no arquivo indicado, disponível
no sire do livro.
seletorjQuery.chi ld ren([expressão]}
Seleciona todos os elementos-filho de seletorjQuery. O parâmetro expressão é facu l-

tativo e, quando definido, destina-se a filtrar os elementos-filho encontrados.
No exemplo a seguir, selecionaram-se todos os elementos-filho do parágrafo,

filtraram-se os span e neles se aplicou uma cor de fundo.
Exemplo:
<scri pt type="text/javasc ri pt" src=" . ./ j query-1. 2. 6. js"></scri pt>

S( ' button') .click(f unction() {

S('p') .chi ldren('span'). css('backgroundColor', '#ffO')

}) ;
});
</script>
</head>
<body>
<p>Parágrafo com <span>span um</span><b>bold um</b>
e a segui r <i>i tálico um</i> .<br /> Na continuação
<span>span dois</span> e fi nalmente <Span>úl ti•o span.</ span></P>
.iJ [arquivo-4.4f.html)
Nesse exemplo, utilizou-se um botão para disparar o evento. Veja o funciona -
mento desse script clicando o botão "Resultado" no arquivo indicado, disponível
no site do livro.
seletorjQuery.find( [expressão])
Seleciona todos os elementos descendentes de se1etorjQuery que satisfazem expressão.
No exemplo a seguir, encontraram-se os elementos em itálico pertencentes ao

parágrafo e aplicou-se urna cor de fundo ao conjunto selecionado.
Exemplo:
<scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. js"></ scri pt>

<scri pt type::"text/javasc ri pt">
S('p').find('i'). css('backgroundColor', '#ffO')
}) ;
});
</script>
</head>
<body>
<button type=" button">Res u1tado</button> <br />
<P>Parágrafo com <span>span um</span><b>bold um</b>
e a segui r <i>itálico um</i>.<hr /> Na continuação
<span>span dois</span> e finalmente <span>último span.</span></p>
.iJ [arquivo-4.4g.html)

Nesse exemplo, utilizou-se um botão para disparar o evento. Veja o funciona-

mento desse scripc clicando o botão "Resultado" no arquivo indicado, disponível
no site do livro.
Note que este método cumpre a mesma função do seletor composto S(p span).
Avantagem de seu uso está no fato de aceitar uma expressão como parâmetro
de busca, o que não é possível com seletores compostos.
seletorjQuery. pa rent([expressão])
Seleciona todos os elementos que sejam elemento-pai do se1etorjQuery. Admite o

parâmetro expressão como um filtro.
No exemplo a seguir, selecio naram-se os elementos-pai de parágrafo e aplicou-

se uma cor de fundo ao conjunto selecionado.
Exemplo:
<styl e type="text/css" media="all ">

div, blockquote {width:300px; height:40px; margi n:lOpx; border:lpx sol id #000;}
</Styl e>
<script type="text/javascript" src=" . . /j query-1.2 .6. js"></script>
S('p'). parent().css('backgroundColor ', ' #ffO')
}) ;
});
</script>
</head>
<bOdY>
<button type=" button">Res ultado</button><br />
<div><h4>Cabeçalho h4 filho de um div</h4></di v>
<div><p>Parágrafo fil ho de um div</p></di V>
<blockquote><p>Parágrafo filho de blockquote</P></bl ockquote>
.iJ [arquivo-4.4h.html]
Nesse exemplo, urilizou-se um botão para disparar o evento. Veja o funciona -
mento desse script clicando o botão "Resultado" no arquivo indicado, disponível
no site do livro.

se/etorjQuery.pa rents([expressão])
Seleciona todos os ancestrais do seletorjQuery. Admite o parâmetro expressão como

um filtro.
No exemplo a seguir, selecionaram-se todos os elementos ancestrais do ele-

mento span e aplicou-se uma borda preta de 2px de espessura em volta de cada
um deles. Para facilitar a visualização deste exemplo no arquivo disponível no
site do livro, acresentaram-se regras CSS para definir uma cor de fundo para cada
um dos elementos ancestrais de span.
Exemplo:

html {background:#OfO;}
body {background :#ccc; wi dth: 400px;}
div {margin:20px; background :#ffc;}
blockquote {background:#OfO;}
p {background:#Off;}
span {background:#f93;}
</style>
<scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. js "></scri pt>
S('span ' ). parents().css('border ' , '2px solid #000')
}) ;
}) ;
</scri pt>
</head>
<body>
<div>
<blockquote>
<p>Parágrafo
<span>
til ho
</span>
de blockquote.
</p>
</blockquote>
</div>
<button type="button">Resultado</button>
.iJ [arquivo-4.4i.html)

Nesse exemplo, utilizou-se um botão para disparar o evento. Veja o fu ncio na-
mento desse script cl icando o botão "Resultado" no arquivo ind icado, di sponível
no site do livro.
seletorjQuery. prev([expressão])
Selecio na o elemento adjacente imediatamente anterior ao se1etorjQuery. Admire

o parâmetro expressão como filtro.
No exemplo a seguir, o script parte do último elemento e a cada clique no

botão disparador do evento seleciona o elemento-irmão anterior definindo para
este uma imagem de fundo. Ao atingi r o primeiro elemento, o script para de
selecionar porque o primeiro elemento não possui elemento anterior.
Exemplo:

div {float:left; width :80px; height :80px ; margin :lOpx; border :2px sol i d IJOOf;}
button {displ ay:block; cl ear: both;}
</Styl e>
<scri pt type="text/javasc ri pt" src=" . . / j query-1. 2. 6. js"></sc ri pt>
var di vCorrente = SC ' .corrente ' ) ;
divCorrente .css( ' background', ' url(flor .jpg) no-repeat ');
S( ' button ' ) .click(f unction() {
divCorrente = divCorrent e.prev();
S('div') .css(' background ' , ' ');
SdivCorrente .css( ' background ' , ' url (ffor .jpg) no- repeat ' );
}) ;
} );
</script>
</head>
<body>
<div>DIV um</div>
<div>DIV doi s</div>
<div>DIV t rés</diV>
<div>DIV quatro</div>
<div>DIV cinco</div>
<div>DIV seis</diV>
<di v class="corrente">DIV sete</div>
<button type="button">« Anterior</button>
~ [arquivo-4.4j.html)

Nesse exemplo, utilizou-se um bocão para disparar o evento. Veja o funcionamen-

to desse script clicando seguidameme o botão ·~n reri or" no arquivo indicado,
seletorjQuery.next([expressão])
Selecio na o elemento adjacente imediatamente posterior ao seletorjQuery. Admire
Este método fun ciona da mesma maneira que o anterior, selecionando ele-
mentos em orde m crescente.
Esse script está no arqu ivo indicado a seguir.
.iJ [arquivo-4.4k.html)
Nesse exemplo, utilizou-se um botão para dispara r o evento. Veja o funciona-

mento desse script clica ndo seguidamente o botão "Próximo" no arquivo indicado,
seletorjQuery. prev All( [expressão])

Seleciona todos os elementos-i rmão adjacentes seletorjQueryanter io res a ele. Admite
Este método funciona da mesma maneira que prev() , selecionando rodos os
elementos-irmão adjacentes anteriores.
Este script está no arquivo indicado a segu ir.
.iJ [arquivo-4.41.html)
Nesse exemplo, uálizou-se um botão para disparar o evento. Veja o funciona-

mento desse script clicando seguidamente o botão "Anter io r" no arquivo indicado,
seletorjQuery.nextAll([expressão] )
Seleciona rodos os elementos-irmão adjacentes de se1etorjQuery. Admire o parâ-
metro expressão como filtro.
Este método funciona da mesma maneira que prevAll O, selecionando rodos
os elementos-irmão adjacentes subsequentes.
Este script está no arquivo indicado a seguir.
.iJ [arquivo-4.4m.html]

Nesse exemplo, util izou-se um botão para disparar o evento. Veja o fun cio-
namento desse script clicando seguidamente o botão ''Próxi mo" no arquivo
seletorjQuery 7.....seletorjQueryN.end().método_continua()
Este método perm ite interferi r e m um encadeamento de métodos jQueq~ rever-
tendo a seleção ao objeto anterior ao último objeto adjacente ao método end() na
cadeia . Na sintaxe mostrada, os efeitos contidos no método método_continua() serão
aplicados ao se1etorjQuery(N-1).
Os objetos jQuery aos quais se apl ica este método são add, andSelf, children ,
filter, fi nd, map, next, nextA11, not, parent, paren ts , prev, prevA11, si b1i ngs e s1ice e ram bém
à fu nção clone.
Exemplo:
<Style t ype="text/css" media="all ">

div {width:400px ; height:lOOpx; margi n;lOpx; border:2px solid #OOf;}
</Styl e>
<script type="text/javasc ri pt" src=" . ./jquery-1.2 .6.js"></script>
S('button:eq(O) ' ).click(function() {
S('div' ) .find (' p') .css('background', '#fOO');
}); // sem uso de end() a cor do fundo é para o parágrafo dentro do div
S('button: eq(l) ' ). click(function() {

S(' div') .find(' p' ) .end(). css(' background', ' itfOO');
}) ; //mesmo códi go com uso de end() a cor do fundo reverte para o di v
S('button:eq(2) ' ).click(function() {
S('div, p') .css(' background ' , ' ' );
}) ;
});
</scri pt>
</head>
<body>
<button type=" button"> Sem end() </button>
<button type="button''>Com end O</button>
<button type=" button">Reset</button>
<div>
<P>Este parágrafo está dentro do div</p>
</div>
.i) [arquivo-4.4n.html]

Nesse exemplo, mosrraram-se duas situações com o objccivo de enfatizar na

prática o funcionamento d e end(). No primeiro caso, a estilização fez-se direta-
mente no parágrafo selecionado pelo scripc e, na segunda situação, usando o
mécodo end(), rransferiu-se a estilização para o elemento div imediatamente antes
do méwdo que seleciona o parágrafo no encadeamento.
seletorjQuery 1.....seletorjQueryN.a nd Self().método_ continua()

Esce método, tal como o anterior, permite interferir em um encadeamento de
mécodos jQuer)~ revercendo a seleção aos d ois úlcimos objetos da cadeia. Na
sinraxe mostrada, os efeiros contidos no método método_continua() serão aplicados
simu lraneamence ao se1etorjQuery(N-l) e ao se1etorjQueryN.
Os objecos jQuery aos quais se aplica esce mécodo são add, andSelf, children,
fil ter, find, map, next, nextA11, not, parent, paren ts, prev, prevAll, si bl i ngs e s1ice e cam bém
à função clone.
Exemplo:
<Style type="text/css" media="all">

div {width:400px; height:lOOpx; margin:lOpx; border:2px solid #OOf;}
</style>
<scri pt type="text/javasc ri pt" src=" .. / j query-1. 2. 6. js"></scri pt>
S('button:eq(O)').click(function() {
S('di v').find('p'). andSelf() .css('border' , ' 2px dotted #fOO');
});
S('button:eq(l)').click(function() {
S('di v, p') .css('border ', ' ' );
}) ;
});
</scri pt>
</head>
<body>
<button type="button">andSelf()</button>
<button type="button">Reset</button>
<dÍV>
<p>Este parágrafo está dentro do div</p>
</div>
.iJ [arquivo-4.4o.html]

se/etorjQuery.si blin gs ([expressão] )
Seleciona rodos os irmãos de se1etorjQuery. Admite o parâmetro expressão como

filtro.
No exemplo a seguir, o script seleciona todos os irmãos do elemento l i cuja

classe é diferente e aplica uma cor de fundo amarela. Note que o elemento li com
a classe dife rente não é selecionado, mas somente seus irmãos.
Exemplo:
<scri pt type="text/javasc ri pt">

$('l i .diferente') .siblings(). css('background', 'yellow' ) ;
});
S('button:eq(l) ' ).cl i ck(function() {

S('l i .diferente') .siblings() .css('background ' , '') ;
}) ;
});
</scri pt>
</head>
<body>
<button type,," button">si bili ngs()</button>
<button type=" button''>Res et</button>
<Uh
<l i>I tem 1</ l i >
<l i>Item 2</l i>
<l i el ass,,"di fe rente"> Item 3</l i>
<l i>Item 4</l i>
<l i>Item 5</l i>
</uh
<Uh
<l i>Item 1</l i>
<l i>Item 2</l i>
<l i>Item 3</li >
<l i>Item 4</l i>
<l i>Item S</l i>
</Uh
.iJ [arquivo-4.4p.html]

se/etorjQuery.map(função)
Transforma o conjunto de objetos retornado pelo seletorjQueryem um array cujos

valores podem ser elementos ou referências. O parâmetro função define como será
feita a seleção dos valores do array e qual a sua natureza.
No exemplo a seguir, a função recolhe o valor de cada um dos campos de um

formulário, armazena em um array e escreve os valores.
Exemplo:
cscript type="text/ javascript'' src='' .. / jquery-1.2.6.js">c/sc ript>

cscript type="text/javascript">
S('div' ) .append(S('input') .map(function() {
return S(this).val();
}).get().join(', '));
}) j
S('button:eq(l) ' ).click(function() {

S('div' ) .empty();
}) ;
}) ;
</se ri pt>
c/head>
cbody>
cp>Digite nome e e-mail nos campos e rode o scriptc/p>
cbutton type=" button''>map () </button>
cbutton type="button">Resetc/button>
cform action="" method="get">
clabehNome:cbr /><input type="text" /></labehcbr />
clabehE-mail :cbr /><input type ..:'text" /></l abehcbr / >
cspan>Sexo: c/span>cbr />
clabehcinput type="radio" name="sexo" value="masculino" /> Masculino</labehcbr />
clabel>cinput type="radio" na11e="sexo" value="feminino" /> Femininoc/label>
c/form>
cdÍV></dÍV>
~ [arquivo-4.4<1.html]

CAPÍTULO 5
Eventos
Neste capítulo, serão estudados os even tos disponíveis na biblioteca jQuery. Na

linguagemJavaScripc, a entrada em funcionamento de um script depende de um
evento. É lícito afirmar que se não ho uvesse eventos, simplesmente não haveria
j avaScripc. Evento, também chamado de gati lh o, é uma ação do usuário que
desencadeia o início do scripc ou faz rodá-lo.
Quando o usuário abre uma página web, clica um botão, pressiona uma tecla,
seleciona um campo etc., ocorre o evenco.JavaScripc possui mecanismos capazes
de detectar a ação do usuá rio e desencadear o script. O conhecimento da sintaxe
que captura um evento é fundamenta l para o desenvolvimento de scripts.
5.1 Eventos auxiliares

seletorjQuery. blur(função)
Quando o se1etorjQueryperde o foco, ocorre o evento blu r() e entra em ação o script
definido no parâmetro função. Esse evento é amplamente usado em campos de
formulário para disparar um scripc (por exemplo: um script para validar os dados
inseridos no campo) quando o usuário abandona o cam po.
Exemplo:
<scri pt ty pe="text/javasc ri pt" src=" . ./j query-1. 2. 6. j s"></scri pt>

<script ty pe="text/javasc ript">
S('input'). blur(function() {
$('input').css('background', 'yellow');
151
$(' .mensagem ' ).text('Você disparou o evento blur. ' );

}) ;
});
</script>
</head>
<body>
<p>Cl ique dentro do campo de texto abaixo<br />
e depois emqualquer lugar fora dele.</p>
<input type="text" />
<P class="mensagem"></P>
Os eventos jQuery seguem uma sintaxe ligeiramente diferente dos da linguagem
li'• JavaScript. Note que o evento jQuery b1ur tem seu correspondente JavaScript
comsintaxe onblur. Se você desenvolve JavaScript e algo der errado com seu
script que usa eventos, antes de mais nada verifique a grafia dos eventos .
se/etorjQuery.change(função)
O evento change() ocorre quando o valor em um campo de formulário perde
o foco em favo r de oun-o va lor. O uso clássico desse evento é em campos de
formulá rio do ripo select , no qual o evento ocorre quando o usuário seleciona
uma das opções.
Exemplo:
<Script type="text/ javasc ri pt" src=" .. / jquery-1.2 .6. js"></sc ript>

S( 'select' ) .change(function() {
var valorEscol hido =$( ' option :selected') .text();
$( ' .mensagem ' ) .html('Você disparou o evento change.<br / >Selecionou: '
+ valorEscolhido);
});
});
</script>
</head>
<body>
<P>Faça algumas seleções no campo select.</p>
<select>
<option>Escol ha um</option>
<Option>Escol ha dois</option>
<Option>Escol ha três</option>
<option>Escol ha quatro</ option>

Capitulo 5 • Eventos 153
<option>Escol ha cinco</option>
<option>Escolha seis</option>
<Option>Escol ha sete</option>
</select>
<P class="mensagem"></p>
..ij [arquivo-5.1b.html]
seletorjQuery.click(função)
O evemo click() ocorre quando o t1suário clica o ponteiro de um dispositivo

apo ntador (por exemplo: o ponteiro do mouse) sobre se1etorjQuery, disparando o
script definido no parâmetro função. Nos exemplos constantes dos capítulos ante-
riores, nos scripts em que se uso u um bo tão para faz ê-los funci onar, utilizou-se
o evento click. Volte a um daqueles exemplos para estudar esse evento.
seletorjQuery.dbld ick(função)
O evento dblcll ick() ocorre quando o usuário clica duas vezes seguidas o ponteiro
de um dispositivo apontador (por exemplo: o ponteiro do mouse) sobre se1etor-
jQuery, disparando o script definido no parâmetro função.
Exemplo:
<style type="text/ css" medi a="all ">

div {
width:90px ;
height:90px;
background:green;
border:2px solid #000;
}
.muda-cor {background:red ;}
</style>
<scri pt type,."text/javasc ri pt" src"" . . / j query-1. 2. 6. js"></ scri pt>
S('div'). dblcl ick(function()
S('di v' ) .toggleClass('muda-cor');
$( ' .mensagem ' ).html('Você disparou o evento dblcl ick. ' ) ;
}) ;
} );
</script>
</head>

<hody>
<p>Umduplo clique no div e ocorre o evento dblcl ick.</ P>
<diV></diV>
<P class,,"mensagem"></P>
.i) [arquivo-5.1c.html)
seletorjQuery.error(função)
O evenro error() ocorre quando um erro é detectado, quer seja de programação
(por exemplo: sintaxe errada), quer seja com um elemento na árvore do docu-
mento. Um exemplo de erro com o elemento img ocorre quando o caminho para
a imagem definido no atributo src está errad o, é inválido ou quando não existe
a imagem. Nesses casos, o navegador internet Explorer renderiza um pequeno
ícone com aproximada mente 30 x 30px indicando quebra da imagem. Para
esconder o ícone, use o script mostrado a seguir.
S( ' img ').error(function () {
S(this) .hide();
}) ;
Não há uma diretriz pública para tratamento de erros em JavaScript, o que

torna o assunto complexo, na medida em que envolve implementações proprie-
tárias. O escudo e aprofundamento do rraramenco de erros fogem ao escopo
deste livro.
seletorjQuery.focus(função)
Quando o se1etorjQuery recebe o foco, ocorre o evento focus() e entra em ação o
script definido no parâmetro função. Esse evento é amplamente usado em campos de
formulário para disparar um script (por exemplo: um script mostrando um pop-up
com dicas para o preenchimento do campo) quando o usuário entra no campo.
Exemplo:
<Scri pt type="text/ javasc ri pt" src=" . ./j query-1. 2. 6. j s"></scri pt>

S(' i nput').focus(function() {
S('input').css ('background', ' yellovi') ;
$( ' .mensagem ' ).text(' Use apenas números para informar seu CPF. ' ) ;
}) ;
} );
</scri pt>

</head>
<body>
<P>Clique dentro do campo de texto abaixo.</ P>
<l abe l>CPF: <input type=" text" /></l abe h
<P class="mensagem"></p>
..ij [arquivo-5.1 d.html]
seletorjQuery. keydown(função)
Ocorre o evento keydown() quando o usuário pressiona uma tecla qualquer de

seu redado. Esse evento cem sua aplicação mais comum em campos de formu-
lário, particularmente em textarea, para contar e informar ao usuário o número
de caracteres digitados quando se pretende limitar a extensão da entrada (por
exemplo : em campos para entrada de comentá rios ou envio de mensagens).
Se você pretende bloquear a entrada de caracteres a partir de um detemiinado teto,

use jQuery somente para informar ao usuârio o número de caracteres à medida
que ele digita. Para efetuar obloqueioa partir do teto, use uma programação que
rode no servidor {por exemplo: PHP, ASP, ColdFusion ele.).
Exemplo:
<scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. js"></ scri pt>

S(' i nput ' ).keydown(function() {
S('body ' ).css('background ' , '#cff'):
S( ' .mensagem').html( 'Ao pressionar uma tecla qualquer do seu t eclado<br />
ocorreu o evento keydown e a cor de fundo da página mudou . ');
}) ;
}) ;
</scri pt>
</head>
<body>
<P>Entre uma letra qualquer no campo abaixo .</p>
<i nput type="text" / >
<p class="mensagem"></p>
..ij [arquivo-5.1 e.html)

se/etorjQuery.keyup(função)
Ocorre o evento keyup() quando o usuário solta uma tecla qualquer d o redado
que renha sido pressionada.
seletorjQuery. keypress(função)
Ocorre o evento keypress() quando o usuário realiza a sequência apertar e soltar

uma reda qua lquer do teclado.
seletorjQuery.load(fUnção)
Ocorre o evento load() quando o seletorjQuery termina de ser carregado e nesse

momento entra em ação o scripr definido no parâmetro função. Esse evento, nor-
malmente, é usado para o objeto window e ocorre quando toda a página acaba de
ser carregada.
A si n taxe para esse even to é mostrada a segui r:
S('window'). load (function() {

li seu script aqui
}) ;
seletorjQuery. mousedown(função)
O evento mousedown() ocorre quando o usuário pressiona o botão de um dispositivo

apo ntador (por exemplo: o ponteiro d o mouse) sobre se1etorjQuery, disparando o
script definido no parâmetro função.
Exemplo:
<Style t ype="textlcss" media="all ">

body {cursor :pointer;}
<IStyl e>
<scri pt type="text/j avas e ri pt" src=" .. l j query-1. 2. 6. js"><lsc ri pt>
<scri pt type="textljavasc ript">
S('h2 ' ) .mousedown(function()
S(this).append(' mousedown ' );
}) ;
} );
<lscript>
<lhead>

<hody>
<h2>Faça acontecer mousedown aqui.</h2>
~ [arquivo-5. lf.html]
se/etorjQuery.mouseup(função)
O evento mouseup() ocorre quando o usuário solta o botão de um dispositivo

apontador (por exemplo: o ponteiro do mouse) sobre se1etorjQuery, disparando o
script definido no parâm etro função.
Exemplo:
<style type="text/css" media""al 1">

body {cursor:pointer;}
</styl e>
<Scri pt type="text/ j avasc ri pt" src=" .. /j query-1. 2. 6. js"></sc ri pt>
S('h2' ) .mouseup(function() {
$(this).append(' mouseup ');
}) ;
}) ;
</script>
</head>
<hody>
<h2>Faça acontecer mouseup aqui .</h2>
~ [arquivo-5.1g.html]
O script a seguir demonstra o emprego conjunto dos dois eventos anteriores,

facilitando a visualização do momento em que cada um deles ocorre.

h2 {cursor:pointer;}
</styl e>
<script type,,"text/javascript" src=" .. / jquery-1.2 .6. js"></sc ript>
S('h2') .mousedown(function() {
$(this).append(' <span style="color:bl ue">mousedown</span> ');
}).mouseup(function() {
$(thi s) .append(' <span style="color:red">mouseup</ span> ');

}) ;
});
</se ri pt>
</head>
<body>
<h2>Clique, segure e sol te.</h2>
.iJ [arquivo-5.1 h.html]

seletorjQuery. mouseover(função)
O evento mouseover() ocorre quando o usuário passa um dispositivo apontador

(por exemplo: o ponteiro do mouse) sobre se1etorjQuery, disparando o script de-
finido no parâmetro função.
Exemplo:
di v {vri dth: 90px; hei ght: 90px; background: green; border: 2px sol i d b1ack;}
</Style>
S('div').mouseover(function() {
S(this).css ( ' background ' , 'red');
}) ;
}) ;
</se ri pt>
</head>
<body>
<p>Passe o mouse sobre o div</P>
<div>DIV</div>
.iJ [arquivo-5.1 i.html)

seletorjQuery. mouseout(função)
O evento mouseout() ocorre quando o usuário reti ra o dispositivo apontador (por

exemplo: o ponteiro do mouse) de cima do se1etorjQuery, d isparando o script
definido no parâmetro função.
Exemplo:

div {vridth:90px; height: 90px; background:green; border:2px solid black; }

</Styl e>
<scri pt type="text/javasc ri pt" src=". ,/j query-1. 2. 6. js"></scri pt>
S( ' div ' ).mouseout(function() {
S(this).css( ' background', 'red');
}) ;
}) ;
</script>
</head>
<bOdY>
<p>Coloque o mouse sobre o div e reti re</p>
<div>DIV</div>
.iJ [arquivo-5.lj.html]
O scri pt a segui r dem o nstra o emprego conjunto dos dois eventos a n teriores.
Observe que ao combinar os métodos mous eover() e mouseout(), obtém-se o clássico
efeito rollover, cão usado em menus de navegação.
di v {vridth:90px ; hei ght :90px; background: green; border: 2px so 1i d bl ack;}

</Styl e>
S( 'div'). mouseover(function() {
S(this).css( 'background', 'red');
}).mouseout(function() {
S(this).css ( ' background ' , 'green');;
}) ;
} );
</script>
</head>
<bOdY>
<p>Passe o mouse sobre o div e reti re.</P>
<div>DIV</div>
~ [arquivo-5.1 k.html)

se/etorjQuery.mousemove(função)
O evento mousernove() ocorre quando o usuário movimenta o dispositivo apontador

(por exemplo : o ponteiro do mouse) sobre o se1etorjQuery, disparando o scripr
definido no parâmetro função. Esse evento é amplamente usado para armazenar
as coordenad as do dispositivo apontador.
Exemplo:
<Style type="text/ css" media="all ">

div {margi n-l eft:100px;width :200px; height:200px;background:red;
border:2px solid black;}
</Styl e>
<scri pt type="text/javasc ri pt" src=" .. /jquery-1. 2. 6. js"></sc ri pt>
S('div').~ousemove(functi on(o) {
var windowCoordenadas = ' (x = ' + o.clientX + ' y = ' + o.clientY + ')';
S(' span') . css('display', 'bl ock').text('Coordenadas: ' + wind01\Coordenadas);
$('div').mouseout(function() {
S('span').css('di splay', 'none');
});
}) ;
}) ;
</script>
</head>
<bOdY>
<p>Movimente o mouse sobre o div.</P>
<dÍV></diV>
<span></ span>
.iJ [arquivo-5.11.html)
seletorjQuery.resize(função)
O evento resize() ocorre quando h á redimensiona mento d o seJerorjQuery, dis-

parando o script definido no parâmetro função. No exemplo a segu ir, o script é
executado quando o usuá rio redimensiona a janela do n avegado r.
Exemplo:


S(window). resize(funct ion() {
S('body ' ) . text('Ops! Você redimensionou a janela do navegador.');
}) ;
});
</script>
</head>
<body>
<Span></span>
</body>
</html>
~ [arquivo-5.lm.html)
Para visualizar o funcionamenco do script, abra o arqu ivo correspondente em
seu navegador e redimensione a janela do navegador.
seletorjQuery.scroll(função)
O evenco scroll ()ocorre quando o usuário aciona uma das barras de rolagem do
seletorjQuery, d isparando o script definido no parâmetro função.
Exemplo:
<Style type="text/css" media="all">

div {width:200px; height:150px; overflow:scroll ;}
b {color:red;}
</style>
<scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. js "></scri pt>
S('div'). scroll(function() {
S('b').text( 'Você acionou a barra de rol agem do di v');
}) ;
}) ;
</script>
</head>
<body>
<div>
<h4>Div com barra de rolagem</h4>
<p> ... mui to conteúdo ... </p>
</div>
<b></b>
~ [arquivo-5.1n.html]

se/etorjQuery.select(função)
O evento selectO ocorre quando o usuário seleciona um cexto ou fragmenro

de rexco do se1etorjQuery, disparando o script definido no parâmetro função. Nlas,
atenção: esse evento só é válido para seleções de textos contidos em campos de
formulário destinados à enn·ada de textos, tais como i nput e textarea. Não confunda
esse evento com o evento change(), que ocorre quando o usuá rio muda a seleção
em um campo de formu lário do tipo select.
Exemplo:

span {font:smal l-caps bold 20px sans-serif ; color :#fOO;}
</Styl e>
S(document). select(function() {
$(' <span>\locê disparou o evento se l ect</span>')
.show().fadeOut(lSOO).appendTo( 'div');
}) ;
}) ;
</scri pt>
</head>
<bOdY>
<p>Cl ique e arraste o mouse no texto dentro do campo para sel ecioná-l o.</P>
<i nput type="text" value="selecione este texto">
<diV></di V>
.iJ [arquivo-5.1o.htm11
seletorjQuery.submit(função)
O evento submi tO ocorre quando o usuário submete ou envia os dados co lhidos
ou contidos em seletorjQuery, disparando o script d efinido no parâmetro função.
Esse evento é amplamente empregado para verificação dos dados preenchidos
pelo usuário em u m formulá rio tão logo ele rente enviá-lo.
Exemplo:

div {color:#fOO;}
</style>

S('form') .submit(funct ion() {
if ($('input:first') .val() == '') {
S('div').text('Por favor ! Preencha o campo.') ;
return false ;
}
if ($('input:first').val() !== 'jQuery') {
S( 'div') .text('Lamento ! entrou a palavra errada. ');
return false;
} else {
S('div') .text('Parabéns! entrou a palavra certa.');
}
}) ;
}) ;
</scri pt>
</head>
<body>
<P>Entre a palavra jQuery no campo abaixo e clique o botão Enviar.<br />
Atenção: campo sensível ao tamanho de caixa~/p>
<form action="javascript:void()">
<label>Campo de texto</label><br />
<i nput type="text" />
<i nput type=" submi t" va l ue="Envi ar" />
</form>
<dÍV></dÍV>
.ij [arquivo-5.1p.html]
seletorjQuery.unload(função)
Ocorre o evento unoad() quando o usuário aband ona o seletorjQuery que tenha
sido carregado anteriormente e nesse momento entra em ação o script d efinido
n o parâmetro função. Esse evento é usado para o objeto 1vindow e ocorre quando o
u suário fecha uma página.
Exemplo:
<Script type="text/javascript" src=" .. / jquery-1.2 .6. js"></script>

S(1'1indow) .unl oad(funct ion() {
alert('Esta é uma demonstração do evento unload. ');
}) ;
});

</scri pt>
</head>
<body>
<p>Feche esta janela para constatar o evento unload em ação.</P>
</body>
..ij [arquivo-5.1 q.html]
5.2 Eventos de interação

seletorjQuery.toggle(f1 f2 [f3 ... fN])
O evento t oggle() permite executar duas, e opcionalmence mais, funções, segu idas
e alcernadamcnce mediante cliques sucessivos no bocão d e um dispositivo apon-
tador (por exemplo: o ponteiro do mouse) sobre o se1etorjQuery, fazendo entrar
em ação os scripts definidos nas funções fl e f2. Quando o usuário clica uma vez
no seletorjQuery, é executada a função fl, clicando outra vez, é executada a função
f2, mais uma vez, é executada a função fl e assim sucessiva e indefinidamente
alcernando a execução das funções.
Esse evento admite a opção de adicionar mais de dois scripts e nesse caso a
execução deles se faz ele f1 até fN, volta a fl e repete-se o ciclo indefinidamente.
Exemplo:
<Style t ype="text/css" media.. "all ">

p {cursor:pointer;}
</Styl e>
<scri pt type="text/j avas e ri pt" src=" . . / j query-1. 2. 6. js"></sc ri pt>
<script type .."text/javasc ript">
S('p ' ). toggle(
function() {
S('img') . css('display', 'block').attr({src: '2 .gif ' });
},
functi on() {
S('img') .css('di splay' , 'block') .attr({src: '3.gif'});
}'
function() {
S(' img') .css(' display', 'block'). attr( {src: '4 .gif ' });
},
function() {

$(' img') .css(' di splay', 'block'). attr( {src: '1.gif ' });
})
});
</script>
</head>
<bOdY>
<p>Cl i que seguidamente aqui,<br />
para ver o evento toggle() em ação.</P>
<img alt="Bate coração" src=" l. gif" />
seletorjQuery. hover(sobre fora)

O evento haver() perm ite executar duas funções: uma quando o usuário coloca um
disposiávo apontador (por exemplo : o ponteiro do mo use) sobre o seletorjQuery e
a ou rra quando ele rec:i ra o disposirivo apontador de sobre o seletorjQuery, fazendo
encrar em ação os scripts defin id os nas funções sobre e fora. Este método, cal corno
o método toggle(), pode ser usado para obter o conhecido efeito rollovcr.
Exemplo:
<styl e t ype="text/css" media="al 1">

img {curso r: pointer;}
</ Styl e>
<scri pt type="text/javasc ri pt" src=" .. / jquery-1. 2. 6. js"></sc ri pt>
S('img') .hover(
function() {
$(' img') . css(' di splay', 'block' ) . at tr( {src: '2-over .gi f'});
},
function() {
S('img').css('display', ' block' ).attr({src: '2. gif ' });
})
});
</ scri pt>
</ head>
<body>
<p>Passe o mouse sobre o coração,<br />
para ver o evento hover() em ação. </p>
<img alt="Bate coração" src="2 .gif" />

5.3 Manipuladores de eventos

seletorjQuery.bind(tipo [dados] função)
O manipulador de eventos bind() permite vinculai- um evento ao seletorjQuery,

fazendo enrrar em ação os scripts definidos nos parâmetros função. O parâmetro
dados é facultativo e o parâmetro tipo defi ne o tipo de evento a vincular. Os evenros
possívei s são : b1ur, focus, load, resi ze, scro11, un load, e1i ck, dblc 1i ck, mousedown, mouseup,
mousemove,mouseover , mou seout, mouseenter , mou seleave,change,select,su bmi t,keydo~m,keypress,
keyup e error.
Exemplo:
<style type=" text/css" media="all ">

div {cursor: pointer; width:lOOpx; height:lOOpx; borde r:2px solid 11000;
span {display: bl ock;}
</style>
<sc r i pt type="text/ javasc r i pt" src=" .. / j query-1. 2. 6. js"></sc ri pt>
S('div').bind( 'mouseover' , function() {
S(this).css( 'borderWi dth', 'lOpx');
S('span:eq(O)').text('Ocorreu o evento nX>useover. All!lentou espessura da borda. ') ;
}) ;
S('div').bind('cl ick', function(o) {

var coordenadas = 'x= ' + o.pageX + ', y= ' + o.pageY ;
S( 'span:eq(l)').text('Ocorreu o evento click nas coordenadas : ' +coordenadas);
}) ;
S('div').bind('dblclick', function() {
S(thi s) .css( ' background ' , 'red');
S('span:eq(2)' ) .text('Ocorreu o evento dblclick. Mudou a cor de fundo .' );
});
}) ;
</script>
</head>
<body>
<P>Eventos vinculados com bind():</p>
<uh
<li>mouseover - aumenta espessura das bordas.</ li>
<li>click - amazena e mostra as coordenadas do click. </ li>
<li>dblcl ick - troca cor de fundo.</ li>
</ Uh

<diV></diV>
<span></span>
<Span></span>
<span></span>
.i) [arquivo-5.3a.html]
seletorjQuery.one(tipo [dados] função)
O manipulador de eventos one() permite vincular um ou mais event0s ao

se1etorjQuery, fazendo entrar em ação os scripts definidos nos parâmetros função.
O parâmetro dados é faculcativo e o parâmetro tipo define o tipo de evento a
vincular. Aqui cada um dos elementos selecionados por se1etorjQuery execuca
o script uma única vez. No exemplo a seguir, a caixa de alerta será mostrada
somenre ao primeiro clique em cada parágrafo. O segundo clique não executa
mais o script.
Exemplo:
<scri pt type="text/javasc ri pt" src=" .. /j query-1. 2. 6. js"></sc ri pt>

S('p ' ).one('click' , function() {
alert($(this) .text());
}) ;
});
</script>
</head>
<body>
<p>Pri mei ro parágrafo</p>
<p>Segundo parágrafo</p>
<p>Terceiro parágrafo</p>
<p>Quarto parãgrafo</p>
.i) [arquivo-5.3b.html]
Para visualizar a diferença de funcionamenco, faça uma cópia do arquivo que

contém esse scripr e substitua one() por bi nd(). Carregue e página modificada e
clique várias vezes cada parágrafo.

se/etorjQuery.trigger(tipo [dados])
O manipulador de evenros triggerO permite que um evento vinculado a um seletor

seletorjQuery seja vinculado simultaneamente a um segundo seletorjQuery, sendo
possível fazer entrar em ação ambos os scripts com o evento ocorrendo somente
no seleror seJetorjQuery vinculado. No exemplo a seguir, foram projetados dois
botões. Um clique no bo tão um dispara o script um e um clique no botão dois
dispara o script dois e também o um, pois se utilizou o manipulado r de eventos
trigger() para vincular o script um aos botões um e dois.
Exemplo:
<style type="text/ css" media="al l">

span {color: red ;}
</Styl e>
<scri pt type="text/javasc ri pt" src=" . ./j query-1. 2. 6. j s"></ scri pt>
S('button:first') .cli ck(function() {
atual izaClique(S ('span:first ' )) ;
} );
S( ' button:last').cl ick(funct ion() {

S('button: fi rst'). trigger('click') ;
atual izaClique(S('span:l ast' ));
}) ;
f uncti on atualizaCl ique(o) {

var n = parseint(o.text(), O);
o.text(n + 1);
}
});
</scri pt>
</head>
<body>
<button type="button">Botão n.l</button>
<button type="button">Botão n.2</button>
<p>Soma dos cl iques nos botões 1 e 2 = <span>O</span></P>
<p>Cl iques somente no botão n.2 = <span>O</span></P>

Para iniciantes: a função atual izaCampo(o) funciona como um contador, pois

recebe um parâmetro, no exemplo dado, o valor contido em um elemento span,
annazena-<> em uma variável e acrescenta uma unidade. Os dois scripts rodam
a função atualizaCampo(o) a cada clique, reescrevendo no elemento span o
novo valor da variável n.
se/etorjOuery.unbind(tipo [dados])
O manipulad or de eventos unbind() fun ciona de forma inversa a bi nd () estudado

anteriormente, assim permi te desvincular um o u mais eventos que tenham sid os
vinculados ao se1etorjQuery.
5.4 Notas sobre eventos

O sistema de eventos na biblioceca jQuery foi construído em confo rmidade com
as Recomendações d o W 3C. Isto significa a no rmatização d o objeto evento e a
garantia d a devida passagem do evenco para seu respectivo manipulador, sem
necessidade d e fazer verificações do tipo wi ndow.event. Também se normati zaram
os alvos dos eventos e as propriedades para coordenadas das págin as page.x e
page. Y.
Ouu-a funcionalidade ligada a eventos é a disponibilização, na biblioteca, dos

métodos stopPropagati on() e preventDefaul t () .
event.type
Este método retorna uma su·ing que descreve a natureza do evento.
Exemplo:
S( 'a ' ).click(function(event) {
alert(event.type);
)};
Retorna:
"click"

event.target
Este método retorna o alvo do evento, ou seja, o elemento ao qual se atribuiu a

função de disparar o evento ou um de seus elementos-filho.
Exemplo:
$(' a[href=http: //1'/11\1. mauj or. com] ') . cl ick(functi on (event) {
alert(event.target);
return fa1se;
});
Retorna:
"http: //1wm. maujor. com/"
event.pageX/Y
Este método retorna as coordenadas do ponteiro do dispositivo apontador (por

exemplo: o mousc) cm relação ao documento.
Exemplo:
S('div').click(function(event) {
alert('Você clicou na posição: x = ' + event .pageX + " px, y = " + event.pageY
+' px');
}) ;
Retorna:
"As coordenadas do click"
Para visualizar os crês eventos descritos anteriormente, veja
event.preventDefault()
Este método impede o navegador de segui r o comportamento-padrão para a ação.

Por exemplo: ao clicar um link, o navegador é impedido de seguir para o endereço
do link, ou, ainda, ao clicar um botão de submissão de um formu lário, este não
é submetido. O equivalente JavaScript para esse método é: return fa l se.
Exemplo:
$('a(href=http://1'/l"v.maujor.com]').click(functi on(event) {
event.preventDefault();
}) ;

event.stopPropagation()
Esre método impede que o evento anexado a um elemento se propague para os
ancestrais do elemento. É conhecido na programação JavaScript como "efeito
bolha''. Por u-acar-se de um efeito que depende de situações particulares, apenas
se informará que existe a funcionalidade de se poder cancelar o efeito bolha
existente na biblioteca, ficando a critério do desenvolvedor usá-la quando estiver
diance de problemas causados por propagação indevida de eventos. A sintaxe
gera l é mostrada a seguir:
S('p ' ).click(function(event) {
event.stopPropagation();
//script vai aqui;
}) ;

CAPÍTULO 6
Efeitos
Neste capítulo, serão tratados os métodos para obtenção de efeitos. São os efei-
tos um dos objetivos do emprego de jQuery. As tarefas de esconder e revelar
conteúdos e fazer funcionar um menu de uma forma visualmente agradável com
transições suaves e surpreendentes são uma funcionalidade da linguagem que
cercamente irá enriquecer a experiência do usuário. E, com um planejamenro
bem feiro, você conseguirá implementar efeitos sem bloquear o acesso ou pre-
judicar a usabilidade.
A apresentação dos métodos para obtenção de efeitos mostrados neste capítulo

segue uma metodologia diferente da adotada nos capíru los anteriores. Assim
ocorreu porque os scripts que demonstram os efeitos são curtos e resolveu-se
reunir os efeitos de mesma natureza em um arquivo único. Essa metodologia ,
como vantagem adiciona l, irá possibilitar-lhe fazer a comparação entre os efeitos
consultando um único arquivo.
6.1 Efeitos básicos
seletorjQuery.show()
O efeito s how() revela abruptamente o elemento se1etorjQuery que tenha sido es-
condido anterio rmente, quer co m uso de script, quer com regra CSS.
Exemplo de si ntaxe:
$( 'div') . show()
173
Para tirar o máximo proveito de seus estudos, após conhecer todos os efeitos
básicos descritos neste capítulo, consulte os arquivos desenvolvidos para
demonstrar cada um deles, dispon1veis para download no site do livro.
seletorjQuery.show(velocidade [função])
O método show(ve1ocidade [ função]) causa o mesmo efeito criado com o método

anterior, porém o uso do parâmetro velocidade permite revelar suavemente o ele-
mento se7etorjQuery.
O parâmetro ve locidade admite três va lores definidos por palavra-chave, que

são: slow, normal e fast , para obtenção de velocidades de revelações lenrn, normal
e rápida respectivamente. De modo opcional, a velocidade pode ser definida por
um número representando o tempo de revelação em milissegundos.
O parâmetro função é opcional e permite definir uma função cuja execução

será desencadeada tão logo o efeito cermine.
Exemplos de sintaxes :
$('div') .show('sl ow ' )
ou
$(' di v'). show(lOOO)
ou
$('div' ) .show('fast ' , functi on() {
li seu script aqui;
}) ;
seletorjQuery.hide()
O método hideO causa o efeito contrário ao criado pelo método show(), escondendo
abruptamente o elemento se1etorjQuery qu e tenha sido revelado.
Exemplo de sincaxe:
$(' div' ) .hide()

Capitulo 6 • Efeitos 175
se/etorjQuery.hide(veloádade [função])
O m étodo hide( ve1ocidade [função]) ca usa o m esmo efeito criado p elo método
anterior, porém o u so do parâmetro velocidade p ermite esconder suavemente o
elemento se1etorjQuery.
O parâmetro ve locidade admite três valores d efinidos por palavras-chave, que

são: slow, normal e fast , para obtenção d e velocidades d e revelações lenta, normal
e rápida respectivamente. De modo opcional, a velocidade pode ser d efinida por
um número represen tando o tempo de revelação em milissegundos.
O parâ metro função é opc ional e perm ite definir u ma funçã o cuja execução
será desencadeada tão logo o efeito termine.
Exemplos de sintaxes:
S('div') .hi de('sl ow ' )
ou
$( 'di v' ) .hi de(1000)
ou
S( 'div' ) .hi de('fast ' , function() {
li seu script aqui;
});
seletorjQuery.toggle()
O método toggle() permite criar o efeito de alternância de visibilidade do conjunto

de elementos definido por se1etorjQuery. Os elementos invi síveis tornam-se visíveis
e vice-versa a cada di spa ro do evento.
Exemplo de sintaxe:
S('button' ) .cl ick(f unction() {
S('p ' ). toggle();
});
Cons ulte o arquivo referenciado a seguir, para ver todos os efeitos básicos
estudados anterio rnence em ação:
<styl e type="textl css" medi a="all">
div {width:200px; height:300px; margi n: 30px O;border :2px solid #OOO;color :#fff;
background:#fOO; display: none;}
<lstyl e>

<script type="text/javasc ript" src=" .. / jquery-1.2.6. js"></script>

<scri pt type=-"text/javasc ri pt">
S('button ' ) .eq(O).click(function() {
S('div'). show();
}) ;
S( ' button') .eq(l).click(function() {
S( ' div'). hide();
}) ;
S('button').eq(2).click(function() {
$('di v') .show('slow') ;
}) ;
S('button') .eq(3).click(function() {
S('div') .hide('slow' ) ;
}) ;
S( ' button ' ) .eq(4).click(function() {
$( ' di v') .show(3000);
}) ;
S('button') .eq(S).click(function() {
S('div'). hide(lSOO);
}) ;
S('button ' ) .eq(6).click(function() { //efei to toggle()
$(' p') . toggle();
});
} );
</script>
</head>
<bOdY>
<button type="button">Efei to show()</button>
<button type="button">Efei to hideO</button><br /><br />
<button type=" button">Efei to show(' s low' )</button>
<button t ype=" button">Efei to hide(' slow')</button><br /><br />
<button type=-" button">Efeito show(3000)</button>
<button type"'" button">Efei to hide(l SOO) </button><br /><br />
<button type="button">Efei to toggle()</but ton><br /><br /»
<diV>DIV em todo seu esplendor. </div>
<P style="di splay:none; width:300px ; background:#OfO;">
Clique seguidamente o botão Efeito toggl e.
</p>
.iJ [arquivo-6.1 a.html]

6.2 Efeitos corrediços
seletorjQuery.slideDown(velocidade [função])
O método para criar o efeito slideOownO destina-se a revelar suavemente o elemento

seJetorjQueryque renha se escondido anteriormente, fa zendo a transição de invisível
para visível por meio do aumento gradativo da altura do se1etorjQuery escondido.
A altura do elemenco vai sendo revelada de cima para baixo.
O parâmetro velocidade admite três valores definidos po r palavras-chave, que

são : slow, normal e fast, para obtenção das velocidades de revela ções lenta, normal
O parâmetro função é opcional e permite definir uma função cujo script entrará
em ação tão logo se letorjQuery seja revelado.
Exemplo d e sintaxe:
$( 'div'). slideDovm(' slow')
Primeiro conheça todos os efeitos corrediços a seguir e, depois, consulte a página

indicada, disponível para download no site do livro, para testá-los na prática.
seletorjQuery.slideUp(velocidade [função])
O método sl i deUp() destina-se a criar o efeito de esconder o elemento se1etorj-

Query que tenha se revelado anteriormente. A altura do elemento é escondida no
sentido de baixo para cima.
Essa animação apresenta o que parece ser um bug, pelo menos até a versão
atual da biblioteca. Quando se aplica o efeito em um ele mento para o qual se
tenha definido um paddi ng vertical, o efeito esconder ignora o padding como sendo
integrante da altura total do elemento. Isso causa um salto ao final da animação,
pois ao ser recol hida uma amplitude igual à altura do elemento menos o valor
do paddi ng, esce desaparece bruscamente. Na página conscance do sice do livro, que
demonsa·a esse efeito, mostra-se o suposto bug.

Para solucionar o bug, em vez de declarar um paddi ng para o elemento, crie um

di víntemo ao elemento e defina para ele margens verticais. Definir margens para
um container interno tem o mesmo efeito que definir paddi ng para o container
externo.
Exemplo de sintaxe:
$('div').slideUp( 'slow')
se/etorjQuery.slideTog gle(velocidade [função])
O método slideToggle() destina-se a causar um efeito de alternância de visibilidade

do conjunto de elementos definido por se1etorjQueryco m o uso de efeitos causados
por slideOoYm() e slideUP() . Os elementos invisíveis tornam-se visíveis e vice-versa,
alternadamente, a cada d isparo do evento.
Exemplo de sintaxe:
$( 'div').slideToggl e(1500)
Consul te o arquivo que contém o script mostrado a seguir para ver todos os
efeitos corrediços estudados anteriomenre em ação:
div {width:200px; height:300px; margi n:30px O; border:2px sol id #000;
color:#fff ; background:#fOO; di splay:none;}
.bug {height :140px; paddi ng:80px O;}
</style>
S('button') .eq(O).click(function() {
$('div') .eq(O) .slide0own('slow');
}) ;
S('button' ) .eq(l).cli ck(function() {
S('div') .eq (O).sli deUp( 'slow' ) ;
}) ;
S('button' ) .eq(2).cl ick (function() {
$(' .bug' ). slideDown( 'slow');
}) ;
S( 'button' ) .eq(3).click(function() {
$( ' .bug ' ). slideUp('slow');
}) j
S('button' ) .eq(4).cl ick(function() {

$( ' .alterna'). slideToggle(lSOO) ;
}) ;
});

</scri pt>
</head>
<body>
<button type=" button">Efei to sl i deDown(' slow') </button>
<button type="button">Efeito sli deUp('sl ow ' )</button><br /><br />
<button type="button">BUG slideD0·1m(' slow')</button>
<button type="button">BUG slideUp(' slow' )</button><br /><br />
<button type="button">Efei to sl i deToggl e(1500) </ button>
<div>DIV em todo seu esplendor.</ div>
<div class="bug">DIV em t odo seu esplendor.<br />
Com declaração de padding</diV>
<div class="alterna">Demonstração do efei to sl i deToggl e(lSOO).<br />
Cl ique seguidamente no botão Efeito slideToggle() . </diV>
6.3 Efeitos de opacidade

seletorjOuery.fadeln(velocidade [função])
O método fadeln () destina-se a criar o efeiro de revelar o elemento se1etorjQuery
que se tenha escondido anteriormente, fazendo a transição de invisível para vi-
sível por meio do aumento gradativo d a opaci dad e do se1etorjQuery escondido. O
elemento vai sendo revelado por mudança d e opacidade d e O (invisível) a 100%
(opaco ou visível).
O parâmetro velocidade admite três valores definidos por palavras-chave, que
são: slow, normal e fast, para obtenção de velocidades de revelações lenta, normal
O parâmerro função é opcional e permite d efinir uma função cujo script entrará
em ação tão logo se1etorjQuery seja revelado.
Exemplo de sintaxe:
$(' di v'). fadeln(' s low' )
seletorjOuery.fadeOut(velocidade [função])
O método fadeOut() d estina-se a criar o efeito de esconder o elemento se1etorjQuery
que esteja visível, fazendo a transição de visível para invisível por meio da dimi-
nuição gradativa da opacid ad e do seletorjQuery visível. O elemento va i send o es-
condido por mudança da o pacidade de 100% (opaco ou visível) a O (i nvisível).

se/etorjQuery.fadeTo(veloâdade opacidade [função] )
O método fadeToO destina-se a alterar as condições de visibilidade do elemento

se1etorjQuery, fazendo uma mudança gradativa da opacidade atual para a opaci-
dade definida no parâ meu-o opacidade. Esse parâmetro deve ser definido por um
número compreendido entre O e 1, sendo O invisível e 1 opaco.
Consulre o arquivo referenciado a seguir, para ver todos os efeitos de opacidade

estudados anreriomenre em ação.
div {width:lSOpx; height:lSOpx; position:absolute;left:30px; top:80px;
margin:30px O; border:2px solid #000; background:#OfO; display:none;}
.fadeto {display:block; background: red ; left:200px ;}
p {position :absol ute; width :l30px; left :210px; top :lOOpx;}
</styl e>
<scri pt type="text/j avas e ri pt" src=" .. / j query-1. 2. 6. js"></scri pt>
<script type•"text/javasc ript">
S('button' ) .eq(O).click(function() {
S('div' ) .eq (O). fadeln(lSOO);
}) ;
S('button') .eq(l).click(function() {
S('div').eq(O). fadeOut('slow');
}) ;
S('button' ) .eq(2).click(function() {
S(' div') .eq(l). fadeTo(lSOO, 0.3) ;
}) ;
S('button' ) .eq(3) .click(function() {
S('div') .eq(l). fadeTo(lSOO, 1);
}) ;
});
</scri pt>
</head>
<bOdY>
<p>Ops tem algo aqui ! Tudo que está atrás dest e di v
é revelado quando se diminui sua opacidade . :-) </p>
<button type="button">Efei to fadeln(lSOO) </button>
<button type="button">Efeito fadeOut('slow ' )</button><br /><br />
<button type="button">Efeito fadeTo(l SOO, 0.3)</button>
<button type="button">Efeito fadeTo(1500, 1)</button>
<div>Demonstração de fadeln()/fadeOut.</diV>
<div class="fadeto"></div>

6.4 Efeitos personalizados

seletorjQuery.animate(definições [velocidade] [aceleração] [função])
seletorjQuery.a ni mate(definições [opções])
O mécodo animate() perm ite-lhe criar animações personal izadas para o se1etorj-
Query. Conforme mostrado, exisrem duas sincaxes para esse método.
O princípio básico que rege o funcionamento desse método é o fato de que

somente propriedades CSS de valor n umérico são possíveis de serem animadas.
Por exemplo: você pode criar uma animação que faça um div crescer ou encolher
em largura ou a ltura, alterando gradativamente suas propriedades CSS, width ou
height. Contudo, com o uso desse método, não poderá criar uma animação que
altere gradativamente a cor d e fu ndo do div, pois a propriedade CSS background-
color não é numérica. Os valores, para as propriedades CSS a animar, configuradas
no parâmetro definições, são os valores finais da animação, isto é, a animação se
faz desde o valor corrente da propriedade até o valor definido. Por exemplo: se o
valor inicial da largura é width : 200px e você d efine em sua an imação personal izada
o parâmetro width: SOpx, trata-se de uma animação por encolhim ento.
A partir de jQuery versão 1.2, permite-se usar unidades CSS em e %(onde

aplicável). Além disso, os operadores de incremenco e decremento += e -= são
válidos para criar a nimações incrementais, como {left: '+=lOpx'}, que define uma
coordenada horizontal esquerd a gradativamente crescente em saltos de lüpx.
Existem vários plug-ins que permitem criar an imações, além das permitidas
por padrão pela biblioteca, como descrito anteriormente. Não é o escopo deste li-
vro exa minar tais plug-ins. Serão destacadas as animações-padrão que, em resu mo,
são aquelas que manipulam as propriedades top, left, wi dth, height e opacity, além
de outras possíveis de estilização numérica , como font-size e border-wi dth. Além de
valores numéricos, permite-se também especificar o valor das propriedades com
o uso de uma d as seguintes palavras-chave: hide show e toggle. Por exemplo:
S( 'div ') .click(function () {
S(this). animate(
{opacity:'toggle' ,
wi dth : 'hide'},
{duration:'2000 ' }
);
}) ;

O parâmetro velocidade é opcional e adm ite três va lores d efinidos por palavras-
chave, que são: slow, normal e fast , para obtenção de velocid ad es de animações lema,
norm al e rápida respectivamente. De modo opcional, a velocidade pode ser defi-
nida po r um número rep resentando o tem po da ani mação em milissegundos.
O parâme tro aceleração é opcional e requer o uso de plug-in para funcionar.

Esse parâmetro d efine como será a aceleração d a animação. O s valores linear e
swi ng são na ti vos.
O parâmetro função é opcional e permite defini r uma função cujo script entrará
em ação tão logo a animação termine.
Exemplo:
<script type="text/ javascri pt">

S('button:eq (O) ' ).click(function() {
S('div ') .animate(
{wi dth: ' 300px' ,
hei ght: ' 600px' ,
opaci ty:0.33,
border: ' lOpx dashed #fOO ' },
1500)
}) ;
});
</script>
</head>
<body>
<button type="button">Ani mar</button>
<diV></diV>
A sintaxe alternativa permite-lhe definir um parâmetro deno minado opções

que são objetos para a animação. Essa variante da sintaxe admite também definir
um a velocidade, uma aceleração, uma chamad a para a função a ser executada tão
logo a animação se complete e um parâmetro d enominad o queue que controla
o início d a animação. Nos exemplos práticos que serão escud ados na segu nda
parte do livro, o uso dessa sintaxe será mais bem abord ad o.

se/etorjQuery.stop()
O método stop() permire q ue você interrompa uma animação em andamento.
Exemplo:
<style type="text/css" media,,"all ">

div. interna {posi t ion :absolute ; wi dth:80px; hei ght: 80px ; border :2px solid #000;
background:#fOO; l eft:lOpx; top:lOOpx;}
</Styl e>
<scri pt type.."text/j avas e ri pt" src=" . ./j query-1. 2. 6. js"></scri pt>
S(document) .ready(funct ion() {
S( ' button: eq(O) ' ).cl i ck(function() {
S('di v') .animate({left: ' +=1000px'}, 8000);
}) ;
S('button:eq(l ) ' ) .cli ck(function() {
S('di v') .stop() ;
}) ;
S( ' button: eq(2) ' ).cl ick(function() {
S(' div' ) .animate({left : ' -=lOOOpx ' }, 8000);
}) ;
});
</se ri pt>
</head>
<body>
<button t ype=" button">Animar</button>
<button type=" button">Parar</button>
<button type=" button">Voltar</button>
<div class="i nterna"></div>

CAPÍTULO 7
Funções utilitárias
Neste capítulo, serão exam inadas as funções utilitárias disponíveis na biblioteca

jQuery. Uma função é dica utilitária quando desenvolvida para atender a neces-
sidades específicas de um projeto. Em geral, uma função uti litária, ao contrário
de um método jQuery, descina-se a manipular objetos j avaScript que não sejam
elementos do DOM ou realizar operações não específicas a objetos.
7.1 Introdução
1 os capítulos anter iores, estudaram-se os métodos jQuery. Denominou-se ge-
nericamente de métodos jQuery todos os métodos e fun ções possíve is de serem
aplicados a um conjunto de elementos do DOM. Por exemp lo: quando se estuda
o método para adicionar estilos aos parágrafos de um documento, mostra-se a
. .
smtaxe a seguir:
S('p ').css({propriedade: 'valor', propriedade: ' valor', ... })
O construtor SO selecio na um conjunto de elementos, no caso do exemplo

os parág rafos constantes da árvore do documento - o DOM-, e neles aplica as
regras CSS defin idas no método css().
Convém ressalta r a ca racterística de encadea mento própria da bibli oteca

jQuery que permite encadear métodos, unindo-os com um ponto (.). Na cadeia
formada pela união de métodos com um ponto, cada adição de um método retorna
um objeto pronto para receber novo mé todo, em um processo sem fim.
Outro aspecto importante a não esquecer é a característica de seleção múltipla

automática, isto é, a seleção feira pelo construtor SO compreende um conjunto
185
de elementos-alvo, sem necessidade de criar loops de seleção, como ocorre na

linguagem JavaScripc forma l.
Para fins de estudo, as funções utilitárias serão classificadas em dois grupos:
• funções utilitárias nativas da biblioteca jQuery;
• funções utilicárias personalizadas.
As funções utilitárias para uso personalizado dependem das particularidades

de cada desenvolvimenco e, por isso mesmo, fogem do escopo desce livro. Serão
enfatizadas as funções utilitárias nativas dajQueqt Contudo, ao fin al d o capítulo,
uma simples função utilitária personalizada será desenvolvida com o objetivo de
mostrar a técnica de criação de tais funções.
7.2 Flags para agentes de usuário

Tecnicamente, as ílags para agentes de usuário são variáve is e n ão propriamen-
te funções. Destin am-se a detectar informações sobre o navegador usado pelo
usuário.
O s scriprs de detecção das características do navegador foram amplamente

empregados em construção de sites, com a fina lidade ele tomar decisões ele como
servir cód igos em função do suporte oferecido por navegadores de diferentes
fabricantes.
Esta é uma prática em desuso segundo os modernos conceitos de desen-

volvimento. ! ão se irá discorrer longamente sobre as razões para evitar o uso
de scripts d e detecção, mas vale lembrar um dos princípios fundamentais dos
Padrões Web que estabelece a criação de códigos indepedentes de navegadores
e plataformas.
Então, é lícito perguntar: por que jQuery inclui em sua biblioteca essas fun-
ciona lidades de detecção? A resposta é simples: a ferramenta está disponível,
evite usá-la, esgote rodas as alternativas a seu uso, mas se seu projeto reveste-se
de condicionantes e características que justifiquem seu uso, utilize-as.
jQuery.browser
Compreende um conjunto de flags referentes à versão e à família do navegador.

As fiags são as relacionadas a segu ir.

Capítulo 7 • Funções utilitárias 187
Flag Descrição
msie Retoma t rue se o navegador é identificado como Microsoft Internet
Explorer.
mozilla Retoma true se o navegador é identificado como Firefox, Camino,
Necscape ou outro baseado no Mozi lla.
safari Retoma true se o navegador é idenrificado como Safari, OmniWeb
ou outro baseado no Safari.
opera Retorna true se o navegador é identificado como Opera.
version Retorna a versão da engine de renderização cio navegador.
Convém ressaltar que a dececção se faz para uma decerminada fam ília de
navegadores e não para um navegador específico. A detecção se faz por famílias
baseadas no pressuposco de que navegadores perrencemes a uma mesma família
possuem caracteríscicas idêncicas. A maioria dos navegadores modernos enqua-
dra-se em uma das quaa-o famílias citadas anceriormence.
A flag version d ececca a versão da engine de renderização e não a versão do

navegador, como pode parecer à primeira vista.
No exemplo a seguir, apresentamos um script para a dececção das flags versi on

e família do navegador:
<script type.."text/javasc ript" src=" .. / jquery-1. 2.6.js"></script>

S(' .versao').cl i ck(functi on() {
var SversaoNavegador = S.browser.version:
S( 'p' ).append('A versão da engine de renderização deste navegador é: <b>'
+ SversaoNavegador + '</b><br /> ');
if (jQuery.browser.mozilla) {
S('p').append('Este navegador pertence à familia: <b>Mozil l a</b><br />')}
else if (jQuery.browser.1sie) {
S('p').append('Este navegador pertence à familia:
<b>Mi crosoft Internet Explorer</b><br /> ')}
else if (jQuery.browser.safari) {
S('p' ) .append('Este navegador pertence à familia: <b>Safari</ b><br /> ')}
else if (jQuery.browser.opera) {
S('p').append('Este navegador pertence à familia: <b>Opera</b><br />' )
} else {
S('p ' ).append('Não foi possível i dentificar a que famí l ia pertence
este navegador .' )};
}) ;

$(' .reset ') .click(function () {

$(' p'). empty();
} );
});
</script>
</head>
<body>
<button type.. "button" class,."versao">Flags deste navegador</button>
<button type: "button" class.. "reset">Reset</button><br />
<P></ P>
jQuery.boxModel
Denomina-se Box lvlodel um modelo-padrão de renderização ou apresentação

visual de um box segundo a formatação CSS preconizada pelas recomendações
do W3C. Observe, n a figura 7.l, um diag rama esclar ecendo o Box Model.
Bordcr
raa<lml(
"
Lcft
Conteúdo'> ... height lligJH
- width .
,
Bottom
Figuro 7.1 - Box Model.
Neste diagra ma , destacou-se uma área mais interior deno minada área d os
conteúdos, cujas dim ensões (largura e altura) são definidas pelas propriedades
CSS vfidth e height. Segue-se uma área d eno minada enchimento, cuja espessu ra é
definida pela propriedade CSS paddi ng.
Em volta do enchimento, há uma borda cujas espessura e cor e cuj o tipo são
definidos pela propriedade CSS border. Finalmente, há um espaço d enominad o
margem, com espessura d efinida pela propriedade CSS margi n.

A área da margem é sempre cransparencc. As dimensões d a área de conteúdos

dependem de uma série de fatores, entre eles, definição explícita de dimensões,
natureza e tipo de conteúdo. A propriedade CSS background defin e o fundo a ser
aplicado nas áreas de conteúdos, de ench imento e d a borda.
Este é o modelo-padrão do \V3C. Contudo, os navegadores Internet Explorer,

versões para Windows anteriores à versão 6 e também as versões 6 e 7, quando
renderizam em modo kirks, não seguem o modelo-padrão e adoram um a forma -
tação conhecida como "Box Model quebrado''.
Diz-se que um navegador renderiza em modo kirks quando da marcação HTML

não consta a declaração de DOCTYPE ou há uma declaração de DOCTYPE em
desacordo com aquelas padronizadas pelo W3C. Em oposição ao modo kirks,
há a chamada renderização em modo standard.
O Box Model quebrado considera as dimensões CSS wi dth e height como cocais,
ou seja, nelas escâo incluídos os valores de padding e border. As margens continu am
exteriores ao box.
Observe, na figura 7.2, um diagra ma dos dois Box lvlodels.
\la.r~io
Bordcr
P!litrl ine
•
("ontcÍldo~ •..
Lcfr
BOX MODEL STANDARD
, vlittth '
'\.la~in
Uorclcr
l'.1ddi11R
Conteúdo~ ...
Lcfr BOX MODEL QUEBRADO Righ r
Dottom
figuro 7.2 - Box Models standard e quebrado.

No exemplo a seguir, há um sc ript para a detecção do Box Modcl adorad o

pelo navegador:
<scri pt type="text/ javasc ri pt" src=" . . / j query-1. 2. 6. js"></scrí pt>

<scri pt type="text/ javasc ri pt">
S(' .versao') .click(functi on() {
if (jQuery.boxModel == true) {
S('p').append(' Este navegador adota o Box Model: <b>Standard</b>. ' )}
el se if (jQuery.boxModel == false) {
$('p') .append( 'Este navegador adota o Box Model: <b>Quebrado</b> . ' )
} else {
S('p') .append('Não foi possível identificar o Box Model adotado por este
navegador. ' )};
}) ;
S(' . reset' ) .clíck(funct íon() {

S(' p') .empty();
} );
});
</se ri pt>
</head>
<body>
<button type="button" class="versao">Box Model deste navegador</button>
<button type=" button" cl ass=" reset"> Reset</button><br / >
<P></p>
Faça uma cópia do arquivo-7.2b. html mostrado no exemplo e retire a d eclaração

de DO CTYPE d a marcação. Visualize a cópia em qualquer versão d o Internet
Explorer, rode o script de detecção do Box Model e observe o va lor retornado
para o Box Model.
7.3 Operações com arrays e objetos

jQuery.each(objeto função(chaveou índice valor))
Esta função utilitária permite fazer interações tanto por um conjunto de elemen-
tos da árvore do documenco como pelos elementos de um array. O parâmetro
objeto define uma coleção d e objetos ou um array no qual será feira a interação e
o parâmetro função d efin e a ação sobre cada um dos itens da interação.

Esta função difere do método each() estudado em [C2 52.l ], pois enquanto
cal método faz interações exclusivamente em objetos jQuery, esra fução utilitária
tem uma abrangência mais ampla, permitindo interação em qualquer enridade
da linguagem, incluindo arrays.
O parâmetro função admite dois parâmetros: o primeiro parâmetro é uma chave

(key), no caso de interações por objetos, ou um índice (índex), no caso de interações
por arrays, e o segundo parâmetro, o valor da chave ou índice.
Para exemplificar, será reescrito o script para detecção da versão e família do

navegador desenvolvido no arquivo-7. 2a.html mostrado anteriormente. Nesse script,
utiliza-se uma série de métodos condicionais para testar a família do navegador.
Usar a função each() fornece uma solução bem mais elegante e concisa.
Assim, aplica-se interação no objeto jQuery.broviser que retomará os pares versão:

número e família :booleano true/ false.
Exemplo:
$(' .versao') .click(function() {
jQuery. each(jQuery.browser, function(i, val) {
S('p').append(i + ' : <b>' + val + ' </b><br /> ' );
});
}) ;
S(' . reset' ) .click(function() {
$(' p') .empty();
}) ;
});
</script>
</head>
<body>
<button type="button" class="versao">Flags deste navegador</button>
<button type="button" class="reset">Reset</button><br />
<P></p>

jQuery.grep(array função( valor índice)[inverter])
Esra função permite fazer interações pelos e lementos de um array e filu-á-los. O

parâmetro array define o array no qual será feira a interação e o parâmetro função
define uma ação de filtragem dos elementos do array.
O parâmetro função admire dois parâmetros: o primeiro parâmetro é o valor

de cada elemento do array e o segundo parâmeu-o, seu respectivo índice . Note
que esses dois parâmetros estão em ordem inversa àqueles do método each(),
escudado em [C2 52.1).
O parâmeu-o inverter é facultativo e booleano, sendo o valor-padrão fal se .

Quando definido para t rue, a função retorna os valores fa lsos do filtro definido
na função.
Para exemplificar, considere u m array cujos elmencos são números e aplique

nele a função jQuery .grepO em quatro etapas sucessivas, com a finalidade de melhor
esclarecer seu funcionamento. As erapas sugeridas são as seguintes:
• definir um array de números;
• excluir do array as ocorrências do valor 3;
• no array resu ltante, exclui r as ocorrências entre os índices 2 e 4;
• no array resultante, excluir as ocorrências d e valores maiores que 7 e o

índice 2.
Exemplo:
<scri pt type.."text/javasc ri pt" src.." .. / j query-1. 2. 6. js"></scri pt>

$(' .versao'). cl ick(function() {
var arr = [ 4, 3, 1, 9, 6, 8, O, 2, 7, 3, 4, 8, 7, 1, 9 ) ;
S('#um').append( ' <p>' + arr.join('- ') + '</p> ' );
arr = jQuery.grep(arr , function(val, i) {
return (val l= 3);
});
S('#um').append('<P>' + arr.join('- ') + '</p>');
arr = jQuery .grep(arr , function(val , i) {
return (i < 2 11 i > 4)
}) ;
S('#um') .append('<p>' + arr.join('- ') + '</p>' );
arr = jQuery.grep(arr, function(val , i) {

return (val <= 7 && i != 2)

}) ;
S( ' #um') .append( ' <p>' + arr . join('- ') + ' </ p>' );
}) ;
S( ' .reset').click(f unction()

S( ' #um').empty();
}) ;
});
</ scri pt>
</head>
<body>
<button type=" button" cl ass="versao"> jQuery. grep()</button>
<but t on type=" button" cl ass=" reset">Reset</button><br />
<div i d="um"></diV>
jQuery.makeArray(objero)
Esta função transforma qualquer conjunto de objetos em um array. O método

mostrado a seguir coleta o conteúdo de todos os d ivs do documento e cria um
array cujos elemen tos são esses conteúdos.
var arr = jQuery. make.Array (' div')
É improvável que você prec ise usa r essa função utilitár ia uma vez que a bi-
blioteca jQuery dela se uti liza nativamente. Lembre-se de que todos os objetos
jQuery retornam um conjunto de elementos.
jQuery.map(array função(valor índice))
Esta função permite mapear os elementos de um array e co nstruir, com base

neles, u m novo array. O parâmetro array defin e o array a mapear e o parâ metro
função, uma operação sobre os elementos mapeados com o objetivo de obter os
elementos do novo array.
O parâmetro função admire dois parâmetros: o primeiro parâmetro é o valor de

cada elemento do array e o segundo parâmerro, seu respectivo índice.
No exemplo a seguir, há u m array cujos elementos são letras do alfabeto e a

partir dele se construirá um novo array em três etapas, conforme d iscriminadas
a segui r:

• definir um array de lecras minúsculas;
• mapea r e construir um novo array alterando as letras para maiúscu las e

acresenrando o índice a cada elemento;
• mapear o array resu lranre e consrrui rum novo array cujos elementos serão
acrescidos de um sinal asterisco(•) irnediacamenre seguido pela divisão do
índice do elemento por cinco.
Exemplo:

$(' .versao').click(function() {
var arr =[
'e' , 'g' ' ' h' , ' j ' , 'v' , 'a' , ' j ' , 'm ' , 'e' ] ;
S('div' ) .append( '<p>' + arr .join(' - ' ) + ' </p>');
arr = jQuery.llêlp(arr , funct ion(val, i) {

return (val . toUpperCase() + i*3);
}) ;
S('div').append( ' <p>' + arr .join(' - ') + ' </p>');
arr = jQuery .llêlp(arr, function(val, i) {

return (val + ' * ' + (i/5))
}) ;
S('div').append( ' <p>' + arr.join(' - ') + ' </p>') ;
}) ;
$( ' . reset' ) .cl i ck(funct ion() {

S('div' ) .empty();
}) ;
}) ;
</se ri pt>
</head>
<body>
<button type,,,"button" cl ass,,,"versao">jQuery. map()</ button>
<button type="button" class="reset">Reset</ button><br />
<div></diV>

jQuery.inArray(valor array)
Esra função permite inspecionar os elementos de um array e verificar se um

decerminado elemenro a ele percence.
O parâmetro valor é o elemento do array cuja existência se quer verificar e o

segundo parâmecro, array, é o nome do array a inspecionar.
O va lor retornado é o índice da primeira oco rrência do e lemenco pesquisa-

do, caso seja encon trado no array. Caso não seja enco ntrad o, será retornado o
número -1 (u m nega tivo).
Exemplo:

S(document), ready(function() {
S(' .versao') .click(functi on() {
var arr "' [ 'site', 'maujor ' , 'h', 2, ' jquery' , 105, 'l eitor' , 'xpto ' ];
S(' di v' ) .append( ' <p>' + arr.join(', ') + '</p>' );
var resUm = jQuery.inArray(' maujor', arr)

S('div' ).awend('<p>Procura por maujor resultou índice: <b>' + resUn + '</b></p>');
var resOoi s "' jQuery.inArray(lOS, arr)

S('div').append('<p>Procura por 105 resultou índice: <b> ' + resDois + '</b></p> ');
var resTres = jQuery .inArray( ' LEITOR ', arr)

S('div').awend('<p>Procura por LEITOO resultou índice: <b>' + resTres + '</b></p>') ;
$( ' .reset' ) .click(function() {

S(' di v'). e.mpty() ;
}) ;
}) ;
}) ;
</script>
</head>
<body>
<button type="button" class="versao">jQuery. inArray()</button>
<button type=" button" e1ass=" reset">Reset</button><br />
<div></di v>
.iJ [arquivo-7.3d.html]

jQuery.unique(array)
Esra função remove os elem entos qu e tenham s ido anteriorm ente duplicados
(ou clonados) e m um array constituído de elem entos da árvore do documento
e retorna o array sem as duplicaras.
O parâme tro array é o array a inspecionar, retirado da árvore do documento.

Essa função é d e uso restrito e provavelmente você não irá ucilizá-la em seus
projetos de d esenvolvimento de s ites.A exe mplificação requer o desenvolvimento
de marcação e script bastante específicos e, te ndo em visrn o pouco valor prático
retornado em um exemplo, limitamo-nos apenas a citar a função.
7.4 Teste de função
jQuery.isFunction(objeto)
Es ta função permite inspecionar um obje to qualquer passado no parâmetro objeto

e re torna true se o objeto é uma função, caso contrário re torna fa l se.
Exemplo :

S(' .versao').click(function() {
function maujor() {} ;
var objetos = [ maujor, 'si te ' , null, fal se, 'div', function() {} , 105 ];
S('div').append('<P>' + objetos.join(', ') + '</ p>' );
jQuery.each(objetos, function(i) {
var resultado= jQuery. isFunction(objetos[i] );
S('span: eq('+ i +' )' ) . html( ' <b>' +resultado+ '</b>');
}) ;
$( ' .reset').click(function() {
S('div, span ').empt y();
}) ;
}) ;
} );
</ se ri pt>
</head>

<hody>
<button type="button" cl ass.."versao"> jQuery. i sFunction() </button>
<button type="button" class="reset"> Reset</button><br />
<di V></di V>
<Span></span>
<span></span>
<span></span>
<span></span>
<Span></span>
<span></span>
<span></span>
7.5 Operação com string
jQuery.trim(string)
Esta fu nção remove os espaços em branco existentes antes e depois de uma string.
O parâmetro string é a string contendo os espaços a remover.
Exemplo:

var mi nhaString = " Foi lançado o livro jQuery do Maujor . " ·'
alert ('String antes do t rim :\ n\ n''' + minhaString + ' '' ' );
mi nhaStri ng = jQuery.tri m(minhaStri ng) ;

alert ('String depois do trim:\n\n''' + minhaSt ring + '''');
})
});
</script>
</head>
<body>
<button type=" button" >jQu ery. t ri m() </button>
.iJ [arquivo-7.Sa.html]

7.6 Funções utilitárias personalizadas

Funções utilitárias personalizadas são aquelas criadas pelo desenvolvedor para
suprir necessidades específicas de um determinado projeto ou projetos. Concei-
tualmente, pode-se dizer que um conjunto de funções utilitárias personalizad as
conscicui uma biblioteca particular que o desenvolvedor emprega para sim plificar
a rea lização de tarefas repetitivas em seu projeto.
Nes ce icem do capítulo, será criada uma função utilitária simples, com o ob-
jetivo de mostrar a técnica envolvida no desenvolvimento de tais funções, para
o emprego em conj unto com a bibl ioteca jQuery.
Sabe-se que o alias da biblioteca jQuery é S e também que vá rias outras

bibliotecas o emprega m. Em um desenvolvimento que uti lize exclusivamente a
biblioteca jQucry, é seguro usar esse alias na sintaxe dos métodos, sem prever
mecanismos adicionais para prevenir conflitos.
Mes mo que você esteja desenvolvendo seu projero com exclusividade de uso
para a biblioteca jQuery, é de boa prática prevenir conflitos, pois nada garante
que futuramente seu proj eto venha a ser atualizado ou expandido e você ou ou-
tro desenvolvedo r tenha que implantar uma outra biblioteca no projeto. Adoce
como regra não confiar no uso do alias $ sem um mecanismo de prevenção de
conflitos.
O primeiro mecanismo é substicuir o alias $por jQuery. Por exemplo:
$. isFunction() é substituído por jQuery. isFunction().
Em pequenos scriprs, essa solução é satisfatória , conr.udo, em scripts maiores,

a grande quantidade de substituições de S por jQuery acaba por despender tempo,
aumentar o trabalho de digitação e complicar o código.
O segundo mecanismo, para não perder a sim plicidade do alias s, consiste

no uso do método S.noConílictO estudado em [C2 52.1 1.
7.6.1 Sintaxe geral

Observe a fun ção mostrada que se destina a criar uma caixa de alerta contendo
o texto passado no parâ metro alerta:
$.al erta = functi on(alerta) {
alert(alerta);
}

Traca-se de uma fun ção utili tária muito simples, d estinada a ser usada co m a
biblioreca jQuery, mas pocencialmeme conflicante com ou eras bibliotecas. Veja a
segu ir duas formas de chamada para essa função:
<scri pt type="textljavasc ri pt" src.." .. l j query-1. 2. 6. js"><lscri pt>

<scri pt type.."textl j avas e ri pt ">
S.alerta = function(texto) {
alert(texto);
}
S( 'button:eq(O) ' ) .cli ck(function() {

S.alerta('Alerta com uso de $.alerta');
});
S('button:eq(l) ' ) .click(function() {

jQuery.alerta('Alerta com uso de jQuery.alerta') ;
}) ;
}) ;
<lscript>
<lhead>
<body>
<button type: "button">S .alerta</button>
<button type.."button">jQuery.alerta</button>
,i) [arquivo-7.6.la.html]
A primeira forma d e chamada da função utiliza a sintaxe S. alerta e é poten-

cialmente co nflitante; a segunda forma é mais segu ra e evita conflitos usando
jQuery.alerta. Esse simples exemplo mostra na prática o uso d as duas sintaxes d e
chamad a d e uma função jQuery.
Mas, co mo usar o alias ssem o risco de conflitos? Seria ó timo se isso fosse pos-
sível, n ão é mesmo? E é possível. A sintaxe javaScript permice passar jQuery como
se fosse um parâmetro d e substitu ição ao a lias$ conforme mostrado a seguir:
(function (S) {
li Aqui vai o scri pt da função personalizada
})(jQuery);
Adotando essa sintaxe para escrever a f unção, h averá segura nça de qu e o alias
S não será usu rpado por outras bibliotecas.

A fu nção $.alerta deverá ser reeescrica assim:

(funct ion($) {
$.alerta = functi on(textoAlerta) {
al ert(textoAl erta) ;
}
})(jQuery) ;
7.6.2 Funçao s.corTexto

Para sedimencar os conceitos d e criação d e fu nções p ersonali zad as, será d esen-
vo lvida como exemplo uma fun ção d enom inada S.corTexto, destinada a mudar a
cor d o texto d e elemen tos em u ma pági na web.
Em uma primeira etapa, cria-se a fun ção pa ra muda r a cor d e textos de pa-
rágrafos e, a seguir, aperfeiçoa-se a função para mudar seletivamente a cor d e
outros elementos da página.
N ão h á preocupação com o valo r p rá tico d a f un ção, uma vez. q ue o objetivo

é exemplificar conceitos d e criação de funções utilitárias.
Observe o código a seguir:

1. (function(S) {
2. S. corTexto = function(e , cor) {
3. var el = document .getEl ementsByTagName(e);
4. for (var i = O; i < el. length; i++) {
5. el [i ] .styl e. color = cor;
6. }
7. }
8. })(j Query) ;
Código comentad o:
Li nhas 1 e8 A fu nção está contida denrro de function(S) , descacada em negrito,
conforme a sintaxe estudada no item anterior.
Li nha 2 A função admite o parâ metro e, que define o elemento, e opa-
râmetro cor, que define a cor a ser adotada para o elemento.
Linha 3 Cria-se urna variável denominada e1que armazena,ern um array,
todos os elementos e existentes na página.
Lin ha 4 Cria-se um loop para percorrer os elementos armazenados na
variável el.
Lin ha 5 Aplica-se um a regra de estilo defin indo a cor passada no parâ-
metro cor para todos os elementos el.

Tal função está pronta para uso, conforme mosrrada a seguir:

(function(S) {
$.corTexto = function(e , cor) {
var el = document.getElementsByTagName(e);
for (var i =O; i < el. length; i++) {
el[i ] .style.color =cor;
}
}
}) (jQuery);

S.corTexto('p', '#ffOOOO');
}) ;
jQuery.corTexto('p', '#OOODff') ;
}):
S('button:eq(2) ' ).click(function() {
S.corTexto('p', 'IOOccOO');
}) i
S( ' button:eq(3) ' ).click(function() {
jQuery.corTexto('p ', '');
}) ;
});
</script>
</head>
<body>
<span>Escolha uma cor para os parágrafos :</span><br />
<button type="button''>Azu 1</but ton>
<button type=" button">Verde</button>
<button type:"button">Default</button>
<p>Parágrafo um</p>
<P> Parágrafo doi s</p>
<P> Parágrafo três</ p>
.i:J [arquivo-7.6.2a.html]
Tendo entendido e consu ltado o arqu ivo que demonstra o funcionamento

dessa função, calvez você esteja se questionando do porquê de todo este trabalho
se se pode usar simplesmente S('p').css('color ', '#xxxxxx') com um valor #xxxxxx
para cada um dos botões de mudança de cor?

É verdad e. Se a função terminasse aqui, não reria valor práúco algum, pois
se limitou a replicar com mais código um método nativo. E funções utilitárias
não se destinam a substitui r métodos nativos, e sim complem entá-los ou suprir
suas fa ltas.
Assim sendo, adicione cerra flexibilidade a essa função, justificando sua criação,
ainda que de uso limitado, pois como se disse, o objetivo é mostrar a sintaxe e
fundamentos de criação de fun ções nativas.
Que cal se em vez de clicar um botão para mudar a cor dos parágrafos, você
úvesse um menu de seleção de cores de modo que roda vez que o usuário sele-
cionasse uma cor, houvese m udança sem necessid ade de cliques?
Retire os botões da página e coloque um menu de opções de cores, conforme

mostrado a seguir:
<formaction='"' method="">
<label>Escolha uma cor para os parágrafos<br />
<select i d:"selecionaCor">
<Option value="#999999">Default</option>
<option value="#FFOOOO">Vermelha</option>
<Option value="#OOOOFF">Azul </option>
<option value="#OOCCOO">Verde</option>
</sel ect>
</labeh
</ form>
N ão há muito o que comentar sobre a marcação do menu de seleção. Note

a definição do id="selecionaCor" para o elemento select e a opção de cor de fau lc
1999999, supond o que esta é a cor-padrão adorada para os parágrafos da página
e definida por regra CSS.
Nessa nova solução, a cor será coletada do menu de seleção e não mais passada
como um parâmetro da função, como era na solução anterior. Assim, tal fun ção
terá apenas o parâmetro el e será necessár io informar qual fo i a cor escolhida
pelo usuá rio no pró prio corpo da função.
Observe as modificações inrroduzidas na fun ção :

1. (function(S) {
2. S.corTexto = function(e) {
3. var selecao = document . getEl ementByid(' selecionaCor') ;
4. var indiceSelecao = selecao .selectedlndex;
5. sel = selecao.options[indiceSelecao] .val ue ;
6. var el = document .getElementsByTagName(e);

7. for (var i = O; i < el. length; itt) {

8. el [i] .style.color " sel;
9. }
10. }
11. }) (jQue ry);
Cód igo comentado:

Linha 2 A função req uer apenas um parâmetro, já que a cor será passada
pelo menu de seleção.
Lin ha 3 Cria-se uma variável denominada selecao que armazena o elemento
select com id="selecionaCor" .
Linha 4 Recol he-se o índice da cor selecionada na variável indi ceSelecao.
Lin ha 5 Armazena-se a cor escolhida na variável sel .
Linh a 8 Jnforma-se que a cor a ser aplicada é aquela armazenada na variável
sel , que, por sua vez, foi a escolh ida pelo usuá rio.
Nessa nova solução, cão logo o usuário escolha a cor, esta será automaticamente
aplicada aos parágrafos, sem necessid ade de clicar um botão.
A seguir, o script completo dessa solu ção:

p {color:#999;}
</style>
<scri pt type="text/javasc ri pt" src=" .. / j query-1. 2. 6. js"></scrí pt>
(function(S) {
$.corTexto = function(e) {
var selecao = document.getEl ementByld('selecionaCor');
var indiceSelecao = selecao .selectedlndex;
sel = selecao.options [indi ceSelecao].val ue;
var el = document .getElementsByTagName(e);
for (var i =O; i < el.length; i++) {
el[i ].style .color = sel ;
}
}
})(jQuery);
$('#selecionaCor').change(function() {
S.corTexto('p') ;
}) ;
});
</script>
</head>

<hody>
<form action=-"" method="">
<select id="selecionaCor">
<opti on va lue="#999999''>Defaul t</opti on>
<Option value.. "#FFOOOO">Vermelha</option>
<option value.. "#OOOOFF">Azul </option>
<option value.. "#OOCCOO">Verde</option>
</sel ect></label >
</form>
<P>Parágrafo um</P>
<p>Parágrafo dois</P>
<P> Parágrafo três</P>
Você seria capaz de dizer se os resu ltados obtidos com essa solução podem ser
conseguidos com métodos nativos do jQuery?Tal desafio foi lançado como exercício
prático. Encontro u uma solução? Poste na :lrea de come ntários do site d o livro.
Que ca l incremenrar mais um pouco essa fun ção permitindo que o usuário
esco lha, além da cor, os elementos que devam ser a fetados pela escolha?
As modificações a introduzir no script são as descritas a seguir.
• C riar botões pa ra selecionar cada elemento a mud ar de cor e um botão
para selecionar todos os elementos a mudar de cor:
<but ton type.. "button">Parág ra fos</button>
<button type="button">Cabeçalhos</button>
<button type="button">Li stas</button>
<button type="button">Tudo</button>
• Criar nova marcação para a página que co ntém os elementos a mudar de

cor:
<p>Parágrafo um</p>
<p>Parágrafo dois</ P>
<P>Parágrafo t rês</P>
<Uh
<li>Item um</li>
<li>ltem dois</l i>
<li>ltem t rês</li>
</Uh
<p>Parágrafo</p>

• Retirar o disparador de mudança de cor do elemento select e atribuí-lo aos

botões:
S('button:eq(O) ' ) .click(function() {
S.corTexto('p' );
}) i
S('button:eq(l) ' ) .cl ick(function() {
jQuery.corTexto( 'h2') ;
}) ;
S( ' button:eq(2) ' ).cl i ck(function() {
S.corTexto('li');
}) ;
S(' button:eq (3)') .click(function() {
jQuery.corTexto('~') ;
}) ;
Com essas modificações, chega-se a uma terceira solução para a função per-
sona lizada cujo funcionamento pode ser visco no arqu ivo a seguir.
,iJ [arquivo-7.6.2c.html]
Modifique tal função criando outro elemento select para permi tir ao usuário
escolher o elemento a m udar d e cor, ta l como se fez para a escolha da cor. Esse
novo sel ect substituirá os borões de seleção dos elementos. A técnica é idêntica
à adotada anteriormente para o select de cores e a mod ificação em relação ao
scripc anterior é mostrada a segu ir:

(function(S) {
S.corTexto = function() {
var selecaoCor = document.getElementByld( 'selecionaCor ' );
var indiceSelecaoCor = selecaoCor.selectedlndex;
var selCor = selecaoCor.options[indiceSelecaoCor].value;
var se l ecaoEl emento = document . getEl ernentByld ( 'sel ecionaEl emento ' );
var indiceSelecaoElernento = selecaoEl ernento.sel ectedlndex;
var selElernento = selecaoElemento.options [indiceSelecaoElernento).value;
var el = document.getElementsByTagName(selElernento) ;
for (var i =O; i < el .length; i++) {
el[i ].style .col or = selCor;
}
}
}) (jQuery);

S('button') . click(function()
S. corTexto();
});
} );
.i) [arquivo-7.6.2d.html)
7.6.2.1 Melhorando a função s.corTexto
Como você deve ter acompanhado no desenvolvimento d a função personalizada

$. corTexto, extraiu-se o va lor que o usuário entrou no campo de seleção para a
cor, em três etapas distintas a saber:
• uso do método document.getEle1tentByld para selecionar o elemento select;
• uso de selectlndex para capturar o índice da seleção;
• uso de value para capturar o valor selecionado pelo usuário.
Para a seleção do elemento, a técnica usada foi idêntica.
Urna amí lise atenta da solução proposta mostra que esta é fa lha e deve ser
melhorada. Note qu e se utilizou um método javaScripr sem testar seu suporte
pelo navegador. As boas práticas de programação recomendam a segu inte veri-
ficação para o método usado:
i f ( !document.getEl ementByid) {
return fa l se;
}
Isto assegura que o navegador não tentará executar o código caso não ofereça
su porre para o método. Além disso, continu a-se tal desenvolvimen co usando
métodos javaScript não específi cos à biblioteca jQuery.
Realizou-se tal ação propositadamente, pois é comum com desenvolvedores

familiari zados com javaScript comerer o equívoco de inserir métodos tradicio-
nalmente usados naqu ela programação, sem se preocupar com a portabiliade
e o suporte adeq uado para o método. Quanto mais fam iliarizado estiver com a
biblioteca, tanto mais fácil será encontrar a alternativa para o cód igo JavaScripc
não jQuery. lsto não significa que você está proibido de usar a sintaxe da lingua-
gem JavaScript em seus desenvolvimentos com a biblioteca jQuery, ao contrário,
use sempre que necessário, mas assegure-se de não estar poluindo seus scripts
com métodos em desacordo com a filosofia da biblioteca.

Você se lembra do seletor : se l ected escudado em [C2 $2.2.9)? e do método va l O

escud ado em fC3 535]? Pois bem, essas duas funcionalidades da biblioteca, além
de compactar o código da função personalizada , oferecem uma solução bem mais
robusca e em conformidade com os fundamencos de jQuery, sem a necessidade
de verifica r compatibilidades.
Veja a seguir a alternativa para a segunda ecapa de desenvolvimento da função.

O arquivo arquivo-7.6.2b.html que representa tal etapa foi reescrito como mostrado
a seguir:
<style t ype="text/css" media="all ">

p {col or: t/999;}
</style>
<scri pt type="text/javasc ri pt" src=" .. / j query-1. 2. 6. js"></sc ri pt>
S('select').change(function() {
S('option:selected').each(function() {
S('p ' ).css( ' color ' , $(this) .val()) ;
}) ;
}) ;
});
</scri pt>
</head>
<body>
<formaction="" method='"'>
<select id.."selecionaCor">
<Option value="#999999">Default</option>
<option va lue.. "#FFOOOO">Vermelha</option>
<opti on va lue.. "#OOOOFF">Azul </option>
<Option value="#OOCCOO">Ve rde</option>
</sel ect>
</labeh
</form>
<p> Parágrafo um</ p>
<p> Parágrafo dois</P>
<p> Parágrafo t rês</P>
~ [arquivo-7.6.2. la.html)

E, a seguir, a alternativa para a terceira etapa de desenvolvi men to da função.

O arquivo arquivo-7 . 6. 2c . htrnl que represenca cal etapa foi reescriro como mostrado
a segu ir:
<style type="text/ css" media.."all ">

* {color:#999;}
p {margin:2px O;}
form {di splay :i nline;}
select {wi dth :l05px;}
</styl e>
(function(S) {
S('select').change(function() {
S('option:sel ected' ) .each(function() {
var cor= S(this). val ();
S.corTexto = function(e) {
S(e) .css('color', cor);
}
}) ;
}) ;
})(jQuery);
S( ' button:eq(O) ' ).click(function() {
$.corTexto( ' p' ) ;
}) ;
jQuery.corTexto('h2');
}) ;
S('button :eq(2) ' ) .click(function() {
$.corTexto( ' li ' );
}) ;
S('button:eq(3)').click(function() {
jQuery.corTexto( '*' );
});
} );
</script>
</head>
<bOdY>
<formaction=" " method=" ">
<l abel >Escolha uma cor<br />
<select id="selecionaCor">
<Opt ion value="#999999">0efaul t</option>
<Opti on va lue="#FFOOOO">Vermelha</option>

<option value="#OOOOFF">Azul </option>

<option value.."#OOCCOO">Verde</option>
<Opti on va lue,,"#FFOOFF">Pi nk</Option>
</sel ect>
</labeh
</form>
<button type="button">Parágrafos</button>
<button type="button">Cabeçalhos</button>
<button type="button">Listas</button>
<button type="button">Tudo</button>
<h2>Cabeçalho nivel 2</h2>
<p>Parágrafo um</P>
<P>Parágrafo dois</P>
<p>Parágrafo três</p>
<Uh
<1 i> Item um</1 i >
<li>Item dois</l i >
<li>Item três</l i >
</uh
<P> Parágrafo</p>
.iJ [arquivo-7.6.2.lb.html)
A função pode ser aperfeiçoada ainda mais e ganhar funcionalidades ad icio-
nais, mas tal exemplo será finalizado aqui, pois já cumpriu o objetivo de mostrar
as técnicas de criação de funções personalizadas. Ressalta-se que a função criada
manipula elementos do DOM, mas como já se disse, é possível manipular obje-
tos não pertencentes ao DOM com funções personalizadas. Que tal desenvolver
uma função capaz de manipular o objeto Date() e personalizar a apresentação de
datas em uma página web?

Parte li
jQuery na prática
A partir do capírulo 8, inicia-se a segunda pane deste livro que é dedicada a apli-
cação prática dos conceitos e fundarnencos estudados na primeira parte. Todos
os exemplos desenvolvidos são comentados e estão disponíveis para download
no site do livro. Recomenda-se que o estudo dos casos mostrados seja sempre
complementado com a visualização do respectivo arquivo.
211
'vlatenal com '111 J& autorais
CAPÍTULO 8
Animações básicas
Neste capítulo, serão apresentadas algumas animações básicas da biblioteca

jQuery. Para cada exemplo, serão mostradas e comentadas a marcação HTML
e as regras CSS aplicadas, pois é importante que a aplicação de qualquer efeito
seja fe ita em documentos escrururados em conformidade com os padrões do
W3C Separar a marcação HTML da apresentação é igualmente impo rtante e
assim se enfatizarão, também, as regras CSS, comentando-as sempre que se julgar
necessário.
8.1 Marcação mínima

Todos os exemplos desenvolvidos não só neste capítu lo, mas também nos capí-
tulos subsequentes, se uti lizam de uma marcação estrutural mín ima conforme
se mostra a segu ir:
1. <!DOCTYPE html PUBLIC "-//'W3C//DTD XHTML 1.0
2. Transi t iona1//EN" "http : / /'INllY .w3. org/TR/xhtmll/ DTD/xhtml 1-transi tiona1. dtd">
3. <html xmlns="htt p://v.v11Y.w3 .org/1999/xhtml" lang="pt-br" xml :lang="pt-br">
4. <head>
5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6. <title>Exempl os práti cos</ti tle>
7. <style type,,"text/css" media="all ">
8. /* Regras de estilo aqui t/
9. </styl e>
10. <script type="text/javascript" src=" . ./jquery-1.2.6. js"></sc ript>
11. <scri pt type="text/j avascri pt">
12. $(document).ready(function() {
13. // scripts jQuery devem ser i nseridos aqui
14. }) ;
15. </se ri pt>
213
16. </head>
17. <body>
18. 
19. </body>
20. </ht mh
Código comentado:
Linhas 1e2 Todo documento HTML deve começar com a declaração do
DOCTYPE. t nessa declaração que o navegador busca as in-
formações sobre a sintaxe da marcação, bem como instruções
de como renderizar cada elemento da marcação. A maioria dos
documentos existentes omite essa declaração e a renderização se
processa no chamado modo de render ização k irks, em oposição
ao doeu mentocorreramente marcado cujo modo de renderização
é chamado de standard. Uma das mais notáveis inconsistências
em consequência da fa lta de DOCTYPE em um documento é
o " Box Model quebrado» no navegador Internet Explorer. Veja
jQuery. boxMode l em [C7 $7.2].
Linha 3 Segue-se ao DOCTYPE a cag de abertura do elemento html que é
o elemento-raiz do documento. Use o atributo l ang para indicar
o idioma principa l do documento.
Linha 5 Sempre declare a codificação de caracteres do doc u mento.
Lin ha 6 Não om ita o título de seu documento. Use títulos que informem
o conteúdo da página, pois os mecanismos de busca dão muita
importância ao conteúdo do elemento t i tle. O título que se
u tilizou "Exemplos prá ticos" tem caráter puramente didático.
Na prática , é u ma péssima escolha. Melhor seria descrever su-
mariamente quais são os tipos de exemplo contidos na página,
por exemplo: exemplos dos métodos jQuery show() e hide().
Linhas 7 a 9 A folha de estilo do documento será escrita dentro do elemento
style. Serão usadas fo lhas de esrilo incorporadas ao documento
para facilitar a leitura e o escudo. Folhas de esti lo, salvo exceções,
devem ser colocadas cm arqu ivos externos e linkadas ao docu-
mento.
Linha 10 Aqu i se linkou para a biblioteca jQuerr g ravada em u m arqui-
vo externo chamado jquery-1. 2. 6. j s, que é a ú ltima versão da
biblioteca à época que este livro fo i escrito e a qual fo i baixada
em http://docs.jquery.com/Downloading_jQuery.
Linhas 11 a 15 Comido dentro do elemento script, inseriu-se o método jQuery
S(document) . ready() que é o equivalente ao método javaScript
window.onload. Todo script ali contido só entra em ação depois
que o DOM estiver pronto, ou seja.depois que o documento civer
sido carregado.

Capítulo 8 • Animações básicas 215
linha(s) Descrição (cont.)

Linhas 17 a 19 Completam o documento marcando seus conteüdos. Tudo que
deve ser renderizado será incluído na seção body.
Linha 20 Fechamento do elemento-raiz do documento.
Para maiores informações sobre DOCTYPEs padrão do W3C, consulte:

http ://11'lw1. w3. org/ QA/ 2002/04/ va 1i d-dtd-1 i st. htm1 .
8.2 Animação com shovio e hideo

Show e hide são palavras inglesas que significam, respectivamenre, mosn·ar e
esconder. Os métodos jQuery show() e hi deO se destinam a mostrar e esconder
e leme ntos do DOM. Obse rve as regras CSS a seguir:
1. p. esconde {display :none;}
2. p.mostra {display:block;}
Código comentado:
Llnha(s) Descrição
Linha 1 Esta regra CSS se emprega nos parágrafos em que se aplico u a clas-
se esconde. A declaração display:none faz q ue os conteúdos desses
parágrafos não sejam renderizados e tudo se passa como se tais
conteúdos não constassem da marcação. Os conteúdos são retirados
do fluxo norma l do documento e o espaço fís ico por eles ocupado
na renderização é preenchido pelo elemento que se segue no fluxo
da marcação. Convém ressaltar que clemenros com display:none
são ignorados também por tecnologias assisrivas, como leitores de
tela, e assim permanecem inacessíveis tanto visualmenre como para
qualquer tipo de mídia.
Linha 2 Esta regra CSS se emprega nos parágrafos em que se aplico u a clas-
se mos t ra. A declaração display:block faz que os conteúdos desses
parágrafos sejam renderizados normalmente. Esta declaração é a
declaração-padrão para parágrafos e rodos os demais elementos
nível de bloco da marcação HTML.
Para elementos in -l ine, cais como span, st rong, em, img etc., a condição de visibi-
lidade-padrão é determinada pela reg ra CSS display:inl ine.
Os métodos show() e hide() exercem o mesmo efeito q ue as regras CSS mostra-

das. Observe os cód igos a segui r:
1. $('p.esconde').hide();
2. S('p.mostra').show();

Código comentado:
Unha(s) Descrição
Lin ha 1 Este encadeamenro jQuery destina-se a encontrar todos os parágrafos
aos quais se tenha arribuído a classe esconde e a retirá-los do processo
de renderização tal como se tivesse sido declarada para eles a regra
CSS display:none.
Linha 2 Este encadeamento jQuery destina-se a encontrar todos os pará-
grafos aos quais se tenha atribuído a classe mostra e a renderizá-los
normalmente cal como se tivesse sido declarada para eles a regra
CSS di sp1ay:b1ock.
Criou-se uma página web simples para exemplifica r os efeitos que serão
esrudados neste capítulo. A página inicia-se com um cabeçalho nível 1 e cinco
parágrafos, sendo atribuída a dois deles a classe esconde. Esta página servirá de
laborató rio para os scripts de exemplo. Serão explicados cada componente da
m arcação, bem com o a folha de estilo a esta incorporada. À medida qu e for ne-
cessário acrescentar o u suprimir con teúdos na página, para d emo nstrar um novo
efeito, este será acresccmado e será explicada sua necessidade.
A marcação inicial é a seguinte :
1. <div id="com-classe">
2. <label>Parágrafos com classe "esconde"<br /></l abel>
3. <button type="button">Esconder</ button>
4. <button type="button">Mostrar</button>
5. </diV>
6. <div id="todos">
7. <label>Todos os parágrafos<br /></l abel>
8. <button type="button">Esconder</ button>
9. <button type="button">Mostrar</button>
10. </diV>
11. <hl>Folhas de estilo em cascata</hl>
12. <P>CSS é a sigla em ... </ P>
13. <P> A grande vantagem ... </P>
14. <P>HTML marca e ... </P>
15 . <P class="esconde">A adoção desta ... </p>
16. <P class.."esconde''>Projetar um ... </P>
Código comentado:
Lin has l a 5 Um div com seu respectivo id serve de container para os dois
botões que se destinam a disparar os evencos esconder e mostrar
os parágrafos aos quais se tenha atribuído uma classe esconde.

O d ocumen to está pronto para receber o script jQuery que fa rá esconder e

mostrar parágrafos. O script é apresentado a segu ir:
1. <script type="text/javasc ri pt" src=" . ./jquery-1. 2.6. js"></script>
2. <script type="text/ javascript">
4. S('button:eq(O) ' ).cl i ck(function() {
5. S(' p.esconde ' ).hi de();
6. }) ;
7. S('button:eq(l)').cl ick(function() {
8. $( 'p.esconde').show();
9. });
10. S('button:eq(2) ' ).cl ick(function() {
11. S( 'p').hide();
12 . }) ;
13 . S('button:eq(3) ' ).click(function() {
14. S('p').show();
15. });
16. }) ;
17 . </scri pt>
Código comentado:
Linha 1 Linka a biblioteca jQuery no d ocumento.
Linhas 2e17 Abre e fecha o conrainer <scri pt></scri pt> para o código.
Lin has 3e16 Abre e fecha o container para o mécodo docurnent. ready() que faz
que codo o scripr nele comido aguarde o carregamenro do DOM
para entrar em ação.
Linha 4 Define uma função a ser execu tada quando o usuá rio clicar o
primeiro elemenrobutton na página. Lembre-se de que os mérodos
jQucr)' retornam um conjunto d e objetos, sem necessidade de
se proceder a loops. Assim S(' button') retorna todos os botões
encontrados no documento e a esres atribui um índ ice começando
a contagem em O(zero), logo eq(0) se refere ao prime iro elemento
button encontrado.
Linha 5 Este é o script da função que será executada ao se clicar o pri-
meiro bolão. Enconcra rodos os parágrafos com a classe esconde,
e esconde-os, caso esrejam visíveis.
Linhas 7 a 9 Este é o script da função que será executad a ao se clicar o se-
gu ndo botão. Encontra todos os parágrafos com a classe esconde
e mostra-os, caso esteja m escondidos.
Linhas 10 a 15 Cumprem funções idênticas às anteriores para todos os parágrafos
do docu mento.
Para a d em onstração desse efeito, consulte o arquivo indicado a seguir.

Conforme mostra a figura 8.1, a págína construida para as demonstrações possuí

dois conjuntos de botões, um à esquerda e outro à direita. Cada um desses
conjuntos cumpre finalidades distintas na demonstração. Ao visualizar os efeítos
em seu navegador, clique sucessivamente o conjunto de botões à esquerda e,
depois, o conjunto de botões à direita. Observe e entenda o funcionamento de cada
um dos conjuntos separadamente, a partir da posição inicial da página, ou seja,
comece os cliques em cada conjunto com lodos os cinco parágrafos à vista.
O script está funcionando como se pretende u , mas há algumas melhorias que

se pode inrroduzir. O mécodo jQuery toggl e() des tina-se a alternar as condições
de um elemento do docume nto. Em se tratando de vis ibilidade, se o elemento
estiver vis ível, ocultará, e se es tiver ocu lco, acabará torna ndo-o visível.
8.3 Animação com toggleO

O us o desce mé todo s implifica não só o script, mas també m a ma rcação d a pá-
g ina. Possibilita que se use um t'.m ico bo tão para cumpr ir duas finalidad es, no
caso em questão, mos trar e esconder.
Gene ricamente, o método toggl e() permite alterna r d o is comporta mentos, e não
somente a vis ibilidade, a cada clique do rno use. Você d efin e do is comportame ntos
corno parâm etros para o mé todo toggleO e quando o us uário clica uma vez, dispara
o primeiro comportamento d efinido, outro clique, o segundo comportame nto,
mais um clique, o primeiro comportamento, e ass im indefinidamente vão se
alternando os comportamentos definidos conforme o clique s eja par ou ímpar.
Observe que no scrípc a seguir, definiu-se o método toggle() aplicado a um div. A
p rimeira função reduz a o pacidade do div pa ra 20% e a segunda fun ção restitui
a o pacidade orig inal pa ra 100% , ou seja, o paca.
As regras CSS pa ra apresenta r o div são mosc:radas a seguir.
CSS:
<Style t ype=" text/ css" media="all ">

di v {
width:200px;
height:lSOpx;
background:#ffO;
cursor:poi nter ;
}
</ styl e>

220
\1atenal coM a1re1to& autorais

Agora você precisa somente de um botão.
Código comentado:
Lin ha 4 Encontre todos os parágrnfos com a classe esconde e rorne-os invisí-
veis, caso estejam visíveis, ou ''isíveis, caso estejam invisíveis.
Linha 7 Cumpre as mesmas funções descritas ameriormcmc para rodos os
parágrafos do documento.
Para a demonstração desse efeito, co m o uso de toggle(), consulte o arquivo

indicado e mostrado na figu ra 8.2.
1-'anl 1aios com claua ·esconde' lodo• º' ar• r41los

E0<011d• <fMo•trtr Eocord•d-'-1~1r.,
Folhas de estilo em cascata

CSS e• 'içls em inglês pai;; Cuceômg Styl• St;eet que em português foi t<aduz1do para folho ée estilo em tasc~i• e ê
um mecanismo s1mplt& po1• •<*etoner csl1'n (p.e• .. Loniea. cores. U?tÇ61'Mn!os) aos documentos \llf~b .
A gnr.de ·rant•gem do uso de CSS é a de s.1parar a marcaçio flTML, c'a •ps-eHnlaçáo do $Íle. ~m out1as pal<r<<a$ vai!
d1'ter qus o HTML doci1nó·S• un:camen!e a esttutu1ar • m•rt01 o con!àUrlo. ietndo po1 c:onl• é!s CSS IOdn 11
re,pon'all'1dade pelo visuªI do dacijm~nto
HTll.l "'3re.• ~ esh11t<1f1! 10,~10~. o>heç>lhos. p~t<1111am. lnki, bol~ea. 'il1rru<i1ios. u1>3~eM e d11m•is el•.mt1nlOJ d>
pii91<1a e CSS define coro. pasoçitn~nio "'tela. esl•los de hnhn, borda' e 1udo o ma" retacrona~o a apresent~ç~.
A .t4oç.~o deti• l&t:M'-~ re•uli~ &m múllipl3s ·~n1~9Mã e bene«cios qua "50 do <-onse9uitkls qJando u u1a•u o
c.ont.ei1.c lar;Ja.m.er-te empre)Sd,j o.ar.a c.onrttruçào é.e web sites., base<.ldo no uso de tabe~-s !':de azntu11os de eSJ:izaç.ão
dentro da• tags HThll.
Pcojet•r um si1e nmgá~l tamo em morr~or de 1'.1S:l>I02A quanto em UTla 1elinha de 3:!1<2AO d2 Lm PDA, com
utifi1.ai;J.iío d• mo•m• m·,vca>li< i f~bllco o pouf,el Bas!• proj•hr orn C<n'on;.ô:lode com u P~d<585 Web
entregando ds CSS a misdo ee accmod&1 o conte<ido na tela!
Figuro 8.2 - Solução com um botão e dois textos.
No arquivo indicado, observe o funcionamento dos scriprs considerando que

ambos agem sobre os mesmos parágrafos, ou seja, ao utiliza r toggle(), o resulcado
do último cliq ue no botão à esquerda influenciará o primeiro clique no botão à
direita e vice-versa.
Para evi tar confusão, verifique o funcionamento do botão à esquerda reali-

za ndo vários cliques seguidos nele e termine com o clique que mostra todos os
parágrafos. A seguir, aplique o mesmo procedimento ao botão à direita.
A segui r, alterne os cliques nos bocões e observe os resu ltados.
Material cori 01re1~os au·ora1s

Agora, dê o utro passo no sencido de aperfeiçoa r ainda mais esse documcnco

alterando a maneira como o texto do botão é apresentado ao usuário. Que cal se
em vez do cexco Esconder/lvlostra r para os bocões, houvesse o texco "Esconder"
se os parágrafos estivessem à moscra e "Mostrar" se estivessem escondidos? Pa ra
obter esse aperfeiçoamento, retire o re.xto dos botões da marcação HTML con-
forme mostrado a seguir:
<button type=" button"></button>
E acrescente ao scripc anterior o seguinte:

1. <Script type=''text/j avasc r ipt '~
2. S(document).ready(function() {
3. S('button:eq(O) ' ) .text('Esconder' ).cl ick(functi on() {
4. if (S(this).text() == 'Mostrar') {
S. S(this).text('Esconder') ;
6. } else {
7. SCthis).text('Mostrar'}:
8. }
9. S('p.esconde ' ).toggl e() ;
10. }) ;
11. S('button:eq(l) ' ) .text('Esconder') .click(functi on() {
12. if (${this).text() == 'Mostrar' ) {
13 . S(this).text('Esconder') ;
14. } else {
15. S(this).text('Mostrar');
16. }
17 . S('p').toggle();
18. }) ;
19. }) ;
20. </scri pt>
Código comentado:
Lin ha 3 Utilizou-se o método text( ' Esconder ' ) ,que se destina a inserir o cexco
"Esconder'; como comeúdo do botão. Assim, quando o documemo
é carregado, o botão aparece com esse texto.
Lin ha 12 Ao ser clicado, inicia-se um teste condicional que determ ina o se-
guinte: se o elemento que acaba de ser clicado, S(this), contiver o
texto ''Mostrar': altere esse texto para "Esconder'; se não, altere para
"Mostrar''. Esse teste condiciona l faz a mágica, a lternando o texto
do botão.
Para demonstrar esse novo efeito, com alternância do texco do botão, consulte
o arquivo indicado e mostrado na figura 83.

--
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
~
-
-
~
~
~
~
~
~
-
u l):emplos práticos · Mo7i1111 Firefox ~@(E)
Parágrafos com classe "esconde'

c;J
Todos os paniuafos
c::::i

CSS é a sigla em mglês para Cascading Style Sheet que em p011Uguês foi traduzido para folha de estilo
cm cascata e /; um mecarusmo SllllJ)les para adicionar estilos (p.ex:. fontes. cores. espaçamentos) aos
documentos Web.
A grande vantagem do uso de CSS é a de sepru'.al' a marcação HTML, da apresentaç:ão do sile, Em

outras palavras. vale dizer que o HTML destina-se unicamente a estruturar e marcar o conteúdo. ficando
por conta das CSS toda a responsabilidade pelo 11Ísual do documento
H'ThíL marca e estrutura textos. cabeçalhos. parágrafos. IW<.s. bot.Ses. formul.ãrios. imagens e demais
elementos da página e CSS define cores, posicionamento na tela, estilos de linhas. bordas e rudo o mais
relacionado à apresentação
A adoção desta técruca resulta cm múltiplas vant~ens e benefic1os que não são conseguidos quando se
. . ...
Figuro 8.6 - Solução com CSS desabilitado.
Note que os botões são renderizados, mas perderam o respectivo texto indica-
tivo de Slla fina lidade. É necessário corrigir isso. Você saberia an tecipar a solução
para esse novo problema? Ou seja, como a presencar os botões completos na
situação em que javaScript está habilitado e CSS está desabilitada?
A resposta é a seguinte: retire a marcação dos botões do HT1'1L e insira-os

via jQuery. E aqui se usarão os mérodos before() e aft er() que inserem marcação,
respectivamente, antes e depois de um clemenco do DOM.
O script será alterado para o segu inte:

1. <Sc r ipt type="text/javasc ript">
3. var ht11l8ota0Um = "<div id='com-classe' ><l abel>Parágrafos com classe
'esconde' <br /></label><button type=' button '> </button></di V>" i
4. var ht11l8ota0Dois = ' <div id="todos"><labeh Todo.s os parágrafos
<br / ></labeh<button type="button"></ button> </div> ';
5. $('hl').before(ht1l8ota0Um)i
6. $(' lco11-cl asse'). after(htmlBotaoDois);

7. $('button:eq(O) ').text('Esconder') .click(function() {

8. if (S(this).text() =; 'Mos trar') {
li restante do script sem alteração
23. }) ;
iJ [arquivo-8.3e.html)
Código cornenrado:
linha(s) Descriçáo
Linha 3 Criou-se a variável htmlBotaoUmque armazena a marcação HTML do
primeiro botão.
Linha 4 Criou-se a variável htmlBotaoDois que armazena a marcação HTML
do segundo bocão.
Linha 5 lnseriu-se a marcação do primeiro botão imediatamente antes do
elemento hl.
Linha 6 inseriu-se a marcação do segundo botão ímediatameme após a
marcação do primeiro botão que fora inserido conforme descrito
na linha 5.
Para demonstrar esse novo efeito, que contempla o caso de CSS desabilitada,
consulte o arquivo indicado e mosa-ado na figura 8.7.
\'.) f.xemplos pr.!tkos · Mo;dllc FlrnfolC ~@~
Parágrafos com classe 'esconde'

1 Esconder J
Todos os parágrafos
1 [Esconder! 1
Folh~•s de estilo en1 c~1scata
CSS é a sigla em inglês para Casca<hng S!yle Sheet que em portu~s foi traduzido para folha de esblo
cm cascaia e ! wn mecarusmo Sllllplts para adicionar estilos (p.tit . fontts. cores. espaçamentos) aos
docUtl\entos Web
A grande vantagem do uso de CSS é a de separar a marcação H'IMI., da apres~tação ® $ite. Em

outras palavras. vale diz.er que o HTML destina-se unicamente a estruturar e marcar o conteúdo, ficando
por conta das CSS todá a responsabilidadt: pelo visual do docttnento.
lITML marca e est.ftl!Ura te:noi. cabeçalhos. parágrafos. links. bo~es. fol'lllulãrios. imagens e demais
elementos da página e CSS define core~. posicionamento na tela, elllilos de linhas, bordas e tudo o mais
relacionado à apresentação.
Figuro 8.7 - Solução final com CSS desobilitodo.

8.4 Suavizando a animação

Você deve ter notado nos arquivos de demonsrração desenvolvidos até aqui que
a transição mostra/ esconde é feira de maneira abrupta, ou seja, os conteúdos
são revelados ou escondidos instantaneamente, aparecendo e desaparecendo
em frações de segundo.
A biblioceca jQuery oferece uma funciona lidade que permite ao desenvolvedor

controlar o interva lo de tempo gasto para mostrar e/ ou esconder os conteúdos.
Você passa um parâmetro para definir um intervalo de tempo para um dos
seguintes métodos: hide(), sho1Y() o u toggle() , consegui ndo assim suaviza r sua
animação com estes.
Os parâmetros aceitos são slow, normal e fast, que definem, respectivamente,

animações lentas, normais e rápidas. Podemos defin ir o parâmetro usando uni-
dade de tempo milissegundos, por exemplo: 3000 equivale a um intervalo de 3
segundos, 600 equiva le a 0,6 segundo, e assim por diante. Observe os exemplos
a seguir:
hide('slovt');
show('fast');
hi de (1200);
toggle(2000);
Note o uso das aspas (simples ou duplas) quando a definição do interva lo de

tempo é por pa lavra-chave e o não uso das aspas, quando por milissegundos.
Recome o último arquivo de demonstração: arquivo-8.3e. html e suavize a ani-

mação aí inserida. Observe os acréscimos feitos:
S('button :eq (O) ').text( ' Esconder').click(function() {

if (S(thi s). text() == 'Mostrar') {
S(this) .text( ' Esconder');
} else {
S(this).text('Mostrar' ) ;
}
S( 'p .esconde').toggle('slow' );
}) ;
S('button:eq(l) ' ).text( ' Esconder ' ) .click(function() {

if ($(thi s).text() == 'Mostrar') {
S(this) .text('Esconder');

( to •• ;1, t-r• •1J1t'. 'l'•' .. ~1. .1!:q ~: .... -r11··· l•f' ,,... , l 'J't,-; ..... 1·1 ~1-41': rj;
j t .. f•~\"•'jr•I fl•t!1' t \º• • :~1•fl,..!>fl .. ·~.ir1.1t111 '1í••· l• l 'l4':1 1.1••.fl • ;1,!1
1 • 1 1• , 1•., .. ·1, • ,,r.1.H.rc 1 t r 1 1 ·1 " ' '·, •'•lfl"t
Figuro 8.8 - Progressão da animação com show().
Observe os códigos moso·ados a seguir:

body {/* sem alterações "/}
hl {font-size:l.6e111;}
label {color: #c30;}
div#tudo {background:#OOO; color:#OfO; padding:2px 20px;}
button {/~ sem alterações */}
</style>
<Scri pt type=''text/ javasc ri pt" src=" . ./j query-1. 2. 6. js"></scri pt>
<scri pt type.. "text/javasc ri pt">
var htmlBotaoUm = '<div id="todos"><labehTodos os parágrafos<br / ></ labeh
<button type="button"></button></di V>' ;
S('hl' ) .a~er(htmlBotaoUm) ;
S('button') .text('Esconder' ).cl ick(function() {
if ($(this) .text() == ' Mostrar') {
S(this) .text('Esconder');
S('#tudo ' ).show(JOOO);
} else {
S(this) .text( 'Mostrar ' );
S('#tudo').hide(lOOO);
}
});
} );
</ script>
</head>

<hody>
<hl>Folhas de esti lo em cascata</hl>
<div id="tudo">
<p>CSS é a sigla em . . . </p>
<P> A grande vantagem ... </p>
<p>HTML marca e estrutura . . . </P>
<P>A adoção desta . .. </P>
<P class.. "esconde">Projetar u11 ... <p>
</div>
~ [arquivo-8.4c.html]
8.5 Animação com slideUp() e slideDown()

Slide up e slide down são palavras inglesas que significam, respectivamente, des-
lizar para cima e deslizar para baixo. Os métodos jQuery slideUp() e slideDovm()
destinam-se a esconder e mostrar, respectivamente, elementos do DOM fazendo
que o desaparecimento se processe em um deslizamento de baixo para cima e
o aparecimento de cima para baixo, ao contrário dos métodos estudados ante-
riormente, nos qua is o processo mostrar e esconder ocorre em sentido diagonal.
essa animação, não há efeito de opacidade como na anterior. Na figura 8.9, veja
o progresso da animação.
Figuro 8.9 - Progressão do animação com slideDown().

Você pode controlar o intervalo de tempo da anim ação d eclarando um parâmetro

para o m étodo, cal como fez para os métodos escud ad os anteriormente.
Aplique esse métod o na animação vista no arquivo-8.4c.html. As mo di ficações

nesse arquivo sã o mostrad as a seguir:
$( 'button' ) .text( ' Esconder') .cl i ck(function() {

if ($(this) .text() == 'Most rar ') {
S(this) .text(' Esconder');
S('#tudo ' ). slideDown('slow');
} else {
S(this) .text( 'Mostrar ' ) ;
S( ' #tudo ' ) .slideUp(lSOO);
}
}) ;
Uma fun cio nalidade interessante da biblioteca j Queq~ muito útil para an ima-
ções, são as chamadas opciona is d e uma função denominadas callback. Sem outras
considerações teóricas, callback para animações pode ser definida como uma
chamada para uma funç ão que será executada tão logo a animação termine.
Todos os métodos que você coloca em uma anim ação são executados simul-
raneamenre, respeitado o tempo d e execução, resultando na animação.
Caso qu eira incluir uma ação a ser executada tão logo a animação termine,
você d everá passar uma função para o m étodo da an imação, como se fora um
parâmetro.A sintaxe geral para callback é mostrada na animação seguinte, que é
uma modificação da animação vista no exemplo anterior. Note no código a segu ir
que callback é uma função qu e, ao terminar a animação definida com slideDown()
(revelar), executa a ação d e adicio nar uma regra CSS definindo uma cor verm elha
para os textos contidos e uma cor vermelha para a borda do elemento body. Da
mesma forma, a fu nção a executar ao término da animação definida com slideUp()
(esconder) executa uma ação de mud an ça d e cores.
$( 'button' ) .text( 'Esconde r ').cli ck(function() {

if ($(this) .text() == 'Mostrar') {
S(this) .text ( ' Esconder');
$(' #tudo') . slideOown(3000, function() {
$('body') .css({color:'red', borderColor:' red ' });
}) ;

} else {
S(this) .text ('Mostrar');
$('#tudo') .slideUp(lSOO, function() {
S('body').css({color: ' gree.n', borderColor: 'green ' });
});
};
.iJ [arquivo-8.Sb.html)
8.6 Animação com fadeinO e fadeoutO

Fade oure fade in são palavras inglesas que significam, respectivamenrc, desvane-
cer e avivar. Os m étodos jQuery fadeOut() e fadeln() se destinam, respectivamente,
a esconder e a mostrar elementos do DOM: fazendo que o desaparecimento se
processe com o esmaecimento do conteúdo e o apareci menro, com seu avivamen-
ro. Funcionam de m aneira diference dos mécodos escudados anteriormente, nos
quais o processo mostrar e esconder se faz com movimentação do conteúdo, quei:
na diagonal, quer na verrical. Nesta animação, o efeito é obtido exclusivamente
com variação de opacidade e o conceúdo não se movimenra. Na figura 8.10, veja
o progresso da animação.

To~ o.. pa•""'l'~fc.
l Ecconder 1
Figuro 8.1 O - Progressão do onimoçoo com fadeln().

Você pode controlar o incervalo de ccmpo da animação declarando um parâ-

metro para o método, cal como fez para os métodos estudados anteriormente.
Aplique esse método na animação vista no arquivo-8.Sa.html. As mod ificações

nesse arquivo sã o mostradas a seguir:
$( 'button' ) .text(' Esconder') .cl i ck(function() {

if ($(this).text () == 'Mostrar') {
S(this) .text( 'Esconder');
S('#tudo ' ). fadeln(SOOO) ;
} else {
S(this) .text( 'Mostrar') ;
S('#tudo'). fadeOut(lSOO);
}
}) ;
8.7 Animação personalizada com animateo

Os métodos de animação estudados até aqui, neste capítulo, são nativos da biblio-
teca jQueq ' Contudo, você não está limitado ao uso so me nce dessas animações,
pois a biblioteca fornece um método de animação genérico para ser utilizado em
animações personalizadas. Trata-se do método animate(), que permite manipular
propriedades CSS numéricas. Para demonscrar essa an imação, use os códigos
mostrados a segui r:
.... CSS:
1. <style type="text/css" media="all">
2. body {/* sem alterações ~;}
3. label {/* sem alterações •/}
4. p {background:#444;color:#fff; paddi ng:8px 20px;}
5. button {/• sem alterações •/}
6. </style>
Código comentado:
Linhas l a 6 Altere sua folha de estilo em função d a retirada de elementos da
marcação. Use um só parágrafo com fundo cinza-escuro e !erras
brancas conforme a regra CSS na linha 4.

..,.. jQuery:
1. <script type="text/javascript" src=" .. / jquery-1. 2.6. js"></scri pt>
2. script type="text/javascript">
4. S('html').css('height', '101%')
5. S('hl').aher(' <button type="button">Esconder</button> ');
6. var erM.ndamento = '<img src="carregando.gif" class="gif-andamento" />';
7. var alturaJanela = S(window).height ();
8. var al turaObjeto - S('p').outerHeight();
9. var posicaoObjeto = $('p').position().top;
10. var ampl itudeOeslocamento = alturaJanela - alturaObjeto - posicaoObjeto;
11. S('button' ).click(function() {
12. if (S(thi s) .textO == 'Mostrar ' ) {
13. S(this).text('Esconder').hide().after(emAndamento);
14. S('p').show().animate({top:O, opacity:l}, 2500, function() {
15. $( ' .gif-andamento').css('display', 'none ') ;
16. S('button').show();
17. }) ;
18. } else {
19. S(thi s) . text ('Mostrar ' ) . hide() . after(emAndamento);
20. S(' p') .css({position: ' relative'})
21. .animate({top:amplitudeOeslocamento, opacity:O}, 2500, function() {
22. S('p ' ) .hide();
23. S(' .gif-andamento') .css('display', ' none ' );
24. S('button').show();
25. });
26. };
27. }) ;
28. }) ;
29. </script>
Para exemplificar a animação personalizada, utilizou-se um elemento pa-

rágrafo qu e será deslocado para fora da tela com um efeito do tipo cair. Para
restabelecer a visibilidade, o efeito será ao contrário, ou seja, o parágrafo entrará
na rela com um efeito do tipo subir. Como exercício, você pode incrementar
essa animação adicionando o efeico de transição de opacidade. Outro exercício
interessante consiste em deslocar o objeto para fora da tela, fazendo-o sair pela
lateral. E que tal sair pela d ireita e entrar pela esq uerda?

Código comentado:
Unha(s) Descrição
Linha 4 Esta regra CSS força o aparecimenro d a barra de rolagem ver-
tica l nos navegadores-padrão, mesmo sem necessidade dela, ao
contrário do Imernet Explorer que reserva o espaço indepen-
denremente do espaço vertical requerido pelo conteúdo. Nessa
animação, o o bjero é colocado para fora da rela por sua parte
inferio r e, nesse momento, apa rece a barra de ro lagem, o que
causa um desloca mento horizontal, como um pulo lateral, d a
página. Forçando o aparecimento d a barra de rolagem,corrige-se
esse pulo. Experimente retirar essa linha do código e visualize a
a nimação para ver o desagradável pulo.
Lin ha 5 Inseriu-seu m botão logo após o elemento hl, que, ao ser cl icado,
irá execucar a animação.
Linha 6 Armazenou-se, na variável emAndamento, uma marcação HTMLque
define a inserção de umagif-animada indicativa de carregamento.
Para uma ferramenta on-line geradora d esses tipos de g if, visite:
http: //M~w .ajaxload. i nfo/ .
Lin ha 7 Armazenou-se, na variável al turaJanela, a altura comi da janela

do navegador em unidade pixel.
Linha 8 Armazenou-se, na variável al t uraObjeto, a altura total, em unid ade
pixel, d o box CSS que contém o objeto a animar, neste caso, o
parágrafo. Veja (C4 543].
Linha 9 Armazenou-se, na variável posi çãoObjeto, a coordenada vertical,
ou seja, a distância em pixel q ue o objeto se encontra do t0po
da janela do navegador.
Linha 10 Armazenou-se, na variável amp1i tudeOes locamento, a distância em
pixel que o objeto deverá percorrer d esde sua posição atual aré
sair completamente da rela por seu limite inferior (Figura 8.ll).
Linha 11 Condicional if() {} resta a situação da página e decide o que
fazer. Na situação inicial, o tesre resulta fa lso, pois o ce,xco do
bocào é Esconder e não Mostrar. Assim a execução do script vai
para a linha 19.
Lin ha 19 Alterou-se o cexto do botão para Mostrar e escondeu-se o botão.
Ao deixar o botão à mostra, possibilita ao usuário clicá-lo durante
a animação, o q ue irá causar confusão.Altere o script e comprove
você mesmo.A seguir, insere-se. no lugar do botão, a gif-an imad a
indicando ao usuá rio que a animação está em andamento.
Linha 20 Acribui-seposi tion: relative ao objecoa a nimar,poiscomosesabe
das técnicas CSS, somente objetos posicionados são passíveis de
ser deslocados po r definição de coord enadas.

Linha(s) Descrição (cont.)

Linhas 21 a 25 A animação começa aqui, com a passagem de parâmetros para
o método animate(). Nessas linhas, a ação é a seguinte: an ime o
parágrafo cuja posição se acabou de definir como relativa, levan-
do-o para u ma coordenada vertical igual à quantidade de pixeis
necess;iria para fazê- lo sair d a tela pela parce infer ior (variável
amplitudeDesl ocamento); a animação deverá dttrar dois segu ndos
e meio (2500). Ao rerminar a animação, retire o parágrafo da
marcaç.ão (l inha 33). mosrre o botão agora com re.xco "Mosrrar"
(lin ha 22) e esconda a gif-animacla (linha 23), indicando o fim
da animação. Agora o borão está com o rexco "Mosrrar" e a
condicional, na linha 12, resulta verdadeira , rodand o o script a
partir da linha 13.
Línha D O funcionamenco segue a mesma lógica da explicada anter ior-
mente, para a condição de teste falsa, e agora o script coloca o
objeto à vista.
É nece$Sáílo esconder o parágrafo conforme mostra a linha 22, pois o deixando

à vista, após ter saido da tela, uma simples rolagem ~ertical da tela o revelaria
ali, o que certamente não se deseja, mesmo porque havendo conteudo após a
• borda inferior da tela, o parágrafo se colocaria sobre tal conteúdo.
Na figura 8.ll, há um esquema indicativo do cálculo do deslocamento vertical

necessário para fazer um objeto sair pela pane i11ferior da tela.
,tQ Uvro jQucry do Maujor 1 bcmplo~ prâticos · Mozilla Firefox [)@(81

$('p").positlonj ).lop;
$(window).hei gh10 :
umpllludeOe slocamen10
..,
Figuro 8 .1 1 - Cálculo do deslocamento verticol.
Consulte o arquivo-8. 7b . html p ara visualizar os cálcu los dos valores para as
variáveis mostrad as nesse exemplo. Abra o arquivo e proceda a a lguns redimen-
sio namencos d a janela do navegador, recarregando a página a cada redimensio-
namento, para visualiza r os resultados dos cálculos.

CAPÍTULO 9
Revelando conteúdos
Neste capítu lo, serão estudados a lguns efeitos da bibl ioteca jQuery destinados
a esconder e revelar conteúdos. Não se pode esquecer que efeitos obtidos com
scripts rodando no lado do cliente, tais como são os efeitos jQuery, devem ser
projerados de modo a não bloquear nem obstru ir o acesso a contetídos. É o que
se denomina JavaScript não obstrutivo.
Um bom efeito sempre começa a partir de um documento bem estruturado,

com sua marcação e CSS validadas no \V3C e acessível. Ao longo do processo
de criação de um efeito, todo cuidado é necessário para não introduzir regras
CSS, ou marcação, que venham a comprometer a acessibilidade.
Esconder e revelar conteúdos é um efeito muito fácil de obter, podendo ser

empregado com segurança nas situações em que extensos conteúdos obrigam o
u suário a rolagens de tela. Esse caso é um clássico exemplo do que se denomina
"enriquecimento da experiência do usuário': caracterizando-se por proporcionar
ao usuário com infra-estrutura apropriada (por exemplo: JavaScripc habi litado
no navegado r) melhores condições de uso do d ocu menco em relação aos usuá-
rios sem a necessária infra-esu-ucura. E, aqui, vale repetir: o acesso é garantido a
todos, mas os efeitos de enriquecimento irão se desti nar apenas aos habilitados
a experimentá-los.
9.1 FAQ CSS

Para as explicações dos efei ros de esconder e revelar conteúdos, será tomada como
base uma adaptação de trecho de uma FAQ CSS real publ icado em http: //wwvi.
maujor.com/tutorial/faq.php.
239
Escolheu-se uma FAQ CSS, mas evidentemente as técnicas mostradas não

são de aplicação exclusiva para um documento qu e apresente uma listagem de
perguntas e respostas como são as FAQs. Ao contrário, entendendo a técnica
explicada para esse exemplo, você faci lmente poderá adaptá-la a qualquer ripo
de conteúdo.
Marcação básica
Para desenvolver o efeiro revelar e esconder da FAQ adorada como exemplo,
será utilizada uma marcação HT tv1L básica na qual se escolhe um coral de dez.
perguntas. Veja a seguir essa marcação devidamente comentada.
Para melhor entendimento das técnicas de desenvolvimento, optou-se por ini-
ciar co m um script simples em uma primeira erapa e, a partir daí, ir modifica ndo,
aperfeiçoando e apresentando alrernacivas ao scripc em etapas sucessivas.
O foco principal deste capítulo é o aprendizado d as técnicas de desenvolvi-
menro com jQuery. Vários são os caminhos para se conseguir um mesmo efeito.
Certamente você, à medida que progredir no estudo, encontrará alternaàvas
para os scripts apresentados, não devendo limitar-se a um simples copiar e colar.
Agindo assim, esta rá en riquecendo e aperfeiçoando seu aprend izad o.
A marcação HTML e CSS da página básica para os exemplos é mostrada a
seguir.
l!IJ.. CSS:
L <style type,," text/ css" media,,,"all ">
2. body {
3. wi dth:400px;
4. font:80%/l.2 Arial, Helvetica , sans-serif;
S. margi n:O auto;
6. padding: O;
7. }
8. dt {
9. margin:20px O 3px O;
10 . font -weight:bold;
11. border-top:lpx solid #ccc;
12. }
13. dd {
14. margin:O;
15 . paddi ng: Spx O O O;
16. text-align:justi fy;
17. }
18. </Style>

Capítulo 9 • Revelando conteúdos 241
Trata-se de uma folha de estilos mínima d esti nad a a centralizar a página

e inserir apresentação básica com a finalidade exclusiva de faci litar a visu-
alização do exemplo.
.... HTML:
1. <hl>FAQ CSS</hl>
2. <h2 id='' i ndice''>Índice</h2>
3. <Oh
4. <l i ><a href="#css">O que significa a sigla CSS?</a></li>
5. 
6. <li x a href="#comentario">Posso inclui r canentários nas regras CSS?</a></li>
7. </Ol>
8. <h3>Perguntas e respostas</ h3>
9. <dh
10. <dt id="css">O que significa a sigla CSS?</dt>
11. <dd>CSS é a si gla ... </dd>
12 . <dd><a href="#indice">lndice</a></dd>
13. 
14. <dt id="comentario">Posso incluir comentários nas reg ras CSS?</dt>
15. <dd>Sim . Comentários podem e ... ></dd>
16. <dd><a href="lli ndice">lndice</a></dd>
17. </dl>
18. </body>
19. </htmh
Cód igo comentado:

línha(s) Descrição
Linha 1 Títu lo da página.
Linha 2 Título para o índice das perguntas comidas no FAQ. Note a
presença do atributo id="indice" nesse rítu lo. Esse i d servirá
como âncora de desrino para a navegação interna que remete o
usuário ao índice sempre que se clicar qualquer dos links deno-
minados "índice" existentes ao final de cada resposta. Deve-se
evitara prática de marcar destinos de links internos com a sintaxe
HTML <a name="nome"></a>, a não ser nos casos de documentos
servidos para navegadores amigos que não suportam i d para
marcar â ncoras. Assim, prefira o uso de id para ma rcar âncoras
de destino da navegação inrerna.
Lin has 3 a 7 Marcação de Lm1a lista ordenada cujos itens contêm as perguntas
da FAQ.


Linh as 9 a 17 Marcação de uma lista de definição contendo as respostas para
cada uma das perguntas. Lístasdedefiniçãosão aquelas marcadas
com o elemento HTML dl (de finition list). Os dois e.Jememos
desse tipo de lista são : dt (definition terrn), que significa termo a
ser definido, e dd (definition d escription), que significa descrição
da definição para o termo. Trarn-se de uma lista na qual se define
um rermo e, a seguir, descreve(m)-se uma ou mais caracteríscicas
do termo. Esse ripo de lisra foi escolhido para marcar a FAQ
adorada como exemplo, pois se considera cada pergunra como o
termo a ser definido e a resposra, a defin içi1 o ou descrição para a
pergunta.Ao fin.il de cada resposra,cria-se um link para o índice,
marcado com um rermo de definição. Para não alongar o cód igo,
mostra-se somente a marcação para duas das dez perguntas
existentes no exemplo.
A renderi zação da página básica para o FAQ é apresentada na figura 9.1.
U 1 AQ C!» - Mozillo 1 irelcx ~: Cl 1@
FAQCSS
lndice
1 Q ª"'sigo ljq u \l\f CSS?
2 Qual ~ ~ littahdade dai CSS?
3 Pt'r pue dAVn u11111r C~
4 Qll1'Ul IJ \1&n•Jqê1'! d• HJI' t$$.?
5 A,.,, CSS tttáll dp a -1udp t::on ?'> Wrb,Sa-nd;Jrúfi'
6 Ç) QL• ~ re!Jla C')S 1
7 CC'n10 .rScr~<l \ lrníil t'1qr..t CSS ?
9 Ou11it r ,.,ayteuu !tl\e. P!1""1hd'11 ftm CSS~
9 Ao. <i:.mttr" r.ss ê •rn,&e;!., ma n5r 11!.ietrn1ni'!ar.11htt?
10 Poa~o lpç'uir romcrn;jnos na~ .f':il?rttc CSS'
Pergun~s • respost;as
O <1u• ~lg111Rca .ulgla CSS?

CSS ê- a -s19la p.ara Casc-ad1ny St1·te Sb!ets GUe ern portugut:s ro.1
l~~u:1do pir.i fc!Mt; ~ «llb om c:J.~ai~ e ~d~ m~I$ ~. 1ue u"I\
dotU"1ento onde sJo éo6nlda reg-.as de fom•la!; ão 011 do •stilos. a
1ettm apft.c-adai"S ªº'
elemtt1tos at1\rtuti1s dê!' 1narcaçáo
Í1rl11'A
Figuro 9 .1 - Póg ino básico poro FAQ.
Tal documento encontra-se em sua forma mais elementar com a lguma esti-
lização básica , conrndo um usuário ainda que desabilite suporte às CSS em seu
navegador ou abra a página em um navegador de texto, terá acesso a rodas as
perguncas e respostas do FAQ e nenhum conteúdo será perdido.

esses assuntos aos quais se dispensa a máx ima arenção. Assim , no caso da FAQ
em quescão, é de vital importâ ncia que o usuár io idenrifique insrantaneamenre
como revelar o conteúdo.
Na solução dada, os links para o índice continuarão funcionais. Tais links

serão panicularmence úteis nos casos em que o usuário tiver de rolar a página
para visualizar respostas localizadas abaixo da do bra Oinha limite inferior da
janela do navegador).
Cada vez que o usuário clicar um dos .links para ver a resposta, esta será
revelada. Adicionalmente, acrescentam-se uma borda e urna cor de fu ndo para
destacar a resposta revelada.
Observe, na figura 93, o que aconteceu após o usuário rer clicado sucessi-
vamente os link5 para revelar as resposta.s a duas perg untas. Note que aci m a
da resposta se disponibilizou um link para fechá-la e abaixo dela 1 um link que
remere ao índ ice.
Veja, nas figuras 9.2 e 93, o ciclo completo do efeito que se pretende obter
nessa primeira etapa.
~ f AQ c.ss . iwma ffrnfor t;]:Q](Rl
O qu• slg11ltlc;> • llgl• CSS?

Vc: "'"l'll$1~
,4. ~r.aW•rle dM CSS ~ ~ li~ 1ellret do Kl'\IL leda f 'l'l'll~1w

d:tclar-ação que ,•ti.e * forma tat~o. -.. apres.9nteç.áo 1fo
dottrmertl:, klo :;,gni~c-o. dut"1q11e 1~3 do tq.o çforh,... ~,.. <i>,
ate. btm como uc.o dt eoiun.a-t t ltt.1\1; dt tattl11 para obetnç:io
je e.sp.a;am?rrlo; (lâo sâ<J a:dmi:bdl s oJ admitdcs cam
.,,si içõ•• em um pr~o W•b com CSS Valo diur
simplifica.do· HTf>fl pet>. e!.tnAllfS<,l!o e C$S pgta
fl/Wffll/~;&o
Figuro 9.3 - Póg ino poro FAQ : primeiro etapa - revela r.
Veja a segu ir os códigos para desenvolver o efeiro proposco para esta etapa.
Não se irão acrescentar nen huma marcação nem reg ra CSS ao documento.
Toda a marcação necessária e a fo lha de estilo serão inseridas v1a script.

Será que esta é uma boa escolha? Afinal se estão misturando marcação e
apresentação com comportamento. É boa prática manter essas crês camadas do
desenvolvimento independentes. Toda a marcação fica no HTML da página, a
apresentação, em arquivos de folhas de estilo e o comportamento, em arquivos
de scripr.
Quando se trata de usar jQuery e scriprs de maneira geral, com a fina lidade
de incrementar a apresentação da página, nada há de errado em se adicionar
marcação e estilização via scripc. Uma criteriosa escolha do que deve ser inserido
e, principalmente, o uso de bom senso pelo desenvolvedor são mais importan-
tes que despender tempo com discussões dessa ordem. O objetivo principal do
uso de script é enriquecer a experiência do usuário, sem bloquear seu acesso a
conteúdos. Para cumprir esse objetivo, é perfeitamente válido inserir marcação
e esti lização via script.
Um erro comume frequente relacionado a esse princípio é esconder, inicialmente,

o conteúdo com uso de CSS e revelá-lo via script. O procedimento deve ser
exatamente o inverso, ou seja, deixá-lo visível e definir regra CSS para esconder
via script. Agindo assim, não se bloqueia o acesso ao conteúdo a usuários que
estejam navegando sem JavaScript habilitado.
Nessa etapa, será utilizado o scripc para cais inserções e, na sequência do de-
senvolvimento, em etapas futuras, serão mostradas inserções em sua respectiva
camada, misturadas com inserções por script, rodas sendo soluções válidas e
funcionais.
Em todos os exemplos desenvolvidos neste livro, colocaram-se as folhas de estilo

e os scripts incorporados na seção head do HTML da página unicamente para
facilitar ao leitor o estudo dos códigos-fonte. Em desenvolvimento real, deve-se
línkar tanto folhas de estilo como scripts.
Observe o script que produz o efeito proposto e os comentários:

1. <script type="text/j avasc ri pt">
3. var textoVer = '<a href="#" style="color:#666 ; text-decoration:none; ">
Ver resposta</a> ';
4. S('dd').css('display', ' none');
5. $('dt') .after(textoVer);
6. $('a') .cl ick(function() {
7. if (S(this).text() == 'Ver resposta ' ) {
8. S(thi s). next(). next () . t ogg1e();
9. S(thi s) .text('Fechar');
10. S(thi s). next ()
11. . css({

12 . border:'lpx solid #c30',

13. padding : 'Spx lOpx',
14. background: ' #ff9 '
15. })
16. . slideToggle('slow') ;
17 . } else {
18. S(this). text('Ver resposta ' );
19. S(thi s). next() . sl i deToggl e(' slow' ) ;
20. S(this).next().next() . toggl e() ;
21. }
22. });
23 . }) ;
24. </se ri pt>
Cód igo comentado:

Linha 3 Criou-se uma variável para comer a marcação HTML para os
links que irão revelar e esconder as respostas.
Linha 4 O script determina o seguinte: encontre rodos os elementos dd
no documento e, para estes, vale a declaração CSS definindo que
não sejam renderizados, ou seja, esconda-os. Esta linha faz qu e
rodas as respostas e os lin ks para o índice desapareçam da página.
Faça uma cópia do arquivo, retire rod o o script da página, exceto
esta linha, mas, cuidado, não retire as linhas 1, 2, 23 e 24 que são
o container d o script. Salve o arq uivo com o nome arquivo-9. 2b.
teste. html e visua lize-o no navegador.
Linha 5 Aqu i a ação é a seguinte: encontre rodos os elementos dt (note
que os elementos dt marcam as perguntas) da página e insira
logo após cada um d eles a marcação HTML pa ra o link que irá
mostrar as respostas (definid a na linha 3). Agora é como se você
tivesse esse link imediatamente depois d e cada uma das pergun-
tas. Tais elementos não estarão escondidos por enquanto. Abra
o arquivo arqui vo-9. 2b. teste. html que salvou conforme sugerido
no item anterior e acrescente nele as linhas 3 e 5 do scripr. Salve-
as e visua lize no navegador. Agora, além das perguntas, aparece
logo abaixo delas o link "Ver resposta''. Clique o link e nada
acontecerá.
Lin ha 6 Lemb re-se de que o elemento a acaba de ser inserido na marca-
ção, logo após o elemento dt, e nesta linha está dito: quando for
clicado o elemento a, isto é, " Ver resposta'; execute a função que
se segue.


Linha 7 Esta lin ha declara que se efetue u m reste condicional e, dependendo
do resultado, o script executará urna d e duas ações possíveis. O
teste é o seguinte: se o conteúdo textual d o elemento a for "Ver
resposta': execute o que se segue, sen ão vá para a linha 17 (decla-
ração e1se). Aqui o seletor S(t hi s) tem o mesmo significado que
em javaScript, ou seja, neste caso se refere ao elemento que acaba
de ser clicado (a). O mérodo text() recupera o conteúdo texrual
de um elemento. O reste res u lta verdadeiro, pois inicial mente o
texto do elemento a é "Ver resposta'; e assim o scripr em questão
continua na linha seguinte.
Linh a 8 Aqui está dito o seguinte: encontre o elemento que vem depois do
elemento a que \'OCê clicou e, a segui r, o elemento que vem depois.
Esclarecendo: trata-se do segundo elemento após o a. Sabendo
que o elemento a está logo após o elemento dt e examinando a
marcação, verifica-se que depois do elemenco a vem um elemento
dd com a resposta e, depois d esse oucro elemenco, dd com o link para
o índice. É esse link o alvo desse encadeamenco e sobre ele aplicar-
se-á o método togl e() , ou seja, mude a visibilidade dele. Como se
inicia escondido (veja a linha 4), aqui será revelado. Resumindo:
se o usuário clicar "Ver resposrn'; revele o link para o índ ice.
Linha 9 Aqu i se es tá s ubstituindo o conteúdo do elemento span, que
atualmente é "Ver resposta': por "Fechar'; ou seja, ao se revelar a
resposta, o link passará d e " Ver resposta'' para "fechar''.
Lin has 10 a 15 Definição das declarações de estilos para os conceúdos a ser
revelados. Aqui está dito o seguinte: aplique as regras de estilo
ao elemento que se segue ao elemento clicado. O elemento que
contém o link clicado é um span e, logo depois dele, encontra-se
o elemento dd que contém a resposta à pergunta. As regras de
estilo definem uma borda, um padding e uma cor de fund o para
o texto da resposta a ser revelada.
Lin ha 16 Nesca linha, definiu-se o efeiro de revelação d o conteúdo. Op-
tou-se por moscrar o conteúdo fazendo que apareça segundo
um movimento vertical de cima para baixo. Salve uma cópia do
arquivo-9. lb .html , substirua essa linha por fadeln(2000) e veja o
resu ltado no n avegador, depois substitu a por show(l OOO) e veja o
resu lcado. essa linha term ina a execução do script determinado
pelo resultado do teste condicio nal iniciado na linha 7 e o script
pula os comandos dentro de else na linha 17, não encontrando
nada mais d epois dele, encerrando-se a ação desencadeada pelo
script. Assim, a situação acuai é a seguinte; a resposta esta à vista,
anterior a esta existem um link "Fechar" e, depois dela , um link
" Índice''. Se o usuário clicar o link " Índice~s i mplesmente irá para
a respectiva pergunta no início d a página. Se clicar o lin k "Fechar';
estani aàvando novamente o script na sua linha 6. Agora o ciclo se
repete com a diferença de que o teste condicional resulta falso.


Linha 6 O clique do usuário agora ocorreu n o elemento a contendo o
texto "Fechar" (veja o comentário anterior para a linha 9).
Linha 7 Agora o teste resultou falso, pois o texco d o llnk não é "Ver res-
pos ta~ e sim" fechar''. Em consequência, o script vai para a linha
17, que marca o início das ações para o caso de a condicional
rerornar falsa.
Linha 18 Cl icado o link "Fechar'; a primei ra ação é a troca do texto do
link de "Fechar" para "Ver resposta''.
Linha 19 Esta linha estabelece o seguinte: esconda a resposta usando o
efeico de desaparecer segund o um movimenro venica l d e baixo
para cima. Aqui se sugere que você modifique o script, na cópia
feita anreriormente, usando fadeOut () e híde() e, depois, usando
um tipo de efeito para revelar e o utro para mosrrar.
Linh a 20 Aqui se está escondendo o link para o índice. Experimente retirar
esta linha e ver o resultado no navegado r.
Terminado o desenvolvimemo e com a página funcionando como planejado, faça

o seguinte: abra a pági na no navegador, d esabi lite JavaScript e recarregue a página.
Algu m conteúdo se perdeu? Algum con teúdo estranho à página apareceu?
lembre-se d e que a página d eve permanecer funcional e lógica mesmo co m

JavaScript desabilitado. Nada d e d esabilitar JavaScript e aparecer na página um
link ou um texto do tipo "Ver Resposta" ou "Fechar''. Muito me nos desaparecer
uma resposta , ou todas, ou o índice. Isto é javaScript não obstrutivo usado para
incrementar a experiência do usuário.
Pode-se, então, concluir que ao final d esta primeira etapa o efeito qu e se aca-
bou de desenvolver trouxe como resultado uma págin a bem mais interessante e
com apelo visual bem melhor que o da página básica. Contudo, alguns pontos
podem e devem ser melhorados.
Segunda etapa
Nesta etapa, o objetivo será retirar a estilização e marcação do script e m questão.
Um d os fund amentos do desenvolvim ento, segundo os Padrões Web, preconiza
independência entre ca madas d e marcação, apresentação e compo rtam ento.
A propósito da afirmativa anterior, é interessa nte fazer um comentário.
Uma primeira corrente de d esenvolvedores preconiza e defend e veemente-

mente uma interpretação dos Padrões Web d e forma absolutamente rígida e

sem abrir concessões. Não admitem, cm hipótese alguma o uso de elementos

adicionais na marcação, defendem o minimalismo do cód igo e são contrários
a qualquer mistura das camadas de apresentação, marcação e comportamento,
enfim , são rígidos na interpretação da letra das normas. A segund a corrence de
desenvolvedores considera os Padrões \Veb uma bobagem e, ainda, desenvolve
sites com ra belas e scripts u lera passados. A terceira corrente tem consciência dos
Padrões Web, conhece seus fundamentos e os aplica em seu dia a dia de trabalho,
contudo não abrindo mão de documentos válidos se permitem concessões, como
o uso de um div a mais no código para encurtar o caminho para a consecução
de determinado objetivo. Você é livre para aderir a qualquer um dos três grupos,
mas os códigos desenvolvidos neste livro seguem a filosofia dos grupos não
extremistas, que parece a mais apropriada ao mundo real do desenvolvimenco.
Rigidez de interpretação é uma postura teórica e utópica. Ignorar os Padrões
\Veb é se declarar ultrapassado.
Inicie idenáficando, no script anterior, quais as linhas q ue podem ser movidas

para outra camada. São elas:
3. var textoVer = ' <span><a href="#" style="col or:#666;
text-decorati on : none; ">Ver resposta</a></span>' ;
4. S('dd') .css('display', 'none' ) ;
10. S(thi s).next()
11. .css({
12. border: ' lpx sol id #c30' ,
13. paddi ng: 'S px lOpx' ,
14 . background: '#ff9'
A linha 3 co ntém marcação e estili zação. Passe a marcação para o HTML da

página e a estilização para as CSS. A marcação para os links deve ser inserida logo
após cada elemento dt. Veja a seguir as alterações a introduzir.
1111- HTML:
<h3>Perguntas e respostas</h3>
<dh
<dt id="css">O que signi fica a sigla CSS?</dt>
<dd>Ver re.sposta</dd>
<dd>Fechar</dd>
<dd>CSS é a si gla para Cascading Style
Fazendo isso, veja, na figura 9.4, o que acontece com a página básica.

\ '.) 1 AQ CSS • Morill• 1 irefo• ~@l8]
':! . l'ÇJ · "' ;. j
FAQCSS
lndlce
1 \1 º"" "'S"'~"" • ..iQI• e<;~
2. Qyol li a 'n!ll!ldldll d•• r,SS?
3. E'oc.CllJH<M> 1riar. C$S?
4. Cus.f ile: v~n_!!l_en-; de usat..CSS[
5, As CS.9 @91'-o d@ acoglq cor!" a• \ \"e b 9 andards?
6 0 tu J,. '1 tlVHft ~8 ?
7. C"«O;Q ee(#i'(O: 1m;, 1rg1 CSS '
8. Quaja Ç-iHtÇUHtp ~ So pennfido2 em CSS?
9. ~&@ CSS ~ S.Jí't fyel a rna útç ylf~~
10, ?ottq indyi1 cem9nt,riu "ª', tFJ! CS.$?
Pergunta~ e respo~ta:
Figuro 9.4 - Pógino poro FAQ: segundo etopo - morcoçõo.
Acabou-se de comecer, proposicadamenre, um engano muito co mum quando

se d esenvolve sem pensar Padrões \Veb. lntroduziram-se compo nentes neces-
sá rios ao funcionamento d o script em questão, na renderização da página. E o
que acontece quando j avaScripr est,) d esabilitado? O que fazem aqueles Links
na página? Absolutam en te nada! Reti re-os dali rapidamente.
Embora esrn não seja a solução, veja comenri rios adicionais sobre essa inserção
de código. Talvez você esteja se perguncando o porquê de não se rer sugerid o o
uso de um elemenro neu tro como span ou, mais apropriad amenre, o elemento a,
que é o semantica men te correto para marcar o link.
Se fizer isso, esta rá invalidando sua marcação HTML, po is o elem ento dl

admite somenre os elementos dt e dd como elem entos-filh o. Não se pode acres-
centar nenhum ourro elemento dentro d ele. !\a sequência do exemplo, você irá
efetivamente usar o elemento dd p ara conrainer do ünk em urna solução um
pouco diferente da sugerida aquí e poderá, então, constatar por si mesmo o que
aconcece, além de um código inválido, se usar OLlCro elemento que não dd.Adianre,
esse assumo será retomad o.
O problema é o seguinte: você precisa do elemento dd naquela posição, mas

n ão pode permitir que o ce,-..:: to seja renderizado. Você seria capaz de apontar a
solução?

navegador, neste caso, não constrói o DOM corretamente cm consequência da

marcação inválida.
Em qualquer situação de desenvolvimento de documentos para a web, valide

constantemente seu código ao longo do proces.so de criação. Sempre que tiver
o controle da manutenção de um documento já existente, valide-o também.
Sugestão: salve uma cópia do arquivo-9.lc .html , modifique a marcação substi-

tuindo dd por span o u a e visualize o resu ltado no Firefox e no Internet Explorer.
Antes d e passar para a erapa segu inte, desabilite JavaScript no navegador e

visualize sua criação. Tudo cerro?
Se o usuário estiver navegando com o uso do teclado, a página será inacessível

a ele, a menos que desabilite JavaScript. Ex'Perimente navegar com o uso do te-
clado na página gerada pelo arquivo da solução apresenrada na primeira etapa e,
d epois, vá à p ági na do arquivo d essa etapa e realize o mesm o procedimento. Você
vai constatar que, na primeira, você abre as respostas com o teclado normalmente
e, na segu nda, n ão. Elemenros que não são links não são acessíveis via teclado,
a menos que você crie scr ipt para cal. Como exercício, modifiq ue o script dessa
solução para rorná-la acessível via teclado.
Terceira etapa
esta etapa, será efetuada uma mudança na apresen tação dos links para abrir
e fechar as resp ostas. Em vez de links textuais, será utilizada uma imagem como
link. É comum encontrar, na web, imagens d e um sinal de mais e m enos(+/ -)
para tais links. Na solução que será desenvolvida, você utilizará a imagem de olho
aberro e fechado. Não está em questão o design da solução, o que importa é o
objetivo final do estudo: mostrar a técnica d e uso d e uma imagem. Conhecendo
a técnica, você pode usar a imagem que m elhor se adapte a seu projeto.
Complementarmente, nesta solução, ao conu·ário da anterior, considere a nave-

gação via teclado. Para que um elemento seja acessado via redado, há duas opções
de marcação : marcar com o elemento a (elemento para marcar links) ou definir
o arri buro tabindex que se destina a estabelecer uma o rdem de tabulação.
O uso do atributo tabindex é válido para controles d e formulár io (por exemplo:

input, textarea e button). Se você d efinir esse atributo para um elemento parágrafo,
por exemplo, este será acessado pelo teclado normalmence, contudo sua marca-
ção não será validada. Priorize a validação e, assim, opte por usar um link em
elementos que devam ser acessados pelo teclado.

No exemplo em questão e na maioria dos scripts que dependem de um clique

do ponteiro do mouse para disparar uma ação, usar um link é, sem dúvida, uma
solução semanrica menre correra. A finalidade de marcar como 1in k é proporcionar
acesso vfa teclado, então se criará um link morro. O desàno de um link morro
é o s inal tralha ou jogo-da-velha (#) e a marcação segue a sintaxe mostrada a
seguir:
<a href.."#">link morto</ a>
Com e.ssas informações e tendo entendido o funcionamento do script desen-
volvido na etapa anterior, crie um script para revelar e esconder as respostas da
FAQ com um clique em uma imagem.
Veja, na figura 9.5, o resultado final proposto parn essa etapa.
U 1AQ CSS ~ MoZ1lLa t l r erox ~['§:@
. e ,,.1
FAQCSS
ln dice
1 0 t!U@ Stgnfiica a srgla C SS~ ·
2 <lln1 A A finftilt d:\if~ tfA• cS":::?
3. Por qu~ d!rffi 11a!)r CSS'>
4. OV.112 az: '"1ntaggr' de YJJ.ãr CSS?
5. 6$ CSS eitáo> ~i!. aço!4o mo •• WW S:~ndu•M
6. Ô gutt Wli!JC" C$S?
/ , Ctn9 ~IC-UIVQ WJI t!Q r-1 ($;$ ~·
8 Ot@'j r :Jract11rP5 Mr p;Arrrdtç-M oro Ç ~C ?
9 . ~R CS-S p :;encifçJ a m;júcct4n'minumtn C
10, eossq mely!r cpm!!Q[âfron. tl3$ requis CSS?
P •rgunt~ s • r•~post.~s
Po1<1ue d1>vo usar CSS?
CSS permiie que voe" ,.tíre d'a m;rcaçãi> !íll.IL !<!da a

rc1ma{~O (:~eupt~~&) de ~ocum11111a w=...e. QiJam 'V~í
de>MT1iruor co11!S, ~nna~ u~ •· tamant\011. pqslcionart)!lrto e
em fim IQ<f~ n '•iis1i.1· d• f1ÍIE"'ª ~ ~o a$ OS$, ,.,_, ..-..ms~n•
o.tão 1e1a1~du nu 1esp<1;tas ~ S<!9<1lr
Figuro 9.5 - Pógino poro FAQ: terceiro etapa.
As regras CSS necessárias a esta solução são as seguintes:

.estilo-um{/* Já usada na solução anterior, estiliza o texto da resposta revelada */
border:lpx solid #c30;
padding:Spx lOpx;
background:#ff9;
}
img {border:none; display:none;}

A novidade aqu i é o uso de uma regra CSS para retirar a borda azul padrão que
os navegadores colocam em volta de uma imagem quando esta é um link. Lembre-se
de que você irá utilizar a imagem como se fosse um link morto para proporcionar
acesso via teclado. Faça uma cópia do arquivo desta etapa, recire essa regra CSS,
salve o arquivo e visualize-o no navegador. Constate o aparecimenro de uma borda
horrível em volta de cada um dos (não tão lindos e azuis) olhos.
A marcação para cada resposta será como a mostrada a seguir:

<h3>Perguntas e respostas </h3>
<dh
<dt id="css">O que significa a sigla CSS?</dt>
<dd><a href="l"><i11g src="" alt="" /></a></dd>
<dd>CSS é a si gla para ... </dd>
<dd><a href=" #indi ce">Índi ce</a></dd>
Tal como se fez para o link que leva ao índice, inseriu-se marcação para servir
de concainer à imagem do olho. Noce que o atributo src da imagem está vazio. Por
que não optar por simplesmente o mitir o atributo? Porque a página não passaria
no va lidador, pois esse atribuco é obrigatório. Mas a inserção dele, ainda que
vazio, irá acarretar um problema que será tratado a segu ir.
Você seria capaz de dizer qual a finalidade da declaração display: none, mostra-
da anreriormenre na regra CSS, para a imagem? Por que esconder a imagem se
precisará dela na página?
A razão é a seguinte: quando há uma imagem inserida na m arcação cujo

atributo src leva a um endereço no qual não ex is te uma imagem, o navegador
l nrerner Explorer renderiza um ícone padrão, para indicar a existência de uma
imagem quebrada. SejavaScript for desabilitado no navegador, cal ícone irá apa-
recer no Internet Explorer.
O scripc jQuery é mostrado a seguir:

1. <se ri pt type,,"text/j avas eri pt">
3. var olhoAberto = 'olho_aberto.gi f';
4. var olhoFechado = 'olho_fechado.gif';
5. var o1ho = $(' dd > a > i mg ' ) ;
6. S(' dd + dd' ) .hide() ;
7. S(olho).attr('src', olhoFechado).show();
8. S(olho) .cl ick(function(event) {
9. event.preventDefault();
10. if (S(this).attr('src') == olhoFechado) {

11. S(this).attr('src', olhoAberto);

12. S(this).parent().parent().next().next().show();
13. S(this).parent().parent().next() . addClass( ' est ilo-um')
14. . slideToggle( ' sl ow');
15. } else {
16. $(thi s).attr( 'src' , olhoFechado);
17. S(this).parent().parent ().next().next().hide();
18. S(this).parent() .parent ().next().addClass( ' estilo-um')
19 . sl i deTogg le(' sl ow');
20. }
21. }) ;
22. }) ;
23. </se ri pt>
.i) [arquivo-9.1d.html]
Cód igo comentado:

Linhas 3 e 4 Criaram-se duas variáveis para armazenar o caminho para a
imagem do olho, com a fina lidade de economizar digitação
posterior no script. Note que, neste caso, a imagem foi gravada
na mesma pasta que o arqu ivo e ralvez vocc esteja considerando
desnecessária a criação das variáveis. Imagine esra situação que
vem se tomando muito popular na construção de sites: concra tar
serviços de terceiros para hospedar imagens. Nesses casos, o
caminho para a imagem, n ormalmente, é um endereço enorme
repleto de números e as variáveis criadas se justificam.
Linha 5 Criou-se uma vari..ivel para definirumseleror jQueryque tem como
alvo a imagem do olho. Noce,na marcação mostrada anteriormente,
que o elemento-alvo imagem é filho do elemento a, que, por sua
vez, é filho do elemento dd, daí o seletor dd > a > img.
Linha 6 Aqu i está dito o seguinte: esconda todo elemento dd que se en-
contra imediatamente após um elemento dd. Em cada resposta,
há três elementos dd que se seguem, então é fácil concluir que este
método jQuery irá esconder o segundo (contém as respostas) e
o terceiro (contém o link para o índice) elemento dd, deixando
à vista o primeiro (contém a imagem do ol ho).
Lin ha 7 Nesta linha,jQuery seleciona todos os elementos da variável o lho
(os elememos imagens inseridos na marcação) e neles coloca o
atributo src com ova lorda imagem de um ol ho fechado.A seguir,
toma esse elemento visível, pois estava oculto por regra CSS em
razão da renderização do ícone indicado r de imagem quebrada
no IE como explicado anteriormente. O script é executado até
aq ui quando a página é carregada e aguarda um clique no olho
para continuar. O scripc fez o seguinte : escondeu a resposta e o
link para o índice (linha 6) e inseriu o olho fechado (linha 7).

Quarta etapa
Seria muico bom se a FAQ em questão oferecesse a facilidade ao usuário de ele
não ter que clicar o link fechar toda vez que passasse para a visualização de outra
resposta. Na verdade, ele não é obrigado a fechar uma resposta para revelar outra,
podendo abrir as respostas uma de cada vez, mas isso aumencará o conceúdo na
cela e a rolagem vertical também, enchendo a cela de respostas e dificu ltando a
consulta a uma resposta revelada anceriormenre.
Nesta erapa, é fundamenra l que o usuário aperfeiçoe seu script de modo a

sempre que uma resposta for revelada, a anterior que renha sido revelada fecha-
rá automaticamente. Desta forma, haverá sempre uma resposta na cela a cada
clique do uswírio.
Suponha que o usuário cenha iniciado a lei cura com a primeira resposta e, a
seguir, clicado para abrir a segunda resposca. Veja, na parte superior da figura
9.6, o instante logo após o dique para abrir a segunda resposta e, na tela inferior,
o fim da a nimação prevista no scripc.
\'.! f AQ CS$ Mozllt.. ffrefo~ rn@

•!> E3" ~ () R"1:1/~ j\J1'1tt•JQuer,·/c..S.oo.'cap_o;1ar-,,.;. 1e.htrrl
Perguntas e respost~s
O quo,slgn11ka a slgl a CSS?

V1<1 1,.1po1!1
Qual í Bnilll<lad• das CSS?

./'i fini~daa~ d;J1) OS$~ ;i d~ ~tlW do HTML :qll~ \>· qQQIQ~et
dsd.,ã!<âo que 'Á~ • ~=ta:çãe.. • ~"""''"~á6 !!o
d~t:«Nntn ~o sl9~r.- M~c que l:l>!j~ dn ti~•«""» ~. <i>.
l!IC. bem t~tl!Q u$~ de eolun~ a tinlllls de 1áêlll~ p;,ra ob1~:11
d~ espa9<1nier~o~ não $~0 ~drnltldo$ w sdrnititliw C'l'TI
R~biç6•s •.m um Pl9Ji10 W.tb Ciln). css. Vaf• ditff
$1mp]jf.e-l\do HTML ~ ~~ttllt!~k ~ oss fJMI
<jple$lilll~.
Figuro 9 .6 - Página poro FAQ: quarto etopo.

A regra CSS ucilizada para esta solução é a mesm a que se usou para a classe
esti l o-um, qu e define borda , padding e cor de fundo para a resposca.
O scripc jQuery é mostrado a segu ir:

1. <scri pt type="text/ j avasc ri pt ">
2. $(document) . ready(function() {
3. var textoVer " ' <a href.."#" style="color:#666; text-decoration:none;"
class="ver''>Ver resposta</a> ' ;
4. S('dd' ) .css('display', 'none');
5. S('dt').after(textoVer);
6. $(' .ver').cl i ck(function(event) {
7. event. preventDefaul t ();
8. S(this).text(' ');
9. S(this) .next()
10. . addCl ass(' esti 1o-um')
11. . s1i deDovm (1500)
12. .sibl i ngs( ' dd:visibl e').sl i deUp( 'fast');
13 . S(this).next(). si blings('dd:visi ble').prev() .text( 'Ver resposta ');
14. }) ;
15 });
16. </script>
~ [arquivo-9.1 e.html]
Código comentado:
Unha(s) Descrição
Lin ha 3 Criou-se uma variável para armazenar o link para ver a resposta.
Aqui, oprou-se por criar a marcação e a escihzação via jQuery e
atribuiu-se à classe denominada ver o elemenro link. Ucilizou-se o
elemenro a pa ra links, com a finalidade de garanriracesso via teclado.
Note que, nesta solução, não foi necessá rio um link para fechar a
resposta,já que uma resposta revelada fechará, de modo automático,
outra eventualmente aberta.
Linha 4 Esta você conhece das ecapas anteriores.
Linha 5 lnseriu-se a marcação HTML do link para ver a resposta, imediata-
mente após o elemento dt que contém a pergunta.
Linha 6 Ao se clicar o elemento com a classe denom inada ver (o link para
ver a resposta), o scr ipr entra em ação.
Lin ha 7 Tem o mesmo efeiro de return false; da li nguagem JavaScript, evi-
tando que o navegador siga o link; no caso em questão, a janela rola
para o copo.
Linha 8 Retira o texco do link para mostrar a resposta.


Linha 9 Seleciona o elemento que se segue na marcação ao elemento clicado.
É o elemento dd que contém a resposta. Não esqueça que elementos
inseridos com uso do script passam a fazer parte do DOM, ou seja,
tudo se passa como se efetivamente estivessem presentes na marcação,
embora você não consiga visualizá-los no código HTML da página.
Linha 10 Estiliza, adicionando uma classe que consra das CSS, o texto da
resposta.
Linha 11 Revela a resposta.
Linha 12 Seleciona todos os elementos-irmão do elemento dd - Sthi s). next()
- que sejam rambém dd e estejam visíveis - siblings('dd:visible')
e esconde-os por meio do efeiro slideUp() a urna velocidade de 1,5
segundo. Fechamento da resposta que se revelou anteriormente..
Lin ha 13 Esta linha destina-se a repor o re.xro do link para ver a resposta
que está sendo fechada. Experimente retirar essa linha, visualizar
a página no navegador e constata r que para uma resposta fechada
automaticamente, não há mais como revelá-la outra vez.
Sugestões:
• Faça uma cópia deste arquivo e experimente os efeitos hide(), show() , fadeln()
e fadeOut(), com diferentes velocidades. Depois, altere o disparador do evenco
de cli ck para mouseover, mouseout,mousemove, keydown, keyup (estes dois últimos só
para navegação por teclado).
• Nesta solução, não se mostra o link para o índice quando se revela ares-
posta. Mod ifique o script para mostrar o link. Dica : adicione, via script,
classe(s) aos elementos HTML para viabilizar a solução. Por exemplo:
use S('dt + dd ' ).addCl ass('resposta-ocul ta'). Utilize o seletor de atributo
S('a [href,,"#i ndice"] ')para selecionar o link para o índice.
Experimente sempre, pois este é o melhor caminho para o aprendizado.
Quinta etapa
'esta quinta etapa, será desenvolvida uma solução na qual o usuário, ao entrar
na página da FAQ, encontrará somente a lista das perguncas e uma instrução
orientando-o a clicar uma pergunta para revelar sua resposta.
O efeito final dessa solução pode ser visto na figura 9.7, onde constam, na
pane superior, o estado inicial da página ao ser carregada e, na parte inferior,
o resu ltado após o usuário ter clicado a primeira pergunta. O clique em outra
pergunta fecha automaticamente a resposta anterior já revelada.

't) 1AQ l"SS - Mozi1'4 1irofox ~~IE}
FAQCSS
indice
O qu • signnca o .,g1;1 CSS?
2. Qual é a fih•lidade d.,; C:iS?
3 Por ~tl\l de,oo usar CSS'I
~ Ow1~a.,.:1:111i•g~n~dQ """' CSS?
5 As C$S <!$hÍo d• • :ordo corn •s Web Sla ~daids?
G O 111 ' e ••9.'• CSS 7
7 Como e 3c~.o uma 1e9rif CSS t
8 Ou:i1e ~aracme~ ~~o permílido~ cm CSS'
9. /\e sinmo CSS & ~911~i'IOI 3 m~10hcUC;slm nu:;cuk>~?
10;. Potiso •otlua cornenl.a «os nu ~e.9ra; CSS?
Chq:Utl e~ urri~ pe1gunta par-8 -.tSu-<'h?l)r & UJ.3Pl! 13
7 Como e Scr"e>l'O um3 re9-9 CSS 7

6 Ou-1t1$' ç ii~..;li1•s tj ~\,) pvrtt'>itidi)i wm CSS?
9. .A·JS. i1nta11 ~ CSS é sen;#el 1' 01a1útcut;t..hrnnOuuta$?
10. Po-:.-so 1ncluw conl~rdii'tos ria.s. !fgtas. CSS?
Chq~$ o-m um~ pergunt;; p~~ t..Stkllrzar a: 1-cap'.)st~
CSS ti • •'91• p~ra CasaodÍDij Sly)e Soeetgl!'l• em pachsguio 1~

1radvz1do paro folf>tM! diJc et;tíi.>..,,, 056C619 .. h.a da tm1iir· é, q u~
ui\ ilocuowrtu ""''ª ""º
d$.ftn1dá• •llj;.;llÍ dv r~1111t~Ç\lo ou d•
estito.s. ii .serem 1rpl1Cítd13 'Ald'S' e.l~me-to$ nttuturafS- de
mJ<co~icl ·
Figuro 9. 7 - Página poro FAQ; quinto etapa .
Observe a seguir os códigos para essa solução.
..... CSS:
.invisível {display:none;}
. vi sive1-fina1 {
border:lpx solid #c30;
padding: Spx lOpx;
background:#ff9;
}
ol li a {
color:blue;
text-decorati on :none;
}
.cor-um{color:red;}
.cor-dois {color :blue; }

..,.. jQuery:
1. <script type="text/javascript">
2. $(document) .ready(function() {
3. S('dt, dd').addClass('invisivel');
4. S('ol').a~er('<P>Clique ern uma pergunta para visual izar a resposta</p>');
5. S('ol li a') . click(function() {
6. $(' dt' ) . css({display: 'nane'});
7. $(this).removeClass('cor-dois ') .addClass('cor-um');
8. S(this).parent().siblings().children().addClass('cor-dois ' );
9. var i dCl i cado = S(this) .attr('href ' );
10. S(idClicado +' + dd').siblings ( 'dd:visible').hide();
11. $(i dCl i cada) . s l i deOown(1500);
12. S(idClicado +' + dd').fadeln(2500).addClass('visivel-final');
13. S(idClicado +' + dd + dd ' ) .show() ;
14. }) ;
15 . }) ;
16. </scri pt>
Código comentado:
Unha(s) Descrição
Linha 3 lnsere a classe invisivel em todos os elementos dt (este elemento
contém a pergunta, logo acima na respos ta) e dd (texto da resposta
e link para índice logo abaixo da res posta).
Linha 4 Insere um parágrafo, logo após o índice, contendo um rcxro expli-
cativo do funcionamento da página.
Linha 5 O script entrará em ação quando se clicar o texto de uma pergunta.
Linha 6 Retira a pergunta anterior quando se revela uma nova resposta. Sem
esse mérodo, a cada resposta revelada, as perguntas logo acima dela
permanecerão no lugar, uma embaixo da outra. Experimente retirar
esra linha e navegar nas respostas.
Linha 7 Atribui a classe cor-um (vermelha) à pergunta clicada, com a finali-
dade de destacá-la. Remove a classe cor-dois (azul) se p resente no
elemento.
Lin ha 8 Seleciona todos os elementos a no ú1dice, que são irmãos do ele-
mento clicado, e aplica neles a classe para a cor azul, garanàndo
que somente a pergunta clicada será destacada na cor vermelha.
Para melhor entender a explicação para as linhas 7 a 9, considere
que o usuário realizou um segundo clique no link. Se quiser tentar
entender a lógica do script partindo do primeiro clique do usuário,
talvez tenha dificuldades para compreendê-la.
Linha 9 Armazenou-se em uma variável ova lor do atributo href do elemenco
a clicado (pcrgunca clicada).


Linha 10 Aqui o seletor-irmão adjacence (seletores do ripo E + F) - S(i dCli cado
+ ' + dd') seleciona o elemenro dd que se segue imediatamente ao
elemento cuja i d é o valor da variável i dCl i cado. Se você acompan har
atenta mente a marcação HTML, constatará que se selecio no u a
resposta à pergunta clicada. A seguir, escolheu-se, entre os irmãos
desse elemenro, aquele que se enconrra visível (dd:visi ble); rrara-se
da resposca revelada que se escondeu. Resumindo : esca linha es-
conde a resposca revelada quando o usuário clica para revelar o utra
resposta.
Linha 11 Revela a pergunta logo acima da resposta em u m efeito de movi menro
vertical de cima para baixo (sl i deDown()}.
Linha 12 Revela e estiliza a resposca à pergunta clicada.
Lin ha 13 Revela o link para o índice logo abaixo da resposra.
Com a conclusão dessa quinta etapa, fin alizou-se a explicação dos fundam en-
tos básicos para revelar e esconder conreúdos de uma FAQ com o uso de jQuery.
Utilizou-se uma FAQ CSS como exemplo para desenvolver os códigos, mas os
conceitos se a plicam a qualquer tipo de conteúdo, incluindo menus e im agens. É
importante que você tenha entendido a lógica e o funcionamento de cada script
mostrado nessas cinco etapas.
Os exemplos mosrrados foram desenvolvidos para uma marcação H TML em

uma página sem outro tipo de conteúdo. Em um site real, a FAQ ou outro co n-
teúdo qualquer no qual se aplicaria jQuery estariam inseridos em uma página
com colunas de navegação, topo, rodapé etc., com seus divs, parágrafos, ul, ol , dt,
dl , dd, hl, h2 e urna sér ie de outros elementos HTML que compõe uma página
web. O s seletores jQuery devem selecionar somenre os elemenros envolvidos nos
conteúdos a animar. Assim, se a FAQ em questão estivesse inserid a em uma pá-
gina web, seria necessá rio prever meca nismos para que o script não selecionasse
elementos fo ra da marcação da FAQ.
Uma sol ução seria criar um container para a área da marcação HTivlL onde
será aplicado o scripr e fazer referência a esse container, como elemento-raiz para
todos os seleto res jQueql Observe os códigos a seguir.

Capitulo 9 • Revelando conteúdos 265
..... HTML:
<div id="topo"><p>Topo do si te<IP><ldiv>

<di v id="principal ">
<hl>Titulo da página<lhl>
<p>Parágrafo<IP>
.. . mais conteúdo...
<h2>FAQ CSS<lh2>
<div id="faq">
... H~L à aplicar jQuery
<ldiV> 
... mais conteúdo...

<ldiV> 
<h4>Navegação</h4>
<l i>Link l<l li>
<1 i>Li nk 10</li>

<ldiv>
O s seletores jQuery teriam uma sintaxe como a mostrada a seguir:

$('1tfaq p' ) ;
$('1tfaq a.ver') .click(function() {
li script aqui
}) ;
$( '1tfaq' + idClicado + ' + dd') :
$(' ltfaq dt ' );
9.2 Página de notícias

Para encerrar o assunto proposto neste capículo, você irá estudar um caso d e
aplicação prática bem mais abrangente que a FAQ. Praticamente rod os os blogs e
muicos sites utilizam a técnica d e apresen tar o título de uma matéria, seguido de
um pequeno a-echo descritivo d o conteúdo d a matéria e um link do tipo "Saiba
mais.. .'; convidando o usuá rio a clicar o link e ler a matéria.
Inspirando-se nessa forma de apresentação d e matéria ou notícia, você irá

aplicar o que aprendeu sobre revelar e esconder conteúd os, em uma página de
notícias, aproveitando para estuda r o seletor de negação, ou filtro de negação
jQuery, o loop com o método each() e alguma manipulação de arrays.

Marcação básica
Tal como fez para a FAQ, você uti lizará uma marcação HTML básica na qual
consta um total de quaa·o notícias. O script será desenvolvido de modo a ser
aplicável a qualquer número de notícias. Considere uma inserção d inâmica de
notícias.
A renderi zação da página básica de notícias, para a qual o scripr será desen-
volvido, é mostrado na figura 9.8.
tl Livro jQuery do Moujor 1 Uotidu · Mozilla 1irelox ~[15' ~
.~I ·
Not icias
Í Notfcla~~-· - - - - · --- - - · - --··--
:1 Lo1"'1l ipsum dolor srt arn e-1, cons«l~tu• r acípi;,m~ elrl. t.Wrlll • l• lfenll,
punn: qúrs lauceret faucibus, arte auQ'lia: rn; Jesuad<t mj. id rhom-us
~ugue torem egfl f M
UI Wlí<iludiri S'OÓ~l~s PU!U'- Pha$9llu<l (iJtijrO (Q"1$, blindil - ·
1 COh\n"O!lJ UI. lh\pcnJ CI IJ1. ntbh SIJ"..l!CM~~e 9 Qlll((li. Ooncc
ullamco1per '"''"~ dotc r. Outs vllae lp•urr~.Maeten•s oapll>~s hend1ertl
dlam. Mort>I vartus. m~S!i;;- td pro!ium ac;cum~an, nunc. torom conq.uo
t boro, til ~• ls mod motu• t•btro ld nu I• Oui• pó~u e1 e oolo u d "1!li1
\dpt&t~ wneni tl9.. Su~pendi s: s;e f t dlJt at metus 8(J(~CM tr1ng1 11:a-
• C:U-.b1ru1ínterdum •uQU• a pede.
Notici a dois
UI •Olitiludin Jlld ~l i $ Puni$ Ph ~$~!tu i lll>ijr(> 1\1'1$, à lanClil !UI<,
cGh\rrooa UI, 1moctll' ct u1, nlbh Sus~tnGis~e P-01C1!11. Done<
Figura 9.8 - Página básico poro notícias .
O documento em questão encontra-se em sua forma mais elementar, com

alguma estilização básica. Confo rm e se pode observar na figllrn 9.8, as notícias
vão sendo inseridas com seu texto compleco, podendo conrer figuras ou outro
tipo qualquer de conteúdo. Ainda que o usuário desabilite suporte às CSS em
seu navegador ou abra a página em um navegador de texto, terá acesso a todas
as notícias e nenhum conceüdo será perdido.
A folha de estilo e a marcação HTML da página básica para os exemplos são

mostradas a segui r.
... CSS:
1. <style type="text/ css" media="all ">
2. body {width :400px; font:12px/1.2 Aria.l, Hel vetica, sans-serif; margin: l Opx
auto O auto; padding:O; }
3. hl {width:41Spx; color:#c60; font-s i ze:20px; padding-left:Spx; border-
bottom:lpx sol i d #c60;}

19 $(' .sm') . text('Saiba mais . . . ');

20 }) ;
21. }) ;
22. </script>
Código comenrado:
llnha(s) Oescriçào
Linha 3 Analise este seletor por panes. O sinal estrela (*) identifica o
seletor universal, que enconLra rodos os elementos HTML É
o seu conhecido curinga. A sintaxe «:not (h2. tit) significa o se-
gu ince: todos os elementos menos os cabeçalhos h2 com a classe
t it. Então, .noticias ~ :not(h2 .t it) é um seletor composro que
seleciona tudo, dentro dos divs com a classe noticias , menos o
tírulo com a classe tit, e esconde hide(). Resu mindo : rodos os
conteúdos serão escondidos menos seus rftulos.
Linha 4 Seleciona os títulos das no tícias e insere dentro deles um link
denom inado "Saiha mais... " com a classe sm. O mérodo append()
insere marcação HTML em um conrainer existente. Esca linha
resu lca na seguinte marcação: <h2>Noticia xxx <br /><a href="#"
class .."sm">Saiba mais ... </a></h2> . Criou-se um link dentro
do títu lo da notícia. A renderização sem esrilização para essa
marcação far ia o texto do link ser renderizado ao lado do texro
do título e em fonte do tamanho e cor da do tímlo. Alreraram-
se a posição, a cor e o tamanho do link com declarações CSS
pa ra a classe sm. Link dentro de um cabeçalho? Uma agressão à
marcação em con fo rm idade com os padrões? Optou-se por essa
solução, propositadamente, com a fin alidade de alertar quanto à
escolha dos métodos jQuery. O scri pt em questão irá funcionar
sem problemas, mas aos olhos acentos de um desenvolvedor
consciente dos Padrões \Veb essa marcação seria reprovada. Ou
não? Excesso de preciosismo? Alguém poderia argumencar que
a marcação extra não aparece no código da página. Cabe a você
decidir o que fazer. Como sugestão, urili ze um outro método
jQuery no lugar de append(). O q ue você acha de after()?
Linha 5 Insira o link para fechar uma notícia aberta. A inserção se faz
dentro do div q ue contém a notícia logo em seu início prepend(),
pois se deseja o link em cima. Se tivesse usado append(), o link
teria ficado debaixo do div. Seria melhor embaixo? Ta lvez sim.
O leitor chegaria ao final da notícia e não haveria necessidade
de rolar de volta para cima com a finalidade de encontrar o link.
Utilizou-se prepend() com o objetivo de destacar a diferença para
append() .
Linha 6 Início da ação quando o usuário clica o link "Sa iba mais...".


Linha 7 j á comentado anteriormente. Mesmo efeito de return fal se da
linguagem .JavaScript.
Linha 8 Entre rodos os elementos ancestrais cio link clicado, enconcre
aquele cuja classe é not ici as . Selecione codos os seus filhos e
revele-os. Acompanhe na marcação. Os elementos ancesrrais
do link são, em ordem do mais próximo para o mais disranre,
h2 (o lin k está denrro de um h2), di v com a classe noti cias, body
e, fi nalmenre, html. Resu mindo: será revelado rodo o conteúdo
dentro do di v onde se encontra o link cl icado.
Linha 9 Coloca uma cor de fundo diferente (verde) no di v da notícia
revelada.
Linha 10 Esra linha só causa efeito após o primeiro clique. Destina-se a
fechar aucomaricamence uma notícia revelada quando ourra
recebe um clique para revelação.
Linha 11 Devolve a cor de fundo para um div que aca ba de ser fechado.
Note que essa cor #cff (azu 1-clara) é a mesma declarada nas CSS
(linha 8 das CSS).
Linha 12 Devolve o link "Saiba mais..." para um di v que acaba de ser
fechado.
Linha 13 Retira o link "Sa iba mais..." do div que acaba de ser revelado.
Linha 15 Início da ação quando o usuário clica o lin k "Fechar''.
Linha 16 Comentado anteriormente. Mesmo efeito de return false da
linguagem javaScripr.
Linha 17 Esconde todo o conteúdo do div menos o título da notícia e o
link. Note o seletor de negação.
Linha 18 Devolve a cor azul ao di v fechado.
Lin ha 19 Devolve o link "Saiba mais..." ao div fechado.
Segunda etapa
O objetivo para esta segu nd a etapa é fornecer o trecho d o texto que inicia a
notícia com o li nk "Saiba Mais. ..".
Esta solução está sendo p roposta com a fi nalid ad e d e est udar o uso de intera-
ção e recuperação d e elementos d e a rrays. Veja a segu ir um maneira d e manipular
arrays com a biblioteca jQ ue r}~
Observe, na figu ra 9.10, o resultado final d essa solução.

'C>Lrvro i Oucry cio M.lujor J lloticios Mozilla íircfox ~@@
· C
Notícias
Nohclaum
Te>)O da i:nme •• nolitla unm lpsum dolo• s~ amel tor~ctel!Je•
;_ · ~l~ISClll(l e'll [SOlb• m• l ~J
-------------------------------------1
• Noticia dois
. Tew d• S"!llrd.l n.:iitla UI solllutudln sodal:s purus Ph•s.ellus l1be111 j
: felis, bl.,.:fll no<, commodo ut. "''"'"'°'
tr., nibh. !Saiba ma"J 1
...... - . .. . .. • .. . . l
1
· Noticia tres 1
Te>Jo da l~elta nolftlJ Curabll!Jrhendrer 1e1i 1uUuoue Ctat ora.Ida

~~~:~""''.!._________ --- -·------ --- ______ j
~-Not~j;~~~tro -------------------1
: Tmo d•cuolli n:itltla . Oon•r eleifenj fmll'lla mi. \/lvam.svet m;su. !
; Aenear. 1nt?1dum pflen1esque sem. IS~iba ma si 1
Figura 9. 1O - Pógina para notícias: segunda etapa.
Para capturar o trecho de texto que irá aparecer inicialmente antes do link
"Saiba mais.. :: marque-o no HTML da pági na usa ndo o elemento neutro span. Tal
marcação é dispensável, pois você pode capturar o texto com jQuery. Essa opção
de captura é um exercício para você testar seu aprendizado.
Na marcação, cada notícia recebe um elemento span no início do primeiro

parágrafo como mostrado a seguir. O conteúdo desse elemento irá aparecer antes
do link "Saiba mais.. .''.
lill> HTML:
<hl>Notícias</hl>
<dív class=''noticias">
<h2 cl ass="tít">Notícia um</h2>
<P><span>Texto da primeira notícia. Lorem ípsumdolor si t amet, consectetuer
adipiscíng el ít .</span>
Morbí eleífend, purus ... </p>
O desa fio é identificar o conteúdo de cada elemento span, capturar e escrever,

como mostra a figura 9.10.
A seguir, o scripr jQuery:

1. <se ri pt type="text/j avas e ri pt">
2. S(document).ready(functíon() {
'v1atenal corn d1re1 o& autorais

CAPÍTULO 10
Efeitos em tabelas
Neste capítulo, serão abordados alguns efeitos da biblioteca jQuery destinados

a incremencar a apresencação de rabeias de dados em documentos para web.
Destaca-se que, também para tabelas, conti nua válido o conceito de JavaScript
não obstrutivo.
10.1 Destinação das tabelas HTML

Segundo os fundamentos dos Padrões Web, as rabeias HTM.L se destinam à
apresentação de dados tabu lares. Veja alguns exemplos de dados tabulares: pesos,
medidas, índices financeiros, preços, resultados de competições etc.
É equivocado o conceiro, disseminado principalmente por aqueles que se
iniciam no escudo dos Padrões Web, de que as rabeias são proibidas na marcação
HTML Ao contrário, tabelas são previstas pelo \V3C, são legais, e devem ser
usadas para apresentar dados.
Tabelas não são admitidas na construção de layou eo u para obtenção de efeitos
de apresentação. Essas tarefas são de responsabilidade exclusiva das CSS.
10.2 Marcação de tabelas

As Recomendações do W3C para a HTML preveem os seguinces elementos para
marcação de tabelas: t abl e, caption, thead, tfoot, tbody, colgroup, col, tr, th e t d.
São dez elementos dos quais colgroup e col são de uso específico e tfoot des-
tina-se a tabelas que contenham um rodapé. Assim, restam oito elementos que
deveriam estar presentes obrigatoriamente na marcação de qualquer tabela, por
mais simples que esta seja.
275
Qua ntos desses elementos você usa na marcação de suas tabelas? A maioria
das rabeias encontradas na web usa os elemenros table, tr e t d. Se você é um
dos que usam somente esses três elementos, estud e e repense seus conceitos
de construção de tabelas. Não é do escopo desce livro aprofundar esse assu nto,
contudo, para as rabeias desce capítulo, será utilizada a marcação segundo as
Recomendações do W 3C.
10.3 Tabela de horários de ônibus

Para explicar os efeitos propostos para esre capítulo, será utilizada uma rabeia
publicada por uma empresa de ô nibus fictícia,denom inada Viação Alfa, destinada
a apresentar os dados tabulares referentes aos horários de partida e chegada de
seus ônibus, bem como a classe do ônibus e o preço da passagem. Note ainda
que não houve preocupação com a apresentação de dados coerentes na tabela,
pois o objetivo é mostrar as técnicas de criação de efeitos, e não comparar preços
de passagem o u duração d e viagem.
Marcação básica
Veja a segu ir a marcação básica da tabela em questão. Antes de prosseguir co m
seus estudos, procure acompanha r com deta lhes a marcação HTML e esti lização,
com a finalid ade de facili tar o entendimento dos scripts desenvolvidos.
.... HTML:
1. <table id="horario">
2. <Caption>Viação Al fa - Horários</caption>
3. <thead>
4. <tr id="hori zontal"> 
5. <th>Dest i no</th>
6. <th scope="col ">Saída</th>
7. <th scope=" col ''>Chegada</th>
8. <th scope="col ''>Classe </th>
9. <th scope="col ">Tarifa </th>
10. <th scope=" co l ">Freqü ência</t h>
11. </tr>
12. </thead>
13. <tfoot>
14. <tr> 
15. <td colspan:"6">Válida para o periodo de 02/10/2008 a 30/11/ 2008.</ td>
16. </tr>
17. </tfoot>

Capítulo 10 • Efeitos em tabelas 277
18. <tbody>
19. <tr> <! -- primeira l i nha de dados da tabela -->
20 . <th scope=" row">Brusque</th>
21. <td>06:45</ td>
22. <td>14:30</ td>
23 . <td>Convencional</ td>
24. <td>RSS0,00</td>
25. <td>Di ári a</td>
26 . </ tr>
27. . .. marcação idêntica para quinze li nhas i ntermediárias da tabel a
28. <tr> 
29 . <th scope=" row">Xaxim</ th>
30. <td>07:00</td>
31. <td>14:00</t d>
32. <td>Executivo</td>
33. <td>RS165,00</td>
34. <td>Dom . </ td>
35. </ tr>
36. </tbody>
37. </t abl e>
Código comentado:
Lin ha 1 Atribu iu-se um identificador i d para a tabela cm questão.
Linha 2 Uso do elemento capt i on para fornece r uma descrição da na tu reza
da tabela. Em rabeias ma is complexas, essa descrição deverá ser
complementada com o uso do atribmo summary no elemenco tab l e.
O atributo summa ry desrina-se a informar a fina lidade d a tabela e
fornecer uma descrição de sua estrucura.
Linhas 3 e 12 O elemento thead destina-se a marcar as linhas que compõem o
cabeçalho da rabeia. Neste caso, a tabela contém uma linha de
cabeçalho. Esse elemento é <) seletor natural para o cabeçalho
da tabela.A maioria dos desenvolvedores não usa, erroneamente,
esse elemento.
Lin has 4 e 11 Elemento tr para marcação da linha de cabeçalho.
Linhas 5 a 10 Marcação das células do cabeçalho com o uso do elemento t h. A
maioria dos desenvolvedores usa, erroneamente, o elemento td
para marcar células de cabeçalho. Note a presença do atributo
scope para fins de acessibilidade.


linhas 13 a 17 Marcação do rodapé da tabela com o uso do elemento tfoot.
Parece estranho o rodapé vir logo após o cabeçalho, mas é isso
mesmo. As Recomendações do W3C para a HTML preveem que
o cabeçalho e o rodapé sejam carregados na página a ntes do
corpo da tabela que deverá ser renderizada na seguinte ordem:
cabeçalho, rodapé e corpo. lsto é muito conven iente em rabeias
com muitas linhas que demoram a carregar. O usuário visualiza
o cabeça lho e o rodapé imediatamente enquanto as linhas vão
sendo carregadas. Esseelementoé o seletor natural para o rodapé
da rabeia.A maioria dos desenvolvedores não usa, erroneamente,
esse elemento.
Linhas 18 e 36 O elemento tbody desti na-se a marcar as linhas que compõem
o corpo da tabela. Neste caso, a tabela contém dezessete linhas
em seu corpo, das quais somente a primeira e a última foram
mostradas na marcação. Esse elemento é o seletor natural para
o corpo da cabela. A maioria dos desenvolvedores não usa, erro-
neamence, esse elemento.
linhas 19 a 35 Marcação das linhas do corpo da cabela. ore a presença do
atributo scope na primeira célula de cada linha para fins de
acessibi lidade.
Na figura 10.1, mostramos a renderização da tabela segundo a marcação

básica proposta.
'lj Livro jQuery do M•ujor I Tdbeku · MoLlll• Firefox rn~
V:açào AJA - Horário$

D~•tiuo Said• Ch•~•d• Cl>ss• Tarifa F1• qüemi.
Bm •qu• 06:<5 14:30 ComrctlA;ional Rts0,00 Diá.'>a
Joimílle l 2-30 21:00 Convero:oonal Rtl00,00 S•f~ado
Siu p.,Ju 19.00 06.00 Lcilo Rl:l 50.00 Tufai•
rorto Urúõo 13-00 18·00 Conun<oon.U Rl'60,00 Di.ina
Coçador 00:30 23:00 E:u?clllivo Rt210.00 Se,i o Dom
Sorocaba 2 1:15 23:45 Leito Rt:280,00 Sáoado
llhunenan 0800 16·00 ConvtncootllJ Rli8~.oo Diána
It,.jru 23-00 06:00 E:;o:cuhvo Rtl65.00 QI:• e Sáb.
LajM 16:45 19:30 Execlll!vo Rt:50,00 Te:i;a
u..... ,...g• 14.30 20.00 ~ito Rl:lü0,00 Sábado
Cauoinhu 1930 07:30 Leilo Rt190.00 Se~ 11 S~
S Fco. Sul 0 1.()0 07:00 Con•Jtro:ional Rt90.00 Ql:a a St:L
Joop ba 06.30 12.00 Executivo R&10,00 S<.i e Qua.
.JJWagn:i do Su l 23 ·15 08'45 L.110 Rl:2~0.00 S.foado
X :uu:m• 18.00 22:00 Elcecun•o R&75.00 Dián01.

Cl1~petô 13.00 21:00 Execlll!•o Rt105.00 Ql:a e Dom.
Xarim O'i 00 14 00 Exrcwvo RS165,00 Dom
Vãlida J>Ull o pcrlodo de 02110/2008 a 30/1 11 2008
Figura 1O.1 - Tabelo sem estilização .
'v1atenal com d1re1to& autorais

Criou-se uma folha de estilos para a tabela em questão, mostrada a seguir.
.... CSS:
<Style t ype="text/css" media="al l">
body {
width :600px ;
font :80%/l.2 Arial, Helvetica, sans-serif;
margi n:30px auto;
padding :O;
color:/1666 ;
}
table {
width :SSOpx;
border-collapse :collapse;
margin:O auto;
}
caption {
text-align:right;
margin-bottom:0.3em ;
border-bottom:lpx sol id #333;
padding-right:0 .3em;
t head t r th {
text-align:center;
border-bottom:2px sol id #999;
border-le~ : 2px solid #999;
}
tr td , t r th {
padding:lpx Spx ;
text-align:l eft ;
font-size:0 .9em ;
border:lpx dotted #333;
}
tfoot tr td {
text-align:center;
border- top:2px solid #999;
}
</styl e>
.iJ [arquivo-10.3b.html)
Trata-se de uma fo lha de estilos míni ma destinada a centra lizar a pági na e
inserir apresentação básica com a finalidade exclusiva de faci li tar a visualização
do exem plo.

Capítulo 10 • Efeiros em tabelas 281
Zebra par-ímpar
É a rradicional estilização de linhas pares com uma dererminada cor de fundo e
impares com outra cor. O primeiro efeito consiste em simplesmente atribuir uma
cor de fundo a uma das linhas (par ou ímpar) e deixar a cor de fundo da outra
com a cor-padrão do ftmdo da tabela .
Na figura 103, veja o efeito fin al de uma estilização zebra par-ímpar, obtida
com jQuery; com uma d as cores sendo a cor-padrão da tabela.
~~~~~~~~~~~~~~~~~~~~~~~~
t'.> Livro JQucry do IA4UjDr f Tabcl•• · IA02illa firefo~ (;111=iJr>'J
Figuro 10.3 - Efeito zebro por-ímpor, uma cor-padrão.
A biblioteca jQuery prevê os pseudosseletores :even e :odd que se destinam a

selecionar as ocorrências, respecüvameme, pares e ímpares do conjunto de ele-
menros-alvo do seletor, qualquer que seja ele.
Assim, se você escrever o seletor $(' table#horario tbody tr :odd ' ), esrará selecio-
nando cedas as linhas ímpares contidas no corpo da rabeia cujo id é horario.
Agora observe o script a seguir:

$(docunlent).ready(function() {
$('table#horario tbody tr:odd').addC1ass( ' impar');
}) ;
</scri pt>
ij [arquivo·10.4a.html]

Os parâmetros odd ou even selecionam os elemencos-filho ímpares ou pares

respecrivamence. Ao contrário dos pseudosselecores :odd e :even estudados ante-
riormente, as ocorrências pares são a segu nda , quarta etc., poi s a contagem para
o índice não se baseia em conrngem JavaScripc e, assim , começa em um e não
zero. Desta forma, tr:nth-child(odd) seleciona as linhas ímpares de uma rabeia ,
enquanto tr :odd, as linhas pares.
O parâmetro equaçào destina-se a selecionar elementos-filho em uma posição

definida pelo resultado de uma equação. A forma geral da equação é mostrada
a seguir:
x = an + b
Onde x é a ordem numérica onde se encontra o elemento-filho, a e b são nú-

meros naturais e n são os números do conjunto {O, 1, 2, 3. .. } .
Por exemplo:
Equação Seleção
ln Seleciona as ocorrências 2x0 = O, 2xl = 2, 2x2 = 4, 2x3 = 6, .. ., ou
seja, ocorrências pares.
2n + l Ocor rências 2x0 + 1 = 1, 2xl + 1 = 3, 2x2 + 1 = 5, 2x3 + 1 = 7,. .., ou
seja, ocorrências ímpares.
3n + l Ocorrências 3x0 + l = l, 3xl + 1 = 4,3x2 + l = 7, 3x3 + l = 10,. .., ou
seja, ocorrências d e três em três.
5n -1 Ocorrências 5x0 - 1 = -1, 5xl - l = 4, 5x2 - 1 = 9, 5x3 - 1 = 14,. .., ou
seja, ocorrências de cinco em cinco.
Aqui, a primeira ocorrência resu lLOu em um número negativo. Nú-
meros negativos como resultados da equação são ignorados para
efeico de seleção.
f: fácil concluir que o uso de uma equação para selecionar ocorrências aumenta
muito as possibilidades de seleção e combinações.
Efeitos zebra mais compl e,xos e diferentes dos escud ados até aqui podem
requerer o uso de uma equação combinada com os métodos prev() ou next()
destinad os a selecionar elementos ames e depois, respectivamente, do elemento
seleciona do. Por exemplo:
Seletor Seleção
$('tr :nth-child(4) Seleciona a quarta lin ha da coluna.
$(' tr:nth-chi ld(4).prev() Seleciona a terceira linha d a coluna.
$(' t r :nth-chi ld(4). next() Seleciona a quinta linha da coluna.

Com a fina lidade de verificar seu aprendizado, ames de prosseguir a leicura,

faça uma cópia do arquivo-10.3b.html e, nele, escreva o script para obter o efeüo
zebra dois-dois mostrado na figura 105.
O Livro JQuery do Maujot 1 TabeldS - MoLi114 flrefo"' ~!Qj(EJ
figuro l 0.5 - Efeito zebro dois-dois.
Observe que as linhas a estilizar com cor de fundo diference da cor-padrão

são as linhas: 3, 7, 11, 15... e as linhas que se seguem a cada uma delas: 4, 8, 12, 16...
ou, dito de outra forma, as linhas: 4, 8, 12, 16... e as linhas que anrccedem cada
uma delas: 3, 7, 11, 15...
Assim, há duas opçôes de script. Em ambas as opções, a série ele números a

selecionar dá um salro de quatro unidades. No exemplo em quescâo,será adorada
a segunda opção na qua l os números são múltiplos de quatro.
O script é o seguinte:
<scri pt ty pe="text/javasc ri pt">
Hdocument). ready(function() {
/" seleciona os mú1tip1 os de quarto '"/
$(' tab le#horario tbody tr: nth-child(4n) ' ). addCl ass(' cor_um');
/* sel eciona os anteriores aos múltiplos de quarto */
$('table#horario tbody tr:nth-child(4n)').prev().addClass('cor_um');
});
</scri pt>
A classe .cor-um recebe a regra de esti lo mosrrada a segu ir:

.cor_um {background:#bfe2d8;}

Progressão aritmética
Séries de nlimeros n as quais cada núm ero é igual a seu preced ente mais um valor
consta nte são deno minad as d e progressão aritmética (PA). J\ m atem ática ensina
que o p rimei ro termo de uma PA deno mina-se r.c rmo inicial, o valor constante é
a razão da PA é a fórmula do term o gera l é:
an = (n - l) ~ r + al
Onde an é o termo d e o rdem n, al é o primeiro termo, r é a razão e n é a o rdem

do termo.
Aplicando a fó rmula na primeira PA 3, 7, 11..., você e ncontrará:
an = (n-1)"4 + 3 => 4n - 4 + 3 => 4n -1
Aplica ndo a fór mula na segu nda PA 4, 8, 12..., você encontrará:
an = (n-1)"4 + 4 => 4n - 4 + 4 => 4n
Assim, com o uso da fórmu la das PAs, há uma forma mais genérica d e seleção
sem a necessid ade de emp rego dos métodos prev() e next(), e o scripc em questão
tem a segu inte sintaxe:
S('table#horario tbody tr:nth-child(4n-l) ' ).addClass('cor_um');
S('table#horario tbody tr:nth-chi l d(4n)').addClass (' cor_um');
} );
</script>
.iJ [arquívo-10.4c.html]
Zebra três cores

A técnica para este efeito é a mesma pa ra o efeito anterior. Desenvolva cal solução
ad o tando três cores diferences da cor-pad rão e, assim, sua folha de esálo con-
templará crês classes a serem inseridas por scripr. As regras d e estilo para essas
classes são mostrad as a segu ir:
.cor_um {background:#d6e2eS;} /* cor azul mais clara que a da cor três ~1
.cor_dois {background:#bfe2d8;} /* cor verde-clara */
.cor_tres {background:#add6ef;} /*cor azul-clara ~1
Observe, n a fi gura 10.6, o efeito fi na l com três cores alcernadas.

Figuro l 0.6 - Efeito zebro três cores.

Note, na figura 10.6, que as três cores de fundo se distribuem pelas linhas da
tabela conform e mostrado a seguir.
Cor Unhas
cor-um 1,4,7,10,13,16. PAde razão igual a 3 e al igual a 1
cor-dois 2,5,8,HJ4,17. PA de razão igual a 3ea 1 igual a 2.
cor-tres 3,6,9,U,15. PA de razão igual a 3 e a l igual a 3.
E os seletores são:
Cor Seletor
cor-um (n-1Y3 + 1 => 3n-3+ 1 => 3n-2.
cor-dois (n-1)'3 + 2 => 3 n-3+2 => 3n-l.
cor-tres (n-1) •3 + 3 => 3n-3+3 => 3n.
Finalmente, o script para o efeito zebra três cores:

<script type.."text/javascript">
S('table#horario tbody tr:nth-child(3n-2)').addClass('cor_um ' );
S('table#horario tbody tr:nth-child(3n-1) ' ).addClass('cor_dois');
$('tab1e#horario tbody tr:nth-child(3n)').addClass('cor_t res ');
});
</ script>
iJ [arquivo-10.4d.html)
Veja os seletores a seguir:

Cor Seletor
cor-um (n-1)'6+1 => 611-6+ 1 => 6n-5. {primeira PA).
cor-um (n-1)'6 + 2 => 6n-6+2 => 611-4. (segunda PA).
cor-um (n -1)'6 + 3 => 6 n-6+3 => 611-3. (terceira PA).
cor-dois (n-1)'6 + 4 => 6 n-6+4 => 6n-2. (primeira PA).
cor-dois (n-1)'6 + 5 => 6 n-6+5 => 6n-l (segunda PA).
cor-dois (n-1)'6 + 6 => 611-6+6 => 611. (terceira PA).
E o script para o efeito zebra três-três:

S('table#horario tbody tr:nth-child(Gn-5)').addClass('cor_um ' ) ;
S(' table#horario tbody tr:nth-child(Gn-4)') .addClass('cor_um');
S(' table#horario tbody tr:nth-child(Gn-3)') .addClass('cor_um ' );
S('table#horario tbody tr:nth-child(Gn-2)').addClass('cor_dois') ;
$('table#horario tbody tr:nth-child(6n-l)').addClass('cor_dois');
S('table#horario tbody tr:nth-child(Gn)').addClass('cor_dois ' );
});
</script>
Uma outra solução para obter esse efeito faz uso dos métodos prevO e nextO
para selecionar linhas antes e depois da linha selecionada, conforme se m en cio-
n ou anteriormente.
Observe que as linhas 2, 8 e 14 são as lin has centrais de cada grupo de a-ês
linhas que têm a cor de fundo definida pela classe cor-um. O seletor que adiciona
a classe nessas linhas centrais é:
S(' tabl e#horari o tbody t r :nth-chi l d(6n-4) ') .addClass(' cor_um' );
D e modo semelhante, para as linbas cen trais que têm a cor d e fundo defin ida
pela classe cor-dois, o seletor é:
$( 'table#horario tbody tr:nth-child(6n-l) ' ).addClass('cor_dois');
Tendo ad icionado a classe correspondente à linha central de cad a grupamento

de três linhas, o seletor para a linha anterior é:
S('table#horario tbody tr:nth-child(6n-4)') .prev(). addClass( ' cor_um');
S( ' table#horario tbody tr:nth-child(6n-1)'). prev(). addClass( ' cor_dois');
E o seletor para a linha posterior é:

S('table#horario tbody tr:nth-child(6n-4) ' ) .next(). addClass( ' cor_um');
S('table#horario tbody tr:nth-child(6n-1) ' ) .next(). addClass( ' cor_dois');

Use a tabela desenvolvida no arquivo-10.4b. htm1 (Figura 10.4) para obter esse
efeito. O script é mostrado a seguir:
3. S('table#horario tbody tr:odd').addClass('impar');
4. S( 'table#horario tbody tr:even').addC1ass( ' par');
5. S('table#horario tbody tr') .hover(
6. function() {
7. S(this) .addClass(' destacar ');
8. },
9. function() {
10. S(this). removeC1ass('destacar') ;
11. }
12. );
13. }) ;
14. </scri pt>
.iJ [arquivo-1O.Sa.html]
Código comentado:
Linhas 3 e 4 Efeico zebra estudado anreriormente.
Linha 5 Atrelando o efeito hover() a cada uma das célu las da rabeia.
Linhas 6 a 8 Função a ser executada quando o ponrei rodo mo use for passado
sobre a linha.
Linha 7 Adiciona a classe destacar à linha que recebeu o ponteiro do
mo use.
Linhas 9e11 Função a ser execurada quando o ponteiro do mouse abandonar
a linha.
Linha 10 Remove a classe destacar da linha da qual o ponteiro do mousc
fo i retirado.
Linha 12 Fim do mérodohover().
Destacar colunas
Agora, você estudará uma técnica para destaca r as colunas da rabeia. Informará
ao usuário que é preciso que ele clique uma determinada célula d e cabeçalho
para destacar a coluna correspondeme.
Observe, na figura 10.9, o efeito final para desracar a coluna denominada Classe
após o usuário ter clicado a sua célula de cabeçalho.

~ Livro jQucry do Maujor J Tabelas · Mozilla Firefox ~[QJ!'.8)
Viaç<oo Alfa· HQrào~
lC.3Xbt1
Clique qltalquei célula d" cat;e~,il~o marcada com +
Figuro 10.9 - Destacar coluna.
Use a rabeia desenvolvida no arqui vo-10. 4b.html (Figura 10.4) para exemplificar
esse efeito. As regras de estilo para a classe destacar são idênticas às adotadas no
exemplo anterior. O scripc é mostrado a segui r:
1. <scri pt type="text/javascri pt">
3. S( 'table#horario tbody tr:odd') .addClass('impar');
4. S(' table#horario tbody t r:even') .addClass( 'par ' );
S. S('table#horario trihorizontal th ' ).not('th:first-child')
6. .prepend( ' <span>&diams; </ span>').css('cursor', 'pointer');
7. S('table#horario tr#horizontal th') .each(function(i) {
8. var n = i - 1;
9. S(this) .cl ick(function() {
10. $ (' td') . removeCl ass ('destacar ');
11 . S(this).parents('thead')
12 . .siblings('tbody')
13. .children( ' tr') .each(function() {
14 . S(this) .children('td:eq(' + n + ')') .addClass('destacar') ;
15. }) i
16. }) ;
17. }) ;
18. });
19. </ script>
.iJ [arquivo-10.Sb.html)
Matcnal cori aire1~os au·ora1s


Linha 14 Para cada linh<'I da tabela, procura o elemento-fil ho que seja uma
célula de dados td e seleciona aq uela que se encomra na posição n.
A variável n fo i definida na linha 8 do script e vale i-l. Acompanhe:
o usuário clicou a coluna cujo cabeçalho é "C l asse'~ i=3 (trara-se da
quarta coluna da tabela) e n=2 (i-1).Assím,para cada linha da rabeia,
o scripc seleciona a td de ordem 2 (valor de n), ou seja, a terceira
célula de dados da linha e a esra adiciona a classe para destacar.
Como a interação é por codas as Unhas do corpo da rabeia, rodas as
rerceirns células de dados receberão a classe para descacar, criando o
efeito de desraque em toda a coluna. Nore que a primeira célula de
cada linha é uma cél.ula de cabeçalho th e não uma célula de dados
td. Se a primeira coluna m~o fosse uma coluna de cabeçalhos e você
quisesse destacá-la corno as demais, usaria a variável i como índice,
sem necessidade de criar a variável n.
Destacar linhas seletivamente

Denomina·se efeiro desracar linhas seletiva mente aquele segundo em que o usu-
ário clica urna célula da tabela e codas as linhas que concêm o dado igua l àquele
da célula clicada são destacadas.
Primeiramente, informe o usuário de que ele deverá passar o ponreiro do
mouse sobre qua lquer célula de dados. Essa ação fará aparecer uma dica (toolrip)
in formando ao usuário que se ele cl icar a célula, as linhas que contiverem esse
dado serão destacadas. Esta primeira etapa é apresentada na figura 10.10.
~ Livro jQuo1y do Maujor 1 Tabelas - Mozilla Hrcfoit ~'.9Jr8J
Figuro l O. l O - Destacar linhos seletivamente.

Continue usando a tabela desenvolvida no arquivo-10 .4b.html (Figura 10.4) para

exemplificar esse efeito. As regras de estilo a acrescentar e o script para o efeito
são mostrados a seguir.
.... CSS:
.destacar-um {/* esti liza a célula que acaba de receber o pontei ro do mouse */
background :#444;
color:#fff;
cursor: pointer;
}
.tooltip {/* esti liza a caixi nha da dica*/
width :180px;
paddi ng:2px 4px;
margin-top:25px;
border:lpx solid #000;
color:#333;
background :#bfe2d8;
positi on:absol ute;
}
.... jQuery:
1. <script type="text/javasc ript">
2. S(document) . ready(f unct ion() {
3. $('table#horario tbody tr:odd') .addClass('impar') ;
4. $(' table#horario tbody tr:even ' ) .addClass( ' par ' );
5. S('table#horario trihorizontal th ' ).each(function(i) {
6. var n = i + 1;
7. var nomeColuna = S(this).text();
8. S( 'table#horario tbody tr td:nth-child( ' + n + ')')
9. .hover(functi on() {
10. S(this).addClass('destacar-um');
11. var textoCelula = S(this).text();
12. S('<div class:"tooltip">OilP! para destacar todas as linhas para<br />
13. <h> ' + nomeí.olllla + ': ' + textxic:elula + ' </b></diV>') .preperdTo(this);
14 . S(this).click(
15 function() {
16 S('table#horario tbody tr').removeClass('destacar') ;
17 . S(' .tooltip'). remove();
18 . S('table#horario tbody tr:contains(' + textoCel ula + ')')
.addClass('destacar');
19 . });
20. },
21. function() {
22 . S(this). re1110veClass(' destacar-um');
23. $(' .tooltip').remove();


Linhas 14 a 17 Tendo atingido a situação mostrada na figura 10.lO,o usuário cl ica
a célula e o script remove a classe destacar porventura existente
em qualquer célula. Isto vai funcíonar a partir do segundo clique
para limpar um destaque anterior e acrescentar novo destaque.
A seguir, o scripr remove o di v . tooltip.
Linha 18 Seleciona todas as linhas da rabeia que comenham o re.-xm igual
ao da célu la clicada (mesmo dado) e destaca a lin ha. Veja o efeico
na figura 1.0.11.
Linhas 21 a 24 Função para remover o destaque e o toolrip quando o usuário
reti ra o ponteiro do mouse da célula sem clicá-la.
Na figura 10.U, mosrramos o efeíro final do destaque selecivo após o usuário

ter clicado uma célula contendo a palavra "Executivo''.
"') Livro JQuery do Maujar 1 Tdbel<tS - Mo:ttlld Fin•fox ~~
Passe o mouse sobrei- q\.:~tque1 oétula
Figuro 10.1 1 - Destaque seletivo, efeito final.
O scripr em questão apresenta um defeito que precisa ser corrigido. Caso o

usuário cliqu e uma célula comendo um dererminado d ado e este conste ta mbém
de uma ouu·a coluna que não a coluna clicada, a resp ectiva linha será destacada
indevidamente. No caso em questão, isto fica bem evidente para as colunas que
contêm os horários de saída e chegada dos ônibus. Um exemplo prático evidencia
o defeito do script: considere que o usuário deseja descacar as linhas da rabeia
que contêm chegadas de ôn ibus às 23:00h. Clicando a célula da coluna Chega-
da e linha Caçador, cujo conreüdo é 23:00, dever iam ser destacadas as linh as
Caçador e Xanxerê, que contêm chegadas de ônibus às 23:00h.

Na figura 10.12, veja o defeito do script nessa sicuação.
V1~~0 Alf:i Horanos

01!$1ÍIHI
Pass~ o mou~ sobu; qualquer c!ilula da l~b<?la
Figura 10.12 - Desloque seletivo, defeito do scripl.
No te que a Linha para a cidade de Irajaí foi destacada indevidamente, pois o

horário d e chegada ali é 06:00h e não 23:00h como se queria. O scripr não escá
cons iderando some nte a colu na cuja célu la foi clicada para aplica r o efeito, ao
contdrio, está aplicando-o a qua lquer célula da rabeia que contenha o mesmo
texto da célula clicada. Altere o script para corrigi r isso.
Comece localizando a lin.ha do script mostrado anterio rmente, que ad iciona

a classe destacar às linhas da tabela. Dê uma olhada no script anterior e teme
identificar qual é o número dessa linha.
Linha 18 é a resposta. Veja a segu ir essa linha:

18. S('table#horario tbody tr:contains(' + textoCelula + ' ) ').addCl ass('destacar') ;
Aqui o script procura codas as linhas da rnbela que contenham um texto igua l
ao texto da célula clica da e destaca a linha. Aqui o script é falho porque deveri a
procurar não por linhas que concenb am o texto, mas por células da coluna clicada
que conten ham o texto para posteriormente selecionar as linhas d e tais célu las e
destacá-las. Escreva novamente a linha 18, com a correção proposta:
18. S('tabl e#horario tbody tr td:nth-chi ld(' + n + '):contains(' + te.xtoCelula + ')')
. parents(' tr ') . addClass( 'destacar '):

Note que se criaram duas lin has de título para as cidades do norte e sul, lin has
estas marcadas com célula de cabeçalho. O acréscimo na marcação da tabela,
além das alterações introduzidas nas linhas de dados, é mostrado a seguir.
.... HTML:
<tbody>
<tr cl ass="sub">
<th colspan="6">Cidades no NORTE do Estado de Santa Catari na</ th>
</tr>
... linhas da tabela . ..
<tr cl ass="sub">
<th colspan="6">Cidades no SUL do Estado de Santa Catarina</th>
</tr>
. .. linhas da tabela . ..
<tbody>
Atribuiu-se uma classe para os novos cabeçalhos e acrescentaram-se as regras

CSS mostradas a seguir:
t r.sub {/*estil i za os dois novos cabeçal hos com uma cor de fundo e de texto*/
background :#bfe2d8;
color:#036;
}
i mg .maismenos {/* para as imagens dos si nai s de mais e menos nos cabeçalhos */
border:none ; /* ret i ra a borda-padrão para imagens que são links */
margi n-right : lOpx; /* afasta a imagem do t exto do cabeçalho */
verti cal-al i gn:mi ddle; /* cent ra a imagem verticalmente com o texto */
}
Note, na figu ra 10.13, que ao lado dos dois novos cabeçalhos há o sinal de
menos(-) indicando o link para fechar. Esse sinal é u m<1 imagem ali posicionada
com o uso do script para não aparecer qua ndo javaScript estiver desabilitado
no navegador.
Observe o script para o efeito proposto:

1. <Script type="text/javasc ript">
3. var mais = '<a href="#">
4. <img src="mais .gif" alt=" Revelar/ocultar ci dades" class="maismenos" />
5. </a>'
6. S('table#horario tbody tr :not( .sub) :even') .addClass(' impar');
7. S('table#horario tbody tr:not( .sub)').hi de();
8. $( ' .sub th') .css({borderBottom : ' lpx solid #333 ' }) .prepend(mais);
9. S('img', $(' .sub th ' ))

10. .click(function(event) {
11. event .preventDefaul t ();
12. if ( (S (this) .attr('src')) == ' menos.gif' ) {
13. S(this).attr( ' src', 'mais.gif')
14. .parents()
15. .sibl i ngs( 'tr').hide();
16. } else {
17. $(this). attr(' src', ' menos .gif ' )
18. . parents() . si bli ngs(' t r ' ) . show();
19. };
20. }) ;
21. }) ;
22. </se ri pt>
Cód igo comentado:

Linhas 3 a 5 Cria uma variável com nome mais e armazena nela a marcação
HTML para um link morto em uma imagem de um si na l de mais
(+) comida no arqu ivo mai s .gi f. Coloca ainda o arributo al t na
imagem e a classe maismenos para fins de estilização.
Linha 6 Adiciona a classe para obter o efeito zebra na rabeia.Aqui convém
notar que se usou a pseudoclasse :not(), para exclu ir do efeito
zebra a linha dos dois novos cabeçalhos na tabela. Isto garante
que a linha logo abaixo da linha de cabeçalho ten ha sempre a
m esm a esti lização (a mes ma cor de fundo do efeito zebra).
Lin ha 7 Esconde todas as linhas da tabela que não sejam cabeçalhos. É
erro comum esconder com o uso da declaração CSS display: none
e, posteriormente, revelar com o uso de script. Não cometa esse
erro, p ois você tornará sua página inacessível caso o navegador
não ofereça suporre para JavaScript. Se você p retende esconder
conteúdos, comece com estes à mostra e esconda-os com o uso
de script.
Linha 8 Ad iciona uma borda in ferior sólida à linha de cabeçalho e coloca
na respectiva célula a imagem do sinal de mais (+)como um
link.
Lin ha 9 Selecio na a imagem contida na célu la de cabeçalho (inserida na
linha 8).
Linha 10 Define que uma função deverá serexecucad a caso haja um clique
da imagem d o sinal de mais (+).
Linha 11 Impede q ue ao receber um clique o link morto seja seguido. Caso
contrá rio, a página "pula" para o topo.

Outro aperfeiçoamenro que se poderia introduzir no script é o fornecimento

de um link contendo o texto 'i\brir rodas" que, ao ser clicado, revelaria roda a
rabeia ao mesmo tempo em que o rexto mudaria para "Fechar rodas" e que, ao ser
clicado, obviamente, fecharia a rabeia com o texto do link mudando para '~b rir
todas''. A esta alcura, seu aprend izado com certeza já chegou a um ponco que o
capacira a desenvolver esse scripr. Assim fica como sugestão o desenvolvimento
do script para você restar seu conhecirnenro.
Advertência
Como você constatou nos exemplos para revelar e escondei: conteúdos de uma
rabeia, utilizaram-se os métodos hide() e show() para os efeitos. Examinando o
funcionamento dos arquivos de exemplos, calvez você seja tentado a melhorar
o script com o LISO de slideUp(), slideDovm(), fadeOut() , fadeln() , animate () ou mesmo
hide(velocidade), show(velocidade).
lnfelizmente, tais métodos não são interpretados de modo correto por rodos
os navegadores, quando se trata de tabelas, e usá-los, nestes casos, poderá causar
e feitos estranhos e indesejados. Porranro, use somenre os métodos hide() e show()
para esse efeiro quando se craca de aplicá-lo cm rabeias. Observe, na figura 10.15,
um desses efeitos esrranhos referidos.
V1~cílo '"-lfa Hnrános

O~h1c; 1s.1í'.f,i IChe1.1<11l .1 1Cl.iue ITmif..i 1Ft eqlle11di1
F f Cidade~ 1111 NORTE do Est<ld«J <te s .v1t,1 Cutarína
fl111s<1110. I cs ~á 111301 con~enc1on:;il i RUO,OQ 1Olé"rta1
JolrMll~ 11130 ! 21 :00, Con-..e11clon~11 R~ l00.00 Sôl>.<IJ.O J
.,
6.11w.i l~&o 1(16:001 Lgijo l IU150.ll0l01al1;i1
- 1 í--·1
~~;.~: 13:00 1soo conve,1c<o11a1 1F1i60,00 1 D1â11a 1
CoooülilS - 19:30 l a7 30 L.iilo i f<$1 !ID.OO i Se9 a St>~ ! "
S.I co.
!
1 01.00 07:00 j Con~ntional R$~O
00
i Oua • ....
... · ~ Sell
1
Sul t
' 1 '
JJl.i•11.1.\do Sul J 23-1 S t MA5 ! Ullo R:J,2-SCHIO ! Sábaao i J
Ri!>
ao 30 J n oo Ex"cutvo m.21 o,oo 1l'orn S~g e _...Ji
NPjJllltll>\
s.lo Beiito ' 21·15 i13;45i !,.:!Jto i R'611m,ll0 i Sáb<>do i
M.itr ,, ; OS UO 11 G00 i Cor.venc1ona1: RSS5,00 . Olaria 1
m Cida®$ llO SUL llo ~t.Hlo-Oe Stlnlil Cottlrimr
~-·- .. ~_ ..___........_.,._, _____. __ __. ,
Válida Pi'lfa o períoao de 0211012008 a :ion 112000
Figuro 1Q_15 - slídeDown() no Firefox.

Usar slideDown() e sl i deUp() causa uma revelação do conceúdo, como a mosrrada

na figura 10.5, quando visualizada no navegador Firefox. Para o navegador IE (In-
ternet Explorer), o comporcamenco se passa como para hide() e show() normalmente,
exceto se usar velocidade. Nesse caso, embora o comporcamenco continue como
para hi de() e show(), a rroca da imagem do sinal respei ca a velocidade.
Utilizar fadeOut() e fadeln() com o u sem velocidade funciona no Firefox, mas

falha no IE.
Enfim, faça algumas experiências e constate as diferenças para chegar à seguinte

conclusão: use somente hide() e show() para esse efeito a té que as inconsistências
sejam resolvidas.

CAPÍTULO 11
Efeitos em formulários
Neste capítulo, serão abordad os alguns efeitos d a biblioteca j Q uery para emprego
em formulários. É necessá rio extremo cu id ado ao se projetar scripts rod ando
n o lad o do cliente, co mo são os scripts jQuery, quando se trata de adicionar
funcio nalid ad es a form ulários. Ao conrrário da maio ria dos co nteúd os de u ma
página web, formulários d estinam-se a possib ilitar co leta de d ados do usuário
e envio d eles ao servidor.
11.1 Validação de formulários

Dados entrados pelo usuário em ca mpos de um form ulário devem ser verifi cados
am es de ser enviad os ao servidor. A verificação se faz não som ente para evitar
entrad a d e código malicioso no servidor, via formulário, m as também para não
permitir entrada de d ad os com formato di ferente d aquele par a os quais o script
de processamento no servido r foi d esenvolvido. Por exemplo: se um campo d eve
receb er um número, verifique se o usuário entrou um n úm ero nesse campo antes
de enviá-lo ao servido r.
Assim, esteja con sciente de que validar d ados d e formulários com o uso d e
j avaScripr é u ma técnica que n ão oferece segurança, apesar d e ser adorad a na
m aio ria d os fo rmulários existentes na web. Não abra mão d e scripts rodando
n o lad o do ser vidor para validar seus formulários. Fe ita a ressa lva, veja alg uns
efeitos jQ uery para formulários.
11.2 Placeholder para campos

Placeholder é um texto-pad rão inserido em um campo d e formulário fornecendo
uma indicação genérica d o formato d e dado esperado no ca mpo. E m geral, a fonte
307
do texto para o placeholdcr é estilizada cm uma cor m ais clara que a prevista para
a fonte do texto entrado pelo usuário. Em um campo de formu lário contendo um
placeholder, tão logo o usuário entre no campo com o objetivo d e preenchê-lo, o
texto do placeholder é automaticamente reri rado.
No primeiro efeito a estudar, você irá usar um campo de texto destinado à

busca, ou simplesmente um campo de busca. O objetivo será retirar o rótulo do
campo da sua posição e inseri-lo como placeholder.
A marcação HTM L é mostrada a seguir:

<form action="" met hod="get" id="formulario">
<l abel for="busca">Busca</label>
<i nput name="busca" type="text" id="busca" />
</form>
Na figura 111, mostramos a renderização da página antes e depois da apli-

cação do efeito. Uti lizo u-se uma só tela para mostrar as duas situações, com a
fina lidade de simplificar.
-----------------------
~'.) Livro jQuory do Maujor 1 Formuklrlos • Mozllld Flrofo• GJQ)i:g)
Antes (sem sc rlpt) Depois (com scrlpl)
Ausca ;~'"""
'--------
Figuro 11.1 - Campo de busco com rótu lo como ploceholder.
O rótulo do campo de busca é o texto inserido na marcação dentro do ele-

mento label. Todo campo de formulá rio deve associar-se a um rótulo que cem
por fina lidade cumprir critérios de acessibilidade.
Observe o script para obter o efeito:

3. var textoDefault =$('#formularia l abel') . remove() .text() ;
4. $('#busca') .val(textoDefault) .css('color', '#999')
S. .focus(function() {
6. if (S(this).val() == textoDefaul t) {
7. $(this) .css('color', ") .val(");
8. }
9. }). bl ur(function() {
10. if (S(this) .val() == ' ') {
'vl aterral com 01re1tos autorais

Capítulo 11 • Efeitos em formulários 309
11. $(thi s).val (textoDefault).css('color', '#999');

12. }
13. }) ;
14. }) ;
15. </script>
.i) [arquivo-11.2a.html)
Código comentado:
Unha(s) Descrição
Linha 3 Armazenou-se em uma variável o rótulo do campo e, com o uso
d o método remove (), retirou-se o ró tulo da marcação. É imporcante
notar que o método remove() retira o elemento do DOM, mas per-
mite acessar seus conteúdos normalmente. Ao contrário, o método
empty() retira os conteúdos do elemento e conser va o elemento no
DOM. Este é um conceito importante que diferencia um método
d o outro e se você não csriver atemo à diferença, poderá empregar
um o u outro de forma equivocada e não entender o porquê de seu
scripc não foncionar. Caso utilizasse empty(), o script falharia.
Linha 4 Acessa o campo de busca e a este a tribui um valor igual ao texto do
rótulo, armazenado anteriormente na variável textoDefau l t. A seguir,
cria uma declaração CSS para o texto, defin indo para ele uma cor
cinza-claro. O método val O manipula o atributo HTML val ue. De-
clarar val ('val or') equ ivale a escrever na marcação val ue="valor" .
Linha 5 Define-se uma função a ser execu tada quando o campo de buse<1
recebe o foco.
Linha 6 Testa o valor do campo de busca contra o textoOefaul t . No carrega-
mento da página, o teste resulta verdadeiro, pois ao campo d e busca
se atribu iu o textoOefaul t conforme definido na linha 4.
Linha 7 Tendo recebido o foco e a condição sendo verdadeira, remove-se a
reg ra CSS para o texto nocampo,bem como o próprio texro,deixando
o campo limpo para receber a entrada de d ado do usuá rio.
Linha 9 Aqu i, define-se uma função a ser executada quando o foco é retirado
d o campo.
Linha 10 Testa para saber o que aconteceu com o campo após ter recebido
o foco. Duas são as possibil idades: o usuário preencheu e saiu ou
d eixou em branco e sai u.
Lin ha li Se deixou em branco e saiu, repõe o textoOefault no campo. Caso
contrário, deixa o campo com o dado preenchido para posterior
validação.
Outra solução comum nesses casos consiste em usa r como placeholder um

texto que não o rótulo do ca mpo, mante ndo este no seu loca l origina l, ca l como
mostra a figura 112.

ú 1ivro jQuery do Moujor I formulários - Motill4 Firefox rnllil
Antes (som sc ript) Dopois (com script)
Busc~ jpolavio tha '°"
Figura 11 .2 - Campo de busca com título como placeholder.
Noce que o rótulo permanece em seu lugar e o rexro "pa lavra chave" foi usad o
como p laceholder.
Encre as várias soluções possíveis, selecionaram-se duas apresentadas a seguir.
Primeira solução
Inserir o atributo titl e no elemento label da marcação e u sar o valor desse atri-
buto como placeholder. Observe o acréscimo na marcação HTML e a alteração
na linha 3 do script anterio r.
• HTlvlL:
<label for="busca" title="palavra chave">Busca</labeh
• jQuery:
var textoDefault = S('#formulari o label ') .attr('title');
.iJ [arquivo-1 1.2b.html]

Código comentado:
Unha Descrição
Linha 3 Nesca solução, urilizou-se o método attr('title ' ) para acessar o valor
do atributo title do elemento label e atribuí-lo à variável textoDefault.
Todo o restante do script permanece como na solução anterior.
Segunda solução
A segunda solução consiste em não introduzir alteração n a marcação, criand o
o texto do placeho lder via script. Nesse caso, bastaria alterar a linha 3 conforme
mostrado a seguir.
var textoDefault = ' palavra chave';
'vl atenal com 01re1tos autorais

4. .css({display:'none ' ,
5. border: ' l px solid #add6ef',
6. paddi ng : '2 px 4px ' ,
7. background:'#d6e2eS',
8. margi nlef t:'lOpx'
9. }) ;
10. S(' .di ca ' ). focus(fonction() {
11. S(thi s).next(). fadeln(1500) ;
12. }) .bl ur(funct i on() {
13. S(thi s).next(). fadeOut(lSOO);
14. }) ;
15. }) ;
16. </se ri pt>
Código comentado:
Linha 3 Utilizou-se o seletor do ripo E + F para selecionar os elementos span
imediara mente após o elemento com a classedi ca. Veja na marcação
que são os elementos span que contêm o tcxco da dica. Seletores do
ripo E + F casam com o elemento F que vem imediaramcnrc após
um elemenco E.
Linhas 4 a 9 Regras CSS destinadas a estilizar a caixa contendo a dica e a escon-
dê-la quando a página for carregada. Lembre-se de que um im pulso
inicial pode levar o desenvolvedor a defin ir essas regras de estilo
na fol ha de estilos da página. Você pode adotar essa solução sem
problemas, desde que conserve a declaração di sp1ay : none no script,
não a transferindo para as CSS da página, pois assim fazendo, você
bloqueia o acesso <'is dicas quando j avaScript não estiver disponível
no navegador.
Linha 10 Define uma função a ser executada quando o campo recebe o
foco.
Linha li Revela a dica que estava oculta usando o efeito fadei n() .
Linha U Define uma função a ser execu rada quando o campo perde o foco.
Linha JJ Esconde a d ica usando o efeito fadeOut().
11 .4 Desabilitar campos
Para exemplificar o efeito de desabilita r campos de um formulário, tome como
base um for mulário composto de três áreas dis rinras,cada uma delas des rinadas
a um fabricante d e automóvel, selecionável por um ca m po de formulário do tipo
botão radio (radio). Para cada fabricante é ap resentada uma série de campos de

formu lário do tipo caixa de seleção (checkbox) que perm ice ao usuá rio escolher
vários modelos de automóvel do fabricante selecionado. A marcação HTML
(omitiram-se alguns checkboxes para reduzir o camanho do código) é mostrada
a seguir:
<form action="" method="get" id="formul ario">
<fieldset>
<l egend>5elecione um fabricante e escol ha os modelos de sua preferência .</legend>
<di v cl ass="mudar">
<l abel class="fabricant e"><i nput type="radio" name="fabricante" />
Mercedes Benz</label>
<l abel><input type="checkbox" />Classe A - Hacthback</label>
<l abel><i nput type="checkbox" />Classe B - MPV</label>
... mais checkbox .. .
</div>
<div class="mudar">
<label cl ass="fabricant e"><input type,."radio" name="fabricant e" />Ferrari</labeh
<l abel><input type="checkbox" />599 GTB</label>
<1abe l><i nput type="checkbox" />Ca1i forni a 2009</label>
. .. mais checkbox ...
</div>
<di v cl ass="mudar">
<label class="fabricante"><input type="radio" narne="fabricante" />Volv0</label>
<label><i nput type="checkbox" />540</labeh
<label><i nput type.."checkbox" />560</labeh
... mais checkbox ...
</div>
</fie 1dset>
</form>
Note que rótulos (l abel ) implíciros foram declarados para os campos do

form ulário. Isco possibilitou que ao se declarar íloat :left para os elementos label,
estes carregassem consigo seus elementos input respeccivos, faci li ta ndo o posi-
cionamento e alinhamenco dos campos do formu lário. As demais regras CSS
são triviais.
Diz-se que umrótulo de formulário é impllcito quando o elemento 1abe1, além

de conter o texto descritivo do campo, ê também seu container. Rótulos não
implícitos contêm somente o texto descritivo e devem ser marcados com o
atributo for com nome igual ao nome do atri buto i d do campo.
Com a finalidade de posicionar e melhorar a apresentação do formulá rio em

questão, criou-se a fo lha de estilos mostrada a segui r:
body {1t1i dth :600px; font :80%/l.2 Arial, Helvetica, sans-serif ; margin :30px auto;
color:#666; paddi ng:O;}
l abel {wi dth:l90px; displ ay :block;íloat :left;}

fieldset {border :l px soli d #ccc ; padding:lOpx;}

legend {font-weight:bold; border:lpx solid #ccc; padding:lpx 4px;}
label .fabricante {font-weight:bold; margin:O;}
form div {margin:l5px O O O;}
.mudar, .fabricante {width:100%;overflow:auto;}
. mudar {background :#d6e2e 5;}
.fabricante {background:#add6ef;padding:10px O;}
~ [arquivo~11.4a.html]
Observe, na figura 11.4, a renderização do formulário proposm.
t'.> Livro jQuery do Maujor 1 Fonnul.irfo• - Mozlfla Firefox ~~CEJ
0 ~ttrce<Jn llellr
0cr~s~ A. 'W'thback DCJa~~e B- Ml'V Ot.i.w;e ( • S&Qll

ElCluie Sl..K - Road$1er Octu~e CL· Coupé 0Ci.%e OU<-C"P<'
Dc1<1ne CLK. Cabnolei 0C:1a.1e M- Spon Utíbty 0 Clc <e R- C.Oi!S<M?r
D~GTB 0 Cai1fQrr1.. 2D'J9 0 250 GT S.l/\IB

0F~30 Sç~deri; eJM~Wctta '1!XT 0612 Sc~gfcj)U•
EIFXX l:vnt•n•nn O ~~fl'•'lôl7 till' r.flr ÜP46
ov..111..
Os.ia 0$511
Ehro OXCi'O
Ocm 0070
Figuro 11 .4 - Formulário bósico proposto.
O formulário foi projerado para permitir a seleção de um fabricante apenas

e vários modelos. Na figura 114, você pode notar que houve seleção de um fabri-
cante e de modelos dos rrês fabricantes.
Não serão tecidas considerações sobre técn icas ou vaUdações para evitar uma
seleção ilegal como a mostrada, pois o objeüvo é estuda r a técn ica de desabilitar
campos de formulário. Concudo, vale lembrar que esta é uma solução que não
deve esrnr isolada, pois caso javaScript esteja indisponível no navegador, o script
falhará. É recomend<ivel que seja usada como alternativa si mplifi cada para outro
mecanismo, para desabilitar os campos.
Observe o scripr para obter o efeiro de desabilitar os campos do formulário

para as opções de fabricante não escolhidas:

1. <script type="text/javasc ri pt">

3. S('#formulario input :checkbox') .attr('disabled ' , ' disabled ') ;
4. S('#formulario input :radio').cl i ck(function() {
5. S('#formulario input: checkbox') .removeAttr('checked')
. removeAtt r(' disabled ' );
6. S(this) .parents(' .mudar ' ) .siblings( ' .mudar ' )
7. . find(' :checkbox ')
8. .attr('disabled ' , 'disabled');
9. });
10. }) ;
11. </script>
~ [arquivo-11.4b.html)
Código comentado:
Linha 3 Inicia-se desabilitando rodos os checkboxes, para evitar que o usuário
escolha os modelos sem ter escolhido um fabricante. Note o uso da
pseudoclasse :checkbox no seletor.
Linha 4 Define-se uma função a ser executada quando o usuário clica um
dos botões radio para a escolha do fabr icante. Note o uso da pseu-
doclasse :radio no seletor.
Linha 5 Esra linha contém uma ação a ser executada somente no caso de
o usuário ter escolhido um fabricante, selecionado os modelos e
resolvido alterar a escolha do fabricante. Por que alguém faria isso?
Realmente, não faz muito sentido, mas ao projerar formulários,
procure simular qualquer situação de preenchimento e inreração
do usuário, por mais absurda que pareça. Ocorrendo mi situação, o
script precisa limpar as seleções feitas antes de desabilitar as esco-
lhas. É essa a ação contida nesta lin ha: seleciona todos os checkboxes,
limpa os selecionados e habilita-os para nova escolha.
Lin ha 6 Encontra todos os elcmencos div .mudar, que são o elememo-pai dos
conteúdos dos blocos de fabricances que (no nosso caso são dois)
não sejam o fabricante selecionado pelo usuário.
Linha 7 Encontra todos os checkboxes que não sejam os do fabricanre sele-
cionado pelo usuário.
Lin ha 8 Desabilita os checkboxes encontrados.
Observe, na figura 115, o efeito final com a escolha de um fabricante, alguns

modelos e os modelos dos demais fabricantes desabilitados. 'ote que a escolha
de um fabr icante desabilita a escolha dos modelos dos demais, mas não desabilita
a escolha do fabricante, possibilitando ao usuário mudar de opção.

U 1 ivto jQuory do Moujor 1 rormulári<>s - 11.J)Till<t firefox g:@)(g)
Stludon• " "' fo~tic•"t• • tS<~lh ~ os 111o•lalo• dt '"• 111cle1e11d.i.
E! (;1J$<:e A rlacthbíltf D Clas~ B MPI/ eJj;IJS!t~ t.- Sedll

ldc~.-,~ SLI-.- R..actsta l:!ICl<!s~ CL-~oupe Ut1,,.. CLK- C-0..p<
8~1~>0! CLJ< · l:oltoolel 0 t.:I~! M SpQtll~irty 01..1~,.~ R • C.o$0;0•_.
tõ'-4'GT6 z<l)GTSWB
f'43G Sr.Jdl!r1a rt2 Sc•ohtll•
f:<X E\\lllllton P4.,8
Figuro 11.5 - Fonnulório com efeito desabilitar.
Agora não é mais possível uma seleção inválida como aquela moscrada na
figura 11.4.
11 .5 Revelar campos
Parn esta so lução, a proposca é ;1presencar, inicialmence, ao usuário somente a
opção de escolha do fabrica nte. Feita a opção, os checkboxes para a escolha dos
modelos serão revelados.
A seguir, o script para obter o efeito proposm:
1. <seri pt type="text/javasc ri pt ">
3. S(':checkbox').parents('label' ) .hide() ;
4. $( ' : radio') .wrap('<a href="#"></a>');
5. S( ':radio ' ).parents('label').click(function() {
6. $(this) .si bli ngs() .fadei n(1500);
7. $(thi s).parent().sibl i ngs(' .mudar ')
8. .children('label :not(.fabricante) ' )
9. .slideUp().find( ': checked').each(function() {
10. S(this) .removeAttr('checked ' );
11. }) ;
12. });
13 . }) ;
14. </scri pt>
i) [arquivo-11.Sa.html]

Cód igo comentado:

Unha(s) Descrição
Linha 3 Enconcra rodos os elementos label que sejam elcmenros-pai de
checkbox e esconde-os. Por se ter usado rórulo implícito, não só os
rórulos, mas também os elementos input a estes associados serão
escondidos.
Linha 4 Colocou-se como container para os elementos radio um link mono.
Você saberia explicar a razão desse link? Se pensou em navegação
por teclado, acertou. Sem um link, o usuário navegando com auxí-
lio do teclado não conseguir ia abrir as opções de modelos de um
fabricante.
Linha 5 Definiu-se uma fu nção a ser execurada quando o usuário escolhe
um fabrica nte. Outra vez o uso de rótulo implícito facilita o script.
Clicar o botão de escolha ou o nome do fabr icante, indi ferenremente,
dispara a execução da função.
Lin ha 6 Seleciona os elementos-irmão do elemento label clicado e revela-os.
Lin ha 7 Encontra o elemento-pai do elemento label clicado. f: um di v com
a classe mudar, a seguir encontra seus elementos-irmão com a classe
mudar. São os otmos dois divs.
Linha 8 Encontra os elementos-filho das d ois d ivs que não sejam os elementos
radio de escolha dos fabricances. São os checkboxes para a escolha
dos modelos.
Linha 9 Esconde o encontrado na linha anterior e procura por aqueles que
tenham sido marcados pelo usuário.
Linha 10 Faz um loop pelos marcados e desmarca-os. Este procedimento é
necessário nos casos em que o usuário faz uma escolha de modelos
e resolve mudar o fabr icante. É preciso desmarcar os escolhidos
antes de fechar o que estava aberro para, em seguida, revelar a nova
escolha.
Na figura ll.6, consca m a apresencação inicial do fo rmulário e a apresentação

após ter sido feita a escolha de um fa bricante.

t j Llvto jQucry do Moujor J fo1mui<ir i•• · Mozilla fircfo• ~(QJ!RJ
0 M~1c11~tes 11~111
0 c õ"$~ A H.orli;~rk [k1~$<1' fl . MP'/ O n•tttfl e &.1ã
El CiaHe SLK f«iaósw El Cl$S$f. l::L • C.ouv~ 0Çlatto CU< \;OLrP~
o Cl~8&11 CU< • l"allffOl KI O Cl~•sa w. 5põ~ tJ11u11 :i'.lCl>~5A R. Cm•~o->er
O vcltvn
Figuro 11 .6 - Formulário revelando campos .
11.6 Elemento legend

Veja, nesta seção, uma récnica que não é exclusiva de formulários e pode ser
aplicada a oua-os cenários.
Sabe-se que os navegadores, para alguns elementos HTw1L, apresentam resrrições

e inconsistências na renderização quando ser vidos com dererminadas regras CSS.
Os el.e mentos caption para tabelas e legend para formulários se enquadram nessa
categoria. Outros como select e option simplesmente ignoram certas regras CSS.
Nesses casos, a opção é apresenrar rais elementos com estilização mínima e

conseguir efeitos de apresentação mais sofisticados com o uso de scripr. A téc-
nica , para os elementos legend e caption cujos conteúdos são textuais, consisrc em
substituir o elemenro por um oucro que aceite regras CSS sem restrições.
Utilize neste exemplo o arquivo-11. Sa.html desenvolvido na seção anterior. Subs-

ticua o elemento legend por um elemenro h4 (cabeça lho nível quatro) ao qual se
atribuirá a classe legenda. Altere também a borda do elemento fieldset de sólida
para pontilhada. As regras CSS a acrescentar são as seguintes:

11.7 Selecionar todos

Um cenário comum em formulários é aquele no qual se apresenta ao usuário uma
série de campos de seleção, sendo permitida a seleção de mais de uma opção, tal
como mostrado na seleção dos modelos de automóveis nos exemplos anteriores.
É de boa técnica fo rnecer ao usuário um mecanismo para selecionar e des-
marcar todas as opções de uma só vez. Para demonstrar o desenvolvimento e
funcionamento do script que implementa essa funciona lidade, utilize o formulário
cuja marcação HTt.ilL é mostrada a segui r:
<form act ion="" method="get " id="formu lario">
<fieldset>
<l egend>Escolha os model os de sua preferencia.</legend>
<div class,,."mudar">
<label><i nput type.."checkbox" />Classe A - Hacthback</l abel>
<label><i nput type="checkbox" />Classe B - NPV</label>
... mais checkboxes . . .
<l abeh<input type="checkbox" />P4/S</labeh
</diV>
</fie 1dset>
</form>
A renderização do formulário é mostrada na pane superior da figura 11.8. Na

pan e inferior, consta o formulário após ter sido desenvolvido e incorporado na
página, o script jQuery proposto nesra seção.
o Livro jQuery do Moujor 1 rOfJYIUlilrios • Mozilla l'irefox G.)@[8)
Oc1-•c sw.r
0 C~!1~ CU· Covr•ê
0 Ct..sa P. - Crus'""~
··Z!~·
E~coth~ º' mod•lo$ de $ltQ prefor•nct~.
0Seleci•ma 1 1odos
O e ns • /' · liaclh!)ed Ona~"" a. ~· C!Clao•e O- Se~

O Cflls"' SLK · Raaõsler -
º'-'ª$"~ (,~ Ccupê C Cla;se CIY - Coup"
D e"º"" •"U!. C•hli~l•I Dc1a0>e M Spa1. U1tlty CJ (,la~ R C.10S<!U•e1
ÜFe<rarl 611 tcp tar
Figura 11 .8 - Formulório, selecionar todos.
Matcnal cori arre1~os au-ora1s

O script para a funcionalidade de selecionar rodos é mostrado a seguir:

1. S(document) . ready(funct ion() {
2. var selecionaTodos = $( ' <labeh<input type="checkbox" class="t odos" /><h>
Selecionar todos</b></label>');
3. S(selecionaTodos).insertBefore(' .mudar' )
4. var todosCheckboxes = $( ' .mudar ' ).find( ' :checkbox') ;
5. $( ' .todos').click(function() {
6. if (this.checked) {
7. S(thi s). next(). text(' Desmarcar t odos')
8. S(todosCheckboxes).attr('checked', 'checked');
9. } e1se {
10. S(thi s) .next(). text( 'Selecionar todos')
11. S(todosCheckboxes). removeAttr('checked ' );
12 . }
13. }) ;
14. $(' <h4 cl ass="legenda"></ h4>') . i nsertAfter(' l egend');
15.
16 . }) ;
17. </scri pt>
.iJ [arquivo-11 .7a.html)

Código comentado:
Unha(s) Descrição
Lin ha 2 Cria uma variável e armazena a marcação HTML para o checkbox
a ser inserido na página com a finalidade de fornecer a opção de
seleção de todos os modelos. Como esta funcionalidade estará
disponível apenas em navegadores com javaScript habilitado, não
se deve colocar o checkbox diretamente na marcação, e sim inseri-lo
via script.
Lin ha 3 lnsere o checkbox criado imediacamente antes do div conrainer para
as opções de modelos. Utilizou-se i nsertBefore () e não prependTo()
porque neste caso a inserção seria dentro do div e o checkbox estaria
sujeito às regras de estilo para os checkboxes de escolha dos modelos.
Assim, iria se posicionar ao lado da primeira opção de escolha e não
aci ma de rodas elas como se desejava. Faça uma cópia do arquivo,
altere e comprove o comportamento com prependTo().
Linha 4 Armazena em uma variável todos os checkboxes para a escolha dos
modelos.
Linha 5 Define uma função a ser executada quando o usuário seleciona o
checkbox que foi inserido para selecionar todas.
Linha 6 Verifica se a seleção de rodos os modelos está marcada. Logo após
o primeiro clique do usuário, csca condição é verdadeira e o script
segue para a linha 7.

Note que se acrescentou à marcação HTMLda página um botão de envio do

formulário ao qual se atribuiu um id=" enviar" e que, quando clicado, fará o scripc
de validação ser acionado. Não há inserção de JavaScript na marcação do botão
para acionar a execução da função de validação.
O scripc para a funcionalidade de validação é mostrado a seguir:

1. $(document) .ready(function() {
2. S('#enviar').click(function() {
3. var i = S(' .mudar input :checked ' ).size();
4. if (i "'= o 11 i > 5) {
5. alert( ' Por favor , selecione no mínimo ume no máximo cinco modelos');
6. }
7. }) ;
8. }) ;
9. </sc ript>
Código comentado:
Linha 2 Define a função de validação a ser executada quando o usuário clica
o botão "Enviar''.
Linha 3 Usa o método size() para armazenar a quantidade de modelos de
au rornóvel selecionados pelo usuário.
Lin ha 4 Testa a quantidade selecionada e insere na tela a caixa de alerta
javaScript se a condição for verdadeira.

CAPÍTULO 12
- Imagens
Neste capítu lo, serão estudadas as técnicas de manipulação de imagens com o uso
da biblioteca jQuery. Serão abordados alguns efeitos simples desci nados a ampliar
imagens e também a construção de galerias de imagens. O objetivo principal será
a mplia r o conhecimento das técnicas gerai s de criação jQuery. Exisrem vá rios
plug-ins para manipulação de imagens e desenvolvi mento de galerias e slide-show
de imagens.Ao término deste capítu lo, você, além de atingir o objetivo proposto,
estará em condições de desenvolver scripts simples para ampliação de imagens e
construção de galerias de imagens com recursos razoáveis. Havendo necessidade
de inserir em seu projeto uma galeria de imagens com recursos avançados, con-
sulte o repositório de plug-ins em http://plugi ns.jquery.com/.
12.1 Introdução
Inserir imagens em uma página web é um recurso empregado na maioria dos
sites. Imagem em páginas web, além de transmitir informação, torna a leitura
da página mais agradável. A internet foi inventada por Tim Berners-lee com o
propósito inicial de ser um meio de troca de inform ações entre cientistas. Os
documentos de na cu reza científica, em geral, são criados com o uso de texto puro,
sem necessidade de elaborados recursos de apresentação. Na proposta inicial de
Tim, não escava prevista a inserção de imagens nem de nenhum tipo de mídia
ou objeto nos documentos a transitar pela internet.
A internet tornou-se uma rede popular e difundiu-se muito, graças, em grande

parte, à invenção dos elementos HTML para inserção de mídia, a começar pelo
elemento para inserir imagens, com o consequente aparecimento do primeiro
navegador gráfico, o Mosaic. A invenção do Mosaic marcou o início do desen-
volvimento da internet.
325
12.1.1 Imagens acessíveis

Quanto à sua finalidade, as imagens em um documento podem ser classificadas
em dois grupos, conforme descritos a segu ir.
12.1.1.1Imagensdecorativas
Como o próprio n o me sugere, são aquelas des tinadas a melhorar o efeito visual
da página, não tendo nenhuma influência ou relação com a transmissão da in-
formação. Se forem retiradas da página, não causarão outro impacto que não o
de tornar mais limitada a apresentação visual. Estas não merecem atenção sob
o pont0 de vista da acessibilidade e devem ser marcadas com o uso do acriburo
alt vazio, conforme mostrado a segui r:
<img src="cd.jpg" alt="" />
12.1.1.2 Imagenspara transmhir informação
São imagens criadas com a finalidad e de complementar, esclarecer ou substituir

um conteúdo textual ou um conteúdo que seja indispensável para o enrendimenco
da informação. O exemplo clássico de uma imagem dessa natureza é aquela criada
para substituir os cabeçalhos, em um documento, que devam ser apresentados
com um tipo de fonte decorativa não disponível na máquina dos usuários.
As Recomendações do \V3C para acessibilidade preconizam que nesses casos

se deve fornecer uma alternativa textual para a imagem, com a finalidade de não
bloquear acesso à informação. Lembre-se de que usuários que estejam navegando
com um leitor de tela o u com imagens desabilitadas não tomarão conhecimento
do conteúdo da imagem a menos que se forneça ta l alternativa.
Existem d o is m étodos básicos para se fornecer o eq uivalente textual para

uma imagem que transmita informação ou que seja indispensável para o enten-
dimento da informação.
Atributo alt
Para imagens cujo equiva lente textual seja um texto cu rto, sem necessidade d e
descrição detalhada, coloca-se o texto co mo valor do acriburo alt, conform e o
exemplo mostrado a seguir:
<img src="cd.jpg" alt="Capa do CD dos Beatl es" />

Capítulo 12 • Imagens 327
Atributo longdesc
Para imagens que requerem como equivalente texrual um texto explicativo longo,
usa-se o atriburo longdesc (long description, qu e significa descrição longa), con-
forme o exemplo mostrado a seguir:
<img src="cd.jpg" alt="Capa do CD dos Beatles" longdesc="cd_beatles.html" />
O atributo longdesc aponta para um arquivo de texto onde se encontra a

descrição detalhada da imagem e é um suplemento ao atributo alt, devendo ser
usado com este.
12.2 Ampliação de imagens

Agora você irá examinar algumas técnicas de ampliação. É comum em páginas
web, com a finalidade de não poluir visualmente a página com inserção de imagens
grandes, fornecer uma versão miniatura da imagem, conhecida como thumbnail,
que, ao ser clicada , fornece a visualização da imagem em seu tamanho natural.
Em cais situações, o d1umbnail é um link apontando para a versão ampliada

da imagem. Sempre que se marcar uma imagem como link, os navegadores, por
padrão, inserem uma borda, normal.mente na cor azul típica da indicação de links,
ao redor da imagem. A primeira providência a se tomar é retirar essa indesejável
borda, declarando a seguinte regra CSS:
img {border:none; }
Ou usar um outro seletor mais específico que tenha como alvo somente as
imagens que são link, como mostrado a seguir:
a img {border:none;}
Considere a marcação HTML a seguir:
<div id="galeria">
<a href="l.jpg"><img src="l.jpg" alt="Descrição da foto" wi dth="120" height="90"
class="foto" /></a>
</diV>
<span>Clique para ampliar</span>

Trara-se de um thumbnail inserido como link em uma pági na, cendo logo
abaixo um texto com uma dica instruindo o usuário a clicá-lo para visualizar a
imagem ampliada.A imagem encontra-se no arquivo 1.jpg, no seu tamanho narn-
ral, e será uó lizada para obter o chumbnail forçando a redução de suas dimensões
com o uso dos atributos vri dth e height no elemento de marcação img. Assim sendo,
não será necessário gerar duas imagens, uma para o thumbna il e outra em seu
tamanho natural. Considere que não será preciso gerar um rhumbnail persona-
lizado, como aqueles constituídos por uma porção da imagem ampliada.
Note que se uàlizou como c<.)nrainer para a imagem um div com sua respectiva
id denominada galeria. Esse container é perfeitamente dispensável mas foi ali
inserido tendo em vista as próximas etapas deste escudo nas quais se estenderá
essa marcação e o container será indispensável.
Observe, na figura U.1, a renderização da marcação proposta e o resultado

quando o usuário clica o thumbnail.
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
U l.ivro jQuery do t.111ujor 1 lm~ns e goleridS de fotos · Moi'.1114 Firefox ~[QJ[g]
Figuro 12. l - Ampliação de imagem em página web sem script.

Ao clicar a imagem, o usuário obrém a visualização da imagem em seu ta-

manho natural. Note que a imagem ampliada foi apresencada na mesma janela
onde se encon trava o d1umbnai l, pois n ão se usou o arriburo target no elemenro
link definindo abertura em uma nova janela.
A propósito, documentos que utilizem uma DTD Strict não são válidos se
usarem o atributo target para links. Em documentos que admirem o uso desse
a tributo, sempre que um link abrir outra janela , informe, junto ao lin k, esse
comportamenco.
Primeira etapa
Em uma primeira etapa, você irá estudar um script simp les para obrer a amplia-
ção da imagem. Complemenrarmenre, com a fina lidade de mostrar um a técnica
de manipulação de cexcos existentes em páginas, será a lterada a maneira de
apresentação da dica para cliC'ilí a imagem.
Na figura 12.2 mosrramos o efeito final com a dica posicionada sobre a imagem.
~~~~~~~~~~~~~~~~~~~~~~~~~~---~
Ú Livro jQuery do Maujor 1 Imagens e &ale rias de fotos - Mo;illla Firefox ~(g](8]
Figuro 12.2 - Ampliação de imagem em pógíno web com o uso de scripi.
Observe as regras de estilo e o scripr para obcer o efeiro.

..... CSS:
<style type="text/ css" media="all"> . foto {border:none;}
#gal eria {Yridth: 500px; position:relative;}
.abre- fecha { /~ esta classe foi inserida pelo script no el emento span que marca a
dica ao usuár io ~;
position :absolute;
background:#add6ef;
l eft:O;
top: O;
text-align:center;
font-si ze:llpx;
cursor:pointer;
}
</Styl e>
..,.. jQuery:
1. <scri pt type="text/ javascript">
3. var af = S( '#galeri a + span ' ) .addClass('abre-fecha' )
4. .css({opacity:0 .6, wi dth:l20});
5. S('#galeria') .prepend(af)
6. .click(functi on(event) {
7. event.preventDefault();
8. if ($(' .foto ' ).attr( 'width') > 120) {
9. S(' . foto ' ).attr({Yridth: l 20, height :90}) ;
10. S(' .abre- fecha') . text('Clique para ampliar')
11. . css( {width : S(' . foto' ) . attr('Yri dth ') }) ;
12. } else {
13. S(' .foto ' ).attr({wi dth:SOO, height:375});
14 . S(' .abre-fecha').text ('Clique para fecha r' )
15 . . css( {wi dth: S(' . foto ' ). attr('Yri dt h' )}) ;
16. };
17. }) ;
18. }) ;
19 . </ scri pt>
.iJ [arquivo-12.2a.html)
Código comentado:
Linhas 3 e 4 Armazeno u-se em uma variável um o bjeto jQue ry que é descrito
assim: selecio na-se o ele me nto span que se segue ao div#ga1e ria (é
o ele me nto da ma rcação que conté m a dica ao usuá rio - C liqu e
para am plia r - e a ele se a tribui uma classe de no minada ab re-
fecha) (veja regras d e estilo) e, a segu ir, d efine-se, pa ra a dica,
u ma o pacidade e uma largu ra igual à la rgura do thu m bnail.


Linha 5 Insere-se dentro e no início - prepend() - do div#galeria a dica,
conforme modificada anteriormente.
Linha 6 Define-se uma função para ser executada quando o usuário clica
o di v#ga1eri a.
Lin ha 7 Impede que o clique na imagem cause a aberrura de uma janela
com a imagem ampliada. Equivale a return false.
Linha 8 Testa o tamanho da foto na tela, verificando se sua largura é ma ior
que a do th umbnail (120px, no caso do exemplo em questão).
Quando a página for carregada, a condição será falsa, pois nessa
ocasião se apresenta o thumbnail. O script vai para a linha 12.
Suponha que o usuário já ampliou a imagem e cl icou-a para
rcverrer ao estado inicial, moscrando novamente o thumbnail.
Nesra situação, a condição de reste é verdadeira e você deve
seguir com a linha 9. Caso se confunda no acompanhamento
do funcionamento do script, leia a pt1rtir da linha 13 e depois
volte para a linha 9.
Linha 9 Como a imagem apresentada é a ampliada, insere-se o atributo
width para rcsrabclcccr a largura do thumbnail
Linha 10 Altera-se o texto da d ica.
Linha 11 Define-se o texto da d ica com largura ig ua l à do thumbnail.
Linha 13 Aqui começa o fu ncionamenro do script quando o usuário clica o
thumbnail para ampliá-lo. Insere os atributos definindo a largura
e a altura da imagem ampliada.
Linha 14 Altera o texto da d ica.
Linha 15 Define o elemento span, que contém a d ica, com uma largura
ig ual à da imagem ampliada.
Segunda etapa
Como você deve ter observado, o script desenvolvido na etapa anterior caL1sa a
ampliação e fechamento da image m d e forma abrupta. Nesta segunda etapa, você
irá usar o m é todo ani mateO para melhorar essas rransições. Observe os acréscimos
inrroduzidos no scripr anrerior:
1. <Se ri pt type="text/ j avas eri pt">
3. var af = S('#galeria + span ' ).addCl ass('abre-fe cha ' )
4. . css({opaci t y: O. 6, wi dth: 120});
5. S('#galeria').prepend(af)
7. event. preventOefault();
8. S(' .abre- fecha').hide();
9. if (S('. foto ') .attr('vridth' ) > 120) {

Cód igo comentado:

Unha(s) Descrição
Linhas li e 20 Acrescenta-se a mudança de opacidade para 20% durante a
animação para ampliar e reduzir. lsro significa que ao final de
cada animação, a imagem estará com sua opacidade reduzida
para esse valor.
Linhas 12 e 21 Ao final da animação de ampl iação e redução, executa-se uma
função que restabelece a opacidade da imagem com velocidade
ig ual a 1 segundo.
Quarta etapa
Considere que a an imação obtida na etapa anterior satisfaz seus propósitos e,
nesta etapa, você focará outro aspecto da ampliação da imagem. Note que se
utili zou uma imagem gravada com as dimensões d e 500 x 375px e, a partir de la,
construiu-se um thum bnail com o uso dos atributos viidth e height no elemento
img constante da marcação. Isco àrou íle,xibilidad e do script, pois se em outro
local do sire você precisar usar um rhumbnai l e/ ou imagem ampliad a com outras
dimensões, rerá de reescrever a marcação e o script.
Nesta solução, rorne o script reutilizável, possibilitando a personalização das

dimensões das imagens. Note que em navegadores sem suporre para j avaScripc,
não há escolha para variar as d imensões a não ser alterar a marcação e/ ou as
dimensões da imagem original.
No seu scripc, cri e variáveis para armazenar as dimensões. Com isso, basca
mud ar o valor d as variáveis de acordo com a necessidade. As alterações no script
anterior são mostrad as a seguir:
1. <scri pt type="text/javasc ri pt">
3. var larguraFoto = 800 ; var alturaFoto = 600 ;
4. var larguraMi ni = 200 ; var altur~ini = 150;
S. S(' . foto').attr({width :larguraMini, height :alturaf.!ini});
var af = S('#gal eria + span ' ).addCl ass('abre-fecha')
.css({opacity:0 .6, wi dth :larguraMini });
5. S('#galeria') .prepend(af)
7. event .preventDefault();
8. $(' .abre-fecha ' ) .hide() ;
9. if ($(' .foto ' ).attr( 'width') > larguraMini ) {
10. S(' .foto' ).animate(
11. {width: larguraMini , hei ght :alturaf.!ini, opaci ty: O. 2},
1500, function() {

12. $( ' .foto') .animate ({opacity:l}, 1000);

13 . $(' . abre-fecha') . show() . text( 'Clique para ampliar');
14. . css( {wi dth:$(' .foto ' ) . attr('wi dth')});
15. }) ;
16. $(' .abre-fecha').text('Cl ique para ampl iar ' )
17. .css({width: S('. foto ' ) .attr('width ' )}) ;
18. } else {
19. $(' .foto ' ).animate(
20 . {width: larguraFoto , height: alturaFoto , opacity :0.2}, 1500,
function() {
21. $(' .foto ' ).animate ({opaci ty:l}, 1000) ;
22. $(' .abre-fecha').show() .text('Cli que para fechar ')
23. . css({wi dth: S(' . foto ' ). attr('vri dth ' )}) ;
24. });
25. };
26. });
27. }) ;
28. </sc ri pt>
~ [arquivo-12.2d.html]
No arquivo que ilusrra essa solução, utilizaram-se a mesma imagem e mar-

cação HTML das soluções anteriores e definiram-se ranro o rhumbnai l como a
imagem ampliada com dimensões diferentes das adotadas nessas soluções. Faça
uma cópia do arquivo que ilustra este exemplo e altere, no script, as dimensões
do thumbnail e da imagem ampliada, para verificar na prática o funcio namento
do scripr.
Quinta etapa
Para esta etapa, você irá estudar uma solução de ampliação de imagem que simula
o efeito ligh rbox. Esse efeito consiste em posicionar a imagem ampliada no centro
da tela sobre uma máscara na cor preta transparente ocu pando roda a tela.
Para esta etapa, uti lize uma marcação HTM L e CSS conforme os códigos
mostrados a seguir.
... CSS:
1. <style type="text/css" media="all ">
2. body {margin: 20px O; paddi ng: O; background:#d6e2e5;}
3. #tudo {width: 600px; font : 8~/l.2 Arial, Helvetica , sans-serif ; margin :Oauto;
paddi ng :O 20px; col or :#666; background :#fff; border :l px dotted #999;}
4. .foto{ border:none; margin:lOpx ;}
S. .left {float: left ;}
6. .right {float:right;}


Linh a 14 Acrescenta o ca min ho para a imagem ampliad a, n o elem ento i mg
criad o a nteriormente.
Linhas l5 a 17 Define regras CSS de posicíonamemo para a imagem ampliada.
Noce que a fo lha de estilo da pêtgina definiu posiciona menco
abso luco (em relação ao elememo body) para a imagem. Asco-
ordenadas left e top aqu i definidas posicionam a imagem no
centro da tela. Veja figura 12.4 pani detalhe.
Lin ha 18 Coloca, n o documento, o elemento i mg criado a nter iormente
cclm seu conteúdo e regras CSS. A segu ir, defin e u m a fu nção a
ser executad a quando o usuá rio d ica a imagem amp liad a.
Linha 19 Faz desa parecera imagem am püada com o uso cio efeiro fadeOutO
e velocidade de 1 segundo.
Lin ha 20 Faz desaparecer a máscar< 1 com o uso do efeito fadeOut () na
velocidade de 1,5 segun do.
Na figura 12.4, mostramos o efeito fin al e as dimensões citadas nas linhas 16

e 17 do script para esclarecer o posicionain ento no centro da cela.
Figuro 12.4 - Efe ito lightbox fi nal.

Linha(s) Descrição(cont.)
Linh a 4 Define uma função a ser executad a quando o usuário clica uma
imagem da galeria.
Linh a 5 lmpedeque o navegador siga o link para o arquivo da imagem.Afinal,
você é que irá definir como a imagem será ampliada, não desejando
s implesmence u m Link para o arquivo da imagem.
Lin ha 6 Esconde roda a galeria.
Linha 7 Testa para saber se o clique foi em um thumbnaíl o u em uma imagem
ampliada. A condição de teste é para saber se a larg ura da imagem é
maior que a do tbumbnail (a largu ra é de lOOpx no exemplo). Neste
caso, a imagem clicada foi a ampliada. Quando a página é carrega-
da, o primeiro clique será obrigaroriamenre em um tb u mbnail e o
res ce resu lca falso com o scripr indo para a linha li. Supond o que
uma imagem ampliada foi aberca eo usuário realiza um clique para
fechá- la, o script segue para n linha 8.
Linha 8 Reduz as dimensões da imagem ampliada para as dimensões do
thumbnail, para recolocá-la na galeria.
Lin ha 9 Mostra a galeria.
Linha 10 Resta belece o texto da dica para o usuário.
Lin ha 12 Aqui começa a ação logo que a página é carregad a e o usuário cl ica
um tbum.bnail. Amplia a imagem clicada, a lrcnmd o seus arributos
para hll'gum e a ltura, e revela usando o efeito sl i deOown() .
Linha 13 Altera o texto da dica ao usuário.
figura 12.6, o efeito final d a ampliação em uma to mad a no mo-

Observe, n a
mento em que a ampliação estava sendo processada.
~~~~~~~~~~~~~~~~~~~~~~~- - ~ -- .
~ livro jQuery do Maujor 1 lmag,ens e galerias de fotos · Mozilla Firefox ~[QJ(8]
Arquivo ~itar qjtW !:!iStôrico Fayoritos E.erramertas Ajyda
Fotos de Brasília
Figuro 12.6 - Galeria, imager.i em amp liação.

Esce script apresenta um comportamento indesejado que precisa ser corrigido.

Para vis ualizarral comportamento, abra o arquivo-12. 3a.html que contém o exemplo,
clique um thumbnai l para ampliar a imagem e, a segu ir, também esta, enquanto
está sendo ampliada, ou seja, anres de se complerar a ampliaçã o.
Você vai norar que o clique n a imagem em movimento faz qu e o processo

de ampliação se inicie sem ter sido completada a prim eira ampliação e a partir
daí o script falha completamente, desconfigurando a galeria. Para resolver esse
comportamento, é necessá rio desabi litar o clique na imagem enquanto está
sendo a mpliada.
Em linguagem corrente, deseja-se o seguinte: enquanro a imagem estiver em movi-

mento de ampliação, não execute a função disparada por um clique nela, ou, ainda, por
negação de condição: execute a função somente se a foto não estiver sendo animada
Usando a condição de negação e traduzindo para linguagem jQuery, tem-se:
if ( !S(' foto ' ).is(' :animated ')) {//permi tir cl i que para executar a função}
Complementarmence, será necessá rio d esabilitar o cu rso r-padrão indicando

link (mãozinha) durante a animação, sendo o script:
if (S(' .foto ' ) .is(' :animated')) {(S(' .foto') . css('cursor', 'default ')} ;
Finalmente, o script com os acréscimos necessá rios para corrigir o compor-

tamento estranho d ecectado no script ancerior:
1. cscript type•"text/ javasc ript">
2. S(document).ready(f unction() {
3. $( ' .foto').each(function() {
4. S(this).click(function(event) {
5. event.preventOefault();
6. i f ( !S(this).is ( ':animated ' )) {
7. $(' .foto' ) .hi de();
8. if (S(thi s) .attr( ' width ' ) > 100) {
9. S(this).attr({width :lOO, height:75});
10. S('. foto ' ) .show();
11. S(' . abre-fecha' ).text('Clique para ampl iar');
12. } e1se {
13. S(thi s) . attr({width: 500, hei ght: 375}). sl ide0own(1500);
14. S(' .abre-fecha') . text( ' Clique para fechar ' );
15. }
16 . }
17 . if ($(' .foto ' ) . is( ' :animated')) {$(' .foto') .css( ' cursor' , 'default ')} ;
}) ;
18. }) ;
19. }) ;
20. </scri pt>
.iJ [arquivo-12.3.1 b.html)
Linha 11 Reduz a opacidade da imagem ampliada para 30%.
Linha 12 Coloca a imagem ampliada dentro da tela.
Lin ha 13 Anima a imagem ampliada aumenrandosua opacidadede30% para
100% em um interva lo de tempo de 2 segundos.
12.4 Slide-show
Nesta forma de apresentação, a galeria de imagens é construída sem auxílio de
rhumbnails, sendo ap resentada inicialmente uma imagem em seu tamanho na-
tura l qu e será substituída pela seguinte com o uso de um efeito de transição. O
método de substituição das imagens pode ser automático ou por interação do
usuário com um mecanismo de navegação.
Primeira etapa
esta etapa, você irá retirar os rhumbnails e apresentar inicialmente na página
uma das imagens em seu tamanho ampliado. Uma dica ao usuário irá instruí-lo
a clicar a imagem apresentada. A cada clique, haverá a troca da imagem em uma
apresentação do tipo slide-shovv.
A marcação HT:N1L e as CSS são as da página básica e o script para essa pro-
posta é mostrado a segu ir:
3. $(' .abre-fecha').text( ' Galeria : cl i que a foto');
4. $('#galeria')
S. .css({
6. position:'relative' ,
7. width: '500px',
8. height : '37Spx'
9. }) ;
10. $('.foto').attr({width:SOO, height:37S})
11. .css({position:'absol ute', left: O, zlndex: l})
12 . .click(function(event) {
13. event.preventDefaul t();
14. S(this).slideUp(lSOO, function() {
15. $(thi s). show(). prependTo( '#galeria ' ). css ('cursor ' , 'poi nter ' ) ;
16. });
17. }) ;
18 . }) ;
19. </script>
.ij [arquivo-12.4a.html]

Cód igo comentado:

Unha(s) Descrição
Linha 3 Troca o texto da dica ao usuário. 1ote que na marcação o tex-
to é: "Clique para ampliar·: que é apropriado para a galeria e
funciona sem o script.
Linhas 4 a 9 Dimensiona o div container de rodas as imagens para uma lar-
gura e alrura iguais às da imagem ampliada. O posicionamento
relativo destina-se a criar um contexto de posicionamenro, pois
será uti lizado z-index para colocar uma imagem sobre a outra
no container e essa propriedade CSS só funciona para elemen-
tos posicionados. Você verá adiante que cada imagem receberá
posicionamento absoluto dencro do conrainer.
Linha 10 Amplia as imagens para seu taman ho natural, pois na marca-
ção estão reduzidas. Este método sobrescreve as dimensões da
marcação.
Lin ha Jl Posiciona cada imagem dentro do concai ner de forma absoluta,
no mesmo lugar, e atribui a todas elas o mesmo z-i ndex. De
acordo com as Recomendações para CSS, elcmcnros com mesmo
z-index são empilhados, levando-se cm coma a ordem em que
aparecem na marcação. O critério é que o elemento que se segue
recebe maior z-i ndex. este caso, as imagens foram marcadas de
1.jpg até 10.jpg e, consequentemente, o maior z-index será da
imagem 10.jpg e o menor, da imagem 1.jpg. Assim, a imagem
visível quando a página é carregada é a última imagem marcada.
A sequência de visibilidade do slide-show será da úlrima para
a primeira imagem marcada. Pode-se facilmente alterar essa
sequência fazendo um loop pelas imagens com o método each()
e um contador. Esta solução será um bom exercício para você
treinar seus conhecimentos.
Linha U Define uma fu nção a ser executada quando o usuário clica uma
unagem.
Lin ha 13 Desabilita a ação-padrão do navegador, impedindo que ele siga
o link para o arquivo da imagem.
Linha 14 Esconde a imagem com efeito de animação sl ideUp() e define
uma função a ser executada ao final da animação. Isto ir;í revelar
a imagem que se segue no empilhamento.
Linha 15 Moscra a imagem que acaba de ser escondida e move-a para o
início da pilha. Com isso, adquire o z-i ndex mais baixo e só irá
aparecer na segunda passada do slide-shO\~ A imagem fo i movi-
da, mas o elemenco a que era seu container não foi junto, então
será necessária a declaração CSS cursor pointer para a segunda
passada do slide-show. 'ore, ainda, que ao declarar sl ideUp()
para a imagem, esca desaparece e permanece invisível. Por isso,
utiliza-se o método show() para restabelecer a visibilidade da
imagem.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
tj Livro jQ.uery do Maujc>r 1 Imagens e galerias de fotos · Mozilla Firefox ~@(g'J

ê_rquivo ~ar E~ibir !jstórieo
'
Fay_oritos
.
[ erramer.tas
'
Aj!J.Çla
Fotos de Brasília
- .- ' 1
•. 1- ····---- .
1 1----==-
I • --==:y,
•
-
Tit11 lo nível 2
1-"rt>m ípsum dolof "'" am11:, oon~eiuer 3diptsoino ~lit Mlrbi al~1end. purus q"'s bon>ot
l3'Jcll>us , ante :r~ue rmil;twada mi, 1d rhcncus ""'""" 'º"'m 911et ellt. IJt sollicitul!ln sodali!S
p«ivs . Ph~lus líboro filis, bla-~dit nto, commodo VI. imp<nf~t ~. nibh. Susptn-d1sk pot1'111,
Dontc ulla:nco~r cursus dol«
Figuro 12.8 - Golerio, novegoçõo por botões.
É necessário acrescentar algumas regras CSS na fo lha de estilos básica da

página que são mostradas a seguir.
~ CSS:
#galeria a, #galeria a:visited {
text-decoration:none;
color:#333;
padding:2px 6px;
background:#999;
margin- ri ght:2px;
}
#galeria a:hover, #tudo #galeria a.torrente {
color:#999;
background:#ccc;
}
Essas regras CSS destinam-se a estilizar os botões de navegação. Note que se

criou a classe corrente para ser inserida no botão clicado com a fina lidade de des-
racá-lo, usando regras CSS apropr iadas, e assim fornecer ao usuário a informação
sobre qual imagem está sendo visualizada.

..,.. jQuery
3. S(' .abre-fecha ') .hide() ;
4. $(' .foto').each(function(i) {
5. S(this).replaceWith('<span >' + (i+l) + ' </span>')
6. $('#galeria').css('textAlign', 'center') ;
7. }) ;
8. S('<div id="tela"><img src,,"l.jpg" alt=''Oescrição da imagem" /></div>')
9. . i nsertBefore('#galeria ' )
10. $( '#galeria a').click(function(event) {
11. event.preventOefault();
12 . $('#galeria a').removeClass('corrente');
13 . S(this).addCl ass('corrente ' );
14. S( '#tela img') . attr('src', S(this) . text() + '.jpg ' )
15. .css('opaci t y', '0 . 3') .animate({opaci t y:l} , 1500) ;
16. }) ;
17 . }) ;
18 . </script>
~ [arquivo-12.4c.html]
Código comentado:
Linha(s) Oe5crição
Li n ha 3 Esconde a dica ao usuário, pois só é necessária quando j avaScript
estiver desabil itado no navegador, não sendo necessária nesta solu-
ção.
Linha 4 Inicia um loop por rodos os elementos i mg que marcam as foros da
galeria.
Linha 5 Substirui cada elemento imagem enconrrado por um elemenco span
comendo um número. Serão canros elemenros span quantos forem as
imagens da galeria numerados de 1 (um) até o número correspon-
dente à quanridade de imagens enconrrada. Com isso, criam-se os
b otões de navegação.
Linha 6 Esta regra CSS centraliza o conjunto de botões de navegação em
relação à imagem ampliada.
Linha 8 Cria-se o elemento div#tela com dimensões iguais às da imagem
ampliada. Veja, na fol ha de estilos da página, as regras CSS para esse
elemento di v.
Linha 9 lnseriu-se o elemento di v criado acima dos botões de navegação.
Veja na marcação da página que os botões criados estão comidos
n o elemento div#galeria.
Linha 10 Define-se uma função a ser executada quando for clicado um ele-
menco a da navegação horizontal numérica.


Linh a 12 Remove-se a classe corrente que destaca a imagem clicada. Este
método entrará em ação a partir do segundo clique em um número
da navegação.
Linha 13 insere-se a classe corrente para destacar o número cl icado.
Linha 14 Indica-se o caminho para a imagem clicada usando a troca do atri-
buto src.
Linha 15 Diminui-se para 30% a opacidade da imagem a revelar e, a seguir,
an ima-se a imagem fazendo sua opacidade aumentar para 100%.
Quarta etapa
Há situações nas quais se deseja fornecer um texto descritivo da imagem servindo
como legenda. Nes ra ecapa, você irá esrudar como apresenrar uma legenda para
cada imagem da galeria desenvolvida na etapa anterior.
Posicione a legenda, escrita sobre u m fundo de cor sólida e cransparente, sobre

a própria imagem, conforme mosa:a a figura 12.9.
Fotos de Brasília
Figufo 12.9 - Galeria com legendo.

A legenda deverá constar da marcação HTML da página básica e será consti-

tuída pelo cexco do atributo alt de cada imagem. Isco é, se você pretende adotar
essa solução em seu projeto, escreva a legend a para cada imagem no atributo em
questão e o script irá extraí-la de lá.
O posicionamento da legenda é controlado por regras CSS. Neste caso, você

irá definir posicionamento relativo para o container da imagem e posicionamento
absoluto para a legenda. Assim fazendo, controlará com regras CSS o posiciona-
mento da legenda sobre a imagem. As regras CSS a acrescentar na fo lha de estilos
do script desenvolvido na etapa anterio r são mostradas a segu ir.
... CSS:
#tela {
position:relative;
width:500px ; height:375px; margin:O auto Spx auto ; border:4px soli d #999 ;}
#galeria a, #galeria a:visited {text-decoration: none; col or:#333 ; padding :2px 6px;
background:#999; margin-right:2px;}
#galeria a:hover, #tudo #gal eria a.corrente {color:#999; background:#ccc ;}
#tela p.legenda {position :absolute; width:480px; left:O; bottom:O;
font-size:14px; font-weight:bold;
padding:2px lOpx; border-top:lpx dotted lfff; background:#OOO; margin:O;}
A legenda será marcada denn-o de um parágrafo ao qual se atribuiu a classe

denominada legenda. O parágrafo será posicionado de forma absoluta , com o uso
de coordenadas left e bottom, dentro do elemento div#tela que contém a imagem.
Aumentam-se o peso e tamanho da fonte, acrescentam-se padding e border para me-
lhorar a apresentação do ce.xco e declara-se margem inferior igual a O(zero) para
o parágrafo, com o objetivo de evitar que a sobreposição de margens desloque o
texto para cima em navegadores q ue não o Internet Explorer.
A segu ir, veja os acréscimos e modificações no script anterior para obter o

efeito proposto nesta etapa:
1. <Scri pt type="text/j avas e ri pt">
3. $('. abre-fecha'). hide() ;
4. $(' .foto ' ).each(function(i ) {
5. S(this).replaceWi th (' <span title='" + S(this).attr('alt') +"'>' +
(i +l) + '</span>');
6. S('#galeria ' ).css('textAlign', 'center');
7. }) ;
8. S('<div id="tela"><img src="l. jpg" alt="Descrição da imagem" / ></div>')
9. .i nsertBefore( ' #galeria ' )

CAPÍTULO 13
Plug-ins
A biblioceca jQuery é um sofcware de código aberco e excensível. Isto significa

que qualquer um, com conhecimento da linguagem de programação JavaScripr,
pode modificar, acrescentar ou recirar funciona lidades de seu código original
para sacisfazer necessid ades de seu projero.
É esse caráter de excensibilidade que possibilita a criação de plug-ins, códigos

escriros por rerceiros, em linguagem javaScripc, q ue podem urilizar as regras
de sintaxe da biblioceca e destinam-se a simplificar scripcs que, com o uso das
funcionalidades nativas, seriam mais complexos.
Este capículo destina-se a mostrar como funcionam os plug-ins para a bi-

blioceca jQuery. Você estudará como inscalar e configurar os parâmetros de dois
plug-ins escolhidos entre centenas existentes. Para uma listagem completa dos
plug-ins disponíveis, consulte http://plugins.jquery .com/.
13.1 Introdução
13.1.1 Plug-ins de terceiros

Para fins de escudo, a inscalação e o uso de um plug-in serão divididos em três
fases distintas, a saber:
• primeira fase: fazer o download do plug-in.
• segu nd a fase: linkar os arquivos que fazem o plug-in funcionar na página

em que será necessário.
• terceira fase: escrever o código com os parâmetros requeridos pelo plug-in.
355
O autor do plug-in, ao d isponibil izá-lo para uso público, em geral cria uma
página ou algumas páginas comendo informações sobre o plug-in que forn ecem
sua descrição e fina lidade, instruções para instalação, exemplos de aplicação,
parâmetros de configuração e inform ações relacionadas. De posse dessas infor-
mações, você teni condições de instalar e fazer fun ciona r os plug-ins.
13.1.2 Plug-ins nativos

Alguns plug-ins destinados a criar funcionalidades para a interface do usuário
fazem parte nativamente da biblioteca jQuery e constam de sua documentação
oficia l. Tais plug-ins foram reunidos em uma seção da biblioteca denominada
jQuery/ Ul e arnal menre estão divididos em n-ês categorias como mostrado a
seguir:
• Plug-insnativospara interação
Plug-in Descrição
Draggables Cria irens que podem ser arrastados com o uso do mouse.
Dropables Cria a lvos para soltar objetos arrasrad os.
Sorrable Man ipula e ordena listas com o mouse.
Seletables Seleciona itens com o mouse.
Resisables Redimensiona objetos com o mouse.
• Widgets
Plug-in Descrição
Accordion Cria painéis retrá teis para conreúdos.
Datepicker Cria um ca lendário para selecionar daras.
Dialog Cria uma caixa de d i<:Í logo flutuante.
Slid er Cria cursor des lizante.
Tab Cria navegação por abas.
• Effects: reúne um a série de diferences efeitos e a divisão formal em categorias

não tem valor prático. Assim , será apenas citado para que você saiba de sua
ex istência.
13.2 Plug-in jCarousel

Esre plug-in foi desenvolvido por Jan Sorgalla e sua documentação encontra-se
hospedada em http ://sorgalla.com/jcarousel/ . Segundo defin ição do autor, o plug-in
destina-se a manipular horizontal ou verticalmente uma lista de itens. Os itens da

Capítulo 13 • Plug-ins 357
!isca podem ser conteúdos estáticos ou dinâmicos carregados via AJAX ou com
uso d e outra programação qualqu er. A manipulação dos conteúdos se faz com
rolagem nos sentidos adiante e para trás, podendo ser animada ou não.
Trata-se de um plug-in extremamente útil para construção de galerias de ima-

gens. O autor classifica o plug-in em três grupos conforme relacionados a seguir:
• Conreúdos estáticos
• Carrossel simples vertical e horizontal.
• Carrossel com scroll automático.
• Carrossel com o uso d e funções callback .
• Carrossel com controles externos.
• Carrossel com perso nalização d a imagem de partida .
• Vários ca rrosséis em uma página.
• Conteúdos dinâmicos
• Carrossel com conreúdo carregado via JavaScript.
• Carrossel com conteúdo carregado via AJAX.
• Carrossel com conteúdo carregado via AJAX de um script PHP.
• Carrossel com conteúdo carregado via AJAX com imagens hospedadas
no Flickr (srream e API).
• Especiais
• Carrossel circular.
• Carrossel para rolagem de textos.
• Carrossel elástico.
• Carrossel e T hickbox 3.
• Ca rrossel com efeito d e animação personalizado.
Como se pode notar, as possibilidades de uso são inúmeras e não serão de-
talhadas todas elas porque o objetivo desce capítulo é relatar a existência dos
plug-ins e mostrar os princípios d e insta lação e uso deles. Assim, você estudará
deralhadamenre algu ns exemplos do g rupo conceúdos estáticos e o uso especial
com T hickbox 3.

13.2.1 Instalação
A insta lação do plug-in consiste tão somente em fazer o down load dos a rquivos,
descompactá-los, hospedar a pasra-raiz do plug- in e linkar os arquivos requeridos
na página o nde você pretende insta lá-lo.
Visite http: //sorgalla.com/ jcarousel/ e faça o down load do arqu ivo disponível
nas versões jcarousel. tar.gz ou jcarousel .zi p. Descompacte o arquivo e hospede a
pasta-raiz denom inada jcarousel. A pasta-raiz co ntém várias subpasras e arquivos
destinados a criar os diferentes efeitos a que o plug-in se propõe. Caso você saiba
exatamente o que está fazendo, poderá delecar pastas e/ou arquivos não utilizados
em seu projeto, mas se tiver dúvidas, mantenha a pasta-raiz do plug-in com todos
seus conteúdos intactos. Tendo descompactado e hospedado o plug-i n, tenha
agora uma visão gera l de seus componentes.
Na pasta exampl es, existem vários arquivos HTML contendo exemplos de todas
as possibilid ades de criação do plug-in.
A pasca lib contém as versões normal, co mpacta e cod ificada do script do

plug-in. Uma dessas três versões deverá ser linkada ao documenco que contém o
carrossel. O critério de escolha de uma delas é o mesmo adorado para a linkagem
da bibli oteca propriamente dita. A versão mais co mpacta e qu e demanda menos
tempo de carregamenco é a do arquivo jquery.jcarousel. pack.js. Essa pasta contém
ainda o arquivo de estilização geral do carrossel denominado jquery. jcarousel. css,
que deverá ser linkado à página do carrossel, e uma subpasta denom inada thickbox
contendo os arquivos necessários à obtenção do efeito rhickbox no carrossel.
A pasta skins contém duas sub pastas denominadas ie7 e ta ngo. Essas subpasras
contêm a folha de estilos e imagens necessárias para duas opções de apresentação
visual, ou remas, do carrossel. Você pode personalizar a apresentação criando seu
tema em uma subpasta com o no me do rema e nela inserir uma folha de estilo e
imagens personalizadas. Se você pretend e personalizar um skin, use como po nto
de partida uma das duas fo lhas de estilo para um dos remas-padrão, mantendo
o no me dos seletores, e grave-a com o no me skin . css.
Assim, roda página que contiver qu alquer uma das versões de instalação do
ca rrossel deverá ser linkada conforme mostrado a seguir:
1. <head>
2.
3. <script type .."text/ javascri pt" src.." . . / jquery-1. 2.6. js"></sc ript>
4. <script ty pe.."text/javascri pt" src.. "jcarousel/l ib/j query.jcarousel .pack.js">
</script>

6. <scri pt type="textlj avas cri pt">

7. jQuery(document).ready(function() {
8. jQuery('#chorizontal' ) .jcarousel () ;
9. jQuery('#cvertical' ) .jcarousel({
10. vertical :true
11 . }) ;
12. });
13. <l scri pt>
Cód igo comentado:
Linha 1 Link para a biblioteca jQucr}~
Linha 2 Link para o plug-in jCarousel. Esre link deverá ser colocado após
o link para a biblioreca.
Linha 3 Link para a fo lha de estilo geral.
Linha 4 Link para a folha de estilo do rema ie7 que será urilizada na
versão horizontal.
Linha 5 Link para a folha de estilo do tema tango que será usada na versão
vertical.
Linhas 7 a 12 Conrainer para scripts jQuery.
Linha 8 Sintaxe para o carrossel horizontal. Basta passar como parâme-
tro o valor do id do elemento ul que contém as imagens para
o carrossel. Veja, na marcação HTML mostrada anteriormente,
que o id adotado foi chorizontal.
Lin has 9e10 Sintaxe para o carrossel vertical. Basta passar como parâmetro
o valor do id do elmenro ul que conrém as imagens para o car-
rossel e a seguir definir vertical :true. Veja na marcação HTML
mostrada anteriormente, que o id adotado foi cvertical.
O resultado final é mostrado na figura 13.l.
Para controlar a velocidade da rolagem e o número de imagens a rolar de cada

vez, use os parâmetros destacados a seguir:
jQuery(document).ready(function() {
jQuery( ' #chorizontal ').jcarousel({
scroll:2, li número de imagens a rolar de cada vez
animation:1800 li velocidade da rolagem em mi l issegundos
});
}) ;

Carrossel horizontal
Carrossel vertical
Figuro 13.1 - Carrossel simples.
13.4 Carrossel com scroll automático

esta versão, o carrossel executa a movi mentação das imagens au tomacicamenre,
em um intervalo de tempo configurável. Ao atingir a visualização das últimas
imagens, a rol agem volta insrancanea mente ao início (configurável como se vení
adiante), repetir1do-se o ciclo indefinidamente. São fornecidas as seras de coman-
do manuaJ e caso o usuário cliqu e uma delas, a colagem au.romárica cessa e o
carrossel passa a (uncionar sem ela , até que se recarregue a p<~gina . Se o usuário
coloca o ponteiro <lo mouse sobre uma imagem, cessa o scroll automático até
que ele rerire o ponteiro de cima da imagem.

Cód igo comentado:

Unha(s) Descrição
Linha 1 Link para a biblioteca jQucry.
Linha 2 Link para o plug-in jCarousel. Este link deverá ser colocado após
o link para a biblioteca.
Linha 3 Link para a fo lha de estilo geral.
Linha 4 Link para a fol ha de estilo do tema ie7 que será usada neste
exemplo.
Linhas 5 a 18 Contém a definição de uma função-padrão do plug-i n denomi-
nada pelo autor de mycarousel_i ni tCallback(carousel) . Deve ser
inserida na seção head do doeu men to exatamente como mostrada
no script. Copie e cole, retirando da documentação oficial do
plug-i n ou do arquivo HTM L deste exemplo.
Linhas 7 a 12 Desabilita o scroll automático quando o usuário clica uma das
secas para scroll manual.
Lin has 13 a 17 Para e reinicia o scroll automático quando o usuário aponta ou
retira o ponreiro do mouse de cima da imagem.
Linhas 19 e 25 Conrai ner para scripts jQuery.
Linha 20 Passagem do para metro valor do id escolhido para o elemenro
u1 de sua marcação.
Linha 21 Aqu i você define o tempo em segundos entre cada scroll auro-
mácico. Escolheu-se 1 segundo para fins de demonstração.
Linha 22 Aqui você controla o reinício do ciclo automático. O valor-padrão
ou se não for especificado um valor,oscroll automático irá perdu-
rar por um ciclo somente. Os valores possíveis são last, firs t ,both,
null (pad rão). Para maiores detalhes, consulte http:llsorgall a.
comlprojectslj carousell#Configuration.
Linha 23 Chama a função definida anceriormenre.
Talvez você queira desabilitar os botões para scroll manual. este caso, acres-
cente o seguinte no script anterior:
jQuery(document). ready(fun cti on() {
jQuery( ' #cscrol l ' ).jcarousel({
auto :l,
wrap: ' last',
buttonNextHTML: nu11 , 11 Desabilita o botão: próxi mo
buttonPrevHTML: nul l , 11 Desabilita o botão: anterior
i ni tCallback:mycarousel_i ni tCal l back

} );
}) ;

No arquivo que ilustra esse exemplo são apresentadas duas versões conforme
mostrado na figura 13.2.
Carrossel com scroll aut omatico e controle manuaJ
Carrossel com scroll aut omático sem controle manual
-
figuro 13.2 - Carrossel com scroll automótico.
13.5 Carrossel com comandos externos

Para esta versão, você deverá incluir uma folha de esti lo para os comandos, uma
marcação para a navegação por barões e a marcação de um menu select para a
escolha de opções, tudo confo rme mosrrado a seguir.
Existe uma folha de estilo-padrão que controla a apresentação dos comandos
externos e deverá ser incorporada ou linkada à página que contém o carrossel.
Você pode personalizar a apresentação alterando as regras de estilo na citada
folha sem, contudo, alterar o nome dos selerores CSS. Veja a seguir a fo lha de
estilo para esta versão do carrossel:
<style type="text/css">
/H
* Folha de esti los para os controles do carrosel.
"-/
. jcarousel-control {margi n-bottom:lOpx; text-align:center;}
.j carousel-control a {font-size:75%; text-decoration:none; padding:O 5px;
margin:O O 5px O; border: lpx solid #fff; color:#eee;
background-color: #4088b8; font-weight :bold; J

.j carousel-cont rol a:focus,

. j carousel -control a:active {outline:none;}
. jcarousel -scroll {margi n-top :lOpx; text-al ign :center;}
. j carousel -scrol l form {margin:O; padding:O;}
. j carousel-scrol l sel ect {font-size:75%;}
#mycarousel-next,
#mycarousel -prev {cursor: poi nter; margin-bottom: -lOpx ;
text-decorati on :underline; font-size:llpx;}
</style>
A marcação H T ML é mostrada a segu ir:

<div id="mycarousel" class=" jcarousel-ski n-i e7">
<div class:o"jcarousel -control ">
<a href="#">l</a>
<a href="#">2</a>
<a href:o"#">9</a>
<a href="#">10</a>
</div>
<ul class="jcarousel-ski n-ie7">

<li ><img src="Ls.jpg" al t="Descrição da foto" width="75" height="75" /></li>
<li><img src="lO_s.jpg" al t="Descrição da foto" width="75" height="75" /></li>

</uh
<div class=''jcarousel -scrol l ''>

<form action="">
<a href="#" id="mycarousel-prev">&laquo ; Anterior</a>
<select>
<option value=''l''>Scroll 1 item por click</option>
<opt ion value="2">Scroll 2 items por cl i ck</opti on>
<Option value=''3''>Scroll 3 items por click</option>
<opt ion value="4">Scroll 4 items por cl i ck</option>
<Option value="5">Scroll 5 items por cl i ck</opti on>
</select>
<a href="#" i d="mycarousel-next">Próxima »</a>
</form>
</div>
</div>
Crie a marcação para o carrossel em três blocos de código com o mostrado. Os
três blocos devem ter como container, obrigatoriam ente, um div com i d="mycarousel "
e class="jcarousel -skin-nomedotema" . Não altere esses nomes id entificadores.

O primeiro bloco de código tem como container um d iv com class="jcarousel -

controls" e contém cantos links mortos qu antas forem as imagens constantes do
carrossel. este exemplo, há dez imagens.
O segundo bloco de código é o elemento ul com as imagens. Esse bloco di fere dos
já estudados para as versões anteriores porque aqui não há necessidade de atribuir
um id para o elemento ul , bastando definir uma classe com o nome do tema.
O terceiro bloco de cód igo deve estar contido em um elemen ro div com
id="jcarousel -scroll" e marca um menu select para escolha do número de imagens
a ser rolada em cada clique para avançar ou recuar.
O script que faz funcionar esta versão é o seguinte:
function mycarousel_initCallback(carousel) {
jQuery( ' .jcarousel-control a') .bind('click ', function() {
carousel.scroll(jQuery.j carousel .intval (jQuery(thi s).text() )) ;
retu rn fa 1se;
}) ;
jQuery( ' . jcarousel-scrol l select' ) .bind('change', function() {
carousel .opti ons.scroll = jQuery.jcarousel. i ntval (this .options[this.
selectedlndex].value);
return fal se;
});
jQuery( ' #mycarousel -next' ) .bind('click ' , function() {
carousel .next () ;
return fa 1se;
} );
jQuery( ' #mycarousel -prev ' ) .bind('click ', function() {
carouse1 . prev() ;
retu rn fa l se;
});
};
jQuery(document) .ready(function() {
jQuery( ' #mycarousel'). jcarousel ({
scroll:l ,
initCallback:mycarousel_initCal l back,
buttonNextHTML:nul l ,
buttonPrevHTML:nul l
});
}) ;
</scri pt>

Veja, na figura D.4, o carrossel com efeito thickbox.
Figuro 13.4 - Carrossel com efeilo thickbox.
13.7 Plug-in jQuery Accordion

Este plug-in fo i desenvolvido por jorn Zaefferer e sua docun1entação encontra-se
hospedada em http: //bassi stance. de/ j query-p1ugins/jquery-pl ugi n-accordion/. Trata-se
de um plug-in para obcer o conhecido efeiro sanfona e pode ser usado para es-
conder e revelar tanto conteúdos textuais como listas de links. No caso de listas
de links, o plug-in é útil no desenvolvimento de mecanismos de navegação.
Admite várias estruturas de marcação HTML, cada uma de acordo com a natu-
reza dos conteúdos a revelar e esconder.As folhas de estilo para apresenração das
diversas versões criadas devem ser desenvolvidas de acordo com a necessidade de
cada projeto, contudo a documentação do plug-in em sua seção de demonstração
desenvolve quatro exemplos de uso do plug-in com respectivas folhas de estilo
que podem servir de base para a criação de folhas de esti lo persona lizadas.
Você irá estudar duas variantes de marcação par a uso prático do plug-in: uma
para conteúdos textuais e outra para um mecan ismo de navegação.

13.7.1 Instalação
A insta lação do plug-in consiste tão somente em fazer o down load dos a rquivos,
descompacrá-los, hospedar a pasra-raiz do plug-in e linkar os arquivos requeridos
na página onde você pretende insta lá-lo.
Vi site htt p: //bassi stance. de/ jquery-pl ugi ns/jquery-p l ugi n-accordion/ e faça o down-
load do arquivo disponível denominado jquery.accordion.zip. Descompacte o
arquivo e hospede a pasta-ra iz denominada j query-accordi on. A pasta-raiz contém
várias subpasras e arquivos destinados a criar os diferentes efeitos a que o plug-in
se propõe. Caso você saiba exara mence o que está fazendo, poderá deletar pastas
e/ou arquivos não utilizados em seu projeto, mas se tiver d úvid as, mantenha a
pasta-raiz do plug-in com todos os seus conteúdos intactos. Tendo descompactado
e hospedado o plug-in, veja melhor seus componentes.
Essa pasta contém ainda as versões normal, compacta e codificada do scripr

do plug-in. Uma dessas três versões deverá ser linkada ao documento que contém
o efeito sanfona. O critério de escolha de uma delas é o mesmo adotado para a
1inkagcm da biblioteca propriamente dita. A versão mais compacta e que demanda
menos tempo d e ca rrega mento é a do arquivo jquery.jcarousel .pack.js.
Na pasta demo, os arquivos index.html e nested. html contêm exemplos de rodas

as possibi lidades de criação do plug-in. Você irá escudar com detalhes os dois
primeiros exemplos contidos no arquivo i ndex. html.
A pasta l ib contém arquivos plug-ins complementares a serem usados em

diferentes situações, conforme se verá adiante. Nessa pasta, encontra-se um
plug-in denominado jquery . di mensions .js, q ue, a par rir da versão 1.2.6 da biblioteca,
foi incorporado a e la, não havendo mais necessidade de seu uso em separado a
partir dessa versão.
A pasta test contém scripts não relacionados diretamente ao desenvolvimento

d o efeito sanfona em sites.
Assim, roda página que contenha uma das versões de instalação do efeito
sa nfo na deverá ser linkada conforme mostrado a segui r:
1. <head>
2.
3. <Script type="text/javascript" src=" . . / jquery-1. 2. 6. js"></script>
4. <Script type="text/javascript" src="jquery-accordion/jquery. accordion. js"></scri pt>
5. <scri pt type="text/j avascri pt" src,,"jquery-accordion/xxxxxxxx. j s"></scri pt>
6. </head>

10. <a>lnstalação do plug-in</ a>

11. <div>
12 . . . . conteúdo . . .
13. </diV>
14. </diV>
Cód igo comentado:

Li n has l a 15 Um div container pa ra toda a marcação. A esse container deve
ser atribuído um id com nome de s ua livre escolha, no exemplo
adotado, idc"a_um", e uma classe com nome basic. Essa classe
será o seletor para a fol ha de estilo do efeito.
Linhas 2 a 5 Um bloco de código que se repete ranras vezes quantos forem
os títulos d os conteúdos a revelar. Nore que esse bloco se repete
duas vezes no exemplo, linhas 6 a 9 e JO a 14.
Linha 2 A marcação do títu lo a revelar deverá ser feira com o elemento
a. Nas linhas 6e10, estão os outros dois títulos.
Linhas 3 e 5 Um di v container para os conteúdos a revelar e esconder.
Linha 4 Marcação para os conteúdos. Aqui você poderá usar qualquer ele-
menco HTML requerido pela semântica do conteúdo marcado.
A folha de estilo-padrão, para esse efeito, retirada da docu mentação do plug-in

é mostrada a seguir. Note que o contain er geral é um ele mento div com a classe
basic conforme mostrado na marcação anterior:
1. .basic {width: 260px; border:lpx solid black;}
2. .basic div {padding:lOpx;}
3. .basic a {cursor:pointer; display :block ; paddi ng: Spx ; text-decoration:none;
font -weight :bold;
background: #00a0c6 url (jquery-acco rdion/demo/AccordionTabO. gi f);
border-top:lpx solid #fff ; border-bottom:lpx sol id #999;}
4. .basic a: link:hover, .basic a:hover
{background :#fff url (j query-accordion/demo/Accordi onTab2 .gif) ;}
S. .basic a.selected {background:#80cfe2
url(jquery-accordion/demo/AccordionTab2 .gif);}
Cód igo comentado:

Linha 1 Define uma largura igua l a 260px para o conraincr e uma borda d e
lpx em volra dele.
Linha 2 Define um espaçamenro de IOpx em volta dos conteúdos a revelar.
Note que se existir um elemento div na marcação dos conreúdos,
esse espaçamento será herdado. Se não se desejar a herança, crie
regra CSS apropriada para esses elemenros.

Linha(s) Descrição(cont.)
Linh a 3 Estiliza os títulos. O exemplo na documentação usa uma imagem de
fundo para compor o fu ndo dos títulos. Esta imagem está na pasta
demo do plug-in.
Linha 4 Estilização para o esrado mouse over nos títulos. A fol ha de estilo
original usa somenre o seleror .basic a: hover, omitindo o seletor
. basic a: 1ink: haver .Acrescenrou-se esteselerorpara servi ro navegador
lnrernet Explorer que não reconhece o simples a: haver em elemenros
a não marcados com o arriburo href, como é o caso da marcnção para
o exemplo. Aqu i também é usada uma imagem de fundo.
Linha 5 Estilização para o título corrente usando uma imagem de fundo.
A sanfona símples admire duas versões. A primeira com altura consran repara
o div revelado, independencemence da quantidade de conreúdo. Tal alrura é maior
que a altura do div com mais quantidade de cometido. Aoutra versão é com altura
do div de acordo com a quantidade de conteúdo. O parâmetro que diferencia as
versões é autoheight. Declarando autoheight : false a altura será variável. O valor-
padrão de autoheight é true , ou seja, nada declarando, a alrura será fixa.
No exemplo, há duas versões em uma mesma página, conforme mostra a
figura 13.5.
arquivo Edta1 E11br !;liit&t"' F~t?s Ectromontas Ai~
Sanfona slmples
Pfuilln jOooay i\CCOI (~(Ili
ESle plug1n ro deS•ntoMdo por Jõm Est~ plúg1n fC1 deS~/lYO~~JIU po1JIJIJl
Zlletrr1~1 ~ S\JO cocurrientaréo enc<>ntra-•e Z:aelferer e !U• dvtumenl1t.90 encor tta se 4
nospeúads ~m hap /ibass•stante ae noswed3da em ntt11Jlbass1stanctl de

IJ(IU~IY·l\IUO
n$11querr·nl•1g,,..~( O•dlo1J IJ(luer,.. nlUQf\Ç~QUP.Y.PIUOln- ac .ordl Cnl,
Trata.se di um pluom Oiira ob1oi o Trai~· seus Jm pl"o n p;;rn Blllet o
wnllec1cro ne1lo samoni e oode ser usado co11~ern10 .:lei '.-~ sarfon~ e ooá~ serusado
para escondei e revelar tanlo con~ut!c;:; parn estoncer e rtl'J't!lar l\lfll<> toriteudos
Ca-tua•s como 11;.la• de • l n~-s Nes:e u lmo loiàuais corro ~la"' i:re links Nesle ül11mo
CaSO ê emp••ilado no desdWOMmer I~ dtl ta$l e ~mpiê!J:ldo ro de'Senvol'1men10 âe
matanlsmo$ de rlaYeQG~áo m~1.,n srnos d• nal'l'J!l'!Çáo
es....... as de 111a1.,-, )ç;lo HTMI-
lnst(l~1~5o d• 11'k1Uil•
k111n1Jl7IS tltl 11~'11 C•lÇ<lo Hll~L
~1stal<)Ç"ao •lo r111~J111
Figuro 13.5 - Sonfono simples.
Material cori 01re1~os au·ora1s

16. <li><a cl ass="head" href="f'>CSS em ação</ a>

17. <Ul>
18. <1i><a href="http: //v.viw . maujor ... >Font i nterati vo</ a></1 i>
19. <li><a href="http: //vNiw. maujor ... >Text interativo</a></1 i>
20.
21. </uh
22. </li>
23 . </Uh
Código comentado:
Linhas 1 a 23 Um elemento para listas não ordenadas ul conrainer para roda a
marcação. A esse container deve ser atribuído um i d com nome
navigation. Esse íd será o seletor para a folha de estilo do efeito.
Linhas 2 a 8 Um bloco de código que se repete ranras vezes quantos forem
os tfrulos dos conteúdos a revelar. Note que esse bloco se repete
duas vezes no exemplo, nas linhas 9 a 15 e 16 a 22.
Lin ha 2 A marcação do 1ítulo a revelar deverá ser feita com o elemento a
ao qual se atribuem uma classe denominada head e um atributo
href="#"(link morto). Esse elemento a, por sua vez, deve estar
contido em um elemento 1i. Nas linhas 9e16 estão os outros dois
títulos. O citado elemento li , além de conter o título, é container
para um elemento u1 onde consta m rodos os 1i nks relacionados ao
título. Trara-se de uma lista aninhada à lista conra iner geral.
A folha d e esti lo-padrão para esse efeito, reri rada da documentação do plug-in, é
mostrada a seguir. Note que o container geral é um ele me nto ul com i d="navigation"
conforme mos trado na marcação anterior:
1. #navigat i on {border: l px sol i d #S263AB; margin :O ; padding: O; width:200px; }
2. #navigati on a.head {border:lpx solid #ccc; background:#S263AB
url( jquery-accordion/demo/col lapsed. gif) no-repeat 3px 4px; color:#fff;
display: block; font-weight:bold; margin :O; padding:O; text-i ndent: l4px;
text-decoration:none;}
3. #navigat ion a.head:hover {color:#ff9;}
4. #navigat ion a. se lected {bac:kground-image:url (jquery-accordion/derno/expanded.gif);}
5. #na vi gation a. current {background: #ff9;}
6. #navigation ul {margin:O; padding:O ;}
7. #navigation l i {l ist-style: none}
8. #navigation l i l i a {col or: #333; display:bl ock ; text-i ndent:lOpx;
text-decoration:none;}
9. #navigation l i l i a:hover {background:#ff9; color:#fOO;}

<script ty pe="text/javasc ri pt" src=" .. / jquery-1. 2 . 6. js"></script>

<script type=-"text/javasc ript" src,."jquery-accordion/jquery.accordion.js"></script>
<Script type="text/javascript" src="jquery-accordion/ l ib/jquery .easing. js"></script>
Para informações detalh adas sobre o p lug -in jquery .easi ng . js, consulte o en-
dereço http: //gsgd .eo. uk/sandbox/jquery/easing/.
O script para essa versão é m ostrado a segu ir:

1. <scri pt type="text/ j avas e ri pt">
2. jQuery(document).ready(function() {
3. jQuery('#navigation ' ).accordion({
4. active:false,
5. header: ' .head',
6. event: 'mouseover ' ,
7. fill Space :false,
8. animated : 'easesl i de'
9. }) ;
10. }) ;
11. </script>
Cód igo com entado:
Linha 4 Fecha o menu no início.
Linha 5 Nome da classe a tribuída ao elemento a que marca os títulos.
Linha 6 Define o evento que abre o men u. Utilizou-se o valor mouseover no
exemplo. Experimente mudar para cl ick e observe a diferença.
Lin ha 7 Parâmetro para defini r a altura do menu aberto. Usou-se false (este
é o valor-pad rão e não declará-lo sunc o mesmo efeito) no exemplo
para força r a altura de acordo com o conteúdo revelado. O va lor
true mantém a altura constame independentemente do conteúdo
revelado, fa zendo o menu estender-se mais.
Linha 8 Interfere na aceleração da velocidade de animação. Util izou-se o
valor easeslide no exemplo. Experimente mudar para bouceslide e
observe a di ferença.
É som e nte isso. Após linkar o p lug-in n a página, cria r uma folha de esti lo
para o efeito e desen volver a m a rcação HTlvlL como m ostrado, basta declarar
jQuery(' #um_nome_qua 1quer' ) .accordion() e a lg uns parâ metros, sendo um_nome_qua 1quer
o nome que você escolh eu para a ul con ra iner geral dos conteúdos a revelar co m
o uso do efeito sanfon a .
Para maiores der.a lhes e o utras versões d e im p lememação, consulre a página o ficia1
do p lug- in localizada em http://bassi stance. de/jquery-plugi ns/jquery-pl ugin-accordion/ e
a d ocumentação no site jQuery em http://docs.jquery.com/ UI/Accordion/accordion.

CAPÍTULO 14
Menu Maujor
Denomina-se menu Maujor o mecanismo de navegação do site http://1wiw.maujor.com

que usa a biblioteca jQuery para seu funcionamento. Não se trata de um mecanismo
de navegação inédico nem de uma invenção exclusiva e única. Ao contrário, é sus-
tentado por um script extremamente simples criado para incrementar a navegação
que já existia no site, sem necessidade de alterar a marcação HTML.
14.1 Introdução
O menu do site do Maujor foi criado e expandido muico antes de a biblioteca
jQuery ter se tornado uma realidade no universo do desenvolvimento de sites.
O menu passou por quatro fases. A primeira fase fo i desde sua criação, quando
começou com poucos lin ks, até o momento em que a inserção de novos links
passou a exigir uma coluna de navegação muico extensa. Nessa ocasião, iniciou-se
a segunda fase, quando se optou por um menu do ripo pop-up lacera i, em que os
links para as matérias eram revelados quando o usuário passava o mouse sobre
um tírulo geral. A terceira fase baseou-se na solução adotada no redesign de um
grande portal brasi leiro e consistiu em reduzir a altura do conrainer do menu;
com o uso de regras CSS apropriadas, forçou-se o aparecimento de uma barra
de rolagem vertical para tal container.
Passado algum tempo, houve algumas crícicas ao sistema de navegação do site.
Embora fossem esporádicas e longe de ser unanimidade, considerou-se o estudo
de uma alternativa para o menu.
A quarta fase foi a implanração de um script jQuery que atualmente faz fun-
cionar o menu. A aceitação foi total e houve muicos e-mails de lei cores pergun-
tando como funciona o menu. Foram tais solicitações que motivaram a escrita
deste capítulo.
379
Neste capículo, será dada ênfase especial, além do script jQuery, à marcação
HTML e às regras CSS para a apresenração do menu. Como base para o exemplo a
desenvolver, será adorado o menu atual do site, incluindo seus links funcionais.
14.2 HTML e CSS

Funcionalmente, trata-se de um menu hierárquico de dois níveis. O primeiro
nível contém um título e sob ele estão os links para as matérias relacionad as a
esse título.
O elemento HTML semantica mente correto para marcação de mecanismos

de navegação são as listas H TNl L em suas três versões: lista ordenada ol, lista
não ordenada ul e !isca de defin ição dl. Optou-se pelo uso de !iscas não ordena-
das para marcar o segundo nível do menu e o elemento h3 para marcar o título
o u primeiro nível. Ou era solução seria usar lista de definição com o elemento dt
para títulos e dd para o segu ndo nível. Ta l opção de marcação será um exercício
para você testar seu aprendi zado.
Observe a seguir um trecho da marcação HTML do menu :

1. <div id="menu">
2. <h3>Destaques</h3>
3. <Ul >
4. <li><a href=" ... '' t itle=" . .. ">FAQ - CSS</a></li>
5. <li><a href=" . . . " title=" . .. ">QUIZ - CSS</a></li>
6. <li><a href=" .. . " t itle=" .. .''>Editor CSS do DWMX 2004</a></li>
7. <li><a href=" ... " t i tle=" ... ">Aprenda CSS desde o i nici o</a></li>
8. <li> . .. </li>
9. </Ul>
10. <h3>Fundamentos CSS</h3>

11. <Ul >
12 . <li><a href=" .. . " t i tle=" . .. ">Introdução às CSS</a></li>
13. <li><a href=" .. . " t i tle=" ... "> Sintaxe CSS</a></li>
14 . <li><a href=" . . . " t i tle=" .. .''>Ti pos de CSS</a></l i >
15. <1i><a href=" ... " t i t 1e=" .. . ">A propriedade CSS font</a></1 i>
16. <li> . .. </li>
17. </uh
18. <h3>Títul o primei ro nível </h3>

19 . 
20. </diV> 
.iJ [arquivo-14.2a.html)

Estilização inicial
Acrescente uma folha de estilos na página do menu para melhorar sua apresentação.
Observe um primeiro conjunto de regras CSS conforme mostradas a seguir:
1. <styl e type="t ext/ css" media="all ">
2. #menu ul {
3. l ist-styl e-t ype:none;
4. margi n:O;
5. paddi ng:O;
6. }
7. #menu li a {
8. display :block;
9. background:#d4dde4 url(seta .gi f ) no-repeat 98%;
10. color:#333;
11. border- left :Spx sol i d #7d97ad ;
12. t ext-decorati on:none;
13 . paddi ng: 3px 15px 3px 3px;
14. margi n-bottom:lpx;
15. }
16. #menu l i a:hove r {
17 . background :#dce3e9 url(seta .gif) no-repeat 98%;
18. color:#999;
19. border- left : Spx sol i d #cad2dd;
20 . }
21. </Styl e>
~ [arquivo-14.2b.html)
Código comentado:
Linhas 2 a 6 Retira os marcadores das lisras não ordenadas e os espaçamentos-
padrão de margi me padding para listas. Esses espaçamentos causam
uma tabulação à esquerda dos itens de lis ta que, além de variar de
dimensão, de acordo com o navegado r, são implementados ora pela
propried ade margin, ora por paddi ng. A final idade desta regra CSS é
igualar a renderização da lista para todos os navegadores.
Linha 7 Seletor para os links no estado inicial.
Linha 8 Elementos HTML a são eternemos in-li ne e, como rais, ocupam a
exata largura e altura necessárias a acomodar seus conteúdos. Isto
faz que. em um link de texto, somente a área do texto seja cl icável.
O link em questão está inserido em um elemento li que tem uma
forma retangular e na q ual está inserido o texto do link. A decla-
ração displ ay :bl ock nesta linha torna o elemento a nível de bloco,
ocupando todo o seu container e faze ndo q ue toda a área retangular
do elemento li seja clicável.

Capítulo 14 • Menu Maujor 383

Linha 9 Define a cor de fundo azul-clara para o retângulo clicável e coloca
uma seta decorativa no lado d ireito dele.
Linha 10 Elege a cor prera para o texto do link.
Linha li Define uma borda esquerda decorativa, na cor azu l-escura, para o
retângu lo que conrém o link.
Linha 12 Retira o s ubl inhado-padrão do texto do link.
Linha 13 Define os espaçamentos vertical e horizontal do texto do link em
relação aos limites internos do retângulo que o conrém.
Linha 14 Define uma margin inferior para cada retângu lo container dos links,
abrindo um es paçodelpx no qual será vista a cor de fundo definida
para o elemento div#menu , criando a ilusão de uma linha de separa-
ção entre os links. Uma opção para essa regra CSS é declarar uma
borda inferior de lpx na cor pretendida para a linha de separação,
contudo, nesta opção, há uma junção das margens do último link
aberto com a margem superior do títu lo, resultando uma margem
de 2px nesse local. Altere o arquivo e cornpro,re você mesmo.
Linha 16 Regra CSS para o comportamento dos links quando o usuário passa
o mouse sobre eles.
Linha 17 Fundo dos links em cor azul mais clara e redefinição da seta à direita.
Se não tivesse declarado a seca como imagem de íundo, esta ser ia
coberta pela nova cor e não apareceria na situação de mouse over.
Linha 18 Cor mais clara para o texto do link.
Linha 19 Cor ma is clara para a borda esquerda.
A renderização do menu , nos navegadores Firefox 3 e Internet Explorer 6,

com as primeiras estilizações é apresentada na figura 14.2. O efeico mouse over é
mosu-ado no segundo link na cornada da imagem para o Firefox 3.
Bug no IE6 e anteriores
Este primeiro conjunto de regras de estilo causa a rend erização do m enu com
um espaçamento não desejado, no navegador Internet Explorer 6 e anteriores,
conforme mosrra a figura 14.2. Este é um comportamento decorrente de uma
das maiores causas das inconsistências de renderização no IE6 e anteriores, fe-
lizmenre já corrigida no IE7. Para maiores informações, consulte http://www.maujor.
com/tutorial/haslayout.php.
Conforme explicado na matéria publicada no link indicado no parágrafo

anterior, para corrigir o bug moscrado, basra dar layour aos elementos li e a,
acrescentando a seguinte regra CSS:
~ html li, * html li a {height:l.%;}

&'Q\JllrO ~ª'
Dtstaqnts
IFAQ -CSS •
T'j" - -.~.
•
IEditor CSS <lo D~.?004 •
.Aprenda oss cres'de o infcio
Devo aprender CSS31
Fuudmntntos CSS
-l Uvro jQuery do Maujor 1 Menu Maujor • Microsoft Internei fxplorer lf'J[Q)fEJ
IE~rCSSdoDW11DCZ004
Apcenda<:SS desde o mício
Figuro 14.2 - Menu Moujor: estilização no primeiro fase.
Dimensões do menu
O menu ocupa roda a janela do navegador e estende-se na vertical por todos os

links de navegação, fazendo aparecer a barra de rolagem vertical. Defina uma
largura para o menu, de modo que fique contido na coluna de navegação do site.
Delimite, ainda, uma alrura máxima e forneça uma barra de rolagem vertical
para o menu. Adore uma largura de 200px e uma altura de 300px. Você deverá
escolher essas dimensões de modo que se adaptem ao layout dosice. Estilize os
cabeça lhos h3 que integram o primeiro nível do menu.
Observe as regras CSS a ser acrescentadas na folha de estilo inicial:

1. body {
2. font:llpx/1.2 Arial, Helvetica, sans-serif;
3. background:#d6e2e5; color:#666;
4. paddi ng:O; margin:O;
5. }

Capítulo 14 • Menu Maujor 385
6. #menu {
7. wi dth:200px; height:300px ;
8. overRow:auto;
9. margi n:30px O;
10. background:#999;
11 . }
12. #menu h3 {
13. font -size:12px ; cursor: pointer;
14. l i ne-height :18px;
15. padding-l eft :20px;
16. margi n:lpx O;
17. background :#cad2dd url(mais .gif) 3px center no-repeat;
18. border- left:Spx solid #7d97ad;
19. }
20. #menu h3.corrente {background:~cad2dd url(menos.gif) 3px center no- repeat;}
21. * html li, * html li a {height: 1%;}
Cód igo com entado:
Linha 1 Regras CSS gerais para a página que contém o menu.
Linha 7 Define as dimensões máximas do menu.
Lin ha 8 Cria barras de rolagem vertical e horizontal caso o conteúdo do
menu ultrapasse as dimensões estabelecidas. Ainda que a dimen-
são vercical do menu que você está projetando seja menor que as
dimensões estabelecidas na regra CSS, declare overRow:auto para o
caso de expansão futura.
Linha 9 Define margens superior e inferior.
Linha 10 Cor ele fundo do menu . Esta é a cor das linhas horizontais que
separam os retângulos dos links.
Lin ha U Regras CSS para os cabeçalhos h3 do primeiro nível do menu. ore
a declaração para mudança do cursor indicativa de que o clique
causará uma ação (no caso, abre os submenus) e também a definição
de um sinal de mais (+) como uma imagem de fundo, indicando
que há algo a abrir quando se clica o cabeçalho.
linha 20 Regra CSS para colocar a imagem do sina l menos(-) no cabeçalho
aberto.
Linha 21 Hack para o IE6 e anteriores conforme relatado anteriormente.
A renderização do menu, nos navegadores Firefox 3 e 1nternet Explorer 7, com

os acréscimos na fo lha de esti lo é apresentada na figura 143.

o
,.
•
Dc"11 ~prender GSS3?
• •..
ffi f1mcl.lllle1llOSCSS
tlrdroduÇOO às css • •
Sm-UCSS • •-
11""3 d'l css • •
A f7opnedll<lê C$.S fonl
•..
A i;rllPl1eda(la C>Stéld
..•
,5..r:fqpr~e ÇSS~IJn
• •
tP/Wllle~ ~ IXlnlil$
" A prcpnedo11t CSS!bJ!l
•
A ~o.pr~ti CSSp~
·~ A pcqmcd3âo CSS mDtgll
- - •
j ~r~llfko. d9' ~rdn
A prc;ioeãa11e CSS pa6ãi'tg
•
• V
Figuro 14.3 - Menu Moujor: estilização no segundo fase.
Bug no IE7e anteriores
Com as novas regras CSS, teoricamente a estilização estaria terminada não fosse
um bug nos navegadores internet Ex:plorer 7 e anteriores. Note, na figura 14.2,
que se colocou em destaque, no prim eiro cabeçalho, uma diferença no espaça-
mento da figura de fundo do sinal de mais(+) indicativo d e SLlbnível d o menu.
Note, na linha 17 das regras de esti lo mosrradas anceriormence, qL1e se d efiniu

um total de 3px para a coordenada esquerda da imagem. O navegad or Firefox
colocou a imagem a 3px do limite direito da bo rda esquerd a e o navegador In-
ternet Explorer ignorou a borda e colocou a imagem a 3 px do limite esquerdo do
menu. Assim, para o rE, é necessário "puxar" a imagem para a direita de um valor
igual a 5px, resu ltando em uma coordenada esquerda iglrnl a 3px + 5px = 8px.
A regra CSS que corrige o bug é mostrada a seguir:
* html #menu h3, * html #menu h3.corrente { /• IE6 e anteriores */
background-posi t ion:8px center;
}
*:first-child+html #menu h3,
*:first-child+html #menu h3.corrente { /* IE7 ~1
background-position:8px center;
}


Linha 6 Ao clicar um elementoh3 do menu;altera-se a visibilidade do elemento
que se segue.Veja, na marcação HTML, que se trata de um elemento
ul que é o container do segu ndo nível para esse cabeçalho.
Linha 7 Esconde, com o uso do método slideUp(), os links do segundo nível
que estejam abenos. Isto só cem efeico a panir do segundo clique
num el.ememo h3 quando já exisre um subnível aberro.
Linha 8 Insere a classe corrente no cabeçalho clicado, fazendo que a imagem
de fundo altere d() si nal mais (+) para o sina l menos (-).
Linha 9 Reriraaclassecorrente do submenu que se fecha, alterando a imagem
de fundo de um sinal menos (-) P'ªra o sinal mais (+).
Na figura 14.4, mostramos o efeito final com o primeiro conjunto de links

aberto.
Menu do site do Maujor
El oe~1 .1que~
FAQ ·CSS
QUli - C$S
Ãfl"ends CSS desde o inicio ..

Oe<to ep'. ender CSS'3? ...
ffi f11nd.1111~11lú~ CSS
til C'>~EJl! •IÇ:lo
@ l:relHr~ CSS 9~rn~
mã~~;;;;r;;~- - - - - - ,
a:J Erottn~ trn 1illJ!ll.ll;
lilP.W•~
figuro 14.4 - Menu Moujor: efeito fina l.

APÊNDICE A
- Seletores
A sintaxe dos selecores previscos nas Recomendações do W3C para as CSS 1,

CSS 2.1 e também aqueles constantes dos estudos para a futura Recomendação
das CSS 3 foi usada na criação dos selerores para a biblioteca jQuer)~ Assim, um
perfeico entendimento de seletores CSS é indispensável para o bom desenvolvi-
menco de scriprs jQuery.
Este apêndice contém uma descrição geral dos seletores CSS e sua respectiva
sintaxe jQuery. Apresenta, ainda, uma rabeia na qual são relacionados os seletores
CSS 3 e seus alvos na árvore do documento, empregados na biblioteca .
A.1 Seletor tipo

O seletor é a letra ou string que representa um elemento, na marcação HTML,
conforme mostrado a seguir.
• Sintaxe CSS:
p { ... } I* o alvo são todos os parágrafos no documento *I
h3 { .. . } /* o alvo são todos os cabeçalhos nível três no documento ~1
code { . . . } /* o alvo são todos os elementos code no documento ~1
• Sintaxe jQuery:
$(' p 1) li o alvo são todos os parágrafos no documento
$('h3' ) li o alvo são todos os cabeçalhos nível três no documento
$(' code') li o alvo são todos os elementos code no documento
389
A.2 Seletor identificador único

O selecoré o valor do atributo id definido para um elemento, na marcação HTML,
conforme mostrado a seguir.
• Sintaxe CSS:
#tudo {.. . } I* o alvo é el err.ento com atributo id="tudo" *I
#principal { . . . } I* o alvo é elemento COll1 atributo id="princi pal" *I
• Sintaxe jQuery:
$(' lltudo ' ) li o alvo é elen:ento com at ri buto id="tudo"
$('#principal' ) li o alvo é elemento COll1 atributo id="principal "
A.3 Seletor classe

O seleto r é o valor do atributo class definido para um ou mais elementos, na
marcação HT ML, conforme m ostrado a seguir.
• Sintaxe CSS:
.estrutura{ ... } I* o alvo são todos os elementos com atributo class="estrutura" *I
.cor_um { ... } I* o alvo são todos os elementos com atributo class="cor_um" *I
• Sintaxe jQuery:
$('.estrutura') li o alvo são todos os elementos com atributo class="estrutura"
$(' .cor_um') li o alvo são todos os el ementos com atributo class="cor_um"
A.3.1 Classificação dos seletores

Os selerores classificam-se em d ois gra ndes grupos: seletores simples e seletores
compostos.
A.3.1.1 Seletor simples

Seletor simples é aquele consticuído de um só elemento, podendo ou não estar
associado a uma classe, um id ou u ma pseudoclasse. Veja a seguir exemplos de
seletores simples.
• Sintaxe CSS:
p, p.um, p#principal
• Sintaxe jQuery:
S('p'), S('p. um'), S('p#principal ' )

• Sintaxe jQucry:
$('p[title] ')
$(' abbr[class="diferente"] ')
$('div[id! ="navegacao") ' )
$( 'hl[classA=''est'') ' )
$('div[classS="oico"] ' )
$('div[class*•'' ren'') ' )
A.3.1.2 Seletor composto

Seletor composto é aquele constituído pela combinação de dois ou mais selecorcs
simples. A combinação enrre selecores simples para criar um seletor composto
segu e uma sincaxe própria e é feira com o emprego de crês sinais d e com binação,
como descrito na rabeia A.l.
Tabelo A. l - Si nais de combinação
Sinal de combinação Exemplo ilustrativo Nota

1
Espaço em branco dív p em Obrigatório usar um ou mais espaços entre seletores
Sinal de maior">' div > p ou div>p Espaçamento racultativo entre seletores
Sinal de adição •+• p +a ou p+a Espaçamento facultativo entre seletores '
1
Sinal til·- · h1 - p Espaçamento facultativo entre seletores 1
Árvore do documento
Para um sól ido entendimento dos seletores compostos, é necessário conhecer a

árvore do documento e sua terminologia. Considere a m arcação a seguir:
<body>
<div i d="topo">
<hl>Empresa</hl>
<ul i d="nav">
<l i><a href="#">Link 1</a></l i>
<l i><a href="ll">Li nk 2</a></l i>
<l i><a href="ll">Link 3</a></li>
</uh
</div>
<div i d=''principal">
<h2>Titulo</h2>
<p> . .. parâgrafo <em>itálico</em> . . . </p>
<h2>Ti tul o</h2>

A.4 Seletores avançados

Os seletores previstos nos estudos para a implementação das Recomendações
do W3C para CSS 3 e que são usados na biblioteca jQueq1 são mosrrados na
rabeia A.3.
Tabelo A.3 - Seletores CSS 3
Seletor Alvo
E[attA="val"] Casa com qualquer elemento Ecujo valor do atributo att começa com va 1
E[attf="val "] Casa com qualquer elemento Ecujo valor do atributo att termina com va 1
- -
E[att*="va 1"] Casa com qualquer elemento Ecujo valor do atributo att contenha a substring va 1
E F:nth- child(n) Casa com o elemento Fque seja o n-th (enésimo) filho do elemento E
E F:first-child Casa com os elementos Fque sejam primeiro filho do elemento E
E F: last-child Casa com os elementos Fque sejam último filho do elemento E
E F: onl y-chi l d Casa com os elementos Fque sejamúnico filho do elemento E

- Casa com qualquer elemento E(por exemplo: um controle de formulário) que
-
E:enabled
esteja habilitado
Casa com qualquer elemento E(por exemplo: um controle de formulário) que
E:disabled
esteja desabilitado
Casa com qualquer elemento E(por exemplo: um controle de formulário) que
E:checked
esteja marcado
- -
E:not(s) Casa com qualquer elemento Eque não case com o seletor simples s

APÊNDICE B
Codificação de
caracteres para HTML
Neste apêndice mostramos a codificação de caracteres e símbolos para HTML As

tabelas são constituídas de três colunas cada uma. Na primeira coluna é mostrado
o caractere ou símbolo a ser apresentado, na segunda coluna a entidade nominal
e na terceira colu na a entidade numérica que o representa.
Caracteres especiais para HTML

• &qual; " y &Yulm; Ÿ &lrm; ‎
. ” &#8221 ;
,
& & & &circ; ˆ &rim; ‏
"
&bdquo; „
< &11; < - &tilde; ˜ - – – t &dagger; †
> &gl; > &ensp; - — — i
&Dagger; ‡
- - - ,_ -
CE &OElig; Œ &emsp; ' &Isque; ‘ %o &permil; ‰
ce &oelig; œ &lhinsp; . ’ ’ e &Jsaquo; ‹
s &Scaron; Š &zwnj; ‌ . &sbquo; ‚ ) &rsaquo; ›
~ &scaron; š &zwj; ‍

. “ “ € € €
397
'vl aterral corn 1111<> os autorais
Caracteres matemáticos, gregos e símbolos para HTML

f &fnof; ƒ IJ &ela; η Tii
™ ™ n ∩ ∩
A Α Α e θ θ ~ &alefsym; ℵ V ∪ ∪
B Β Β 1 ι ι .,___ ← ← I &in~ ∫
- r &Gamma:
ô. &Oella;
Γ
Δ
K
},
κ
λ
κ
λ
-.....
T ↑
→
↑
→
.
-.L &perp;
⋅
⊥
&#8901 ;
E &Epsílon: Ε li μ μ l ↓ ↓ r &lceil; ⌈
z &Zela; Ζ V ν ν .... ↔ ↔ 1 &rceil; ⌉
H Η Η ~ ξ ξ .J &crarr; ↵ .. &there4; ∴
0 Θ Θ o ο ο ~ &lAIT; ⇐ - &sim; ∼
1 &lota; &#921 ; TI π π 1t &uArr; ⇑ - &cong; ≅
K Κ Κ p ρ ρ ~ ⇒ ⇒ .. ≈ ≈
A Λ Λ ç &sigmaf; ς Jj &dArr; &418659; f. ≠ &118800;
M Μ Μ o σ σ = ⇔ ⇔ - &equiv; ≡
N Ν Ν T τ τ ':f ∀ ∀ s ≤ ≤
- Ξ Ξ u υ υ a ∂ ∂ ~ ≥ ≥
o . Ο Ο <P φ φ 3 ∃ ∃ e ⊂ ⊂

- - - --
n Π Π X χ χ 0 ∅ ∅ :::> ⊃ &118835;
p Ρ Ρ \jJ ψ ψ V ∇ &#8711 ; r:z. &nsub; ⊄
r Σ &#931 ; w ω ω E ∈ ∈ ç;; &sube; ⊆
T Τ Τ 9 &thetasym; ϑ E ∉ ∉ ;/ &supe; ⊇

y Υ
<I> &Phí;
-
Υ
Φ
-
'(
aJ
&upsíh;
ϖ
-
ϒ
ϖ n
3 &ni;
∏
∋
-
∏
EB &oplus;
-
® &otimes; ⊗
&118853;
X Χ Χ • • • L ∑ ∑ L &lfloor; ⌊
4' Ψ Ψ ... … … - − − J &rfloor; ⌋
íl &Omega: Ω ' ′ ′ • &lowast; ∗ ( &lang; 〈
.. o
α α . ,″
_
″ -.J &radie; √ ) &rang; 〉
- - -
f--
- o
~ β β &oline; ‾ r oc &prop; ∝ &loz; ◊
V γ γ / &frasl; ⁄ "° ∞ ∞

• &spades; ♠
õ δ δ p &weierp; ℘ L &ang; ∠ • &clubs; ♣
<
ε
&zela;
ε
-
ζ
~
~
&image;
&real;
-
ℑ
ℜ
- /\
V
&and;
-&or;
∧
-
∨
-•• &hearts; ♥
&diams; ♦
-

Apêndice B• Codificação de caracteres para HTML 399
Caracteres para HTML - IS0-8859-1

. ¸ ¸ El Ð Ð é à è
i ¡ &#161 ; ' &sup1 ; ¹ N Ñ Ñ é é é
¢ o º ô Ò Ò ê ê

~ ¢ º ê
r
Q
£
¤
£
-
¤
-X
)) »
¼ - -
»
¼
ó
ô
Ó
Ô
&#211 ;
-
Ô -
ê &eulm;
1 ì
ë
ì
~ ¥ ¥ ~ ½ ½ ô Õ Õ 1 í í

1
1 ¦ ¦ o/. ¾ ¾ õ &Oulm; Ö l î î
§ &sec~ § (, &iquesl; ¿ X × × i &iulm; ï

- ¨ ¨ A À À 0 Ø Ø õ &elh; ð
© © © A Á Á ú Ù Ù ií ñ &#241 ;

a ª ª Â Â Â ú Ú Ú ô ò &#242:
« « &#171 ; Ã Ã Ã ú Û Û 6 ó ó

.. ¬ ¬ Ã Ä Ä ü &Uulm; Ü ô ô ô
A Å Å y Ý Ý õ õ õ
® ® ® A: Æ Æ p Þ Þ õ &oulm; ö

-
..
¯
• °
¯
-
°
ç
E
Ç
--
Ç
È È
..
B &sztig;
f-
á à
ß
à
+
0
&devida;
ø
÷
-ø -
± ± ± É É É á á á iJ ù ù
2
² ² t Ê Ê â &acirc: â ú ú ú
• ³ ³ t &Eulm; Ë â ã ã o û û
i
´
µ µ
´
&#181 ;
-
i
&lgrave;
&lacute;
-
Ì
Í
-
ã &aulm;
ã å
ä
å
ü &uulm;
y ý
ü
-
ý
-
n ¶ ¶ 1 &lcirc; Î a! &aer1ig; æ ~ &thom; þ
• · · T &lulm: Ï ç ç ç y &yulm; ÿ

APÊNDICE (
Elementos HTML
Esta tabela foi extraída do site do W3C e relaciona os elemen tos HTM L. f o rnece
ainda informações sobre as tags de abercura e fec ham enco, elementos vazios,
elementos em desuso e DTD a que se aplicam, além de uma breve descrição do
elemento.
Nas colunas da rabeia é adorada um a notação, ou legenda , para indicar restri-

ções quando ao uso ou emprego do documento, como mostrado a seguir:
Notação Significado
o Uso opcional
,_
p
-- -
Uso proibido
D Elemento em desuso
V Elemento vazio
L DTD Loose
F DTD Frameset
Tag de Tagde
Elemento Vazlo Desuso DTD Descrição
abertura fechamento
A âncora
ABBR abreviaturas (p.ex: WWW, HTTP etc.)

ACRONYM
ADDRESS infonnações sobre o autor
APPLET D L Java applet

p área de um mapa de imagem no lado do
AREA V
cliente
B estilo negrito
401
'vlaterral corn 1111<> os autorais
Tagde Tagde
Elemento Vazio Desuso DTD Descrição
,...._
BASE
abertura
- ,__ -fechamento
p
.....-
V
-
URI base para o documento
BASEFONT p V D L tamanho base para fonte
BDO 118N BiDi over-ride
BIG aumenta tamanho de fonte
BLOCKQUOTE bloco de citação

f- - ,_
BODY o o seção corpo do documento
BR p V quebra de linha
BUTION botão
CAPTION titulo de tabela
CEITTER D L omesmoqueDIV al ign=center
CITE citação
CODE fragmento de código de computador

COL p V coluna de tabela
COLGROUP o grupo de colunas de tabela
DO o ítem de lísta de definição
OEL texto apagado
DFN instância de definição
DIR D L lista de diretórios

DIV container genérico, nivel de bloco
DL lista de definição
DT o termo de lista de definíção
EM ênfase
FIELDSET grupo de controles de formulário
FOITT D L altera estilo da fonte
FORM formulário interativo
FRAME p V F janela secundária
FRAMESET F subdivisão de janelas
Hl tltulo
H2 titulo
H3 título
H4 título
HS heading

APÊNDICE D
Atributos HTML
Esta tabela fo i e,xn-aída do site do W 3C e relaciona os atributos HTNIL. Relaciona

os elementos HTML aos quais se aplica cada um d os arributos e fornece infor-
m ações sobre o ripo do acributo, a obrigatoried ad e d e uso, atributos em desuso
e DTD a qu e se aplicam, além de um breve comentár io sobre o atributo.
Nas colunas d a tabela é adorada um a notação, ou legenda , para indicar restri-

ções quando ao uso o u emprego do documento, como mostrado a segu ir:
Notação Significado
Uso obrigatório no
o elemento a que se aplica
D Atributo em desuso
L DTD Loose
F DTD Framest
Elementos a que
Atributo Tipo Uso Desuso DTD Comentário
se aplica
abreviatura para texto da
abbr TD, TH %Text:
célula cabeçalho
accept-charset FORM %Charsets: lista de caracteres suportados
lista de ti.pos MIME para
accept FORM, INPUT %ContentTypes;
upload de arquivos
A,AREA,
BUTTON, INPUT, caractere para acesso por
accesskey %Character;
LABEL, LEGEND, teci ado
TEXTAREA
local de processamento de
actlon FORM %URI; o forrnulãrio no servidor
alinhamento para titulo de
1align CAPTION %CAllgn; D L
tabela
405
'vl aterral corn 1111<> os autorais
Elementos a que
se aplica
APPLET, IFRAME,
alinhamento vertical ou
align IMG, INPUT, %1Align; O L
horizontal
OBJECT
alinhamento de legenda de
align LEGENO %LA1ign; O L
fieldset
alinhamento de tabela na
align TABLE %TAJign; O L
janela
(left 1center 1
align HR O L
right)
OIV, H1, H2, H3, (left 1center 1right
align O L alinhamento de texto
H4, HS, H6, P 1justify)
COL, COLGROUP,
1 . TBOOY, TO, (left 1center 1right
ahgn
TFOOT, TH, 1justify 1char)
THEAO, TR
alink BOOY %Color; O L cor do link selecionado
APPLET %Text; breve descrição
-altai! - ·-
AREA, IMG
-
%Text
--
o
O L
breve descrição
--
all INPUT COATA breve descrição
lista de arquivos separados
archive APPLET COATA O L
por virgula
lista de URls separados por
archlve OBJECT COATA
espaÇ-O
lista de cabeçalhos
axis TO, TH COATA relacionados separados por
virgula
textura que se repete no
background BOOY %URI; O L
fundo do documento
bgcolor TABLE %Color; O L cor de fundo para tabela
- -- -
bgcolor TR %Color; O L cor de fundo para linhas
bgcolor TO,TH %Color; O L cor de fundo para célula

cor de fundo para o
bgcolor BOOY %Color; O L
documento
espessura da borda em
border TABLE %Pixeis;
redor de tabela
border IMG, OBJECT %Pixeis; O L espessura da borda em link
cellpaddlng TABLE %Length; espaçamento entre células
cellspacing TABLE %Length; espaçamento entre células

COL, COLGROUP,
TBOOY, TO, caractere de alínhamento,
char %Character;
TFOOT, TH, p.ex: char=':'
THEAO, TR
COL, COLGROUP,
I
charoff
TBOOY, TO,
TFOOT, TH,
%Length;
offset para caractere de
alinhamento
THEAO, TR

Apêndice D• Atributos HTML 407
Elementos a que
se aplica
codificação de caratere do
charset A, LINK, SCRIPT %Charset;
destino de link
marcar por padrão botões
checked INPUT (checked)
radio e check boxes
URI para o documento de
cite BLOCKOUOTE, O %URI;
destino ou mensagem
informações sobre as
cite DEL, INS %URI;
razões de mudança
todos os elementos.
exceto BASE,
BASEFONT, HEAD, lista de dasses separadas
class CDATA
HTML, META, por espaço
PARAM, SCRIPT,
STYLE, TITLE
identifica uma
classid OBJECT %URI;
-
clear
'-
BR
(left 1 all I right 1
D L
----
implementação
controla o nuxo do texto
-
none)
classe do arquivo para o
code APPLET COATA D L
elemento applet
URI base para classid, data,
codebase OBJECT %URI;
arquivo
URI base opcional para
1 codebase APPLET %URI; D L
applet .
'- - - ~
rcodetype OBJECT %Conten1Type;

tipo de conteúdo para o
código
color BASEFONT, FONT %Color; D L cor do texto
lista de quantidade de
cols FRAMESET %Multilengths; F colunas. padrão: 100% (1
coluna)
cols TEXTAREA NÚMERO o
- -
número de colunas
colspan TD.TH NÚMERO transformadas em uma
célula
DIR. DL, MENU,
compact (compacto) D L redução de espaçamento
OL,UL
content META CDATA o informação associada
lista de coordenadas
coords AREA %Coords;
separadas por virgula
para uso em mapa de
coords A %Coords;
imagens no lado do cliente
data OBJECT %URI; dados do obj elo
date time DEL, INS %Datetíme; data-hora da modificação
declare OBJECT (declare) dedara ftag para objeto
UA pausam a inicialização
deter SCRIPT (deter)
do script

Elementos a que
se aplica
todos os elementos,
exceto APPLET,
BASE, BASEFONT,
dir BDO. BR, FRAME, (ltr 1 rtl) direção do texto
FRAMESET,
IFRAME, PARAM,
SCRIPT
dir BDO (ltr 1 rtl) o direção
BUTION, INPUT,
1 OPTGROUP,
disabled (disabled) desabilitado
OPTION. SELECT,
TEXTAREA
enctype FORM %ContentType;
lista de nomes de fontes
face BASEFONT, FONT CDATA D L
separados por vírgula.
for LABEL IDREF casa com ID de controle
frame TABLE %TFrame; parte do trame a renderizar

existência de bordas em
frameborder FRAME, IFRAME (1 1 O) F frames
lista de id's para células
headers TD,TH IDREFS
cabeçalho
height IFRAME %Length; L altura
height TD, TH %Length; D L altura
height IMG, OBJECT %Length; altura
-
height APPLET %Length; o D L altura inicial
URI para documento
href A, AREA, LINK %URI;
relacionado
URI que atua como URI
href BASE %URI;
base
hreflang A, LINK %LanguageCode; código de idioma
APPLET, IMG,
hspace %Pixeis; D L espaçamento horizontal
OBJECT
http-equiv META NAME nome de cabeçalho HTTP
todos os elementos,
exceto BASE,
id HEAD, HTML, ID identificador único
META. SCRIPT,
smE, TITLE
mapa de imagem no lado
l ismap IMG, INPUT (ismap)
do servidor
l1abel OPTION %Text;

para uso em menus
hierárquicos
para uso em menus
label OPTGROUP %Text; o hierárquicos

Elementos a que
se aplica
todos os elementos,
exceto APPLET,
BASE, BASEFONT,
lang BR, FRAME, %LanguageCode; código de idioma
FRAMESET,
IFRAME, PARAM,
SCRIPT
language SCRIPT COATA o L linguagem do script
-link
longdesc
·-
BODY
IMG
-- %Color;
%URI;
D L cor de links
link para descrição longa
longdesc FRAME, IFRAME %URI; F link para descrição longa
marginheight FRAME, IFRAME %Pixeis; F altura da margem (em pixel)

largura de margem (em
marginwidth FRAME, IFRAME %Pixeis; F pixel)
número mâximo de
maxlength INPUT NÚMERO caracteres em campos de
texto
especifica a mídia a que se
media STYLE %MediaDesc;
aplica
especifica a midia a que se
media LINK %MediaDesc;
aplica
método HTTP de envio de
-
1method FORM (GET I POST)
formulãrio
multiple SELECT (multiple) padrão é seleção simples
BUTTON,
name COATA
TEXTAREA
permite identificação entre
name APPLET COATA D L
applets
name SELECT COATA nome de campo
- - -- - -
name FORM COATA nome de formulário
name FRAME, IFRAME COATA F nome do frame de destino
name IMG COATA nome de imagem

- -
name A COATA nome de link destino
enviado comos dados do
l name INPUT, OBJECT COATA
formulãrio
name MAP COATA o para referenciar a um mapa
name PARAM COATA o nome de propriedade
name META NAME nome de metainíormação

nohref AREA (nohre~ região sem fu nção
permissão para
1noresize FRAME (noresize) F redimensionamento de
trames

Elementos a que
se aplica
todos os elementos,
exceto APPLET,
BASE, BASEFONT,
BDO. BR,
FONT, FRAME,
onkeyup %Script; uma tecla é solta
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
todos os trames foram
onload FRAMESET %Script; F
carregados
onload BODY %Script: o documento foi carregado
todos os elementos,
exceto APPLET,
BASE, BASEFONT,
BDO, BR,
FONT, FRAME, botão do dispositivo
onmousedovm %Script;
FRAMESET, HEAD, apontador é acionado
HTML, IFRAME.
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
todos os elementos,
exceto APPLET,
BASE, BASEFONT,
BDO, BR,
FONT, FRAME, apontador movido sobre o
onmousemove %Script;
FRAMESET, HEAD, elemento
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
todos os elementos,
exceto APPLET,
BASE, BASEFONT,
BDO. BR,
FONT, FRAME, apontador movido para fora
onmouseout %Script;
FRAMESET, HEAD, do elemento
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT.
STYLE, TITLE
todos os elementos,
exceto APPLET,
BASE, BASEFONT,
BDO, BR,
FONT, FRAME, apontador movido para o
onmouseover %Script;
FRAMESET, HEAD, elemento
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE

Elementos a que
se aplica
todos os elementos,
exceto APPLET,
BASE, BASEFONT,
BDO. BR,
FONT, FRAME,
onmouseup %Script; apontador solto
FRAMESET, HEAD,
HTML, IFRAME,
ISINDEX, META,
PARAM, SCRIPT,
STYLE, TITLE
onreset FORM %Script, formulário foi limpo
onselect INPUT, TEXTAREA %Script; um texto foi selecionado
onsubmit FORM %Script; formulário foi enviado
todos os frames foram
onunload FRAMESET %Script; F
removidos
-
onunload
,_
BODY %Script;
-- --
o documento foi removido
profile HEAD %URI; informação de perfil
prompt ISINDEX %Text: D L mensagem
readonly TEXTAREA (readonly)
- - somente leitura, para texto
readonly INPUT (readonly)
e senha
rei A, LINK %LinkTypes; links relacionais
rev A, LINK %LinkTypes; links reversos
lista de quantidades,
rows FRAMESET %Multilengths; F
padrão: 100% (1 linha)
rows TEXTAREA NÚMERO o
~
- - número de linhas
-
rowspan TD, TH NÚMERO transformadas em uma
célula
rules TABLE %TRules; fios entre linhas e colunas
scheme META CDATA seleção de conteúdos

- -
escopo para as células de
scope TO, TH %Scope;
cabeçalho
- - >- -
existência de barra de
scrolling FRAME, IFRAME (yes 1 no 1auto) F rolagem
selected OPTION (selected)
controle de interpretação
shape AREA %Shape;
por coordenadas
para uso emmapa de
shape A %Shape;
imagem do lado do cliente
size HR %Pixeis; D L
(+1-)nº. p.ex:. size="+ 1·.
size FONT CDATA D L size=·4·

Elementos a que
se aplica
especifico para cada tipo
siz.e INPUT CDATA
de campo
fonte base para o elemento
size BASEFONT CDATA o D L
FONT
size SELECT NÚMERO número de linhas visiveis
atributo COL afetado por N
span COL NÚMERO
colunas
número padrão de colunas
span COLGROUP NÚMERO
no grupo
-src - SCRIPT %URI;
-
URI para script externo
src INPUT %URI; para campos com imagens
endereço do conteúdo do
src FRAME, IFRAME %URI; F
Iram e
src IMG %URI; o URI da imagem a incorporar
mensagem a mostrar
standby OBJECT %Text;
enquanto carrega
- 1- -
start OL NÚMERO D L número inicial da sequência
todos os elementos,
exceto BASE,
BASEFONT, HEAD, informação sobre
sty1e %StyleSheet;
HTML, META, estilização
PARAM, SCRIPT,
STYLE, TITLE
propósitolestrutura para
summary TABLE %Text;
saída de sintetizador
A,AREA,
BUTTON, INPUT, posição na ordem de
tabindex NÚMERO
OBJECT, SELECT, tabulação
~TAREA
- --
rtarget A, AREA, BASE,
FORM, LINK
%FrameTarget; L
trame onde será
renderizado
cor dos textos no
1text BODY %Colar; D L
documento
todos os elementos,
1 exceto BASE,
BASEFONT, HEAD,
tille %Text; titulo para o elemento
HTML, META,
PARAM, SCRIPT,
TITLE
tipo de conteúdo do
type A, LINK %ContentType;
elemento
tipo de conteúdo para
type OBJECT %ContentType;
dados
tipo de conteúdo para valor,
type PARAM %Conten1Type;
quando valuetype =ref
tipo de conteúdo da
type SCRIPT %ContentType; o linguagem do script
tipo de conteúdo da
type STYLE %ContentType; o linguagem de estilos

Elementos a que
se aplica
type INPUT %1nputType: TEXT tipo do controle input
-
type
- ,_
LI
-- %l1Style; D L estilo do item de lista
-
type OL %0 LStyle: D L estilo númerico
type UL %ULStyle: D L estilo marcador

(button 1submit 1 para uso em botões de
type BUTION submit
reset) formulário
IMG, INPUT, usado em mapa de imagem
usemap
-
valign
-
OBJECT
COL, COLGROUP,
TBODY, TO,
%URI;
(top 1middle 1
no lado do cliente
-
alinhamento vertical em
-
TFOOT, TH, bottom 1basei ne) células
THEAD, TR
para botão radio e
value INPUT CDATA
checkboxes
value OPTION CDATA valor padrão para escolha
value PARAM CDATA valor da propriedade
vafue BUTTON COATA enviado ao servidor
value LI NÚMERO D L limpa seqüência

(DATA I REF 1
valuetype PARAM DATA tipo de valor
OBJECT)
%HTML.
version HTML CDATA D L constante
Version;
vlink BODY %Color; D L cor de link visitado
APPLET, IMG,
vspace %Pixeis; D L espaçamento vertical
OBJECT
width HR %Length; D L
width IFRAME %Length; L largura de frame
width IMG, OBJECT %Leng1h; largura do elemento

width TABLE %Length; largura do elemento
width TD, TH %Length; D L largura do elemento
width APPLET %Length; o D L largura inicial do elemento

width COL %MultiLength; largura do elemento
width COLGROUP %MultiLength; largura do elemento

width PRE NÚMERO D L largura do elemento

APÊNDICE E
FAQjQuery
Este apêndice é uma extensão da FAQ contida no site oficial da biblioteca jQuery.
Alguns scripts que demonstram as respostas estão disponíveis no site do livro,
no arquivo-apA.1.html.
Como selecionar um elemento usando seu atributo ; d?

l embre-se de qu e o atributo id é um identificado r único para um elemento, ou
seja, somente um elemento, no documenco, poderá conter o atributo id com um
determinado valor. t claro que são ad mitidos vários ids, cada um com seu valor,
em instâ ncias diferences, no mesmo documento. Assi m, a seleção usando o atri-
buto id retornará um e somente um elemento.
Para selecionar um elemento ao qual se tenha atribuído o identificador id com

valor idNome , use a sintaxe mostrada a seguir:
S('llidNome ' )
Como selecionar um elemento usando seu atributo class?

O atributo class, ao contrário do atributo id, pode ser usado quantas vezes forem
necessárias em um mesmo elemento ou em elementos diferentes dentro de um
documento.
Para selecionar os elementos aos quais se tenha atribuído o identificador class

com valor c1asseNome, use a sintaxe mostrada a seguir:
$( ' .classeNome')
415
Um objeto selecionado via jQuery pode ser atribuído a uma variável JavaScript?
Sim, você pode atribuir a uma variável JavaScripr um objeto jQuery e manipulá-lo
normalmente com sintaxe jQuer)~ como mostrado no exemplo a seguir:
var meuDív = S( ' #divNome');
var meuValor = S('#divNome').val () ; li Armazena o valor do elemento
meuDiv.val('Olá mundo'); li Define o valor do elemento
Como verificar se existe um determinado elemento no documento?
Use a propriedade length para proceder à verificação como mosrrado a segu ir:
S('p ' ).length(); li Retorna o número de parágrafos encontrados no documento
Lembre-se de que o uso de jQuery dispensa verificar a existência de um de-

terminado objero antes de aplicar-lhe um método. Observe o exemplo a seguir:
if (S('p ' ).length()) li Verifica a existência de parágrafos
S('p ' ).hide(); li Esconde os parágrafos caso existam
O reste condicional par a verificar a existên cia de parágrafos é dispensável
Basca declarar-se S('p').hide() e, caso não existam parágrafos no d ocumento, a
instrução será ignorad a sem gerar um erro.
Como verificar o estado de visibilidade de um determinado elemento no documento?
Para verificar o estado de visibilidade de um elemento, use os seletores :vísible

e :hidden.
Observe o exemplo a seguir:

var estadoVisivel = S('#i dNome').is(':visible');
var estadolnvisivel = S('#idNome').is(':hidden');
Para aplicar um método em um elemenro baseado na sua visibilidade, use a

sintaxe mostrad a a seguir:
$( '#i dNome :vi si ble') . css( 'color', ' red');
$(' #i dNome:hidden'). show(). animate({l eft: '+=200px '}, 'slow');
Como selecionar elementos cujo valor do id contenha caracteres especiais?
Alguns frameworks geram valores para o atributo id contendo c<iracreres espe-

ciais, tais como colchetes( [.. ]) e pomo(.). Por exemplo: <div i d="id.Nome"> ou <div
i d=" id[Nomel">

Apêndice E• FAQ jQuery 417
Em tais casos, você precisa usar uma sintaxe especial como a mostrada a
seguir:
$(' #i d .Nome') li Não funciona
$('#id\\ .Nome') li Funciona!
$(' #i d[Nome] ') 11 Não funciona
$('#id\\[Nome\\)') li Funciona!
Como façopara habilitar e de.sabilitar um elemento?
Um elemento está desabi li tado quando contém o atributo di sabled com o valor
di sabled. Assim , para desabilitar um elemento, basta remover esse atributo e, para
habilitá-lo, você deve configurar o atributo. O script é mostrado a seguir:
S('#xpto').attr('disabled', 'disabled') ; li Desabilita o el emento cujo id tem o val or xpto
S('#xpto ' ).removeAttr('disabled'); li Habi lita o elemento cu jo id tem o valor xpto
Desenvolva uma página, para demonstrar o funcionamento do script mos-

trado, com a seguinte marcação HTML Não se esqueça de linkar a página à
biblioteca.
<select id="xpto" style="width:200px">
<option>Opção um<loption>
<Option>Opção dois<loption>
<lselect>
cinput type="button" value=''Desabilitar" onclick=''S('#xpto' ).attr('disabled' ,
' disabled')" I>
cinput type="button" va lue="Habi l i tar" oncl i ck="$(' #xpto ' ). removeAttr(' di sab l ed ' )" I>
Como façopara marcar e desmarcar um elemento input?
Um elemenco está marcado quando concém o atributo checked com o valor checked.
Assim, para marcar um elemento, basta remover esse atributo e, para desmarcá-lo,
você deve configurar o atributo. O script é mostrado a seguir:
${' #ypto' ) .attr('checked ' , 'checked'); li Marca o elemento cujo id tem o valor ypto
S('#ypto ' ) .attr( ' checked' , ' ') ; li Desmarca o elemento cujo id tem o valor ypto
D esenvolva uma página, para demonsrrar o funcionamenco do script mos-
trado, com a seguinte marcação HTML. Não se esqueça de linkar a página à
bibl ioreca.
<1abeh<i nput type="checkbox" i d="ypto" />Marcal Desmarca<ll abeh
<input type="but ton" value="Marcar" onclick="S('#ypto ' ).attr('checked', 'checked')" I>
ci nput type="button" value="Desmarcar" oncl ick="S{'#ypto ' ).attr('checked ', ' ' )" I>

Na s intaxe S('ypto').attr ( 'checked', '') , não use espaço em branco no

valor do atributo ao declará-lo vazio. Essa sintaxe equivale a S( 'ypto').
removeAttr( ' checked') .
Como obter ovalor textual da opção selecionada em um elemento se1ect?
Elemencos option de um select possuem dois valores distintos: o valor do atributo

value e o va lor textual do elemento. Desenvolva uma página, para demonstrar o
funcionamento d o script mostrado, com a seguinte marcação HTM L. Não se
esqu eça de linkar a página à biblioteca.
<select id.,"meuSelect" style="width :200px">
<Option value="fruta_um">Abacate</option>
<Opt ion value="fruta_dois">Abacaxi</option>
<Option value="fruta_tres">Banana </option>
<option value="fruta_quatro">Fi go</option>
<option value="fruta_cinco">Goiaba</option>
<option value="fruta_seis">Laranja</option>
</select>
<input type="button" va1ue="Valor" oncl i ck="a1ert ($(' #meuSelect ') . va1())" />
<input type,."button" val ue="Texto" oncl ick="alert(S('#meuSelect option:sel ected').
text())" / >
Como substituir otexto do terceiro elemento de um conjunto de seis elementos?
Tanto o seleror : eq() como o método eq() permitem fazer a seleção. Desenvolva
uma página , para demonstrar o funcioname nto do scripr, com a seguinte mar-
cação HTNlL Não se esqueça de linkar a página à biblio teca.
1111>- HTML:
<O1 i d="mi nhali sta">
<li>texto do primei ro item</li>
<li>texto do segundo i tem</li>
<li>texto do terceiro item</ li >
<li>texto do quarto item</li>
<li>texto do quinto item</li>
<li>texto do sexto i tem</li>
</oh
1111>- jQuery:
li Não funciona
$('#minhalista').find(' li').eq(2) .text() .replace('texto do tercei ro item', 'TEXll) ALTERAIX)');

11 Funciona
var SelementoTres = S('#minhalista').find('li').eq(2);
var textoElementoTres = SelementoTres.text().replace( ' texto do terceiro item ' ,
'TEXTO ALTERADO ' );
SelementoTres.text(textoElementoTres).css('color', 'red');
O primeiro script mostrado não funciona porque o objeco recoroado na cadeia

é o texto substitttto para o terceiro elemento. Isto porque replace() é um mérodo
javaScript de manipulação de strings e não um método jQuery. Observe, no
segundo script, que se armazenou o texto substituto em uma variável denomi-
nada textoEl ementoTres e com o uso do método text(' texto a inseri r' ) se efetuou
a substituição do texto.
Por que a animaçãode um elemento faz que se comporte como elemento nível de bloco?
Ao se aplicar um efeito de animação que altere as propriedades CSS height e/ ou

wi dth, tais como os efeitos show, hide, slideUp ou slideDown, o objeto an imado,
durante o curso da animação, tem sua propriedade CSS display configurada para
bl ock, porque height e width são propriedades aplicáveis a elementos nível de blo-
co. Ao término da animação, a propriedade display é configurada para seu valor
origi nal.
Desenvolva uma página, para visualizar esse comportamento, animando um

elemenco in-line como mostrado na marcação HTML a segui r.
<style type,."textlcss" media="all ">

em {background:#ff6;}
<lstyle>
<script type="textljavascript'' src=" .. / jquery-1.2.6. js"><lsc ript>
<scri pt type="text/j avas eri pt">
S('em').click(function() {
S(this).hide(3000);
}) ;
});
<lscript>
<lhead>
<body>
<ern>Lorem ipsum dolor<lem>
<lbody>
<lhtmh

Qual é a diferença entre append() e appendTo()?

Estes dois mérodos destinam-se a inserir conteúdos dentro de um elemento
H TivlL. A inserção será imed iatamente antes da tag de fechamento do elemento
e o conteúdo a ser inserido pode ser uma string, um trecho de marcação HTtv1L
ou um objeto jQuery retirado do próprio documento.
A única diferença entre os dois métodos é a sintaxe, como mostrado a seguir:
S( 'p') .append('<b>texto negrito</b>');
S( ' <b>texto negri to</b> ' ).appendlo( 'p' );
Qual é a diferença entre prepend() e prependlo() ?

Estes dois métodos destinam-se a inserir conteúdos dentro de um elemento
HTML. A inserção será imediatamente após a tag de abertura do elemento e o
conteúdo a ser inserido pode ser uma string, um trecho de marcação HTML ou
um objeto jQuery reti rado do próprio documento.
S( ' p' ).prepend( ' <b>texto negrito</b>') ;
S(' <b>texto neg ri to</b> ' ) .prependTo('p');
Qual é a diferença entre after() e i nsertAfter O?

Estes dois métodos desti nam-se a inserir conteúdos imediatamente após um ele-
mento HTML O conteúdo a inserir pode ser uma string, um trecho de marcação
HTML o u um objeto jQuery retirado do próprio docu mento.
S('p ' ).after('<b>texto negrito</b>' );
S('<b>texto neg ri to</b> ' ) .inse rtAfter('p');
Qual é a diferença entre before () e; nsertBefore() ?

Estes dois métodos destinam-se a inserir conteúdos imediacamenre antes de um
elemento HTML. O conteúdo a inserir pode ser uma string, um trecho de mar-
cação HTM L ou um objeco jQuery retirado do p róprio docurnenco.
S('p ' ).before('<b>texto negrito</b>');
S('<b>texto negrito</b> ' ) .insertBefore(' p' );

Qual ocomportamento dos métodos de inserção quando oconteúdo a inserir é um objeto

jQuery retirado do documento?
Os métodos de inserção append(), appendTo() , prepend(), prependTo(), after() , i nsertAf-

ter(), before() e i nsertBefore() podem receber como parâmetros de inserção objeros
jQuery retirados do próprio documenro. Neste caso, a inserção se processa de
duas maneiras diferentes, dependendo da quantidade de alvos da inserção. Veja
um exemplo prá tico para esclarecer esses comporramenros.
Observe os códigos a seguir.
IJll. HTML:
<body>
<b>Texto negrito</b>
<p>Primeiro parágrafo: </P>
<P>Segundo parágrafo: </ P>
</body>
IJll. jQuery:
S('p').after(S( 'b'));
});
</script>
O script jQuery proposro insere dentro e no final dos dois parágrafos do

documento a marcação e conteúdo do elemento b. Assim, o resultado final é o
mostrado a seguir:
IJll. HTML:
<body>
<b>Texto negrito</b>
<p>Pri mei ro parágrafo: <b>Texto negrito</b></p>
<P>Segundo parágrafo: <b>Texto negrito</b></p>
</body>
Note que os dois parágrafos receberam uma cópia do elemenro b.

Qual a diferença entre os métodos de inserção e ométodo html ( va 7) ?
Tal como os m étodos d e inserção, o método html(va7) destina-se a inserir con-

teúdos, admire os mesmos parâmetros e comporta-se semelhanremenre a esses
métodos. A diferença é que o método html(val) se destina a inserir conteúdos
em elementos vazios. Caso você use esse m étodo para inserir conteúdos em um
elemento n ão vazio, tais conteúdos serão retirados e a inserção será feita normal-
mente, como se o elemento estivesse vazio.
Observe a seguir a sintaxe de emprego deste método:

S('div.classeNome'). html('<p>Parâgrafo i nserido</p>') ;
Insere um parágrafo nos d ivs cujo atributo c1asse tenha o valor c1asseNome.
Qual é diferença entre os métodos empty() e remove()?
O método empty() retira os conteúdos e mantém o elemento no DOM e o método

remove() reàra o elemento do DOM. É importante ressaltar que o método remove()
preserva o objeto jQuery pronto para uso posterior.
Observe o exemplo mostrado a seguir:

S('p#idNome').remove().appendTo('body');
Retira do DOM o elemento parágrafo cujo atributo id é idNome e insere-o, assim

como seus conteúdos, no ele mento body. Caso tivesse usado o método empty() , a
inserção teria sido de um parágrafo vazio.
Como construir uma chave de mudança de estilo?
Esta é uma funciona lidade em desenvolvimento desitesenconn·ada com bastante

frequência. Ao usuário se fornece a opção de navegar no site escolhendo um tema
de sua preferência entre alguns dispon ibi lizados pelo desenvolvedo r do si te. Não
só mudanças no visual do site, mas também opção de temas para navegar com
apresentação em alto contraste, modo de impressão ou fontes aumentadas.
Observe os códigos a seguir:















lndice remissivo 427
A para dcscacar, 290

personalizados, llll
Agrupamento de sclet0res, .52 zebra, 280
Alerta, II Efeico zebra em robelas.Ver Zebra
Ampliação de imagem, ili Elemento
Animação adjacente, 5I
com fode ln() e fodeOutO, ill legend, 318
com showO e hideO. lli Elemento-filho, 5I
com slideUp() e slideDown(), Ul Elcmcnro-irmão, 5I
com roggle(), 212 adjaceme, 5l
personalizada com animatc(), '34 Elemento-pai, 5l
Animaçõe:. bá~icas, lli Elemenro-raiz, 211
Apresentação de rnbehls, lli Encadeamento, i2
Arquivos par:i download, 12 Estilização geral, 123
Árvore do documcnro, 123. 32.2 evenr.pageX/ Y, lZQ
evem.prevem Dcfuult(), lZQ
evem.stopPropagation (), lZ1
B evcm.targcr, lZQ
Box Modcl, 18.2 event.type, 169.
Evc ntos, l.5.1
a uxiliarcs, l.5.1
e de imcração. !M
eXcensible Markup Languagc.ver XM L
Carrosséis horizonrnl e verrical, 360
Carrossel
com comandos externos, l i
com efeito thickbox, 368
F
com scroll automático, .3b2 FAQ CSS1 2J2
Cascad111g Style Shccts.ver CSS Filtros
Conflitos com outras bibliotecas, ~ básicos, M
Consumor jQuer)\ :10 para formulários, 2Z
Co1wençõcs tipográficas, lZ para selecores-filho, 85
Coordenadas, l2Z Flags para agentes de usuário, IB.ú
Folha de estilo, lli
Formu hirios, lQZ
D Funções
milirárias, ~
Desabilitar c:impos, 312
urilirárias pcrsonalizadas, 128
Destacar
Funções-pad nio, ~
colunas, 2.22.
lin has, 291
lin has sclcrivamemc, 222 G
Dcsrnques cm geral, 2Q
DOCTYPE, 2..1i Galeria com rhumbm1ils, 342
Galerias de imagens, 340
E
Efeitos
básicos, lZ.3. lmagcn.s. m
corrediços, lZZ Atributo ah, ili
de opacidade, lZ2 Acributo longdesc. 32Z
lightbox, lli decorativas, 32.!i
inspeção do DOM, llii each(callback). :12

Instalar jQucr)\ 10 each(objeto função (chave ou índice valor)),
lmeratividade, 21.. 12.Q
ernpryO. Ul
end O. l.:1.6
J eqO, iO
jQuery.box~lodel, llIB crrorO, fil
jQuery. browser, IB..6. fadeln (), IZ2
jQuery/UI, lli fadc0ur 0. IZ2
fadeTo(), IB.Q
filrer(filuo), llii
M filter{função), ill
findO, lll
Manipulação focus(), ] j i
de conteúdos, lll ger(), .il
de conteúdos hunl, lQB. get(ínclice), 52
de textos, J.Q2 grep(), 122
de Vll lores, lll hasClass(), illQ
M::m ipuladorcs de eventos, 1ll6 hcighr(), ill
Marcaçiio, 18. heigbt(valor), ill
de rnhclas, ili hidc(), .t:M
Menu Maujor, JZ2 hover(), .L.65
~lenu sanfona, 375 hcmlO, liIB
~léwdos html(valor), lQ2
S(callback). 48 inA rrayO, 1.25.
S{hrml), Q index0, 52
add0, U2 innerHeightO, ili
addClassO. 10..i inner\VidthO, ili
afterO, llú insertAfter(), J.lú
and elfO. l:II insenBeforeO, llZ
animatcO, 131 isO. m
anima1e(dcfi111çõcs ['·clocidadel !acelera- isFunctionO, 12.6.
ção! [função J), lfil kcydown(), ili
append(), ll3 keypress(), l.S..6.
appendTo(), ili. keyupO, li.6
aur( {atributo:valor} ), lill length, iQ
aur(a rributo, v:ilor), 10.1 loadO, l.S..6.
atrr(nome_a tributo), lill makcArray{), 123
before(), Ul map(array função(valor índicc)), 123
bindO, 166 map(função), li2
blur(), l.51 mouscdown(), liú
chnnge(), 1.52 mousemove(), .l1ill
ehi ld ren (), .l:l.O. mouseout(), l51l
dickO. ill mouseoverO, l2R
clone(), 122 mouscupO, ill
clonc(truc), 1l2 11C.'-:l(), 145
css{ {propriedade: 'valor', ncx tAliO, .1:1.l
propried:idc: 'valor', ... }), ili noConflicr(), 51
css('propriedade', 'valor'), 12:1 noc(), ll8
css(propriedadc), ill offserO, 115
dblclickO, ili oncO, l6Z
outerHeighr(), ili
Índice remissivo 429
outerWidth(), ili N
parenc((expressão]), H2
parems([expressão]), ili Noras sobre cvcnros, 162
positionO, 126
prepend O, l.l.fi
prependTo(), l.l.fi o
prcvO, W Opacidade, 333
prevA ll(), M.5. Operação com string, l2Z
ready(), .1B Operações com arrays e objetos, l2Q.
remove(), .12.0.
removeAccr(), l.M
removeClassO, lilli p
replaceAllO, l2l
replaceWich(), l2l Padrões Web, 28
res ize (), J..fiQ Pági na de norlcias, 2.fi5.
scro ll (), l.fil Placeholder para campos, 3.01
scrollLefc(), 122 Plug-ins
scrollLeft(valor), 129 de terceiros, ili
scrollTop(), 122 jCaro use1, .15.6.
selec1(), 162 jQue ry Accordion, .lZQ
show(), ill na tivos, li6
sib lings (), 118 Posicionamento, 12.S.
sliceO, 1.18 Progressão aritmética, Zfüi
slide Down(), l1l Pseudoselecores
si ide.IOggle(), .IZ8 :animatecl, ZJ
slideUp(), 177 :bucton, 25.
stop(), 18.1 :chcckbox, 2l
:cl1ecked, 28
submicO, 162.
text(), J..Q2. :contai ns(texco), I1
text(valor), .llQ :disabled, 91.
coggle(), ili :empty, Zi
toggle(fl f2 [fJ.. fN!), 164 :enab led, 91.
cogglcClass(), lQZ :eq (índice), 62
rrigger(), 1fili :even, 6Z
trim (), l2Z :file, 25.
unbi nd(), 162 :firsc, úi
uniq ue(), J.2.6 :first-child, as
:gt(índice), ZQ
un loadQ, lfil
vai(), ll1 :has(seletor2), li
val(valor_atribuco_value), lll :hidden, 76, 96
widthO, llil :imagc, 21
width (valor), ili :inpur, 88
wrap(elemento), ua :last, 6.'.i
wrap(htm l), 117 :Las t-child, 86
wrapAJl(clemento), 112 :lt(índice), Zl
wrapAll(hrm 1), 118 :not(seletor2), füí
wraplnner(clemcnro), l2Q :nth-child(índice/ even/ odd/ equação), 8Z
wraplnner(hrml), 12Q :odd, úB
Mover e copiar, ili :only-ch Ud, 8.6
:parent, li
:password, 2Q
:radio, 21
:reset, 2.:3
:selecred, 2.2 Site do livro, 21

:submir, 22 Slide-show, ill
:rexr, 82 Suavizando a ani mação, 22.8
:visible, za
T
R Tabela de horários de ô nibus, llfj
Resig, John, lii Terminologia, 18.
Revelar rhickbox, 368
campos, 31.6.
conteúdos, 232
e esconder linhas, 300 u
Utilirárias d isponíveis, lB.5
s
Sanfona simples, 372 V
Selerores Validação d e formulários, .1QZ
$(:hcader), ll. Validar, 322
$(ancestral descenden te), 60 Variação de opacidade, 333
$(anterior + próximo), 62
$(anterio r - irmãos), ú3
$(classe), 58
$ (elemento), 58
w
$(elemencos), :l:Z. windO\v.onload, 16
$ (ex-pressão, [contexto]), 16
$(id), 57
$ (pai > fil ho), 61 z
$ (seletorl, seleror2, seletor), ...), 52. Zebra
atributo, 391 dois-do is, 283
avançados, 396 par-ímpar, 2.fil
dasse,390 três-três, 288
compostt1, 60, 392 três cores, 786
css. ~
de arriburo, 75}_
descendente, 321
de visibilidade, ?.D.
identificador único, 320
jQuer>~ 55
para formulár ios, Ili
Seletor-filho, 194
Seletor-irmão adjaceme, 395
seletor[atribu to !="valor"], 81
selet0r[atributo $= " va l or~ ), !12.
seletor[atributo·= "valor"], 8J
sclcror[atributo ="valor"], 80
selctor(atriburoJ, 15)_
sclcror(arribuco "="valor"!. 82
simples, g J2J}
ápo, l8.2
universal, 391
DO MESMO AUTOR
construindo sites com

CSS (>t)HTML
e
1 !l1lS (~ 19'1«iV"S OI UllO 111(,cl(JllA
t
1
s•
i
i
---
---
Construindo Sites com CSS e (X)HTML Criando Sites com HTML

ISBN: 978-85-7522-139-6 ISBN: 978-85-7522-166-2
Formato: 17 x 24 cm Formato: 17 x 24 cm
Páginas: 448 Páginas: 432
Ano:2007 Ano: 2008
Preço: R$ 75,00 Preço: R$ 75,00
www.novatec.com.br

Jquery A Biblioteca Do Programador Javascript PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Jquery A Biblioteca Do Programador Javascript PDF

Título original:

Enviado por

Direitos autorais:

Formatos disponíveis

Aprenda a criar efeitos de alto impacto

em seu site com a biblioteca

Parte 1. Fundamentos teóricos da biblioteca jQuery ............................. 23

Capítulo 2 • Funções-padrão e seletores jQuery ........................................................ 45

Ca ítulo 3 • Métodos de mani ula ~o do DOM ....................................................... 101

Ca ítulo 4 • CSS e ins e -odo DOM ....................................................................... 123

Ca ítulo 5 • Eventos............................................................................................... 151

Ca ítulo 6 • Efeitos................................................................................................ 173

Capítulo 7 • Funções utilitárias.............................................................................. 185

Ca ítulo 8 •Anima ões básicas .............................................................................. 213

Ca ítulo 9 • Revelando conteúdos ......................................................................... 239

Primeira etapa ........................................................... .. ........................ 243

Ca itulo 1O• Efeitos em tabelas............................................................................ 275

Ca ítulo 11 • Efeitos em formulários...................................................................... 307

Capítulo 12 • Imagens ...........................................................................................325

Capitulo 13 • Plug-ins ........................................................................................... 355

Ca ítulo 14• Menu Mau'or....................................................................................... 379

Apêndice A• Seletores .......................................................................................... 389

Apêndice B• Codificação de caracterespara HTML ................................................. 397

A êndice C• ElementosHTML ............................................................................... 401

apêndice D• Atributos HTML ................................................................................. 405

a êndiceE•FAQ .Que ........................................................................................ 415

Referências biblio ráficas...................................................................................... 425

Índice remissivo .................................................................................................... 427

Sou grato aos profissiona is da Novatec Editora, diretamente envolvidos na

Meu maior agradecimento é a você, leicor, por interessar-se em aprender jQuery

Maurício Sa my Silva é g raduado em Engenharia Civil pelo lnsàturo Militar d e

Sua experiência com d esenvolvimen ro d e sites inicio u-se em 1999, com o

No segundo semestre d e 2003, estimulad o pela completa fa lta d e material

No início de 2006, com a popularização e a adesão maciça aos blogs, criou o

Tanto o sire como o blog constituem-se em referência nacional para Web

Maujor, como é conhecido o autor, é ainda um ativo frequencador de fóruns,

'vlatenal com d1re1to& autorais

O livro está dividido em duas partes como descrito a seguir.

Primeira parte - Fundamentos teóricos da biblioteca jQuery

No esmdo dos métodos, adorou-se um modelo que consiste na apresentação

Segunda parte - jQuery na prática

A segunda parte do livro compreende os capítulos de 8 a 14 e tem por objetivo de-

O capítu lo 9 mostra a criação de efeitos para esconder e revelar conteúdos,

O capítulo 10 dedica-se aos efeitos em tabelas de apresentação de dados,

O capítulo li aborda os formulários HTML, mostrando os efeitos fundamen-

No capítu lo 12, examinam-se os efeicos em imagens, abordando não somente

O capítulo 13 dedica-se à criação de efeitos em mecani smos de navegação.

No capítulo 14 examinamos o caso real de um menu tipo sanfona. Trata-se do

Para quem foi escrito este livro

O objetivo do livro é fornecer informações deta lhadas do funci onamento

Para tirar o máximo proveito dos ensinamentos contidos em cada capítulo

'vlatenal com d1re1to& autorais

Os conceicos e o entendimento das cécnicas de desenvolvimento com jQuery

Os iniciantes, de posse das noções básicas da linguagem JavaScript, irão se

Texto contendo uma dica sobre o assunto tratado:

O valor do atributo src indica o caminho (diretório) no qual se encontra gravado

Texto comendo um lembrete sobre procedimento extra com relação ao assunto

'vlatenal com d1re1to& autorais

~e Nos códigos desenvolvidos neste livro, adotou-se a sintaxe: $() .

Blocos de marcação são marcados com fonte monoespaçada:

Trechos de marcação que merecem destaque são marcados em negrito:

'vl atenal com d1re1to& autorais

A função jQuery.noConOict() per mite, entre outras funciona lidades, criar um

'vlatenal com d1re1to& autorais

Esce é um arquivo qu e mosrra um script contido no primeiro icem do segundo

<scri pt type="text/ j avas e ri pt" src=" . ./jquery-1. 2. 6. j s"></ sc ri pt>