mootools入门

介绍

MooTools是一个简洁,模块化,面向对象的开源JavaScript web应用框架。

它为web开发者提供了一个跨浏览器js解决方案。在处理js、css、html时候。

它提供了一个比普通js更面向对象的documentAPI。

与jQuery差别

Mootools与jQuery相比较

  1. API设计
  2. 性能

API的差别:

  • jQuery的API设计方式
$('#element')
  • Mootools的API设计方式
$('element')
$$('#element')

jQuery的所有插件都是从$开始

  • 检测浏览器:$.browser
  • 发起AJAX请求:$.ajax

Mootools所有插件

  • 检测浏览器:Browser
  • 发起AJAX请求:new Request

操作DOM性能对比

为什么使用MooTools

  • 灵活,模块化的框架,用户可以选择自己需要的组件。
  • MooTools符合OO的思想,使代码更强壮,有力,有效。
  • 高效的组件机制,可以和flash进行完美的交互。
  • 对于DOM的扩展增强,使开发者更好的利用document

  如果是有着成百上千页面的大项目,有些大数据量交互与处理的项目,多人合作,多模块化的项目,jQuery往往就显得底气不足,往往需要各类插件补充。

  MooTools虽然也能用在中小项目上,但是,其潜力的发挥要在大型、需要编写大量JavaScript的应用的网站项目上。

下载安装

下载并引用最新MooTools 1.6核心库。

  1. 下载MooTools 1.6核心库,Mootools
  2. 把MooTools 1.6核心库上传到你的服务器或者工作区
  3. 在你的HTML文档头部head标记之内链接MooTools 1.6核心库 <script src="MooTools-Core-1.6.0.js" type="text/javascript"></script>

如何使用

MooTools 选择器

DOM元素选择器

//由类获取元素
$$('.foo'); // or even: document.getElements('.foo');
//不同元素的选择器
$$('div.foo, div.bar, div.bar a');
//获得一个元素
document.getElement('div.foo');

事件处理程序 附加事件以更新发生的事情

// 附上单击事件的元素
myElement.addEvent('click', function(){
    alert('clicked!');
});
 
// 一次附上几件事情
myElement.addEvents({
    mouseover: function(){
        alert('mouseover');
    },
    click: function(){
        alert('click');
    }
});

Ajax!

MooTools使用一类叫做Request

// create a new Class instance
var myRequest = new Request({
    url: 'getMyText.php',
    method: 'get',
    onRequest: function(){
        myElement.set('text', 'loading...');
    },
    onSuccess: function(responseText){
        myElement.set('text', responseText);
    },
    onFailure: function(){
        myElement.set('text', 'Sorry, your request failed :(');
    }
});
 
// and to send it:
myRequest.send(data);

返回对象的类型

语法:

typeof(obj);

参数:

obj - 要检查的对象(object)。

返回:

  • 'element' - (string) 如果对象是DOM元素的节点。
  • 'elements' - (string)
  • 如果对象是元素的一个实例。
  • 'textnode' - (string) 如果对象是一个DOM文本节点。
  • 'whitespace' - (string) 如果对象是一个DOM空白节点。
  • 'arguments' - (string) 如果对象是一个arguments对象。
  • 'array' - (string) 如果对象是一个数组。
  • 'object' - (string) 如果对象是一个对象。
  • 'string' - (string) 如果对象是一个字符串。
  • 'number' - (string) 如果对象是一个数字。
  • 'date' - (string) 如果对象是一个日期。
  • 'boolean' - (string) 如果对象是一个布尔值。
  • 'function' - (string) 如果对象是一个函数。
  • 'regexp' - (string) 如果对象是一个正则表达式。
  • 'class' - (string) 如果对象是一个类(创建新类或另一个类的扩展)。
  • 'collection' - (string) 如果对象是一个本地的HTML元素的集合,如用childNodes或用getElementsByTagName到得的元素集。
  • 'window' - (string) 如果对象是window对象。
  • 'document' - (string) 如果对象是document对象。
  • 'domevent' - (string) 如果对象是一个事件。
  • 'null' - (string) 如果对象为 undefined, null, NaN 或其它。

例如:

var myString = 'hello';
typeOf(myString); // 返回 "string"

检查一个对象是否为一个特定类型的实例

语法:

instanceOf(item, object)

参数:

1.item - (mixed) 对象实例。
2.object - (mixed) 目标类型。

返回:

(boolean) item是否为object的一个实例

例子:

var foo = [];
instanceOf(foo, Array) // 返回 true
instanceOf(foo, String) // 返回 false 
var bar = new myClass();
instanceOf(bar, myClass) // 返回 true

类型

MooTools的延伸原生类型,如字符串,数组或数字,使他们更加有效。 MooTools的使用的类型有:

  • String
  • Array
  • Number
  • Function
  • RegExp
  • Date
  • Boolean

MooTools自定义的类型有:

  • Element
  • Elements
  • Event

更多内容已经写成免费的在线课程交互式非视频的方式,可以访问: http://www.hubwiz.com/course/56cabf45ecba4b4d31cd273b/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lonelydawn的前端猿区

一款轻量级树形控件EasyTreeview

使用方法 引入 <link rel="stylesheet" type="text/css" href="./css/index.min.css"> <div ...

46490
来自专栏极客慕白的成长之路

LESS使用教程

引入 .less 样式文件的时候要注意设置 rel 属性值为 “stylesheet/less”:

27120
来自专栏全沾开发(huā)

FlowType简易入门指北

FlowType简易入门指北 写了一段时间JavaScript了,作为一个弱类型语言,无视类型判断在开发过程中带来了很多的好处,in...

44970
来自专栏河湾欢儿的专栏

Vue.js基础特性

计算属性 computed 与data,el,methods属性一样,都是vm实例的属性(选项) 理解其大致意思即可

15910
来自专栏CSDN技术头条

深入讲解 Vue 中实现原理

随着 Vue2.0 的发布,前端入门的要求也越来越低,已至于 Vue 已经成为一个前端的标配,最近也面了很多前端开发工程师,发现大部分都停留在用的阶段上,建议大...

12820
来自专栏未闻Code

正则表达式re.sub替换不完整的问题现象及其根本原因

问题的起因来自于一段正则替换。为了从一段HTML代码里面提取出正文,去掉所有的HTML标签和属性,可以写一个Python函数:

14720
来自专栏ytkah

{dede:list}和{dede:arclist}的区别

1.{dede:list}是用于列表页的文章列表调用,通常是用于list_article.htm页面,这个文章列表是可以分页的。 功能说明:表示列表模板里的分...

37460
来自专栏Flutter入门

Flutter入门三部曲(2) - 界面开发基础

上一节我们熟悉了初始化后的flutter的界面。这一节,我们就来重点了解一下这部分的内容。

98700
来自专栏达摩兵的技术空间

jq使用建议

我们在一些陈旧或者传统mvc的项目中还是会经常使用jq,但是由于对jq api或者核心思想不熟悉,导致我们的某些写法并不是特别好,这里会摘录一些一些并给出大家更...

7410
来自专栏Flutter入门

Vue 绑定简单分析实现

使用js es6 中 Object.defineProperty为我们自己定义的VM创建示例。同时这个方法通过提供了set.get方法的触发我们的监听事件。

15910

扫码关注云+社区

领取腾讯云代金券