jQuery vs document.querySelectorAll

Question

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

所以问题是：为什么'冒险'jQuery的开销如果用纯JavaScript可以实现最强大的资产？

我知道jQuery不仅仅有CSS选择器，例如跨浏览器AJAX，附带好的事件等等。但它的查询部分是jQuery强大的一部分！

有什么想法吗？

Answer 1

document.querySelectorAll() 在浏览器中存在多个不一致，旧版浏览器不支持 ^{这可能不会再造成任何麻烦}。它有一个非常不直观的scoping mechanism和其他一些not so nice features。此外，使用javascript，您更难以使用这些查询的结果集，在许多情况下您可能想要这样做。 jQuery提供了对它们起作用的函数，如：filter()，find()，children()，parent()，map()，not()等等。更不用说jQuery使用伪类选择器的能力了。

然而，我不会将这些事情视为jQuery最强大的功能，而是将其他事情视为dom（事件，样式，动画和操作）以 crossbrowser兼容方式或ajax接口

如果您只想从jQuery中选择引擎，您可以使用jQuery本身正在使用的那个： Sizzle 这样您就可以获得jQuerys Selector引擎的强大功能而不会产生令人讨厌的开销。< / p>

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

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

$('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')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

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

//.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样式

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

这段代码至少是用jQuery编写的代码行的两倍。此外，您还必须考虑跨浏览器问题，这些问题会损害本地代码的severe speed advantage（除了可靠性之外）。

Answer 2

如果您正在为IE8或更新版本优化页面，您应该考虑是否需要jquery。现代浏览器本身有许多jquery提供的资产。

如果您关心性能，可以使用原生javascript获得令人难以置信的性能优势 （快2-10倍） ： http://jsperf.com/jquery-vs-native-selector-and-element-style/2

我将div-tagcloud从 jquery 转换为原生javascript （IE8 +兼容），结果令人印象深刻。只需一点开销就快4倍。

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

你可能不需要Jquery提供了一个非常好的概述，本机方法取代了哪个浏览器版本。

http://youmightnotneedjquery.com/

---

附录：进一步比较本机方法如何与jquery竞争

• Array: $.inArray vs Array.indexOf: Jquery 24% slower

• DOM: $.empty vs Node.innerHtml: Jquery 97% slower

• DOM: $.on vs Node.addEventListener: Jquery 90% slower

• DOM: $.find vs Node.queryselectorall: Jquery 90% slower

• Array: $.grep vs Array.filter: Native 70% slower

• DOM: $.show/hide vs display none: Jquery 85% slower

• AJAX: $.ajax vs XMLHttpRequest: Jquery 89% slower

• Height: $.outerHeight vs offsetHeight: Jquery 87% slower

• Attr: $.attr vs setAttribute: Jquery 86% slower

Answer 3

要理解为什么jQuery如此受欢迎，了解我们来自哪里非常重要！

大约十年前，顶级浏览器分别是IE6，Netscape 8和Firefox 1.5。在那些日子里，除了Document.getElementById()之外，几乎没有跨浏览器方式从DOM中选择元素。

所以，当jQuery was released back in 2006时，它是非常具有革命性的。那时候，jQuery为如何轻松选择/更改HTML元素和触发事件设定了标准，因为它的灵活性和浏览器支持是前所未有的。

现在，十多年后，许多使jQuery如此受欢迎的功能已经包含在javaScript标准中：

• 现在可以使用$()
而不是jQuery＆＃39; Document.querySelectorAll()。
• 您现在可以使用$el.on()
而不是jQuery＆＃39; EventTarget.addEventListener()
• 您现在可以使用$el.toggleClass()
而不是jQuery＆＃39; Element.classList.toggle()
• ...

这些在2005年一般都没有。今天它们的事实显然引出了为什么我们应该使用jQuery的问题。事实上，人们越来越wondering whether we should use jQuery at all。

所以，如果你认为你能够很好地理解JavaScript而不用jQuery，那就行了！不要觉得被迫使用jQuery，因为有很多人正在这样做！

Answer 4

如果jQuery的Sizzle选择器引擎可用，它可以使用querySelectorAll。它还可以消除浏览器之间的不一致性，从而实现统一的结果。如果你不想使用所有的jQuery，你可以单独使用Sizzle。这是一个非常重要的发明轮子。

这里有一些源自樱桃的选择，展示了jQuery（w / Sizzle）为你排序的东西：

Safari怪癖模式：

