首页 > web前端 > js教程 > 正文

js 实现css风格选择器(压缩后2KB)_javascript技巧

php中文网
发布: 2016-05-16 17:57:25
原创
1026人浏览过

近日在做一些OA前端界面,为了更好管理页面代码想写个js选择器,写着写着发现很费力,索性在网上找找看,功夫不负有心人, 找到一个mini css选择器,且性能不凡:以下代码是压缩后的,仅2KB。

小绿鲸英文文献阅读器
小绿鲸英文文献阅读器

英文文献阅读器,专注提高SCI阅读效率

小绿鲸英文文献阅读器 352
查看详情 小绿鲸英文文献阅读器
复制代码 代码如下:

var $=(function(){var b=/(?:[w-\.#]+)+(?:[w+?=(['"])?(?:\|.)+?])?|*|>/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"){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

把原版也分享下:
复制代码 代码如下:

/**
* "mini" Selector Engine
* Copyright (c) 2009 James Padolsey
* -------------------------------------------------------
* Dual licensed under the MIT and GPL licenses.
* - http://www.opensource.org/licenses/mit-license.php
* - http://www.gnu.org/copyleft/gpl.html
* -------------------------------------------------------
* Version: 0.01 (BETA)
*/
var mini = (function(){
var snack = /(?:[w-\.#]+)+(?:[w+?=(['"])?(?:\|.)+?])?|*|>/ig,
exprClassName = /^(?:[w-_]+)?.([w-_]+)/,
exprId = /^(?:[w-_]+)?#([w-_]+)/,
exprNodeName = /^([w*-_]+)/,
na = [null,null];
function _find(selector, context) {
/**
* This is what you call via x() 这是你们所谓的经x
* Starts everything off... 开始上所有的
*/
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 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) {
/**
* Transforms a node collection into 转换一个节点收藏
* a real array 一个真正的阵列
*/
try {
return Array.prototype.slice.call(c);
} catch(e) {
var ret = [], i = 0, len = c.length;
for (; i ret[i] = c[i];
}
return ret;
}
}
function filterParents(selectorParts, collection, direct) {
/**
* This is where the magic happens. 这就是魔法发生
* Parents are stepped through (upwards) to 父母们加紧通过向上
* see if they comply with the selector. 看看他们是否符合选择器
*/
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) {
/**
* Returns a unique array返回一个独特的阵列
*/
var length = arr.length,
ret = [],
r = -1,
i = 0,
item;
for (; i item = arr[i];
if (data(item)) {
ret[++r] = item;
}
}
uid += 1;
return ret;
};
})();
function filterByAttr(collection, attr, regex) {
/**
* Filters a collection by an attribute. 一个收集过滤器一个属性
*/
var i = -1, node, r = -1, ret = [];
while ( (node = collection[++i]) ) {
if (regex.test(node[attr])) {
ret[++r] = node;
}
}
return ret;
}
return _find;
})();

以上代码支持css风格样式写法包括:
复制代码 代码如下:

div
.example
body div
div, p
div, p, .example
div p
div > p
div.example
ul .example
#title
h1#title
div #title
ul.foo > * span
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号