JQuery - Seletores

Seletores

Se você conhece bem os seletores da CSS poderá utilizar os mesmos critérios para o JQuery. Contudo dentro do JQuery alguns detalhes devem ser observados.

Seletores JQuery - Selecionando elementos

Notas :
1-Neste exemplo ao alterar algumas tags outras de mesma classe podem ser afetadas.
Por exemplo, gostaria de afetar uma tag input type text mas não uma tag input type button.
Caso isto ocorra por favor de F5 e recarregue a página.

Importante : No caso de erro ou seletor não encontrado o JQuery não dá erro apenas não faz nada.

O JQuery funciona conjuntamente com o DOM, JavaScript e CSS portanto para selecionar um elemento ele usa a mesma filosofia.

Selecionando todos os elementos de um tipo pela sua tag.

Por exemplo: $(h1) Selecionaremos todas as tags h1 do DOM.

Selecionando elementos específicos - Pela sua classe.

O PONTO determina uma classe.
Por exemplo: $(.classe1) Selecionaremos todas as tags com a classe1 do DOM.

selecionando um único elemento pela seu id.

O Jogo da velha determina um id.
Por exemplo: $(#idx) Selecionaremos a tag com o idx do DOM.

Importante: Através do JQuery temos acesso a grande parte dos atributos das tags do DOM.
Portanto, ao selecionar o id de uma imagem posso alterar o atributo src, ou o background, por exemplo.
Sendo assim, muitas vezes depois de selecionar um objeto a ser alterado muitas vezes teremos que definir qual o atributo desse objeto queremo alterar.

Exemplo de seleção pela tag div

div sem classe.

Exemplo de seleção pela classe

div com classe1

Menu 1 - Item 1
Menu 1 - Item 2
Menu 1 - Item 3

Exemplo de seleção pelo id da tag

Importante : Ao alterar o elemento pai os elementos filhos são afetados.

li da ul com id Menu 2 - Item 1
li da ul com id Menu 2 - Item 2
li da ul com id Menu 2 - Item 3

Encadeamento de seletores

Nos exemplos acima estão alguns exemplo de seletores do JQuery.
Outro recurso importante e o encadeamento de seletores, ou seja, podemos ligar os seletores para que seja mais específico.
Por exemplo, podemos definir o seletor $('.classe1') mas se quisermos afetar apenas os elementos da classe1 dentro de uma tag podemos adicionar a tag ao seletor:
$('div.classe1')

Exemplo 1 - Seletor de tag + Seletor de classe:

Sintaxe: $('tag.classe')

Neste caso todos elementos que tiverem a classe dentro dessa tag serão afetadas.

Exemplo 2 - Seletor de classe + Seletor de classe:

Sintaxe: $('.classe1 .classe2')

Neste caso todos elementos que tiverem a classe2 dentro da classe1 serão afetadas.

Exemplo 3 - Selecionar apenas o primeiro elemento de um Seletor de classe:

Sintaxe: $('.classe1:first')

Neste caso apenas o primeiro elemento é afetado.

Exemplo 4 - Selecionar apenas o último elemento de um Seletor de classe:

Sintaxe: $('.classe1:last')

Neste caso apenas o último elemento é afetado.

Exemplo 5 - Selecionar os elementos pares do Seletor de classe:

Sintaxe: $('.classe1:even')

Neste caso todos os elementos pares serão afetados (0 a n).

Exemplo 6 - Selecionar os elementos impares do Seletor de classe:

Sintaxe: $('.classe1:odd')

Neste caso todos os elementos impares serão afetados (1 a n).