抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/
我的Blog:http://cabbit.me/you-dont-need-jquery/selector/
上一篇文章抛弃jQuery:Why?引起了很多朋友的讨论,在这里我想强调,这一系列文章从来不希望开发人员不分情况的丢弃jQuery,也绝对不会抵制使用JavaScript库,手工处理兼容性问题,这篇及后面的专题都提供了一些能够替代jQuery的库。
如果我说“抛弃jQuery吧”,就有人觉得等于“抛弃所有的库,用C和汇编来写代码”,那我想我们更应该思考一下,我们是不是真的把jQuery当成了JavaScript的全部?
jQuery的选择符模块无比优雅,以至于我见过很多Web框架和应用中引用了庞大的jQuery,只是因为它提供了方便的DOM元素选择函数。我已经数不清自己写过多少次 $(#myElement) 或者 $('.myElement') 了,以至于在没有jQuery时经常束手无策。事实上使用DOM API选择元素并没有那么难,它或许没有jQuery的那么简短,不过用起来也足够简单了。
ID
jQuery
// 返回一个jQuery对象
$('#myElement');
DOM API,我们最常见到的是这样:
// IE 5.5+
document.getElementById('myElement');
IE 8及以上版本的浏览器中可以使用querySelector函数:
// IE 8+
document.querySelector('#myElement');
这两种DOM API函数都直接返回一个元素,有测试表明getElementById函数比querySelector函数效率更高一些。
随着浏览器升级,对querySelector函数的支持越来越好,jQuery的选择函数还有什么决定性的优势么?
CSS Classes
jQuery
// 返回所有匹配元素的jQuery对象
$('.myElement');
DOM API,IE 9及以上版本的浏览器中有专用的getElementsByClassName函数:
// IE 9+
document.getElementsByClassName('myElement');
IE 8及以上版本的浏览器中可以使用querySelectorAll函数:
// IE 8+
document.querySelectorAll('.myElement');
两种DOM API中getElementsByClassName的效率最高,返回一个HTMLCollection集合。后一种(querySelectorAll)返回NodeList类型。
jQuery能做到的,DOM API同样也做到了,不是么?
HTML 标签名
假设我们要选择所有的 div 元素:
jQuery
$('div');
DOM API,最常见的函数是这个:
// IE 5.5+
document.getElementsByTagName('div');
IE 8及以上版本的浏览器中依然可以使用querySelectorAll函数:
// IE 8+
document.querySelectorAll('div');
两种DOM API相比,getElementsByTagName的效率会稍微高一些。
HTML 属性
假设我们要选择 data-foo-bar 属性为 someval 的元素:
jQuery
$('[data-foo-bar="someval"]');
DOM API,IE 8及以上版本的浏览器中可以继续使用万能的querySelectorAll函数:
// IE 8+
document.querySelectorAll('[data-foo-bar="someval"]');
伪类
假设我们要从 id=myForm 的 from 元素中选择具备 :invalid 伪类的元素:
jQuery
$('#myForm :invalid');
DOM API,IE 8及以上版本的浏览器中可以继续使用万能的querySelectorAll函数:
// IE 8+
document.querySelectorAll('#myForm :invalid');
子元素
假设父元素 id="myParent" ,如果我们只是想简单的选择所有子元素:
jQuery
$('#myParent').children();
DOM API,最熟悉的是这个:
// IE 5.5+
// NOTE: This will include comment and text nodes as well.
document.getElementById('myParent').childNodes;
IE 9及以上版本的浏览器中可以直接使用children来获取:
// IE 9+
// NOTE: This ignores comment & text nodes.
document.getElementById('myParent').children;
如果只是想获取包含 ng-click 属性的直接子元素呢?
jQuery
$('#myParent').children('[ng-click]');
// 或者
$('#myParent > [ng-click]');
DOM API,我是从这时开始发现querySelector比我想象的要强大…
// IE 8+
document.querySelector('#myParent > [ng-click]');
后代元素
假设祖先节点 id="myParent",我们希望获取其后代的所有超链接:
jQuery
$('#myParent A');
DOM API,IE 8及以上版本的浏览器里可以这样:
// IE 8+
document.querySelectorAll('#myParent A');
排除元素
假设我们要从 div 元素中获取出不带“ignore” class的元素
jQuery
$('DIV').not('.ignore');
// 或者
$('DIV:not(.ignore)');
DOM API,IE 8及以上版本的浏览器中可以这样:
// IE 9+
document.querySelectorAll('DIV:not(.ignore)');
多重选择
假设我们要选择所有的 div , a 和 script 元素:
jQuery
$('DIV, A, SCRIPT');
DOM API,IE 8及以上版本的浏览器里可以这样:
// IE 8+
document.querySelectorAll('DIV, A, SCRIPT');
仿造 jQuery 的 “$”
发现什么规律了么?
如果我们只考虑IE8及以上的浏览器,我们可以通过简单的代码“仿造”出类似jQuery中“$”选择符的效果:
window.$ = function(selector) {
var selectorType = 'querySelectorAll';
if (selector.indexOf('#') === 0) {
selectorType = 'getElementById';
selector = selector.substr(1, selector.length);
}
return document[selectorType](selector);
};
这段代码之后,你就可以在脚本中使用$来进行大部分选择元素的操作了。
可以替代 jQuery 的专用选择符模块
对于大部分JavaScript项目来说,原生的浏览器API已经足够进行DOM元素的选择了,但是我们也注意到,这些函数在低版本的IE浏览器中不能很好的工作。为了兼容低版本的浏览器,我们需要引入一些第三方的模块来帮助我们完成选择元素的任务。
当然直接引入jQuery是最直接的方法,但是我们如果我们只是为了享受选择元素的便利,那jQuery显然大材小用(浪费带宽)了。我们不妨试试Sizzle,这是一个很小的模块,专注于选择DOM元素,事实上jQuery正是使用了Sizzle作为它的一部分。Selectivizr是另一个选择,同样很小,专注于在较早版本的浏览器中支持CSS3选择符,他同样被包含在jQuery, prototype, mootools等框架中。
如果我漏掉了什么重要的选择符,请在评论里告诉我。
题图来自:https://www.safaribooksonline.com/library/view/head-first-jquery/9781449311988/ch04.html
抛弃jQuery:DOM API之选择元素的更多相关文章
- 抛弃jQuery:DOM API之操作元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...
- JQuery基础教程:选择元素(上)
jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素.子元素,等等.通过一 ...
- JQuery基础教程:选择元素(中)
自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...
- 初识jQuery,八字真言“选择元素,对其操作”
jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jque ...
- JQuery基础教程:选择元素(下)
DOM遍历方法 利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情 ...
- 【JS】Intermediate7:jQuery:DOM API
1.jQuery also makes performing actions on many elements at the same time simple 2.eg:$('.note').css( ...
- Jquery 根据HTML内容选择元素
选择所有包含 "is" 的 元素: $("p:contains(is)")
- 抛弃jQuery:Why?
原文链接:http://blog.garstasio.com/you-dont-need-jquery/ 我的Blog:http://cabbit.me/you-dont-need-jquery/wh ...
- jQuery DOM
请尊重知识,请尊重原创 更多资料参考请见 http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1 jQuer ...
随机推荐
- Npm包的开发
个人开发包的目录结构 ├── coverage //istanbul测试覆盖率生成的文件 ├── index.js //入口文件 ├── introduce.md //说明文件 ├── lib │ ...
- AndroidTips-052:.aar文件依赖
aar aar 文件是android 类库项目的输出文件,其中可以包含普通的.class,清单,以及android项目特有的资源文件. 使用方式 将.aar文件放在在自己项目的libs目录下 在gra ...
- Python标准库--typing
作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 模块简介 Python 3.5 增加了一个有意思的库--typ ...
- virtualbox linux虚拟机相关
linux虚拟机设置为静态IP 在virtualbox中安装好linux虚拟机后,如果采用的是NAT方式的话,linux虚拟机默认采用dhcp方式自动上网,而且用的是NetworkManager服务而 ...
- 从Vue.js窥探前端行业
近年来前端开发趋势 1.旧浏览器逐渐淘汰,移动端需求增加: 旧浏览器主要指的是IE6-IE8,它是不支持ES5特性的:IE9+.chrome.sarafi.firefox对ES5是完全支持的,移动端大 ...
- Objective-C枚举的几种定义方式与使用
假设我们需要表示网络连接状态,可以用下列枚举表示: enum CSConnectionState { CSConnectionStateDisconnected, CSConnectionStateC ...
- 【手记】注意BinaryWriter写string的小坑——会在string前加上长度前缀length-prefixed
之前以为BinaryWriter写string会严格按构造时指定的编码(不指定则是无BOM的UTF8)写入string的二进制,如下面的代码: //将字符串"a"写入流,再拿到流的 ...
- Unicode 和 UTF-8 有何区别?
Unicode符号范围 (一个字符两个字节) | UTF-8编码方式 (十六进制) | (二进制) —————————————————————– 这儿有四个字节从-----00 00 ...
- 项目游戏开发日记 No.0x000001
14软二杨近星(2014551622) 既然已经决定了开发软件, 时不时就要练练手, 还要时不时的去寻找素材, 因为开发的人物设定就是DotA2里面的祈求者, 所以, 就去找了他的相关人物图片和模型, ...
- Visual Studio 2015正式发布
Windows 10 RTM正式版要7月29日发布,微软的另一个重磅软件Visual Studio 2015已经率先发布,今天如期放出了正式版本.Visual Studio 2015包括许多新功能和更 ...