Seletores jQuery - Parte 1

O jQuery é uma biblioteca javascript cujos os seletores são baseados em CSS, incluindo CSS3, com a grande vantagem de ser cross-browser (funciona em todos os principais navegadores). Assim sendo, conhecer os principais seletores CSS ajudará bastante no processo de aprendizado do jQuery.

Primeiramente o que seria um Seletor? Seletor, como o próprio nome lembra, é usado para selecionar os elementos que receberam os efeitos passados no script. Para entendermos melhor os seletores, vamos ver algumas classificações dos seletores perante outros, e seus significados.

Elemento Pai

É o elemento ascendente direto, ou seja, um elemento é pai dos elementos que ele, diretamente, envolve.

Elemento Ancestral

É o elemento que envolve os outros elementos, direta ou indiretamente.

Elemento Filho

É o elemento descendente direto de seu pai, ou seja, dizemos que um elemento é filho do elemento que o envolve.

Elemento Descendente

É o elemento que é envolvido pelos outros elementos, direta ou indiretamente.

Elemento Irmão

São elementos filhos do mesmo pai, ou seja, são elementos que estão sendo envolvidos pelo mesmo elemento pai.

Elemento Adjacente

É o elemento que sucede o outro, ou seja, o elemento que está diretamente após o outro elemento.

Elemento Irmão Adjacente

São todos os elementos irmãos que sucedem o elemento anterior, ou seja, todos os elementos filhos do mesmo pai, e que sucedem o elemento em questão.

Selecionando com jQuery

Agora que você já conhece as classificações do seletores, vamos ver como selecionar os elementos com jQuery.

Importante: Todos os exemplos abaixo são demonstrações de como o seletor trabalha independentemente dos elementos, classes ou ID´s utilizados em seu script.

Seletores Simples

$(‘.classe’) - Seleciona todos os elementos que possuírem a classe definida no seletor;

$(‘#ID’) - Seleciona o elemento que possuir o ID definido no seletor;

$(‘elemento’) - Seleciona todos os elementos definidos no seletor;

$(‘elemento, .classe, #ID’) - Cada item separado por virgula é um seletor diferente, assim seram selecionados todos os elementos definidos no 1º seletor; todas os elementos que possuirem a classe definida no 2º seletor; e o elemento que possuir o ID definido no último seletor.

Seletores compostos

Seletores constituídos da combinação de 2 ou mais seletores simples.

$(‘div p strong’) - Seleciona o elemento descendente do ancestral informado no seletor, no caso será buscado os elementos <strong> que tenham como ancestral o elemento <p>, que por sua vez tenha como ancestral o elemento <div>.

$(‘ul.menu > li’) - Seleciona os elementos filhos do elemento pai informado no seletor, no caso seram selecionados os elementos <li> filhos do elemento <ul class=”menu”>, assim no caso de uma nova <ul> filha do elemento <li>, como em uma menu dropdown, os elementos <li> somente seriam selecionados no caso da <ul> possuir a classe menu.

$(‘a + a’) - Seleciona o imediatamente seguinte ao informado no seletor, no caso seriam selecionados todos os elementos <a>, que estejam imediatamente após outro elemento <a>

$(li ~ li) - Seleciona todos os seus irmãos adjacentes informados no seletor, no caso seriam selecionados os irmãos de elementos <li>, que estejam imaediatamente após outro elemento <li>.

Seletores de Filtro

Seletores que filtram condições específicas de um seletor simples ou composto.

$(‘ul li:first’) - Seleciona a primeira ocorrência do elemento especificado no seletor dentro de um grupo de elementos.

$(‘ul li:last’) - Seleciona a última ocorrência do elemento especificado no seletor dentro de um grupo de elementos.

$(‘div:not(.content)’) - seleciona os elementos especificados no seletor excluindo os elementos que seriam selecionados pelo segundo seletor, no caso seriam selecionados todas as div´s excluindo as que possuirem a classe content.

$(‘ul li:even’) - seleciona os elementos de índice par dentro de um grupo de elementos, no caso seriam selecionados os elementos <li> de indice par, lembrando que os indices começam em zero.

$(‘ul li:odd’) - seleciona os elementos de índice ímpar dentro de um grupo de elementos, no caso seriam selecionados os elementos <li> de indice ímpar, lembrando que os indices começam em zero.

$(‘ul li:eq(indice)’) - seleciona os elementos informado no indice dentro de um grupo de elementos. Indice é obrigatoriamente um número, que pode ser informado também por uma expressão que retorne um numero inteiro partindo de 0.

$(‘ul li:gt(indice)’) - seleciona os elementos com indice maior que o indice informado no seletor dentro de um grupo de elementos.

$(‘ul li:lt(indice)’) - seleciona os elementos com indice menor que o indice informado no seletor dentro de um grupo de elementos.

$(:header) - seleciona as ocorrências de cabeçalho de H1 à H6.

$(:animated) - seleciona os elementos que tenham um script de animação atrelado a ele.

Seletores de Conteúdo

$(‘p:contains(texto)’) - seleciona os elementos informados no seletor que possuem a string definida no campo texto, no caso seriam selecionados todos os elementos <p> que tenham a string texto em seu conteudo.

$(‘p:empty’) - seleciona os elementos informados no seletor que estejam vazios, no caso seriam selecionados todos os elementos <p> que não possuem conteudo.

$(‘p:has(strong)’) - seleciona os elementos que contenham pelo menos uma ocorrência do elemento informado entre parenteses no seletor, no caso seriam selecionados os elementos <p> que contenham, pelo menos, uma ocorrência do elemento <strong>.

$(‘p:parent’) - seleciona os elementos informados no seletor que sejam elementos pai, ou seja, elementos que possuam elementos filho, no caso seriam selecionados os elementos <p> que possuem ao menos um elemento filho.

No próximo artigo veremos os seletores de visibilidade, de atributo e de filtros para elementos filho. Um abraço e até a próxima.

voltar