jQuery 与 document.querySelectorAll

问题描述

我多次听说 jQuery 最强大的资产是它在 DOM 中查询和操作元素的方式:您可以使用 CSS 查询来创建在常规 javascript 中很难做到的复杂查询.但是，据我所知，您可以使用 Internet Explorer 8 及更高版本支持的 document.querySelector 或 document.querySelectorAll 获得相同的结果.

I heard several times that jQuery's strongest asset is the way it queries and manipulates elements in the DOM: you can use CSS queries to create complex queries that would be very hard to do in regular javascript . However , as far as I know, you can achieve the same result with document.querySelector or document.querySelectorAll, which are supported in Internet Explorer 8 and above.

所以问题是:如果 jQuery 最强大的资产可以用纯 JavaScript 实现，为什么还要冒险"承担 jQuery 的开销?

So the question is this: why 'risk' jQuery's overhead if its strongest asset can be achieved with pure JavaScript?

我知道 jQuery 不仅仅是 CSS 选择器，例如跨浏览器 AJAX、漂亮的事件附加等.但是它的查询部分是 jQuery 强大的一个非常重要的部分！

I know jQuery has more than just CSS selectors, for example cross browser AJAX, nice event attaching etc. But its querying part is a very big part of the strength of jQuery!

有什么想法吗?

推荐答案

document.querySelectorAll() 跨浏览器有几个不一致，旧浏览器不支持^{这可能不会再造成任何麻烦了}.它有一个非常不直观的 作用域机制 和其他一些 不是很好的功能.同样，使用 javascript，您会更难处理这些查询的结果集，而在许多情况下，您可能想要这样做.jQuery 提供了一些函数来处理它们，例如:filter()、find()、children()、parent()、map()、not() 等等.更不用说 jQuery 使用伪类选择器的能力了.

document.querySelectorAll() has several inconsistencies across browsers and is not supported in older browsers^{This probably won't cause any trouble anymore nowadays}. It has a very unintuitive scoping mechanism and some other not so nice features. Also with javascript you have a harder time working with the result sets of these queries, which in many cases you might want to do. jQuery provides functions to work on them like: filter(), find(), children(), parent(), map(), not() and several more. Not to mention the jQuery ability to work with pseudo-class selectors.

但是，我不认为这些东西是 jQuery 最强大的功能，而是其他东西，比如以 crossbrowser compatible 方式或 ajax 在 dom(事件、样式、动画和操作)上工作"界面.

However, I would not consider these things as jQuery's strongest features but other things like "working" on the dom (events, styling, animation & manipulation) in a crossbrowser compatible way or the ajax interface.

如果你只想要 jQuery 的选择器引擎，你可以使用 jQuery 本身正在使用的引擎:Sizzle 这样您就可以拥有强大的 jQuerys 选择器引擎，而不会产生讨厌的开销.

If you only want the selector engine from jQuery you can use the one jQuery itself is using: Sizzle That way you have the power of jQuerys Selector engine without the nasty overhead.

只是为了记录，我是一个巨大的香草 JavaScript 粉丝.尽管如此，你有时需要 10 行 JavaScript 来编写 1 行 jQuery，这是一个事实.

Just for the record, I'm a huge vanilla JavaScript fan. Nonetheless it's a fact that you sometimes need 10 lines of JavaScript where you would write 1 line jQuery.

当然，你必须自律，不要这样写 jQuery:

Of course you have to be disciplined to not write jQuery like this:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

这很难阅读，而后者非常清楚:

This is extremely hard to read, while the latter is pretty clear:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

上面的伪代码说明了等效的 JavaScript 会复杂得多:

The equivalent JavaScript would be far more complex illustrated by the pseudocode above:

1) 找到元素，考虑取所有元素或只取第一个.

1) Find the element, consider taking all element or only the first.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) 通过一些(可能是嵌套或递归的)循环遍历子节点数组并检查类(类列表并非在所有浏览器中都可用！)

2) Iterate over the array of child nodes via some (possibly nested or recursive) loops and check the class (classlist not available in all browsers!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) 应用 css 样式

3) apply the css style

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

这段代码至少是你用 jQuery 编写的代码行数的两倍.此外，您还必须考虑跨浏览器问题，这将损害 严重的速度优势(除了可靠性之外)本机代码.

This code would be at least two times as much lines of code you write with jQuery. Also you would have to consider cross-browser issues which will compromise the severe speed advantage (besides from the reliability) of the native code.

这篇关于jQuery 与 document.querySelectorAll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！