javascript - jQuery 与 document.querySelectorAll

Question

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

所以问题是:如果 jQuery 最强大的 Assets 可以用纯 JavaScript 实现，为什么还要“冒险”承担 jQuery 的开销？

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

有什么想法吗？

Answer 1

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

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

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

编辑: 只是为了记录，我是一个巨大的 Vanilla 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 的跨浏览器问题。 (除了可靠性之外) native 代码。