jQuery vs document.querySelectorAll

javascript jquery html css css-selectors

2022-08-30 01:58:47

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

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

我知道jQuery不仅仅是CSS选择器，例如跨浏览器AJAX，漂亮的事件附加等。但它的查询部分是jQuery实力的很大一部分！

有什么想法吗？

答案 1

document.querySelectorAll() ~~在浏览器之间有几个不一致之处，并且在较旧的浏览器中不受支持~~^{，现在这可能不再造成任何麻烦}。它有一个非常不直观的范围机制和其他一些不太好的功能。同样使用javascript，你更难处理这些查询的结果集，在许多情况下，你可能想要这样做。jQuery提供了处理它们的函数，如：，，，，等等。更不用说jQuery使用伪类选择器的能力了。filter()find()children()parent()map()not()

但是，我不认为这些东西是jQuery最强大的功能，而是其他的东西，比如以跨浏览器兼容的方式或ajax界面“工作”dom（事件，样式，动画和操作）。

如果你只想要来自jQuery的选择器引擎，你可以使用jQuery本身正在使用的一个：Sizzle这样你就有jQuerys Selector引擎的强大功能，而没有令人讨厌的开销。

编辑：只是为了记录，我是一个巨大的香草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）通过一些（可能是嵌套或递归）循环遍历子节点数组，并检查类（classlist 并非在所有浏览器中都可用！

//.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 编写的代码行数的两倍。此外，您还必须考虑跨浏览器问题，这将损害本机代码的严重速度优势（除了可靠性之外）。

答案 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竞争