MooTools教程(1):认识MooTools

有人最近要求咱们写一个关于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核心库

参考代码：  [复制代码]  [保存代码]

1.  

（Fdream注：如今MooTools 1.2下载下来后，默认的后缀名是”.txt“，请更改后缀为”.js“。）

在Head标签以内添加Script标签

如今，你已经在你的页面中应用了了MooTools了，你还须要一个地方来写你的代码。这里有两种选择：

1. 把下面的代码写在你的head标签以内，你的代码写在script标记以内：

参考代码：  [复制代码]  [保存代码]

1.  

2. 在外部创建一个JavaScript文件，而后在页面头部连接此文件：

参考代码：  [复制代码]  [保存代码]

1.  

在这里，你可使用任何一种方式。我一般把domready事件中调用的方法放在script标记之间，而个人函数放在外部文件中。

把代码放在domready中

MooTools的方法必须在domready事件中调用。

参考代码：  [复制代码]  [保存代码]

1. window.addEvent('domready', function() {
2.     exampleFunction();
3. });

（Fdream注：不彻底是这样，可是能够保证你的JavaScript代码尽量少地出错。顺便说一下domready事件：当页面的HTML代 码（不包括图片、flash等等，只是代码）下载完成时，此时会触发domready事件。这样能够在页面彻底下载完成（包括图片、flash等都下载完 成）以前执行你的脚本，从而避免由于一张大图要下很长时间而致使脚本不能执行，从而出现异常。）

把代码放在一个函数中

你仍然能够在domready以外建立你的函数，而后在domready中调用它：

参考代码：  [复制代码]  [保存代码]

1. var exampleFunction = function() {
2.      alert('hello')
3. };
4.  
5. window.addEvent('domready', function() {
6.     exampleFunction();
7. });

关于库的详细介绍

在这第一讲中，咱们会仔细地看了一下这个库架构的一些关键组件，而后粗略地看一下其余基本功能。

Core（核心）

核心（core）部分包含MooTools库的一些公共函数（Function）来完成一些常见的任务，也增强了许多原有功能（后面会有详细介绍）。下面的内容只是做为MooTools功能的一些例子，并不能替代您阅读MooTools的文档。

• 检查一个值（若是没有值或者为0则返回false） - $chk(value);
• 返回两个值之间的一个随机整数 - $random(min, max);
• 能够更容易地检测浏览器、浏览器的引擎及浏览器的能力

（Fdream注：第一个描述有误，$chk(value)只是检查一个值是否是已经定义或者已经赋值，为0时会返回true，只有undefined或者null时返回false。）

Native（本地对象）

在库的这一部分也包含了一些公共工具，可让你很容易地操做数组（Array，值或者对象的简单列表）、函数（Function）、数值（Number）、字符串（String）、哈希对象（Hash）和事件（Event）。这里是本地对象中的一些工具特性：

• 对数组中的每一个元素执行一段脚本 - .each();
• 获得数组中的最后一个元素 - .getLast();
• 每一个x毫秒触发一个事件 - .periodical();
• 对小数取整 - .round();
• 把rgb转换为十六进制（HEX） - .rgbToHex();

Class（类）

一个JavaScript类（相对于CSS的类），是一个功能能够重复使用的对象。若要更多地了解MooTools类，你能够看看Valerio的这篇简单介绍的文章（MooTools类——怎样使用它们）。我也同时推荐David Walsh的MooTools类模板。

Element（元素）

MooTools库的Element类提供了一些很是有用的功能。经过这个类，你能够选择DOM元素、操控他们的属性和位置、改变他们的CSS风格。这里是MooTools提供的一些很是强大的处理DOM元素的工具：

• 选择全部有相同ID或者CSS类名的DOM元素 - .getElements();
• 给一个元素添加一个CSS类 - .addClass();
• 取得一个元素的属性值 - .getProperty();
• 改变一个元素的属性值 - .setProperty();
• 取得一个元素的样式属性值 - .getStyle();
• 改变一个元素的样式属性值 - .setStyle();
• 取得一个元素的坐标位置 - .getCoordinates();

（Fdream注：不推荐在一个页面中有多个相同ID，最好不要出现，在一些浏览器下很容易出现不可预见的错误。）

Utilities（实用工具）

实用工具（Utilities）提供了更多精良的选择逻辑，包括domready事件、能够管理AJAX调用的工具、能够轻松管理cookie的工具，甚至还有”swiff“功能，能够提供JavaScript接口给ActionScript。

FX（效果）

这多是MooTools最有趣的部分了。经过Fx（效果），你能够建立”Tween“（补间动画）和”morph“（形变更画）效果，从而让你的DOM对象动起来。

• 在两个样式属性值之间建立一个动画变形（好比让一个div平缓地变大） - var myFx = new Fx.Tween(element);
• 在多个不一样的属性值之间建立一个动画变形（好比在让一个div平缓变大的过程当中，让它的边框愈来愈初，同时变换它的背景颜色） - var myFx = new Fx.Morph(element);

Request（请求）

包含一些能够轻松处理JavaScript XMLHttpRequest（AJAX）功能的工具。为了减轻整个请求/响应（request/response）带来的痛苦，Request对象还有一些专门用来处理HTML和JSON对象（JavaScript对象表示法）的扩展。

Plugins（插件）

MooTools插件扩展了核心功能，能够轻松地为你的web项目添加高级UI功能。插件列表以下：

• Fx.Slide
• Fx.Scroll
• Fx.Elements
• Drag
• Drag.Move
• Color
• Group
• Hash.Cookie
• Sortables
• Tips
• SmoothScroll
• Slider
• Scroller
• Assets
• Accordion

全局概览

在开始下一讲以前，花一点时间全面地看一下MooTools的文档。可能有些地方你看不太懂，不要管它，尽管通读它，而后吸取那些你懂的。在接下来 的29天中，咱们将逐步深刻这个库特定的部分，而后把MooTools分解成一些容易消化的小部分，可是首先，必定要好好看一下整个目录。

更多学习

一个压缩包，包含了你开始起步所须要的全部东西

包括一个MooTools 1.2核心库、一个简单的HTML文件、一个用来写你的函数的外部的JavaScript文件、一个CSS样式表文件。这个HTML文件已经已经写了详细的注释，并包含有domready事件。

其余的MooTools教程

同时，这里列出了一些其余帮助你开始的的MooTools教程。

MooTools 1.2 备忘录

这里是一份很好的MooTools 1.2功能的概括表，我才给本身打印了一份，正在找地方把它给挂起来。也许我应该顺便拜访一下打印机，而后让它们给我提供一张海报大小的：）。无论怎样，这里是MooTools 1.2备忘录的连接。

Mootools论坛

若是你想和其余人讨论MooTools，检查代码示例或者深刻讨论某个问题，你能够来这里。这才刚刚开张，可是正在逐渐热起来：MooTools 1.2论坛。