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

美眉a30

美眉a30

2016-02-20 00:41

下面图老师小编跟大家分享MooTools教程(3):数组管理DOM元素,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

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

基本方法

.each();

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

参考代码:$$().each(() {     alert(); });

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

参考代码:divOne/div divTwo/div

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

参考代码:$().getElements().each(() {     alert(); }); 参考代码:div id=     divOne/div     divTwo/div /div

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

参考代码:  myArray = $().getElements();   myArray.each(() {     alert(); });

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

参考代码: myArray = $().getElements();    myFunction = () {     alert(); };   myArray.each(myFunction);

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

复制一个数组

$A

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

参考代码:  myArray = $().getElements();

复制一个数组(创建该数组的副本):

参考代码:  myCopy = $A(myArray ); 从数组中获取指定的元素

.getLast();

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

参考代码: myArray = $().getElements();

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

参考代码: lastElement = myArray.getLast();

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

.getRandom();

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

参考代码: randomElement = myArray.getRandom();

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

向数组中添加一个元素

.include();

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

参考代码:div id=     divone/div     divtwo/div     span id=add to array/span /div

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

参考代码: myArray = $().getElements();

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

参考代码:  newToArray = $();   myArray.include(newToArray);

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

.combine();

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

参考代码:div id=     divone/div     divtwo/div     span class=add to array/span     span class=add to array, also/span     span class=add to array, too/span /div

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

参考代码:  myArray= $().getElements();    newArrayToArray = $$();

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)参考代码: myArray.combine(newArrayToArray );

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

代码示例

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

参考代码:  myArray = $().getElements();    addSpan = $();  addMany = $$();   myArray.include(addSpan); myArray.combine(addMany);    myArrayFunction = (item) { item.setStyle(, ); }   myArray.each(myArrayFunction); 参考代码:div id=     div class=one/div     divtwo/div     div class=three/div     span id=add to array/span       br /span class=one of many/span       br /span class=two of many/span   /div 延伸学习

这个教程并没有打算涵盖你能对数组做的全部事情,但是希望能够给你一个参考,告诉你MooTools提供了一些什么功能。要学习更多关于数组的东西,请仔细阅读这些内容:

这个页面中有许多

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

展开更多 50%)
分享

猜你喜欢

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

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

MooTools教程(6):操纵HTML DOM元素

Web开发
MooTools教程(6):操纵HTML DOM元素

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

MooTools教程(2):DOM选择器

Web开发
MooTools教程(2):DOM选择器

MooTools教程(1):认识MooTools

Web开发
MooTools教程(1):认识MooTools

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jQuery 创建Dom元素

Web开发
jQuery 创建Dom元素

MooTools教程(4):函数和MooTools

Web开发
MooTools教程(4):函数和MooTools

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Javascript利用循环绑定事件的例子

Javascript利用循环绑定事件的例子

Windows8.1 update技巧:加快OneDrive上传速度

Windows8.1 update技巧:加快OneDrive上传速度
下拉加载更多内容 ↓