Mootools 1.2教程(3)——数组使用简介

数组使用简介

原文地址：30 Days of Mootools 1.2 Tutorials - Day 3 - Intro to Using Arrays

在上一篇教程——《Mootools 1.2教程(2)——DOM选择器》中，我们介绍了一下选择器，其中有很多方法就会返回数组（一个你可以对其中内容进行多种操作的特殊列表）。今天，我们在来看看如何使用数组来管理DOM元素。

基本方法

.each();

在处理数组时，.each();方法是你最好的朋友。它提供了一种很容易的方法来遍历数组的每个元素，如果有需要还可以对其中的元素进行任何逻辑处理。例如，我们可以假设你需要为页面中的每个div对象调用alert方法：

参考代码：

$$('div').each(function() {
    alert('a div');
});

如果使用下面的HTML代码，上面的JavaScript代码将弹出两个alert对话框，每个div一个。

参考代码： 

<div>One</div>
<div>Two</div>

.each();方法不需要你使用$$方法。创建一个数组的另一种方式（就像我们昨天讲到过的）是使用.getElements();方法。

参考代码：

$('body_wrap').getElements('div').each(function() {
    alert('a div');
});

参考代码： 

<div id="body_wrap">
    <div>One</div>
    <div>Two</div>
</div>

还有另外一种方法来完成这个相同的任务，就是把这个数组赋值给一个变量，然后对那个变量使用.each();方法：

参考代码：

// 首先你需要通过语句”var VARIABLE_NAME“来声明一个变量
// 然后用等于运算符”=“来给这个变量赋值
// 在这个例子中，是一个包含div元素的数组
var myArray = $('body_wrap').getElements('div');
 
// 现在你就可以把这个变量当数组选择器使用了
myArray.each(function() {
    alert('a div');
});

最后，如果你可能想把你的函数从选择器中独立出来。我们会在明天的关于使用函数的教程中更深入地讲解这个问题。不过，现在我们可以创建一个非常简单的示例：

参考代码： 

var myArray = $('body_wrap').getElements('div');
 
// 要创建一个函数，你可以像刚才一样声明一个变量，然后给它命名
// 在等号后面使用”function()“来声明这个变量为一个函数
// 最后，在 { 和 }之间写入你的函数代码
var myFunction = function() {
    alert('a div');
};
 
// 现在你就可以在.each();.方法里面调用刚才的函数了
myArray.each(myFunction);

注意：当你像刚才那样在.each();.方法里面调用函数时，你不需要给函数名加上引号。