Node¶
Note
Node 包括 DOM , event , anim 模块的所有功能, 推荐采用 Node 模块, 你只需要把 KISSY.all 看做 jquery 中的 $ 就可以了, 链式操作你会喜欢的!
Member Methods¶
Note
以下的这些方法, filter() , test() , clone() , empty() , hasClass(), addClass(), removeClass(), replaceClass(), toggleClass(), removeAttr(), attr(), hasAttr(), prop(), hasProp(), val(), text(), css(), toggle(), offset(), scrollIntoView(), parent(), next(), prev(), siblings(), children(), contains(), html(), remove(), data(), removeData(), hasData(), unselectable(), contains(), innerWidth(), innerHeight(), outerWidth(), outerHeight(), on(), detach(), fire(), 的调用都会被转发给 DOM , event , 原 DOM , Event 对应方法的第一个参数传入一个原生 DOM 节点数组, 而这个原生 DOM 节点数组则是由当前的 KISSY NodeList 对象得到的.
Node 模块会对返回值进行处理:
- 如果返回值为单个节点或节点数组, 则包装为 NodeList
- 如果返回值为 undefined , 则返回调用者 NodeList 对象
- 其他, 直接返回
Note
Node 模块的 on 方法中的 this 关键字指向当前绑定事件的单个原生节点, 事件对象的 target 和 relatedTarget 也指向对应的原生节点,
<div id='d1' class='d'></div>
<div id='d2' class='d'></div>
<script>
KISSY.all(".d").on("mouseenter",function(ev){
this.id // => d1 或者 d2
ev.target.id // => d1 或者 d2
ev.relatedTarget // => d1 或者 d2 或者 document.body
// 或者 document.documentElement
});
</script>
为了保持应用兼容,推荐的做法是,在回调函数开始包装 this (需要的话同样包装 event.target)
<div id='d1' class='d'></div>
<div id='d2' class='d'></div>
<script>
KISSY.all(".d").on("mouseenter",function(ev){
var self=KISSY.one(this);
self.attr("id") // => d1 或者 d2
});
</script>