您现在的位置:首页 --> JavaScript --> 元素选择器 - Mini Query
元素选择器 - Mini Query
浏览:979次 出处信息
寥寥几行代码,实现一个简单的元素选择器,兼容低版本 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选择器 (阅读:4128)
- jQuery选择器探讨进阶 (阅读:3293)
- jQuery之find选择器 (阅读:3247)
- CSS选择器 (阅读:2825)
- 自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快! (阅读:2788)
- 推荐三十款CSS样式选择器代码 (阅读:2689)
- 一种基于匹配回朔的 css3 选择器引擎实现 (阅读:2686)
- jQuery选择器对应的DOM API ——选择元素 (阅读:2021)
- IE7浏览器下CSS属性选择器二三事 (阅读:455)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:JavaScript 代码执行效率对比工具
文章信息
- 作者:小胡子哥的个人网站 来源: 小胡子哥的个人网站
- 标签: 选择器
- 发布时间:2016-05-05 22:44:05
建议继续学习
近3天十大热文
- [699] Go Reflect 性能
- [24] 正态分布的前世今生(一)
- [16] rsync同步的艺术
- [15] Cuckoo Filter:设计与实现
- [13] 什么是DNS劫持和DNS污染?
- [13] Linux Used内存到底哪里去了?
- [13] 关于RDS只读实例延迟分析
- [12] Linux内存中的Cache真的能被回收么?
- [12] 公钥私钥加密解密数字证书数字签名详解
- [11] jQuery性能优化指南