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 相关文章推荐
javascript的对话框详解与参数
Mar 08 Javascript
MooTools 1.2介绍
Sep 14 Javascript
js 获取服务器控件值的代码
Mar 05 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
用js的for循环获取radio选中的值
Oct 21 Javascript
js数组操作常用方法
May 08 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
Nov 25 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 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类(查找/修改)xml文档
2013/03/26 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
php接口实现拖拽排序功能
2018/04/23 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
layui表格实现代码
2017/05/20 Javascript
Vue自定义toast组件的实例代码
2018/08/15 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Mac下Supervisor进程监控管理工具的安装与配置
2014/12/16 Python
Python2.x版本中基本的中文编码问题解决
2015/10/12 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
python检测服务器端口代码实例
2019/08/31 Python
python对Excel的读取的示例代码
2020/02/14 Python
Python post请求实现代码实例
2020/02/28 Python
简单的Python人脸识别系统
2020/07/14 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
地道战观后感300字
2015/06/04 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android