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>

您将收到以下输出：

输出

打印页面
上一页
下一页
广告