DIV CSS 佈局教程網

在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中，我們介紹了一下選擇器，其中有很多方法就會返回數組（一個你可以對其中內容進行多種操作的特殊列表）。今天，我們在來看看如何使用數組來管理DOM元素。

基本方法

.each();

在處理數組時，.each();方法是你最好的朋友。它提供了一種很容易的方法來遍歷數組的每個元素，如果有需要還可以對其中的元素進行任何邏輯處理。例如，我們可以假設你需要為頁面中的每個div對象調用alert方法：

1. $$('div').each(function() {
2.     alert('a div');
3. });

如果使用下面的HTML代碼，上面的JavaScript代碼將彈出兩個alert對話框，每個div一個。

1. <div>One</div>
2. <div>Two</div>

.each();方法不需要你使用$$方法。創建一個數組的另一種方式（就像我們昨天講到過的）是使用.getElements();方法。

1. $('body_wrap').getElements('div').each(function() {
2.     alert('a div');
3. });

1. <div id="body_wrap">
2.     <div>One</div>
3.     <div>Two</div>
4. </div>

還有另外一種方法來完成這個相同的任務，就是把這個數組賦值給一個變量，然後對那個變量使用.each();方法：

1. // 首先你需要通過語句”var VARIABLE_NAME“來聲明一個變量
2. // 然後用等於運算符”=“來給這個變量賦值
3. // 在這個例子中，是一個包含div元素的數組
4. var myArray = $('body_wrap').getElements('div');
5.  
6. // 現在你就可以把這個變量當數組選擇器使用了
7. myArray.each(function() {
8.     alert('a div');
9. });

最後，如果你可能想把你的函數從選擇器中獨立出來。我們會在明天的關於使用函數的教程中更深入地講解這個問題。不過，現在我們可以創建一個非常簡單的示例：

1. var myArray = $('body_wrap').getElements('div');
2.  
3. // 要創建一個函數，你可以像剛才一樣聲明一個變量，然後給它命名
4. // 在等號後面使用”function()“來聲明這個變量為一個函數
5. // 最後，在 { 和 }之間寫入你的函數代碼
6. var myFunction = function() {
7.     alert('a div');
8. };
9.  
10. // 現在你就可以在.each();.方法裡面調用剛才的函數了
11. myArray.each(myFunction);

注意：當你像剛才那樣在.each();.方法裡面調用函數時，你不需要給函數名加上引號。

復制一個數組

$A

MooTools提供了一個簡單的方式——通過$A函數來復制一個數組。讓我們像剛才那樣使用變量創建一個數組：

1. // 創建你的數組變量
2. var myArray = $('body_wrap').getElements('div');

復制一個數組（創建該數組的副本）：