Seletores jQuery – parte III

Nessa terceira matéria vamos ver os Seletores de conteúdo.
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>

Seletores de conteúdo

Seletor contains

Esse seletor é exclusivo da biblioteca jQuery. Acessa o texto definido no parâmetro.

$('div:contains(jQuery)').css('text-decoration', 'underline');

HTML

<button type="button">Alterar</button>
    <div><p>Biblioteca jQuery</p></div>
    <div><p>div é elemento de bloco</p></div>
    <div>Biblioteca jQuery é ótima</div>

Ao disparar o evento o seletor acessa todos elementos div e procura o nome jQuery. No exemplo será afetada a primeira linha, mesmo estando dentro do elemento p, pois é descendente do elemento dv.
A terceira linha será afetada também.

Seletor empty

Acessa todos elementos que não tenham conteúdos.

$('td:empty').text('Estava vazia') .css('background', 'red');

HTML

<button type="button">Vermelha</button>
	  <table border="1">
    <tr>
    	<td>Com conteúdo</td><td></td>
    </tr>
    <tr>
    	<td>Com conteúdo</td><td></td>
    </tr>
    <tr>
	<td></td><td>Com conteúdo</td>
    </tr>
  </table>

No exemplo acima o seletor procura as células vazias e escreve o texto “Estava vazia”.

Seletor parent

Seletor exclusivo da biblioteca. Acessa todas as ocorrências de elementos que sejam elementos pais de outros elementos e até texto.

$('p:parent').css('background', 'red');

HTML

<button type="button">Vermelha</button>
	<p>Texto do primeiro parágrafo</p>
	<p></p>
	<p>Texto do <b>Terceiro</b>parágrafo</p>

Nesse caso será alvo o primeiro e o terceiro parágrafo. O Segundo não será alvo pois não tem conteúdo.

Seletor has

Exclusivo da biblioteca. Acessa elementos que contenham pelo menos um elemento que coincide com o especificado no seletor.

$(‘div:has(p)’).css('background','yellow');

HTML

<div><p>Olá! Aqui é um parágrafo</p></div>
  <div>Olá! Aqui é outro parágrafo</div>

A div que contem o elemento p é afetada, já que possui ao menos um elemento p dentro da div.