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

WEB前端开发 2015-01-11 23:30:59 浏览 3,722 次

标签 jQuery 选择器

愚人码头注：

原作者的写这文章的意图是让我们抛弃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也很容易做到。

// returns a jQuery obj w/ 0-1 elements$('#myElement');

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

…或者…

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

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

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

// returns a jQuery obj w/ all matching elements$('.myElement');

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

…或者…

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

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

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

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

$('div');

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

…或者…

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

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

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

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