Mootools教程

mootools【一】- 起步篇
以前一直在用prototype.js，最近发现了mootools,据说也相当不错，它是个纯OO的javascript 框架，所以拿来学习学习，把学习经过记录下来。
 粗略看了下，mootools很貌似prototype,所以用过prototype框架的人应该很容易上手的。
 mootools提供的功能高度模块化，可以根据实际需要来裁剪。
它的核心库是Moo.js和Utility.js，Moo.js里包含了实现OO的基础类,Utility.js提供了最常用的工具函数的封装。
---------------------------Moo.js-------------------------------------
prototype.js里提供了如下形式来创建我们的对象:     
 
var Cat = Class.create();
Person.prototype = {
       initialize: function(name){
          this.name = name;
       }
};
var cat = new Cat ('kitty');
alert(cat.name);
 
对应,mootools使用如下形式:
var Cat     = new Class({
       initialize: function(name){
           this.name = name;
       }
});
      
var cat = new Cat ('kitty');
alert(cat.name);
恩，两者看起来很像，不过，好像mootools这种方式更加符合OO的习惯(不过也要看各人喜欢的啦)。
Class进行继承,mootools是这样做的:
 
     var Animal = new Class({
        initialize: function(name){
         this.name = name;
       }
 });
 
     var Cat = Animal.extend({
        initialize: function(name,age){
         this.parent(name); //调用Animal的initialize方法
         this.age = age;
       }
 });
是的，相当好用。
Class.implement方法从功能上来理解是对已经定义好的类进行扩展,用法如下:
     var Person = new Class({
         initialize: function(name){
            this.name = name;
        }
 });
 
     Person.implement({
       initialize: function(name,age){
            this.name = name;
            this.age = age;
        },
       
     myAction: function(){
            alert(this.name+'--'+this.age);
        }
 });
 
 var p = new Person('zarknight',24);
 p.myAction();
这和java中的实现接口好像不是一个概念...
 mootools对Object扩展了一个extend方法,它有两个参数，作用是复制第二个参数对象的所有属性到第一参数对象中去，同名属性将覆盖为第二个参数中的相应属性：
     var firstOb = {
        'name': 'John',
        'lastName': 'Doe'
 };
     var secondOb = {
        'age': '20',
        'sex': 'male',
        'lastName': 'Dorian'
 };
 Object.extend(firstOb, secondOb);
 
 //firstOb将变成:
     {
        'name': 'John',
        'lastName': 'Dorian',
        'age': '20',
        'sex': 'male'
 };
---------------------------Moo.js-------------------------------------
$type
作用：基本上是对typeof的扩展,返回输入参数的类型
例子：
 var x = $type("abcdefg");
返回值：
'element' - DOM
 'textnode' - DOM 文本节点
 'whitespace' - DOM 空白节点
 'array' - 数组
 'object' - 对象
 'string' - 字符串
 'number' - 数字
 'boolean' - 布尔型
 'function' - 函数
 false - 如果是未定义或则不是以上列出的类型
$chk
作用：如果输入参数是数值（包括0）或是对象(不为null或undefined),则返回true,否则返回false
 var x = $chk("abcde");     //true
 var y = $chk(0);                //true
 var z = $(null);                   //false
 
$pick
作用：如果第一个参数对象存在，则返回这个对象；否则返回第二个参数对象
 var x = $pick("openfdc","zarknight");     //openfdc
 var y = $pick(null,"zarknight");                //zarknight
       var z = $pick(1, 2);                                    //1
 
$random
作用：产生一个介于(包括)指定的最大范围值和最小范围值之间的随机整数
 var x = $random(1,100);      //产生一个1~100之间的随机整数
 
$clear
作用：其实就是clearTimeout和clearInterval都调用一遍
 var timer1 = setInterval("abc()",1000);
 timer1 = $clear(timer1);
 
 var timer2 = aFunc.delay(1000);     //delay是mootools对Function的扩展,具体用法看mootools文档或我的后文...
 timer2 = $clear(timer2);
另外，mootools往window对象里摆了这么些属性,用来作为检测浏览器类型的工具：
window.ie
window.ie6
window.ie7
window.khtml
window.gecko

     mootools【二】 - Array篇
由于JavaScript1.5对Array增加了一些比较好用的方法，如 forEach,filter,map,every,som,indexOf，但是在还不支持JavaScript1.5的浏览器里是不能用得，所以，mootools它通过扩展Array来使其实现对这些方法的支持:
---------------------------------Array.js---------------------------------
Array对象的forEach方法
原型：Array.prototype.forEach(callBack: Function, thisObject: Object)
作用：对数组进行迭代操作，它有两个参数，第一个参数callBack是每次迭代所执行的函数，第二个参数thisObject可选，是要绑定到迭代执行的函数上的对象(也就是函数callBack中的this所指向的对象)
 //用法一
 var arr = [1,2,3,4,5,6];
     arr.forEach(function(e){
         alert(e);
 });
 
 //用法二
 var arr = [1,2,3,4,5,6];
 var obj = "hello!";
     arr.forEach(function(e){
        alert(e+'--'+this);
 },obj);
 
 //用法三
     function putElt(element, index, array) {
        document.write("pos [" + index + "] in array (" + array + ") is " + element + '<br>');
 }
 [2, 5, 9].forEach(putElt);
 
Array对象的filter方法
原型：Array.prototype.filter(callBack: Function, thisObject: Object)
作用：迭代数组，每个元素作为参数执行callBack方法，由callBack方法作为数据过滤网，最后返回过滤后的一个数组
     var result = [1,2,3,4,5].filter(function(e){
          return e > 3;
 });
 alert(result);      //结果为4,5
 
Array对象的map方法：
原型：Array.prototype.map(callBack: Function, thisObject: Object)
作用：迭代数组，每个元素作为参数执行callBack方法，由callBack方法对每个元素进行处理，最后返回处理后的一个数组
     var result = [1,2,3,4,5].map(function(e){
          return e + 'px';
 });
 alert(result);     //结果为1px,2px,3px,4px,5px
 
Array对象的every方法：
原型：Array.prototype.every(callBack: Function, thisObject: Object)
作用：它的意思就是：是否数组中的每个元素都通过了callBack的处理？如果是，则返回true,如果有一个不是，则立马返回false
     var result = [1,2,3,4,5].every(function(e){
          return e > 3;
 });
 alert(result);       //返回false
 
Array对象的some方法：
原型：Array.prototype.some(callBack: Function, thisObject: Object)
作用：它的意思就是：是否数组中的有元素通过了callBack的处理？如果有，则立马返回true,如果一个都没有，则返回false
     var result = [1,2,3,4,5].every(function(e){
          return e > 3;
 });
 alert(result);       //返回true
 
