a A Biblioteca do Programador JavaScript Aprendava criar efeitos de alto impacto em seu site com a biblioteca JavaScript mais utilizada pelos desenvolvedores web Mauricio Samy Silva novatecSumario Isencao de responsabilidade. SObre.0 AUTON sessassnssssssstnannesunsunssnssnsassessasssstsassssusntsnnnnsstssssnssasassnsan 1D Introd Uc ...+..sesseu Parte | » Fundamentos tedricos da biblioteca jQuery .. Capitulo 1 = 0 que é jQuery? 11 Definigdes e conceitos Capitulo 2 = Funcdes-padrao e seletores jQuery ...rsrer 2.1 Funges-padrao jQuery 2.2 Seletores jQuer 2.21 Seletores simples 2.2.2 Seletores compostos 223.5 - 2.24 Seletores de contetido 23 225 s de visi 5 2 ores de atributo 2.27 Filtros para seletores-filho .... 2.2.8 Seletores para formulirios. 2.29 Filtros para formulirios Capitulo 3 = Métodos de manipulacao do DOM... 3.1 Manipulagao de atributos gerai: 32 Manipulacio do atributo class 33 Manipulacio de contetidos html.8 Query = A Biblioteca do Programador JavaScript 109 i 1B 34 Manipulagao de textos ... 35 Manipulagio de valoi 36 Manipulagao de cont dos Capitulo 4 = CSS e inspecao do DOM 4.1 Estilizagao geral DP ‘ament 25 43 Largura e altura 44 Inspecao do DOM 123 Capitulo 5 = Eventos. Ew - 5.2 Eventos de interagao 53 Manipuladores de eventos .. 4 Notas sobre evento: Capitulo 6 = Efeitos. 61 Efeitos basico: 6.2 Efeitos corredigos.. 63 Efeitos de opacidade... 64 Efeitos personalizados Gapitulo 7 = Funcées utilitarias....... agentes de usuario. com arrays ¢ objetos .. 7a Teste de funcio . 75 Operacio com string 76 Fungdes utilitarias personalizadas 76.1 Sintaxe geral 76.2 Fungao $.corTexto. Parte Il = jQuery na pratica Gapitulo 8 » Animacées basicas.. 811 Marcagio minima... 8.2 Animagio com show() e hideQ 83 Animagao com toggleQ) « 84 Suavizando a animagio 85 Animagio com slideUpO) ¢ slideDown() 86 Animagao com fadeIn() ¢ fadeOut(). 87 Animagao personalizada com aninate() Capitulo 9 = Revelando contetidos ... Q1LFAQ CSS. MarcaSumario Primeira etapa... Segunda etapa .. Primeira etapa ... Segunda etay Gapitulo 10 Efeitos em tabelas ... 101 Destinagao das tabelas HTML. Zebra dois-doi Progressdo aritmeti Zebra trés cores 386 Zebra trés-trés. 105 Efeitos para destaca Destacar linhas . Capitulo 11 « Efeitos em formularios. IL Validagao de formulirios 112 Placeholder para campos. 113 Dicas de preenchimento 114 Desabilitar campo: 115 Revelar campos. 11.6 Elemento legend . . IL7 Selecionar t0d0S ...ssssssssssnssnsisasinnsnsinsnsnnsssnsnssnnn 320 118 Validar... Capitulo 12= Imagens. 121 Introdugao. DL Imagens acessiveis 12.2 Ampliacio de imagens. 123 Galerias de imagens.. 123.1 Galeria com thumbnails. 124 Slide-show10 Query = A Biblioteca do Programador JavaScript Gpitulo 13 » Plug-ins 131 Introdugao. BBL Plug-ins de terceiros.. B12 Plu 132 Plug-in jCarousel.. 1321 Instalacio.. 132.2 Nome das imagens... 133 Carrosséis horizontal e vertical 136 Carrossel com efeito thickbox 137 Plug-in jQuery Accordion 1371 Instalacio.. is de estilo. 138 Sanfona simples. 139 Menu sanfona Capitulo 14= Menu Maujor. 14.1 Introdugio. H2HTMLe C 143 Script. Apéndice A» Seletores A. Seletor tipo. A2 Scletor identificad or Mic ene SO A3 Seletor classe 390, A Classificagio dos seletores 390 Aa Seletores avangados . Apéndice B= Codificacao de caracteres para HTML... Caractetes especiais para HTML .. Caracteres matematicos, gregos ¢ simbolos para HTML .. Caracteres para HTML — ISO-8859-1.. Apéndice C= Elementos HTML apéndice D= Atributos HTML apendice E # FAQ jQUELY «.esssssssvneesseees 425 Referéncias bibliograficas... ceAgradecimentos Agradego a Deus por ter me dado forgas, disposigdo e motivagao para escrever este livro. Sou grato aos profissionais da Novatec Editora, diretamente envolvidos na publicagao do livro,em particularao editor Rubens Prates, que, ao longo de todo © processo de criagao, esteve presente guiando-me com suas dicas ¢ informagoes sobre as particularidades ¢ implicagdes editoriais proprias a fase de criagao de um livro. Meu maior agradecimento € a voce, leitor, porinteressar-se em aprender jQuery ¢ honrar-me coma leitura deste livro. WIsengdo de responsabilidade Todos os esforgos foram feitos na elabora ao deste livro para assegurar 0 for- necimento de informagdes as mais precisas, completas ¢ exatas. Contudo, as informages aqui contidas so fornecidas “como esto” ¢ sem nenhuma garantia, seja expressa, seja implicita. O autor, a editora, os distribuidores e qualquer en- comercializagao nao assum tidade envolvida direta ou indiretamente na si nenhuma responsabilidade por qualquer prejuizo ou dano, direto ou indireto, consequente as informagé« s contidas neste livro, 12Sobre o autor Mauricio Samy Silva é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME). Fundador ¢ ex-diretor-presidente da Planep Engenharia, exerceu o magistério paralelamente 4 Engenharia, tendo sido, ao longo de 25 anos, professor de Geometria Descritiva ¢ Matematica. Seu primeiro contato com programacio para computadores deu-se ainda quando aluno, ao aprender a linguagem Fortran. Aquela época, era comum passarem-se noites trabalhando em uma maquina perfuradora de cartes que seriam processados em um entao poderoso IBM/360. Em 1982, adquiriu seu primeiro computador pessoal, um TK-80 com processador Z-80A de 3,25MHz, teclado de membrana com 40 teclas memoria RAM de IKB expansivel até 16KB. Trabalhou com os modelos TK-82, TK-85, TK-2000, DGT-100 e assim por diante, até os dias atuais. Sua experiéncia com desenvolvimento de sites iniciou-se em 1999, com o FrontPage, considerada uma ferramenta sensacional na construgao de sites. Em 2002, por acaso teve seu primeiro contato com o site do W3C ¢, como ficou vi- vamente impressionado com a proposta desse consdrcio, comecou a pesquisar e a estudar as Web Standards, tendo como fonte de consulta o material publicado na internet em lingua inglesa, Ao contrario do que ocorre nos dias atuais, quan- do varios desenvolvedores escrevem em blogs pessoais sobre Web Standards, a literatura a respeito do assunto em portugues era, entao, praticamente nula, mas, mesmo assim, quando encontrada, limitava-se ao bisico do bisico, No segundo semestre de 2003, estimulado pela completa falta de material de consulta gratuita na internet ¢ impulsionado por sua veia de educador de- senvolvida durante anos em sala de aula, decidiu langar o site CSS para Web Design, o qual é nacionalmente conhecido como o site Maujor, hospedado em hetp://m.naujor.con/.A proposta inicial do site era a de divulgar a cascading style sheet (CSS), ou folha de estilo em cascata, com base no compartilhamento de suas experiéncias com tal técnica. Com a pronta aceitagao e o sucesso crescente do site, © objetivo inicial tornou-se mais ambicioso ¢ passou a ser a divulgagao das Web Standards. 1314 Query = A Biblioteca do Programador JavaScript No inicio de 2006, com a popularizagao ¢ a adesio maciga aos blogs, criou 0 Blog do Maujor hospedado em http://nw.aaujor.con/bleg/, com propdsito seme- Ihante ao do site, mas com uma dinamica mais ativa ¢ a efetiva participagao de seus leitores. Tanto o site como o blog constituem-se em referéncia nacional para Web Standards e, sem diivida, foram e continuam sendo um dos grandes responsdveis pela divulgagao e popularizagio das Web Standards, assim como, em particular, das CSS no Brasil Maujor, como € conhecido 0 autor, ¢ ainda um ativo frequentador de féruns, escreve para varios portais brasileiros voltados a desenvolvedores web, € autor de artigos em inglés e de trabalhos relacionados as ternacionais sobre Web Standards. Ocupa o segundo lugar na lista de tradutores mundiais de documentos do W3C por quantidade de documentos versados. Publicou em seu site mais de 40 tradugoes de artigos sobre Web Standards escritos por consagrados autores internacionais. Traduziu para 0 portugues as ferramentas para testes de acessibilidade em sites, denominadas Analisador de contraste de cores ¢ Barra de ferramentas para acessibilidade na web, ambas em parceria com 0 WAT-C, um consércio australiano voltado ao desenvolvimento de ferramentas destinadas a testes de acessibilidade, publicados em sites in-Introducao Este livro tem por objetivo fornecer aos profissionais envolvidos com 0 desen- volvimento para a web os conceitos fundamentais ¢ técnicas de programagao necessarias ao emprego da biblioteca jQuery na criagdo de efeitos especiais ¢ obtengao de comportamentos de variadas naturezas em sites web, tornando-os mais interativos e visualmente mais agradaveis ¢ amigaveis. Aborda 0 uso da pecificamente criada linguagem de programagio JavaScript segundo a sintaxe para fazer funcionar ¢ tornar usavel a biblioteca jQuery, O livro esta dividido em duas partes como descrito a seguir. Primeira parte — Fundamentos tedricos da biblioteca jQuery A primeira parte compreende os capitulos de | a7 ¢ tem por objetivo apresentar a biblioteca, examinar sua sintaxe geral e estudar o emprego ¢ finalidade dos métodos, propriedades e diferentes funcionalidades disponiveis na biblioteca JQuery. No estudo dos métodos, adotou-se um modelo que consiste na apresentagao da sintaxe do método seguida de uma explicagao da sua finalidade, em um pe- queno trecho de cédigo de emprego real demonstrando o uso geral do método ¢, finalmente, na disponibilizagao de um arquivo HTML para download ou consulta on-line, hospedado no site do livro, contendo a demonstragao pratica do método estudado. Segunda parte — jQuery na pratica A segunda parte do livro compreende os capitulos de 8 a H e tem por objetivo de- monstrar efeitos jQuery de variadas naturezas e de emprego real em um site. Cada capitulo desta parte esta estruturado para estudar efeitos em elementos especificos do HTML. O capitulo 8 introduz a parte pratica do livro e dedica-se ao estudo dos efeitos de animagao basicos com énfase nas técnicas de revelar ¢ esconder contetidos marcados com diferentes elementos HTML. 1516 Query = A Biblioteca do Programador JavaScript capitulo 9 mostra a criagao de efeitos para esconder ¢ revelar contetidos, demonstrando as técnicas aplicadas a uma pagina contendo um FAQ CSS ¢ a outra, contendo noticias. © capitulo 10 dedica-se aos efeitos em tabelas de apresentagao de dados, estudando técnicas para destacar trechos delas que recebem o foco do usurio, bem como maneiras de apresentar tabelas extensas, com mecanismos de reve- lagio de trechos destas. O capitulo Il aborda os formulérios HTML, mostrando os efeitos fundamen- tais normalmente implementados no desenvolvimento deles, tais como criagao de mascaras e dicas de preenchimento de campos. No capitulo 12, examinam-se os efeitos em imagens, abordando nao somente a manipulagao de imagens individualmente, mas também a criacao de galerias de imagens. O capitulo 13 dedica-se a criagdo de efeitos em mecanismos de navegagio. No capitulo 14 examinamos 0 caso real de um menu tipo sanfona. Trata-se do menu do site www.maujor.com. Ensinamos nao $6 o script jQuery que faz funcionar ‘© menu, mas também as técnicas CSS da sua construgio. Para quem foi escrito este livro Este livro foi escrito para aquelas pessoas envolvidas na criagio de sites tanto na rea de design quanto na de desenvolvimento e programagao, sem conhecimento das técnicas jQuery ou com conhecimentos superficiais, objetivo do livro € fornecer informagoes detalhadas do funcionamento basico da biblioteca, estudando seus métodos ¢ funcionalidades. Explicagées te- Gricas em linguagem corrente e clara, dispensando, sempre que possivel, 0 jargio técnico avangado, sio acompanhadas de exemplos priticos explicados passo a passo € complementados por arquivo HTML para consulta. Nao se abordaram técnicas avangadas de emprego da biblioteca, construgao de plug-ins, interagao com AJAX nem outra linguagem ou biblioteca. Para tirar o maximo proveito dos ensinamentos contidos em cada capitulo € pré-requisito conhecer os fundamentos e a sintaxe da linguagem JavaScript, nao sendo necessirio um conhecimento profundo dela, bem como razoavel conhecimento de folhas de estilo, em particular seletores CSS.Introdugao 7 Qs conceitos ¢ 0 entendimento das técnicas de desenvolvimento com jQuery so uma poderosa ferramenta de apoio na criaco de sites mais interativos ¢ agra daveis, enriquecendo a experiéncia do ususrio. Profissionais da area de design, familiarizados com as técnicas aqui descritas, contario com uma valiosa fonte de inspiragao no planejamento das funcionalidades para incrementar suas criagdes. Os iniciantes, de posse das nogdes basicas da linguagem JavaScript, irdo se beneficiar deste livro por iniciar seus estudos em uma fonte que aborda as mais modernas técnicas de escrita do cédigo, ensejando uma mudanga no rumo de seu estudo que ird reduzir a curva de aprendizado e acelerar tal processo. Nao se intimidem com conceitos ou terminologias que Ihes sejam completamente desconhecidos nos primeiros capitulos. Com a sequéncia de leitura, as diividas tenderdo a desaparecer naturalmente. Convencies tipograficas Com a finalidade de destacar diferentes tipos de informagao neste livro, adota- ram-se algumas convengées tipogrdficas mostradas a seguir. Dica ‘Texto contendo uma dica sobre 0 assunto tratad 0 valor do atributo src indica o caminho (dretério) no qual se encontra gravado 0 arquivo da biblioteca. Alerta Texto contendo um lembrete sobre procedimento extra com relagio ao assunto tratado: J), jQuery, ao contrario de JavaScript, no requer loops para construir arrays quando 9 \_ busca elementos no DOM. O construtor $() armazena tudo que encontra, 4 —) automaticamente, em um objeto array.18 Query = A Biblioteca do Programador JavaScript Terminologia Texto estabelecendo a adogio de grafia-padrao em todo o livro para termos ou frases com mais de uma terminologia, tradugao ou significado: = Q Nos cédigos desenvolvidos neste livro, adotou-se a sintaxe: $().. = Chamada Uma chamada para uma seg3o anterior na qual 0 assunto em questio foi expli- cado com detalhes. Por exemplo: Esta fungo destina-se a servir de container para scripts jQuery que devam ser executados somente apés o carregamento do DOM. E uma fungao que substitui ‘© método ready() estudado em [C1 $116.2]. Neste exemplo a chamada é para a segio 11.62 do capitulo 1. Marcacao e scripts Nas marcagées e scripts que exemplificam a teoria, transcreveram-se somente 08 trechos que interessam ao assunto tratado. Omitiram-se os trechos que nao dizem respeito ou nio sio relevantes para 0 entendimento do assunto, para no ocupar espaco desnecessirio no livro. Blocos de marcagao si marcados com fonte monoespagada: Para explicar passo a passo cada linha de um script, este é apresentado com suas linhas numeradas ¢, a seguir, os comentarios so referenciados ao ntimero da linha comentada: hoon $("

