MooTools - 陣列的使用

MooTools是一個輕量級的JavaScript庫，有助於建立動態網頁。在管理DOM元素時，我們需要選擇網頁上的所有DOM元素。可以使用陣列來處理此集合。

本章解釋瞭如何使用陣列來管理DOM元素。

each() 方法

這是處理陣列的基本方法。它迭代列表中的所有元素。您可以根據需要使用此方法。例如，如果您想選擇頁面上的所有div元素，請按照下面給出的指令碼操作。請檢視包含多個div的以下HTML頁面。

<div>One</div>
<div>Two</div>

您可以使用以下指令碼從頁面上div的集合中選擇**每個單獨的div**。該指令碼將選擇每個div並顯示一個警告框。請檢視以下指令碼。

指令碼

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

您可以使用以下語法來處理上面給出的示例。請檢視HTML頁面。

指令碼

<div id = "body_div">
   <div>One</div>
   <div>Two</div>
</div>

這裡，兩個div包含在另一個div — **body_div** 中。在設計指令碼時，我們必須只選擇一個外部div。稍後，透過使用getElements()方法，我們可以選擇兩個內部div。請檢視以下指令碼。

指令碼

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

您可以使用不同的方法編寫上述指令碼，如下所示。在這裡，我們使用一個單獨的變數來選擇**body_div**。

指令碼

var myArray = $('body_div').getElements('div');
myArray.each(function() {
   alert('a div');
});

從陣列中選擇特定元素

在操作元素陣列時，我們可以從元素陣列中選擇特定元素。以下是用於操作DOM元素的一些重要方法：

getLast()

此方法返回陣列的最後一個元素。讓我們設定一個數組來理解此方法。

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

我們現在可以獲取陣列中的最後一個元素。

var lastElement = myArray.getLast();

變數**lastElement**現在代表myArray中的最後一個元素。

getRandom()

getRandom()方法的工作方式與getLast()方法類似，但會從陣列中獲取一個隨機元素。

語法

var randomElement = myArray.getRandom();

變數**randomElement**現在代表**myArray**中隨機選擇的元素。

陣列的副本

MooTools提供了一種使用$A()函式複製陣列的方法。以下是$A()函式的語法。

語法

var <variable-name> = $A ( <array-variable>);

向陣列新增元素

有兩種不同的方法可以將元素新增到陣列中。第一種方法允許您逐個新增元素，或者您可以將兩個不同的數組合併為一個。

include()

include()方法用於向DOM元素陣列中新增項。例如，考慮以下包含兩個div元素和一個span元素的HTML程式碼，這些元素都在一個封閉的div — **body_div** 下。

語法

<div id = "body_div">
   <div>one</div>
   <div>two</div>
   <span id = "add_to_array">add to array</span>
</div>

在上面的程式碼中，如果我們在**body_div**元素上呼叫getElements('div')方法，我們會得到一個和兩個div，但span元素不包含在陣列中。如果您想將其新增到陣列中，請在陣列變數上呼叫**include()**方法。請檢視以下指令碼。

指令碼

//creating array variable by selecting div elements
var myArray = $('body_wrap').getElements('div');

//first add your element to a var
var newToArray = $('add_to_array');

//then include the var in the array
myArray.include(newToArray);

現在，myArray包含div和span元素。

combine()

此方法用於將一個數組的元素與另一個數組的元素組合。它還會處理重複的內容。例如，考慮以下包含兩個div元素和兩個span元素的HTML程式碼，這些元素都在一個封閉的div — **body_div** 下。

語法

<div id = "body_div">
   <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>

在上面的程式碼中，在**body_div**元素上呼叫getElements('div')方法。您將得到一個和兩個div。呼叫$$('.class_name')方法選擇兩個span元素。您現在有一個div元素陣列和另一個span元素陣列。如果您想合併這兩個陣列，則可以使用combine方法()。請檢視以下指令碼。

指令碼

//create your array just like we did before
var myArray= $('body_wrap').getElements('div');

//then create an array from all elements with .class_name
var newArrayToArray = $$('.class_name');

//then combine newArrayToArray with myArray
myArray.combine(newArrayToArray );

現在，myArray包含newArrayToArray變數的所有元素。

示例

這將幫助您理解MooTools中的陣列。假設我們將背景顏色應用於包含div和span的元素陣列。請檢視以下程式碼。這裡的第二個元素陣列不屬於任何id或class組，因此它不會反映任何背景顏色。請檢視以下程式碼。

<!DOCTYPE html>
<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            var myArray = $('body_wrap').getElements('.class_name');
            var addSpan = $('addtoarray');
            var addMany = $$('.addMany');
            
            myArray.include(addSpan);
            myArray.combine(addMany);
            
            var myArrayFunction = function(item) {
               item.setStyle('background-color', '#F7DC6F');
            }
            
            myArray.each(myArrayFunction);
         });
      </script>
   </head>
   
   <body>
      <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>
   </body>
   
</html>

您將收到以下輸出：

輸出

列印頁面