Array对象的indexOf方法：
原型：indexOf(searchElement: Object, fromIndex: Number)
作用：在数组中查找是否含有指定对象,如果有，返回对象所在的索引,否则返回-1；第二个参数是可选参数，如果指定的话，比如指定3，则表示从数组的第4个元素开始查找；默认从第0个元素开始查找。
var x1 = [1,2,3,4,5].indexOf(2);        //结果为1
var x2 = [1,2,3,4,5].indexOf(2,3);     //结果为-1
 
----------------------以下的方法是mootools提供的Array的专有扩展，和JavaScript标准无关--------------------------
each
作用：它的用法和作用与forEach一模一样，参看上文的forEach
 
copy
作用：复制数组元素到新的数组中；默认是全部复制，如果指定了开始索引和长度的话，则可以按指定形式复制
var a = [1,2,3,4,5,6];
var b1 = a.copy();            //[1,2,3,4,5,6]
var b2 = a.copy(2,2);      //[3,4]
 
remove
作用：删除数组中指定值的元素
var a = [1,2,2,3,4,5,6];
var b = a.remove(4);     //[1,2,2,3,5,6]
var c = a.remove(2);     //[1,3,4,5,6]
 
test
作用：查找数组中是否有指定的值
var a = [1,2,3,4,5,6];
var b = a.test(11);         //fasle
var c = a.test(2);           //true
 
extend
作用：把另一个数组追加到本数组后(不排除相同值的)
var a = [1,2,3,4];
var b = [1,11,12];
a.extend(b);
alert(a);                //1,2,3,4,1,11,12
 
associate
作用：把另一个数组中的值作为key,本数组中的值做为值，组成一个键值对象(长度为两者中较小的那个)
var v = [1,2,3,4,5];
var k = ['one','two','three'];
var kv = v.associate(k);
alert(kv['one']);                  //1
var v = [1,2];
var k = ['one','two','three'];
var kv = v.associate(k);
alert(kv['one']);                  //1
alert(kv['three']);                //undefined
 
$A
作用：和Array的copy方法是一样的作用
var a = [1,2,3,4];
var b = $A(a);              //[1,2,3,4]
var c = $A(a,1,2);        //[2,3]
 
$each
作用：功能基本和Array的forEach方法相同，官方文档上说可用于非常规数组的迭代，如由getElemntsByTagName调用产生的结果，以及参数数组arguments等。不过管它常规不常规，用起来的形式还是一样的
var a = [1,2,3,4];
$each(a,function(e){
        alert(e);
});
 
恩，Array部分终于看好了，自己写的语言表达上感觉有些地方有欠缺，呵呵。。。

     mootools【三】- String篇
String大概是我们使用频率最高的数据类型了，在各个javascript框架中，都或多或少的对String进行了扩展，来提供一些十分方便的方法来处理日常应用。mootools也不例外，String.js中主要实现了这些对 String的扩展，还稍微带了点对Array和Number的扩展。
--------------------------------String.js---------------------------------------
//========================以下是对String的扩展========================
test
作用：对字符串执行正则表达式匹配
 var x = "Hello,world!".test('hello');           //false
 var y = "Hello,world!".test('hello','i');       //true,'i'是正则表达式参数，表示忽略大小写.注意'g'在这里无效
 var z = "Hello,world!".test(/H.*?o/);        //true
 
toInt
作用：把字符串转换成整数，如果非数字，则返回NaN
var x0 = "1.12".toInt();            //1
var x1 = "1".toInt();                 //1
var x2 = "1px".toInt();             //1
var x3 = "10xxx".toInt();         //10
var x3 = "x10xxx".toInt();        //NaN
var x4 = "020".toInt();            //16
var x5 = "0xFF".toInt();          //255
 
toFloat
作用：把字符串转换成浮点数
var x0 = "1.12".toFloat();            //1.12
 
camelCase
作用：把以"-"分隔的字符串，如"my-work"，转换成"myWork"这样的形式
var x = "my-work".camelCase();          //myWork
var y = "My-Work".camelCase();          //MyWork
 
hyphenate
作用：把形如"myNotePad"形式的字符串，转换成"my-note-pad"这样的形式
var x = "myNotePad".hyphenate();            //my-note-pad
 
capitalize
作用：字符串中每个单词的首字母大写
var x = "hello world".capitalize();            //Hello World
 
trim
作用：去除字符串首尾的所有空格
var x = "              hello world                 ".trim();            //“hello word”
 
clean
作用：去除字符串中所有多余空格(收尾全部去除，单词之间留一个空格)
var x = "              hello                    world                \n\n ".clean();            //“hello word”
 
rgbToHex 和 hexToRgb
作用：rgb代表的颜色代码与十六进制表示的颜色代码之间互转
"rgb(17,34,51)".rgbToHex();              //"#112233"
"rgba(17,34,51,0)".rgbToHex();        //"transparent"
"rgb(17,34,51)".rgbToHex(true);      //['11','22','33']
"#112233".hexToRgb();                    //"rgb(17,34,51)"
"#112233".hexToRgb(true);             //[17,34,51]
 
//=====================以下是对Array的扩展========================
rgbToHex     和 hexToRgb
作用：取数组中的前3个元素，转化成RGB颜色代码或十六进制颜色代码
['FF',0,0].hexToRgb();                  //rgb(255,0,0)
[255,255,0].rgbToHex();             //#ffff00
 
//=====================以下是对Number的扩展========================
toInt
作用：数字类型的对象转换成整型
var n1 = 12.11;
var nx = n1.toInt();                    //12
 
toFloat
作用：数字类型的对象转换承浮点型
var n1 = 12.010;
var nx = n1.toFloat();             //12.01

     mootools【四】- Function篇
闭包是javascript中非常强大的工具，在实际应用开发中，我们基本上都会用到。从各个javascript框架中，我们也可以到处看到闭包的影子。mootools在javascript的 Function上扩展出了一些十分方便的创建函数闭包的方法，其中一些我们在prototype.js中也使用过，类如 bind,bindAsEventListener等。
对Function的扩展，mootools主要提供了一个create方法来创建闭包，这个方法其实实现了mootools对Function的所有扩展功能,但是一般我们不会直接去用它，而是使用mootools基于这个create方法派生出的其他方法。
方法： create
参数选项列表：
bind - 创建的闭包函数中this所指向的对象。默认指向当前函数。
event -     默认为false；
                如果为true,则创建的闭包函数将会作为一个事件监听器，传入的第一个参数是一个event对象；
                如果为一个类名，则会创建这个类的一个实例,并把event对象传入该类
