O documento apresenta uma aula sobre seletores e filtros no jQuery. As principais informações apresentadas são: 1) Os conceitos de seletores e filtros no jQuery para selecionar e manipular elementos HTML; 2) Os diferentes tipos de seletores como tags, identificadores, classes e hierarquia; 3) Os diferentes tipos de filtros como índice, conteúdo, atributos e estado para refinar seleções; 4) Exemplos de como aplicar seletores e filtros.

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