今天,我们在来看看如何使用数组来管理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>
<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();.方法里面调用函数时,你不需要给函数名加上引号。
复制一个数组
$A
MooTools提供了一个简单的方式——通过$A函数来复制一个数组。让我们像刚才那样使用变量创建一个数组:
参考代码:
复制代码 代码如下:
// 创建你的数组变量
var myArray = $('body_wrap').getElements('div');
复制一个数组(创建该数组的副本):
参考代码:
复制代码 代码如下:
// 建立一个新的变量名,命名为”myCopy“,然后把”myArray“的副本赋值给它
var myCopy = $A(myArray );
从数组中获取指定的元素
.getLast();
.getLast();方法返回数组中最后一个元素。首先我们建立一个数组:
参考代码:
复制代码 代码如下:
var myArray = $('body_wrap').getElements('div');
现在我们可以从这个数组中获取最后一个元素:
参考代码:
复制代码 代码如下:
var lastElement = myArray.getLast();
变量lastElement现在的值就是数组myArray中的最后一个元素了。
.getRandom();
和.getLast();一样,不过它随机从数组中取得一个元素:
参考代码:
复制代码 代码如下:
var randomElement = myArray.getRandom();
变量randomElement现在的值就是从数组myArray中随机选取的一个元素了。
向数组中添加一个元素
.include();
通过这个方法,你可以给数组添加另外一个元素。只要把元素选择器传给.include();方法,它就会包含到你的数组中。我们使用下面的HTML代码:
参考代码:
复制代码 代码如下:
<div>
<div>one</div>
<div>two</div>
<span>add to array</span>
</div>
我们可以像以前那样调用”body_wrap“下面的所有div一样来创建一个数组:
参考代码:
复制代码 代码如下:
var myArray = $('body_wrap').getElements('div');
要把另外一个元素添加到这个数组中,首先你需要把这个元素赋值给一个变量,然后使用include方法:
参考代码:
复制代码 代码如下: