MooTools教程(3):数组管理DOM元素

雷雨天的雷胖子 2011-04-06

篇教程——《Mootools 1.2教程(2)——DOM选择器》中，我们介绍了一下选择器，其中有很多方法就会返回数组（一个你可以对其中内容进行多种操作的特殊列表）。今天，我们在来看看如何使用数组来管理DOM元素。

基本方法

.each();

在处理数组时，.each();方法是你最好的朋友。它提供了一种很容易的方法来遍历数组的每个元素，如果有需要还可以对其中的元素进行任何逻辑处理。例如，我们可以假设你需要为页面中的每个div对象调用alert方法：

参考代码：
  1. $$('div').each(function() {
  2.     alert('a div');
  3. });

如果使用下面的HTML代码，上面的JavaScript代码将弹出两个alert对话框，每个div一个。

参考代码：
  1. <div>One</div>
  2. <div>Two</div>

.each();方法不需要你使用$$方法。创建一个数组的另一种方式（就像我们昨天讲到过的）是使用.getElements();方法。

参考代码：
  1. $('body_wrap').getElements('div').each(function() {
  2.     alert('a div');
  3. });
参考代码：
  1. <div id="body_wrap">
  2.     <div>One</div>
  3.     <div>Two</div>
  4. </div>

还有另外一种方法来完成这个相同的任务，就是把这个数组赋值给一个变量，然后对那个变量使用.each();方法：

参考代码：
  1. // 首先你需要通过语句”var VARIABLE_NAME“来声明一个变量
  2. // 然后用等于运算符”=“来给这个变量赋值
  3. // 在这个例子中，是一个包含div元素的数组
  4. var myArray = $('body_wrap').getElements('div');
  5.  
  6. // 现在你就可以把这个变量当数组选择器使用了
  7. myArray.each(function() {
  8.     alert('a div');
  9. });

最后，如果你可能想把你的函数从选择器中独立出来。我们会在明天的关于使用函数的教程中更深入地讲解这个问题。不过，现在我们可以创建一个非常简单的示例：

参考代码：
  1. var myArray = $('body_wrap').getElements('div');
  2.  
  3. // 要创建一个函数，你可以像刚才一样声明一个变量，然后给它命名
  4. // 在等号后面使用”function()“来声明这个变量为一个函数
  5. // 最后，在 { 和 }之间写入你的函数代码
  6. var myFunction = function() {
  7.     alert('a div');
  8. };
  9.  
  10. // 现在你就可以在.each();.方法里面调用刚才的函数了
  11. myArray.each(myFunction);

注意：当你像刚才那样在.each();.方法里面调用函数时，你不需要给函数名加上引号。

复制一个数组

$A

MooTools提供了一个简单的方式——通过$A函数来复制一个数组。让我们像刚才那样使用变量创建一个数组：

参考代码：
  1. // 创建你的数组变量
  2. var myArray = $('body_wrap').getElements('div');

复制一个数组（创建该数组的副本）：

参考代码：
  1. // 建立一个新的变量名，命名为”myCopy“，然后把”myArray“的副本赋值给它
  2. var myCopy = $A(myArray );

从数组中获取指定的元素

.getLast();

.getLast();方法返回数组中最后一个元素。首先我们建立一个数组：

参考代码：
  1. var myArray = $('body_wrap').getElements('div');

现在我们可以从这个数组中获取最后一个元素：

参考代码：
  1. var lastElement = myArray.getLast();

变量lastElement现在的值就是数组myArray中的最后一个元素了。

.getRandom();

和.getLast();一样，不过它随机从数组中取得一个元素：

参考代码：
  1. var randomElement = myArray.getRandom();

变量randomElement现在的值就是从数组myArray中随机选取的一个元素了。

向数组中添加一个元素

.include();

通过这个方法，你可以给数组添加另外一个元素。只要把元素选择器传给.include();方法，它就会包含到你的数组中。我们使用下面的HTML代码：

参考代码：
  1. <div id="body_wrap">
  2.     <div>one</div>
  3.     <div>two</div>
  4.     <span id="add_to_array">add to array</span>
  5. </div>

我们可以像以前那样调用”body_wrap“下面的所有div一样来创建一个数组：

参考代码：
  1. var myArray = $('body_wrap').getElements('div');

要把另外一个元素添加到这个数组中，首先你需要把这个元素赋值给一个变量，然后使用include方法：

参考代码：
  1. // 首先把你的元素赋值给一个变量
  2. var newToArray = $('add_to_array');
  3.  
  4. // 然后把它添加到数组
  5. myArray.include(newToArray);

现在，这个数组就同时包含div和span元素了。

.combine();

和.include();方法一样，不过它可以让你把一个数组添加到一个已经存在的数组中，而不用担心有重复的内容。假设我们现在从下面的HTML中取得了两个数组：

参考代码：
  1. <div id="body_wrap">
  2.     <div>one</div>
  3.     <div>two</div>
  4.     <span class="class_name">add to array</span>
  5.     <span class="class_name">add to array, also</span>
  6.     <span class="class_name">add to array, too</span>
  7. </div>

我们可以这样建立两个数组：

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

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

参考代码：
  1. // 把数组newArrayToArray合并到数组myArray中
  2. myArray.combine(newArrayToArray );

现在myArray就包含了newArraytoArray中的所有元素。

代码示例

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

参考代码：
  1. // 创建一个数组，这个数组包含”body_wrap“里面所有CSS类名为.class_name的元素
  2. var myArray = $('body_wrap').getElements('.class_name');
  3.  
  4. // 首先建立一个要添加到数组中的元素
  5. var addSpan = $('addtoarray');
  6. // 然后建立一个要合并的数组
  7. var addMany = $$('.addMany');
  8.  
  9. // 现在我们把元素addSpan加入到数组中
  10. myArray.include(addSpan);
  11. // 然后合并数组addMany到myArray中
  12. myArray.combine(addMany);
  13.  
  14. // 建立一个需要对数组中的每个元素都要执行的函数
  15. var myArrayFunction = function(item) {
  16. // item现在指向数组中的当前元素
  17. item.setStyle('background-color', '#eee');
  18. }
  19.  
  20. // 现在对数组中的每个项目调用myArrayFunction函数
  21. myArray.each(myArrayFunction);
参考代码：
  1. <div id="body_wrap">
  2.     <div class="class_name">one</div><!-- this has gray background -->
  3.     <div>two</div>
  4.     <div class="class_name">three</div><!-- this has gray background -->
  5.     <span id="addtoarray">add to array</span>  <!-- this has gray background -->
  6.     <br /><span class="addMany">one of many</span>  <!-- this has gray background -->
  7.     <br /><span class="addMany">two of many</span>  <!-- this has gray background -->
  8. </div>
雷雨天的雷胖子

雷雨天的雷胖子

相关推荐

【原】前端技术的发展

-----------------------------------第一阶段------------------------------------. -----------------------------------第二阶段------------

RanQi0 / 0评论 2014-08-14

jQuery和Mootools冲突解决方法

闲余时间，写个博客，记录一下，最近的技术问题，O(∩_∩)O哈哈~帮同学做一个网站，发现有人用mootools框架做了一个例子，觉的很不错，自己也尝试做一个Demo。我用mootools框架做了一个菜单，当我把这个菜单加载到其他页面的时候就会出现错误，独立

恋雨烟梦 / 0评论 2013-12-02

Joomla中jQuery和Mootools解决冲突

Joomla中是使用Mootools的，而现在大量的JS则是基于jQuery的，结果就导致了，在Joomla的二次开发中，经常需要处理两者争抢$的问题。并且很多JS使用该方法后会出现一些问题，导致无法正常运行。});这样之后你不需要修改任何原有的代码，能够

海欣海夜 / 0评论 2013-06-04

4大流行AJAX框架对比：jQuery，Mootools，Dojo，Ext JS

AJAX是web2.0开发的基石，现在网上流行几种开源的AJAX框架，比如：jQuery,Mootools,Dojo,Ext JS等等，那么我们到底在什么情况下该使用那个框架？应用的广泛，包括google code也使用了jQuery。使用jQuery的站

zyb00yaonuli / 0评论 2011-11-19

eclipse的js插件－Spket自动补全，支援jQuery，Extjs，YUI，MOOTOOLS

之前一直用JSEclipse，编写普通的js倒是挺好的，语法检查自不必说，自动补全也很好，只是不支持jQuery等库，现在开发js哪还能离得开它们呀，今天在网上忽然发现一个spket，真可谓相见恨晚，普通的js自动补全当然没问题，更难能可贵的是它还支持jQ

愚盦 / 0评论 2011-09-02

AJAX跨域请求 json 数据 (javascript,mootools,jquery) 示例

我们都知道，AJAX的一大限制是不允许跨域请求。不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式，它是可以引用跨域URL的js脚本，不过需要提供一个回调函数，因此，你可以自己处理结果。让我们看看JSONP的是怎么在jQuery，MooT

Anything / 0评论 2011-08-11

MooTools教程(4):函数和MooTools

今天开始MooTools系列教程的第4讲。如果你还没有看过上一讲，请先查看上一篇教程<《Mootools 1.2教程——数组使用简介》。今天我们先不讲MooTools，而是讲一讲JavaScript中的函数的基本知识。但是，为了符合MooTools这

花花的技术 / 0评论 2011-04-06

MooTools教程(2):DOM选择器

如果你还没有准备好，请先阅读上一篇《Mootools 1.2教程——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。今天开始本系列教程的第2讲。在这一讲中，我们会学习几种选择HTML元素的方法。在

每天积累一点点 / 0评论 2011-04-06

MooTools教程(1):认识MooTools

有人最近要求我们写一个关于MooTools 1.2的30天的教程，这似乎也是个很不错的主意，于是我们决定现在就开始。在这些教程中，我们假设用户没有任何MooTools或者是JavaScript经验，但是至少有基本的HTML和CSS知识。MooTools 1

maple00 / 0评论 2011-04-06

jQuery与MooTools库的一些比对

我上大学那会儿从事的项目用的是jQuery，毕业后工作所从事的项目用的是MooTools。很幸运短期内有机会接触两款不同设计风格的优秀的JavaScript库。今天就我自己的一些认识比对下这两个JS框架，更多的是希望大家能够对MooTools这个JS框架有

suixinCaesar / 0评论 2011-10-31

MooTools 页面滚动浮动层智能定位实现代码

我是个腼腆羞涩的浮动层...

wikiwater / 0评论 2011-08-23

(jQuery,mootools,dojo)使用适合自己的编程别名命名

}) 这样你就可以使用$来代替jQuery; 在mootools里你可以这样写，因为在mootools里$$代表着一个集合 代码如下：。}) 这样你可以使用$代替dojo.ById,使用$$代替dojo.query;

zhaoxinglei00 / 0评论 2010-09-14

MooTools团队成员：我们为何强于jQuery

jQuery非常容易学习，有很杰出的特性，但是当你从插件库里去找更多的功能时，发现官方的库里面根本就没有。插件特性非常好，但是也有很不好的地方……很快你就会被无数个可用的插件弄得晕头转向，你需要花很多时间去确定哪些插件才和核心库的质量相匹配。因此，我必须首

卧斋 / 0评论 2010-09-30

基于mootools的圆角边框扩展代码

JQuery下面有个扩展是用纯JS生成的圆角，不过和DIV+CSS拼出来是一样的道理，圆角看上去都比较粗糙。不过这样多出N多图片，一堆乱七八糟的代码，相当不爽。有一个很有技巧的方法，用一张大图片+CSS来做，原理如下。用一张大的背景图片做圆角，用CSS分别

Seulementzh00 / 0评论 2010-02-07

Mootools 1.2教程 正则表达式

如果你还不熟悉怎么使用正则表达式，我强烈建议你花一定量的时间好好看一下这篇文章中的一些链接，尤其是文章结尾“更多学习”部分的链接。尽管JavaScript本身已经为RegExp对象提供了它自己的test()方法，MooTools的test()方法更好用一些

smilelg / 0评论 2009-09-15

通过Mootools 1.2来操纵HTML DOM元素

我们已经学习过如何来选取DOM元素，怎么创建数组，怎么创建函数，怎么把事件添加到元素，今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2，你可以添加新元素到一个HTML页面中，也可以删除元素，以及改变任何样式或者元素参数，这些都非常

gunnery / 0评论 2009-09-15

Mootools 1.2教程 函数

今天开始MooTools系列教程的第4讲。今天我们先不讲MooTools，而是讲一讲JavaScript中的函数的基本知识。但是，为了符合MooTools这个主题，你需要知道在哪里该使用MooTools的函数。此前，我们已经在我们的所有示例代码中，把代码都

redhightree / 0评论 2009-09-15

Mootools 1.2教程(2) DOM选择器

如果你还没有准备好，请先阅读上一篇《Mootools 1.2教程――MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。今天开始本系列教程的第2讲。在这一讲中，我们会学习几种选择HTML元素的方法。在

davidten / 0评论 2009-09-14

MooTools 1.2介绍

MooTools 1.2 JavaScript库介绍 MooTools 1.2是个强大的轻量级的JavaScript库，专门为减轻Web中交互性JavaScript开发。在某种程度上，你可以认为MooTools是CSS的扩展。例如，CSS可以让你在鼠标移上

pandalovey / 0评论 2009-09-14