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