Recently, I am working on some front-end OA interfaces. In order to better manage the Page code, I want to write a js selector, which says it is very laborious to find it on the Internet. I am very hard to find a mini css selector, outstanding Performance: the following code is compressed, only 2 kb.
Copy codeThe Code is as follows: 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 })();
Share the original version with you:Copy codeThe Code is as follows :/**
* "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 +? = ([\ '"])? (? : \ 1 |.) +? \ 1 \])? | \ * |>/Ig,
ExprClassName =/^ (? : [\ W \-_] + )? \. ([\ W \-_] + )/,
ExprId =/^ (? : [\ W \-_] + )? # ([\ W \-_] + )/,
ExprNodeName =/^ ([\ w \ * \-_] + )/,
Na = [null, null];
Function _ find (selector, context ){
/**
* This is what you call via x (). This is what you call Jing x
* Starts everything off... start all
*/
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 ){
/**
* Transforms a node collection into converts a node collection
* A real array: a real array
*/
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 ){
/**
* This is where the magic happens. This is where magic occurs.
* Parents are stepped through (upwards) to step up through
* See if they comply with the selector. Check if they match 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 <length; ++ 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. One collection filter and one attribute
*/
Var I =-1, node, r =-1, ret = [];
While (node = collection [++ I]) {
If (regex. test (node [attr]) {
Ret [++ r] = node;
}
}
Return ret;
}
Return _ find;
})();
The above Code supports css style Writing, including:Copy codeThe Code is as follows: 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