MooTools.docx

MooTools.docx

《MooTools.docx》由会员分享，可在线阅读，更多相关《MooTools.docx（128页珍藏版）》请在冰豆网上搜索。

MooTools

目录

MooTools教程

（1）:

认识MooTools4

MooTools1.2JavaScript库介绍4

引用MooTools1.24

在Head标签之内添加Script标签4

把代码放在domready中5

把代码放在一个函数中5

关于库的详细介绍5

全局概览7

更多学习7

MooTools教程

（2）:

DOM选择器8

基本的方法8

用运算符包含和排除结果10

基于元素顺序的选择器11

代码举例12

更多学习……13

MooTools教程（3）:

数组管理DOM元素13

基本方法13

复制一个数组15

从数组中获取指定的元素15

向数组中添加一个元素16

代码示例17

延伸学习18

MooTools教程（4）:

函数和MooTools18

函数基础19

单个参数20

多个参数20

返回值21

把函数作为参数22

代码示例22

延伸学习...23

MooTools教程（5）:

事件处理24

左键单击事件24

鼠标进入和离开事件25

删除一个事件26

textarea或者input中的按键事件26

示例27

更多学习……28

MooTools教程（6）:

操纵HTMLDOM元素28

基本方法28

移动元素30

创建一个新元素31

示例32

更多学习...34

MooTools教程（7）:

设置和获取样式表属性34

基本方法35

设置和获取多个样式表属性35

代码示例37

更多学习...40

MooTools教程（8）:

输入过滤-数字40

rgbToHex（）40

toInt（）41

$type（）41

limit（）42

示例代码42

更多学习43

MooTools教程（9）:

输入过滤-字符串43

trim（）44

clean（）45

contains（）45

substitute（）46

更多学习48

MooTools教程（10）:

Fx.Tween渐变48

Tween的快捷方法49

更多渐变（Tween）52

更多学习……54

MooTools教程（11）:

Fx.Morph、Fx选项和Fx事件55

Fx.Morph55

Fx选项（Options）57

Fx的事件59

示例60

更多学习……62

MooTools教程（12）:

Drag.Move来实现拖放62

基本用法62

代码示例66

更多学习……69

MooTools教程（13）:

正则表达式69

基本用法69

有趣的事情71

更多学习75

MooTools教程（14）:

定时器和Hash对象76

.periodical（）函数76

内置的.bind（）方法76

停止一个定时触发的函数77

代码示例77

Hash快速入门78

更多学习80

MooTools教程（15）:

滚动条（Slider）81

基本用法81

代码示例83

MooTools教程

（1）:

认识MooTools

有人最近要求我们写一个关于MooTools1.2的30天的教程，这似乎也是个很不错的主意，于是我们决定现在就开始。

在这些教程中，我们假设用户没有任何MooTools或者是JavaScript经验，但是至少有基本的HTML和CSS知识。

MooTools1.2JavaScript库介绍

MooTools1.2是个强大的轻量级的JavaScript库，专门为减轻Web中交互性JavaScript开发。

在某种程度上，你可以认为MooTools是CSS的扩展。

例如，CSS可以让你在鼠标移上去时发生改变。

JavaScript允许你接触更多的时间（点击事件、鼠标悬停事件、键盘事件……），MooTools让这一切变得非常容易。

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

原作者的，我的首页也有）。

这只是一个例子，MooTools可以让你做更多的事情。

在接下来的30天里，我们将深入MooTools库，探索从数组（Array）和函数（Function）到Fx.Slide，以及其他捆绑插件的每一个东西。

引用MooTools1.2

首先，下载并引用MooTools1.2核心库。

1.下载MooTools1.2核心库

2.把MooTools1.2核心库上传到你的服务器或者工作区

3.在你的HTML文档头部head标记之内链接MooTools1.2核心库

参考代码：

 [复制代码] [保存代码]

1.

（Fdream注：

现在MooTools1.2下载下来后，默认的后缀名是”.txt“，请更改后缀为”.js“。

）

在Head标签之内添加Script标签

现在，你已经在你的页面中应用了了MooTools了，你还需要一个地方来写你的代码。

这里有两种选择：

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

参考代码：

 [复制代码] [保存代码]

1.

2.//Mootools code goes here

3.

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类——怎样使用它们）。

我也同时推荐DavidWalsh的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平缓地变大）-varmyFx=newFx.Tween（element）;

∙在多个不同的属性值之间创建一个动画变形（比如在让一个div平缓变大的过程中，让它的边框越来越初，同时变换它的背景颜色）-varmyFx=newFx.Morph（element）;

Request（请求）

包含一些可以轻松处理JavaScriptXMLHttpRequest（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分解成一些容易消化的小部分，但是首先，一定要好好看一下整个目录。

更多学习

一个压缩包，包含了你开始起步所需要的所有东西

包括一个MooTools1.2核心库、一个简单的HTML文件、一个用来写你的函数的外部的JavaScript文件、一个CSS样式表文件。

这个HTML文件已经已经写了详细的注释，并包含有domready事件。

其他的MooTools教程

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

MooTools1.2备忘录

这里是一份很好的MooTools1.2功能的归纳表，我才给自己打印了一份，正在找地方把它给挂起来。

也许我应该顺便拜访一下打印机，然后让它们给我提供一张海报大小的：

）。

不管怎样，这里是MooTools1.2备忘录的链接。

Mootools论坛

如果你想和其他人讨论MooTools，检查代码示例或者深入讨论某个问题，你可以来这里。

这才刚刚开张，但是正在逐渐热起来：

MooTools1.2论坛。

MooTools教程

（2）:

DOM选择器

如果你还没有准备好，请先阅读上一篇《Mootools1.2教程

（1）——MooTools介绍》。

我们讲了怎么引用MooTools1.2以及怎么在domready里面调用你的脚本。

今天开始本系列教程的第2讲。

在这一讲中，我们会学习几种选择HTML元素的方法。

在许多方面，这是MooTools用得最多最基本的。

毕竟，要创建一个基于HTML元素的交互性用户体验，你必须首先把它们掌握在手中。

基本的方法

$（）;

$函数是MooTools中基本的选择器。

你可以通过它来根据一个ID选择DOM元素。

参考代码：

 [复制代码] [保存代码]

1.// 选择ID为”body_wrap“的元素

2.$（'body_wrap'）;

参考代码：

 [复制代码] [保存代码]

1.

2.