arguments - 一个以数组形式传入创建的闭包函数的参数列表。如果同时指定了上面的event选项和本arguments选项,则事件对象event对象将作为参数列表中的第一个，而其他参数排在其后。
delay - 延迟执行的毫秒数(setTimeout的功能)。默认不延迟执行。如果指定了，则调用该创建的闭包函数时将按指定的毫秒数延迟执行（调用返回一个时间处理句柄）。
periodical - 间隔执行的毫秒数(setInterval的共能)。默认不进行间隔执行。如果指定了，则调用该创建的闭包函数后，会每间隔指定的毫秒数后触发执行（调用返回一个时间处理句柄）。
attempt - 如果指定为true,则再创建闭包的过程中，将会使用捕捉异常，如果无异常抛出，则返回正常的闭包函数；如果发生异常，则返回捕捉到的异常对象。默认为false。
<input type="button" value="test" onclick="b()"/>
function myClass(){
 alert('X:' + event.clientX);
}
function a(){
 alert('Base...');
}
var b = a.create({'event':myClass});
//按下按钮后，将先alert出如"X:33"，接着alert
 
function a(p1,p2){
 alert(this.getTime());
 alert(p1+'||'+p2);
}
var b = a.create({'bind':new Date(),'arguments':[100,200]});
b();
//alert出如"1233445"
//alert出"100||200"
 
方法：pass
参数列表：
args - 数组形式传入的参数
bind - 可选。this指向的对象
功能：create的功能简化版。实现的即是create中选项'arguments'的功能。
function a(p1,p2){
 alert(p1+'||'+p2);
}
var b = a.pass([100,200]);
b();
 
方法：attempt
参数列表：
args - 数组形式传入的参数
bind - 可选。this指向的对象
功能：create的功能简化版,并且创建闭包函数后执行。实现的即是create中选项'attempt'为true时的功能。
myFunc.attempt([100,200]);
 
方法：bind
参数列表：
bind - 可选。this指向的对象
args - 可选。数组形式传入的参数
功能：create的功能简化版。实现的即是create中选项'bind'的功能。
function myFunc() {
     this.setStyle('color', 'red');
}
var myBoundFunction = myFunction.bind(myElement);
myBoundFunction();
 
方法：bindAsEventListener
参数列表：
bind - 可选。this指向的对象
args - 可选。数组形式传入的参数
功能：create的功能简化版。实现的即是create中选项'bind'以及'event'为true时的功能。
<div id="myDiv"></div>
<input type="button" id="mybtn" value="test" />
function a(){
 this.innerHTML = 'Fired at ('+event.clientX + ',' + event.clientY +')';
}
$('mybtn').onclick = a.bindAsEventListener($('myDiv'));
 
方法：delay
参数列表：
ms - 延迟执行的毫秒数
bind - 可选。this指向的对象
args - 可选。数组形式传入的参数
功能：create的功能简化版,并且创建闭包函数后执行。实现的即是create中选'delay'的功能。
function a(){
 alert('Hello...');
}
a.delay(1000);
 
方法：periodical
参数列表：
ms - 间隔执行的毫秒数
bind - 可选。this指向的对象
args - 可选。数组形式传入的参数
功能：create的功能简化版,并且创建闭包函数后执行。实现的即是create中选'periodical'的功能。
function a(){
 alert('Hello...');
}
a.periodical(2000);
Function部分就这些啦，不过也足够强大了！
     mootools【五】 - Element篇
Ajax 开发中，做的最多的就是对DOM的操作，增删节点，设置样式等等等等，如果按照常规的javascript开发的话，工作量大的足以搞的人头晕目眩。所以基本上每个javascript框架都会在DOM操作上花比较大的功夫，对我们使用频率最频繁的功能操作进行封装(其中包括修正各个浏览器之间的方法差异问题)，让我们的开发事半功倍。
mootools也提供了一套非常出色的解决方案，并且更OO。
首先，之前，通常我们创建DOM节点，都使用document.createElement()方法，而我们看mootools式的创建方法：
 var myInput = new Element('input');
非常的优雅啊。
 
方法：     $
美元，又见美元！
$基本上成了javascript框架中的标志性建筑了，短小精悍的语法使我们的代码看起来舒服不少，也使我们的js文件瘦了下身。
时下，各大javascript框架中都会提供$这个方法，基本上它都有按照id来获取DOM元素的功能，但各个框架在具体诠释它的时候各有不同的手法，功能的强弱上也不一样。比如prototype.js中的$可以根据给出的一个或多个id来获取这些DOM元素，而jQuery里的$更是非常强，可以按照 CSS选择器的语法来获取DOM元素(其实mootools和prototype也是可以的，只不过是$$这个方法)。
这是mootools中的$()的最常用用法，它返回id为my_div的元素，并且这个元素被加上了所有mootools所进行的扩展。
 var mydiv = $('my_div');
如果你使用document.getElmentById来获取的元素，则此时这个元素将没有包含mootools的任何扩展，你可以把这个元素对象作为参数调用$方法，之后返回的元素将被加上mootools的扩展。
var mydiv_noextend = document.getElementById('my_div');
 
var mydiv_extended = $(mydiv_noextend);
 
方法： $$
功能：通过CSS选择器语法来获取DOM元素(需要mootools的Dom.js模块的支持)
$$('a');                          //获取页面上所有超链接<a>标签对象
$$('a','b');                     //获取页面上所有超链接<a>标签和粗体<b>标签
$$('#my_div');             //获取id为my_div的元素
$$('#my_div a.myClass');         //获取id为my_div的元素子元素，并且这些自元素是的所有class="myClass"的<a>标签
 
=================================Element扩展方法=====================================
方法： inject
作用：可以用来把当前元素插入到指定元素之前(before)，之中(inside)，之后(after)。
    
<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
$('myDiv3').inject($('myDiv1'),'before');         //把myDiv3插入到myDiv1之前
 
方法： injectBefore
作用：可以用来把当前元素插入到指定元素之前 (即相当于参数为'before'的inject方法)
<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
 
$('myDiv3').injectBefore($('myDiv1'));
 
方法：injectAfter
作用：可以用来把当前元素插入到指定元素之后 (即相当于参数为'after'的inject方法)
<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
 
$('myDiv3').injectAfter($('myDiv1'));
 
方法：injectInside
作用：可以用来把当前元素插入到指定元素之中 (即相当于参数为'inside'的inject方法)
<div id="myDiv1">aaa</div>
<div id="myDiv2">bbb</div>
<div id="myDiv3">ccc</div>
 
$('myDiv3').injectInside($('myDiv1'));
 
方法：adopt
作用：可以在当前元素中插入指定元素(参数可以是元素id，元素引用，html元素tag名)
$('myDiv').adopt($('myDiv1'));
$('myDiv').adopt('myDiv1');
$('myDiv').adopt('button');
 
方法：remove
作用：删除元素
$('myDiv').remove();
 
 
方法：clone
参数列表：
contents - 是否连带节点的内容进行复制(deep clone)，如果不指定，则连带。
作用：复制元素
$('myDiv').clone();       
$('myDiv').clone(false);        //只复制myDiv本身，不复制其content和子元素
 
方法：replaceWith
作用：用其他元素替换当前元素
<div id="myDiv1">abc</div>
var a = new Element('button');
a.value = 'test';
$('myDiv1').replaceWith($(a));
 
