原文链接: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

  1. // 返回一个jQuery对象
  2. $('#myElement');

DOM API,我们最常见到的是这样:

  1. // IE 5.5+
  2. document.getElementById('myElement');

IE 8及以上版本的浏览器中可以使用querySelector函数:

  1. // IE 8+
  2. document.querySelector('#myElement');

这两种DOM API函数都直接返回一个元素,有测试表明getElementById函数比querySelector函数效率更高一些

随着浏览器升级,对querySelector函数的支持越来越好,jQuery的选择函数还有什么决定性的优势么?

CSS Classes

jQuery

  1. // 返回所有匹配元素的jQuery对象
  2. $('.myElement');

DOM API,IE 9及以上版本的浏览器中有专用的getElementsByClassName函数:

  1. // IE 9+
  2. document.getElementsByClassName('myElement');

IE 8及以上版本的浏览器中可以使用querySelectorAll函数:

  1. // IE 8+
  2. document.querySelectorAll('.myElement');

两种DOM API中getElementsByClassName的效率最高,返回一个HTMLCollection集合。后一种(querySelectorAll)返回NodeList类型。

jQuery能做到的,DOM API同样也做到了,不是么?

HTML 标签名

假设我们要选择所有的 div 元素:

jQuery

  1. $('div');

DOM API,最常见的函数是这个:

  1. // IE 5.5+
  2. document.getElementsByTagName('div');

IE 8及以上版本的浏览器中依然可以使用querySelectorAll函数:

  1. // IE 8+
  2. document.querySelectorAll('div');

两种DOM API相比,getElementsByTagName的效率会稍微高一些。

HTML 属性

假设我们要选择 data-foo-bar 属性为 someval 的元素:

jQuery

  1. $('[data-foo-bar="someval"]');

DOM API,IE 8及以上版本的浏览器中可以继续使用万能的querySelectorAll函数:

  1. // IE 8+
  2. document.querySelectorAll('[data-foo-bar="someval"]');

伪类

假设我们要从 id=myForm 的 from 元素中选择具备 :invalid 伪类的元素:

jQuery

  1. $('#myForm :invalid');

DOM API,IE 8及以上版本的浏览器中可以继续使用万能的querySelectorAll函数:

  1. // IE 8+
  2. document.querySelectorAll('#myForm :invalid');

子元素

假设父元素 id="myParent" ,如果我们只是想简单的选择所有子元素:

jQuery

  1. $('#myParent').children();

DOM API,最熟悉的是这个:

  1. // IE 5.5+
  2. // NOTE: This will include comment and text nodes as well.
  3. document.getElementById('myParent').childNodes;

IE 9及以上版本的浏览器中可以直接使用children来获取:

  1. // IE 9+
  2. // NOTE: This ignores comment & text nodes.
  3. document.getElementById('myParent').children;

如果只是想获取包含 ng-click 属性的直接子元素呢?

jQuery

  1. $('#myParent').children('[ng-click]');
  2. // 或者
  3. $('#myParent > [ng-click]');

DOM API,我是从这时开始发现querySelector比我想象的要强大…

  1. // IE 8+
  2. document.querySelector('#myParent > [ng-click]');

后代元素

假设祖先节点 id="myParent",我们希望获取其后代的所有超链接:

jQuery

  1. $('#myParent A');

DOM API,IE 8及以上版本的浏览器里可以这样:

  1. // IE 8+
  2. document.querySelectorAll('#myParent A');

排除元素

假设我们要从 div 元素中获取出不带“ignore” class的元素

jQuery

  1. $('DIV').not('.ignore');
  2. // 或者
  3. $('DIV:not(.ignore)');

DOM API,IE 8及以上版本的浏览器中可以这样:

  1. // IE 9+
  2. document.querySelectorAll('DIV:not(.ignore)');

多重选择

假设我们要选择所有的 div , a 和 script 元素:

jQuery

  1. $('DIV, A, SCRIPT');

DOM API,IE 8及以上版本的浏览器里可以这样:

  1. // IE 8+
  2. document.querySelectorAll('DIV, A, SCRIPT');

仿造 jQuery 的 “$”

发现什么规律了么?

如果我们只考虑IE8及以上的浏览器,我们可以通过简单的代码“仿造”出类似jQuery中“$”选择符的效果:

  1. window.$ = function(selector) {
  2. var selectorType = 'querySelectorAll';
  3. if (selector.indexOf('#') === 0) {
  4. selectorType = 'getElementById';
  5. selector = selector.substr(1, selector.length);
  6. }
  7. return document[selectorType](selector);
  8. };

