MooTools教程(3):数组管理DOM元素
基本方法
.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 VARIABLE_NAME“来声明一个变量
- // 然后用等于运算符”=“来给这个变量赋值
- // 在这个例子中,是一个包含div元素的数组
- var myArray = $('body_wrap').getElements('div');
- // 现在你就可以把这个变量当数组选择器使用了
- myArray.each(function() {
- alert('a div');
- });
最后,如果你可能想把你的函数从选择器中独立出来。我们会在明天的关于使用函数的教程中更深入地讲解这个问题。不过,现在我们可以创建一个非常简单的示例:
- var myArray = $('body_wrap').getElements('div');
- // 要创建一个函数,你可以像刚才一样声明一个变量,然后给它命名
- // 在等号后面使用”function()“来声明这个变量为一个函数
- // 最后,在 { 和 }之间写入你的函数代码
- var myFunction = function() {
- alert('a div');
- };
- // 现在你就可以在.each();.方法里面调用刚才的函数了
- myArray.each(myFunction);
注意:当你像刚才那样在.each();.方法里面调用函数时,你不需要给函数名加上引号。
复制一个数组
$A
MooTools提供了一个简单的方式——通过$A函数来复制一个数组。让我们像刚才那样使用变量创建一个数组:
- // 创建你的数组变量
- var myArray = $('body_wrap').getElements('div');
复制一个数组(创建该数组的副本):
- // 建立一个新的变量名,命名为”myCopy“,然后把”myArray“的副本赋值给它
- 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');
- // 然后建立一个所有CSS类名为.class_name的元素数组
- var newArrayToArray = $$('.class_name');
现在我们可以使用.combine();方法来合并两个数组,这个方法会自己处理重复的元素,因此我们不需要处理:
- // 把数组newArrayToArray合并到数组myArray中
- myArray.combine(newArrayToArray );
现在myArray就包含了newArraytoArray中的所有元素。
代码示例
数组可以让你遍历包含所有项目的列表,并对每个元素执行相同的代码。在这个例子中,注意变量”item“作为当前元素的替代符的使用。
- // 创建一个数组,这个数组包含”body_wrap“里面所有CSS类名为.class_name的元素
- var myArray = $('body_wrap').getElements('.class_name');
- // 首先建立一个要添加到数组中的元素
- var addSpan = $('addtoarray');
- // 然后建立一个要合并的数组
- var addMany = $$('.addMany');
- // 现在我们把元素addSpan加入到数组中
- myArray.include(addSpan);
- // 然后合并数组addMany到myArray中
- myArray.combine(addMany);
- // 建立一个需要对数组中的每个元素都要执行的函数
- var myArrayFunction = function(item) {
- // item现在指向数组中的当前元素
- item.setStyle('background-color', '#eee');
- }
- // 现在对数组中的每个项目调用myArrayFunction函数
- myArray.each(myArrayFunction);
- <div id="body_wrap">
- <div class="class_name">one</div><!-- this has gray background -->
- <div>two</div>
- <div class="class_name">three</div><!-- this has gray background -->
- <span id="addtoarray">add to array</span> <!-- this has gray background -->
- <br /><span class="addMany">one of many</span> <!-- this has gray background -->
- <br /><span class="addMany">two of many</span> <!-- this has gray background -->
- </div>
MooTools教程(3):数组管理DOM元素相关推荐
- MooTools教程(2):DOM选择器
如果你还没有准备好,请先阅读上一篇<Mootools 1.2教程(1)--MooTools介绍>.我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本. 今天 ...
- HTML可以让元素透过元素点击,通过Mootools 1.2来操纵HTML DOM元素
我们已经学习过如何来选取DOM元素,怎么创建数组,怎么创建函数,怎么把事件添加到元素,今天我们来深入地学习一下如果操纵HTML元素.通过MooTools 1.2,你可以添加新元素到一个HTML页面中, ...
- 【EASYDOM系列教程】之 DOM 元素树
DOM 元素树结构与 DOM 节点树结构很相似,区别仅在于是利用节点解析 HTML 元素,还是利用元素解析 HTML 元素. DOM 树结构 还记得下面这张图吗? 上图中的 HTML 页面源代码如下: ...
- android 一维数组遍历,$.each()循环遍历一维数组、二维数组、JSON数据和DOM元素
本文介绍$.each()循环遍历一维数组.二维数组.JSON数据和DOM元素. 请注意在使用JQuery $.each()方法前,要首先引用jquery库文件. $.each()循环遍历一维数组 Jq ...
- Java-Runoob-高级教程-实例-数组:01. Java 实例 – 数组排序及元素查找
ylbtech-Java-Runoob-高级教程-实例-数组:01. Java 实例 – 数组排序及元素查找 1.返回顶部 1. Java 实例 - 数组排序及元素查找 Java 实例 以下实例演示 ...
- Java-Runoob-高级教程-实例-数组:10. Java 实例 – 查找数组中的重复元素-un
ylbtech-Java-Runoob-高级教程-实例-数组:10. Java 实例 – 查找数组中的重复元素 1.返回顶部 1. Java 实例 - 查找数组中的重复元素 Java 实例 以下实例 ...
- JavaScript 教程「9」:DOM 元素获取、属性修改
什么是 Web API Web API 是指网页服务器或者网页浏览器的应用程序接口.简单来讲,就是我们在编写 JavaScript 代码时,可以通过 Web API 来操作 HTML 网页和浏览器. ...
- MooTools教程(1):认识MooTools
2019独角兽企业重金招聘Python工程师标准>>> 有人最近要求我们写一个关于MooTools 1.2的30天的教程,这似乎也是个很不错的主意,于是我们决定现在就开始.在这些教程 ...
- 【使用 DOM】为DOM元素设置样式
1. 使用样式表 可以通过document.styleSheets属性访问文档中可用的CSS样式表,它会返回一组对象集合,这些对象代表了与文档管理的各个样式表. 每个样式表 都由一个CSSStyleS ...
最新文章
- python怎么安装matplotlib-如何安装Python绘图库Matplotlib?
- 进行直播间搭建时需要注意的小细节
- 设计模式C++实现(15)——观察者模式
- 【大学课程】高数基础知识点
- OpenCV背景扣除Background Subtraction
- WeihanLi.Npoi 支持 ShadowProperty 了
- 使用 Visual Studio 对源代码文件进行哈希处理以确保文件完整性
- 干货|基于 Spring Cloud 的微服务落地
- 计算机组成原理中7421,计算机组成原理07421
- Android 系统性能优化(24)--布局优化
- 学习mysql随笔——mysql的安装启动
- 一则 gfs2 集群文件系统无法挂载的解决案例
- 华为交换机console口登录密码遗忘
- 安装Mysql5.7(64位)安装包及教程全
- PF_PACKET说开去
- 牛客SQL3查询薪水详情和部门编号
- Jquery中stop()的用法
- Error 4 opening dom ASM/Self in 0x8283c00
- TK1+yolo安装指南
- 万丈高楼平地起,开始给Java打地基
热门文章
- 信息学奥赛一本通 2027:【例4.13】三角形
- 信息学奥赛一本通 1011:甲流疫情死亡率 | OpenJudge NOI 1.3 06
- 车厢重组(信息学奥赛一本通-T1310)
- 后缀表达式的值(信息学奥赛一本通-T1331)
- 信息学奥赛一本通C++语言——1061:求整数的和与均值
- 1227讲解(递归deng)
- MobileNet V2简单总结
- python读取Excel工作簿、工作表
- seafile安装教程 Linux,CentOS7安装seafile开源版
- 机翼翼尖_我所理解的流体力学 | 闲话翼尖涡