Função duplo dólar $$()
Esta função faz parte do módulo Element, apesar de ter sido criada igual que a função $() vista no capítulo anterior, como um método de Window, que se encontra sempre disponível. Serve para obter referências a um grupo variável de elementos da página. Aceita uma série de possíveis parâmetros de entrada -que veremos logo- para especificar grupos de elementos e devolve sempre um array com as referências aos elementos, independentemente do número de elementos selecionados.
O método $$ se pode utilizar desta maneira:
elementos_paragrafo = $$("p");
Isto seleciona todas as etiquetas P da página e devolve um array com as referências a todos estes parágrafos. No código anterior salvamos o Array de Elements devolvido a uma variável que chamamos elementos_paragrafo.
Como dizíamos, elementos_paragrafo será um array de objetos Element, independentemente do número de parágrafos que tiver nossa página.
Exemplo completo de uso de $$()
Para entender isto, o mais fácil é ver um exemplo de uso do método $$() para ver como funciona.
<p>
Isto é um parágrafo
</p>
<p>
Isto é um segundo parágrafo
</p>
<p>
Continuo com um terceiro parágrafo!
</p>
<script>
elementos_paragrafo = $$("p");
//alert($type(elementos_paragrafo)); Nos mostraria array em um alert
for (i=0; i<elementos_paragrafo.length; i++){
elementos_paragrafo[i].setStyle("font-size", (100 + (i*50))+"%");
}
</script>
Primeiro, escrevemos um código HTML com três parágrafos.
Depois, temos um script em Javascript que faz uso de Mootools para recolher esses parágrafos e tratá-los. Em nosso exemplo, fazemos uso do método $$("p") para obter um array com os objetos Element correspondentes a todos os parágrafos.
A seguir, temos um loop que percorre cada um dos elementos do array e vai mudando o estilo dos mesmos, mais concretamente o tamanho da fonte. Então, para cada parágrafo coloca um tamanho de fonte maior. Como se pode ver, com elementos_paragrafo[i] estamos acessando a cada uma das etiquetas HTML de parágrafo.
Podemos ver o exemplo em funcionamento em uma página à parte.
Possíveis parâmetros de seleção de elementos com $$()
Os possíveis parâmetros que aceita $$() são:
elementos = $$("p","a");
Isto selecionaria todos os parágrafos da página e nas posições sucessivas do array, todos os links.
elementos=new Array(document.getElementById("p1"), document.getElementById("p3"));
elementos_paragrafo = $$(elementos);
Com estas duas linhas selecionaríamos os elementos com identificadores "p1" e "p3". Na primeira linha criamos o array com os elementos, extraídos com document.getElementById(), e na segunda linha obtemos um array com tais elementos como objetos da classe Element.
elementos=new Array($("p1"), $("a2"));
elementos = $$(elementos);
Este exemplo é parecido com o anterior, com a diferença que neste caso já tínhamos os elementos da classe Element, selecionados com $().
elemento0= $("p3");
elemento1 = $("a1");
elemento2 = $("a2");
elementos = $$(elemento0, elemento1, elemento2);
Neste exemplo, temos três variáveis com objetos da classe Element e os selecionamos com $$, especificando-os como três parâmetros consecutivos.
Agora vejamos um exemplo com seletores. Temos este código HTML:
<div id="x">Este div é de identificador id=x</div>
E logo este script:
<script>
elementos = $$("#x");
for (i=0; i<elementos.length; i++){
elementos[i].setStyle("color", "blue");
}
</script>
Com $$("#x") obtemos o elemento que tem identificador id="x". Será um único elemento. Logo, com loop for percorremos o array para mudar a cor do texto desse elemento a azul.
Um último exemplo, no qual temos este código HTML:
<div class="titular">Isto é DIV da classe titular</div>
<div>Este NÃO é da classe titular</div>
<div class="titular">Isto é outro DIV que é titular</div>
Vemos três blocos DIV. O primeiro e o terceiro são da classe "titular". Então, vejamos o seguinte código Javascript:
<script>
elementos_titular = $$(".titular");
//alert($type(elementos_paragrafo)); Nos mostraria array em um alert
for (i=0; i<elementos_titular.length; i++){
elementos_titular[i].setStyle("color", "red");
}
</script>
Com isso estaremos selecionando todos os elementos da página que são da classe titular, com o seletor ".titular". Com o loop, estaremos mudando a cor do texto a vermelho a todos os elementos.
Podemos ver este último exemplo em funcionamento aqui.
À propósito, para que funcione a seleção de elementos por seletores de classe CSS devemos ter o módulo Selectors carregado em Mootools.
