• 30天学会 MooTools 教学(3): 数组管理DOM元素


      在上一篇教程——《30天学会 MooTools 教学(2): DOM选择器》中,我们介绍了一下选择器,其中有很多方法就会返回数组(一个你可以对其中内容进行多种操作的特殊列表)。今天,我们在来看看如何使用数组来管理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>
  • 相关阅读:
    一文搞懂字符集
    机器视觉之eVision
    PID调节
    激光切割质量主要影响因素
    155. 最小栈
    111.二叉树最小深度
    110. 平衡二叉树
    108.将有序数组转换为二叉搜索树
    107. 二叉树的层次遍历 II
    104. 二叉树的最大深度
  • 原文地址:https://www.cnblogs.com/see7di/p/2244853.html
Copyright © 2020-2023  润新知