方法：appendText
作用：向元素添加文本节点
<div id="myDiv1">hello </div>
 
$('myDiv1').appendText('world');
 
//结果：
<div id="myDiv1">hello world</div>
 
方法：hasClass
作用：判断元素的class属性中是否包含指定的样式名
<div id="myDiv1" class="clazz_1 clazz_2">hello </div>
 
var x = $('myDiv1').hasClass('clazz_1');                  //true
 
方法：addClass
作用：向指定元素上添加样式class
$('myDiv1').addClass('clazz_1');
 
方法：removeClass
作用：在指定元素上删除指定的样式class
$('myDiv1').removeClass('clazz_1');
 
方法：toggleClass
作用：在addClass和removeClass的功能之间切换
<div id="myElement" class="myClass"></div>
$('myElement').toggleClass('myClass');
//结果为：
<div id="myElement" class=""></div>
===================================
//再次：
$('myElement').toggleClass('myClass');
//结果为：
<div id="myElement" class="myClass"></div>
 
方法：setStyle
作用：向元素设置一个style属性
$('myDiv').setStyle('width','100px');
 
方法:setStyles
作用：向元素设置多个style属性
$('myDiv').setStyles({
       border: '1px solid #000',
       width: '300px',
       height: '400px'
});
 
或者(不推荐在这种方式下设置opacity属性)：
 
$('myDiv').setStyles('border: 1px solid #000; width: 300px; height: 400px;');
 
方法：setOpacity
作用：设置元素的透明度
$('myDiv').setOpacity(0.5);          //透明度设置为50%
 
方法：getStyle
作用：获取style中指定属性的值
var w = $('myDiv').getStyle('width');
 
方法：addEvent
作用：为元素增加事件监听器
$('myDiv').addEvent('click', function(){
          alert('haha,clicked!');
});
 
方法：addEvents
作用：为元素增加多个事件监听器(不过，在mootools1.0.0版本中，这个方法是有BUG的，推荐不要使用；mootools1.1开发版中，已经修复了BUG)
$('myBtn').addEvents({
       'click': function(e){alert('clicked!!!');},
       'mouseout': function(e){alert('mouseouted!!!');}
 });
 
方法：removeEvent
作用：从元素上删除指定的监听器方法
var fa = function(e){alert('aaaaaaaaaaaaaa');};
var fb = function(e){alert('bbbbbbbbbbbbbb');};

$('myBtn').addEvent('click',fa);
$('myBtn').addEvent('click',fb);

$('myBtn').removeEvent('click'，fa);
 
方法：removeEvents
作用：从元素上删除指定事件的监听器，如果不指定事件，则将删除所有事件的监听器(和addEvents方法一样，该方法再1.0.0版本中也存在BUG,在1.1开发版本中已修复)
var fa = function(e){alert('aaaaaaaaaaaaaa');};
var fb = function(e){alert('bbbbbbbbbbbbbb');};

$('myBtn').addEvent('click',fa);
$('myBtn').addEvent('click',fb);

$('myBtn').removeEvents('click');
 
方法：fireEvent
作用：触发元素的指定事件上的所有监听器方法
var fa = function(e){alert('aaaaaaaaaaaaaa');};
var fb = function(e){alert('bbbbbbbbbbbbbb');};

$('myBtn').addEvent('click',fa);
$('myBtn').addEvent('click',fb);

$('myBtn').fireEvent('click');         //fa和fb将立即被执行
 
 方法：getFirst
作用：获取当前元素的第一个子元素节点
<div id="myDiv">
      <div id="first">first</div>
      <div id="second">second</div>
      <div id="last">last</div>
 </div>
var f = $('myDiv').getFirst();
alert(f.id);               //alert "first"
 
 方法：getLast
作用：获取当前元素的最后一个子元素节点
<div id="myDiv">
      <div id="first">first</div>
      <div id="second">second</div>
      <div id="last">last</div>
 </div>
 
var l = $('myDiv').getLast();
alert(l.id);                 //alert "last"
 
方法：getParent
作用：获取当前元素的父元素节点
<div id="myDiv">
      <div id="first">first</div>
      <div id="second">second</div>
      <div id="last">last</div>
 </div>
 
var par = $('first').getParent();
 alert(par.id);                    //alert       "myDiv"
 
方法：getChildren
作用：获取当前元素所有子元素节点
<div id="myDiv">
      <div id="first">first</div>
      <div id="second">second</div>
      <div id="last">last</div>
 </div>
 
var cs = $('myDiv').getChildren();
alert(cs.length);                    //alert       3
 
方法：setProperty
作用：设置元素的属性
$('myImage').setProperty('src', 'whatever.gif');
 
方法：setProperties
作用：设置元素的多个属性
$('myElement').setProperties({
      src: 'whatever.gif',
      alt:     'whatever dude'
});
 
 方法：setHTML
作用：相当于设置元素的innerHTML
$('myElement').setHTML(newHTML);
 
方法：getProperty
作用：获取元素的指定属性
$('myImage').getProperty('src')
 
方法：getTag
作用：获取HTML标签元素的标签名称
<img id="myImage" src="xx.gif" />
$('myImage').getTag();            //img
 
方法：scrollTo
作用：相当于把滚动条滚动到指定的状态(窗口或元素在overflow的情况下)
window.scrollTo(0,200);
 
方法：getValue
作用：获取tag为textarea, select 或 input这三个元素的value属性值。但select多选状态下取值不支持。
<input type="text" value="abcd" id="myInput"/>
var v = $('myInput').getValue();
 alert(v);                //alert     "abcd"
 
方法：getSizze
作用：获取元素对象当前的size/scoll值
返回值格式如下：
{
      'scroll': {'x': 100,     'y': 100},
      'size':      {'x': 200,     'y': 400},
      'scrollSize': {'x': 300,     'y': 500}
     }
$('myElement').getSize();
 
方法：getPosition
作用：获取元素的offset位置
返回值格式：
{x: 100, y:500}
$('element').getPosition();
 
方法：getTop
作用：相当与getPosition返回的y值
$('element').getTop();
 
方法：getLeft
作用：相当与getPosition返回的x值
$('element').getLeft();
 
方法：getCoordinates
作用：获取元素的当前width, height, left, right, top, bottom值
返回值格式：
{
      width:     200,
      height: 300,
      left:          100,
      top:          50,
      right:        300,
      bottom: 350
     }
var myValues = $('myElement').getCoordinates();
 
 
mootools提供了一个“垃圾收集器”Garbage。
一般情况下，使用$方法获取到的对象都会被这个“垃圾收集器”登记下来，然后在窗体关闭(unload)的时候，销毁这些登记过的对象。也可以调用Garbage.collect方法来登记，然后在你必要的时候调用Garbage.trash方法来销毁。

 

