MooTools教程(3):數組管理DOM元素

2024-07-21 02:04:22

字體：大中小

來源：轉載

供稿：網友

在上一篇教程——《mootools 1.2教程(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();.方法里面調用函數時，你不需要給函數名加上引號。

復制一個數組

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>
<div>two</div>
<div class="class_name">three</div>
<span id="addtoarray">add to array</span>
<br /><span class="addmany">one of many</span>
<br /><span class="addmany">two of many</span>
</div>