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


// 首先把你的元素赋值给一个变量
var newToArray = $('add_to_array');
// 然后把它添加到数组
myArray.include(newToArray);


现在,这个数组就同时包含div和span元素了。
.combine();
和.include();方法一样,不过它可以让你把一个数组添加到一个已经存在的数组中,而不用担心有重复的内容。假设我们现在从下面的HTML中取得了两个数组:
参考代码:

复制代码 代码如下:


<div>
<div>one</div>
<div>two</div>
<span>add to array</span>
<span>add to array, also</span>
<span>add to array, too</span>
</div>


我们可以这样建立两个数组:
参考代码:

复制代码 代码如下:


// 就像我们以前那样建立你的数组
var myArray= $('body_wrap').getElements('div');
// 然后建立一个所有CSS类名为.class_name的元素数组
var newArrayToArray = $$('.class_name');


现在我们可以使用.combine();方法来合并两个数组,这个方法会自己处理重复的元素,因此我们不需要处理:
参考代码:

复制代码 代码如下:


// 把数组newArrayToArray合并到数组myArray中
myArray.combine(newArrayToArray );


现在myArray就包含了newArraytoArray中的所有元素。
代码示例
数组可以让你遍历包含所有项目的列表,并对每个元素执行相同的代码。在这个例子中,注意变量”item“作为当前元素的替代符的使用。
参考代码:

复制代码 代码如下:


// 创建一个数组,这个数组包含”body_wrap“里面所有CSS类名为.class_name的元素
var myArray = $('body_wrap').getElements('.class_name');
// 首先建立一个要添加到数组中的元素
var addSpan = $('addtoarray');
// 然后建立一个要合并的数组
var addMany = $$('.addMany');
// 现在我们把元素addSpan加入到数组中
myArray.include(addSpan);
// 然后合并数组addMany到myArray中
myArray.combine(addMany);
// 建立一个需要对数组中的每个元素都要执行的函数
var myArrayFunction = function(item) {
// item现在指向数组中的当前元素
item.setStyle('background-color', '#eee');
}
// 现在对数组中的每个项目调用myArrayFunction函数
myArray.each(myArrayFunction);


参考代码:

复制代码 代码如下:


<div>
<div>one</div><!-- this has gray background -->
<div>two</div>
<div>three</div><!-- this has gray background -->
<span>add to array</span> <!-- this has gray background -->
<br /><span>one of many</span> <!-- this has gray background -->
<br /><span>two of many</span> <!-- this has gray background -->
</div>


延伸学习

这个教程并没有打算涵盖你能对数组做的全部事情,但是希望能够给你一个参考,告诉你MooTools提供了一些什么功能。要学习更多关于数组的东西,请仔细阅读这些内容:

文档中的数组部分 这个页面中有许多

下载一个包含你开始所需要的所有东西的zip包

包括一个简单的html文件、MooTools 1.2核心库、一个外部JavaScript文件、一个css文件和上面的所有例子。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wjyffw.html