您现在的位置:首页 --> JavaScript --> 元素选择器 - Mini Query
元素选择器 - Mini Query
浏览:1124次 出处信息
寥寥几行代码,实现一个简单的元素选择器,兼容低版本 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选择器 (阅读:4180)
- jQuery选择器探讨进阶 (阅读:3413)
- jQuery之find选择器 (阅读:3283)
- CSS选择器 (阅读:2878)
- 自己实现的简单的html元素选择器,类似jquery选择器,比jquery选择器还要快! (阅读:2843)
- 推荐三十款CSS样式选择器代码 (阅读:2734)
- 一种基于匹配回朔的 css3 选择器引擎实现 (阅读:2752)
- jQuery选择器对应的DOM API ——选择元素 (阅读:2181)
- IE7浏览器下CSS属性选择器二三事 (阅读:532)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:JavaScript 代码执行效率对比工具
文章信息
- 作者:小胡子哥的个人网站 来源: 小胡子哥的个人网站
- 标签: 选择器
- 发布时间:2016-05-05 22:44:05
建议继续学习
近3天十大热文
- [46] 界面设计速成
- [40] 视觉调整-设计师 vs. 逻辑
- [40] Oracle MTS模式下 进程地址与会话信
- [38] IOS安全–浅谈关于IOS加固的几种方法
- [37] android 开发入门
- [36] 程序员技术练级攻略
- [36] 如何拿下简短的域名
- [35] 图书馆的世界纪录
- [35] 【社会化设计】自我(self)部分――欢迎区
- [32] 读书笔记-壹百度:百度十年千倍的29条法则