jQuery的VS document.querySelectorAll(jQuery vs docu

我听到好几次jQuery的最大的优点是它查询和操纵的DOM元素的方法：你可以使用CSS查询来创建复杂的查询，这将是很难在常规的JavaScript做。 不过，据我所知，就可以实现同样的结果document.querySelector或document.querySelectorAll ，这是在Internet Explorer 8和更高版本支持。

所以，问题是这样的：为什么“风险” jQuery的开销，如果其最大的优点可以用纯JavaScript实现？

我知道jQuery的已经不仅仅是CSS选择更多，比如跨浏览器的AJAX，漂亮的事件连接等，但它的查询部分是jQuery的实力的一个非常重要的一部分！

有什么想法吗？

Answer 1:

document.querySelectorAll() 具有跨浏览器的一些矛盾和旧的浏览器不支持 ^{此可能不会引起任何麻烦了现在} 。 它有一个非常直观的作用域机制和其他一些不那么好的特点 。 还用JavaScript你有困难时，其结果集这些查询，这在很多情况下，你可能想要做的工作。 jQuery提供的功能对他们的工作，如： filter() find() children() parent() map() not()和几个。 且不说与伪类选择工作jQuery的能力。

不过，我不会考虑这些事情jQuery的强大功能，但其他的东西，如“工作”对DOM的跨浏览器兼容的方式或者Ajax界面（事件，样式，动画和操纵）。

如果你只是想选择引擎从jQuery的你可以使用一个jQuery的本身使用： 嘶嘶声 ，你有jQuerys选择器引擎的不讨厌的开销功率的方式。

编辑：只是为了记录在案，我是一个巨大的香草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写。 你也必须要考虑，这将危及跨浏览器问题严重的速度优势的本地代码（从可靠性之外）。

Answer 2:

如果你正在优化您的IE8或更新的页面，你真的应该考虑是否需要jQuery的或没有。 现代浏览器有很多资产，其本身jQuery提供。

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

我从转化jQuery来本地JavaScript一个div-tagcloud（IE8 +兼容），结果是令人印象深刻。 4次，只是一个小的开销更快。

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

您可能不需要jQuery提供了一个非常好的概述，本地方法更换任何浏览器版本。

http://youmightnotneedjquery.com/

---

附录：进一步加快的比较方法是如何本地竞争将jQuery

• 数组：$ .inArray VS Array.indexOf：jQuery的慢24％

• DOM：慢jQuery的97％：$ .empty VS Node.innerHtml

• DOM：$。对VS Node.addEventListener：jQuery的慢90％

• DOM：$ .find VS Node.queryselectorall：jQuery的慢90％

• 数组：$ .grep VS Array.filter：慢本土70％

• DOM：$ .show /隐藏VS显示无：jQuery的慢85％

• AJAX：$阿贾克斯VS的XMLHttpRequest：jQuery的慢89％

• 身高：$ .outerHeight VS的offsetHeight：jQuery的慢87％

• ATTR：$ .attr VS的setAttribute：jQuery的慢86％

Answer 3:

要理解为什么jQuery是如此受欢迎，它明白的地方，我们是从未来是很重要的！

大约十年前，顶部的浏览器IE6人，网景8和Firefox 1.5。 早在那些日子里，有小跨浏览器的方式选择从DOM中除了一个元素Document.getElementById()

因此，jQuery的时候被释放早在2006年 ，这是非常具有革命性。 当时，jQuery的设置如何轻松选择/更改HTML元素和触发事件的标准，因为它的灵活性和浏览器的支持是前所未有的。

现在，十多年过去了，很多的功能，取得的jQuery如此受欢迎，已经成为包含在JavaScript标准：

• 相反jQuery的的$()你现在可以现在使用Document.querySelectorAll()
• 相反jQuery的的$el.on()你现在可以使用EventTarget.addEventListener()
• 相反jQuery的的$el.toggleClass()你现在可以使用Element.classList.toggle()
• ...

这些不是一般可用回在2005年的今天，他们的事实显然回避了为什么我们应该使用jQuery在所有的问题。 事实上，人们越来越想知道我们是否应该在所有使用jQuery 。

所以，如果你认为你理解JavaScript不够好，没有的jQuery做的，请不要！ 不要觉得被迫使用jQuery，只是因为这么多的人正在这样做！

Answer 4:

jQuery的灒选择器引擎可以使用querySelectorAll如果它是可用的。 它还平抑不一致浏览器之间实现均匀的效果。 如果你不想使用所有的jQuery，你可以只使用灒分开。 这是一个非常基本的车轮去创造。

下面是从源头上，展示了那种事的jQuery（W /灒）挑选出一些对你的樱桃采摘：

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;
    }

如果后卫失败它使用它的滋滋声的版本不具有增强querySelectorAll 。 再往下有在IE，Opera和黑莓浏览器不一致特定手柄。

  // 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的（和灒，特别是），适用于旧的浏览器，如IE7-8不支持CSS2.1-3选择。

此外，灒（其背后是jQuery的选择器引擎）为您提供了更多先进的仪器选择的，比如:selected伪类，先进的:not()选择，一个更复杂的语法，就像在$("> .children")等。

而它确实是跨浏览器，完美，提供所有jQuery可提供（插件和API）。

是的，如果你认为你可以依靠简单的类和ID选择，jQuery是太适合你，你会付出夸张放。 但是，如果你不这样做，并希望采取一切jQuery的善良的优势，然后使用它。

Answer 6:

这里有一个比较，如果我想申请相同的属性，例如隐藏类“我的类”的所有元素。 这是一个原因使用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开发的长前querySelector/querySelectorAll成为所有主要的浏览器。

首次发布的jQuery是在2006年 。 事实上，即使jQuery的是没有哪个执行CSS选择第一个 。

IE是最后一个浏览器来实现querySelector/querySelectorAll 。 第8版是在2009年发布 。

所以，现在，DOM元素选择是不是jQuery的最强点了。 但是，它仍然有很多好吃的东西了它的袖子，像快捷键来改变元素的CSS和HTML内容，动画，事件绑定，AJAX。

Answer 9:

作为官方网站说：“jQuery的：写少，做得更多，JavaScript库”

尝试没有任何库翻译下面的jQuery代码

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

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

与香草的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:

只是这样的评论，用料设计精简版时，jQuery选择不适合的材料设计出于某种原因返回属性。

对于：

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

文章来源: jQuery vs document.querySelectorAll