本教程介紹了當今最流行的JavaScript框架之一：MooTools。 MooTools（代表My Object Oriented Tools）兼容Internet Explorer 6 、Firefox、Opera和Chrome。 MooTools的設計目標是緊湊、模塊化且面向對象。 MooTools專為中高級JavaScript程序員設計，因此在深入學習之前，請確保您具備足夠的經驗。
核心要點
獲取MooTools
獲取MooTools非常簡單。 MooTools分為兩部分，稱為核心和更多。核心包含框架的核心類和模塊，而更多則包含可以根據應用程序需求包含的附加類。 MooTools擁有強大的構建器頁面，可以根據我們的需求定制核心和更多。 MooTools核心的當前穩定版本（撰寫本文時）是1.4.5，更多是1.4.0.1。
元素選擇器
任何JavaScript框架最基本的操作之一是選擇元素。 MooTools使用Slick作為其選擇器引擎。 MooTools支持許多不同類型的選擇器。本節介紹一些最有用和最重要的選擇器。
如果我們想用純JavaScript通過ID選擇元素，我們需要使用冗長的document.getElementById('id_of_element')語法。 MooTools與許多其他JavaScript框架一樣，使用$來縮短此操作。您的代碼最終看起來像這樣：
var element = $('id_of_element');如果您在同一頁面上包含使用$的MooTools和其他庫（例如jQuery），這將導致問題。為了克服這種情況，MooTools提供了document.id()作為另一種選擇元素的方法。您選擇元素的代碼現在如下所示：
var element = document.id('id_of_element');這將返回具有特定類的元素數組。要獲取每個單獨的元素，我們需要遍歷數組，如下所示。
var element = $('id_of_element');以下示例選擇其id和class屬性以特定模式開頭的元素。
var element = document.id('id_of_element');同樣，以下示例匹配其id和class屬性以特定模式結尾的元素。
$$('.class_name').each(function(ele){
console.log(ele);
});DomReady事件
DomReady是一個事件，只能綁定到窗口對象。 DomReady在DOM加載後立即執行，這可能比等待所有其他資源加載的window.load事件早得多。我建議深入閱讀DomReady和window.load的比較。以下示例使用DomReady在查詢DOM之前等待其加載。
$$('[id^=id_start_]').each(function(ele){
console.log(ele);
});
$$('[class^=class_start_]').each(function(ele){
console.log(ele);
});元素創建
MooTools可以創建新的HTML元素並將它們注入DOM。在MooTools中創建新的HTML元素非常簡單。例如，以下代碼創建一個新的div元素。
$$('[id$=_end_id]').each(function(ele){
console.log(ele);
});
$$('[class$=_end_class]').each(function(ele){
console.log(ele);
});前面的代碼創建了一個新元素，但沒有將其註入DOM。要執行注入，您需要調用adopt()方法。以下示例顯示瞭如何執行此操作。
window.addEvent('domready', function(){
if(document.id('id_of_element'))
{
alert('Element Exists');
}
});執行此代碼時，您可以在結束body標籤之前看到添加的新div。
事件綁定
事件綁定會導致在對元素執行某些事件時執行代碼。單擊、雙擊和懸停是常見事件的示例。您還可以創建自己的自定義事件，但這超出了本文的範圍。作為MooTools事件綁定的示例，以下代碼將一個簡單的單擊事件處理程序添加到一個元素。
var new_div = new Element('div', {'class': 'new_div'});您還可以將事件添加到動態創建的元素。以下代碼將單擊處理程序添加到動態創建的元素。
var new_div = new Element('div', {'class': 'new_div'});
$$('body').adopt(new_div);瀏覽器檢測
最後但並非最不重要的是使用MooTools進行瀏覽器檢測。當您想根據用戶的瀏覽器編寫條件代碼時，這是必需的。 MooTools提供了Browser對象，該對像在頁面加載時填充。以下示例使用switch語句來識別當前瀏覽器。
document.id('id_of_ele').addEvent('click', function(){
console.log('I was just clicked');
});結論
本文介紹了許多MooTools的基礎知識。有很多優秀的資源可以有效地學習使用MooTools。我從MooTools文檔和David Walsh博客中學到了很多東西。您還可以參考我的MooTools作品。
(後續的FAQ部分可以根據需要進行類似的改寫，保持內容一致性的同時調整措辭和句式)
以上是開始使用Mootools的詳細內容。更多資訊請關注PHP中文網其他相關文章！
