jQuery – Início, Meio e Fim – Parte 7

Fabrício Sanchez

14/04/2011

No artigo anterior a este, o sexto da série “jQuery – Início, Meio e Fim”, foi introduzido o conceito de filtros com jQuery e foram apresentados os filtros básicos disponíveis na biblioteca. Se você não realizou a leitura do artigo anterior, antes de prosseguir com este, recomendo fortemente a faça clicando aqui, pois as ideias lá apresentadas estão atreladas ao conteúdo deste.

Se você está conhecendo esta série de artigos a partir daqui, recomendo que adie temporariamente a leitura deste post e inicie a leitura da série, desde o primeiro artigo até este, pois, desde o primeiro artigo, há uma linha geral bem definida estabelecida na tentativa de cobrir todos os principais tópicos sobre jQuery. Caso deseje efetuar a leitura da série de forma completa, clique aqui.

Neste artigo falaremos mais sobre filtros, mas agora, daremos um foco todo especial para o filtros de conteúdo (também conhecidos por alguns como “filtros compostos”). Com este artigo, pretendemos cobrir todo conteúdo relacionado aos filtros jQuery.

Seletores de Conteúdo

Como o próprio nome sugere, chamamos de “seletores de conteúdo” aqueles que, através da composição de filtros com outros seletores permitem encontrar conteúdos específicos no universo de elementos HTML retornados. A seguir, veremos os principais filtros com esta característica.

1. Seletor:empty

O primeiro filtro do qual falaremos é “empty“. Um dos fatores que contribuiu muito fortemente para a adoção do jQuery nas aplicações web é sua legibilidade. As diretivas, comandos e funções são expressívas/legíveis, isto é, ao utilizar um filtro, por exemplo, épossível inferir sua funcionalidade no contexto da aplicação sem maiores explicações. Isso ocorre com o filtro empty. Como é possível imaginar, este filtro possui a função de selecionar todos os elementos cujo conteúdo seja vazio e, com base nisso, aplicar o comportamento desejado. A Listagem 1 apresenta o conceito mencionado em ação.

[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>

Listagem 1: Removendo div’s cujo conteúdo é vazio

O código apresentado pela Listagem 1 é simples, mas ilustra bem a utilização do filtro empty. Note que possuímos quatro divs, sendo que destas, apenas duas possuem conteúdo. Assim, ao dispararmos o evento click do botão “btnLimpar” (linha 12), a função remove() impõe seu comportamento sobre todas as divs cujo conteúdo é vazio (linha 13). O grande responsável por esta seleção é o filtro empty associado ao seletor em questão. O resultado da aplicação do filtro pode ser visualizado na Figura 1.

Figura 1: Removendo divs via jQuery

2. seletor:parent

Outra opção interessante em relação aos seletores de conteúdo é a de selecionar elementos que sejam de alguma forma “pai” de outro(s) elemento(s). Novamente, para a correta utillização do recurso, é preciso ter claro em sua mente o conceito de “árvore de documento, visto em detalhes no segundo artigo da série. Para que esta ideia fique mais clara, observe o código apresentado pela Listagem 2.

[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>

</head>
<body>
<table>
<tr>
<td>
Texto 1
</td>
</tr>
<tr>
<td>
Texto 2
</td>
</tr>
</table>
<p>
<input type=”button” id=”btnEstilo” value=”Estilizar pais” />
</p>
</body>
</html>
[/html]

Listagem 2: Selecionando elementos pais da página via jQuery

A operação aqui é simples. Quando o evento click do botão “btnEstilo” é disparado todas as linhas da tabela (elas possuem um filho cada, ou seja, as colunas são filhas das linhas) são coloridas em vermelho, indicando que a seleção ocorreu com sucesso. Esta operação ocorre nas linhas 8 e 9 da Listagem 2. O resultado do comportamento aplicado pode ser visualizado na Figura 2.

Figura 2: Selecionando conteúdo com base no elemento pai

3. seletor:contains

Deseja selecionar elemento que possuam determinada sentença de texto? O filtro disponível para realizar esta tarefa é “contains“. Como o próprio nome sugere, ao indicar determinada sentença de texto ao seletor associado com o filtro, a estrutura estará sujeita ao comportamento que se deseja aplicar. Vejamos o exemplo apresentado pela Listagem 3.

[html]
<head>
<title></title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>

</p>
<input type=”button” id=”btnMarcador” value=”Marcar porção de texto” />
</p>
</body>
</html>
[/html]

Listagem 3: Selecionando o parágrafo que contém o texto especificado

O código da Listagem 3 é simples e dispensa maiores comentários. Basta dizer que, o pressionar o botão “btnMarcador” o primeiro parágrafo é selecionado, pois no segundo, não temos a sentença de texto especificada pelo filtro. O resultado da operação pode ser visualizado na Figura 3.

Figura 3: Selecionando o parágrafo que contém a palavra “Pallentesque”

4. SeletorA:has(SeletorB)

“has” é um seletor de conteúdo que não está previsto na CSS 3, portanto, é de uso exclusivo da biblioteca. Seu funcionamento é extremamente simples, mas produz resultados plenamente satisfatórios. Com este tipo de filtro, conseguimos retornar o conjunto de elementos representados por “SeletorA” que contenham o elemento especificado por “SeletorB”. O exemplo apresentado pela Listagem 4 ilustra o filtro em pleno funcionamento.

[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>

</head>
<body>
<div>
Conteúdo div 1
</div>
<div>
Conteúdo <span style=”color:Green;”>div 2</span>
</div>
<div>
Conteúdo div 3
</div>
<input type=”button” value=”Selecionar” id=”btnSelecionar” />
</body>
</html>
[/html]

Listagem 4: Filtro “has” em funcionamento

A seguir, apresentamos a Figura 7, que traz a captura de tela do código apresentado pela Listagem 4. Como é possível perceber, ao usuário disparar o evento click de “btnSelecionar”, a div que contém a tag span em seu interior é submetida ao comportamento definido na linha 9.

Bom pessoal, por hoje é só. No próximo artigo falaremos um pouco mais sobre os filtros de visibilidade e, entenderemos quais as diferenças deles em relação aos demais filtros filtros vistos nos artigos 5, 6 e 7 desta série. Vai perder? Não se esqueça de nos deixar seu feedback através do comentário. Você não gastará mais que 30 segundos e ele fará toda diferença para o articulista.