mootools教程(二)
2007-10-03 17:21
mootools【六】- Event篇
mootools中定义了一个Event类，它提供了对原始window的事件对象event的扩展，使用的时候，可以 把原来的event对象作为Event的构造方法参数传入:
var event = new Event(event);
这样，返回的event就包含了所有mootools经过扩展的功能，具体扩展的属性和方法如下：
================================================================
属性：
shift - 当触发的事件是键盘按键事件时，判断按下的按键是否是shift键
$('myLink').onkeydown = function(event){
      var event = new Event(event);         //扩展了的event 
      alert(event.shift);                               //如果按下的按键是shift,则alert结果为true
};
[control,alt,meta用法和shift相同。]

code - 当触发的事件是键盘按键事件时，按下键的keycode

page.x - 鼠标事件触发时，鼠标相对于整个窗体的x
page.y - 鼠标事件触发时，鼠标相对于整个窗体的y
client.x - 鼠标事件触发时，鼠标相对于当前视野的y
client.y - 鼠标事件触发时，鼠标相对于当前视野的y
(一般情况下，client.x,client.y效果和page.y，page.y一样；但当窗体出现滚动条的时候，两者效果就有差别了。)
$('myInput').addEvent('click',function(event){
       var event = new Event(event);
       alert(event.page.y + "||" + event.client.y);
});

key - 当触发的事件是键盘按键事件时，按下按键的名字，如："enter","esc"等等。

target - 发生事件的元素。
relatedTarget - 发生mouseover和mouseout事件时的元素对象的参照对象。

================================================================
方法：stop
作用：停止事件的执行

方法：stopPropagation
作用：停止事件的冒泡传递

方法：preventDefault
作用：停止事件的默认动作

由于Event的引进，mootools又给Function扩展了一个方法：
bindWithEvent
它和Function的bindAsEventListener方法用法基本相同，不一样的是，bindAsEventListener方法传递到事件监听器中的是原来的event对象，而bindWithEvent则是Event的实例对象。

   mootools的学习资源
网上看到有朋友搜集了很多关于mootools的资料链接，非常好，感谢。
　一.教程/文章/代码实例：
　　
　　http://clientside.cnet.com/wiki/mootorial/ --- The Mootorial：比较完整的mootools教程
　　http://solutoire.com/2007/02/16/mootools-ajax-xhr-classes/ --- ajax 和 XHR
　　http://solutoire.com/2007/01/31/mootools-10-whats-new/ --- Mootools 1.0: What’s new
　　 "http://solutoire.com/2006/12/25/porting-prototype-enumerable-functions-to-mootools-array-objects/ --- 将 Prototype的Enumerable移植到Mootools Array
　　 http://www.coryhudson.com/blog/2006/09/12/extending-objects-and-classes-with-mootools/ --- 用mootools扩展 Objects 和 Classes
　　http://www.coryhudson.com/blog/2006/09/14/useful-utility-functions-in-mootools/ --- Mootools中有用的“Utility”函数
　　http://www.coryhudson.com/blog/2006/09/26/extending-dom-nodes-with-mootools/ --- 用 Mootools 扩展 DOM Nodes
　　http://www.snook.ca/archives/javascript/mootools_drag_a/ --- Mootools 拖拽实例
　　http://smoothgallery.jondesign.net/getting-started --- 在你的网站上创建一个画廊或幻灯
　　http://www.chromasynthetic.com/blog/wp-content/uploads/2006/09/mootools1.html --- 简单的导航条实例
　　http://www.chrisesler.com/mootools/mootools-dragwindow.html --- 可拖动的窗口实例（实际上是可拖动的div）
　　http://www.chrisesler.com/mootools/mootools-rowcolumnhighlight.php --- 表格行列高亮实例
　　http://techblog.billkrueger.com/2006/10/11/mootools-sortable-list-example/ --- 可排序列表实例
　　http://www.digitalknk.com/2006/10/10/final-class-project-complete/ --- 可折叠菜单的视频教程
　　 http://solutoire.com/2007/01/16/mootools-playing-with-height-transitions/ --- 非常好的tab菜单教程（Mootools: playing with height-transitions）
　　http://solutoire.com/2006/11/29/mootools-the-ajax-class/ --- 关于ajax类
　　 http://www.thepcspy.com/articles/programming/ajax_search_with_ms_live_and_mootools --- 用Mootools实现基于ajax的Ms live查询
　　http://solutoire.com/2006/11/29/mootools-horizontal-accordions-explained/ --- 又一个可折叠菜单
　　http://solutoire.com/2006/12/18/mootools-json-explained/ --- Json模块与php教程
　　http://dev.digitarald.de/tile.html --- 移动背景实例
　　http://www.dotes.com.br/mootools/FlyOverBackground.html --- 移动背景实例（fixed for ie）
　　http://dev.digitarald.de/ghostdrag.html --- 拖拽实例
　　http://dev.digitarald.de/tabs.html --- tab实例
　　 http://beautyindesign.com/tutorial/free_series_mootools_for_the_rest_of_us.php --- 5节课的Mootools教程：MooTools for the Rest of Us
　　http://www.chrisesler.com/mootools/fisheye/index.php --- Mac os dock样式的菜单
　　
　二. 插件
　　http://smoothgallery.jondesign.net --- JonDesign的SmoothGallery：画廊、幻灯和展厅
　　http://www.electricprism.com/aeron/slideshow/ --- 幻灯
　　http://smoothslideshow.jondesign.net --- JonDesign的幻灯类库
　　http://solutoire.com/2006/11/29/fxfont-mootools-and-font-resizing/ --- Fx.Font 自动改变文字大小
　　http://www.brunofigueiredo.com/archive/2006/09/14/88.aspx --- moobox：实现简单的LightBox效果
　　http://www.brunofigueiredo.com/archive/2006/09/21/103.aspx --- 反射效果
　　http://www.brunofigueiredo.com/archive/2006/09/15/93.aspx --- 另类图片标签
　　http://www.brunofigueiredo.com/code/jsShadowReflection/extension_1.htm --- efxFactory 0.1 BETA:阴影和反射效果库
　　http://inviz.ru/moo/transcorners/ --- 圆角效果
　　http://www.digitalia.be/software/slimbox --- Slimbox：完整的Lightbox克隆，只有7k
　　http://www.digitalia.be/software/reflectionjs-for-mootools --- 反射 Reflection.js
　　http://nhatanh.voxfamilyvn.com/moo/slider.html --- Moo.Slider：滑动器
　　http://nhatanh.voxfamilyvn.com/moo/calendar.html --- Moo.Calendar：日历
　　http://og5.net/~wusch/?cat=javascript --- ie6的png透明插件
　　http://www.clanccc.co.uk/moo/sortlist.html --- 嵌入式可排序列表
　　http://www.blackmac.de/archives/44-Mootools-AJAX-timeout.html --- AjaxPlus：为AJAX增加超时事件
　　
   mootools版本的lightbox实现