这段代码之后,你就可以在脚本中使用$来进行大部分选择元素的操作了。

可以替代 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之选择元素的更多相关文章

  1. 抛弃jQuery:DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  2. JQuery基础教程:选择元素(上)

    jQuery最强大的特性之一就是它能够简化在DOM中选择元素的任务,DOM中的对象网络与家谱有几分类似,当我们提到网络中元素之间的关系时,会使用类似描述家庭关系的术语,比如父元素.子元素,等等.通过一 ...

  3. JQuery基础教程:选择元素(中)

    自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...

  4. 初识jQuery,八字真言“选择元素,对其操作”

    jQuery在我印象中,就是很多类似$(),然后昨天开始接触了,觉得很和谐,获取元素比JavaScript简单很多,有意思. 一.开始学习jQuery,下载jQuery库的文件 http://jque ...

  5. JQuery基础教程:选择元素(下)

    DOM遍历方法   利用前面介绍的jQuery选择符取得一组元素,就像是我们在DOM树中纵横遍历再经过筛选得到的结果一样.如果只有这一种取得元素的方式,那我们选择的余地从某个角度讲也是很有限的.很多情 ...

  6. 【JS】Intermediate7:jQuery:DOM API

    1.jQuery also makes performing actions on many elements at the same time simple 2.eg:$('.note').css( ...

  7. Jquery 根据HTML内容选择元素

    选择所有包含 "is" 的 元素: $("p:contains(is)")

  8. 抛弃jQuery:Why?

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/ 我的Blog:http://cabbit.me/you-dont-need-jquery/wh ...

  9. jQuery DOM

    请尊重知识,请尊重原创 更多资料参考请见  http://www.cezuwang.com/listFilm?page=1&areaId=906&filmTypeId=1  jQuer ...

随机推荐

  1. 可爱的豆子——使用Beans思想让Python代码更易维护

    title: 可爱的豆子--使用Beans思想让Python代码更易维护 toc: false comments: true date: 2016-06-19 21:43:33 tags: [Pyth ...

  2. ASP.NET Core应用的错误处理[3]:ExceptionHandlerMiddleware中间件如何呈现“定制化错误页面”

    DeveloperExceptionPageMiddleware中间件利用呈现出来的错误页面实现抛出异常和当前请求的详细信息以辅助开发人员更好地进行纠错诊断工作,而ExceptionHandlerMi ...

  3. 【大型网站技术实践】初级篇:借助Nginx搭建反向代理服务器

    一.反向代理:Web服务器的“经纪人” 1.1 反向代理初印象 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从 ...

  4. 为你的Web程序加个启动画面

    .Net开发者一定熟悉下面这个画面: 这就是宇宙第一IDE Visual Studio的启动画面,学名叫Splash Screen(或者Splash Window).同样,Javar们一定对Eclip ...

  5. Js new到底发生了什么

    在Js中,我们使用了new关键字来进行实例化 那么在这个new的过程中到底发生了什么? 关于构造函数的return 正常来讲构造函数中是不用写return语句的,因为它会默认返回新创建的对象. 但是, ...

  6. C#基础篇 - 正则表达式入门

    1.基本概念 正则表达式(Regular Expression)就是用事先定义好的一些特定字符(元字符)或普通字符.及这些字符的组合,组成一个“规则字符串”,这个“规则字符串”用来判断我们给定的字符串 ...

  7. 微软新神器-Power BI横空出世,一个简单易用,还用得起的BI产品,你还在等什么???

    在当前互联网,由于大数据研究热潮,以及数据挖掘,机器学习等技术的改进,各种数据可视化图表层出不穷,如何让大数据生动呈现,也成了一个具有挑战性的可能,随之也出现了大量的商业化软件.今天就给大家介绍一款逆 ...

  8. 基于SignalR的消息推送与二维码描登录实现

    1 概要说明 使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...

  9. Redis简单案例(二) 网站最近的访问用户

    我们有时会在网站中看到最后的访问用户.最近的活跃用户等等诸如此类的一些信息.本文就以最后的访问用户为例, 用Redis来实现这个小功能.在这之前,我们可以先简单了解一下在oracle.sqlserve ...

  10. LINQ to SQL Where条件

    1. 适用场景 实现条件的过滤和查询等功能. 2. 说明 跟SQL语句中的where作用相似,都起到了范围的限定即过滤的作用,而判断条件是紧跟后面的条件子句.where主要分为三种形式:简单形式.条件 ...