Question

想利用js实现一个函数，要求能依据给定的CSS基本选择器或复合选择器获取相应的对象，这怎么实现？

不要用JQuery之类的库哈，因为我基本上只用$()这个函数，把整个JQuery库都引用的话会造成网页加载缓慢

Answer 1

 var $=(function(){var b=/(?:[\w\-\\.#]+)+(?:\[\w+?=([\'"])?(?:\\\1|.)+?\1\])?|\*|>/ig,g=/^(?:[\w\-_]+)?\.([\w\-_]+)/,f=/^(?:[\w\-_]+)?#([\w\-_]+)/,j=/^([\w\*\-_]+)/,h=[null,null];function d(o,m){m=m||document;var k=/^[\w\-_#]+$/.test(o);if(!k&&m.querySelectorAll){return c(m.querySelectorAll(o))}if(o.indexOf(",")>-1){var v=o.split(/,/g),t=[],s=0,r=v.length;for(;s<r;++s){t=t.concat(d(v[s],m))}return e(t)}var p=o.match(b),n=p.pop(),l=(n.match(f)||h)[1],u=!l&&(n.match(g)||h)[1],w=!l&&(n.match(j)||h)[1],q;if(u&&!w&&m.getElementsByClassName){q=c(m.getElementsByClassName(u))}else{q=!l&&c(m.getElementsByTagName(w||"*"));if(u){q=i(q,"className",RegExp("(^|\\s)"+u+"(\\s|$)"))}if(l){var x=m.getElementById(l);return x?[x]:[]}}return p[0]&&q[0]?a(p,q):q}function c(o){try{return Array.prototype.slice.call(o)}catch(n){var l=[],m=0,k=o.length;for(;m<k;++m){l[m]=o[m]}return l}}function a(w,p,n){var q=w.pop();if(q===">"){return a(w,p,true)}var s=[],k=-1,l=(q.match(f)||h)[1],t=!l&&(q.match(g)||h)[1],v=!l&&(q.match(j)||h)[1],u=-1,m,x,o;v=v&&v.toLowerCase();while((m=p[++u])){x=m.parentNode;do{o=!v||v==="*"||v===x.nodeName.toLowerCase();o=o&&(!l||x.id===l);o=o&&(!t||RegExp("(^|\\s)"+t+"(\\s|$)").test(x.className));if(n||o){break}}while((x=x.parentNode));if(o){s[++k]=m}}return w[0]&&s[0]?a(w,s):s}var e=(function(){var k=+new Date();var l=(function(){var m=1;return function(p){var o=p[k],n=m++;if(!o){p[k]=n;return true}return false}})();return function(m){var s=m.length,n=[],q=-1,o=0,p;for(;o<s;++o){p=m[o];if(l(p)){n[++q]=p}}k+=1;return n}})();function i(q,k,p){var m=-1,o,n=-1,l=[];while((o=q[++m])){if(p.test(o[k])){l[++n]=o}}return l}return d})();

（此选择器为一外国人padolsey所写，名为mini）

支持以下获取方式：

 

//以标签获取元素

$("tag")

//以id获取元素

$("#id")

//以类名获取元素

$(".className")

//支持层级嵌套选取

$("tag > .className")

$("tag > tag")

$("#id > tag.className")

$("span > * > b")

//支持获取子孙元素

$(".className tag")

//支持同时并列选择器选取

$("tag, tag, #id")

$("tag#id.className")

Answer 2

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<script>
var box=document.getElementsByClassName("box");//获取对象
box.item(1).style.backgroundColor="#F00"   //赋值
</script>

追问

IE下不支持

追答

我的IE9支持，在网上搜了下，http://www.css119.com/archives/441，你自己研究研究

Answer 3

如果你不兼容IE8一下浏览器的话，可以使用浏览器内置的querySelector/querySelectorAll方法，这两个方法完美支持css选择器。如果你想兼容的话，建议不要自己写拉，如果你感兴趣，你可以看jQuery源码，实现起来是相当复杂的。你嫌jQuery库太多，那你可以单独使用jQuery的选择器引擎Sizzle库的，Sizzle库除了对DOM的CRUD操作外没有其他额外功能。具体楼主可以看：https://github.com/jquery/sizzle