学习zepto.js(对象方法)[5]

继续说.

clone:

该方法不接收任何参数,会返回对象中的所有元素集合,但不会对象绑定的事件.

var $temp = $("div").clone(); //并不接收任何参数.

方法的实现就是循环调用方法对象.然后将所有的dom元素克隆并返回

而且使用的深度克隆,就是说,会将节点下方的子节点统统克隆过来.

closest:

方法接收1-2个参数,第一个为selector(选择器),第二个为context(上下文);

方法会从调用节点开始,逐级向上匹配.

如果只传入selector,则会返回第一个匹配的元素.如同时传入了context,则只会寻找context的子节点.

(通俗来说就是如果能被匹配的元素不属于context,那么将会直接返回false)

selector参数也可以传入一个zepto对象.或一个dom集合.

而返回的元素则会属于传入的selector对象中的一个.

context的有效值为一个dom元素.

注意:返回值是与调用对象中的第一个元素有关的.所以说返回值也只会是包含一个节点元素的zepto对象或是一个空对象[没有找到匹配的元素])

<!DOCTYPE html>

<html>

    <head>

        <title>hello world</title>

        <meta charset="utf-8">

        <script type="text/javascript" src="js/zepto.js"></script>

        <style type="text/css">

            body * {

                color: #000;

            }

        </style>

    </head>

    <body>

        <ul id="one" class="level-1">

            <li class="item-i">I</li>

            <li id="ii" class="item-ii">II

                <ul class="level-2">

                    <li class="item-a">A</li>

                    <li class="item-b">B

                        <ul class="level-3">

                            <li class="item-1">1</li>

                            <li class="item-2">2</li>

                            <li class="item-3">3</li>

                        </ul>

                    </li>

                    <li class="item-c">C</li>

                </ul>

            </li>

            <li class="item-iii">III</li>

        </ul>

        <script type="text/javascript">

            $(".level-3").closest(".item-b").css("color", "red");                            //匹配距离对象最近的.item-b元素

            $(".level-3").closest(".item-ii").css("color", "blue");                          //匹配距离对象最近的.item-ii元素

            $(".level-3").closest("#one", $("#ii")[0]).css("background-color", "green");     //匹配距离对象最近的#one元素,并且匹配元素必须属于#ii元素内部

            $(".level-3").closest($("ul")).css("background-color", "yellow");                //匹配距离对象最近的属于$("ul")中其中一个的元素

        </script>

    </body>

</html>

方法首先取出当前dom对象作为基点并赋值给node.collection默认的为false.如果传入的selector参数为一个object,则认为选择器是一个zepto对象,或者是一个dom对象(集合),并将转换为zepto对象的值赋给collection;

下边是循环,循环判断的条件为node存在,并且collection中不存在node(selector为object的情况下)或者node不匹配selector选择器(selector为string的情况下)

循环内部,如果node不等于context(上下文)并且node不为document对象,就将node的父节点赋值给node(直到node满足匹配条件或者循环值文档对象).否则直接赋值false,然后循环终止,返回false;

最终返回一个zepto对象,空的或者包含一个元素的zepto对象;

empty:

用来清空zepto对象的所有innerHTML值（dom内容，相当于移除所有子节点）。

$("#temp").empty(); //该方法将清除#temp的innerHTML

代码也只是简单的遍历并给innerHTML赋值而已。

题外话：map方法与each方法的区别。两者回调函数的参数，是一样的。两者的区别在于结束循环的方式。each返回false结束循环，而map （我还真没发现返回null或undefined能停止它）；

eq:

通过index来取出一个对象，如果为-1，则取出最后一个。

与get方法的区别是，get返回一个dom对象，eq返回一个zepto对象。

$("#test").eq(0);

$($("#test").get(0));

$($("#test").[0]);

//此三条效果一样。

find:

find方法通过传入的一个参数来筛选出zepto对象符合条件的子节点集合并返回。

$('#myform').find('input, select');

$('input, select', $('#myform'));

//这两条的结果是一样的。

首先判断是否传入选择器，如果没有则直接返回一个空的zepto对象；

如果选择器为一个对象，则将对象转换为zepto对象，然后通过filter筛选出一些匹配的节点，并存入result集合；

如果调用find方法的对象为一个单一的对象，则直接用过qsa方法（前几篇说过qsa方法），将选择器作为一个选择器，并将对象作为上下文传入；

否则循环zepto对象重复上边那一条；

（find方法可能说的不太细。如果有什么，还请大家一起交流）