MooTools 互动版

简介

介绍与jQuery差别为什么使用MooTools 下载安装如何使用

core（核心）

方法名: typeOf（返回对象的类型）方法名: instanceOf 类型的方法: implement 类型的方法: extend 通用方法：Generics

类型: Array

方法名: Array.each （遍历）方法名: Array.clone （克隆）方法名:Array.convert（对象转换成数组）数组方法: each 数组方法: invoke 数组方法: every 数组方法: filter 数组方法: clean 数组方法: map 数组方法: associate 数组方法: link 数组方法: append

类型：String

字符串方法: test 字符串方法: contains 字符串方法: clean 字符串方法: rgbToHex 字符串方法: substitute 字符串方法: stripScripts

类型: Number

方法: Number.random 方法: Number.from 数字方法: round 数字方法: times 数字方法: toInt

类型: Function

方法: Function.from 方法: Function.attempt Function方法: extend Function 方法: implement Function 方法: attempt Function 方法: pass Function 方法: bind Function 方法: delay Function方法: periodical

类

Class方法: constructor Class方法: implement Chain方法: constructor Chain方法: callChain 类型: Events Events 方法: addEvent Events方法: fireEvent 类型: Options

类型: Window和Element

方法: document.id 方法: $和$$ Element 方法: constructor Element 方法: getElement Element 方法: getElementById Element 方法: set Element 方法: get Element 方法: erase Element 方法: inject Element 方法: grab Element 方法: toQueryString Element 方法: getProperty和getProperties Element 方法: setProperty

Request

Request Events(事件) Request 方法: setHeader Request 方法: getHeader Request.HTML Request.JSON

在线工具推荐： Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

如何使用

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（返回对象的类型）