mootools

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和GroupHash.Cookie是一個擴展的Hash類，它能夠自動或手工的保存或加載在Cookie中以JSON格式存儲的數據Group - 能夠對元素和事件進行分組處理的類(用法能夠參見我前面的文章)七.工具集1）新或加強的工具方法：$defined , $time , $type2）新的Array方法：Array::getLast , Array::getRandom , Array::merge ,Array::include3)新的String方法：String::contains , String::escapeRegExp4)新的Number