最近对mootools非常感兴趣。如别人评价它一样：轻盈，又不失强大。同时，它的源代码的条理也非常清晰。慢慢一边阅读它的源代码一边尝试它提供的功能是学习它的一个好途径。
从网上找到了基于mootools实现的LightBox组件(一个非常酷的图片浏览组件)，从我上一篇blog中有相关实现这个程序的官方链接(Slimbox),不过这个网站的.be域名我们不通过代理的话访问不了。
我找到的这个mootools的lightbox实现是基于较早期的mootools版本的，和现在的正式发布版本mootools1.0.0有一点点不兼容，我把它修改了下，让它里面的方法基于mootools1.0.0里提供的api了。
可以从我这个链接下载我修改过的Demo：
http://www.live-share.com/files/200713/moobox.rar.html

   mootools【七】- mootools的构造应用的基础设施Common.js
正因为mootools是基于OO的思想，所以，在mootools自身提供的功能中，充分使用了OO的理念--继承和实现.
mootools中提供一组基础功能类：Chain,Events,Options,Group，然后我们可以通过implement他们来在我们的类中实现它们所提供的功能。 mootools自己提供的Ajax, XHR和Fx.Base类就实现了这些基础功能类。

类：Chain
作用：这里Chain类把function组织成一个链式结构。
它提供了三个方法：
chain - 添加一个函数到链中
callChain - 执行链中第一个函数，然后删除(原来链中第二个函数将变为新的链首)
clearChain - 清除链中所有函数
   var c = new Chain().chain(function(){
           alert('Func A!');
   }).chain(function(){
           alert('Func B!');
   }).chain(function(){
           alert('Func C!');
});
    
c.callChain();          //"Func A!"
c.callChain();          //"Func B!"
c.callChain();          //"Func C!"

类：Events
作用：通俗的来讲，它其实像是一个事件管理器(各人觉得大多数情况下应该是自定义事件)。别的类可以实现它来进行自己的事件管理。
它同样提供了三个方法：
addEvent - 向管理器中添加指定事件的监听器
fireEvent - 触发执行指定事件下的所有监听器方法
removeEvent -
var evts = new Events();
var fa = function(e){
       alert('aaaaaaa');
};
var fb = function(e){
       alert('bbbbbbb');
};
evts.addEvent('onMyEvent', fa).addEvent('myEvent', fb);
evts.fireEvent('onMyEvent');           //先alert出"aaaaaaa",然后alert出"bbbbbbb"

evts.removeEvent('onMyEvent',fa);
evts.fireEvent('onMyEvent');          //alert 出"bbbbbbb"

类：Options
作用：为实现该类的类提供一个可选参数管理器
它提供了一个方法：
setOptions - 设置类的this.options,该方法的第一个参数是要给出的默认参数列表，第二个参数是可提供用户输入的参数列表。如果实现同时实现Options 类和Events类，则参数列表中有以on开头(/^on[A-Z]/)的参数名，则自动会把这些参数加入到Events提供的事件管理器中。
var MyClass = new Class({
   initialize: function(options){
       this.setOptions({
           width:   '100px',
           height: '200px',
           onMyEvent: Class.empty
      },options);
   }
});

MyClass.implement(new Options());         //自定义类实现Options
MyClass.implement(new Events());    //自定义类实现Events

//实例化MyClass
var c = new MyClass({
     deep: '100px',
     onMyEvent: function(){alert('option[deep]>:' + this.options['deep']);}
});

c.fireEvent('onMyEvent');              //alert出"option[deep]:100px"

类：Group
作用：把元素分组，然后可以为这些组进行添加事件监听器，这些“组监听器”的触发时机是这样的：当组里面的所有元素都触发过指定的事件后，"组监听器"就开始执行。比如有3个按钮A,B,C组成一个Group,然后为这个Group添加一个click事件的监听器方法，则，当你分别去按这3个按钮，不分次序，不分按的次数（比如A按了1次，B按了2次,然后再按C）,当按最后一个按钮时候(比如已经按过了A和B，现在按下 C)，那个“组监听器”就被执行了。
<a href="#" id="link1" >AAA</a>
<a href="#" id="link2" >BBB</a>
<a href="#" id="link3" >CCC</a>

$('link1').addEvent('click',function(){alert('AAA');});
$('link2').addEvent('click',function(){alert('BBB');});
$('link3').addEvent('click',function(){alert('CCC');});

var g = new Group($('link1'),$('link2'),$('link3'));
g.addEvent('click', function(){
       alert('group event');
});

//当你按照类似如下规律点击链接：
先点击link1：alert出"AAA"
再点击link2：alert出"BBB"
最后点击link3：先alert出"group event"，再alert出"CCC"

一般情况下，Chain,Events和Options都不会单独使用，都会被别的类implement，来为这些类提供功能增强。

   mootools【八】 - Css查询支持之Dom.js
mootools支持通过Css选择器语法来获取元素节点，以最少的代码做最多的事情。在Dom.js中提供了实现这些功能的工具方法以及元素级的扩展。

工具方法：$E
作用：按照css选择器语法获取第一个符合规则的元素
参数：
selector - css选择器,如a,#my_div等
filter - 可选，过滤范围，默认是document
<div id="myDiv">
      <a href="#" id="link1">AAA</a>
      <a href="#" id="link2">BBB</a>
      <a href="#" id="link3">CCC</a>
</div>

$E('a','myDiv');     //获取的是id为link1的超链接元素

工具方法：$ES
作用：按照css选择器语法获取所有符合规则的元素
参数：
selector - css选择器,如a,#my_div等
filter - 可选，过滤范围，默认是document
<div id="myDiv">
      <a href="#" id="link1">AAA</a>
      <a href="#" id="link2">BBB</a>
      <a href="#" id="link3">CCC</a>
</div>

   $ES('a','myDiv');       //获取所有3个链接元素
-------------------------------------------------------------------------------------------------------------------------
对Element的扩展方法：

方法：getElements
作用：获取当前元素下符合给出css选择器的元素
<div id="myDiv">
      <a href="#" id="link1">AAA</a>
      <a href="#" id="link2">BBB</a>
      <a href="#" id="link3">CCC</a>
</div>
    
$('myDiv').getElements('a');    //获取myDiv下的3个链接

方法：getElementById
作用：如同document.getElementById方法一样，该方法也是按照指定id来获取元素，只不过是再当前元素之下的范围内查找。
   $('myDiv').getElementById('link2');

方法：getElement
作用：功能如同$E,只不过查找范围是当前元素。获取当前元素下符合指定选择器的第一个元素。
$('myDiv').getElement('a');

方法：getElementsBySelector
作用：功能和getElements大致相同，并且支持css选择器中的逗号。该方法使用的时候可以用$$来替代。
$('myDiv').getElementsBySelector('#link1,#link2');

