`
pcajax
  • 浏览: 2157168 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

MooTools教程(1):认识MooTools

阅读更多

有人最近要求我们写一个关于MooTools 1.2的30天的教程,这似乎也是个很不错的主意,于是我们决定现在就开始。在这些教程中,我们假设用户没有任何MooTools或者是JavaScript经验,但是至少有基本的HTML和CSS知识。

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核心库
参考代码:  [复制代码]  [保存代码]
  1.  

(Fdream注:现在MooTools 1.2下载下来后,默认的后缀名是”.txt“,请更改后缀为”.js“。)

在Head标签之内添加Script标签

现在,你已经在你的页面中应用了了MooTools了,你还需要一个地方来写你的代码。这里有两种选择:

1. 把下面的代码写在你的head标签之内,你的代码写在script标记之内:

参考代码:  [复制代码]  [保存代码]
  1.  

2. 在外部建立一个JavaScript文件,然后在页面头部链接此文件:

参考代码:  [复制代码]  [保存代码]
  1.  

在这里,你可以使用任何一种方式。我通常把domready事件中调用的方法放在script标记之间,而我的函数放在外部文件中。

把代码放在domready中

MooTools的方法必须在domready事件中调用。

参考代码:  [复制代码]  [保存代码]
  1. window.addEvent('domready'function() {
  2.     exampleFunction();
  3. });

(Fdream注:不完全是这样,但是可以保证你的JavaScript代码尽可能少地出错。顺便说一下domready事件:当页面的HTML代 码(不包括图片、flash等等,只是代码)下载完成时,此时会触发domready事件。这样可以在页面完全下载完成(包括图片、flash等都下载完 成)之前执行你的脚本,从而避免因为一张大图要下很长时间而导致脚本不能执行,从而出现异常。)

把代码放在一个函数中

你仍然可以在domready之外创建你的函数,然后在domready中调用它:

参考代码:  [复制代码]  [保存代码]
  1. var exampleFunction = function() {
  2.      alert('hello')
  3. };
  4.  
  5. window.addEvent('domready'function() {
  6.     exampleFunction();
  7. });

关于库的详细介绍

在这第一讲中,我们会仔细地看了一下这个库架构的一些关键组件,然后粗略地看一下其他基本功能。

Core(核心)

核心(core)部分包含MooTools库的一些公共函数(Function)来完成一些常见的任务,也加强了许多原有功能(后面会有详细介绍)。下面的内容只是作为MooTools功能的一些例子,并不能替代您阅读MooTools的文档

(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();
  • 给一个元素添加一个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

    1. 轻量级:MooTools 1.2 库非常小巧,非常适合大多数 Web 应用程序。 2. 强大功能:MooTools 1.2 提供了许多强大功能,例如,morph 和 tween 动画效果,数组和函数操作等。 3. 扩展性强:MooTools 1.2 有许多非常好...

    mootools详细教程chm

    - **模块化设计**:MooTools 采用模块化结构,允许开发者根据项目需求选择性地加载组件,避免了不必要的代码体积增加。 - **链式调用**:MooTools 支持对象方法的链式调用,使得代码更简洁、易读。 - **DOM 操作*...

    mootools教程

    这篇教程将深入讲解MooTools中的Element类及其相关方法。 1. **Element方法完全解析** - `$(selector)`:这个方法相当于`document.getElementById`,用于根据ID获取元素。例如,`$('myElement')`将返回ID为'...

    mootools框架入门教程

    mootools框架入门教程 mootools框架是一个功能强大且灵活的JavaScript框架,它提供了许多实用的方法来简化DOM操作和ajax开发。下面将对mootools框架的Element篇进行详细的介绍。 Element篇 Element篇是mootools...

    Mootools 1.2快速学习教程

    本教程将深入探讨Mootools 1.2的关键概念、核心组件以及如何在实际项目中应用它们。 首先,Mootools 1.2的核心理念是模块化。它遵循CommonJS规范,允许开发者按需加载所需的功能,降低了页面加载时的资源消耗。通过...

    mootools教程.pdf

    根据给定的文件内容,这份“Mootools教程.pdf”文档主要介绍了Mootools框架的基础知识点,包括类的创建和继承、对象的扩展、类型判断、实用函数的使用、定时器的管理和DOM操作等。下面是对这些知识点的详细解释: 1...

    mootools 教程

    "MooTools教程.pdf"是本教程的主要部分,可能涵盖了以下内容: 1. **基础概念**:讲解MooTools的核心概念,如Class(类)、Element(元素)和Event(事件)对象,以及如何使用它们创建交互式的网页。 2. **DOM操作...

    Mootools 1.2教程 类(一)

    本教程将介绍如何创建和使用MooTools中的类。 首先,一个类是一个容器,它存储了变量(也称为属性)和函数(也称为方法),这些组合在一起构成了一个特定功能的单元。在MooTools中,我们使用`new Class`来定义一个...

    mootools

    1. **面向对象编程**:MooTools基于原型的面向对象模型,允许开发者创建可复用的类和对象,提高了代码的组织性和可维护性。它支持类的继承、私有属性和方法以及构造函数等概念。 2. **DOM操作**:MooTools提供了...

    mootools-node:mootools-server的npm软件包以与nodejs一起使用

    MooTools 1.5.2服务器有关总体上有关mootools的更多信息,建议您访问简而言之,它是用于OOP支持的Web开发库。 Mootools Server是精简版,可为您提供mootools库中的所有功能,而无需浏览器特定的内容安装获取运行npm ...

    mootools详细教程

    - `$`函数:MooTools用`$`函数代替了原生的`document.getElementById`,使得获取元素更加简单。例如`$('myDiv')`等同于`document.getElementById('myDiv')`。 - `$$`函数:这个函数使用CSS选择器语法来获取多个DOM...

    mootools.affix:Mootools.Affix

    Mootools.Affix 是一个基于 Mootools JavaScript 框架的插件,它主要用于创建固定定位(affix)的元素。在网页设计中,固定定位是一种常见技术,可以使某些元素如导航栏、侧边栏等在滚动页面时始终保持在屏幕的特定...

    mootools入门教程.rar

    1. **MooTools的基本理念**:MooTools遵循“Write Less, Do More”的原则,通过简洁的API提供强大的功能。它的设计哲学是模块化,允许开发者按需选择和组合所需的功能。 2. **核心模块**:MooTools的核心包括Core和...

    MooTools1.4中文PDF手册+MooTools-Core-1.5.1.js

    - **类与对象**:MooTools基于原型的面向对象系统使得创建和继承类变得简单。你可以定义类并为它们添加方法和属性,然后实例化这些类以创建对象。 - **事件处理**:MooTools提供了事件监听和触发机制,支持DOM元素...

    Mootools v1.11 文档 pdf html Mootools v1.2.1 js

    1. **模块化设计**:MooTools遵循CommonJS规范,采用模块化结构,允许开发者按需加载所需的功能,减少页面加载时间,提高性能。 2. **链式调用**:MooTools的一大特色是其链式调用,使得代码更加简洁易读。例如,...

    Mootools 1.2教程 Fx.Tween的使用

    【Mootools 1.2 Fx.Tween教程详解】 在Mootools库中,Fx.Tween是用于实现平滑动画效果的一个重要组件。本教程将深入探讨如何使用Fx.Tween来为网页元素添加动态变换效果,提升用户体验。 首先,理解Fx.Tween的基本...

    mootools中文教程详细经典WORD版

    资源名称:mootools 中文教程 详细经典 WORD版内容简介:本文档主要讲述的是 mootools 中文教程 详细经典;mootools是一个非常强大的JS类库,但是在网上的中文参考资料不多,本文是在网上收集了一些整合起来给大家...

    mootools 1.2 中文教程

    **MooTools 1.2 中文教程** MooTools 是一个高级、模块化、轻量级的JavaScript库,它提供了丰富的工具集,用于构建高效、可维护的Web应用程序。MooTools 1.2 版本是其一个重要版本,为开发者提供了许多改进和新特性...

Global site tag (gtag.js) - Google Analytics