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 元素数组中。例如，考虑以下 HTML 代码，其中包含两个 div 元素和一个 span 元素，位于单个封闭的 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() 方法。请查看以下脚本。
脚本
//通过选择 div 元素创建数组变量
var myArray = $('body_wrap').getElements('div');
//首先将元素添加到 var
var newToArray = $('add_to_array');
//然后将 var 包含在数组中
myArray.include(newToArray);
现在，myArray 包含 div 和 span 元素。
combine()
此方法用于将一个数组的元素与另一个数组的元素组合在一起。这还可以处理重复的内容。例如，考虑以下 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 方法 ()。请查看以下脚本。
脚本
//像我们之前一样创建数组
var myArray= $('body_wrap').getElements('div');
//然后从所有具有 .class_name 的元素创建一个数组
var newArrayToArray = $$('.class_name');
//然后将 newArrayToArray 与 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>
您将收到以下输出 −
输出
