基本方法
.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 myArray = $('body_wrap').getElements('div');
-
-
- myArray.each(function() {
- alert('a div');
- });
最后,如果你可能想把你的函数从选择器中独立出来。我们会在明天的关于使用函数的教程中更深入地讲解这个问题。不过,现在我们可以创建一个非常简单的示例:
参考代码:
-
var myArray = $('body_wrap').getElements('div');
-
-
-
-
-
var myFunction = function() {
- alert('a div');
- };
-
-
- myArray.each(myFunction);
注意:当你像刚才那样在.each();.方法里面调用函数时,你不需要给函数名加上引号。
复制一个数组
$A
MooTools提供了一个简单的方式——通过$A函数来复制一个数组。让我们像刚才那样使用变量创建一个数组:
参考代码:
-
-
var myArray = $('body_wrap').getElements('div');
复制一个数组(创建该数组的副本):
参考代码:
-
-
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');
-
-
-
var newArrayToArray = $$('.class_name');
现在我们可以使用.combine();方法来合并两个数组,这个方法会自己处理重复的元素,因此我们不需要处理:
参考代码:
-
- myArray.combine(newArrayToArray );
现在myArray就包含了newArraytoArray中的所有元素。
代码示例
数组可以让你遍历包含所有项目的列表,并对每个元素执行相同的代码。在这个例子中,注意变量”item“作为当前元素的替代符的使用。
参考代码:
-
-
var myArray = $('body_wrap').getElements('.class_name');
-
-
-
var addSpan = $('addtoarray');
-
-
var addMany = $$('.addMany');
-
-
- myArray.include(addSpan);
-
- myArray.combine(addMany);
-
-
-
var myArrayFunction = function(item) {
-
- item.setStyle('background-color', '#eee');
- }
-
-
- myArray.each(myArrayFunction);
参考代码:
- <div id="body_wrap">
- <div class="class_name">one</div>
- <div>two</div>
- <div class="class_name">three</div>
- <span id="addtoarray">add to array</span>
- <br /><span class="addMany">one of many</span>
- <br /><span class="addMany">two of many</span>
- </div>
相关推荐
今天,我们在来看看如何使用数组来管理DOM元素。基本方法 .each(); 在处理数组时,.each();方法是你最好的朋友。它提供了一种很容易的方法来遍历数组的每个元素,如果有需要还可以对其中的元素进行任何逻辑处理。...
一周学会Mootools 1.4中文教程(1)Dom选择器
我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素。通过MooTools 1.2,你可以添加新元素到一个HTML页面中,也可以删除元素,以及...
如果你还没有准备好,请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。...你可以通过它来根据一个ID选择DOM元素。 参考代码: 代码如下:// 选择ID为”body_wrap“的元素 $(‘body_wrap’);
mootools mootools 教程 mootools
mootools教程.pdf
mootools框架入门教程mootools框架入门教程mootools框架入门教程
MooTools 1.5.2服务器有关总体上有关mootools的更多信息,建议您访问简而言之,它是用于OOP支持的Web开发库。 Mootools Server是精简版,可为您提供mootools库中的所有功能,而无需浏览器特定的内容安装获取运行npm ...
通过popstate或hashchange进行历史记录管理。 在不重新加载的情况下替换页面的URL,并在较旧的浏览器上回退到Hashchange。 该插件是MooTools 一部分 。 建造 通过构建,需要和已注册到Packager packager ...
mootools.affix Mootools.Affix
Mootools 1.2实例,Mootools 1.2快速学习教程
mootools相关chm,小动画gif教程。网上收集的资料。.
MooTools 锻造厂MooTools Forge 的官方存储库。 这是出色的的一个分支。安装在下面的文本中,将替换为您将存储库克隆到的目录(即此 README 文件所在的目录)。 要拥有一个工作伪造,您首先需要一个安装了 PHP 和 ...
自动完成器(v1.1) 图片提供:Harald Kirschner- ://digitarald.de/project/autocompleter/ 由Jo Carter(在github上的天使)和partikule(在github上)更新为可与MooTools 1.4.5(具有/不具有兼容性)一起使用。...
mootools详细教程 mootools框架【一】-Element篇: 方法完全解析 mootools框架【一】-Element篇: 高级应用举例 mootools框架【二】-Core篇: 方法完全解析 mootools框架【二】-Core篇: 主要方法测试实例 mootools框架...
资源名称:mootools 中文教程 详细经典 WORD版内容简介:本文档主要讲述的是 mootools 中文教程 详细经典;mootools是一个非常强大的JS类库,但是在网上的中文参考资料不多,本文是在网上收集了一些整合起来给大家...