JQuery Selectors

Uma dos recursos mais utilizados para manipulação de uma página usando jquery é a aplicação de seletores, existem vários tipos e de diversas formas, nesse post vamos passar por alguns deles.

Seletores Hierárquicos

” ” Espaço em Branco: Usando o espaço em branco podemos selecionar todos os elementos descendentes do elemento principal, por exemplo, vamos setar para a cor verde todos as lis filhas da div “teste”:
[code language=”javascript”]
$(‘#teste li’).css(‘color’, ‘green’);
[/code]

“>”: Usamos esse seletor para encontrar um elemento filho, por exemplo, para setar a cor verde nos spams filhos de de cada “li”:
[code language=”javascript”]
$(‘li > spam’).css(‘color’, ‘green’);
[/code]

“+”: Usamos esse seletor para selecionar o próximo irmão do elemento selecionado,
no exemplo setamos como verde a cor do texto do elemento li que é irmão do #item.
[code language=”javascript”]
$(‘#item li’).css(‘color’, ‘green’);
[/code]
OBS: Note que esse seletor seleciona apenas 1 irmão mesmo que ele tenha vários, para selecionar todos os irmão nos usamos o seletor “~”.

“~”: Funciona da mesma forma do seletor “+”, com diferença que ele seleciona todos os irmãos do elemento informado.

Seletores de Ordem

“elemento:first”: Seleciona o primeiro elemento, no exemplo pintamos a primeira “tr” dentro da tabela:
[code language=”javascript”]
$(‘table tbody tr:first’).css(‘background-color’, ‘green’);
[/code]

“elemento:last”: Seleciona o último elemento.

“elemento:not[‘elemento negado’]”: Faz a negação de um elemento, selecionando todos os outros. No exemplo pintamos de verde todas as linhas da tabela com exceção da primeira:
[code language=”javascript”]
$(‘tbody tr:not(tbody tr:first)’).css(‘background-color’, ‘green’);
[/code]

“elemento:even/odd”: Seleciona os elementos pares ou ímpares da lista, no exemplo pintamos de verde apenas as linhas pares da tabela:
[code language=”javascript”]
$(‘table tbody tr:even’).css(‘background-color’, ‘green’);
[/code]

“element:eq(index)”: Seleciona uma linha específica, no exemplo pintamos de verde a terceira linha da tabela, note que setamos o valor 2 pq a contagem é iniciada a partir do valor 0:
[code language=”javascript”]
$(‘table tbody tr:eq(2)’).css(‘background-color’, ‘green’);
[/code]

“element:gt(index)”: (greater than) Seleciona as linhas com index maior que o valor informado.

“element:lt(index)”: (less than) Seleciona as linhas com o index menor que o valor informado.

Seletores de Conteúdo

“elemento:contains(‘texto’)”: Seleciona os elementos que tem o conteúdo igual ao texto informado, no exemplo pintamos de verde todas as linhas da tabela que tem o nome “cidade”:
[code language=”javascript”]
$(‘tbody tr:contains("cidade")’).css(‘background-color’, ‘green’);
[/code]

“elemento:empty”: Seleciona os elementos que tem seu conteúdo vazio.

“elemento:has(‘tag’)”: Seleciona os elementos que contém a tag informada dentro do seu conteúdo, no exemplo pintamos de verde todas as TDs que tem um

dentro do seu conteúdo:
[code language=”javascript”]
$(‘tbody td:has("p")’).css(‘background-color’, ‘green’);
[/code]

Seletores de Atributo

“elemento[nome_atributo]”: Seleciona todos os elementos que possuem o atributo informado, no exemplo setamos o texto para a cor verde em todos os links que possuem o atributo title:
[code language=”javascript”]
$(‘a["title"]’).css(‘color’, ‘green’);
[/code]

“elemento[nome_atributo=’texto’]”: Retorna o elemento que o atributo selecionado contem o valor exato do texto informado.

Existem vários tipos de seletores de atributo diferentes que você pode verificar na documentação do jquery:
http://api.jquery.com/category/selectors/attribute-selectors/

Nessa documentação podemos encontrar também vários outros seletores de outros tipos.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *