快捷導(dǎo)航

MooTools 1.2介紹

更新時(shí)間：2009年09月14日 16:02:48 作者：

有人最近要求我們寫一個(gè)關(guān)于MooTools 1.2的30天的教程，這似乎也是個(gè)很不錯(cuò)的主意，于是我們決定現(xiàn)在就開始。在這些教程中，我們假設(shè)用戶沒有任何MooTools或者是JavaScript經(jīng)驗(yàn)，但是至少有基本的HTML和CSS知識(shí)。

MooTools 1.2 JavaScript庫介紹
MooTools 1.2是個(gè)強(qiáng)大的輕量級(jí)的JavaScript庫，專門為減輕Web中交互性JavaScript開發(fā)。在某種程度上，你可以認(rèn)為MooTools是CSS的擴(kuò)展。例如，CSS可以讓你在鼠標(biāo)移上去時(shí)發(fā)生改變。JavaScript允許你接觸更多的時(shí)間（點(diǎn)擊事件、鼠標(biāo)懸停事件、鍵盤事件……），MooTools讓這一切變得非常容易。
另外，MooTools還有各種各樣的非常好的擴(kuò)展，可以讓你不只是改變一個(gè)元素的屬性，還可以讓你有”morph“（變形）或者”tween“（補(bǔ)間動(dòng)畫）屬性，讓你有能力去創(chuàng)建動(dòng)畫效果，就像你在我的導(dǎo)航菜單上看到的一樣（Fdream注：原作者的，我的首頁也有）。
這只是一個(gè)例子，MooTools可以讓你做更多的事情。在接下來的30天里，我們將深入MooTools庫，探索從數(shù)組（Array）和函數(shù)（Function）到Fx.Slide，以及其他捆綁插件的每一個(gè)東西。
引用MooTools 1.2
首先，下載并引用MooTools 1.2核心庫。
下載MooTools 1.2核心庫
把MooTools 1.2核心庫上傳到你的服務(wù)器或者工作區(qū)
在你的HTML文檔頭部head標(biāo)記之內(nèi)鏈接MooTools 1.2核心庫
參考代碼：

復(fù)制代碼代碼如下:

（Fdream注：現(xiàn)在MooTools 1.2下載下來后，默認(rèn)的后綴名是”.txt“，請(qǐng)更改后綴為”.js“。）
在Head標(biāo)簽之內(nèi)添加Script標(biāo)簽
現(xiàn)在，你已經(jīng)在你的頁面中應(yīng)用了了MooTools了，你還需要一個(gè)地方來寫你的代碼。這里有兩種選擇：
1. 把下面的代碼寫在你的head標(biāo)簽之內(nèi)，你的代碼寫在script標(biāo)記之內(nèi)：
參考代碼：

復(fù)制代碼代碼如下:

<script type="text/javascript"> 
//Mootools code goes here 
</script> 

2. 在外部建立一個(gè)JavaScript文件，然后在頁面頭部鏈接此文件：
參考代碼：

復(fù)制代碼代碼如下:

在這里，你可以使用任何一種方式。我通常把domready事件中調(diào)用的方法放在script標(biāo)記之間，而我的函數(shù)放在外部文件中。
把代碼放在domready中
MooTools的方法必須在domready事件中調(diào)用。
參考代碼：

復(fù)制代碼代碼如下:

window.addEvent('domready', function() { 
exampleFunction(); 
}); 

（Fdream注：不完全是這樣，但是可以保證你的JavaScript代碼盡可能少地出錯(cuò)。順便說一下domready事件：當(dāng)頁面的HTML代碼（不包括圖片、flash等等，只是代碼）下載完成時(shí)，此時(shí)會(huì)觸發(fā)domready事件。這樣可以在頁面完全下載完成（包括圖片、flash等都下載完成）之前執(zhí)行你的腳本，從而避免因?yàn)橐粡埓髨D要下很長時(shí)間而導(dǎo)致腳本不能執(zhí)行，從而出現(xiàn)異常。）
把代碼放在一個(gè)函數(shù)中
你仍然可以在domready之外創(chuàng)建你的函數(shù)，然后在domready中調(diào)用它：
參考代碼：

復(fù)制代碼代碼如下:

var exampleFunction = function() { 
alert('hello') 
}; 
window.addEvent('domready', function() { 
exampleFunction(); 
}); 

