除了如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元素建立联系。
附:QWrap:https://github.com/wedteam/qwrap
另,以下这段本来是回复gongji同学“无从选择选择器”的感叹的,也抽取到本文来了。
@gongji
选择器并不直接面向页面编码同学,而是面向框架。
选择使用哪一个选择器,是写js框架的同学的任务。
选择器可能会提供一些理论上会用到的一些方法, 但是缺乏易用性。
js框架会提供给用户一些简单易用的方法,至于它里面怎么使用选择器,同学们一般不必关心。
例如:
Sizzle('div')返回的是一个array。这个方法我们不会直接用到。而我们经常用的$('div')返回的是一个jquery对象。
通常,我们只需要明白框架里哪些参数可以是cssselector字符串。
本篇原文的目的,是想列出selector在QWrap里的一些应用场景。
对于QWrap用户,了解后以便更简写码。
对于Jquery用户,可以参考下写法有什么不同。
对于Selector提供者,可以交流下Selector的使用场景以互相参考。
对于写JS框架的同学,也可以当作交流。