Este é o sexto artigo da série “jQuery – Início, Meio e Fim”. Muitos aspectos importantes da biblioteca já foram vistos, tais como: seletores (simples e compostos), árvores de documentos, principais funções, precedência no carregamento de scripts, como evitar conflitos com outras bibliotecas, dentre outros. Portanto, se vocÊ está chegando agora na série, recomendo fortemente que efetue a leitura dos 5 primeiros artigos, pois um assunto, acaba puxando o outro. Você pode efetuar a leitura de todos os artigos da série aqui.
No artigo de hoje você será apresentado a um importante recurso disponível na biblioteca jQuery: os filtros. A biblioteca jQuery disponibiliza uma extensa lista de filtros, que, associados aos seletores CSS e seus próprios, oferecem possibilidades inúmeras aos desenvolvedores. Este artigo, será um pouco mais longo que os demais, pois pretendemos apresentar detalhadamente o funcionamento de cada filtro e como é possível utilizá-lo. Prontos?!
Filtros Básicos
Filtros básicos são aqueles que possuem a função de aplicar um comportamento a determinado(s) element0(s) com base no grupo de elementos retornados pelo seletor. São utilizados em parceria com seletores simples (ver o quinto artigo da série) ou com seletores compostos (ver quinto artigo da série). A seguir, veremos de forma detalhada cada um deles.
1. :first
Com base no seletor associado, este filtro seleciona a primeira ocorrência de elemento dentre o conjunto de elementos retornados, conforme apresenta o código apresentado pela Listagem 1.
[html]
jQuery – Filtros “first”
<script src=”jquery-1.4.1.js” type=”text/javascript”><!–mce:0–></script>
<script type=”text/javascript”><!–mce:1–></script>
Texto 1
Texto 2
Texto 3
<input id=”btnSelecionar” type=”button” value=”Selecionar” />
[/html]
Listagem 1: Aplicando o filtro “first”‘
Como é possível observar no código apresentado pela Listagem 1, o que ocorre é: ao pressionar-se o botão “btnSelecionar”, é disparado o evento “click” do jQuery adicionando o comportamento (adicionar borda via CSS) ao primeiro elemento retornado (isso somente é possível via filtro “first“) dentro do grupo de elementos (no caso do exemplo da Listagem 1, todos os parágrafos do documento). O resultado da operação proposta na Listagem 1 pode ser visualizado na Figura 1.
Figura 1: Aplicando o comportamento via filtro jQuery (first)
2. :last
Outro importante filtro e que tem ampla utilização é “last”. Como é possível imaginar, este filtro retorna a última ocorrência de elemento dentre o conjunt0 de elementos retornados pelo seletor. Para exemplificar seu funcionamento e utilização, utilizaremos o mesmo exemplo apresentado pela Listagem 1, entretanto, ao invés de selecionarmos o o primeiro elemento via “first“, selecionaremos o último elemento. A Listagem 2 apresenta apenas o trecho de chamada do script jQuery onde a operação mencionada ocorre.
[javascript]
…
<script type=”text/javascript”><!–mce:2–></script>
…
[/javascript]
Listagem 2: Script utilizando o filtro last
Como é possível notar, a utilização do filtro ocorre de forma análoga aquela apresentada no ítem 1 deste artigo. Temos no evento “click” do botão, via jQuery, o comportamento (adicionar borda via CSS) adicionado ao último parágrafo. A Figura 2 apresenta o resultado após a execução da página.
Figura 2: Utilizando o filtro “last“
3. SeletorA:not(seletorB)
Previsto no CSS 3, este é um tipo de filtro que, com base no acesso ao grupo de elementos retornado por “SeletorA”, acessa todos excluindo-se “SeletorB”. Confuso? Confira o exemplo apresentado pela Listagem 3.
[html]
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”><!–mce:3–></script>
<script type=”text/javascript”><!–mce:4–></script>
<table>
<tbody>
<tr>
<td>
Texto da célula 1</td>
<td>
Texto da célula 2</td>
<td>
Texto da célula 3</td>
</tr>
<input id=”Aplicar” type=”button” value=”Aplicar” /></tbody>
</table>
[/html]
Listagem 3: Utilizando o filtro not
O código apresentado pela Listagem 3 é simples. O que estamos fazendo aqui é, ao clicar no botão “Aplicar”, adicionar bordas em todas as células da tabela com excessão da última. Essa regra aplicada na linha 8, onde temos “td:not(td:last)“. É como se estivéssemos dizendo ao interpretador o seguinte: “Por favor, retorne todas as células da tabela, mas não retorne a última.” A Figura 3 apresenta o resultado da aplicação apresentada pela Listagem 3.
Figura 3: Aplicação em execução (filtro :not)
4. seletor:even
Outra opção de filtro disponível na biblioteca jQuery que não deverá fazer parte do CSS 3 e portanto, de uso exclusivo da biblioteca, é “even”. Este filtro permite selecionar todas as instâncias pares indexadas no conjunto de elementos retornados começando em 0. Assim são retornados elementos de índices 0, 2, 4, 6, …, n. A Listagem 4 apresenta apenas o trecho jQuery que utiliza o filtro “even” para a mesma estrutura HTML apresentada pela Listagem 3.
[javascript]
…
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(‘#Aplicar’).click(function () {
jQuery(‘td:even’).css(‘border’, ‘1px dotted #000’);
});
});
</script>
…
[/javascript]
Listagem 4: Utilizando o filtro even
O trecho de código apresentado pela Listagem 4 fala por sí só. Quando disparado o evento click do botão “Aplicar”, as bordas potilhadas de cor preta são adicionadas às células pares da tabela, conforme apresenta a Figura 4.
Figura 4: Aplicando o filtro “even“
5. seletor:odd
Se o filtro “even” seleciona as ocorrências pares no conjunto retornado, o filtro “odd” seleciona as ocorrências ímpares, assim, receberão o comportamento implementado, elementos indexados como: 1, 3, 5, 7, …, n. A Listagem 5 apresenta um exemplo utilizando o filtro “odd“. Vale salientar que este é outro dos filtros exclusivos da biblioteca jQuery, não estando presente na homologação do CSS 3.
[javascript]
…
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(‘#Aplicar’).click(function () {
jQuery(‘td:odd’).css(‘border’, ‘1px dotted #000’);
});
});
</script>
…
[/javascript]
Listagem 5: Aplicando o filtro “odd“
De forma análoga ao exemplo apresentado pela Listagem 4, o que estamos fazendo no exemplo da Listagem 5 é adicionar o comportamento aos elementos ímpares (em nosso exemplo, apenas a célula indexada com 1 receberá a borda pontilhada) com o clicar do botão “Aplicar”. A Figura 5 apresenta o exemplo em funcionamento.
Figura 5: Aplicando o filtro “odd” e selecionando apenas os elementos ímpares
6. seletor:eq(valor_índice)
O jQuery não fornece apenas filtros que retornam grupos de elementos. É possível também selecionar elementos isolados, com base no índice passado como parâmetro para o filtro. Uma opção interessante dentro da biblioteca jQuery é “eq” (de equal). Assim, basta apontar o seletor e parametrizar o filtro com o índice desejado dentro do grupo de elementos retornados, conforme apresenta a Listagem 6.
[javascript]
…
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(‘#Aplicar’).click(function () {
jQuery(‘td:eq(2)’).css(‘border’, ‘1px dotted #000’);
});
});
</script>
…
[/javascript]
Listagem 5: Aplicando comportamento ao elemento de índice 2
Novamente código fala mais alto. Note, ao disparar o evento click do botão “Alterar”, a última célula da tabela (índice 2) recebe o comportamento definido previamente. Assim, é possível aplicar comportamentos a elementos específicos em uma cadeia. A Figura 5 apresenta o exemplo da Listagem 5 em funcionamento.
Figura 6: Exemplo da Listagem 6 em funcionamento
7. seletor:gt(valor_índice)
Este tipo de seletor é amplamente utilizado em aplicações, pois permite isolar elementos com base em um limiar. Como assim? A linha “seletor:gt(valor_índice)” poderia ser substituída por: “jQuery, por favor, acesse todos os elementos seletor cujo valor do índice é superior ao estabelecido como limiar (valor_índice)”. Assim, a Listagem 7 apresenta o código jQuery para selecionar todas as células da tabela cujo índice é maior que 0. A Figura 7 apresenta a página em execução após o evento click de “Aplicar” ser disparado pelo usuário.
[javascript]
…
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(‘#Aplicar’).click(function () {
jQuery(‘td:gt(0)’).css(‘border’, ‘1px dotted #000’);
});
});
</script>
…
[/javascript]
Listagem 7: Acessando elementos maiores que 0 via “gt“
Figura 7: Selecionando células da tabela via “gt“
8. seletor:lt(valor_índice)
O seletor “lt” tem a função oposta a de “gt“, pois, enquanto o segundo permite o acesso a todos os elementos cujos índices são maiores que “valor_índice”, o primeiro acessa elementos cuja indexação é inferior a este limiar. Assim, no exemplo apresentado pela Listagem 8, temos a primeira célula sendo selecionada, pois, o limiar estabelecido foi 1.
[javascript]
…
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(‘#Aplicar’).click(function () {
jQuery(‘td:lt(1)’).css(‘border’, ‘1px dotted #000’);
});
});
</script>
…
[/javascript]
Listagem 8: Acessando elementos com valor de indexação abaixo de 1
Ao colocar o código da Listagem 8 em execução, chegamos então a um resultado parecido com aquele apresentado pela Figura 8.
Figura 8: Selecionando o primeiro elementos via “lt“
9. Seletor de cabeçalhos
O últimos dos filtros básicos que veremos neste post é “header“. Como o próprio nome sugere, este filtro permite o acesso a todos os elementos de cabeçalho da página, de h1 a h6, portanto, é possível adicionar um comportamento a todos os elementos de cabeçalho de uma única vez, conforme apresenta o código apresentado pela Listagem 9.
[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(‘#Aplicar’).click(function () {
jQuery(‘:header’).css(‘border’, ‘1px dotted #000’);
});
});
</script>
</head>
<body>
<h1>
Header H1
</h1>
<h2>
Header H2
</h2>
<h3>
Header H3
</h3>
<input type=”button” id=”Aplicar” value=”Aplicar” />
</body>
</html>
[/html]
Listagem 9: Aplicando comportamentos aos headers da página
A Listagem 9 apresenta três ocorrências de cabeçalho dentro de “body” e, através do jQuery, ao disparar do evento “click” do botão (linha 7) bordas pontilhadas na cor preta são adicionadas em torno de todos os cabeçalhos (linha 8) via filtro “:header“. O resultado do processamento da página com o código apresentado pela Listagem 9 é aquele visualizado na Figura 9.
Figura 9: Selecionando os headers da página
Bom pessoal, por hoje é isso. A idéia deste artigo era apresentar o conceito de filtros no jQuery e os filtros básicos. No próximo artigo, falaremos um pouco sobre seletores de conteúdos/compostos.
Não esqueça de deixar seu feedback através do comentário. É importante para quem escreve saber o que pode ser melhorado ou adicionado, assim, todos ganham, quem lê tem acesso a um texto melhor e quem escreve, escreve um texto melhor.
Facebook
Twitter
Instagram
LinkedIn
RSS