Este é o oitavo artigo da série “jQuery – Início, Meio e Fim“. Muitos conceitos importantes já foram vistos, conceitos estes, que são de fundamentais para a melhor utilização dos recursos disponíveis na biblioteca. Se você está chegando agora, minha dica pra você é: leia a série completa antes de prosseguir com a leitura deste post. Com isso, conteúdo deste artigo tornar-se-a bem mais suave para você.
Como mencionado no artigo anterior, a biblioteca jQuery possui uma enorme quantidade de filtros de elementos (que podem ser utilizados nas situações mais diversas). Assim, para não escrever um post demasiadamente grande e por inércia, com a leitura massante, resolvi dividir o assunto “filtros” em alguns posts. No primeiro destes, falei sobre filtros simples. No segundo, falei sobre filtros de conteúdo ou compostos. Assim, visando manter a ordem lógica do conteúdo, no post de hoje, falaremos um pouco sobre filtros de visibilidade e atributos, ficando para o artigo seguinte, os filtros para formulários.
Filtros de visibilidade
Conforme o próprio nome sugere, um filtro de visibilidade é aquele que seleciona determinado conjunto de elementos com base na visibilidade deste conjunto em relação a página. A seguir, apresento os dois filtros básicos para realizar tal operação.
1. :hidden
O filtro “:hidden” não está previsto na especificação da CSS 3, portanto, é de utilização exclusiva da biblioteca jQuery e, sua função, é encontrar todos os elementos da página que estejam escondidos/ocultos. Isso inclui desde elementos input decorados com o atribudo hidden até elementos do próprio head da página, o que nos leva a pensar que tal recurso deve ser utilizado com cuidado. Para que possamos entender corretamente o mecanismo implícito no filtro hidden, considere o exemplo apresentado pela Listagem 1.
[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<style type=”text/css” media=”all”>
p {display:none;}
</style>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(“#btnContar”).click(function () {
jQuery(“#Resposta1”).html(“Total de elementos ocultos em body:” + jQuery(“:hidden”, jQuery(“body”)).length);
jQuery(“#Resposta2”).html(“Total de elementos ocultos no documento: ” + jQuery(“:hidden”).length);
});
});
</script>
</head>
<body>
<div id=”Resposta1″>
</div>
<div id=”Resposta2″>
</div>
<div>
</div>
<p></p>
<input type=”button” id=”btnContar” value=”Contar” />
</body>
</html>
[/html]
Listagem 1: Selecionando conjunto de elementos ocultos com hidden
Como a maioria dos filtros jQuery, a utilização é bem simples, mas o resultado é bem interessante. Note, temos um parágrafo cujo CSS o define como oculto através da propriedade display:none; (linha 7). Assim, o que fazemos em seguida é, contar as ocorrências de elementos ocultos no corpo do documento (body) e no documento de forma geral (incluindo elementos head). Isso é feito nas linhas 14 e 15, respectivamente. É fácil constatar que, “Resposta1” recebe o texto “Total de elementos ocultos em body:” + jQuery(“:hidden”, jQuery(“body”)).length“, isto é, todas as ocorrências de elementos ocultos entre as tags body e a div “Resposta2” recebe o texto “Total de elementos ocultos no documento: ” + jQuery(“:hidden”).length“, ou seja, todos os elementos ocultos do documento. Tudo isso executado ao disparar o evento click de “btnContar”. O processamento do documento apresentado na Listagem 1 pode ser visualizado na Figura 1.
Figura 1: Contando os elementos ocultos no body e no documento como um todo
2. :visible
Este seletor tem o comportamento inverso do hidden, isto é, enquanto hidden retorna as ocorrências de elementos ocultos, visible retorna as ocorrências de elementos visíveis em body. O funcionamento é simples e o exemplo apresentado pela Listagem 2 comprova esta afirmaçã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>
<style type=”text/css” media=”all”>
p {display:none;}
</style>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(“#btnContar”).click(function () {
jQuery(“#Resposta1”).html(“Total de elementos visíveis em body:” + jQuery(“:visible”, jQuery(“body”)).length);
});
});
</script>
</head>
<body>
<div id=”Resposta1″>
</div>
<div id=”Resposta2″>
<p></p>
</div>
<div>
</div>
<input type=”button” id=”btnContar” value=”Contar” />
</body>
</html>
[/html]
Listagem 2: Selecionando elementos visíveis em body
A diferença em relação ao exemplo apresentado pela Listagem 1 reside no fato de que, na linha 15, ao invés de selecionarmos os elementos ocultos, selecionamos os elementos visíveis e exibimos a soma deles na tela. A Figura 2 apresenta o exemplo em execução.
Figura 2: Selecionando elementos visíveis em body
Filtros por Atributos
Como você já deve estar imaginando, os filtros por atributos são aqueles que através da especificação de determinado atributo de determinado elemento, seleciona este(s) elemento(s). Vejamos alguns exemplos de utilização destes filtros (eles são amplamente utilizados em nosso dia-a-dia). Vale ressaltar que este tipo de filtro, está previsto na CSS 3, portanto, não é de utilização exclusiva do jQuery.
1. seletor[atributo]
Retorna todos os elementos que implementam o atributo definido no seletor especificado, conforme ilustra o exemplo apresentado pela Listagem 3.
[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<style type=”text/css” media=”all”>
.estilo { background-color:Red; border:1px solid #000; padding:10px; color:#FFF; }
</style>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(“#btnAplicar”).click(function () {
jQuery(“div[id]”).addClass(“estilo”);
});
});
</script>
</head>
<body>
<div>
Texto da Div 1
</div>
<div>
<p>Texto do parágrafo 2</p>
</div>
<div id=”Div2″>
Texto da Div 2
</div>
<input type=”button” id=”btnAplicar” value=”Aplicar” />
</body>
</html>
[/html]
Listagem 3: Selecionando elementos que possuem id
O código da Listagem três dispensa comentários demorados, bastando dizer apenas que: ao clicar do botão “btnAplicar” todos os elementos da página que possuírem um “id” definido, sofrerão o comportamento imposto pelo jQuery na linha 15, isto é, a aplicação de uma classe CSS. A Figura 3 apresenta o exemplo apresentado pela Listagem 3 em execução.
Figura 3: Selecionando o elemento que implementa o atributo id
2. seletor[atributo = “valor”] / seletor[atributo != “valor”]
Outra possibilidade interessante em relação aos filtros por atributos, é a de selecionar elementos com base nos valores atribuídos aos atributos. Isso pode ser realizado de algumas formas. As duas primeiras: podemos aplicar determinado comportamento jQuery a elementos cujos valores dos atributos são iguais aos definidos na declaração dos mesmos; podemos aplicar determinado comportamento jQuery a elementos cujos valores dos atributos são diferentes dos definidos na declaração dos mesmos. A Listagem 4 apresenta um exemplo que traz ambas as abordagens.
[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title></title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<style type=”text/css” media=”all”>
.estilo_igual { background-color:Red; border:1px solid #000; padding:10px; color:#FFF; }
.estilo_diferente { background-color:Yellow; border:1px solid #000; padding:10px; color:#000; }
</style>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(“#btnIgual”).click(function () {
jQuery(“div[title=Div]”).addClass(“estilo_igual”);
});
jQuery(“#btnDiferente”).click(function () {
jQuery(“div[title!=Div]”).addClass(“estilo_diferente”);
});
});
</script>
</head>
<body>
<div title=”Div”>
Texto da Div 1
</div>
<div title=”Generica”>
Texto da Div genérica
</div>
<div title=”Div”>
Texto da Div 3
</div>
<input type=”button” id=”btnIgual” value=”Aplicar igual” />
<input type=”button” id=”btnDiferente” value=”Aplicar diferente” />
</body>
</html>
[/html]
Listagem 4: Selecionando elementos cujos elementos são iguais ou diferentes
Mais uma vez, um trecho de código vale mais que mil palavras. Assim, basta dizer que, ao clicar de “btnIgual” todos os elementos que possuem um title com valor “Div” sofrem o comportamento imposto pela função jQuery. De igual forma, ao disparar o evento click do botão “btnDiferente”, todos os elementos cujos title’s sejam diferentes de “Div” sofrem o comportamento imposto pelo jQuery. O resultado do código apresentado pela Listagem 4 em execução pode ser visualizado nas Figuras 4 e 5.
Figura 4: Aplicando estilos aos elementos com mesmo title
Figura 5: Aplicando estilos aos elementos com title diferentes de “Div”
Existem ainda alguns outros seletores disponíveis para implementar filtros por atributos (tais como: ^=, $=, *=, etc.) entretanto, suas aplicações são de forma geral, específicas. Assim, conforme formos evoluindo com os conceitos da biblioteca e tais conceitos se fizerem necessários, eles serão abordados no momento oportuno. Por hora, os conceitos vistos até aqui são suficientes para prosseguirmos com nosso aprendizado.
Não se esqueça de deixar seu feedback através do(s) comentário(s). Como você já deve saber, eles são de fundamental importância para que possamos melhorar a qualidade dos textos.
Grande abraço a todos e até o próximo post.
Facebook
Twitter
Instagram
LinkedIn
RSS