技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> jQuery选择器对应的DOM API ——选择元素

jQuery选择器对应的DOM API ——选择元素

浏览:2172次  出处信息
愚人码头注:
  • 原作者的写这文章的意图是让我们抛弃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也很容易做到。

  1. IDs

  2. CSS Classes

  3. Tag Names

  4. Attributes

  5. Pseudo-classes

  6. Children

  7. Descendants

  8. Exclusion Selectors

  9. Multiple Selectors

  10. See a Pattern?

  11. Filling in the Gaps

  12. Next in this Series

By ID

jQuery

  1. // returns a jQuery obj w/ 0-1 elements

  2. $('#myElement');

DOM API

  1. // IE 5.5+

  2. document.getElementById('myElement');

…或者…

  1. // IE 8+

  2. document.querySelector('#myElement');

这两种方法返回一个Element(元素)。 需要注意的是使用 getElementById比使用querySelector更高效

请问jQuery的语法提供任何好处吗?我没有看到一个。你呢?

By CSS Class

jQuery

  1. // returns a jQuery obj w/ all matching elements

  2. $('.myElement');

DOM API

  1. // IE 9+

  2. document.getElementsByClassName('myElement');

…或者…

  1. // IE 8+

  2. document.querySelectorAll('.myElement');

第一个方法返回的HTMLCollection,并且效率最高的是第二个方法querySelectorAll总是返回一个NodeList(节点列表)

同样,这里真的很简单的东西。为什么要使用jQuery?

By Tag Name

举个例子,选择页面上所有的<div>元素:

jQuery

  1. $('div');

DOM API

  1. // IE 5.5+

  2. document.getElementsByTagName('div');

…或者…

  1. // IE 8+

  2. document.querySelectorAll('div');

正如预期的那样,querySelectorAll(返回 NodeList)比getElementsByTagName(返回HTMLCollection)效率低。

By Attribute(属性)

选择所有”data-foo-bar”值为”someval”的元素:

jQuery

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

DOM API

  1. // IE 8+

  2. document.querySelectorAll('[data-foo-bar="someval"]');

DOM API和jQuery语法非常相似。

By Pseudo-class(伪类)

选择所有在指定表单中的当前无效(:invalid 伪类)字段。假设我们的表单 ID为”myForm”。

jQuery

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

DOM API

  1. // IE 8+

  2. document.querySelectorAll('#myForm :invalid');

Children(子元素)

选择一个特定元素的所有子元素。 假设我们的特定元素 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;

…或者…

  1. // IE 9+ (ignores comment & text nodes).

  2. document.getElementById('myParent').children;

但是,如果我们只想找到特定的子元素呢?比如,有 “ng-click”属性的子元素?

jQuery

  1. $('#myParent').children('[ng-click]');

…或…

  1. $('#myParent > [ng-click]');

DOM API

  1. // IE 8+

  2. document.querySelector('#myParent > [ng-click]');

Descendants(后代元素)

找到#myParent下面所有”a”元素。

jQuery

  1. $('#myParent A');

DOM API

  1. // IE 8+

  2. document.querySelectorAll('#myParent A');

Excluding Elements(排除元素)

选择所有<div>元素,排除那些有”ignore”样式类 <div>元素。

jQuery

  1. $('DIV').not('.ignore');

…或者…

  1. $('DIV:not(.ignore)');

DOM API

  1. // IE 9+

  2. document.querySelectorAll('DIV:not(.ignore)');

Multiple Selectors(多重选择)

选择所有<div>,<a><script>元素。

jQuery

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

DOM API

  1. // IE 8+

  2. document.querySelectorAll('DIV, A, SCRIPT');

See a Pattern?

如果我们专注于选择器的支持,并且不需要处理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. };

But I Want More!

对于绝大多数项目中,选择器支持到Web API就足够了。但是,如果你不幸需要支持IE7?在这种情况下,你可能需要一些第三方的代码来提供一些帮助。

当然,你仅仅需要引入jQuery,但当你只需要支持现在先进的选择器时,为什么用这么大的代码库呢?相反,尝试一下micro-library(微小的库)完全专注于元素选择。考虑,Sizzle,这恰好是jQuery使用的选择库。Selectivizr是另一种非常小的选择库,在很老的浏览器上也能支持CSS3选择器。

英文原文:http://blog.garstasio.com/you-dont-need-jquery/selectors/

建议继续学习:

  1. JQuery实现Excel表格呈现    (阅读:46522)
  2. 分享一个JQUERY颜色选择插件    (阅读:12652)
  3. jQuery插件---轻量级的弹出窗口wBox.    (阅读:9688)
  4. 10个强大的Ajax jQuery文件上传程序    (阅读:7757)
  5. jQuery的data()方法    (阅读:7585)
  6. jQuery性能优化指南    (阅读:7327)
  7. jQuery Color Animations颜色动画插件    (阅读:7090)
  8. 精于图片处理的10款jQuery插件    (阅读:6223)
  9. jQuery中getJSON跨域原理详解    (阅读:5621)
  10. 配合jquery实现异步加载页面元素    (阅读:5375)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1