CSS选择器

   前半年比较闲的时候，在学习了javascript的同时，顺便也学人家写了个CSS选择器，语法结构都是参考jquery选择器，增加了下nth-child跟nth筛选，修改了一下下 not

 

 <div id="1" class="e"> <ul id="d1"> <li> 11 <ul class="e"> <li>111 dfsdf sd fsd fsd f <br/> sdf sd fsd </li> </ul> </li> </ul> <ul id="d2"> <li><span>12</span></li> </ul> <ul id="d3"> <li>13</li> </ul> <ul id="d4"> <li>14</li> </ul> <ul id="dt"> <span>d</span> </ul> </div>

 

  比较

     $("div>ul:not(span)")  与 apolo("div>ul:not(span)")的结果

 

     第一个not是过滤掉带有span的div元素

     第二个not是过滤掉带有span的ul元素

 

 贴一下大体代码：

(function() { var ben = /((?:[^>,+~()|/s]+(?:/((?:/([^()]+/)|[^()]+)+/))?)+|[>,+~])(,)?/g, //div#google div>span div+span div~span (((?:[^>,+~()|/s]+(?:/([^()]+/))?)+|[>,+~])(,)?) 满足不了 checkRela = /[>,/+~]|(in)/, allNum = /^/d+?$/g, //html tag regex HTMLTAG = /^(html|body|h[1-6]|p|br|hr|b|font|i|em|big|strong|small|sup|samp|xmp|acronym|abbr|address|blockquote|center|q|cite|ins|del|s|strike|a|link|frame|frameset|noframset|iframe|form|input|textarea|button|select|optqroup|option|label|filedset|ul|ol|li|dir|dl|dt|dd|div|menu|img|map|area|table|caption|tbody|th|tr|td|thead|tfoot|col|colqroup|style|span|head|title|meta|base|basefont|script|noscript|applet|object|param)$/gi; var apolo = window.apolo = function(selector, context) { context = context || document; var result = []; if (context.nodeType !== 1 && context.nodeType !== 9) { return []; } // try { // result = _toArray(context.querySelectorAll(selector)); // if (result.length == 0) { // throw "apolo"; // } // } catch(e) { var match,stack = [],relate = false; ben.lastIndex = 0; while (( match = ben.exec(selector)) !== null) { stack.push(match[1]); if (match[2]) { relate = true; break; } } //对元素位置的筛选 //eg selector = div>ul:first //增加了nth的判断 if (stack.length > 1 && (Expression.regx.POS.exec(selector) || Expression.regx.NTH.exec(selector))) { //LOGO 2009-08-05 第一次实现 //判断是否有指定context //返回true只没有指定选择器contexnt eg apolo(">ul:first") //finish 但是如果明确指定了context 如 apolo(">ul:first",elem); -- 已解决 //TODO question： 这里用正则匹配开销比较大，待优化 //if(checkRela.test(stack[0])){ if (stack.length === 2 && Expression.relative[stack[0]]) { var findresult = apolo.find(stack.pop(), context, isXML(context)); var _arr = _toArray(findresult.set); var prefix = stack.pop(); var matchArray = Expression.relative[prefix](_arr, context, isXML(context)); for (var i = 0; i < matchArray.length; i++) { if (matchArray[i] && (matchArray[i] == true || matchArray[i].nodeType == 1)) { result.push(_arr[i]); } } result = apolo.filter(result, findresult.expr); } else { //easy eg apolo("div>ul:first") stack: ["div",">","ul:first"] var _expr = stack.shift(); //Expression.relative[_expr] 为false的话非层次帅选符号 var _context = Expression.relative[_expr] ? [context] : apolo.find(_expr, context, isXML(context)); _context = apolo.filter(_context.set, _context.expr); _context = _toArray(_context); while (stack.length) { _expr = stack.shift(); if (Expression.relative[_expr]) { //用显示in的话，必须空格分割 _expr = _expr === "in" ? _expr + " " : _expr; _expr += (stack.shift() || ""); if (result.length) { _context = result; result = []; } } for (var i = 0; i < _context.length; i++) { var arr = arguments.callee(_expr, _context[i]); for (var j = 0; j < arr.length; j++) { result.push(arr[j]); } } } } } else { //now just can filter such like div>span //为什么要用ceontext的父亲节点，避免只在上下文选择，有时候选不到同级的节点 // var _pack = apolo.find(stack.pop(), stack.length > 0 && context.parentNode ? context.parentNode : context, isXML(context)); //进行过滤 _pack = apolo.filter(_pack.set, _pack.expr); // var empty = false,checkArr; if (stack.length > 0) { checkArr = _pack; } else { empty = true; } while (stack.length) { //继续匹配 var relative = stack.pop(); var prefix = relative; if (!Expression.relative[relative]) { relative = "in"; } else { prefix = stack.pop(); } if (prefix == null) { prefix = context; } // checkArr = Expression.relative[relative](checkArr, prefix, isXML(context)); } //如果stack为空 if (empty) { checkArr = _pack; } //error selector if (!checkArr) { throw "语法错误, 无法识别的表达式: " + selector; } checkArr = _toArray(checkArr); if (toString.call(checkArr) === "[object Array]") { if (context.nodeType == 1){ for (var i = 0; i < checkArr.length; i++) { if ( checkArr[i] && (checkArr[i] === true || checkArr[i].nodeType === 1 && contains(context, checkArr[i])) ) { result.push( _pack[i] ); } } }else { for (var i = 0; i < checkArr.length; i++) { if (checkArr[i] && checkArr[i].nodeType == 1) { result.push(_pack[i]); } } } } //eg div,ul,li if (relate) { var extraExpr = selector.replace(match[0], ""); var anotherRl = arguments.callee(extraExpr, context); while (anotherRl.length) { var cur = anotherRl.shift(); var hasDuplicate = false; for (var i = 0; i < result.length; i++) { if (cur === result[i]) { hasDuplicate = true; break; } } if (!hasDuplicate) { result.push(cur); } } } } // } return result; } ... })();

 

有兴趣的话我可以留个e-mail,我可以发给各位， 这个选择器是参考jquery的，简化了很多，有bug的话请多多指出，有需要的可自行更改。