關于MooTools你應該熟知的6個基本知識
MooTools是一個精簡、模組化同時也面向對象的JavaScript框架，它設計給中等和進階的JavaScript開發人員使用。使用MooTools優美、詳細而條理分明的API，可讓你寫出強大、富有彈性且跨瀏覽器的程序。和jQuery一樣，MooTools也是非常優秀的JavaScript框架。不過相對jQuery來說，MooTools的相關資源實在太少了。正如本文作者所言，MooTools代表了“
My Object Oriented Tools”。
本文介紹了MooTools框架的一些基本知識，非常有用（關于MooTools與jQuery的區別，可以看看MooTools開發人員同時也是
MooTools Essentials一書作者寫的這篇
文章）。下為全文：
如果你熟悉MooTools，以下介紹的內容可能你已經經歷過了。但如果是MooTools新手，那么弄懂這些對你將很有用，因為它們是所有MooTools代碼都可能面臨的。
一、DOM就緒
這是在DOM定義時執行的窗體事件。MooTools團隊設計該事件在DOM初始化時即發生。
這一設計旨在解決window.load事件的弊端。
通過DomReady，我們可以在DOM加載時即執行腳本而無須等待圖片或其他腳本的加載。
如果你想確保代碼在試圖訪問DOM元素時它存在，最好在將代碼放至“Dom Ready”事件中。
下面是其一個代碼片段。
window.addEvent('domready', function(){
// Your code here
console.log('DOM is ready....')
});
Domready與window.load的區別可以查看這篇 文章。
二、創建新元素
為了構建豐富的Web應用程序或者更好地利用AJAX技術，你可能不得不不斷地去創建HTML元素。使用MooTools則很容易創建一個新的元素。
你可以輕松地新建元素插入其他元素中或者body標簽內部。也可以將各種事件綁定到該元素。
// Create Basic Div Element with
// class "className"
var main_box = new Element('div', {'class': 'className'});
運行上面的代碼，將創建一個DIV，不過在網頁上你還不能看到任何東西。這是因為你必須將DIV插入其他元素或body中。因此，你應該再增加一行代碼。
// Create Basic Div Element with
// class "className"
var main_box = new Element('div', {'class': 'className'});
// place element into Body tag
$$('body').adopt(main_box);</pre>
三、元素選擇器
元素選擇器是所有JavaScript框架都必須擁有的組件。MooTools使用了一個機靈而獨立的選擇器引擎。
在MooTools中，使用$和document.id來代替document.getElementById。你只需要提交元素的ID。$$用于獲取那些多重的元素，比如那些帶有特定類名或者特定編號的元素。
$和document.id將返回所選元素的對象，而$$返回選定元素的數組。
讓我們來看看在MooTools中選擇HTML元素的各種方式。
// get Element with ID "name"
$('name')
document.id('name')
// Get All Elements with Class "class"
$$('.class')
// Get All Elements which
// ID starting with "demo"
$$('[id^=demo]')
// Get All Elements
// ID Ending with "_demo"
$$('[id$=_demo]')
// Get All Div Elements
// class ending with "_demo"
$$('div[class$=_demo]')
// Get all links with class "demo_link"
$$('a.demo_link')</pre>
四、事件綁定
在Mootools中你可以將各種事件綁定到HTML元素中，這可通過addEvent方法來實現。不過，你需要先將欲綁定事件的元素對象化。
var obj = $('id_of_div');
obj.addEvent('click', function(){
alert('I am clicked');
});</pre>
上面的代碼即實現了將事件綁定至對象化的HTML元素。當然你也可以在一個元素中綁定多個事件。
使用MooTools如何創建一個自定義的事件可以查看這篇
文章。
五、元素的基本類型
基本的樣式包括為元素添加/刪除CSS屬性或者css類。同樣，在執行此項任務前你需要先將元素對象化。
var obj = $('id_here');
// Add Single Style
obj.setStyle('color','#000000');
// Add Multiple Styles
obj.setStyles({
'color':'#000000',
'float':'left'
});
// Remove Style
obj.removeStyle('color');
// Add Class
obj.addClass('class1');
// Remove Class
obj.removeClass('class1');</pre>
六、瀏覽器類型判斷
MooTools框架有著很好的類可以用來檢測用戶的瀏覽器類型。看看下面的代碼你就會了解了。
switch(Browser.name)
{
case "safari":
alert('I am Safari');
break;
case "chrome":
alert('I am Chrome');
break;
case "firefox":
alert('I am FireFox');
break;
case "opera":
alert('I am Opera');
break;
case "ie":
alert('I am IE');
break;
}
最后
關于MooTools框架要學習的還有很多，但在使用MooTools創建類及它的其他高級功能前請務必先弄請上述這些，因為它們都是基礎。歡迎發表任何評論。
Via
xpertdeveloper
來自：http://www.iteye.com/news/23492
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！