Web 2.0 com Ajax: JQuery/PHP

Treinamento ministrado para turma iniciante em 2011

Aula 03

Transcript

1. Aula 03 Wagner Silva
2. Agenda  Seletores e Filtros  Seleção através de Tags, Identificadores e Classes  Hierarquia de Seletores  Aplicação de Filtros  Hierarquia de Filtros Wagner Silva # Web 2.0 com Ajax Aula 03
3. Seletores e Filtros  Poderoso motor de seleção  Simplifica o agrupamento  Seleção -> Manipulação  Vetor de elementos (Array)  Conceitos do HTML DOM Wagner Silva # Web 2.0 com Ajax Aula 03
4. Seletores e Filtros  Princípios do CSS 3  Elimina a realização de loops  Seleção: Tags, Identificadores e Classes  Aplicação de Filtros em seleção  Filtros: Conteúdo, Visibilidade, Atributos e Hierarquia. Wagner Silva # Web 2.0 com Ajax Aula 03
5. Seletores e Filtros  Simples  $(“p”): Todos os elementos de parágrafo na página  Complexos  $(“ul.listElement li”): Todos os elementos de lista que fazem parte da classe ‘listElement’  Todos os Elementos: $(“*”) Wagner Silva # Web 2.0 com Ajax Aula 03
6. Seletores: Tags  Todas as tags  Padrão: $(“tag”)  Exemplo:  $(“div”): seleciona todas as divs  $(“img”): seleciona todas as imagens Wagner Silva # Web 2.0 com Ajax Aula 03
7. Seletores: Identificadores  Similar ao CSS  $(“#id”)  Exemplo:  $(“p#tituloNoticia”): Seleciona o parágrafo com id “tituloNoticia”  $(“#linkPatrocinado”): Seleciona o elemento com id “linkPatrocinado” Wagner Silva # Web 2.0 com Ajax Aula 03
8. Seletores: Classes  Similar ao CSS  $(“.classe”)  Exemplo:  $(“.obrigatorio”): Seleciona os elementos com classe “obrigatorio”  $(“img.linkExterno”): Seleciona as imagens com classe “linkExterno” Wagner Silva # Web 2.0 com Ajax Aula 03
9. Seletores: Classes  Exercício. Qual o seletor para:  Todas as imagens da classe “miniatura” que estão dentro de uma div com id “galeria”  Todos os parágrafos que estão dentro de uma div com id “noticia”  O Elemento com id “titulo” dentro das divs com classe “post” Wagner Silva # Web 2.0 com Ajax Aula 03
10. Hierarquia de Seletores  Ordem decrescente  Tipos:  Descendente  Filho  Seguinte  Irmãos Wagner Silva # Web 2.0 com Ajax Aula 03
11. Hierarquia de Seletores  Descendente  $(“Ascendente Elemento”)  Exemplo:  $(“#noticiaPrincipal p .linkPatrocinado”): Seleciona os elementos com classe “linkPatrocinado” que estão nos parágrafos do elemento com id “noticiaPrincial” Wagner Silva # Web 2.0 com Ajax Aula 03
12. Hierarquia de Seletores  Filho  $(“Pai > Elemento”)  Exemplo:  $(“form > div.campos > .obrigatorio”): Seleciona os elementos com classe “obrigatorio” filhos de elementos do tipo div com classe “campos”, que são filhos de algum formulário. Wagner Silva # Web 2.0 com Ajax Aula 03
13. Hierarquia de Seletores  Seguinte  $(“Anterior + Elemento”)  Exemplo:  $(“div + div”): Seleciona todas as divs que possuem como elementos anterior uma div. Wagner Silva # Web 2.0 com Ajax Aula 03
14. Hierarquia de Seletores  Irmão  $(“Irmão ~ Elemento”)  Exemplo:  $(div ~ div): Seleciona todas as divs que possuem uma div no mesmo nível de hierarquia. Wagner Silva # Web 2.0 com Ajax Aula 03
15. Hierarquia de Seletores  Exercício. Qual o seletor para:  Todos as imagens que estão no mesmo nível de parágrafos  Todos os links que são filhos de td com id “acoes” que pertencem a tabelas com classe “anexos”  Todos os parágrafos com classe “resumo” declarados após elementos h1 com classe “titulo” Wagner Silva # Web 2.0 com Ajax Aula 03
16. Aplicação de Filtros  Filtrar seleção  Tipos:  Índice ou Posição  Conteúdo  Visibilidade Wagner Silva # Web 2.0 com Ajax Aula 03
17. Aplicação de Filtros  Tipos:  Atributos  Afiliação  Itens de Formulário  Estado Wagner Silva # Web 2.0 com Ajax Aula 03
18. Aplicação de Filtros  Índice ou Posição  :first  :last  :even Wagner Silva # Web 2.0 com Ajax Aula 03
19. Aplicação de Filtros  Índice ou Posição  :odd  :eq(indice)  :gt(indice)  :lt(indice) Wagner Silva # Web 2.0 com Ajax Aula 03
20. Aplicação de Filtros  Conteúdo  :contains(‘texto’)  :empty  :has(seletor)  :parent Wagner Silva # Web 2.0 com Ajax Aula 03
21. Aplicação de Filtros  Visibilidade  :hidden  :visible Wagner Silva # Web 2.0 com Ajax Aula 03
22. Aplicação de Filtros  Atributos  [atributo]  [atributo=valor]  [atributo!=valor] Wagner Silva # Web 2.0 com Ajax Aula 03
23. Aplicação de Filtros  Atributos  [atributo^=valor]  [atributo$=valor]  [atributo*=valor] Wagner Silva # Web 2.0 com Ajax Aula 03
24. Aplicação de Filtros  Afiliação  :nth-child({indice,odd,even})  :first-child  :last-child  :only-child Wagner Silva # Web 2.0 com Ajax Aula 03
25. Aplicação de Filtros  Itens de Formulário  :input  :text  :password  :radio Wagner Silva # Web 2.0 com Ajax Aula 03
26. Aplicação de Filtros  Itens de Formulário  :checkbox  :submit  :file Wagner Silva # Web 2.0 com Ajax Aula 03
27. Aplicação de Filtros  Estado  :enabled  :disabled  :checked  :selected Wagner Silva # Web 2.0 com Ajax Aula 03
28. Aplicação de Filtros  Exercício. Implementar seleção com filtros:  Selecionar todos os campos com classe “obrigatorio” não preenchidos. (inputs, select, textarea)  Selecionar todos os campos do tipo hidden com classe “link” que estão dentro de divs com classe “itemMenu”  Selecionar todos os links da página com classe “patrocinio” e possuam registro “.br” que são filhos de elementos com classe “noticia” desde que estes sejam os primeiros elementos da div com id “principal” Wagner Silva # Web 2.0 com Ajax Aula 03
29. Exercício  Simular um leitor de e-mail estilo GMail (Exx3.01)  Alinhar lista de e-mails  Alinhar pastas com lista de e-mails  Ao passar o mouse por cima de uma pasta deve mudar a cor do fundo desta  Ao clicar na estrela, mudar a imagem Wagner Silva # Web 2.0 com Ajax Aula 03
30. Exercício  Simular um leitor de e-mail estilo GMail (Exx3.01)  Lista de e-mails com cores alternadas nas linhas  Adicionar funcionalidade de Arquivar ou não  Adicionar funcionalidade ao campo de busca Wagner Silva # Web 2.0 com Ajax Aula 03
31. Web 2.0 com Ajax # Aula 03  Próxima Aula:  Manipulação de Códigos e Eventos  E-mail: web2softeam@gmail.com  Twitter: twitter.com/web2softeam