MooTools - Usando Arrays
MooTools é uma biblioteca JavaScript leve que ajuda a criar páginas da web dinâmicas. Ao gerenciar o elemento DOM, precisamos selecionar todos os elementos DOM de uma página da web. Essa coleção pode ser tratada por meio de matrizes.
Este capítulo explica como usar arrays para gerenciar elementos DOM.
cada () método
Este é o método básico para lidar com matrizes. Ele itera todos os elementos por meio de uma lista. Você pode usar este método com base no requisito. Por exemplo, se você deseja selecionar todos os elementos div de uma página, siga o script fornecido a seguir. Dê uma olhada na seguinte página html que contém vários divs.
<div>One</div>
<div>Two</div>Você pode usar o seguinte script para selecionar each individual divde uma coleção de divs na página. O script irá selecionar cada div e passar um alerta. Dê uma olhada no seguinte script.
Roteiro
$$('div').each(function() {
alert('a div');
});Você pode usar a seguinte sintaxe para lidar com o exemplo fornecido acima. Dê uma olhada na página HTML.
Roteiro
<div id = "body_div">
<div>One</div>
<div>Two</div>
</div>Aqui, os dois divs estão incluídos em outro div - body_div. Ao projetar um script, temos que selecionar apenas um div externo. Posteriormente, usando o método getElements (), podemos selecionar as duas divs internas. Dê uma olhada no seguinte script.
Roteiro
$('body_wrap').getElements('div').each(function() {
alert('a div');
});Você pode usar um método diferente para escrever o script acima da seguinte maneira. Aqui, estamos usando uma variável separada para selecionar obody_div.
Roteiro
var myArray = $('body_div').getElements('div');
myArray.each(function() {
alert('a div');
});Selecione Elementos Específicos de um Array
Enquanto manipulamos um array de elementos, podemos selecionar um elemento específico de um array de elementos. A seguir estão alguns métodos importantes usados para manipular os elementos DOM -
Obtenha o último()
Este método retorna o último elemento de uma matriz. Vamos configurar um array para entender esse método.
var myArray = $('body_div').getElements('div');Agora podemos pegar o último elemento do array.
var lastElement = myArray.getLast();A variável lastElement agora representa o último elemento em myArray.
getRandom ()
O método getRandom () funciona de maneira semelhante ao método getLast (), mas obterá um elemento aleatório do array.
Syntax
var randomElement = myArray.getRandom();A variável randomElement agora representa um elemento escolhido aleatoriamente dentro myArray.
Cópia de um Array
MooTools fornece uma maneira de copiar um array usando a função $ A (). A seguir está a sintaxe da função $ A ().
Sintaxe
var <variable-name> = $A ( <array-variable>);Adicionar um elemento a um array
Existem dois métodos diferentes para adicionar elementos em uma matriz. O primeiro método permite adicionar elementos um por um ou você pode mesclar dois arrays diferentes em um.
incluir()
O método include () é usado para adicionar um item a uma matriz de elementos DOM. Por exemplo, considere o seguinte código HTML que contém dois elementos div e um elemento span em um único div fechado -body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span id = "add_to_array">add to array</span>
</div>No código acima, se chamarmos o método getElements ('div') no body_divelemento, obtemos um e dois div, mas o elemento span não está incluído na matriz. Se você quiser adicioná-lo ao array, chameinclude()método na variável de matriz. Dê uma olhada no seguinte script.
Script
//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');
//first add your element to a var
var newToArray = $('add_to_array');
//then include the var in the array
myArray.include(newToArray);Agora, o myArray contém divs e o elemento span.
combinar()
Este método é usado para combinar os elementos de um array com os elementos de outro array. Isso também cuida do conteúdo duplicado. Por exemplo, considere o seguinte código HTML que contém dois elementos div e dois elementos span em div único e fechado -body_div.
Syntax
<div id = "body_div">
<div>one</div>
<div>two</div>
<span class = "class_name">add to array</span>
<span class = "class_name">add to array, also</span>
<span class = "class_name">add to array, too</span>
</div>No código acima, chame o método getElements ('div') no body_divelemento. Você obtém um e dois div. O método Call $$ ('. Class_name') seleciona os dois elementos span. Agora você tem uma matriz de elementos div e outra matriz de elementos span. Se você quiser mesclar esses dois arrays, poderá usar o método combine (). Dê uma olhada no seguinte script.
Script
//create your array just like we did before
var myArray= $('body_wrap').getElements('div');
//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');
//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );Agora, o myArray contém todos os elementos da variável newArrayToArray.
Example
Isso ajudará você a entender os arrays na MooTools. Suponha que aplicamos a cor de fundo ao array de elementos que contém divs e span. Dê uma olhada no código a seguir. Aqui, o segundo array de elementos não pertence a nenhum id ou grupo de classes e é por isso que não reflete nenhuma cor de fundo. Dê uma olhada no código a seguir.
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var myArray = $('body_wrap').getElements('.class_name');
var addSpan = $('addtoarray');
var addMany = $$('.addMany');
myArray.include(addSpan);
myArray.combine(addMany);
var myArrayFunction = function(item) {
item.setStyle('background-color', '#F7DC6F');
}
myArray.each(myArrayFunction);
});
</script>
</head>
<body>
<div id = "body_wrap">
<div class = "class_name">one</div>
<div>two</div>
<div class = "class_name">three</div>
<span id = "addtoarray">add to array</span>
<br /><span class = "addMany">one of many</span>
<br /><span class = "addMany">two of many</span>
</div>
</body>
</html>Você receberá a seguinte saída -
Output