Mootools 1.2教程

Mootools 1.2教程(3) 數組使用簡介

时间:2015-07-14 11:57来源:网络整理 作者:KKWL 点击:
今天,我們在來看看如何使用數組來管理DOM元素。 基本方法 .each(); 在處理數組時,.each();方法是你最好的朋友。它提供了一種很容易的方法來遍曆數組的每個元素,如果有需要還可以對


今天,我們在來看看如何使用數組來管理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>
<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>
<div>one</div>
<div>two</div>
<span>add to array</span>
</div>

我們可以像以前那樣調用」body_wrap「下面的所有div一樣來創建一個數組:
參考代碼:

複製代碼 代碼如下:

var myArray = $('body_wrap').getElements('div');

要把另外一個元素添加到這個數組中,首先你需要把這個元素賦值給一個變數,然後使用include方法:
參考代碼:

複製代碼 代碼如下:

// 首先把你的元素賦值給一個變數
var newToArray = $('add_to_array');
// 然後把它添加到數組
myArray.include(newToArray);

------分隔线----------------------------