Após uma pequena pausa na escrita da série (causada pela imersão quase que em tempo total na finalização de um projeto), estou devolta com a mesma. Nos primeiros artigos foram apresentados os conceitos fundamentais relacionados a linguagem jQuery. Se você está chegando agora e não possui os conhecimentos equivalentes, recomendo fortemente a leitura dos quatro primeiros artigos.
No artigo de hoje, falaremos especificamente sobre seletores jQuery. Aprenderemos como utilizar e veremos exemplos práticos de sua utilização. É importante observar que, possuir um sólido conhecimento da utilização dos seletores é de fundamental importância. Mãos a obra?!
Os seletores jQuery
Antes de falarmos em “seletores”, precisamos falar de “árvore de documento”. Entender o grau de parentesco entre os elementos HTML é de fundamental importância para manipular tais elementos. Felizmente, este assunto já foi tratado no segundo artigo da série. Justifico a afirmação da necessidade de se conhecer a árvore de documentos com o argumento de que, muito dos comportamentos desejáveis somente podem ser obtidos através da manipulação hierárquica dos elementos HTML (elementos pais, filhos, ancestrais, irmãos, etc.).
1. “Seletores Simples”
A seguir, veremos as formas de utilização dos chamados “seletores simples”. Considere a estrutura HTML apresentada pela Listagem 1.
[html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>jQuery – Artigo 5 – Seletores Simples – Exemplo 1</title>
<script src=”Scripts/jquery-1.4.1.js” type=”text/javascript”></script>
<style type=”text/css”>
.EstiloDivClick
{
padding:20px;
text-align:left;
border:1px solid Red;
background:#EFEFEF;
font-family:”lucida sans unicode”;
font-size:130%;
letter-spacing:-1px;
font-weight:bold;
}
</style>
</head>
<script language=”javascript” type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(“#botao”).click(function () {
jQuery(“#BoxResultado”).addClass(“EstiloDivClick”);
});
});
</script>
<body>
<div>
<input type=”button” id=”botao” value=”Mudar configuração da div” />
</div>
<div id=”BoxResultado”>
Esta é a configuração inicial do texto na div. Ao clicar no botão acima, você verá que a configuração muda radicalmente!
</div>
</body>
</html>
[/html]
Listagem 1: Exemplo de utilização de um seletor simples (por ID)
A Listagem 1 apresenta a utilização do primeiro tipo de seletor simples, isto é, por ID. Ao observar as linhas 25 e 26 fica fácil observar seu funcionamento. Basta indicar ao construtor jQuery o valor do atributo ID do elemento HTML que se deseja adicionar algum comportamento. Em nosso caso, ao botão ser clicado, o div “BoxResultado” recebe o estilo definido em “EstiloDivClick” através da função “addClass”. O resultado de nossa aplicação pode ser visualizado na Figura 1. Muito embora o seletor seja simples e de fácil utilização, já é possível imaginar o poder de fogo oferecido por ele ao desenvolvedor, não?!
Figura 1: Código apresentado na Listagem 1 em execução
Um segundo tipo de seletor simples, também amplamente utilizado é o “seletor de classes”. Com este tipo de seletor, são alvos do construtor jQuery os elementos cujo valor do atributo “class” seja especificado ao mesmo. Para que esta idéia fique mais clara, faremos apenas algumas alterações no código apresentado pela Listagem 1. A Listagem 2 apresenta estas mudanças.
[html]
…
<script language=”javascript” type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(“#botao”).click(function () {
jQuery(“.EstiloDivClick”).removeClass(“EstiloDivClick”);
});
});
</script>
…
<div id=”BoxResultado” class=”EstiloDivClick”>
Esta é a configuração inicial do texto na div. Ao clicar no botão acima, você verá que a configuração muda radicalmente!
</div>
[/html]
Listagem 2: Utilizando o seletor simples (por classe)
Basicamente, a mudança realizada em relação a Listagem 1 é:
- Linhas 5 e 10 : serão alvos do seletor jQuery, todos os elementos cujo atributo class possua o valor “EstiloDivClick”. O resultado da operação será, ao clicar do botão, a remoção do estilo da div “BoxResultado”, já que esta implementa a classe “EstiloDivClick”, conforme apresenta a linha 10.
Outra opção dentre os seletores simples é a de “apontar” para elementos HTML gerais da página. Você deve entender como “elementos gerais” as tag’s HTML. Assim, ao indicar um ou mais elementos HTML para o construtor jQuery, estaremos adicionando comportamento a todas as instâncias encontradas pelo jQuery na página. A Listagem 3 apresenta um exemplo da utilização deste seletor.
[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(‘#MudaInput’).click(function () {
jQuery(‘div’).css(‘background-color’, ‘#000’);
});
});
</script>
</head>
<body>
<div>
<div id=”InputDiv”></div>
<input type=”button” id=”MudaInput” value=”Modificar input” />
</div>
</body>
</html>
[/html]
Listagem 3: Utilizando o seletor simples (por elemento HTML)
A novidade neste código se resume a linha 9, isto é, imprimimos determinado comportamento (neste caso, alterar o background) a todas as div’s presentes na página. O resultado de nossa aplicação em execução pode ser visualizado na Figura 2.
Figura 2: Modificando o background de todas as div’s
Ainda falando em seletores simples, é possível realizar um agrupamento de seletores. Agrupamento? Sim, agrupamento! A ideia aqui é, parametrizar o construtor jQuery com dois ou mais elementos, sendo que estes, podem ser cada um dos demais apresentados anteriormente neste artigo. A Listagem 4 apresenta um exemplo de utilização de seletores compostos.
[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”>
.Div3
{
background:green;
}
</style>
<script type=”text/javascript”>
jQuery(document).ready(function () {
jQuery(‘#btn’).click(function () {
jQuery(‘#div1, p, .Div3’).css(‘padding’, ’30px’);
});
});
</script>
</head>
<body>
<div id=”div1″ style=”background:#efefef; margin-bottom:20px;”>Texto div 1</div>
<p>Texto parágrafo</p>
<div id=”div3″ class=”Div3″>Texto div 2</div>
<input type=”button” id=”btn” value=”Aplicar Estilo” />
</body>
</html>
[/html]
Listagem 4: Utilizando o seletores agrupados
Como é possível notar, na linha 15 estamos parametrizando o seletor jQuery com três valores, sendo que estes, são separados por vírgulas. O primeiro parâmetro é o “id” da primeira div. O segundo parâmetro indica que todos os parágrafos da página devem ser impostos ao comportamento a seguir. Finalmente, o terceiro parâmetro diz ao interpretador que, todos os elementos que implementam a classe CSS “Div3” devem ser submetidos ao comportamento a seguir (neste caso, a adição da propriedade CSS padding) com fadeIn(). A Figura 3 apresenta o exemplo em funcionamento.
Figura 3: Testando o o agrupamento de seletores
2. “Seletores Compostos”
Seletores compostos são formados pela união de seletores simples. Sua construção é extremamente simples e oferece grande poder ao desenvolvedor, entretanto, possuem sintaxe própria. Respeitar esta sintaxe é preponderante para que os seletores compostos possam funcionar corretamente. A seguir, veremos as três diferentes formas de utilização dos seletores compostos e, após isso, ficará evidente a afirmação do início do artigo, que afirmava que, para o bom trabalho com jQuery, é de fundamental importância conhecer a árvore de elementos da página.
2.1 jQuery(ancestral descendente) ou $(ancestral descendente)
O primeiro seletor composto ao qual faremos menção neste artigo é o seletor “ancestral” espaço “descendente”. Note, neste modelo de seleção, o construtor jQuery deve ser parametrizado com os elementos ancestrais e descendentes separados por um ou mais espaços em branco. A seleção obedece a uma estrutura hierárquica (primeiro o elemento de nível mais alto e depois o elemento de nível mais baixo). A Listagem 5 apresenta um exemplo que o ajudará a entender o funcionamento de tal recurso.
[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(‘#Botao’).click(function () {
jQuery(‘body span’).css(‘font-size’,’40px’).fadeIn();
});
});
</script>
</head>
<body>
<div>
<p>
<span>Texto</span> de demonstração
</p>
</div>
<p>
Texto <span>demonstração</span> 2
</p>
<input type=”button” id=”Botao” value=”Aplicar” />
</body>
</html>
[/html]
Listagem 5: Utilizando a primeira versão do seletor composto (ascendência descendência)
Como é possível observar, na linha 9, temos a presença das tag’s <span></span> duas vezes e ambas, são filhas de um parágrafo, correto? Mas veja, muito embora elas sejam filhas das tag’s <p></p> (em ambos os casos), existe apenas uma ocorrência onde span é descendente direta de body, isto é, apenas a tag <span> do segundo parágrafo é que atende a composição do seletor. A Figura 4 apresenta o código da Listagem 5 em funcionamento.
Figura 4: Seletor composto (acendente descendente)
2.2 jQuery(pai > filho) ou $(pai > filho)
No ítem anterior, apresentamos o seletor composto e indicamos a ideia de descendência. É importante frisar que, a ideia de descendência é diferente da ideia de paternidade, pelo menos do ponto de vista funcional do jQuery e, por esse motivo, os resultados da composição de pais e filhos e acendentes descendentes serão diferentes. Um elemento X é considerado pai de Y se Y foi criado no bloco definido por X. Complicou? Observe a Listagem 6.
[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(‘#botao’).click(function () {
jQuery(‘p > span’).css(‘color’, ‘red’);
});
});
</script>
</head>
<body>
<p>
Teste de texto <span>para mostrar aspectos</span> do filho
</p>
<div>
<span>
Teste de texto
</span>
</div>
<input type=”button” id=”botao” value=”Aplicar” />
</body>
</html>
[/html]
Listagem 6: Seletor composto (pai > filho)
Duas observações são importantes em relação a Listagem 6. A primeira é o caracter especial responsável por indicar a relação de pai e filho. Estamos falando do operador “>”. Assim, na linha 9, quando tem-se “p > span”, estamos informando ao interpretador que, o comportamento deve ser adicionado ao elemento “span” cujo pai é “p”. A Figura 5 apresenta o exemplo da Listagem 6 em execução.
Figura 5: Seletor composto (pai e filho)
2.3 jQuery(anterior + próximo) ou $(anterior + próximo)
Neste modelo de seletor composto, temos uma combinação do elemento anterior com aquele imediatamente posterior a ele. Assim, se X é o elemento corrente (anterior), Y é o elemento imediatamente posterior a ele se X + Y for verdade. Complicou? Mais uma vez recorreremos a um exemplo prático. A Listagem 7 é a que segue.
[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(‘#botao’).click(function () {
jQuery(‘p + div’).css(‘border’, ‘1px solid red’);
});
});
</script>
</head>
<body>
<div>
<p>
Texto 1
</p>
</div>
<p>
Texto 2
</p>
<div>
Texto 3
</div>
<input type=”button” value=”Aplicar” id=”botao” />
</body>
</html>
[/html]
Listagem 7: Seletor composto (anterior + próximo)
Nada como um exemplo de código para esclarecer as coisas. Note, o seletor (linha 9) está da seguinte forma: jQuery(‘p + div’).css(‘border’, ‘1px solid red’);. Com essa declaração, é como se estivéssemos dizendo ao interpretador: “Com base no elemento p, aplique a borda vermelha no elemento imediatamente abaixo dele”. Neste caso, o elemento posterior a “p” é “div”, daí vem o resultado apresentado pela Figura 6. Uma observação importante é o operador “+”. Ele é o responsável pela combinação de anterior e próximo.
Figura 6: Aplicando a borda via seletor composto (anterior + próximo)
Bom, por hoje vamos parando por aqui. No próximo artigo da série, falaremos sobre filtros e veremos qual a importância deste recurso na construção de bons scripts jQuery. Você não deve perder!
Não esqueça de deixar seu feedback através do comentário, ele é muito importante para que eu possa aperfeiçoar e escrever textos cada vez melhores.
Facebook
Twitter
Instagram
LinkedIn
RSS