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.
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