js 實現 css風格選擇器 (壓縮後2KB)

2022-03-08 21:38:00 字數 2151 閱讀 5014

近日在做一些oa前端介面,為了更好管理頁面**想寫個js選擇器,寫著寫著發現很費力,索性在網上找找看,功夫不負有心人, 找到乙個mini css選擇器,且效能不凡:以下**是壓縮後的,僅2kb。 

var $=(function()if(o.indexof(",")>-1)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]))}while((x=x.parentnode));if(o)}return w[0]&&s[0]?a(w,s):s}var e=(function()return false}})();return function(m)

if (selector.indexof(',') > -1)

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) else

if (id)

}return parts[0] && collection[0] ? filterparents(parts, collection) : collection;

}function realarray(c) catch(e)

return ret;}}

function filterparents(selectorparts, collection, direct)

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]) )

} while ( (parent = parent.parentnode) );

if (matches)

}return selectorparts[0] && ret[0] ? filterparents(selectorparts, ret) : ret;

}var unique = (function()

return false;

};})();

return function(arr)

}uid += 1;

return ret;

};})();

function filterbyattr(collection, attr, regex)

}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

喜歡的話 頂吧, 增加下知名度

js原生後代選擇器 CSS 後代選擇器

具體應用 後代選擇器的功能極其強大。有了它,可以使 html 中不可能實現的任務成為可能。假設有乙個文件,其中有乙個邊欄,還有乙個主區。邊欄的背景為藍色,主區的背景為白色,這兩個區都包含鏈結列表。不能把所有鏈結都設定為藍色,因為這樣一來邊欄中的藍色鏈結都無法看到。解決方法是使用後代選擇器。在這種情況...

css選擇器 CSS選擇器總結

在前不久的專案中,實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義,從而導致這個全域性的樣式讓 所有頁面都出現了問題,然後我就只...

CSS選擇器 復合選擇器

選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...