關(guān)于庫的詳細(xì)介紹
在這第一講中，我們會(huì)仔細(xì)地看了一下這個(gè)庫架構(gòu)的一些關(guān)鍵組件，然后粗略地看一下其他基本功能。
Core（核心）
核心（core）部分包含MooTools庫的一些公共函數(shù)（Function）來完成一些常見的任務(wù)，也加強(qiáng)了許多原有功能（后面會(huì)有詳細(xì)介紹）。下面的內(nèi)容只是作為MooTools功能的一些例子，并不能替代您閱讀MooTools的文檔。
檢查一個(gè)值（如果沒有值或者為0則返回false） - $chk(value);
返回兩個(gè)值之間的一個(gè)隨機(jī)整數(shù) - $random(min, max);
可以更容易地檢測瀏覽器、瀏覽器的引擎及瀏覽器的能力
（Fdream注：第一個(gè)描述有誤，$chk(value)只是檢查一個(gè)值是不是已經(jīng)定義或者已經(jīng)賦值，為0時(shí)會(huì)返回true，只有undefined或者null時(shí)返回false。）
Native（本地對(duì)象）
在庫的這一部分也包含了一些公共工具，可以讓你很容易地操作數(shù)組（Array，值或者對(duì)象的簡單列表）、函數(shù)（Function）、數(shù)值（Number）、字符串（String）、哈希對(duì)象（Hash）和事件（Event）。這里是本地對(duì)象中的一些工具特性：
對(duì)數(shù)組中的每個(gè)元素執(zhí)行一段腳本 - .each();
得到數(shù)組中的最后一個(gè)元素 - .getLast();
每個(gè)x毫秒觸發(fā)一個(gè)事件 - .periodical();
對(duì)小數(shù)取整 - .round();
把rgb轉(zhuǎn)換為十六進(jìn)制（HEX） - .rgbToHex();
Class（類）
一個(gè)JavaScript類（相對(duì)于CSS的類），是一個(gè)功能可以重復(fù)使用的對(duì)象。若要更多地了解MooTools類，你可以看看Valerio的這篇簡單介紹的文章（MooTools類——怎樣使用它們）。我也同時(shí)推薦David Walsh的MooTools類模板。
Element（元素）
MooTools庫的Element類提供了一些非常有用的功能。通過這個(gè)類，你可以選擇DOM元素、操控他們的屬性和位置、改變他們的CSS風(fēng)格。這里是MooTools提供的一些非常強(qiáng)大的處理DOM元素的工具：
通過ID或者CSS類名選擇第一個(gè)指定類型的DOM元素 - .getElements();
選擇所有有相同ID或者CSS類名的DOM元素 - .getElements();
給一個(gè)元素添加一個(gè)CSS類 - .addClass();
取得一個(gè)元素的屬性值 - .getProperty();
改變一個(gè)元素的屬性值 - .setProperty();
取得一個(gè)元素的樣式屬性值 - .getStyle();
改變一個(gè)元素的樣式屬性值 - .setStyle();
取得一個(gè)元素的坐標(biāo)位置 - .getCoordinates();
（Fdream注：不推薦在一個(gè)頁面中有多個(gè)相同ID，最好不要出現(xiàn)，在一些瀏覽器下很容易出現(xiàn)不可預(yù)見的錯(cuò)誤。）
Utilities（實(shí)用工具）
實(shí)用工具（Utilities）提供了更多精良的選擇邏輯，包括domready事件、可以管理AJAX調(diào)用的工具、可以輕松管理cookie的工具，甚至還有”swiff“功能，可以提供JavaScript接口給ActionScript。
FX（效果）
這可能是MooTools最有趣的部分了。通過Fx（效果），你可以創(chuàng)建”Tween“（補(bǔ)間動(dòng)畫）和”morph“（形變動(dòng)畫）效果，從而讓你的DOM對(duì)象動(dòng)起來。
在兩個(gè)樣式屬性值之間創(chuàng)建一個(gè)動(dòng)畫變形（比如讓一個(gè)div平緩地變大） - var myFx = new Fx.Tween(element);
在多個(gè)不同的屬性值之間創(chuàng)建一個(gè)動(dòng)畫變形（比如在讓一個(gè)div平緩變大的過程中，讓它的邊框越來越初，同時(shí)變換它的背景顏色） - var myFx = new Fx.Morph(element);
Request（請(qǐng)求）
包含一些可以輕松處理JavaScript XMLHttpRequest（AJAX）功能的工具。為了減輕整個(gè)請(qǐng)求/響應(yīng)（request/response）帶來的痛苦，Request對(duì)象還有一些專門用來處理HTML和JSON對(duì)象（JavaScript對(duì)象表示法）的擴(kuò)展。
Plugins（插件）
MooTools插件擴(kuò)展了核心功能，可以輕松地為你的web項(xiàng)目添加高級(jí)UI功能。插件列表如下：
Fx.Slide
Fx.Scroll
Fx.Elements
Drag
Drag.Move
Color
Group
Hash.Cookie
Sortables
Tips
SmoothScroll
Slider
Scroller
Assets
Accordion
全局概覽
在開始下一講之前，花一點(diǎn)時(shí)間全面地看一下MooTools的文檔?？赡苡行┑胤侥憧床惶灰芩?，盡管通讀它，然后吸收那些你懂的。在接下來的29天中，我們將逐步深入這個(gè)庫特定的部分，然后把MooTools分解成一些容易消化的小部分，但是首先，一定要好好看一下整個(gè)目錄。
更多學(xué)習(xí)
一個(gè)壓縮包，包含了你開始起步所需要的所有東西
包括一個(gè)MooTools 1.2核心庫、一個(gè)簡單的HTML文件、一個(gè)用來寫你的函數(shù)的外部的JavaScript文件、一個(gè)CSS樣式表文件。這個(gè)HTML文件已經(jīng)已經(jīng)寫了詳細(xì)的注釋，并包含有domready事件。

MooTools 1.2 備忘錄
這里是一份很好的MooTools 1.2功能的歸納表，我才給自己打印了一份，正在找地方把它給掛起來。也許我應(yīng)該順便拜訪一下打印機(jī)，然后讓它們給我提供一張海報(bào)大小的：）。不管怎樣，這里是MooTools 1.2備忘錄的鏈接。