快速业务通道

MooTools教程(3):数组管理DOM元素

作者 佚名技术 来源 网页制作 浏览 发布时间 2012-03-07

在上一篇教程——《Mootools 1.2教程(2)——DOM选择器》中,我们介绍了一下选择器,其中有很多方法就会返回数组(一个你可以对其中内容进行多种操作的特殊列表)。今天,我们在来看看如何使用数组来管理DOM元素。

基本方法

.each();

在处理数组时,.each();方法是你最好的朋友。它提供了一种很容易的方法来遍历数组的每个元素,如果有需要还可以对其中的元素进行任何逻辑处理。例如,我们可以假设你需要为页面中的每个div对象调用alert方法:

参考代码:
  1. $(''div'').each(function() {
  2.     alert(''a div'');
  3. });

如果使用下面的HTML代码,上面的JavaScript代码将弹出两个alert对话框,每个div一个。

参考代码:
  1. <div>One</div>
  2. <div>Two</div>

.each();方法不需要你使用$方法。创建一个数组的另一种方式(就像我们昨天讲到过的)是使用.getElements();方法。

参考代码:
  1. $(''body_wrap'').getElements(''div'').each(function() {
  2.     alert(''a div'');
  3. });
参考代码:
  1. <div id="body_wrap">
  2.     <div>One</div>
  3.     <div>Two</div>
  4. </div>

还有另外一种方法来完成这个相同的任务,就是把这个数组赋值给一个变量,然后对那个变量使用.each();方法:

参考代码:
  1. // 首先你需要通过语句”var VARIABLE_NAME“来声明一个变量
  2. // 然后用等于运算符”=“来给这个变量赋值
  3. // 在这个例子中,是一个包含div元素的数组
  4. var myArray = $(''body_wrap'').getElements(''div'');
  5.  
  6. // 现在你就可以把这个变量当数组选择器使用了
  7. myArray.each(function() {
  8.     alert(''a div'');
  9. });

最后,如果你可能想把你的函数从选择器中独立出来。我们会在明天的关于使用函数的教程中更深入地讲解这个问题。不过,现在我们可以创建一个非常简单的示例:

参考代码:
  1. var myArray = $(''body_wrap'').getElements(''div'');
  2.  
  3. // 要创建一个函数,你可以像刚才一样声明一个变量,然后给它命名
  4. // 在等号后面使用”function()“来声明这个变量为一个函数
  5. // 最后,在 { 和 }之间写入你的函数代码
  6. var myFunction = function() {
  7.     alert(''a div'');
  8. };
  9.  
  10. // 现在你就可以在.each();.方法里面调用刚才的函数了
  11. myArray.each(myFunction);

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号