|
|
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();
});
关于库的详细介绍
在这第一讲中，我们会仔细地看了一下这个库架构的一些关键组件，然后粗略地看一下其他基本功能。
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();
选择所有有相同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 1.2 备忘录
这里是一份很好的MooTools 1.2功能的归纳表，我才给自己打印了一份，正在找地方把它给挂起来。也许我应该顺便拜访一下打印机，然后让它们给我提供一张海报大小的：）。不管怎样，这里是MooTools 1.2备忘录的链接。
JavaScript技术：MooTools 1.2介绍，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
