基本方法
.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 myArray = $('body_wrap').getElements('div');
-
-
- myArray.each(function() {
- alert('a div');
- });
最后,如果你可能想把你的函数从选择器中独立出来。我们会在明天的关于使用函数的教程中更深入地讲解这个问题。不过,现在我们可以创建一个非常简单的示例:
参考代码:
-
var myArray = $('body_wrap').getElements('div');
-
-
-
-
-
var myFunction = function() {
- alert('a div');
- };
-
-
- myArray.each(myFunction);
注意:当你像刚才那样在.each();.方法里面调用函数时,你不需要给函数名加上引号。
复制一个数组
$A
MooTools提供了一个简单的方式——通过$A函数来复制一个数组。让我们像刚才那样使用变量创建一个数组:
参考代码:
-
-
var myArray = $('body_wrap').getElements('div');
复制一个数组(创建该数组的副本):
参考代码:
-
-
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');
-
-
-
var newArrayToArray = $$('.class_name');
现在我们可以使用.combine();方法来合并两个数组,这个方法会自己处理重复的元素,因此我们不需要处理:
参考代码:
-
- myArray.combine(newArrayToArray );
现在myArray就包含了newArraytoArray中的所有元素。
代码示例
数组可以让你遍历包含所有项目的列表,并对每个元素执行相同的代码。在这个例子中,注意变量”item“作为当前元素的替代符的使用。
参考代码:
-
-
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', '#eee');
- }
-
-
- 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>
相关推荐
今天,我们在来看看如何使用数组来管理DOM元素。基本方法 .each(); 在处理数组时,.each();方法是你最好的朋友。它提供了一种很容易的方法来遍历数组的每个元素,如果有需要还可以对其中的元素进行任何逻辑处理。...
### Mootools中文教程知识点概览 #### 一、起步篇 Mootools是一个轻量级且功能强大的JavaScript库,其设计目标是为了简化浏览器端的编程。与Prototype类似,Mootools同样支持面向对象的编程方式,但在某些方面更加...
- **Array.from**: 将任何类型的对象转换为数组,特别适用于DOM元素的处理。 - **Array.invoke**: 对数组中的每个元素执行相同的方法,并返回包含所有结果的新数组。 - **Array.every**: 测试数组中的所有元素是否都...
2. **DOM操作**:介绍如何通过MooTools方便地查找、创建、修改和删除DOM元素,包括选择器API,如$$和$$(),以及Element和Elements对象的常用方法。 3. **事件处理**:讲解如何绑定和触发DOM事件,使用事件委托提高...
根据给定的文件内容,这份“Mootools教程.pdf”文档主要介绍了Mootools框架的基础知识点,包括类的创建和继承、对象的扩展、类型判断、实用函数的使用、定时器的管理和DOM操作等。下面是对这些知识点的详细解释: 1...
通过`Element`和`Events`模块,可以方便地对DOM元素进行操作和事件绑定。例如,你可以轻松地选择元素、添加样式、监听用户交互等。 Mootools 1.2的`Fx`(效果)模块是其一大亮点,提供了丰富的动画效果。包括`Fx....
3. **选择器引擎**:类似于jQuery的 `$` 函数,Mootools提供了一个强大的选择器引擎,可以快速选取DOM元素,支持CSS1至CSS3的选择器。 二、主要特性 1. **Element对象**:Mootools将每个DOM元素封装为一个Element...
Mootools 提供了丰富的 DOM 操作方法。 - **`newElement(tags[, opt])`**: 创建新的 HTML 元素。 - **`getElement(match)`**: 获取单个元素。 - **`getElements(match)`**: 获取多个元素。 - **`match(match)`**: ...
3. **事件模块**:事件处理是Mootools中的重要部分,它支持事件监听、触发以及阻止默认行为等功能。`addEvent`用于添加事件监听器,`removeEvent`用于移除监听器,`fireEvent`可以手动触发事件。 4. **效果和动画...
在本教程的第二部分,我们将深入探讨几种主要的DOM选择方法。 首先,`$()`函数是MooTools中最基础的选择器。它允许你通过元素的ID来选取DOM中的特定元素。例如,要选取ID为"body_wrap"的元素,只需使用`$('body_...
3. **DOM操作**:jQuery提供了如`append`、`remove`、`clone`等方法,简化了DOM元素的增删改查。 4. **事件处理**:jQuery的`on`和`off`方法可以方便地绑定和解绑事件,支持事件委托。 5. **动画和效果**:`...
- **$Element(el, methods, args)**: 创建或获取DOM元素。 - **$(el|s)**: 获取元素。 - **UtilityFunctions**: 提供一系列实用函数。 - **$S(selectors, s, ...)**: 选择元素。 - **$$()=$S**: 选择多个元素。 - **...
Sortables插件主要用于实现DOM元素的拖放排序,为用户界面设计提供极大的灵活性。 首先,创建一个Sortable对象需要指定要排序的元素。你可以将多个元素ID存储在一个数组中,如示例所示,将`#listA`和`#listB`这两个...
它支持CSS选择器,可以方便地获取DOM元素。`Element`对象提供了大量的DOM操作方法,如`addClass`、`removeClass`用于样式操作,`appendText`、`insertBefore`用于元素内容和结构的修改。 3. **事件处理**:MooTools...
2. **Element and Elements**:MooTools封装了DOM操作,Element对象代表单个DOM元素,Elements则代表一个元素集合。它们提供了丰富的API来处理样式、事件、内容等。 3. **Selectors**:MooTools支持CSS选择器,可以...
- `String.uniqueID()`: 生成一个独一无二的ID,常用于DOM元素的唯一标识。 - `trim()`: 清除字符串首尾的空白字符。 - `toInt()`: 将字符串转换为整数,可指定进制。 - `toFloat()`: 将字符串转换为浮点数。 - `...
在实际应用中,开发者通常会结合这些方法来定位和操作特定的DOM元素。例如,先通过`getElementById`找到一个父节点,然后使用`getElementsByTagName`或`children`来筛选出特定类型的子元素,最后利用`...