if ( document.querySelectorAll ) {
  (function(){
    var oldSizzle = Sizzle,
      div = document.createElement("div"),
      id = "__sizzle__";

    div.innerHTML = "<p class='TEST'></p>";

    // Safari can't handle uppercase or unicode characters when
    // in quirks mode.
    if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
      return;
    }

如果该守卫失败，则使用它的Sizzle版本未使用querySelectorAll进行增强。下面是IE，Opera和Blackberry浏览器中不一致的特定句柄。

  // Check parentNode to catch when Blackberry 4.6 returns
  // nodes that are no longer in the document #6963
  if ( elem && elem.parentNode ) {
    // Handle the case where IE and Opera return items
    // by name instead of ID
    if ( elem.id === match[3] ) {
      return makeArray( [ elem ], extra );
    }

  } else {
    return makeArray( [], extra );
  }

如果所有其他方法都失败了，它将返回oldSizzle(query, context, extra, seed)。

的结果

Answer 5

这是因为jQuery可以做的远不止querySelectorAll。

首先，jQuery（特别是Sizzle）适用于不支持CSS2.1-3选择器的IE7-8等旧版浏览器。

另外，Sizzle（jQuery背后的选择器引擎）为您提供了许多更高级的选择器工具，如:selected伪类，高级:not()选择器，更复杂的语法在$("> .children")等等。

它提供跨浏览器，完美无瑕，提供jQuery所能提供的所有功能（插件和API）。

是的，如果你认为你可以依赖简单的类和id选择器，那么jQuery对你来说太过分了，你会付出夸张的回报。但是如果你不这样做，并希望利用所有jQuery的优点，那么就使用它。

Answer 6

如果我想应用相同的属性，例如，这是一个比较，例如隐藏班级的所有元素＆＃34; my-class＆＃34;。这是使用jQuery的一个原因。

jQuery的：

$('.my-class').hide();

JavaScript的：

var cls = document.querySelectorAll('.my-class');
for (var i = 0; i < cls.length; i++) {
    cls[i].style.display = 'none';
}

jQuery已经如此受欢迎，他们应该让document.querySelector（）表现得像$（）。相反，document.querySelector（）只选择第一个匹配元素，使其只有一半有用。

Answer 7

在代码可维护性方面，坚持使用广泛使用的库有几个原因。

其中一个主要问题是它们有很好的文档记录，并且有一些社区，例如...说... stackexchange，可以找到有关库的帮助。使用自定义编码库，您可以获得源代码，也可以使用操作方法文档，除非编码器花费更多时间记录代码而不是编写代码，这种情况非常罕见。

编写自己的库可能适用于你，但是坐在下一个桌面的实习生可能更容易适应jQuery之类的速度。

如果您愿意，请将其称为网络效果。这并不是说代码在jQuery中会更胜一筹;只是因为代码的简洁性使得更容易掌握所有技能水平的程序员的整体结构，只是因为在您正在查看的文件中可以同时看到更多功能代码。从这个意义上讲，5行代码优于10行。

总而言之，我认为jQuery的主要优点是简洁的代码和无处不在。

Answer 8

正如官方网站所说： “jQuery：少写，多做，JavaScript库”

尝试翻译以下jQuery代码而不使用任何库

$("p.neat").addClass("ohmy").show("slow");

Answer 9

我认为真正的答案是jQuery是在querySelector/querySelectorAll在所有主流浏览器中可用之前很久就开发出来的。

jQuery was in 2006的初始版本。实际上，即使是jQuery was not the first which implemented CSS selectors。

IE was the last browser实施querySelector/querySelectorAll。第8版was released in 2009。

所以现在，DOM元素选择器不再是jQuery的最强点了。然而，它仍然有许多好东西，比如改变元素的css和html内容，动画，事件绑定，ajax的快捷方式。

Answer 10

$("#id") vs document.querySelectorAll("#id")

交易是使用$（）函数创建一个数组，然后为你分解它，但是使用document.querySelectorAll（）它会生成一个数组，你必须将其分解。

Answer 11

老问题，但五年后，值得重新审视。这里我只讨论jQuery的选择器方面。

document.querySelector[All]受所有当前浏览器支持，直至IE8，因此兼容性不再是问题。我还发现没有性​​能问题（它应该比document.getElementById慢，但我自己的测试表明它稍微快一些。）

因此，当涉及直接操作元素时，它优于jQuery。

例如：

var element=document.querySelector('h1');
element.innerHTML='Hello';

非常优于：

var $element=$('h1');
$element.html('hello');

为了做任何事情，jQuery必须运行一百行代码（我曾经通过上面的代码跟踪，看看jQuery实际上在做什么）。这显然是浪费每个人的时间。

jQuery的另一个重要成本是它将所有内容包装在一个新的jQuery对象中。如果您需要再次打开对象或使用其中一个对象方法来处理已在原始元素上公开的属性，则此开销特别浪费。

然而，jQuery的优势在于它如何处理集合。如果要求设置多个元素的属性，jQuery有一个内置的each方法允许这样的东西：

var $elements=$('h2');  //  multiple elements
$elements.html('hello');

要使用Vanilla JavaScript，需要使用以下内容：

var elements=document.querySelectorAll('h2');
elements.forEach(function(e) {
    e.innerHTML='Hello';
});

有些人觉得令人生畏。

jQuery选择器也略有不同，但现代浏览器（IE8除外）不会带来太多好处。

作为一项规则，我提醒不要在新项目中使用jQuery：

• jQuery是一个外部库，它增加了项目的开销，并增加了对第三方的依赖。
• jQuery函数非常昂贵，处理方面。
• jQuery强加了一种需要学习的方法，可能会与代码的其他方面竞争。
• jQuery在JavaScript中公开新功能的速度很慢。

如果以上都不重要，那么就按照自己的意愿行事。但是，jQuery不再像过去那样对跨平台开发同样重要，因为现代JavaScript和CSS比以前更进一步。

这没有提及jQuery的其他功能。但是，我认为他们也需要仔细研究。

Answer 12

对此仅作评论，当使用Material Design Lite时，jquery选择器由于某种原因不会返回用于Material Design的属性。

针对：

<div class="logonfield mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="myinputfield" required>
        <label class="mdl-textfield__label" for="myinputfield">Enter something..</label>
      </div>

这有效：

document.querySelector('#myinputfield').parentNode.MaterialTextfield.change();

这不是：

$('#myinputfield').parentNode.MaterialTextfield.change();