30天學會 MooTools 教學(3): 數組管理DOM元素
在上一篇教程——《30天學會 MooTools 教學(2): DOM選擇器》中,我們介紹了一下選擇器,其中有很多方法就會返回數組(一個你可以對其中內容進行多種操作的特殊列表)。今天,我們在來看看如何使用數組來管理DOM元素。
基本方法
.each();
在處理數組時,.each();方法是你最好的朋友。它提供了一種很容易的方法來遍曆數組的每個元素,如果有需要還可以對其中的元素進行任何邏輯處理。例如,我們可以假設你需要為頁面中的每個div對象調用alert方法:
$$('div').each(function() {
alert('a div');
});
如果使用下面的HTML代碼,上面的JavaScript代碼將彈出兩個alert對話框,每個div一個。
<div>One</div>
<div>Two</div>
.each();方法不需要你使用$$方法。創建一個數組的另一種方式(就像我們昨天講到過的)是使用.getElements();方法。
$('body_wrap').getElements('div').each(function() {
alert('a div');
});
<div id="body_wrap">
<div>One</div>
<div>Two</div>
</div>
還有另外一種方法來完成這個相同的任務,就是把這個數組賦值給一個變量,然後對那個變量使用.each();方法:
// 首先你需要通過語句」var VARIABLE_NAME「來聲明一個變量
// 然後用等於運算符」=「來給這個變量賦值
// 在這個例子中,是一個包含div元素的數組
var myArray = $('body_wrap').getElements('div');
// 現在你就可以把這個變量當數組選擇器使用了
myArray.each(function() {
alert('a div');
});
最後,如果你可能想把你的函數從選擇器中獨立出來。我們會在明天的關於使用函數的教程中更深入地講解這個問題。不過,現在我們可以創建一個非常簡單的示例:
var myArray = $('body_wrap').getElements('div');
// 要創建一個函數,你可以像剛才一樣聲明一個變量,然後給它命名
// 在等號後面使用」function()「來聲明這個變量為一個函數
// 最後,在 { 和 }之間寫入你的函數代碼
var myFunction = function() {
alert('a div');
};
// 現在你就可以在.each();.方法裡面調用剛才的函數了
myArray.each(myFunction);
注意:當你像剛才那樣在.each();.方法裡面調用函數時,你不需要給函數名加上引號。
複製一個數組
$A
MooTools提供了一個簡單的方式——通過$A函數來複製一個數組。讓我們像剛才那樣使用變量創建一個數組:
// 創建你的數組變量
var myArray = $('body_wrap').getElements('div');
複製一個數組(創建該數組的副本):
// 建立一個新的變量名,命名為」myCopy「,然後把」myArray「的副本賦值給它
var myCopy = $A(myArray );
從數組中獲取指定的元素
.getLast();
.getLast();方法返回數組中最後一個元素。首先我們建立一個數組:
var myArray = $('body_wrap').getElements('div');
現在我們可以從這個數組中獲取最後一個元素:
var lastElement = myArray.getLast();
變量lastElement現在的值就是數組myArray中的最後一個元素了。
.getRandom();
和.getLast();一樣,不過它隨機從數組中取得一個元素:
var randomElement = myArray.getRandom();
變量randomElement現在的值就是從數組myArray中隨機選取的一個元素了。
向數組中添加一個元素
.include();
通過這個方法,你可以給數組添加另外一個元素。只要把元素選擇器傳給.include();方法,它就會包含到你的數組中。我們使用下面的HTML代碼:
<div id="body_wrap">
<div>one</div>
<div>two</div>
<span id="add_to_array">add to array</span>
</div>
我們可以像以前那樣調用」body_wrap「下面的所有div一樣來創建一個數組:
var myArray = $('body_wrap').getElements('div');
要把另外一個元素添加到這個數組中,首先你需要把這個元素賦值給一個變量,然後使用include方法:
// 首先把你的元素賦值給一個變量
var newToArray = $('add_to_array');
// 然後把它添加到數組
myArray.include(newToArray);
現在,這個數組就同時包含div和span元素了。
.combine();
和.include();方法一樣,不過它可以讓你把一個數組添加到一個已經存在的數組中,而不用擔心有重複的內容。假設我們現在從下面的HTML中取得了兩個數組:
<div id="body_wrap">
<div>one</div>
<div>two</div>
<span class="class_name">add to array</span>
<span class="class_name">add to array, also</span>
<span class="class_name">add to array, too</span>
</div>
我們可以這樣建立兩個數組:
// 就像我們以前那樣建立你的數組
var myArray= $('body_wrap').getElements('div');
// 然後建立一個所有CSS類名為.class_name的元素數組
var newArrayToArray = $$('.class_name');
現在我們可以使用.combine();方法來合併兩個數組,這個方法會自己處理重複的元素,因此我們不需要處理:
// 把數組newArrayToArray合併到數組myArray中
myArray.combine(newArrayToArray );
現在myArray就包含了newArraytoArray中的所有元素。
代碼示例
數組可以讓你遍歷包含所有項目的列表,並對每個元素執行相同的代碼。在這個例子中,注意變量」item「作為當前元素的替代符的使用。
// 創建一個數組,這個數組包含」body_wrap「裡面所有CSS類名為.class_name的元素
var myArray = $('body_wrap').getElements('.class_name');
// 首先建立一個要添加到數組中的元素
var addSpan = $('addtoarray');
// 然後建立一個要合併的數組
var addMany = $$('.addMany');
// 現在我們把元素addSpan加入到數組中
myArray.include(addSpan);
// 然後合併數組addMany到myArray中
myArray.combine(addMany);
// 建立一個需要對數組中的每個元素都要執行的函數
var myArrayFunction = function(item) {
// item現在指向數組中的當前元素
item.setStyle('background-color', '#eee');
}
// 現在對數組中的每個項目調用myArrayFunction函數
myArray.each(myArrayFunction);
<div id="body_wrap">
<div class="class_name">one</div><!-- this has gray background -->
<div>two</div>
<div class="class_name">three</div><!-- this has gray background -->
<span id="addtoarray">add to array</span> <!-- this has gray background -->
<br /><span class="addMany">one of many</span> <!-- this has gray background -->
<br /><span class="addMany">two of many</span> <!-- this has gray background -->
</div>
延伸學習
這個教程並沒有打算涵蓋你能對數組做的全部事情,但是希望能夠給你一個參考,告訴你MooTools提供了一些什麼功能。要學習更多關於數組的東西,請仔細閱讀這些內容:
這個頁面中有許多關於JavaScript數組的信息
下載一個包含你開始所需要的所有東西的zip包
包括一個簡單的html文件、MooTools
1.2核心庫、一個外部JavaScript文件、一個css文件和上面的所有例子。
Mootools 教學列表:
- 30天學會 MooTools 教學(1): 認識MooTools
- 30天學會 MooTools 教學(2): DOM選擇器
- 30天學會 MooTools 教學(3): 數組管理DOM元素
- 30天學會 MooTools 教學(4): 函數和MooTools
- 30天學會 MooTools 教學(5): 事件處理
- 30天學會 MooTools 教學(6): 操縱HTML DOM元素
- 30天學會 MooTools 教學(7): 設置和獲取樣式表屬性
- 30天學會 MooTools 教學(8): 輸入過濾-數字
- 30天學會 MooTools 教學(9): 輸入過濾-字符串
- 30天學會 MooTools 教學(10): Fx.Tween漸變
- 30天學會 MooTools 教學(11): Fx.Morph、Fx選項和Fx事件
- 30天學會 MooTools 教學(12): Drag.Move來實現拖放
- 30天學會 MooTools 教學(13): 正規表示式
- 30天學會 MooTools 教學(14): 定時器和Hash對象
- 30天學會 MooTools 教學(15): 滾動條(Slider)
- 30天學會 MooTools 教學(16): 排序類和方法簡介
- 30天學會 MooTools 教學(17): 手風琴(Accordion)教程
- 30天學會 MooTools 教學(18): Class 類(第一部分)
- 30天學會 MooTools 教學(19): 工具提示 Tooltips
- 30天學會 MooTools 教學(20): Tab 標籤頁
- 30天學會 MooTools 教學(21): Class 類(第二部分)
- 30天學會 MooTools 教學(22): 通過Fx.Elements同時處理多個形變動畫
- 30天學會 MooTools 教學(23): 滑動效果(Slide)
- 超過 50 個國外 Mootools 教學大集合