Índice
Esses elementos ou seletores podem ser manipulados com Jquery e css para criar efeitos e obter conteúdo, ocultá-lo ou adicioná-lo e aplicar algum efeito a ele, facilitando o trabalho dos programadores. Alguns seletores são mais conhecidos pelo código css, por exemplo:IDENTIFICADORES
Eles são elementos da mais alta hierarquia e definem parâmetros gerais para os elementos de um bloco. Eles são definidos como #id e geralmente são aplicados a listas ou blocos.
Este é o seletor de id de parágrafo
Parágrafo sem seletor
AULAS
Eles são elementos de hierarquia inferior e são usados para elementos individuais ou para definir classes dentro de uma identidade, como:
Este é o seletor de id de parágrafo
Parágrafo azul com p
Parágrafo azul com divParágrafo vermelho com div
Enquanto a classe independente .parrafoazul pode aplicar o elemento p que não depende de ninguém, podemos até aplicá-lo a outros elementos como div, mas se tentarmos aplicar a classe parraforojo independentemente do identificador #paragraph veremos que sim não funciona uma vez que não cumpre a hierarquia que impõe o seu identificador #parágrafo.
Existem muitos seletores que podemos usar aqui, veremos alguns
Seletor par (par) e ímpar (ímpar)
Este seletor é aplicado a uma matriz de elementos que usam a mesma classe e pode afetar elementos pares ou ímpares, por exemplo, colorimos o fundo de uma lista de parágrafos.
PARÁGRAFO
O usuário 1 deixou uma mensagem
O usuário 2 deixou uma mensagem
O usuário 3 deixou uma mensagem
O usuário 4 deixou uma mensagem
UL LIST
- O usuário 1 deixou uma mensagem
- O usuário 2 deixou uma mensagem
- O usuário 3 deixou uma mensagem
- O usuário 4 deixou uma mensagem
SELETOR PRIMEIRO (Primeiro) E ÚLTIMO (Último)
Esses seletores nos permitem manipular o primeiro e o último elemento de uma determinada lista, por exemplo, definimos a lista em cinza, o primeiro elemento em verde e o último elemento em azul.
UL LIST
- O usuário 1 deixou uma mensagem
- O usuário 2 deixou uma mensagem
- O usuário 3 deixou uma mensagem
- O usuário 4 deixou uma mensagem
SELETOR DE FOCO
O foco em um elemento é ativado quando você clica em um elemento e desativado quando você clica em outra área da web ou em outro elemento. Veremos um exemplo com um formulário de login, criamos a classe .focologin e a aplicamos no identificador do formulário #login para afetar todos os elementos que ele contém. Também podemos aplicá-lo a uma camada ou bloco div e colocar o formulário dentro do bloco.
FORMATO
Senha do usuário:
Atribuir ou alterar um estilo css para um elemento com AddClass
Se quisermos atribuir um estilo css dinamicamente ou mudar de acordo com alguma condição estabelecida, usaremos AddClass. Neste caso, temos um botão class .green e ao tipo de entrada text atribuímos a classe .box do Jquery. A entrada do tipo de senha não é afetada e o botão de envio também não é afetado, uma vez que não atribuímos nenhuma classe css a eles.
FORMULÁRIO DE REGISTRO
Nome:
Endereço:
Telefone:
E-mail:
Este seletor permite identificar um elemento de um array de elementos de acordo com a posição em que se encontra uma célula da tabela, por exemplo, devemos ter em mente que os elementos são listados como os índices de uma matriz começando com 0,1,2, etc. .
| Título A | Título B | Título C |
|---|---|---|
| Célula 0 | Célula 1 | Célula 2 |
| Célula 3 | Célula 4 | Célula 5 |
Continuando com as tabelas e a aplicação dos seletores, veremos como criar um desenho de fundo de forma alternada nas cores das linhas de uma tabela, semelhante ao que era aplicado anteriormente com parágrafos e listas. Não adicionamos tanto css ou design para que o efeito seja melhor apreciado basicamente.
SELECTOR enésimo filho
Continuando com o exemplo anterior, podemos usar o seletor n-ésimo filho como complemento, semelhante ao seletor eq, mas a diferença é que com o n-ésimo filho, as posições podem ser indicadas na forma de uma operação aritmética. É usado para selecionar um ou mais elementos, mas com a condição de que seja o enésimo filho de seu pai. Este seletor é útil para selecionar o segundo parágrafo de um bloco ou o terceiro item de uma lista, etc. Os elementos não são considerados como uma matriz, mas em ordem primeiro, segundo, etc.
Por exemplo, se no script anterior adicionarmos
As colunas ímpares serão selecionadas neste caso
- Odd Columns enésimo filho (2n + 1)
- Colunas emparelhadas enésimo filho (2n)
- Primeira e quarta coluna enésimo filho (3n + 1)
