Sumário PARTE I: INTRODUÇÃO A JQUERY E JAVASCRIPT 3

Transcrição

1 Sumário PARTE I: INTRODUÇÃO A JQUERY E JAVASCRIPT 3 Capítulo 1: Introdução a jquery 5 Descubra as bibliotecas JavaScript 6 As vantagens do uso de uma biblioteca JavaScript em relação à abordagem tradicional 6 Explore as bibliotecas principais 7 As vantagens da jquery 9 Capítulo 2: Começando a usar jquery 19 Configure o ambiente de desenvolvimento 20 Use o Firebug no Firefox 21 Download da biblioteca jquery 27 Inclua a biblioteca jquery em sua página 30 Entenda o wrapper da jquery 31 Execute os códigos fora do manipulador document ready 34 Evite conflitos com outras bibliotecas 34 Use o JavaScript com a jquery 35 PARTE II: SOBRE OS FUNDAMENTOS DA JQUERY 37 Capítulo 3: Usando seletores, filtros e CSS: a base da jquery 39 Use os elementos do DOM com seletores jquery 40 Selecione os elementos de página com os seletores CSS 41 Filtre elementos do DOM com os filtros de seletor jquery 52 Aplique definições de filtro básicas 52 Crie tabelas com efeito zebra usando os filtros even e odd 53 Aplique estilo ao primeiro e ao último item em uma lista ou conjunto de elementos 55 Filtre elementos que contêm um elemento específico 56 Filtre elementos que não contêm elementos ou texto 57 Filtre elementos que contêm texto 59 Selecione elementos no DOM por seus atributos 60 Selecione links que contêm o endereço de um site específico 61 Selecione todos os elementos que terminam com uma palavra específica 62 Manipule HTML e CSS com a jquery 63 Adicione, remova, clone e substitua elementos e conteúdo do DOM 64 Trabalhe com CSS e jquery 69

2 Capítulo 4: Trabalhando com eventos 71 Compreenda os eventos na jquery 72 Trabalhe com eventos de document e window 72 Detecte o carregamento completo do DOM com o evento ready() 73 Pré-carregue imagens com o evento load() 73 Exiba um alerta quando o usuário sair de uma página 76 Exiba uma imagem de backup usando o evento error 77 Comece a utilizar a delegação de eventos 77 Use bind para anexar um manipulador de eventos a um elemento 78 Use live para anexar um manipulador de eventos a um elemento 79 Use delegate para anexar um manipulador de eventos a um elemento 80 Capture eventos de mouse 81 Adicione e remova conteúdo da página com um clique do mouse 82 Entenda como o evento double-click funciona 85 Crie uma dica de ferramenta que exiba o conteúdo no evento hover 85 Crie funcionalidades Add to Cart básicas com os eventos mousedown e mouseup 89 Crie um efeito de rollover em um botão com imagens 93 Capture eventos de formulário 94 Insira uma borda a um campo de formulário quando o usuário adicionar foco 94 Mostre uma mensagem após o usuário deixar um campo de texto 95 Capture eventos de teclado 95 Capítulo 5: Deixando seu site mais atraente com efeitos 99 Descubra o que os efeitos da jquery podem fazer 100 Exiba e oculte elementos com Show e Hide 101 Configure uma mensagem para ser exibida apenas uma vez no site com o método show e com cookies 103 Ative/desative show e hide 105 Deslize elementos para cima e para baixo 106 Exiba opções de pesquisa alternativas com o método slidetoggle 107 Transição gradual de elementos 109 Crie uma galeria de imagens básica com transição gradual 110 Adicione atraso para criar uma animação sincronizada 113 Encadeie vários efeitos 114 Crie um painel de notícias com vários efeitos 116 Crie animações avançadas 119 Crie uma galeria de imagens com legendas usando animações avançadas 119 Efeitos de suavização adicionais com o plug-in Easing da jquery 126 PARTE III: APLICANDO JQUERY AO SITE 129 Capítulo 6: Aperfeiçoando a navegação: menus, guias e accordion 131 Defina todos os links em uma página para abrirem em uma nova janela 132 X

