你的位置:首页 > Java教程

[Java教程]学习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对象;

contents:

contents用来获取zepto所有对象的子节点(包括文本,注释),或者zepto某对象为一个iframe时,则获取该iframe的document对象引用;

直接使用zepto对象调用即可;

$("#temp").contents(); // 如果temp为一个iframe对象,则返回它的contentDocument引用,否则返回该dom对象的所有child节点

 

首先是遍历zepto对象,然后返回每个对象的子节点或者document对象。contentDocument为iframe对象的属性,与contentWindow性质一样;

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方法可能说的不太细。如果有什么,还请大家一起交流)