Your SlideShare is downloading. ×

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

405

Published on

Treinamento ministrado para turma iniciante em 2011 …

Treinamento ministrado para turma iniciante em 2011

Aula 03

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
405
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Aula 03Wagner Silva
  • 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. 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. 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 imagensWagner 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ãosWagner 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  VisibilidadeWagner Silva # Web 2.0 com Ajax Aula 03
  • 17. Aplicação de Filtros  Tipos:  Atributos  Afiliação  Itens de Formulário  EstadoWagner Silva # Web 2.0 com Ajax Aula 03
  • 18. Aplicação de Filtros  Índice ou Posição  :first  :last  :evenWagner 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)  :parentWagner Silva # Web 2.0 com Ajax Aula 03
  • 21. Aplicação de Filtros  Visibilidade  :hidden  :visibleWagner 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-childWagner Silva # Web 2.0 com Ajax Aula 03
  • 25. Aplicação de Filtros  Itens de Formulário  :input  :text  :password  :radioWagner Silva # Web 2.0 com Ajax Aula 03
  • 26. Aplicação de Filtros  Itens de Formulário  :checkbox  :submit  :fileWagner Silva # Web 2.0 com Ajax Aula 03
  • 27. Aplicação de Filtros  Estado  :enabled  :disabled  :checked  :selectedWagner 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 imagemWagner 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 buscaWagner 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

×