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 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
为jquery.ui.dialog 增加“在当前鼠标位置打开”的功能
Nov 24 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
vue+elementui 对话框取消 表单验证重置示例
Oct 29 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
Jan 21 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 Javascript
一篇文章了解正则表达式的替换技巧
Feb 24 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调用Oracle存储过程
2006/10/09 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
yii操作session实例简介
2014/07/31 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
js Math数学简单使用操作示例
2020/03/13 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
深入学习python的yield和generator
2016/03/10 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
Python3实现转换Image图片格式
2018/06/21 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
python中怎么表示空值
2020/06/19 Python
Python3实现建造者模式的示例代码
2020/06/28 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
在线服装零售商:SheIn
2016/07/22 全球购物
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
优秀士兵先进事迹
2014/02/06 职场文书
镇人大副主席民主生活会对照检查材料思想汇报
2014/10/01 职场文书
乡镇保密工作承诺书
2015/05/04 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript
sass 常用备忘案例详解
2021/09/15 HTML / CSS