搜索
首页web前端js教程MooTools 1.2介绍_Mootools

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核心库
参考代码:

复制代码 代码如下:



(Fdream注:现在MooTools 1.2下载下来后,默认的后缀名是”.txt“,请更改后缀为”.js“。)
在Head标签之内添加Script标签
现在,你已经在你的页面中应用了了MooTools了,你还需要一个地方来写你的代码。这里有两种选择:
1. 把下面的代码写在你的head标签之内,你的代码写在script标记之内:
参考代码:
复制代码 代码如下:



2. 在外部建立一个JavaScript文件,然后在页面头部链接此文件:
参考代码:
复制代码 代码如下:



在这里,你可以使用任何一种方式。我通常把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备忘录的链接
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
C和JavaScript:连接解释C和JavaScript:连接解释Apr 23, 2025 am 12:07 AM

C 和JavaScript通过WebAssembly实现互操作性。1)C 代码编译成WebAssembly模块,引入到JavaScript环境中,增强计算能力。2)在游戏开发中,C 处理物理引擎和图形渲染,JavaScript负责游戏逻辑和用户界面。

从网站到应用程序:JavaScript的不同应用从网站到应用程序:JavaScript的不同应用Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中,JavaScript与HTML、CSS一起操作DOM,实现动态效果,并支持如jQuery、React等框架。2)通过ReactNative和Ionic,JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行,支持高并发请求。

Python vs. JavaScript:比较用例和应用程序Python vs. JavaScript:比较用例和应用程序Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化,JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色,使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺,用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用,支持全栈开发。

C/C在JavaScript口译员和编译器中的作用C/C在JavaScript口译员和编译器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。 1)C 用于解析JavaScript源码并生成抽象语法树。 2)C 负责生成和执行字节码。 3)C 实现JIT编译器,在运行时优化和编译热点代码,显着提高JavaScript的执行效率。

JavaScript在行动中:现实世界中的示例和项目JavaScript在行动中:现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用,涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互;2)在用户提交数据前进行客户端验证,提高用户体验;3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎:实施详细信息了解JavaScript引擎:实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要,因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段;2)执行过程中,引擎会进行动态优化,如内联缓存和隐藏类;3)最佳实践包括避免全局变量、优化循环、使用const和let,以及避免过度使用闭包。

Python vs. JavaScript:学习曲线和易用性Python vs. JavaScript:学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)