如果你还没有准备好开始这一讲，请参考这一系列的教程，这里是《MooTools 1.2系列教程目录》。

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

基本方法

.setStyle();

这个函数可以允许你设置一个元素的样式属性。我们在前面的一些例子中已经使用过了。你要做的就是把它放在你的 选择器之后，那么它将改变一个元素或者多个元素的样式属性。

如果你还没有准备好，请阅读以前的教程，这里是《MooTools 1.2系列教程目录》。

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

基本方法

.get();

这个工具可以让你获取元素的属性（property）。元素的属性是组成一个HTML元素的各种不同部分，例如src、value、name等等。使用.get();方法非常简单：

还是需要一个目录，那就做一个吧！

MooTools是近来仅次于jQuery流行的JavaScript框架，也是我一直比较喜欢的开发框架，最近也正在写MooTools 1.2的注释文档。本来自己也想写一些关于MooTools的教程来着，但是自己很懒，又担心自己写的不好，反倒误了初学者。正好今天无意在国外的论坛上看到这么一个blog，发现有这么一系列的教程，写的很好，很适合初学者和对MooTools完全不熟悉的人，于是决定全部中文化。

另外，此翻译版本已获得原作者支持，在其第一篇文章中已有本文链接。

• Mootools 1.2教程(1)——MooTools介绍
• Mootools 1.2教程(2)——DOM选择器
• Mootools 1.2教程(3)——数组使用简介
• Mootools 1.2教程(4)——函数
• Mootools 1.2教程(5)——事件处理
• Mootools 1.2教程(6)——操纵HTML DOM元素
• Mootools 1.2教程(7)——设置和获取样式表属性
• Mootools 1.2教程(8)——输入过滤第一部分（数字）
• Mootools 1.2教程(9)——输入过滤第二部分（字符串）
• Mootools 1.2教程(10)——Fx.Tween的使用
• Mootools 1.2教程(11)——Fx.Morph、Fx选项和Fx事件
• Mootools 1.2教程(12)——用Drag.Move实现拖拽和拖放
• Mootools 1.2教程(13)——正则表达式
• Mootools 1.2教程(14)——定时器和哈希简介
• Mootools 1.2教程(15)——滚动条（Slider）
• Mootools 1.2教程(16)——排序类和方法简介
• Mootools 1.2教程(17)——手风琴插件
• Mootools 1.2教程(18)——类(一)
• Mootools 1.2教程(19)——Tooltips
• Mootools 1.2教程(20)——选项卡效果（Tabs）
• Mootools 1.2教程(21)——类（二）
• Mootools 1.2教程(22)——同时进行多个形变动画
• Mootools 1.2教程(23)——滑动效果（Slide）
• 待续……

如果你还没有准备好，请阅读以前的教程，这里是《MooTools 1.2系列教程目录》。

今天我们开始第五讲，在上一讲（《Mootools 1.2教程(4)——函数》）中，我们学习了在MooTools 1.2中建立和使用函数的几种不同方式。下一步就是理解事件了。和选择器类似，事件也是建立互动界面的一个重要部分。一旦你掌握了一个元素，你需要去决定什么行为来触发什么效果。先把效果留着以后在讲，我们首先看一看中间步骤和一些常见的事件。

左键单击事件

左键单击事件是web开发中最常见的事件。超链接识别点击事件，然后把你带到另外一个URL地址。MooTools能够识别其他DOM元素上的点击事件，在设计和功能上给了你极大的灵活性。给一个元素添加一个点击事件的第一步：

如果你还没有准备好，请阅读以前的教程，这里是《MooTools 1.2系列教程目录》。

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

但是，为了符合MooTools这个主题，你需要知道在哪里该使用MooTools的函数。此前，我们已经在我们的所有示例代码中，把代码都放在domready方法中。当我们需要把它放在domready的外面时，我们使用了函数（function）。在你在domready里面调用函数之前，函数并不会被执行。

一般来说，一种比较好的方式是尽可能地把你的函数代码都放在页面之外的某一个地方，然后通过JavaScript应用来调用它们。当你只是写代码玩玩，可能把所有的东西写在一个页面上更容易一些。在这个教程中，我们使用下面的约定：

如果你还没有准备好，请阅读以前的教程，这里是《MooTools 1.2系列教程目录》。

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

基本方法

.each();

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

如果你还没有准备好，请先阅读上一篇《Mootools 1.2教程(1)——MooTools介绍》。我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本。

今天开始本系列教程的第2讲。在这一讲中，我们会学习几种选择HTML元素的方法。在许多方面，这是MooTools用得最多最基本的。毕竟，要创建一个基于HTML元素的交互性用户体验，你必须首先把它们掌握在手中。

基本的方法

$();

$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。

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

MooTools 1.2 JavaScript库介绍

MooTools 1.2是个强大的轻量级的JavaScript库，专门为减轻Web中交互性JavaScript开发。在某种程度上，你可以认为MooTools是CSS的扩展。例如，CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间（点击事件、鼠标悬停事件、键盘事件……），MooTools让这一切变得非常容易。

另外，MooTools还有各种各样的非常好的扩展，可以让你不只是改变一个元素的属性，还可以让你有”morph“（变形）或者”tween“（补间动画）属性，让你有能力去创建动画效果，就像你在我的导航菜单上看到的一样（Fdream注：原作者的，我的首页也有）。

这只是一个例子，MooTools可以让你做更多的事情。在接下来的30天里，我们将深入MooTools库，探索从数组（Array）和函数（Function）到Fx.Slide，以及其他捆绑插件的每一个东西。

引用MooTools 1.2

首先，下载并引用MooTools 1.2核心库。

• 下载MooTools 1.2核心库
• 把MooTools 1.2核心库上传到你的服务器或者工作区
• 在你的HTML文档头部head标记之内链接MooTools 1.2核心库