西红柿爱番茄

刚上班，首先是文档哥，之后就是无聊哥了，真杯具。但是杯具下就好了，人不杯具。消遣的最好方式就是练练脑，写代码，query就是杯具下的产物。先出土个雏形，有时间还成无聊哥了再来扩展下。

query根据CSS规则来查询DOM，提供了基础的CSS选择符：

tag,.class,#id,[attr],tag[attr],tag[attr="value"]...

在测试跟jquery的查询速度比较的时候，再添加了对querySelectorAll（语法是：baseElement.querySelectorAll(selector)，这里的baseElement其实是可以为除了文本节点和空节点之外的任何的DOM节点的，别以为只是document而已）的支持。编写的代码中加入了本人认为不错的编写方式，如果你对阅读代码有兴趣，那就看看吧，欢迎提出更好的方式(如果这里显得难看了，就自己下载来看：query.js)：

[javascript]
;(function(g){
var D = document,
_tag = function(tag,p){
return p.getElementsByTagName(tag || "*");
};
var _queryMethod = {
"#":function(q){
var bits = q.split("#"),
tagName = bits[0],
id = bits[1],
element = D.getElementById(id);
return tagName && element.tagName.toLowerCase() != tagName ? [] : [element];
},
".":function(q,p){
var bits = q.split("."),
tagName = bits[0],
cn=bits[1],
elems = null,
returnEl = [],
index = 0;
for(var i=0,l = p.length;i<l;i++){
elems = _tag(tagName,p[i]);
var tmp = null;
for(var j =0,m = elems.length;j<m;j++){
if(!/\S/.test((tmp = elems[j]).nodeValue)) continue;
if(new RegExp("\\b"+cn+"\\b").test(tmp.className)){
returnEl[index++] = tmp;
}
}
}
return returnEl;
},
"tag":function(q,p){
var found,returnEl = [],index=0;
q = q;
for(var i=0,l=p.length;i<l;i++){
found = _tag(q,p[i]);
for(var j =0,m=found.length;j<m;j++){
returnEl[index++] = found[j];
}
}
return returnEl;
},
"attr":function(operation,tag,attr,attrValue,p){
var found =[],returnEl = [],index=fIndex=0;

for(var i=0,l=p.length;i<l;i++){
var tmp = _tag(tag,p[i]);
for(var j=0,m=tmp.length;j<m;j++){
found[index++]=tmp[j];
}
}

//不错吧？ ^_^
var checkFn = {
‘=’:function(e) { return (e.getAttribute(attr) == attrValue); },
‘~’:function(e) { return (e.getAttribute(attr).match(new RegExp(‘\\b’+attrValue+’\\b’))); },
‘|’:function(e) { return (e.getAttribute(attr).match(new RegExp(‘^’+attrValue+’-?’))); },
‘^’:function(e) { return (e.getAttribute(attr).indexOf(attrValue) == 0); },
‘$’:function(e) { return (e.getAttribute(attr).lastIndexOf(attrValue) == e.getAttribute(attr).length – attrValue.length); },
‘*’:function(e) { return (e.getAttribute(attr).indexOf(attrValue) > -1); },
‘a’:function(e) { return e.getAttribute(attr);}
}[operation];

for(var i=0,l=found.length;i<l;i++){
if(checkFn(found[i])){
returnEl[fIndex++] = found[i];
}
}
return returnEl;
}
}

//处理每一个token
var _querySelector = function(q,p){
var elements = /#/.test(q) ? _queryMethod["#"](q) : /\./.test(q) ? _queryMethod["."](q,p) : [];
if(elements.length) return elements;
if(!elements.length && q.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)){
return _queryMethod["attr"](RegExp.$3 || "a",RegExp.$1,RegExp.$2,RegExp.$4,p);
}
if(!elements.length){
return _queryMethod["tag"](q,p);
}
return elements;
}

var _query = function(q){
if(document.querySelectorAll){return document.querySelectorAll(q);}
var tokens = q.split(‘ ‘),token,elems=[D];
for(var i=0,l=tokens.length;i<l;i++){
elems=_querySelector( tokens[i],elems);
}
return elems;
}
g.query=_query || {};
})(this);
[/javascript]
我很经得起批的……《测试示例》