3 Seletores

No capítulo anterior vimos formas de selecionar elementos do DOM usando classe, id e por tipo de tag. Entretanto, o jQuery fornece uma variedade muito maior de seletores de elementos e conhecê-los é essencial para tirar todo o proveito do jQuery. No jQuery existem muitas formas diferentes de selecionar um ou vários elementos e este poderoso recurso é uma das principais vantagens do jQuery. A maioria dos seletores do jQuery usa uma sintaxe semelhante àquela usada no CSS, o que facilita sua compreensão para aqueles que já são familiarizados com o CSS.

3.1 Seletores básicos

Os seletores básicos do jQuery são aqueles mais comumente utilizados. Para os exemplos a seguir, considere o seguinte código HTML:

<div id="site">

<h1>Principais manchetes do dia</h1>

<p class="destaque">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis aute

irure dolor in reprehenderit <span>in voluptate velit</span> esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.

</p>

<h2 class="titulo">Escolha sua opção</h2> <ul id="menu">

<li><a href="faq.pdf">FAQ</a></li>

<li><a href="mapa.jpg">Ver mapa</a></li>

<li><a href="mundo.jpg">Mapa mundo</a></li>

</ul>

<h3 class="titulo">Mais conteúdos</h3> <span>Acesse:

<a href="http://www.loremdotcolor.com">aqui</a>

</span>

</div>

1 Seleciona por ID

Seleciona o elemento cujo id é "menu". O sinal de # é usado para indicar que se trata de um id.

$("#menu")

A aplicação do seletor acima retorna o elemento <ul>:

<ul id="menu">

<li><a href="faq.pdf">FAQ</a></li>

<li><a href="mapa.jpg">Ver mapa</a></li>

<li><a href="mundo.jpg">Mapa mundo</a></li>

</ul>

2 Seleciona por classe

Seleciona todos os elementos que possuem uma determinada classe. O uso do ponto como primeiro caractere caracteriza que estamos selecionando elementos pela classe. No exemplo abaixo, estamos selecionando todos os elementos que possuem a classe título associada:

$(".titulo")

O resultado do seletor por classe serão os dois elementos abaixo:

<h2 class="titulo">Escolha sua opção</h2>

<h3 class="titulo">Mais conteúdos</h3>

3 Seleciona por nome da tag

Seleciona todos os elementos da página que sejam uma span:

$("span")

Esse seletor retornará dois elementos span de acordo com o código exemplo:

<span>in voluptate velit</span>

<span>Acesse:

<a href="http://www.loremdotcolor.com">aqui</a>

</span>

4 Seleciona por classe e tag

Seleciona apenas os parágrafos cuja classe é destaque:

$("p.destaque")

O resultado será:

<p class="destaque">

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Duis aute

irure dolor in reprehenderit <span>in voluptate velit</span> esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat.

</p>

5 Seleciona múltiplos elementos

Seleciona de uma só vez todas as tags do tipo h1, h2 e h3:

$("h1, h2, h3")