当前位置: 代码迷 >> Web前端 >> MooTools课程(3):数组管理DOM元素
  详细解决方案

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

热度:627   发布时间:2012-10-12 10:17:04.0
MooTools教程(3):数组管理DOM元素
篇教程――《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>