========================================================================
document又在以上扩展的基础上被扩展出一个方法： getElementsByClassName
document.getElementsByClassName('my_clazz');

标准javascript中只有document有getElementsByTagName。经过扩展，mootools又让每个Element元素可以使用 getElementsByTagName方法：
$('myDiv').getElementsByTagName('a');

这部分的扩展已经让mootools的对象获取方式足够方便和强大了。非常的棒！

   mootools【九】- 工具类Hash和Color
      Hash数据结构，我们通常用来存放键值对。在javascript中，没有规范的Hash的实现，一般，我们都会通过包装对象来模拟实现这样的Hash,来实现规范化的Hash对象操作。
     另外，颜色代码的操作在做UI的时候很频繁，尤其是要做十分绚丽的效果的时候，需要对颜色代码做很多的计算，mootools在这个方面做了比较多的工作，通过对String,Array的扩展，以及提供的Color类，我们随时可以对颜色数据进行转换和计算。

类： Hash
方法：
构造方法 - 传入一个包含键值对的object
get - 按键取值
hasKey - 判断是否有指定的键
set - 把键值对存放入Hash
remove - 删除指定键的键值对
each - 用法和Array的each相似，每个键值对的通过each中指定的函数的第一个参数(值)和第二个参数(键)传入。
extend - 把一个包含键值对的对象合并到当前Hash中，相同键的值将被新的值覆盖。
empty - 这个方法的功能在mootools1.0和1.1dev版本中是完全不一样的，1.0中是判断Hash中是否已经没有键值对，而在1.1dev中是清空Hash中的所有键值对，请注意区别。
keys - 获取Hash中的所有键
values - 获取Hash中的所有值
   var hash = new Hash({
          one: 1,
          two: 2,
          three: 3
});
    
var one = hash.get('one');
var hk   = hash.hasKey('three');
hash.set('four',4);
   hash.each(function(v,k){
          alert(k+'-'+v);
});

创建Hash的快捷方法：
$H
$H({a:1,b:2})

------------------------------------------------------------------------------------------------------------------------------------------------

类：Color
构造方法参数：
color - 代表颜色的代码，可以是十六进制代码，代表RGB或HSB代码的数组
type - 可选，用于明确指定代码的类型，有rgb,hsb,hex。当你要创建hsb代码或hex数组形式代码的时候，需要明确指定。
作用：颜色对象，包含了很多颜色管理方法。
var black = new Color('#000');
var purple = new Color([255,0,255]);

方法：mix
作用： 把两种或更多的颜色和当前颜色混合
参数：
参数个数不定，可以把多个颜色代码混合，当最后一个参数是一个数字的时候，这个数字被用作每次混合时取新颜色的百分量。
var darkpurple = black.mix('#fff', purple, 10);
$('myDiv').setStyle('background-color', darkpurple);

方法：invert
作用：取当前颜色的反色
var c = new Color('#FF9900').invert();
$('myDiv').setStyle('background-color',c);

方法：setHue
作用：设置颜色的色相
var c = new Color('#FF9900').setHue(10);
$('myDiv').setStyle('background-color',c);

方法：setSaturation
作用：设置色饱和度
var c = new Color('#FF9900').setSaturation(50);
$('myDiv').setStyle('background-color',c);

方法：setBrightness
作用：设置色彩亮度
var c = new Color('#FF9900').setBrightness(10);
$('myDiv').setStyle('background-color',c);

创建Color的两个快捷工具方法：
$RGB(r, g, b) - 建立RGB模式的Color
$HSB(h, s, b) - 建立HSB模式的Color

如果加载了Color.js，那么Array还会被扩展两个方法：
rgbToHsb - 当前数组前三个元素将被作为rgb值,转换为hsb值代表的数组
hsbToRgb - 和rgbToHsb 相反的功能

   mootools【十】- window的扩展
         浏览器的window对象本身就提供了我们很多的对浏览器本身属性的获取或设置的方法，但是我们也知道，由于各大浏览器之间对标准的实现不统一，导致很多方法功能上有所出入，mootools为我们统一了我们最常用的一些方法：
         mootools的Window.Base.js里面，主要实现了对DOM树创建完成的事件监听。以前，我们可能经常把javascript代码写在 html代码的最后面获者加上defer属性，以保证javascript代码要操作的html先于javascript代码装载(如果不是这样的话，javascript将获取不到目标元素而出错)，但是，这种方式看起来还是太杂乱，保险系数也不是最高的。其实像ie的话可以根据document 的readyState属性来判断文档树的建立状态，而有些浏览器在创建文档树之后会触发onload事件，mootools把这些都包装了起来，形成一个统一的自定义事件"domready"，你可以像添加其他监听器一样来为window添加这个domready事件的监听器方法：
   window.addEvent('domready', function(){
         alert('the dom is ready');
     });

另外，有个快捷方法，效果和以上相同：
   window.onDomReady(function(e){
          alert('dom is ready!!!');
});

mootools的Window.Size.js中呢，提供了一系列和浏览器window的尺寸有关的工具方法，
window的扩展方法：
方法： getWidth - 获取window的当前高度(不包含滚动条的滚动量，即当前能见视野高度)
方法：getHeight - 获取window的当前宽度(不包含滚动条的滚动量，即当前能见视野宽度)
方法：getScrollWidth - 获取window的当前高度(包含了整个内容区域，即可滚动部分也计算在内)
方法：getScrollHeight - 获取window的当前宽度(包含了整个内容区域，即可滚动部分也计算在内)
方法：getScrollLeft - 获取window滚动的水平偏移量
方法：getScrollTop - 获取window滚动的垂直偏移量
方法：getSize - 获取window上面几个方法的提供的数据，格式：
{
    'size':             {'x': this.getWidth(),              'y': this.getHeight()},
    'scrollSize':   {'x': this.getScrollWidth(),   'y': this.getScrollHeight()},
    'scroll':          {'x': this.getScrollLeft(),       'y': this.getScrollTop()}
}

   mootools【十一】- 多彩的开始
         mootools中集成了一些非常好用的界面组件， 也提供了非常好用的界面效果工具类，用这些工具做界面效果，感觉上比用Prototype+Scriptaculous开发更方便，效果也更加的顺畅平滑。
        mootools的界面库Moo.Fx的设计十分的讲究OO原则，通过对提供了基本功能的基类的继承，扩展出了不同功能的工具类和组件类。Fx.Base 就是这样一个基础类，它本身实现了Events,Chain,Options三个类，它包含了界面效果的最基本的动作和属性：

