開始使用Mootools

本教程介紹了當今最流行的JavaScript框架之一：MooTools。 MooTools（代表My Object Oriented Tools）兼容Internet Explorer 6 、Firefox、Opera和Chrome。 MooTools的設計目標是緊湊、模塊化且面向對象。 MooTools專為中高級JavaScript程序員設計，因此在深入學習之前，請確保您具備足夠的經驗。

核心要點

• MooTools（代表My Object Oriented Tools）是一個緊湊、模塊化且面向對象的JavaScript框架。它兼容Internet Explorer 6 、Firefox、Opera和Chrome，專為中高級JavaScript程序員設計。
• 該框架包含諸如元素選擇器、DomReady事件、元素創建、事件綁定和瀏覽器檢測等功能。元素選擇器簡化了通過ID、類或屬性模式選擇元素的操作。 DomReady事件在DOM加載後立即執行，從而允許更快地執行腳本。事件綁定允許在某些事件發生時執行代碼，而瀏覽器檢測則根據用戶的瀏覽器方便地進行條件代碼編寫。
• MooTools高度可定制，允許開發人員選擇和修改他們想要使用的組件。這提高了腳本的效率並改善了性能。它還提供了與其他JavaScript庫的兼容性，並提供了一個名為瀏覽器抽象的功能，該功能規範化了不同瀏覽器之間的差異，以實現一致的代碼性能。

獲取MooTools

獲取MooTools非常簡單。 MooTools分為兩部分，稱為核心和更多。核心包含框架的核心類和模塊，而更多則包含可以根據應用程序需求包含的附加類。 MooTools擁有強大的構建器頁面，可以根據我們的需求定制核心和更多。 MooTools核心的當前穩定版本（撰寫本文時）是1.4.5，更多是1.4.0.1。

元素選擇器

任何JavaScript框架最基本的操作之一是選擇元素。 MooTools使用Slick作為其選擇器引擎。 MooTools支持許多不同類型的選擇器。本節介紹一些最有用和最重要的選擇器。

通過ID選擇元素

如果我們想用純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中文網其他相關文章！