您现在的位置:首页 --> JavaScript --> 元素选择器 - Mini Query
元素选择器 - Mini Query
浏览:975次 出处信息
寥寥几行代码,实现一个简单的元素选择器,兼容低版本 IE。
自 IE8 开始已经开始支持 querySelector 和 querySelectorAll 这两个十分有用的选择器函数,如果不考虑低版本浏览器,它们已经可以基本满足日常需求了。而在兼容低版本浏览器中,可以采用一些 hack 手段。
原理比较简单:通过 CSS Rule 给我们的目标元素添加特殊属性,然后遍历所有元素找到具备特殊属性的元素,当然,找到之后,移除这些特殊属性。
var firstStyleSheet = document.styleSheets[0] || document.createStyleSheet(); |
比如我们要获取 .box .item a.pink
元素,上面的代码是这么做的,
给所有的
.box .item a.pink
元素添加{ Barret: Lee; }
这个 CSS 的样式遍历所有元素找到包含 Barret 这个 CSS 属性的元素
移除属性
IE8 有些调皮,需要修复点小问题,源码地址:
git clone https://github.com/barretlee/MiniQuery
npm install mini-query
代码预览:
function$(query) { |
建议继续学习:
- 前端必须掌握30个CSS3选择器 (阅读:4120)
- jQuery选择器探讨进阶 (阅读:3289)
- jQuery之find选择器 (阅读:3244)
- CSS选择器 (阅读:2824)
- 自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快! (阅读:2783)
- 推荐三十款CSS样式选择器代码 (阅读:2682)
- 一种基于匹配回朔的 css3 选择器引擎实现 (阅读:2680)
- jQuery选择器对应的DOM API ——选择元素 (阅读:2017)
- IE7浏览器下CSS属性选择器二三事 (阅读:450)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:JavaScript 代码执行效率对比工具
文章信息
- 作者:小胡子哥的个人网站 来源: 小胡子哥的个人网站
- 标签: 选择器
- 发布时间:2016-05-05 22:44:05
建议继续学习
近3天十大热文
- [217] 招聘技巧一二
- [15] Linux常用系统信息查看命令
- [13] 最近总结的一些技巧(vim,python,s
- [12] 关于Linux的文件系统cache
- [11] Redis和Memcached的区别
- [11] 个人开公司的流程,以后用得着
- [11] 在FreeNAS/BSD搭建基于Nginx+
- [10] 每个程序员都应该知道的8个Linux命令
- [10] 我对技术方向的一些反思
- [10] ps - 按进程消耗内存多少排序