Web 2.0 com Ajax: JQuery/PHP (Aula 03)
-
Upload
wagner-silva -
Category
Documents
-
view
407 -
download
1
description
Transcript of 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
Wagner Silva # Web 2.0 com Ajax Aula 03
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
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
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
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
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
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
Hierarquia de Seletores Ordem decrescente
Tipos:
Descendente
Filho
Seguinte
Irmãos
Wagner Silva # Web 2.0 com Ajax Aula 03
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
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
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
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
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
Aplicação de Filtros Filtrar seleção
Tipos:
Índice ou Posição
Conteúdo
Visibilidade
Wagner Silva # Web 2.0 com Ajax Aula 03
Aplicação de Filtros Tipos:
Atributos
Afiliação
Itens de Formulário
Estado
Wagner Silva # Web 2.0 com Ajax Aula 03
Aplicação de Filtros Índice ou Posição
:first
:last
:even
Wagner Silva # Web 2.0 com Ajax Aula 03
Aplicação de Filtros Índice ou Posição
:odd
:eq(indice)
:gt(indice)
:lt(indice)
Wagner Silva # Web 2.0 com Ajax Aula 03
Aplicação de Filtros Conteúdo
:contains(‘texto’)
:empty
:has(seletor)
:parent
Wagner Silva # Web 2.0 com Ajax Aula 03
Aplicação de Filtros Visibilidade
:hidden
:visible
Wagner Silva # Web 2.0 com Ajax Aula 03
Aplicação de Filtros Atributos
[atributo]
[atributo=valor]
[atributo!=valor]
Wagner Silva # Web 2.0 com Ajax Aula 03
Aplicação de Filtros Atributos
[atributo^=valor]
[atributo$=valor]
[atributo*=valor]
Wagner Silva # Web 2.0 com Ajax Aula 03
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
Aplicação de Filtros Itens de Formulário
:input
:text
:password
:radio
Wagner Silva # Web 2.0 com Ajax Aula 03
Aplicação de Filtros Itens de Formulário
:checkbox
:submit
:file
Wagner Silva # Web 2.0 com Ajax Aula 03
Aplicação de Filtros Estado
:enabled
:disabled
:checked
:selected
Wagner Silva # Web 2.0 com Ajax Aula 03
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
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
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
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