MooTools - 使用数组

MooTools 是一个轻量级的 JavaScript 库，有助于创建动态网页。在管理DOM元素时，我们需要选择网页的所有DOM元素。该集合可以使用数组来处理。

本章介绍如何使用数组来管理 DOM 元素。

每个()方法

这是处理数组的基本方法。它通过列表迭代所有元素。您可以根据需要使用此方法。例如，如果您想选择页面的所有 div 元素，请按照下面给出的脚本进行操作。看一下下面的 html 页面，其中包含多个 div。

<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 元素的重要方法 -

获取最后一个()

此方法返回数组的最后一个元素。让我们设置一个数组来理解这个方法。

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

我们现在可以获取数组中的最后一个元素。

var lastElement = myArray.getLast();

变量lastElement现在表示myArray 中的最后一个元素。

获取随机数()

getRandom() 方法的工作方式与 getLast() 方法类似，但将从数组中获取随机元素。

句法

var randomElement = myArray.getRandom();

变量randomElement现在表示myArray中随机选择的元素。

数组的副本

MooTools 提供了一种使用 $A() 函数复制数组的方法。以下是 $A() 函数的语法。

句法

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

将元素添加到数组

有两种不同的方法可以将元素添加到数组中。第一种方法允许您逐个添加元素，或者可以将两个不同的数组合并为一个。

包括（）

include() 方法用于将项目添加到 DOM 元素数组中。例如，请考虑以下 HTML 代码，其中在单个封闭的 div — body_div下包含两个 div 元素和一个 span 元素。

句法

<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 元素。

结合（）

此方法用于将一个数组的元素与另一个数组的元素组合起来。这也可以处理重复的内容。例如，请考虑以下 HTML 代码，其中在单个且封闭的 div — body_div下包含两个 div 元素和两个 span 元素。

句法

<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 或类组，这就是它不反映任何背景颜色的原因。看看下面的代码。

<!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>

您将收到以下输出 -

输出