jQuery vs document.querySelectorAll [英] jQuery vs document.querySelectorAll

问题描述

我多次听说jQuery最强大的资产是它在DOM中查询和操作元素的方式：您可以使用CSS查询来创建复杂的查询，这在常规javascript中很难实现。
然而，据我所知，你可以用 document.querySelector 或 document.querySelectorAll ，它们在Internet Explorer 8及更高版本中受支持。所以问题是这样的：为什么'风险'的jQuery的开销，如果它的最强大的资产可以用纯JavaScript实现？

我知道jQuery不仅仅包含CSS选择器，例如跨浏览器AJAX，很好的事件附加等。但是它的查询部分是jQuery强大的一个重要部分！

有什么想法？

解决方案

document.querySelectorAll（） 在浏览器中有几个不一致之处，并且在旧版浏览器中不支持 ^{这可能不会再造成任何麻烦了}。它有一个非常不直观的范围机制和其他一些不是很好的功能。同样，对于JavaScript，您有更难处理这些查询的结果集，在很多情况下您可能想要这样做。 jQuery提供了一些函数来处理它们，比如： filter（）， find（）， children （）， parent（）， map（）， not（）等等。更不用说jQuery能够使用伪类选择器了。

然而，我不认为这些是jQuery最强大的功能，但其他的东西像工作 dom（事件，样式，动画和操作）以交叉浏览器兼容方式或ajax接口。

如果您只希望选择器引擎从jQuery中你可以使用jQuery自己使用的一个： Sizzle 这样你就拥有了权力的jQuerys Selector引擎没有讨厌的开销。

编辑：
只是为了记录，我是一个巨大的香草JavaScript粉丝。尽管如此，事实上你有时需要10行JavaScript代码，你可以写1行jQuery。

当然，你必须遵守纪律，不要像这样编写jQuery：

/ p>

  $（'ul.first'）。find（'。foo'）。css（'background-color'，'red '）.end（）。find（'.bar'）.css（'background-color'，'green'）。end（）; 
  

这非常难读，而后者很明显：

  $（'ul.first'）
 .find（'。foo'）
 .css（'background-color'， 'red'）
 .end（）
 .find（'.bar'）
 .css（'background-color'，'green'）
 .end（）; 
  

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

1）找到元素，考虑全部元素或只有第一个。

  // $ （'ul.first'）
 //将querySelectorAll视为
 var e = document.querySelector（ul.first）; 
  

2）通过一些（可能是嵌套或递归）循环迭代子节点数组，并检查class（classlist不适用于所有浏览器！）

  //。find（'。foo'）
 for var i = 0; i< e.length; i ++）{
 //旧浏览器没有element.classList  - >甚至更复杂
 e [i] .children.classList.contains（'foo'）; 
 //在这里做更多的魔术物品
} 
  

3）应用css风格

$ $ p $ // .css（'background-color'，'green'）
//注意不同的表示法
element.style.backgroundColor =green//或
element.style [background-color] =green


这段代码至少是您用jQuery编写的代码行的两倍。此外，您将不得不考虑跨浏览器问题，这些问题会危及严重的速度优势（除了可靠性）本地代码。

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.

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

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!

Any thoughts?

解决方案

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.

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.

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.

EDIT: 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.

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();

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

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) 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) apply the css style

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

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 vs document.querySelectorAll的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！