本教程介紹了當(dāng)今最流行的JavaScript框架之一：MooTools。 MooTools（代表My Object Oriented Tools）兼容Internet Explorer 6 、Firefox、Opera和Chrome。 MooTools的設(shè)計(jì)目標(biāo)是緊湊、模塊化且面向?qū)ο蟆?MooTools專為中高級(jí)JavaScript程序員設(shè)計(jì)，因此在深入學(xué)習(xí)之前，請(qǐng)確保您具備足夠的經(jīng)驗(yàn)。

核心要點(diǎn)

• MooTools（代表My Object Oriented Tools）是一個(gè)緊湊、模塊化且面向?qū)ο蟮腏avaScript框架。它兼容Internet Explorer 6 、Firefox、Opera和Chrome，專為中高級(jí)JavaScript程序員設(shè)計(jì)。
• 該框架包含諸如元素選擇器、DomReady事件、元素創(chuàng)建、事件綁定和瀏覽器檢測(cè)等功能。元素選擇器簡(jiǎn)化了通過(guò)ID、類或?qū)傩阅Ｊ竭x擇元素的操作。 DomReady事件在DOM加載後立即執(zhí)行，從而允許更快地執(zhí)行腳本。事件綁定允許在某些事件發(fā)生時(shí)執(zhí)行代碼，而瀏覽器檢測(cè)則根據(jù)用戶的瀏覽器方便地進(jìn)行條件代碼編寫(xiě)。
• MooTools高度可定制，允許開(kāi)發(fā)人員選擇和修改他們想要使用的組件。這提高了腳本的效率並改善了性能。它還提供了與其他JavaScript庫(kù)的兼容性，並提供了一個(gè)名為瀏覽器抽象的功能，該功能規(guī)範(fàn)化了不同瀏覽器之間的差異，以實(shí)現(xiàn)一致的代碼性能。

獲取MooTools

獲取MooTools非常簡(jiǎn)單。 MooTools分為兩部分，稱為核心和更多。核心包含框架的核心類和模塊，而更多則包含可以根據(jù)應(yīng)用程序需求包含的附加類。 MooTools擁有強(qiáng)大的構(gòu)建器頁(yè)面，可以根據(jù)我們的需求定制核心和更多。 MooTools核心的當(dāng)前穩(wěn)定版本（撰寫(xiě)本文時(shí)）是1.4.5，更多是1.4.0.1。

元素選擇器

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

通過(guò)ID選擇元素

如果我們想用純JavaScript通過(guò)ID選擇元素，我們需要使用冗長(zhǎng)的document.getElementById('id_of_element')語(yǔ)法。 MooTools與許多其他JavaScript框架一樣，使用$來(lái)縮短此操作。您的代碼最終看起來(lái)像這樣：

var element = $('id_of_element');

如果您在同一頁(yè)面上包含使用$的MooTools和其他庫(kù)（例如jQuery），這將導(dǎo)致問(wèn)題。為了克服這種情況，MooTools提供了document.id()作為另一種選擇元素的方法。您選擇元素的代碼現(xiàn)在如下所示：

var element = document.id('id_of_element');

通過(guò)類選擇元素

這將返回具有特定類的元素?cái)?shù)組。要獲取每個(gè)單獨(dú)的元素，我們需要遍歷數(shù)組，如下所示。

var element = $('id_of_element');

通過(guò)屬性模式選擇元素

以下示例選擇其id和class屬性以特定模式開(kāi)頭的元素。

var element = document.id('id_of_element');

同樣，以下示例匹配其id和class屬性以特定模式結(jié)尾的元素。

$$('.class_name').each(function(ele){
  console.log(ele);
});

DomReady事件

DomReady是一個(gè)事件，只能綁定到窗口對(duì)象。 DomReady在DOM加載後立即執(zhí)行，這可能比等待所有其他資源加載的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);
});

元素創(chuàng)建

MooTools可以創(chuàng)建新的HTML元素並將它們注入DOM。在MooTools中創(chuàng)建新的HTML元素非常簡(jiǎn)單。例如，以下代碼創(chuàng)建一個(gè)新的div元素。

$$('[id$=_end_id]').each(function(ele){
  console.log(ele);
});

$$('[class$=_end_class]').each(function(ele){
  console.log(ele);
});

前面的代碼創(chuàng)建了一個(gè)新元素，但沒(méi)有將其註入DOM。要執(zhí)行注入，您需要調(diào)用adopt()方法。以下示例顯示瞭如何執(zhí)行此操作。

window.addEvent('domready', function(){
  if(document.id('id_of_element'))
  {
    alert('Element Exists');
  }
});

執(zhí)行此代碼時(shí)，您可以在結(jié)束body標(biāo)籤之前看到添加的新div。

事件綁定

事件綁定會(huì)導(dǎo)致在對(duì)元素執(zhí)行某些事件時(shí)執(zhí)行代碼。單擊、雙擊和懸停是常見(jiàn)事件的示例。您還可以創(chuàng)建自己的自定義事件，但這超出了本文的範(fàn)圍。作為MooTools事件綁定的示例，以下代碼將一個(gè)簡(jiǎn)單的單擊事件處理程序添加到一個(gè)元素。

var new_div = new Element('div', {'class': 'new_div'});

您還可以將事件添加到動(dòng)態(tài)創(chuàng)建的元素。以下代碼將單擊處理程序添加到動(dòng)態(tài)創(chuàng)建的元素。

var new_div = new Element('div', {'class': 'new_div'});

$$('body').adopt(new_div);

瀏覽器檢測(cè)

最後但並非最不重要的是使用MooTools進(jìn)行瀏覽器檢測(cè)。當(dāng)您想根據(jù)用戶的瀏覽器編寫(xiě)條件代碼時(shí)，這是必需的。 MooTools提供了Browser對(duì)象，該對(duì)像在頁(yè)面加載時(shí)填充。以下示例使用switch語(yǔ)句來(lái)識(shí)別當(dāng)前瀏覽器。

document.id('id_of_ele').addEvent('click', function(){
  console.log('I was just clicked');
});

結(jié)論

本文介紹了許多MooTools的基礎(chǔ)知識(shí)。有很多優(yōu)秀的資源可以有效地學(xué)習(xí)使用MooTools。我從MooTools文檔和David Walsh博客中學(xué)到了很多東西。您還可以參考我的MooTools作品。

(後續(xù)的FAQ部分可以根據(jù)需要進(jìn)行類似的改寫(xiě)，保持內(nèi)容一致性的同時(shí)調(diào)整措辭和句式)

以上是開(kāi)始使用Mootools的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！