构造方法的可选属性：
------------------------------------------------------------------------------------------------------------------------------
onStart            - 效果开始前执行的方法，默认是一个空的function。你可以指定你的function。
onComplete - 完成效果后执行的方法，默认是一个空的function。你可以指定你的function。
onCancel       -   中断效果后执行的方法，默认是一个空的function。你可以指定你的function。
transition        - 效果的过渡变换所使用的方程，用来描述效果的变化规律。你可以在Fx.Transitions类中找到其他的方程，默认使用的是Fx.Transitions.sineInOut(即正弦)
duration          - 变化频率，毫秒。默认为500。
unit                  - 变化量的单位。默认是'px',你可以指定如'em','%'之类。
wait                 - true/false。指定在执行下一个过渡效果之前是否等待当前的过渡效果执行结束。默认为true
fps                  - 帧频。即每秒所执行的变换次数。默认为30帧/秒。

------------------------------------------------------------------------------------------------------------------------------
方法：set
作用：不经过过渡变换效果，直接设置为指定的值
var myFx = new Fx.Style('myElement', 'opacity').set(0);

方法：start
作用：执行效果，让指定的开始值过渡变换到指定的结束值
var myFx = new Fx.Style('myElement', 'opacity').start(0,1);

方法：stop
作用：中断效果的执行，如果指定了参数为false,则会执行onCancel指定的方法。

最后，如果要查看有哪些变换方程可以选用，可以看Fx.Transitions.js里的Fx.Transitions类，里面提供了非常之多的变换方程，具体的效果差别，自己去一个个去试试看吧。

   mootools【十二】- 多彩的开始2
          这些天有点事情比较忙，几天没更新了Blog了。不能让这个mootools的学习文章半途而废了。
        上回说到mootools的Fx.Base类，它是mootools效果库Fx的基础，而我们平时会使用最频繁的，就是Fx.Style类，它是直接继承了Fx.Base类的。这个效果类非常强大，基本上可以实现对CSS样式中任何一个属性的过渡变换。
        Fx.Base中提供的方法在Fx.Style中都能用，用法是相同的，其他扩展的方法如下：
方法：hide
作用：如同调用Fx.Base的set方法，并且参数为0（即set(0)）,当效果作用在opacity,或者width,height(overflow需要是hidden)的时候,调用这个方法的效果是隐藏元素。
   var myFx = $('myDiv').effect('width', {duration: 1000});
myFx.hide();

方法：start
作用：在两个区间之间进行过渡变换，和Fx.Base的start用法一样。
   var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});
marginChange.start(10);      //从myElement当前的margin-top值过渡到10
    marginChange.start(1,20);   //myElement的margin-top值从1过渡到20

由于Fx.Style的引入，Element又被扩展了一个实现效果的快捷方法： effect
具体用法如下：
   var myEffect = $('myElement').effect('height', {duration: 1000, transition: Fx.Transitions.linear});
myEffect.start(10, 100);

想实现同时进行多个效果怎么做？方便，Fx.Styles就是提供这样功能的一个类，它也是直接继承了Fx.Base的类，你可以像这样来使用它：
   var myFx = new Fx.Styles('myDiv', {duration: 1000});
   myFx.start({
      'width':[100,300],
      'height':[100,200]
});

十分简单明了。

同样，Effect由此多了一个effects快捷方法，可以这样使用：
   var myFxs= $(myElement).effects({duration: 1000, transition: Fx.Transitions.sineInOut});
   myFxs.start({
      'height': [10, 100],
      'width': [900, 300]
});

另外，除了上面的两个类之外，还有一个可以用来作转换效果的类：Fx.Elements，这个类可以按照指定的元素顺序来执行指定的效果，就像这样：
var myElementsEffects = new Fx.Elements($$('a'));
   myElementsEffects.start({
          '0': {                                  //对第一个元素执行opacity和width的过渡变化
          'opacity': [0,1],
           width': [100,200]
      },
       '1': {                                //对第二个元素执行opacity过渡变换
          'opacity': [0.2, 0.5]
      }
});

差不多就这样了，不过别看就这么些东西，但是它们提供的功能足够强大，好好使用他们吧:)。
   mootools1.1正式发布了,新特性一览
今天上了下mootools的主站，发现1.1 released。
看了一下，主要的新特性如下：
一.更快的速度,兼容性和全方位优化
mootools在速度上面进行了很大的优化，比较突出的是在CSS选择器方面(不仅仅在实现逻辑方面进行优化，XPATH被在所有支持的浏览器中启用 )
二.更加新颖的事件系统
1.自定义事件：提供了一套api来提供定义自定义事件。比如mootools自带的mouseenter,mouseleave,domready就是这类自定义事件。
2.Element::cloneEvents提供了事件的复制
如:note.clone().cloneEvents(note); //复制note对象并且把原来note对象上的事件监听也复制过去
三.提供更多的Element的方法及新的Element构造方式。
例如新的构造Elment如下：
   var note = new Element('div', {
          'id': 'note',
          'class': 'note',
           'styles': {
                  'left': 15,
                  'top': 15
          },
           'events': {
                  'click': noteConfirm,
                  'mouseover': noteShowMore
          }
});

对比原先的功能对等的构造方式：
   var note = new Element('div').addClass('note').setProperty('id', 'note').setStyles({
          'left': 15,
          'top': 15
   }).addEvents({
          'click': noteConfirm,
          'mouseover': noteShowMore
});

*新方法：
Element::set - 功能如同新的构造方法的第二个参数一样，可以给Element添加各种属性
Element::hasChild   - 判断是否内部含有所给出的子元素
*改进的方法：
Element::setStyle - 对于没有明确给出单位的数值型值，将默认为单位是'px'
Element::adopt - 新版本支持多个元素（这个非常不错，很方便）

四.元素过滤器
利用新的元素过滤器，可以对使用$$得到的元素进行进一步的归纳。这些将不需要Element.Selectors，而只使用原生的tag名选择过滤方法(应该速度上快一点吧)
一下例子中将不会用到Element.Selectors:
$('div').filterByClass('myClass');
而这个会用到：
$('div.myClass');
更真实的例子：
$('myElement').getChildren().filterByClass('myClass');
五.更加完善的Ajax功能
基本的Ajax实现逻辑从Ajax类中转入到了XHR类中了。
其他提供的一些更加强大的方法：
Ajax::cancel - 可中断正在执行的请求。如果启用了‘autoCancel’选项，则当发出新的请求的时候自动中断当前请求
Ajax::evalScripts - 加强了全局的eval及自动执行Content-Type为javascript的返回内容
postBody选项更名为data,因为现在XHR可以分别接受get和post方法提交的数据
六.Hash.Cookie和Group
Hash.Cookie是一个扩展的Hash类，它可以自动或手工的保存或加载在Cookie中以JSON格式存储的数据
Group - 可以对元素和事件进行分组处理的类(用法可以参见我前面的文章)
七.工具集
1）新或增强的工具方法：
$defined , $time , $type
2）新的Array方法：
Array::getLast , Array::getRandom , Array::merge ,Array::include
3)新的String方法：
String::contains , String::escapeRegExp
4)新的Number