Css style selector implemented by js (2 kb after compression)

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.