MooTools教程(1):認識MooTools

有人最近要求咱們寫一個關於MooTools 1.2的30天的教程，這彷佛也是個很不錯的主意，因而咱們決定如今就開始。在這些教程中，咱們假設用戶沒有任何MooTools或者是JavaScript經驗，可是至少有基本的HTML和CSS知識。

MooTools 1.2 JavaScript庫介紹

MooTools 1.2是 個強大的輕量級的JavaScript庫，專門爲減輕Web中交互性JavaScript開發。在某種程度上，你能夠認爲MooTools是CSS的擴 展。例如，CSS可讓你在鼠標移上去時發生改變。JavaScript容許你接觸更多的時間（點擊事件、鼠標懸停事件、鍵盤事 件……），MooTools讓這一切變得很是容易。

另外，MooTools還有各類各樣的很是好的擴展，可讓你不僅是改變一個元素的屬性，還可讓你有」morph「（變形）或者」tween「（補間動畫）屬性，讓你有能力去建立動畫效果，就像你在個人導航菜單上看到的同樣（Fdream注：原做者的，個人首頁也有）。

這只是一個例子，MooTools可讓你作更多的事情。在接下來的30天裏，咱們將深刻MooTools庫，探索從數組（Array）和函數（Function）到Fx.Slide，以及其餘捆綁插件的每個東西。

引用MooTools 1.2

首先，下載並引用MooTools 1.2核心庫。

• 下載MooTools 1.2核心庫
• 把MooTools 1.2核心庫上傳到你的服務器或者工做區
• 在你的HTML文檔頭部head標記以內連接MooTools 1.2核心庫

參考代碼：  [複製代碼]  [保存代碼]

1.  

（Fdream注：如今MooTools 1.2下載下來後，默認的後綴名是」.txt「，請更改後綴爲」.js「。）

在Head標籤以內添加Script標籤

如今，你已經在你的頁面中應用了了MooTools了，你還須要一個地方來寫你的代碼。這裏有兩種選擇：

1. 把下面的代碼寫在你的head標籤以內，你的代碼寫在script標記以內：

參考代碼：  [複製代碼]  [保存代碼]

1.  

2. 在外部創建一個JavaScript文件，而後在頁面頭部連接此文件：

參考代碼：  [複製代碼]  [保存代碼]

1.  

在這裏，你可使用任何一種方式。我一般把domready事件中調用的方法放在script標記之間，而個人函數放在外部文件中。

把代碼放在domready中

MooTools的方法必須在domready事件中調用。

參考代碼：  [複製代碼]  [保存代碼]

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

（Fdream注：不徹底是這樣，可是能夠保證你的JavaScript代碼儘量少地出錯。順便說一下domready事件：當頁面的HTML代 碼（不包括圖片、flash等等，只是代碼）下載完成時，此時會觸發domready事件。這樣能夠在頁面徹底下載完成（包括圖片、flash等都下載完 成）以前執行你的腳本，從而避免由於一張大圖要下很長時間而致使腳本不能執行，從而出現異常。）

把代碼放在一個函數中

你仍然能夠在domready以外建立你的函數，而後在domready中調用它：

參考代碼：  [複製代碼]  [保存代碼]

1. var exampleFunction = function() {
2.      alert('hello')
3. };
4.  
5. window.addEvent('domready', function() {
6.     exampleFunction();
7. });

關於庫的詳細介紹

在這第一講中，咱們會仔細地看了一下這個庫架構的一些關鍵組件，而後粗略地看一下其餘基本功能。

Core（核心）

核心（core）部分包含MooTools庫的一些公共函數（Function）來完成一些常見的任務，也增強了許多原有功能（後面會有詳細介紹）。下面的內容只是做爲MooTools功能的一些例子，並不能替代您閱讀MooTools的文檔。

• 檢查一個值（若是沒有值或者爲0則返回false） - $chk(value);
• 返回兩個值之間的一個隨機整數 - $random(min, max);
• 能夠更容易地檢測瀏覽器、瀏覽器的引擎及瀏覽器的能力

（Fdream注：第一個描述有誤，$chk(value)只是檢查一個值是否是已經定義或者已經賦值，爲0時會返回true，只有undefined或者null時返回false。）

Native（本地對象）

在庫的這一部分也包含了一些公共工具，可讓你很容易地操做數組（Array，值或者對象的簡單列表）、函數（Function）、數值（Number）、字符串（String）、哈希對象（Hash）和事件（Event）。這裏是本地對象中的一些工具特性：

