【css风格】js 实现css风格选择器（压缩后2KB）-选择器

var mini=(function(){
var snack=/(?:[\w\-\\.#]+)+(?:\[\w+?=([\'"])?(?:\\\1|.)+?\1\])?|\*|>/ig,
exprClassName=/^(?:[\w\-_]+)?\.([\w\-_]+)/,
exprId=/^(?:[\w\-_]+)?#([\w\-_]+)/,
exprNodeName=/^([\w\*\-_]+)/,
na=[null,null];
function _find(selector, context) {

context=context || document;
var simple=/^[\w\-_#]+$/.test(selector);
if (!simple && context.querySelectorAll) {
return realArray(context.querySelectorAll(selector));
}
if (selector.indexOf(',') > -1) {
var split=selector.split(/,/g), ret=[], sIndex=0, len=split.length;
for(; sIndex < len; ++sIndex) {
ret=ret.concat( _find(split[sIndex], context) );
}
return unique(ret);
}
var parts=selector.match(snack),
part=parts.pop(),
id=(part.match(exprId) || na)[1],
className=!id && (part.match(exprClassName) || na)[1],
nodeName=!id && (part.match(exprNodeName) || na)[1],
collection;
if (className && !nodeName && context.getElementsByClassName) {
collection=realArray(context.getElementsByClassName(className));
} else {
collection=!id && realArray(context.getElementsByTagName(nodeName || '*'));
if (className) {
collection=filterByAttr(collection, 'className', RegExp('(^|\\s)' + className + '(\\s|$)'));
}
if (id) {
var byId=context.getElementById(id);
return byId?[byId]:[];
}
}
return parts[0] && collection[0] ? filterParents(parts, collection) : collection;
}
function realArray(c) {

try {
return Array.prototype.slice.call(c);
} catch(e) {
var ret=[], i=0, len=c.length;
for (; i < len; ++i) {
ret[i]=c[i];
}
return ret;
}
}
function filterParents(selectorParts, collection, direct) {

var parentSelector=selectorParts.pop();
if (parentSelector==='>') {
return filterParents(selectorParts, collection, true);
}
var ret=[],
r=-1,
id=(parentSelector.match(exprId) || na)[1],
className=!id && (parentSelector.match(exprClassName) || na)[1],
nodeName=!id && (parentSelector.match(exprNodeName) || na)[1],
cIndex=-1,
node, parent,
matches;
nodeName=nodeName && nodeName.toLowerCase();
while ( (node=collection[++cIndex]) ) {
parent=node.parentNode;
do {
matches=!nodeName || nodeName==='*' || nodeName===parent.nodeName.toLowerCase();
matches=matches && (!id || parent.id===id);
matches=matches && (!className || RegExp('(^|\\s)' + className + '(\\s|$)').test(parent.className));
if (direct || matches) { break; }
} while ( (parent=parent.parentNode) );
if (matches) {
ret[++r]=node;
}
}
return selectorParts[0] && ret[0] ? filterParents(selectorParts, ret) : ret;
}
var unique=(function(){
var uid=+new Date();
var data=(function(){
var n=1;
return function(elem) {
var cacheIndex=elem[uid],
nextCacheIndex=n++;
if(!cacheIndex) {
elem[uid]=nextCacheIndex;
return true;
}
return false;
};
})();
return function(arr) {

var length=arr.length,
ret=[],
r=-1,
i=0,
item;
for (; i < length; ++i) {
item=arr[i];
if (data(item)) {
ret[++r]=item;
}
}
uid +=1;
return ret;
};
})();
function filterByAttr(collection, attr, regex) {

var i=-1, node, r=-1, ret=[];
while ( (node=collection[++i]) ) {
if (regex.test(node[attr])) {
ret[++r]=node;
}
}
return ret;
}
return _find;
})();

关于js 实现css风格选择器（压缩后2KB）的用户互动如下：

　　相关问题：百度js和css合并压缩是如何做的？

　　答：简单来说是通过插件实现，当然现在淘宝出的服务器（nginx修改版）自带有这个功能。 通过一个url地址里写上每个js或者css 路径，然后插件通过路径将js/css 进行gzip形式压缩，最后组合成一个文件输出。你能看到的输出格式是php后缀，但是输出文件... >>详细

　　相关问题：想利用js实现一个函数，要求能依据给定的CSS基本选...

　　答： 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\-_#]+... >>详细

　　相关问题：介绍几个JS和CSS压缩合并插件

　　答：介绍几个JS和CSS压缩合并插件 由于添加各种功能的代码和wordpress插件，会导致JS和CSS增多，影响了wordpress博客的加载速度。虽然可以用代码来对JS和CSS进行压缩合并，可是对初学者不是那么简单，很容易出错。因此介绍几个 JS 和CSS 压缩合并插... >>详细