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

Aula 03

Wagner Silva

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

Seletores e Filtros Poderoso motor de seleção

Simplifica o agrupamento

Seleção -> Manipulação

Vetor de elementos (Array)

Conceitos do HTML DOM


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.


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: $(“*”)


Seletores: Tags Todas as tags

Padrão: $(“tag”)

Exemplo:

$(“div”): seleciona todas as divs

$(“img”): seleciona todas as imagens


Seletores: Identificadores Similar ao CSS

$(“#id”)

Exemplo:

$(“p#tituloNoticia”): Seleciona o parágrafo com id “tituloNoticia”

$(“#linkPatrocinado”): Seleciona o elemento com id “linkPatrocinado”


Seletores: Classes Similar ao CSS

$(“.classe”)

Exemplo:

$(“.obrigatorio”): Seleciona os elementos com classe“obrigatorio”

$(“img.linkExterno”): Seleciona as imagens com classe“linkExterno”


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”


Hierarquia de Seletores Ordem decrescente

Tipos:

Descendente

Filho

Seguinte

Irmãos


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”


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.


Hierarquia de Seletores Seguinte

$(“Anterior + Elemento”)

Exemplo:

$(“div + div”): Seleciona todas as divs que possuem como elementos anterior uma div.


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.


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”


Aplicação de Filtros Filtrar seleção

Tipos:

Índice ou Posição

Conteúdo

Visibilidade


Aplicação de Filtros Tipos:

Atributos

Afiliação

Itens de Formulário

Estado


Aplicação de Filtros Índice ou Posição

:first

:last

:even


Aplicação de Filtros Índice ou Posição

:odd

:eq(indice)

:gt(indice)

:lt(indice)


Aplicação de Filtros Conteúdo

:contains(‘texto’)

:empty

:has(seletor)

:parent


Aplicação de Filtros Visibilidade

:hidden

:visible


Aplicação de Filtros Atributos

[atributo]

[atributo=valor]

[atributo!=valor]


Aplicação de Filtros Atributos

[atributo^=valor]

[atributo$=valor]

[atributo*=valor]


Aplicação de Filtros Afiliação

:nth-child({indice,odd,even})

:first-child

:last-child

:only-child


Aplicação de Filtros Itens de Formulário

:input

:text

:password

:radio


Aplicação de Filtros Itens de Formulário

:checkbox

:submit

:file


Aplicação de Filtros Estado

:enabled

:disabled

:checked

:selected


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”


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


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


Web 2.0 com Ajax # Aula 03 Próxima Aula:

Manipulação de Códigos e Eventos

E-mail: [email protected]

Twitter: twitter.com/web2softeam

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

Documents

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