Seletores jQuery – Parte I

Nesse artigo vamos ver os tipos de seletores (classe, id e tag’s HTML), assim como tirar proveito da combinação deles. Saber perfeitamente como funciona a combinação de seletores, torna o trabalho do desenvolvedor muito mais fácil.
Nessa categoria do blog o foco é a biblioteca jQuery. Eu parto da premissa que você já tem um conhecimento, mesmo que básico, de CSS e HTML.

Para todos os exemplos será utilizado o mesmo código JavaScript, variando apenas o código para acessar o elemento. Código que se encontra na linha 5. Abaixo veja o código completo.
Para disparar a ação usamos um botão.

<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
	$(function(){
    		$('button').click(function () {
			/*linha dos exemplos*/
			});
		});
</script>

Seletor simples:

Acessa um elemento através do valor passado para o atributo id, class ou o próprio elemento da (X)HTML.
Exemplo:

$("#div_dois").css('background', 'red');

HTML

	<button type="button">Alterar cor</button>
	<div id="div_um">Conteúdo da div um</div>
	<div id="div_dois">Conteúdo da div dois</div>

Ao clicar no botão mudará a cor de fundo de todas divs que estiverem com o valor igual a div_dois no atributo id.

Para seletores do tipo classe a idéia é a mesma. Ao invés de usar # (sustenido) usaríamos . (ponto).

$(".div_dois").css('background', 'red');

Para selecionarmos um elemento do HTML usamos:

$("div").css('background', 'red');

No exemplo acima todas as divs do documento serão afetadas, mesmo que tenham classes e ids atribuídas. O mesmo ocorre com outros elementos HTML.

Agrupando seletores

Se para vários seletores temos a mesma estilização, uma alternativa é fazer o agrupamento deles.
Exemplo:

$('p, #div_um, .div_dois').css('background', 'gold');

HTML

         	<button type="button">Altera cor</button>
		<div id="div_um">Conteúdo da div_um</div>
		<p>Texto de um parágrafo</p>
		<div class="div_dois">DIV com classe div_dois</div>
		<p class="diferente"> Parágrafo com classe igual a diferente</p>

Seletores compostos:

Temos um seletor composto quando usamos a combinação de dois um ou mais seletores simples. Para os seletores compostos temos três sinais de combinação. Veja um exemplo de cada:

Seletor ancestral descendente

$(div span').css('background', 'gold');

HTML

       <button type="button">Altera cor</button>
	<div>
	<p><span>jQuery</span> é uma <span>biblioteca</span> JavaScript</p>
	</div>
	<p>Seletores são <span>importantes</span></p>

Nesse caso apenas as palavras jQuery e biblioteca foram alvo, pois ambas estão marcadas com span e são descendentes da div. A palavra importantes, também marcada com span, não foi alvo porque é descendente de parágrafo e não de div.

Seletor pai filho

O elemento alvo é o filho do pai especificado no seletor.

$('div > span').css('background', 'red');

HTML

	<button type="button">Altera cor</button>
	<div>
	<p>A palavra <span>jQuery</span> e a palavra <span>css</span> foram alvos do seletor</p>
	</div>
	<p>A palavra <span>design</span> não será alvo do seletor</p>

Nesse exemplo nada acontecerá. Por quê? Simples, nenhum elemento span é filho de div e sim descendente.
Alteramos o código para:

       <button type="button">Altera cor</button>
	<div>
	A palavra <span>jQuery</span> e a palavra <span>css</span> foram alvos do seletor
	</div>
	<p>A palavra <span>design</span> não será alvo do seletor</p>

Veja que agora temos dois elementos span filho da div. Esses dois elementos serão alvo do seletor.

Seletor anterior próximo

Acessa apenas o próximo elemento que se segue do elemento declarado como anterior.

$('h2 + p').css('background', 'red');

HTML

	<button type="button">Vermelha</button>
        <div>
          <h2>Título</h2>
          <p>jQuery é uma excelente biblioteca</p>
          <p>Estou aprendendo muito com jQuery</p>
        </div>

Nesse exemplo apenas o primeiro parágrafo será alvo. Quando declaramos h2 + p estamos dizendo: Ache todos parágrafos que vier imediatamente após h2.
Nesse artigo tive a intenção de mostrar algumas formas de seletores, que se bem explorados nos livrão de fazer marcações adicionais em nosso (X)HTML, deixando o código mais claro e limpo. Em breve seletores jQuery parte II.
Abraço a todos.