3 Configure um item ativo no menu de navegação 133 Crie um menu suspenso básico 135 Adicione efeitos avançados ao menu suspenso usando animate 141 Crie um menu accordion 142 Crie conteúdo dividido em guias 147 Capítulo 7: Criando tabelas interativas e atraentes 155 Aplique estilo aos dados em tabelas com CSS 156 Adicione cores de linhas alternadas usando filtros 157 Adicione um efeito hover simples a linhas 157 Adicione um efeito hover avançado a linhas 159 Manipule os dados das tabelas 161 Adicione uma mensagem após a primeira/última linha da tabela 162 Remova uma linha usando um seletor de filtro 164 Adicione uma linha após outra de acordo com o valor de seu índice 165 Remova uma linha de acordo com o valor de seu índice 166 Adicione uma mensagem depois de linhas com conteúdo específico 166 Remova uma linha de acordo com seu conteúdo 166 Configure a paginação de tabelas com jquery 166 Crie tabelas avançadas usando os plug-ins jquery 172 Classifique linhas usando o plug-in tablesorter 173 Altere a ordem de classificação padrão 176 Crie gráficos atraentes com dados tabulares usando o Visualize 176 Crie um gráfico de barras 177 Capítulo 8: Criando formulários avançados com jquery 181 Destaque um campo após o carregamento da página 182 Desabilite e habilite elementos de formulário 182 Marque o campo atual em formulários 183 Crie texto padrão dentro dos campos 186 Limite a contagem de caracteres nos campos 188 Crie um link para marcar todas as caixas de seleção 190 Obtenha o valor de um campo 192 Recupere o valor de uma opção de seleção 193 Adicione uma validação de simples a um formulário 194 Copie o conteúdo de um campo para outro 198 Aperfeiçoe os formulários com plug-ins 201 Incorpore o qtip ao site 201 Crie um qtip de campo de formulário básico usando o atributo title 203 Use o plug-in validate da jquery para validar os formulários 203 Adicione uma validação simples a um formulário de contato 204 Adicione mensagens e regras de validação avançadas a um formulário de contato 208 XI

4 PARTE IV: EXPLORANDO A JQUERY AVANÇADA 213 Capítulo 9: Utilizando dados dinâmicos e Ajax 215 Descubra o Ajax 216 Carregue o conteúdo dinâmico de uma página 217 Carregue todo o conteúdo 218 Manipule erros se o conteúdo carregado estiver ausente 219 Carregue as seções do conteúdo 221 Envie formulários usando Get e Post 223 Use POST para enviar formulários de contato sem recarregar a página 225 Trabalhe com os dados XML 229 Analise dados XML internos e crie HTML 231 Trabalhe com dados JSON 233 Recupere os dados JSON internos e crie HTML 236 Crie um widget de usuário Delicious recebendo dados JSONP de solicitações de API 237 Crie um widget das principais críticas do Yelp com JSONP por meio da API do Yelp 243 Obtenha aprovação para a chave de API do Yelp 245 Use a API do Yelp para exibir críticas baseadas em números de telefone 245 Capítulo 10: Criando e usando plug-ins jquery 253 Conheça os plug-ins 254 Incorpore um plug-in jquery ao site 255 Incorpore a jquery UI ao site 255 Download da jquery UI 257 Adicione a jquery UI ao site 257 Compreenda como os widgets da jquery UI funcionam 258 Personalize o design da jquery UI 258 Crie um tema para a UI com o ThemeRoller 260 Use os temas da jquery UI 263 Incorpore os recursos da jquery UI ao site 263 Incorpore plug-ins jquery populares ao site 271 Use a jquery Tools 271 Fancybox 274 Crie seu primeiro plug-in jquery 276 Faça um rascunho do plug-in 277 Compreenda a estrutura do plug-in 278 Defina as opções para o plug-in 278 Crie o plug-in 279 Como distribuir um plug-in jquery 286 Prepare o plug-in jquery para distribuição 286 Envie o plug-in a outros sites 287 XII

5 Capítulo 11: Desenvolvendo para a Web móvel com jquery 289 Crie para a Web móvel usando jquery 290 Navegadores móveis 290 Compreenda CSS3 291 Compreenda HTML5 292 Configuração para iniciar o Web design móvel 293 Use o navegador Safari Mobile do Apple iphone 295 Use o navegador do Google Android 295 Aplique a exibição de acordo com o smartphone do usuário 297 Desenvolva sites e aplicativos Web móveis com jquery 298 Introdução ao preview do jquery Mobile 298 Frameworks mobile 298 Use o Appcelerator Titanium Mobile 298 Use o plug-in jqtouch 300 Capítulo 12: Procurando recursos jquery 303 Acompanhe o crescimento da jquery 304 Use o site da jquery 305 Use a documentação da API da jquery 305 Procure tutoriais da jquery 306 Participe de uma conferência ou meetup da jquery 306 Envie bugs para o rastreador de bugs 308 Participe do fórum da jquery 310 Outros recursos de Web design e desenvolvimento Web 310 ÍNDICE 311 XIII