node

view node source
KISSY.use('node',function(S,Node){
    // use Node
});

Note

node 包括 dom , event , anim 模块的所有功能, 推荐采用 Node 模块, 你只需要把 KISSY.all 看做 jquery 中的 $ 就可以了, 链式操作你会喜欢的!

Note

KISSY NodeList 对象支持 filter 方法,参数格式参见 filter()

Module

Class

Static Methods

Member Methods

Note

以下的这些方法, filter() , test() , clone() , empty() , replaceWith() , hasClass(), addClass(), removeClass(), replaceClass(), toggleClass(), removeAttr(), attr(), hasAttr(), prop(), hasProp(), val(), text(), css(), toggle(), offset(), scrollIntoView(), parent(), index(), next(), prev(), first(), last(), 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 关键字指向当前绑定事件的单个原生节点, 事件对象的 targetrelatedTarget 也指向对应的原生节点,

<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>