繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Mootools 1.2教程(3) 数组使用简介
- Javascript
- 在Z-Blog中运行代码[html][/html]（纯JS版）
- 统一接口：为FireFox添加IE的方法和属性的js代码
- 网页自动刷新，不产生嗒嗒声的一个解决方法
- 驱动事件的addEvent.js代码
- [原创]提供复制本站内容时出现,该文章转自IT学习网等字样的js代码
- CSDN轮换广告图片轮换效果
- 一段多浏览器的"复制到剪贴板"javascript代码
- Javascript中的常见排序算法
- JS Common 2 之比较常用到的函数
- 非正则实现的只能输入汉字的输入框
- CSDN上快速结贴的方法，JS实现
- js eval木马代码,以后再分析吧
- 屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
- 一个不错的可以检测多中浏览器的函数和其它功能
- 状态栏显示欢迎信息的脚本特效
- 关于文本限制字数的js代码
- 在你的网页中嵌入外部网页的方法
- 在IE中调用javascript打开Excel的代码(downmoon原作)
- javascript实现动态增加删除表格行(兼容IE/FF)
- javascript中获取选中对象的类型
Javascript 中的 Mootools 1.2教程(3) 数组使用简介
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 411 ::
收藏到网摘: n/a
在上一篇教程——《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();.方法里面调用函数时，你不需要给函数名加上引号。
复制一个数组
$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 id="body_wrap">
<div>one</div>
<div>two</div>
<span id="add_to_array">add to array</span>
</div>
我们可以像以前那样调用”body_wrap“下面的所有div一样来创建一个数组：
参考代码：
复制代码 代码如下:
var myArray = $('body_wrap').getElements('div');
要把另外一个元素添加到这个数组中，首先你需要把这个元素赋值给一个变量，然后使用include方法：
参考代码：
复制代码 代码如下:
// 首先把你的元素赋值给一个变量
var newToArray = $('add_to_array');
// 然后把它添加到数组
myArray.include(newToArray);
现在，这个数组就同时包含div和span元素了。
.combine();
和.include();方法一样，不过它可以让你把一个数组添加到一个已经存在的数组中，而不用担心有重复的内容。假设我们现在从下面的HTML中取得了两个数组：
参考代码：
复制代码 代码如下:
<div id="body_wrap">
<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>
我们可以这样建立两个数组：
参考代码：
复制代码 代码如下:
// 就像我们以前那样建立你的数组
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 id="body_wrap">
<div class="class_name">one</div><!-- this has gray background -->
<div>two</div>
<div class="class_name">three</div><!-- this has gray background -->
<span id="addtoarray">add to array</span> <!-- this has gray background -->
<br /><span class="addMany">one of many</span> <!-- this has gray background -->
<br /><span class="addMany">two of many</span> <!-- this has gray background -->
</div>
延伸学习
这个教程并没有打算涵盖你能对数组做的全部事情，但是希望能够给你一个参考，告诉你MooTools提供了一些什么功能。要学习更多关于数组的东西，请仔细阅读这些内容：
- 文档中的数组部分
- 这个页面中有许多关于JavaScript数组的信息
包括一个简单的html文件、MooTools 1.2核心库、一个外部JavaScript文件、一个css文件和上面的所有例子。
评论 (0) All
