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/