MooTools 1.2介绍


Posted in Javascript onSeptember 14, 2009

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 相关文章推荐
关于JS控制代码暂停的实现方法分享
Oct 11 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
bootstrap表单示例代码分享
May 18 Javascript
基于打包工具Webpack进行项目开发实例
May 29 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
JavaScript根据json生成html表格的示例代码
Oct 24 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 #Javascript
JavaScript 函数调用规则
Sep 14 #Javascript
prototype与jquery下Ajax实现的差别
Sep 13 #Javascript
JS 参数传递的实际应用代码分析
Sep 13 #Javascript
javascript类继承机制的原理分析
Sep 12 #Javascript
javascript 类定义的4种方法
Sep 12 #Javascript
一个简单的javascript类定义例子
Sep 12 #Javascript
You might like
用PHP发电子邮件
2006/10/09 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
php二维码生成以及下载实现
2017/09/28 PHP
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
基于jquery的模态div层弹出效果
2010/08/21 Javascript
js 验证密码强弱的小例子
2013/03/21 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
JavaScript常用数组算法小结
2016/02/13 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
2017/07/10 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python实现加载及解析properties配置文件的方法
2018/03/29 Python
详解python 注释、变量、类型
2018/08/10 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Django重设Admin密码过程解析
2020/02/10 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
医学生自荐信范文
2013/12/03 职场文书
信息技术研修心得体会
2016/01/08 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
vue实现滑动解锁功能
2022/03/03 Vue.js
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS