Mootools 1.2教程(1)——MooTools介绍

MooTools 1.2介绍

原文地址：30 Days of Mootools 1.2 Tutorials - Day 1 - Intro to the Library

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

相关推荐：Mootools v1.11 中文帮助手册

教程目录：

• 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相关链接：

• 官方网站：http://mootools.net

• 在线文档：http://mootools.net/docs/

• 官方博客：http://mootools.net/blog/

• 官方论坛：http://groups.google.com/group/mootools-users

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核心库

参考代码：

<script src="mootools-1.2-core.js” type="text/javascript"></script>

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

在Head标签之内添加Script标签

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

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

参考代码：

<script type="text/javascript"> 
//Mootools code goes here 
</script>

2. 在外部建立一个JavaScript文件，然后在页面头部链接此文件：

参考代码： 

<script src="myJavaScriptFile.js" type="text/javascript"></script>

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

把代码放在domready中

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

参考代码： 

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

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

把代码放在一个函数中

你仍然可以在domready之外创建你的函数，然后在domready中调用它：

参考代码： 

var exampleFunction = function() { 
     alert('hello') 
}; 
window.addEvent('domready', function() { 
    exampleFunction(); 
});