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


Posted in Javascript onSeptember 14, 2009

今天,我们在来看看如何使用数组来管理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数组的信息

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

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

Javascript 相关文章推荐
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 #Javascript
MooTools 1.2介绍
Sep 14 #Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 #Javascript
JavaScript 函数调用规则
Sep 14 #Javascript
prototype与jquery下Ajax实现的差别
Sep 13 #Javascript
JS 参数传递的实际应用代码分析
Sep 13 #Javascript
javascript类继承机制的原理分析
Sep 12 #Javascript
You might like
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php各种编码集详解和以及在什么情况下进行使用
2011/09/11 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php实现简单洗牌算法
2013/06/18 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
2017/01/13 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
mui开发中获取单选按钮、复选框的值(实例讲解)
2017/07/24 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
python交互式图形编程实例(三)
2017/11/17 Python
使用python生成目录树
2018/03/29 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
Python2与Python3的区别实例总结
2019/04/17 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
python实现批量修改文件名
2020/03/23 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Otticanet澳大利亚:最顶尖的世界名牌眼镜, 能得到打折季的价格
2018/08/23 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
销售行政专员职责
2014/01/03 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
班组拓展活动方案
2014/08/14 职场文书
委托书怎样写
2014/08/30 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书