MooTools 1.2介绍_Javascript教程-查字典教程网
MooTools 1.2介绍
MooTools 1.2介绍
发布时间:2017-01-14 来源:查字典编辑
摘要:MooTools1.2JavaScript库介绍MooTools1.2是个强大的轻量级的JavaScript库,专门为减轻Web中交互性Ja...

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教程学习
    编程开发子分类