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 相关文章推荐
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 Javascript
详解Javascript事件驱动编程
Jan 03 Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
webpack之引入图片的实现及问题
Oct 08 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 UTF8 文件的签名问题
2009/10/30 PHP
PHP保留两位小数的几种方法
2019/07/24 PHP
简明json介绍
2008/09/28 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
vue实现登录拦截
2020/06/29 Javascript
如何通过Proxy实现JSBridge模块化封装
2020/10/22 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
安全检查验收制度
2014/01/12 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
工人先锋号事迹材料
2014/12/24 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
工作会议简报
2015/07/20 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js