").insertafter('legend'); var textoLegenda = $('Tegend').remove(). text(); $('.legenda') .append(textoLegenda) ; S('fieldset') .addClass('fieldset'); 6 DE Cédigo comentado: Linha Descrigao Linha 2 Insere logo apés © elemento legend um elemento h4 com a classe Tegenda e vazio. Linha 3 Armazena o texto do elemento Tegend em uma varidvel denominada textoLegenda e remove o elemento do DOM. Linha4 —__Insere dentro do elemento hf criado anteriormente o texto da legen- da. Linha 5 Define a classe fieldset para o elemento fieldset, para fins de estili- zagio, Cédigos, marcagées e sintaxe CSS contidos em textos svio marcados com fonte monoespagada. A fungdo jQuery.noConfict() permite, entre outras funcionalidades, criar um pscudénimo personalizado para desenvolvimento. Arquivos para download Os scripts mostrados no livro esto disponiveis para download e/ou consulta ‘on-line no site do livro, em hetp://aw.Tivrojquery.con.br. Os documentos esto separados em pastas por capitulos e foram nomeados com sintaxe prépria, con- forme o exemplo a seguir: arquivo-2.1d.htnl20 Query = A Biblioteca do Programador JavaScript Este €um arquivo que mostra um script contido no primeito item do segundo capitulo (2.1) ¢ € 0 quarto script desse item (letra d no final do nome do arquivo). Adicionalmente, ao final do script, ha uma indicagao do arquivo no qual foi inserido conforme convengiio mostrada no exemplo a seguir:

Pardgrafoc/p> -/iquery-1.2.6.48"> $B) [arquivo-2.1d.nemt] <= Indicagé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 capitulo. Destaques em geral Palavras ou termos cujo significado deva ser destacado so grafados em itdlico. Por exemplo: jQuery destina-se a adicionar interatividade ¢ dinamismo incrementando de forma progressiva e nao obstrutiva a usabilidade, a acessibilidade e o design. Variaveis Valores varidveis em cédigos sao grafados em itélico, Por exemplo: JQuery(expressio, [contexto])Introdugao Site do livro O site de suporte a este livro esta localizado em http://mm.livrojquery.com.br. 2 No site, incluiram-se as facilidades relacionadas a seguir: = Arquivo de cédigos: os cddigos dos exemplos mostrados no livro estado dispo- niveis tanto para consulta on-line como para download. = Enata: efetuou-se um exaustivo trabalho de revisio tipografica. Contudo, a pratica mostra que nenhum livro est isento de erros ~ e com este ndo ha de ser diferente. Uma pagina do site dedicada a errata esta disponivel para consulta. = Feedback: incentiva-se vivamente os leitores a emitir opinido sobre qualquer aspecto do livro. Serio de grande valia informagées sobre qualquer erro detectado para aperfeigoar futuras edigdese atualizar a errata. Voce pode se comunicar com a editora pelo e-mail novatectnovatec.con.br ou diretamente com 0 autor pelo e-mail naujoressnaujor.con.Material com direitos autoraisParte | Fundamentos teoricos da biblioteca jQuery livro compreende os capitulos de 1a 7 ¢ tem por objetivo A primeira parte d apresentar a biblioteca, examinar sua sintaxe geral e estudar o emprego ¢ fina lidade dos métodos, propriedades ¢ diferentes funcionalidades disponiveis na biblioreca JQuery. 23Material com direitos autoraisCAPITULO 1 0 que é jQuery? Neste capitulo, sera apresentada a biblioteca jQuery, relatando-se suas origens, finalidades e destinagio, Sera feito um breve relato histérico de sua evolucio, examinando as motivagées que resultaram em sua criagdo, ¢ serdio descritas algumas de suas possibilidades, dando uma ideia do seu potencial e mostrando a forca e poder da programagio JavaScript com 0 uso da biblioteca jQuery. 1.1 Definicées e conceitos 1.1.10 que é jQuery? jQuery é uma biblioteca JavaScript criada por John Resig ¢ disponibilizada como software livre ¢ aberto, ou seja, de emprego ¢ uso regido segundo licenga confor- me as regras estabelecidas pelo MIT (Massachusetts Institute of Technology) e pelo GPL (GNU General Public License). Isto, resumidamente, significa que voce pode usar a biblioteca gratuitamente tanto para desenvolver projetos pessoais como comerciais. Para maiores detalhes sobre esses tipos de licenga, consulte os seguintes enderegos na internet: = http: //pt.wikipedia.org/wiki/Mit_license = http://pt.wikipedia.org/wiki/GNU_General_Public_License John Resig, no prefiicio do livro jQuery in Action, diz 0 seguinte: “O foco principal da biblioteca jQuery éa simplicidade. Por que submeter 05 desenvolvedores ao martirio de escrever longos e complexos codigos 10s?” para criar simples e 2526 JQuery = A Biblioteca do Programador JavaScript Sem diivida, ele estava em um momento de rara inspiragio quando : escreveu, pois soube resumir muito bem jQuery: E uma maneira simples ¢ facil de escrever JavaScript colocada ao alcance nao sé de programadores experien- tes, mas também de designers e desenvolvedores com pouco conhecimento de programagio. sim E o que torna o estudo e entendimento dos conceitos basicos de jQuery mais, fascinante ainda € o fato de que vocé nao precisa ser um profundo conhecedor de JavaScript, por mais estranho que isso possa parecer, pois se trata de uma biblioteca criada para ser usada com base nessa programagio, Simplicidade ¢ a palavra-chave que resume e norteia 0 desenvolvimento com jQuery. Linhas e mais linhas de programagio JavaScript escritas para obter um simples efeito em um objeto sio substituidas por apenas algumas, escritas com sintaxe jQuery. Intrincados e 4s vezes confusos cédigos JavaScript destinados a selecionar um determinado elemento HTML componente da arvore do docu- mento so substituidos por um simples método jQuery, Vocé mesmo, ao longo da leitura deste livro, ir constatar como jQuery consegue a proeza de criar extraordinarios efeitos com uma simplicidade impressionante, colocando o de- senvolvimento de scripts a seu aleance e dispor imediatos, sem exigir profundos conhecimentos de programagio. 1.1.1.1 Historica No dia 22 de agosto de 2005, John Resig, cuja foto é mostrada na figura 11, um desenvolvedor americano profundo conhecedor de JavaScript, que atua na Corporagiio Mozilla ¢ & autor do livro Pro JavaScript Techniques, escre seu blog um artigo relatando sua frustragao com a maneira verbosa de se escrever JavaScript para obter os resultados pretendidos, eu em, Figura 1.1 ~ John Resig, 0 criador da {QueryCapitulo 1 = O que é jQuery? 27 Nesse artigo, publicou alguns exemplos no quais propunha o uso de seletores CSS com o objetivo de simplificar e dar maior versatilidade ao cédigo. Escreveu, entdo, que essa, ainda, nao era a forma definitiva do que tinha em mente, mas iria aperfeigoar e testar suas propostas. O nome ainda nao existia, mas nessa ocasiio foi langada a ideia que traria como resultado a biblioteca jQuery. Aproximadamente cinco meses apés a publicagao do artigo em seu blog, John Resig apresentou publicamente os resultados de seus estudos em uma palestra intitulada “jQuery, a nova onda para JavaScript’, proferida no BarCampNYC —Wrap Up, no dia I4 de janeiro de 2006. O ano de 2006 marcou a criagao do primeiro plug-in para a biblioteca, o lan- amento de uma versio nao obstrutiva de LightBox usando a biblioteca jQuery. Nesse ano, ocorreram, ainda, o langamento das versdes 1.0, 101, 102, 103 € 104, da versio XML da biblioteca ¢ o primeiro conteste piblico de criagao com jQuery. Em 2007, langaram-se as versdes LM, LI, 11.2, 113a, 113, 11341, 114, 1.2 € 1.21. No dia I de margo ocorreu o primeiro encontro jQuery. Em 2008, até a data em que escrevi este livro, foram langadas as versdes 1.2.2, 123,124,125 € 1.26. 1.1.2 Para que serve jQuery? jQuery destina-se a adicionar interatividade e dinamismo as paginas web, pro- porcionando ao desenvolvedor funcionalidades necessiirias a criagao de scripts que visem a incrementar, de forma progressiva e nao obstrutiva, a usabilidade, a acessibilidade ¢ o design, enriquecendo a experiencia do usuério. Use jQuery em sua pagina para: # adicionar efeitos visuais ¢ animagdes; = acessar e manipular o DOM; = buscar informagées no servidor sem necessidade de recarregar a pagina (fora do escopo deste livro); = prover interatividade; = alterar contetidos; modificar apresentacao ¢ estilizagio;28 Query = A Biblioteca do Programador JavaScript = simplificar rarefas especificas de JavaScript; * realizar outras tarefas relacionadas as descritas. 1.1.3 jQuery em conformidade com os Padroes Web jQuery foi criada com a preocupagdo de ser uma biblioteca em conformidade com os Padrdes Web, ou seja, compativel com qualquer sistema operacional ¢ navegador, além de oferecer suporte total para as CSS 3, Sim, é isso mesmo, voce pode usar todos os poderosos scletores previstos nas CSS 3 sem se preocupar se este ou aquele navegador suporta o seletor para as CSS, Esclarecendo: a sintaxe do seletor segue a sintaxe prevista nas CSS 3, mas quem usa os seletores é a bi- blioteca, com a finalidade de selecionar elementos no DOM e nao estilizar. Evidentemente, isso nao significa que todo eédigo escrito com uso de jQuery resulta em um documento vilido segundo 0s Padrdes Web. A biblioteca foi c dae esta de acordo com as diretrizes do W3C, mas cabe a voce, desenvolvedor, escrever seuss scripts em conformidade. Se vocé pretende escrever em conformidade com os Padrées Web, adote como regra basica de desenvolvimento de scripts a filosofia de que jQuery se destina a adicionar interatividade e dinamismo, incrementando de forma progressiva ¢ ndo obstrutiva a usabilidade, a acessibilidade ¢ 0 design com propésito de enriquecer a experiéncia do usudrio, Leia a analogia a seguir. Por nao dispor de verba suficiente, Fulano compra um carro, 0 modelo mais simples da linha, e alguns meses depois, tendo sobrado uma verba, resolve in- vestirno carro equipando-o com alguns acess6rios, como insulfilm, som, alarme, protetor solar ¢ alguns outros itens, mudando o aspecto inicial do carro ¢ fazen- do-o parecer um modelo intermedidrio da linha, Passado algum tempo e tendo economizado uma boa quantia, Fulano resolve melhorar o carro instalando calotas de ago escovado, GPS, TV digital, frigobar, MP3 ¢ outros a sofisticados, conseguindo um visual de carro top de linha. rios mais Fulano € 0 desenvolvedor, o carro mais simples é a pagina web sem scripts, 0 carro top de linha é a pagina web incrementada com jQuery, as duas etapas de colocagao de acessérios representam o incremento progtessivo ¢ o fato de Fulano (e ninguém em sa consciéncia) ndo ter mandado retirar o motor do carro para colocar um jarro de flores representa o incremento nao obstrutivo.Capitulo 1 = O que é jQuery? 29 O carro top de linha de Fulano continuara sendo um carro com todas as suas funcionalidades, cumprindo rigorosamente todas para as quais foi projetado quando saiu da fabrica, mesmo que dele sejam retirados todos os acessérios. Com scripts em geral, ¢ jQuery no nosso caso, acontece a mesma situagao. Seu documento estara em conformidade com os Padrdes Web se continuar usiivel ¢ funcional caso os scripts parem de funcionar, Um belissimo menu de navegagao, com efeitos ultrassofisticados, nao valerd nada se nao for acessivel sem o script que o faz funcionar. Pade tornar-se esteticamente horroroso, mas deve cumprit sua finalidade quando nao sustentado pelo script Algumas técnicas para preservar a acessibilidade aos contetidos incrementa- dos com jQuery sao bisicas e serio abordadas em momento oportuna. Outras situagdes de preservagio de acessibilidade por estarem inseridas no contexto de um desenvolvimento particular nao tém solugao em uma técnica preestabelecida ¢ dependem da criatividade e capacidade de o desenvolvedor resolver situagdes especificas “Sempre que for 0 caso, os exemplos deste lvro serdo desenvolvidos de forma f hs nao obstrutiva, contudo, como dito anteriormente, quando a obstrug4o depender , de um contexto particular, sera entendido que sua avaliacdo e solucao dependem * — de cada caso. 1.1.4 Caracteristicas da biblioteca jQuery jQuery é uma biblioteca JavaScript que possui as seguintes caracteristicas: = utiliza seletores CSS para localizar elementos componentes da estrutura de marcagio HTML da pagina; = possui arquitetura compativel com instalagio de plug-ins e extensdes em geral; = indiferente As inconsisténcias de renderizagdo entre navegadores; = €capaz de interagao implicita, isto é, nao ha necessic loops para localizagao de elementos no documento; Jade de construgio de = admite programagao encadeada, ou seja, cada método retorna um objeto. = €extensivel, pois admite criagdo e insergdo de novas funcionalidades na biblioteca existente.30 Query = A Biblioteca do Programador JavaScript Nao se preocupe se algumas das caracteristicas descritas soem sem sentido para vocé. Com o prosseguimento da leitura, os conceitos ficarao claros ¢ com- preensiveis. O fato € que tais caracteristicas possibilitaram a criagao de uma biblioteca bastante compacta ¢, ao mesmo tempo, poderosa o bastante para oferecer funcionalidades que tornam 0 processo de desenvolvimento igualmente compacto ¢ extremamente simples. Por ser distribuida como software livre, jQuery tem o apoio e o envalvimento de uma consideravel comunidade. Desenvolvedores do mundo todo tém contri- buido em larga escala com novas ideias, scripts, plug-ins, extens6es ¢ toda sorte de implementagées, com a finalidade de incrementar 10 86 a biblioteca, mas também as rnicas de desenvolvimento jQuery: 1.1.5 Como instalar jQuery A biblioteca jQuery nada mais € que um arquivo JavaScript (arquivo do tipo texto puro gravado com a extensio .js, como meu_arquivo.js) que deverd ser linkado a pagina web onde sero aplicados efeitos, ou seja, a pagina web onde sero aplicados os efeitos deverd “chamar” biblioteca, E somente isso, Voce nao precisard instalar nada, Basta fazer o download gratuito do arquivo e"chamé-lo" na(s) pagina(s) Uma pagina ou documento “chama” um arquivo de script fazendo uso do ele- mento script e seus atributos type ¢ src colocados na segao head do documento. A versio mais recente da biblioteca esta no arquivo jquery-1.2.6.3s ¢ adiante voce verd como ¢ onde fazer o download dele. E muito provavel que na ocasidioem que voce estiver lendo este tépico ja exista uma versio mais recente ¢ é esta que vocé dever baixar para seus estudos e desenvolvimentos, Entao, um documento que use a biblioteca deverd ter marcado, em sua seco head, o seguinte elemento script, entre outros elementos proprios de cada caso: 0 valor do atibuto src indica © caminho (dretério) no qual se encontra gravado 0 arquivo da bbiotece.Capitulo 1.= O que é jQuery? 31 A partir daqui € imperativo ter gravado em seu HD a tiltima versio da bi- blioteca para poder acompanhar os exercicios deste livro ¢ fazer funcionar seus experimentos com jQuery, que, tenho certeza, iro fascind-lo. Entre no site oficial hrep://jquery.con, va para a piigina de download conforme mostrado na figura 1.2 ¢ faga o download da tiltima versio da biblioteca jQuery. jquery ea | Se <3) TT srrnestene Downloading jQuery About The Code Download jQuery gura 1.2 ~ Site oficial de biblioteca {Query Observe, na area de download em destaque na figura 12, que existem di- ferentes tipos de apresentagio da biblioteca para download e um link para um documento hospedado no proprio site, contendo um relatorio das modificag introduzidas na atual versio, sed” — jquery-1.2.6.js —destina-s ata-se de um arquivo A apresentagao denominada “Uncompre a0 uso em testes, estudos e desenvolvimento da biblioteca. T no qual 0 texto do script foi escrito com espaco entre cada linha de cédigo, am- plamente comentado, 0 que facilita a leitura, andlise ¢ entendimento do cédigo contido no arquivo. Esta ¢ a apresentagdo recomendada para vocé baixar ¢ fazer uso nos estudos e acompanhamento dos experimentos desenvolvidos neste livra, O tamanho desse arquivo é de 97,8KB.32 Query = A Biblioteca do Programador JavaScript A apresentagao denominada “Minified” — jquery-1.2.6.min.js —difere da anterior por terem sido removidos todos os comentarios ¢ espagamentos entre linhas ¢ declaragdes, tornando o cédigo dificil de ler para humanos e mais compacto, pois se transforma em uma sequéncia corrida de cédigo, sem quebras de linha. Esta € a apresentagdo recomendada para ser usada no desenvolvimento de sites. A vantagem sobre a versio anterior é que se trata do mesmo arquivo com tamanho reduzido para 544KB. Finalmente, a apresentacgao denominada “Packed” — jquery-1.2.6.pack.js—é uma versio obtida por proceso de compressio JavaScript da biblioteca, resultando em um arquivo com tamanho igual a 303KB. Essa versio, por ser codificada, nao € legivel para humanos Embora com tamano menor que o da versio “Minified” o tempo de carrega- mento desta versio acaba sendo praticamente igual ao daquela versio, pois ha que se computar 0 tempo de descompressiio quando o usuario recebe a pagina, Esta versio tem a desvantagem em relagio a anterior de nao ir para o cache, tendo que ser carregada novamente toda vez que o usuario volta ao site, Outra desvantagem que desaconselha seu uso € 0 fato de que processo de descom- pressio pode, eventualmente, ser imperfeito, introduzindo bugs nao existentes na versdo sem compressao ou na compacta. A nao ser que vocé tenha uma boa justificativa para usé-la, nfo use-a. />» Aparticdaqui, para testar os exemplos do livo, supde-se que vooé balou e gravou / F\. emsevHD 2 apresentacéo ‘Uncompressed’ - jquery-1.2.6, js da biblioteca, 4 —» para ser chamada pelas paginas de estudos conforme explicado anteriormente, 1.1.6 jQuery na pratica Para que um script consiga imprimir dinamismo, alterar comportamentos ou apresentago, no todo ou em partes de uma pagina web, precisa de um método de acesso 4 drvore do documento com a finalidade de encontrar o elemento HTML no qual seré vinculado o comportamento. Para exemplificar, imagine uma pagina web na qual existe um botdo que, ao ser clicado, muda a cor de um cabecalho, de verde para vermelha. 'Nos exemplos constantes dos arquives disponiveis para consulta ou download, /]\,_ Yor rd veriicar 0 funcionamento dos scp, ileagindo com a pagina que * T\. contém 0 exemplo, clicando um botdo ou agindo com o mouse. Para repetir 0 * — funcionamento do script, recarregue a pagina (em ambiente Windows tecle F5).Capitulo 1 = O que é jQuery? 33 D> Solucao com JavaScript in-line: Cabecalho muda de cor - B) [arquivo-1.1.6a.html) A técnica usada nessa solugao consiste em inserir script dentro de marcagao HTML (in: amplamente empregada por muitos desenvolvedores. Essa solugao contra- ine), sendo uma pratica ultrapassada e, infelizmente, ainda ria um principio fundamental dos Padrdes Web que preconiza separagio total entre estrutura de marcagao com HTML, apresentagio com CSS ¢ comportamento com scripts, Cada cédigo no seu arquivo correspondente € separado, Evite usar essa solucao. D> Solucao com funcao JavaScript: chead> Cabecalho muda de cor - 1 {color:#090;} Cabecatho muda de cor -cbutton type="button” id="btn-verneTha’>VerneTha -style.color = '#FF0000"; $W) farquivo-1.1.6cchtml] Agora, sim! A marcago HTML esta isenta de cédigo JavaScript, pois se incorporou 0 script a segao head do documento. Resta agora colocar o script em um arquivo externo separado e linkar para a(s) paigina(s). Essa € uma boa solusio sob o ponto de vista da separagao do comportamento, marcagio ¢ estilizagao.Capitulo 1 = O que é jQuery? 35 D Solucao com jQuery: Caso vocé nada conhega de jQuery, nao se intimide com 0 Limite-se a observar com aten ripta seguir. Jo cada linha do cédigo que seu conhe mento de JavaScript Ihe dard uma nogio bem préxima de seu funciona- mento. Com o prosseguimento da leitura, voce entenderé a finalidade de cada linha do script: chead> Cabecalho muda de cor VermeTha B® arquivo-t.1.6d.html) Ao contrario das solugdes tradicionais com JavaScript, como as mos- tradas anteriormente, o uso da biblioteca jQuery ndo permite misturar script com marcagao HTML. Nao é previsto nem existe uma sintaxe para jQuery in-line. Vocé € obrigado a inserir seu script incorporado na seco head do documento ou escrevé-lo em um arquivo separado ¢ linkar para os documentos onde serio utilizados. Como regra geral, adote as mesmas diretrizes que regem a vinculagao de folhas de estilo, isto é, se seu script serve a mais de uma pagina, adote a solugao de linkar, sendo, a solugao de incorporar na segao head do documento. Mas lembre-se que mesmo para uso em uma s6 pagina, em scripts que demandem tempo de carregamento nao desprezivel, a solugao de linkar € melhor, pois neste caso 0 script vai para o cache da maquina do usuario. Os quatro exemplos aqui apresentados tiveram por objetivo tinico mostrar na ado de trés maneiras diferentes com JavaScript um efeito bem simples36 Query = A Biblioteca do Programador JavaScript 4 maneira jQuery. Ainda que seus conhecimentos biisicos de JavaScript sejam limitados, nao se intimide, simplesmente consulte com atengao os cédigos¢ va em frente. Mas tanto vocé quanto aqueles familiarizados com JavaScript nao deixem de abrir cada uma das paginas contendo os scripts, constatarseu funcionamento ce olhar no cédigo-fonte da pagina, Os arquivos das paginas estado no site do livro, disponiveis para consulta on-line ¢ também para download, Toda pagina na qual se pretende fazer funcionar um script jQuery deveré estar linkada para o arquivo da biblioteca baixado do site jQuery. e 1.1.6.1 Evento window .onload JavaScript é uma técnica de programagao que funciona percorrendo e buscando seus alvos (elementos da marcagio) na drvore do documento ou no DOM, ou seja, um script s6 consegue executar sua ago se todo 0 documento jé tiver sido carregado. Os elementos da marcagio de uma pagina 6 existem depois que a pagina é carregada, ou, mais precisamente, vao existindo a medida que a pagina vai sendo carregada ¢ na sequéncia em que aparecem na marcagdo a partir da declaragio do vocrvPe até a tag de fechamento do elemento heel. Na pratica, isso significa que se vocé inserir na marcagao de uma pagina um script que se refira a um elemento hi, por exemplo, em local acima daquele no qual foi escrito o elemento hi, seu script nao ird funcionar, porque sera carregado na pagina antes do carregamento do elemento hi. Observe, a seguir, a tanscrigao do terceiro exemplo mostrado no item 1.1.6 no qual todo JavaScript foi retirado da marcagao e passado para a segdo head do documento. window onload = function() { document. getElementById("btn-vermeTha').onclick = mudaCor; h Function mudaCor() { document. getElenentById('cor').style.color = '#FF0000";Capitulo 1 = O que é jQuery? 37 chi id="cor">Cabegatho muda de cor Vermelha Vamos alterar ligeitamente o script anterior reescrevendo-o conforme mos- trado a seguir. Cabecaho muda de cor Vernelhac/button> = [arquivo-1.1.6.1a.html] Observe que o que se fez foi retirar do script a declaragao que diz: window.onload = function() { sfaga isso... + Mesmo para quem pouco conhece de JavaScript,a declaracao é autoexplicativa, pois window onload, traduzindo para o portugués, significa: depois que o documento for carregado, faga isso. Faga isso € a fungao audacor(). Agora, com a retirada que se fez, 0 script (...faga isso...) no esperar a pagina ser carregada e, consequentemente, no funcionard e o botdo nao trocar a cor do cabecalho, conforme se pode constatar no arquivo existente no site do livro. Isso ocorre pela razio explicada anteriormente: o script foi escrito antes dos elementos hi e button com seus ids cor ¢ btn-vernelha constantes do script, ou seja, quando o script é carregado, ainda nao existem os ids de que precisa para funcionar.38 Query = A Biblioteca do Programador JavaScript Se tirar o script da segio head do documento ¢ posicioné-lo depois dos ele- mentos envolvidos, funcionara normalmente. Faga assim: Cabecalho muda de cor Vermelha .Style.color = '#FF0000"; # [arquivo-1.1.6.1b.html] E tudo voltard a funcionar. Veja nos arquivos existentes no site do livro as paginas mostrando as duas situagdes descritas anteriormente. Conclusao Para possibilitar a retirada de seus scripts da marcagao HTML, a linguagem JavaScript dispde da declaragio window. onload que atua como uma espécie de aviso para que a fungao entre em agao (ou comece a “rodar”) somente apés a pagina ter sido completamente carregada. Existem outros métodos que cumprem a mesma finalidade e oferecem outras funcionalidades, como permitir declarar varias fungées, mas nao €0 escopo deste livro aprofundar a linguagem JavaScript. 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 conhegam a drvore do documento para poder funcionar.Capitulo 1 = O que é jQuery? 39 Na sintaxe jQuery, 0 equivalente ao window.onload ¢ todas as suas variantes é mostrado a seguir. ‘S(document).ready(function() { sfaga isso... Di Essa notagdo é conhecida como sintaxe formal para escrita do método ready(), que significa o seguinte: 0 script a executar. ‘quando o documento estiver pronto, faca isso” Faga isso Vocé pode omitir 0 parimetro docurent passado para a funcao jQuery cons- trutora $0 ¢ escrever com a seguinte sintaxe: $()-ready(function() { -Faga isso. Di © método jQuery read() oferece duas vantagens sobre seu equivalente JavaScript: =O script esta pronto para funcionar tao logo a arvore do documento tenha sido carregada, Nao € necessdrio que todos os componentes da pagina, tais como imagens, folhas de estilo, animagSes ¢ miidias em geral, tenham sido carregados. Basta que a estrutura de marcagio da pagina esteja disponivel € 0 script jé poder funcionar. = Nao ha variagdes funcionais para o método e pelo fato de jQuery nio ad- mitir mistura de script com marcagio, utiliza-se a sintaxe mostrada para servir de container aos scripts, Existe uma sintaxe alternativa a sintaxe formal mostrada anteriormente para ‘o método ready(), chamada de sintaxe abreviada, que é a seguinte: S¢function() { -faga isso. Di Nos o6digos dasenvohidos neste lio, sera adotada a sintaxe formal, pois se a Q considera que, apesar de ser mais extensa, oferece melhor legibilidade, sendo em consequéncia mais facil de ser visualizada, Em seus desenvolvimentos reais, sinte-se a vontade para usar a sintaxe abreviada que, certamente, reduz 0 trabalho de digitagéo.40 Query = A Biblioteca do Programador JavaScript 1.1.7 Fundamentos jQuery A finalidade do uso de jQuery ¢ controlar 0 comportamento de toda ou partes de uma pagina web. Sabe-se que uma pagina web nada mais é do que marcagao HTML. Entao, ¢ licito concluir que o principio de funcionamento de jQuery fundamenta-se em sua capacidade de encontrar os elementos HTML que cons- tituem a pagina e a estes anexar seus métodos. 1 1 Construtor jQuery Inicialmente, veja o encarregado de encontrar elementos HTML em um docu- mento: sO Tecnicamente, trata-se do que se denomina, em linguagem de programagio, de construtor. O construtor $Q ou,ainda,a fungao construtora $0) estard presente em todos os scripts que voce escrever, portanto decore desde ja sua sintaxe: um sinal de cifrdo seguido de parénteses (0 que, convenha, ndo ¢ tio complicado de decorar), Outras bibliotecas JavaScript também usam a fungao $0). Isso pode causar conflitos e mau funcionamento de scripts quando se usa mais de uma biblioteca no mesmo documento. Nesses casos, existem meétodos para evitar conflitos eum deles ¢ usar a sintaxe alternativa mostrada a seguir, Outros mérodos para evitar conflitos sero apresentados posteriormente. ‘jQuery() aQ, Nos cbdigos desenvolvidos neste lio, sera adotada a sintaxe: $(). = Simplicidade € a filosofia que orienta o desenvolvimento de jQuery desde sua criagao, Observe os cédigos a seguir. Vocé, mesmo nao conhecendo nada de jQuery, seria capaz de concluira finalidade de cada uma das linhas do codigo a seguir? SCh1'); sCpD5 S¢'span") S('table’);Capitulo 1 = O que é jQuery? av Bem simples, nao é mesmo? Vocé esta instruindo seu construtor a encontrar todos os elementos hi, p, span ¢ table respectivamente. Query, a0 contrario de JavaScript, no requer loops para construi arrays quando busca elementos no documento. O construtor $() armazena automaticamente ‘em um objeto array tudo que encontra, Encontrar fodos os elementos de um determinado tipo nao parece muito itil, Seria bem melhor se vocé pudesse encontrar uma ocorréncia especifica de um elemento. Por exemplo: quero encontrar o terceiro paragrafo do documento, Bem, neste caso, uma solugao seria marcar o rerceiro pardigrafo com o atributo id para iden- tificar sua ocorréncia: @ id="xpto">Texto do terceiro parégrafo

€ escrever © construtor assim: SC'#xpto') Vocé conhece CSS? Ainda nao? £ essencial comegar a aprender hoje mesmo, sob pena de ficar ultrapassado nas técnicas de desenvolvimento web. jQuery nao € excegao a regra ¢ faz amplo emprego de seletores CSS. Como se disse anteriormente, adota os poderosos seletores CSS 3 para localizar elementos no documento. E nao se preocupe, pois o uso de seletores CSS em jQuery em nada se relaciona com suporte pelos navegadores. Use e abuse desses seletores que seus scripts funcionarao em qualquer navegador. Observe o cédigo a seguir: S('body p:nth-child(3)') Aqui o construtor est usando um seletor CSS 3 que tem como alvo o ter- ceiro pardgrafo descendente do elemento boty. Trata-se de uma busca simples, sem necessidade de atribuir um identificador ao terceiro parigrafo como se fez anteriormente. A verdade € que jQuery usa amplamente seletores CSS ¢, assim sendo, é pré-requisito para bem desenvolver jQuery © conhecimento profundo desses seletores. No apéndice A, vocé encontra um guia de consulta aos scletores que ird ajudé-lo a acompanhar os exemplos deste livro.42 Query = A Biblioteca do Programador JavaScript 1.1.7.2 Encadeamento jQuery Um conceito importante da biblioteca jQuery é 0 encadeamento, Observe a linha de cédigo a seguir: SC'div').children('p').fadeOut().addClass('xpto') Nao se preocupe se 0 cédigo parecer confuso ou ininteligivel, pois logo voce estard entendendo-o. O cédigo diz o seguinte: “Construtor, encontre todos os elementos parigrafos que sejam filhos dos elementos div, neles aplique um efeito de esmaecimento (fadeOut) € adicione a classe xpto” Denomina-se encadeamento a caracteristica de se poder encadear diversos métodos em uma declaragao. Isso € possivel porque se criou {Query de modo a que cada método retorne um objeto pronto para receber outro método, que, por sua vez, retornara outro objeto, ¢ assim por diante, permitindo ao desenvolvedor construir uma cadeia infinita de objetos ¢ métodos, Em JavaScript tradicional, no existe encadeamento como o projetado para jQuery, o que obriga o uso de miiltiplas declaragdes para se conseguir um efeito que, em jQuery, se consegue com uma linha de cédigo apenas 1 3 Funcoes utilitdrias Servir como inspetor e selecionador de componentes do DOM, conforme visto anteriormente, nao é a tinica atribuigao da fungao SQ). jQuery prevé um conjunto de fungdes chamadas utilitérias que usa o sinal $ como um identificador tal qual qualquer outro identificador previsto em JavaScript. A sintaxe para as fungdes utilitarias € mostrada no exemplo a seguir: S.bronser; ou com a opgio de uso do identificador jQuery: jQuery-browser O exemplo mostra uma fungao para identificar o tipo de navegador do usuario que equivale a fungao navigator useragent do JavaScript. E muito pouco provavel que voce use uma fungio utilitéria no desenvolvi- mento de scripts para funcionar em uma pagina web. Elas tém sua utilidade no desenvolvimento de extensdes para a biblioteca jQuery, como a criagéo de plug-ins,Capitulo 1 = O que é jQuery? 43 1.1.7.4 Conflitos com outras bibliotecas Sem dhivida, a invengao de bibliotecas revigorou 0 uso de JavaScript no desen- volvimento de paginas web, pois além de tornar o processo de criagao bem mais simples, forneceu mecanismos que possibilitam criar cédigos nio obstrutivos e, em consequéncia, sem prejuizos para usabilidade e acessibilidade da pagina. jQuery nao detém exclusividade no campo das bibliotecas JavaScript, pelo con- trdrio, muitas bibliotecas surgiram nos tltimos tempos, entre elas: Prototype, MochiKit, MooTools, Yahoo User Interface (YUI) ¢ DOMASssistant. O identificador § também nao é exclusividade de jQuery e outras bibliotecas fazem uso dele. Se um documento usa mais de uma biblioteca, é provavel que ocorram conflitos com diferentes bibliotecas tentando interpretar um mesmo identificador ¢ estabelecendo-se uma enorme confus O sinal § € um pseuddnimo ¢, no jargio técnico, diz-se “alias” para o iden- tificador da biblioteca. O identificador utilizado foi jQuery, assim, ao usar essa biblioteca, 5 é o pseuddnimo de jquery e as duas sintaxes mostradas a seguir so equivalentes: so e jQuery) Usar jqvery() climina 0 risco de conflitos, mas obriga o desenvolvedor a abrir mio de escrever com a forma abreviada do pseudénimo. Felizmente, para evitar conflitos com outras bibliotecas, sem prescindir de uma forma abreviada, existe a fungao jQuery .noConflict() que permite, entre outras funcionalidades, criar um pseud6nimo personalizado para desenvolvimento. Tal fungao sera abordada no capitulo 2, em [C2 $2.1].Material com direitos autoraisCAPITULO 2 Funcoes-padrao e seletores jQuery Na primeira parte deste capitulo, sero explicadas as fungdes-padrio, de em- prego mais comum, da biblioteca jQuery, examinando a sintaxe, aplicagao ¢ funcionamento de objetos, métodos ¢ propriedades que constituem 0 corago da biblioteca, Na sequéncia, serio examinados os poderosos seletores jQuery, apresentando-se sua sintaxe e desenvolvendo-se exemplos de aplicagia. 2.1 Funcoes-padrao jQuery Os arquivos exemplo contendo a demonstragiio pritica das fungdes e seletores apresentados neste capitulo se baseiam na técnica de estilizar 0(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 botio. Para adicionar estilos em uma selegio jQuery, pode-se usar duas sintaxes que serio estudadas com detalhes em [C4 S41], contudo veja a apresentagio da sintaxe mais simples que sera usada neste capitulo com o fim proposto no pardgrafo anterior. A sintaxe geral para adicionar estilo ao clemento-alvo de um seletorjQuery € mostrada a seguir: seletorjQuery.css(' propriedade’, ‘ valor’) © parametro propriedade é uma propriedade CSS ¢ o pardmetro valor, quantificagao das frequentemente as propriedades backgroud ¢ color com os valores red (vermelho) e green (verde). ou caracteristica da propriedade. Neste capitulo, serao us 4546 Query = A Biblioteca do Programador JavaScript S(expressdo, [contexto]) Esta é a principal fungao jQuery mencionada no capitulo 1, a qual aceita dois argumentos. Veja-os a seguir. Argumento ——_Descigao expresso Um seletor CSS ou um dos seletores especificos da biblioteca, contexto © contexto em que sera feita a procura do seletor. Omitindo esse argumento, 0 valor-padrio de procura sio os elementos do DOM no documento atual, Vocé pode limitar a procura ao contexto de um elemento ou conjunto de elementos do DOM ou mesmo a um objeto jQuery Exemplo: S('p', $('#container')).css(‘color’, "green’); // con uso do parénetro contexto Di