QWrap Selector的几个应用场景

作者 : JK 发布时间 : January 29, 2011 分类 : 开发相关

除了如jquery的$(selector)之外,Selector在js中有很多使用场景。
以QWrap的Youa版应用(js/apps/core_dom_youa.js)为例,主要用法有以下。

W(selector)  相当于jquery用户使用的$
如:
W('input.aaa').css('color','red').val('');
W('#myid > div'). css('color','red');

W.one(selector) 得到某个满足条件的元素的W包装
如:
W.one('input.aaa').css('color','red').val('');

W.prototype.query(selector)
W.prototype.one(selector)
如:
W('#id').show().query('>*').show().query('>*').css('color','red');
 //show #id ; 再show其儿子 ; 再为其孙子设color
W('#id').show().query('~div').hide()
 //show #id ; 再hide其所有的div弟弟
W('#id').show().one('>div').show().one('>a').css('color','red');
 //show #id ; 再show其第一个div儿子 ; 再为这个儿子的第一个a儿子设color

W.prototype.关系系列
previousSibling(selector)
nextSibling(selector)
ancestorNode(selector)
firstChild(selector)
lastChild(selector)
用法如:
W('#id'). previousSibling ('div,aaa').hide()
 //show #id ; 再hide其最小的div.aaa兄长
W('#id'). ancestorNode ('div.aaa').hide()
 //show #id ; 再hide其最近的div.aaa祖先
W('#id'). lastChild ('div.aaa').hide()
 //show #id ; 再hide其最小的div.aaa儿子

W.prototype.代理系列
delegate(selector,eventName,handle)
undelegate(selector,eventName,handle)
用法如:
W('#id'). delegate ('>div','click',function(){})
 //在#id上添加事件委托,对其div儿子有效。
W('#id'). delegate ('a','click',handle1)
 //在#id上添加事件委托,对其a子孙节点有效。
W('#id'). undelegate ('a','click', handle1)
 //在#id上解除事件委托,对其a子孙节点有效。

Selector的用处远不只以上,还有很多的挖掘空间。无法一一列出,当然,还有很多我所没想到的……

补充说明:以上用法只是QWrap的有啊版用法,并不一定是JQuery也支持的,请勿混淆。
另外,值得一提的是,QWrap的Jss,也是借用selector的概念,将js数据与html元素建立联系。

附:本文原撰于cnblogs:QWrap Selector的几个应用场景

标签: QWrap, Selector



上一篇:$、W、g之争
下一篇:QWrap的浏览器检测

已有 2 条评论 »

  1. hax 1. hax February 28th, 2011 at 08:36 pm

    previousSibling、firstChild等几个没有写清楚到底是什么含义。比如previousSibling(pattern)是指向前的所有兄弟节点第一个匹配pattern的?

    另外delegate/undelegate,我认为对于大多数网页作者来说,delegate并不是一个容易理解的概念,同时也没有很大的意义(当然或许qwrap在其他地方也用到delegate概念,这个我现在不知道)。比较通常直接的$(...).click(function(){...})和unclick来说,这样的api并没有什么优点啊。

  2. JK JK March 7th, 2011 at 04:50 pm

    1。previousSibling(pattern)是指“离他最近的”满足条件的哥哥。
    即满足条件的最小的哥哥。而不是最大的哥哥。
    2。delegate的确是一个理解有点门槛的功能。对于ajax变换频繁的页面,还是很有用的。jquery等也提供了/yui等也提供了。
    3。click等写法,只是让用户少写一些字而已。

添加新评论 »