近日在做一些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 分組選擇器 選擇...