• 對數組中的每一個元素執行一段腳本 - .each();
• 獲得數組中的最後一個元素 - .getLast();
• 每一個x毫秒觸發一個事件 - .periodical();
• 對小數取整 - .round();
• 把rgb轉換爲十六進制（HEX） - .rgbToHex();

Class（類）

一個JavaScript類（相對於CSS的類），是一個功能能夠重複使用的對象。若要更多地瞭解MooTools類，你能夠看看Valerio的這篇簡單介紹的文章（MooTools類——怎樣使用它們）。我也同時推薦David Walsh的MooTools類模板。

Element（元素）

MooTools庫的Element類提供了一些很是有用的功能。經過這個類，你能夠選擇DOM元素、操控他們的屬性和位置、改變他們的CSS風格。這裏是MooTools提供的一些很是強大的處理DOM元素的工具：

• 選擇全部有相同ID或者CSS類名的DOM元素 - .getElements();
• 給一個元素添加一個CSS類 - .addClass();
• 取得一個元素的屬性值 - .getProperty();
• 改變一個元素的屬性值 - .setProperty();
• 取得一個元素的樣式屬性值 - .getStyle();
• 改變一個元素的樣式屬性值 - .setStyle();
• 取得一個元素的座標位置 - .getCoordinates();

（Fdream注：不推薦在一個頁面中有多個相同ID，最好不要出現，在一些瀏覽器下很容易出現不可預見的錯誤。）

Utilities（實用工具）

實用工具（Utilities）提供了更多精良的選擇邏輯，包括domready事件、能夠管理AJAX調用的工具、能夠輕鬆管理cookie的工具，甚至還有」swiff「功能，能夠提供JavaScript接口給ActionScript。

FX（效果）

這多是MooTools最有趣的部分了。經過Fx（效果），你能夠建立」Tween「（補間動畫）和」morph「（形變更畫）效果，從而讓你的DOM對象動起來。

• 在兩個樣式屬性值之間建立一個動畫變形（好比讓一個div平緩地變大） - var myFx = new Fx.Tween(element);
• 在多個不一樣的屬性值之間建立一個動畫變形（好比在讓一個div平緩變大的過程當中，讓它的邊框愈來愈初，同時變換它的背景顏色） - var myFx = new Fx.Morph(element);

Request（請求）

包含一些能夠輕鬆處理JavaScript XMLHttpRequest（AJAX）功能的工具。爲了減輕整個請求/響應（request/response）帶來的痛苦，Request對象還有一些專門用來處理HTML和JSON對象（JavaScript對象表示法）的擴展。

Plugins（插件）

MooTools插件擴展了核心功能，能夠輕鬆地爲你的web項目添加高級UI功能。插件列表以下：

• Fx.Slide
• Fx.Scroll
• Fx.Elements
• Drag
• Drag.Move
• Color
• Group
• Hash.Cookie
• Sortables
• Tips
• SmoothScroll
• Slider
• Scroller
• Assets
• Accordion

全局概覽

在開始下一講以前，花一點時間全面地看一下MooTools的文檔。可能有些地方你看不太懂，不要管它，儘管通讀它，而後吸取那些你懂的。在接下來 的29天中，咱們將逐步深刻這個庫特定的部分，而後把MooTools分解成一些容易消化的小部分，可是首先，必定要好好看一下整個目錄。

更多學習

一個壓縮包，包含了你開始起步所須要的全部東西

包括一個MooTools 1.2核心庫、一個簡單的HTML文件、一個用來寫你的函數的外部的JavaScript文件、一個CSS樣式表文件。這個HTML文件已經已經寫了詳細的註釋，幷包含有domready事件。

其餘的MooTools教程

同時，這裏列出了一些其餘幫助你開始的的MooTools教程。

MooTools 1.2 備忘錄

這裏是一份很好的MooTools 1.2功能的概括表，我纔給本身打印了一份，正在找地方把它給掛起來。也許我應該順便拜訪一下打印機，而後讓它們給我提供一張海報大小的：）。無論怎樣，這裏是MooTools 1.2備忘錄的連接。

Mootools論壇

若是你想和其餘人討論MooTools，檢查代碼示例或者深刻討論某個問題，你能夠來這裏。這纔剛剛開張，可是正在逐漸熱起來：MooTools 1.2論壇。