jQuery选择器对应的DOM API ——选择元素
原作者的写这文章的意图是让我们抛弃jQuery,You Don’t Need jQuery!提倡我们使用原生的JavaScript,所以收集整理了jQuery语法对应的DOM API ;
原作者参数的原因可以看这里:http://blog.garstasio.com/you-dont-need-jquery/why-not/ ,个人同意他的观点,简单的页面或应用,完全可以抛弃jQuery;但是出于开发效率和开发成本的考虑,我还是比较喜欢用jQuery。
本人翻译或者说拷贝这篇文章的原因是:有一部分前端只会用jQuery,什么都网上找插件,甚至滥用jQuery,一点原生的JavaScript都不会写。QQ上,微博私信经常收到类似的基础问题。前端就是折腾的活,要从基础系统的学习。所以翻译了这篇文章,希望对新手和不写原生脚本的同学有一点点的帮助。
选择元素
有多少次你看到一个Web应用程序或库使用jQuery执行简单琐碎的元素选择?有多少次你这样写:$(#myElement')
? 或者这样$('.myElement')
?嘘……你不需要用jQuery选择元素!这使用DOM API也很容易做到。
By ID
jQuery
DOM API
…或者…
这两种方法返回一个Element
(元素)。 需要注意的是使用 getElementById
比使用querySelector
更高效 。
请问jQuery的语法提供任何好处吗?我没有看到一个。你呢?
By CSS Class
jQuery
DOM API
…或者…
第一个方法返回的HTMLCollection
,并且效率最高的是第二个方法。 querySelectorAll
总是返回一个NodeList
(节点列表)。
同样,这里真的很简单的东西。为什么要使用jQuery?
By Tag Name
举个例子,选择页面上所有的<div>
元素:
jQuery
DOM API
…或者…
正如预期的那样,querySelectorAll
(返回 NodeList
)比getElementsByTagName
(返回HTMLCollection
)效率低。
By Attribute(属性)
选择所有”data-foo-bar”值为”someval”的元素:
jQuery
DOM API
DOM API和jQuery语法非常相似。
By Pseudo-class(伪类)
选择所有在指定表单中的当前无效(:invalid 伪类)字段。假设我们的表单 ID为”myForm”。
jQuery
DOM API
Children(子元素)
选择一个特定元素的所有子元素。 假设我们的特定元素 ID为 “myParent”。
jQuery
DOM API
…或者…
但是,如果我们只想找到特定的子元素呢?比如,有 “ng-click”属性的子元素?
jQuery
…或…
DOM API
Descendants(后代元素)
找到#myParent下面所有”a”元素。
jQuery
DOM API
Excluding Elements(排除元素)
选择所有<div>
元素,排除那些有”ignore”样式类 <div>
元素。
jQuery
…或者…
DOM API
Multiple Selectors(多重选择)
选择所有<div>
,<a>
和<script>
元素。
jQuery
DOM API
See a Pattern?
如果我们专注于选择器的支持,并且不需要处理IE8以下的浏览器,我们只需用这个替代jQuery:
But I Want More!
对于绝大多数项目中,选择器支持到Web API就足够了。但是,如果你不幸需要支持IE7?在这种情况下,你可能需要一些第三方的代码来提供一些帮助。
当然,你仅仅需要引入jQuery,但当你只需要支持现在先进的选择器时,为什么用这么大的代码库呢?相反,尝试一下micro-library(微小的库)完全专注于元素选择。考虑,Sizzle,这恰好是jQuery使用的选择库。Selectivizr是另一种非常小的选择库,在很老的浏览器上也能支持CSS3选择器。
英文原文:http://blog.garstasio.com/you-dont-need-jquery/selectors/
建议继续学习:
- JQuery实现Excel表格呈现 (阅读:46515)
- 分享一个JQUERY颜色选择插件 (阅读:12629)
- jQuery插件---轻量级的弹出窗口wBox. (阅读:9681)
- 10个强大的Ajax jQuery文件上传程序 (阅读:7750)
- jQuery的data()方法 (阅读:7572)
- jQuery性能优化指南 (阅读:7302)
- jQuery Color Animations颜色动画插件 (阅读:7068)
- 精于图片处理的10款jQuery插件 (阅读:6203)
- jQuery中getJSON跨域原理详解 (阅读:5612)
- 配合jquery实现异步加载页面元素 (阅读:5367)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:愚人码头 来源: WEB前端开发
- 标签: jQuery 选择器
- 发布时间:2015-01-11 23:30:59
- [68] 如何拿下简短的域名
- [68] Go Reflect 性能
- [64] Oracle MTS模式下 进程地址与会话信
- [61] 图书馆的世界纪录
- [60] IOS安全–浅谈关于IOS加固的几种方法
- [60] 【社会化设计】自我(self)部分――欢迎区
- [58] android 开发入门
- [53] 视觉调整-设计师 vs. 逻辑
- [48] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成