Mootools 1.2教程(3) 数组使用简介_Mootools

今天,我们在来看看如何使用数组来管理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文件和上面的所有例子。

时间: 2024-10-11 05:36:51

Mootools 1.2教程(3) 数组使用简介_Mootools的相关文章

Mootools 1.2教程 滚动条(Slider)_Mootools

尽管滚动条(Slider)遵循这个熟悉的模式,但是任然还有一点特殊的地方. 基本用法 创建一个新的滚动条(Slider)对象 我们首先从HTML和CSS开始.基本的想法是创建一个滚动条的div,因此是一个长的长方形(长度取决于我们用滚动条做什么),还有一个子元素作为滑块. 参考代码: 复制代码 代码如下: <div id="slider"><div id="knob"></div></div> 我们的CSS也可以这么简

PHP开发框架Yii Framework教程(28) Data Provider简介

这开始介绍Zii组件之前,先简要介绍一下Yii支持的数据源接口 IDataProvider,IDataProvider主要功能是为UI组件如 GridView,ListView等提供数据源,同时也支持数据的分页和排序.下图为Yii内置的三种数据源: CActiveDataProvider  基于Active Record的数据源 CArraryDataProvider 基于数组的数据源 CSqlDataProvider      基于SQL查询的数据源 开发框架Yii Framework教程(2

Mootools 1.2教程(2) DOM选择器_Mootools

如果你还没有准备好,请先阅读上一篇<Mootools 1.2教程(1)--MooTools介绍>.我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本. 今天开始本系列教程的第2讲.在这一讲中,我们会学习几种选择HTML元素的方法.在许多方面,这是MooTools用得最多最基本的.毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中. 基本的方法 $(); $函数是MooTools中基本的选择器.你可以通过它来根据一个ID选择DOM元素.

Dreamweaver 4 简明教程(一、Dreamweaver 简介)

dreamweaver|教程 一.Dreamweaver 简介 Dreamweaver是Macromedia公司的出品的一款"所见即所得"的网页编辑工具.与 Frontpage不同,Deamweaver采用的是Mac机浮动面版的设计风格,对于初学者来说可能会感到不适应.但当你习惯了其操作方式后,就会发现Dreamweaver的直观性与高效性是Frontpage所无法比拟的. Dreamweaver对于DHTML(动态网页)的支持特别好,可以轻而易举地做出很多眩目的互动页面特效.插件式的

asp入门教程:ASP Session 对象简介

asp入门教程:ASP Session 对象简介 Session对象是用来储存的信息,或更改设置的一个用户会议.变量存储在Session对象举办资讯单一用户,并提供给所有的网页在一个应用程序. -------------------------------------------------- ------------------------------ Session对象 当你正与一个应用程序,你打开它,做一些改变,然后将其关闭.这是很像会议.计算机知道你是谁.它知道当您启动应用程序,当您结束

Mootools 1.2教程 事件处理_Mootools

今天我们开始第五讲,在上一讲(<Mootools 1.2教程(4)--函数>)中,我们学习了在MooTools 1.2中建立和使用函数的几种不同方式.下一步就是理解事件了.和选择器类似,事件也是建立互动界面的一个重要部分.一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果.先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件. 左键单击事件 左键单击事件是web开发中最常见的事件.超链接识别点击事件,然后把你带到另外一个URL地址.MooTools能够识别其他DOM元素上的点击事

Mootools 1.2教程 排序类和方法简介_Mootools

Sortables类还提供了包括一个名叫"serialize"的优秀方法,通过这个方法你额可以把这些元素的id作为数组输出--对于服务器端的开发非常有用.接下来,我们看看如何创建一个新的排序项集合,还有一定要看一下最后的演示实例. 基本知识 创建一个新的Sortable对象 首先,我们要把我们要排序的元素赋值给变量.对于Sortables来说,如果你想要多个列表之间的元素能够在相互之间拖拽,你需要把这些元素全部都放在一个数组中,就像这样: 参考代码: 复制代码 代码如下: var so

Mootools 1.2教程 定时器和哈希简介_Mootools

定时器能比它表面看起来做更多的事情--定时能定期地触发一个函数.另一方面,hash则是键值对(key/value)的集合.如果你对hash还不熟悉现在也不要着急--我们今天就会做一个快速简要的介绍,并且会提供一些延伸阅读的相关链接.就像MooTools中的所有东西一样,一旦你看到它的正确用法,它使用起来就非常的简单,并且不可思议的有用. .periodical()函数 基本用法 使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical();,那样你的函数就会定时地触发.和以前的一样

Mootools 1.2教程 设置和获取样式表属性_Mootools

欢迎开始这一系列的教程的第七讲.今天,我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式,这将给你在UI上带来很大的控制权.处理样式非常简单,不过今天我们要做一些调整.例如,我们要介绍键值对(key-value pair)对象.我们也会讲到在domready之外来传递变量,就像我们在关于函数的那一讲中学到的一样.从这里开始,我们会开始慢慢提高难度,介绍一些必要的编程概念.如果你是JavaScript新手或者第一次开始学MooTools,请确保你在明白了前面的教程,你可以