Aula 03Wagner Silva
Agenda        Seletores e Filtros        Seleção através de Tags, Identificadores e Classes        Hierarquia de Seleto...
Seletores e Filtros        Poderoso motor de seleção        Simplifica o agrupamento        Seleção -> Manipulação     ...
Seletores e Filtros        Princípios do CSS 3        Elimina a realização de loops        Seleção: Tags, Identificador...
Seletores e Filtros        Simples              $(“p”): Todos os elementos de parágrafo na página        Complexos     ...
Seletores: Tags        Todas as tags        Padrão: $(“tag”)        Exemplo:              $(“div”): seleciona todas as...
Seletores: Identificadores        Similar ao CSS        $(“#id”)        Exemplo:              $(“p#tituloNoticia”): Se...
Seletores: Classes        Similar ao CSS        $(“.classe”)        Exemplo:              $(“.obrigatorio”): Seleciona...
Seletores: Classes        Exercício. Qual o seletor para:              Todas as imagens da classe “miniatura” que estão ...
Hierarquia de Seletores        Ordem decrescente        Tipos:              Descendente              Filho            ...
Hierarquia de Seletores        Descendente        $(“Ascendente Elemento”)        Exemplo:              $(“#noticiaPri...
Hierarquia de Seletores        Filho        $(“Pai > Elemento”)        Exemplo:              $(“form > div.campos > .o...
Hierarquia de Seletores        Seguinte        $(“Anterior + Elemento”)        Exemplo:              $(“div + div”): S...
Hierarquia de Seletores        Irmão        $(“Irmão ~ Elemento”)        Exemplo:              $(div ~ div): Seleciona...
Hierarquia de Seletores        Exercício. Qual o seletor para:              Todos as imagens que estão no mesmo nível de...
Aplicação de Filtros        Filtrar seleção        Tipos:              Índice ou Posição              Conteúdo        ...
Aplicação de Filtros        Tipos:              Atributos              Afiliação              Itens de Formulário     ...
Aplicação de Filtros        Índice ou Posição              :first              :last              :evenWagner Silva # ...
Aplicação de Filtros        Índice ou Posição              :odd              :eq(indice)              :gt(indice)     ...
Aplicação de Filtros        Conteúdo              :contains(‘texto’)              :empty              :has(seletor)   ...
Aplicação de Filtros        Visibilidade              :hidden              :visibleWagner Silva # Web 2.0 com Ajax   Au...
Aplicação de Filtros        Atributos              [atributo]              [atributo=valor]              [atributo!=va...
Aplicação de Filtros        Atributos              [atributo^=valor]              [atributo$=valor]              [atri...
Aplicação de Filtros        Afiliação              :nth-child({indice,odd,even})              :first-child             ...
Aplicação de Filtros        Itens de Formulário              :input              :text              :password         ...
Aplicação de Filtros        Itens de Formulário              :checkbox              :submit              :fileWagner S...
Aplicação de Filtros        Estado              :enabled              :disabled              :checked              :s...
Aplicação de Filtros        Exercício. Implementar seleção com filtros:              Selecionar todos os campos com clas...
Exercício        Simular um leitor de e-mail estilo GMail (Exx3.01)              Alinhar lista de e-mails              ...
Exercício        Simular um leitor de e-mail estilo GMail (Exx3.01)              Lista de e-mails com cores alternadas n...
Web 2.0 com Ajax # Aula 03 Próxima Aula:   Manipulação de Códigos e Eventos E-mail: web2softeam@gmail.com Twitter: twi...
Próximos SlideShares
Carregando em…5
×

Web 2.0 com Ajax: JQuery/PHP (Aula 03)

633 visualizações

Publicada em

Treinamento ministrado para turma iniciante em 2011

Aula 03

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
633
No SlideShare
0
A partir de incorporações
0
Número de incorporações
1
Ações
Compartilhamentos
0
Downloads
17
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Web 2.0 com Ajax: JQuery/PHP (Aula 03)

  1. 1. Aula 03Wagner Silva
  2. 2. Agenda  Seletores e Filtros  Seleção através de Tags, Identificadores e Classes  Hierarquia de Seletores  Aplicação de Filtros  Hierarquia de FiltrosWagner Silva # Web 2.0 com Ajax Aula 03
  3. 3. Seletores e Filtros  Poderoso motor de seleção  Simplifica o agrupamento  Seleção -> Manipulação  Vetor de elementos (Array)  Conceitos do HTML DOMWagner Silva # Web 2.0 com Ajax Aula 03
  4. 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. 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. 6. Seletores: Tags  Todas as tags  Padrão: $(“tag”)  Exemplo:  $(“div”): seleciona todas as divs  $(“img”): seleciona todas as imagensWagner Silva # Web 2.0 com Ajax Aula 03
  7. 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. 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. 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. 10. Hierarquia de Seletores  Ordem decrescente  Tipos:  Descendente  Filho  Seguinte  IrmãosWagner Silva # Web 2.0 com Ajax Aula 03
  11. 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. 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. 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. 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. 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. 16. Aplicação de Filtros  Filtrar seleção  Tipos:  Índice ou Posição  Conteúdo  VisibilidadeWagner Silva # Web 2.0 com Ajax Aula 03
  17. 17. Aplicação de Filtros  Tipos:  Atributos  Afiliação  Itens de Formulário  EstadoWagner Silva # Web 2.0 com Ajax Aula 03
  18. 18. Aplicação de Filtros  Índice ou Posição  :first  :last  :evenWagner Silva # Web 2.0 com Ajax Aula 03
  19. 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. 20. Aplicação de Filtros  Conteúdo  :contains(‘texto’)  :empty  :has(seletor)  :parentWagner Silva # Web 2.0 com Ajax Aula 03
  21. 21. Aplicação de Filtros  Visibilidade  :hidden  :visibleWagner Silva # Web 2.0 com Ajax Aula 03
  22. 22. Aplicação de Filtros  Atributos  [atributo]  [atributo=valor]  [atributo!=valor]Wagner Silva # Web 2.0 com Ajax Aula 03
  23. 23. Aplicação de Filtros  Atributos  [atributo^=valor]  [atributo$=valor]  [atributo*=valor]Wagner Silva # Web 2.0 com Ajax Aula 03
  24. 24. Aplicação de Filtros  Afiliação  :nth-child({indice,odd,even})  :first-child  :last-child  :only-childWagner Silva # Web 2.0 com Ajax Aula 03
  25. 25. Aplicação de Filtros  Itens de Formulário  :input  :text  :password  :radioWagner Silva # Web 2.0 com Ajax Aula 03
  26. 26. Aplicação de Filtros  Itens de Formulário  :checkbox  :submit  :fileWagner Silva # Web 2.0 com Ajax Aula 03
  27. 27. Aplicação de Filtros  Estado  :enabled  :disabled  :checked  :selectedWagner Silva # Web 2.0 com Ajax Aula 03
  28. 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. 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 imagemWagner Silva # Web 2.0 com Ajax Aula 03
  30. 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 buscaWagner Silva # Web 2.0 com Ajax Aula 03
  31. 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

×