MooTools 入门教程
目录:
1、为什么选择MooTools
2、介绍JavaScript基础
3、MooTools简介
4、DOM选择器
5、数组使用简介
6、函数
7、MooTools 1.2中的事件处理
8、操纵HTML DOM元素
9、设置和获取样式表属性
1、为什么选择MooTools
a、MooTools
设计思想
面向对象的设计思想。
优点
模块化，各模块代码非常独立，最小的核心只有8k，最大的优点是可选择使用哪些模块，用的时候只导入使用的模块即可。
语法的简洁，直观，代码写的优美，易阅读和修改。
特效（Effects）：这一点比jQuery稍强，现在也正在开发Mootools UI（这应该是Ajax框架开发的一个趋势）。
文档的完整（最新的1.2beta的文档比以前更详细）。
缺点
修改了低层的一些类：如Array, String等，这也是设计思想的不同。
JS框架中侵入性最大。
b、jQuery
设计思想
简洁的思想：几乎所有操作都是以选择DOM元素（有强大的Selector）开始，然后是对其的操作（Chaining等特性）。
优点
小，压缩后代码只有20多k（无压缩代码94k）。
文档的完整，易用性（每个API都有完整的例子，这是其它框架现在不能比的），而且网上还有很多其它的文档，书籍。
应用的广泛，包括google code也使用了jQuery。
核心的开发团队和核心人员：John Resig等。
简洁和简短的语法，容易记。
可扩展性：有大量用户开发的插件可供使用
jQuery UI，不断发展中。
友好和活跃的社区
事件处理有很多方便的方法，如click，而不是单一的addEvent之类的。
缺点
由于设计思想是追求高效和简洁，没有面向对象的扩展。设计思路和Mootools不一样。
jQuery非常容易学习，有很杰出的特性，但是当你从插件库里去更多的功能时，发现官方的库里面根本就没有。插件特性非常好，但是也有很不好的地方……很快你就会被无数个可用的插件弄得晕头转向，你需要花很多时间去确定哪些插件才和核心库的质量相匹配。如果主页上列出了这些插件还好，但是，还是要花费很大的力气去到合适的特性组合。
c、ExtJS
设计思想
组件化，推进RIA（Rich Internet Application）的应用。
优点
强大的UI，而且性能不错，这是其最大的优点。
速度快，不管是UI还是其它模块。
100%面向对象和组件化的思想，一致的语法，全局的命名空间，几乎无侵入。
文档的完整，规范，方便。
活跃的社区，迅速增加的用户量。
模块化实现，可扩展性强。
所有的组件（widgets）都可直接使用，而无需进行设置（当然，用户可以选择重新配置）。
缺点
稍复杂。
为重量级的框架（包含大量UI），体积大。如果导入ext-all.js，压缩后也有近500k。
注意：EXT
的商业使用：如果只是把extjs包含在自己的项目中，而且这个项目不是卖给用户做二次开发的工具箱，或组件库，就可以遵守LGPL协议免费使用；否则要付费。
轻量级开发选择MooTools。
2、介绍JavaScript基础
简单数据类型
undefined，boolean，number，string
简单类型都不是对象，JavaScript没有将对象化的能力赋予这些简单类型。直接被赋予简单类型常量值的标识符、变量和参数都不是一个对象。
所谓“对象化”，就是可以将数据和代码组织成复杂结构的能力。JavaScript中只有object类型和function
类型提供了对象化的能力。
没有类,object就是对象的类型。在JavaScript中不管多么复杂的数据和代码，都可以组织成object形式的对象。但JavaScript却没有 “类”的概念！
JavaScript的代码就只有function一种形式，function就是函数的类型。也许其他编程语言还有procedure或 method等代码概念，但在JavaScript里只有function一种形式。当我们写下一个函数的时候，只不过是建立了一个function类型的实体而已。
看两个例子js1.html,js2.html
JavaScript执行引擎并非一行一行地分析和执行程序，而是一段一段地分析执行的。而且，在同一段程序的分析执行中，定义式的函数语句会被提取出来优先执行。函数定义执行完之后，才会按顺序执行其他语句代码。也就是说，在第一次调用myfunc之前，第一个函数语句定义的代码逻辑，已被第二个函数定义语句覆盖了。所以，两次都调用都是执行最后一个函数逻辑了。
JavaScript函数的神奇之处还体现在另外两个方面：一是函数function类型本身也具有对象化的能力，二是函数function与对象 object超然的结合能力。
先来说说函数的对象化能力。
任何一个函数都可以为其动态地添加或去除属性，这些属性可以是简单类型，可以是对象，也可以是其他函数。也就是说，函数具有对象的全部特征，你完全可以把函数当对象来用。其实，函数就是对象，只不过比一般的对象多了一个括号“()”操作符，这个操作符用来执行函数的逻辑。即，函数本身还可以被调用，一般对象却不可以被调用，除此之外完全相同。
js3.html
js4.html,js5.html
对象和函数可以象数组一样，用属性名或方法名作为下标来访问并处理。那么，它到底应该算是数组呢，还是算对象？
数组应该算是线性数据结构，线性数据结构一般有一定的规律，适合进行统一的批量迭代操作等。而对象是离散数据结构，适合描述分散的和个性化的东西。
JavaScript里的函数和对象既有对象的特征也有数组的特征。这里的数组被称为“字典”，一种可以任意伸缩的名称值对儿的集合。其实， object和fun
ction的内部实现就是一个字典结构，但这种字典结构却通过严谨而精巧的语法表现出了丰富的外观。
我们再来看看function与object的超然结合吧。
JavaScript中也有this，但这个this却与C++、C#或Java等语言的this不同。一般编程语言的this就是对象自己，而 JavaScript的this却并不一定！
js6.html
从上面的代码可以看出，同一个函数可以从不同的角度来调用，this并不一定是函数本身所属的对象。
在JavaScript函数中，你只能把this看成当前要服务的“这个”对象。this是一个特殊的内置参数，根据this参数，您可以访问到“这个” 对象的属性和方法，但却不能给this参数赋值。在一般对象语言中，方法体代码中的this可以省略的，成员默认都首先是“自己”的。但 JavaScript却不同，由于不存在“自我”，当访问“这个”对象时，this不可省略！
JavaScript提供了传递this参数的多种形式和手段，其中，象BillGates.WhoAmI()和SteveJobs.WhoAmI()这种形式，是传递this参数最正规的形式，此时的this就是函数所属的对象本身。
怎样建立对象？
JSON的形式就是用大括“{}”号包括起来的项目列表，每一个项目间并用逗号“,”分隔，而项目就是用冒号“:”分隔的属性名和属性值。这是典型的字典表示形式，也再次表明了 JavaScript里的对象就是字典结构。不管多么复杂的对象，都可以被一句JSON代码来创建并赋值。
字符串转数组工具
其实，JSON就是JavaScript对象最好的序列化形式，它比XML更简洁也更省空间。对象可以作为一个JSON形式的字符串，在网络间自由传递和交换信息。而当需要将这个JSON字符串变成一个JavaScript对象时，只需要使用eval函数这个强大的数码转换引擎，就立即能得到一个 JavaScript内存对象。
js7.html
JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对象，因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”，那么由该函数构造出来的对象应该都会具有这个“原型”的特性。事实上，在构造函数的prototype上定义的所有属性和方法，都是可以通过其构造的对象直接访问和调用的。也可以这么说，prototype提供了一同类对象共享属性和方法的机制。
js8.html
在JavaScript内部，对象的属性和方法追溯机制是通过所谓的prototype链来实现的。当用new操作符构造对象时，也会同时将构造函数的 prototype对象指派给新创建的对象，成为该对象内置的原型对象。对象内置的原型对象应该是对外不可见的，尽管有些浏览器(如Firefox)可以让我们访问这个内置原型对象，但并不建议这样做。内置的原型对象本身也是对象，也
有自己关联的原型对象，这样就形成了所谓的原型链,JavaScript特有的“原型继承”。。
js9.html
对象可以掩盖原型对象的那些属性和方法，一个构造函数原型对象也可以掩盖上层构造函数原型对象既有的属性和方法。这种掩盖其实只是在对象自己身上创建了新的属性和方法，只不过这些属性和方法与原型对象的那些同名而已。
js10.html
我们可以随时给原型对象动态添加新的属性和方法，从而动态地扩展基类的功能特性。这在静态对象语言中是很难想象的。
js11.html
3、MooTools简介
MooTools 1.2是个强大的轻量级的JavaScript库，专门为减轻Web中交互性JavaScript开发。在某种程度上，你可以认为MooTools是CSS的扩展。例如，CSS可以让你在鼠标移上去时发生改变。JavaScript允许你接触更多的时间（点击事件、鼠标悬停事件、键盘事件……），MooTools让这一切变得非常容易。
另外，MooTools还有各种各样的非常好的扩展，可以让你不只是改变一个元素的属性，还可以让你有”morph“（变形）或者”tween“（补间动画）属性，让你有能力去创建动画效果。
引用MooTools 1.2
首先，下载并引用MooTools 1.2核心库。
* 下载MooTools 1.2核心库
* 把MooTools 1.2核心库上传到你的服务器或者工作区
* 在你的HTML文档头部head标记之内链接MooTools 1.2核心库
<script src="mootools-1.2.1-core-nc.js" type="text/javascript"></script>
把代码放在domready中
MooTools的方法必须在domready事件中调用。domready事件：当页面的HTML代码（不包括图片、flash等等，只是代码）下载完成时，此时会触发domready事件。这样可以在页面完全下载完成（包括图片、 flash等都下载完成）之前执行你的脚本，从而避免因为一张大图要下很长时间而导致脚本不能执行，从而出现异常。
你仍然可以在domready之外创建你的函数，然后在domready中调用它：
MooTools1-1.html
关于库的详细介绍
在这里，我们会简单了解这个库架构的一些关键组件，然后粗略地看一下其他基本功能。
Core（核心）
核心（core）部分包含MooTools库的一些公共函数（Function）来完成一些常见的任务，也加强了许多原有功能。
检查一个值是不是已经定义或者已经赋值（如果为0时会返回true，只有undefined或者null时返回false） - $chk(value);
返回两个值之间的一个随机整数 - $random(min, max);
可以更容易地检测浏览器、浏览器的引擎及浏览器的能力
Native（本地对象）
在库的这一部分也包含了一些公共工具，可以让你很容易地操作数组（Array，值或者对象的简单列表）
、函数（Function）、数值（Number）、字符串（String）、哈希对象（Hash）和事件（Event）。这
里是本地对象中的一些工具特性：
对数组中的每个元素执行一段脚本 - .each();
得到数组中的最后一个元素 - .getLast();
每个x毫秒触发一个事件 - .periodical();
对小数取整 - .round();
把rgb转换为十六进制（HEX） - .rgbToHex();
Class（类）
一个JavaScript类（相对于CSS的类），是一个功能可以重复使用的对象。
Element（元素）
MooTools库的Element类提供了一些非常有用的功能。通过这个类，你可以选择DOM元素、操控他们的属性和位置、改变他们的CSS风格。这里是MooTools提供的一些非常强大的处理DOM元素的工具：
选择所有有相同ID或者CSS类名的DOM元素 - .getElements();
给一个元素添加一个CSS类 - .addClass();
取得一个元素的属性值 - .getProperty();
改变一个元素的属性值 - .setProperty();
取得一个元素的样式属性值 - .getStyle();
改变一个元素的样式属性值 - .setStyle();
取得一个元素的坐标位置 - .getCoordinates();
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功能。插件列表如下：
mootools/more
Fx.Slide
Fx.Scroll
Fx.Elements
Drag
Drag.Move
Color
Group
Hash.Cookie
Sortables
Tips
SmoothScroll
Slider
Scroller
Assets
Accordion
4、DOM选择器
现在学习几种选择HTML元素的方法。在许多方面，这是MooTools用得最多最基本的。
基本的方法
$();
$函数是MooTools中基本的选择器。你可以通过它来根据一个ID选择DOM元素。
// 选择ID为”body_wrap“的元素
$('body_wrap');
<div id="body_wrap">
</div>
.getElement();
.getElement(); 扩展了$方法，可以让你简化你的选择操作。例如，你可以通过$方法来选择ID为”body_wrap“的元素，然后选择第一

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。