在用户脚本中，使用 querySelector() 与 jQuery 的 $() 有什么优势吗？答案

【问题标题】：In a userscript, is there any advantage to using querySelector() vs jQuery's $()?在用户脚本中，使用 querySelector() 与 jQuery 的 $() 有什么优势吗？
【发布时间】：2013-01-24 20:41:14
【问题描述】：

在用户脚本中使用 querySelector() 与 jQuery 的 $() 有什么优势吗？我希望该脚本能够在所有支持用户脚本的主流浏览器中运行，因此我对跨浏览器兼容性特别感兴趣。

我开始对此感到疑惑，因为我注意到 honestbleeps' 优秀的 Reddit Enhancement Suite 包含 jQuery 作为依赖项，但大多坚持使用 querySelector() 来选择元素和其他用于 DOM 操作的基本 JavaScript 方法。

这只是口味问题，还是有理由将 jQuery 的使用降到最低？

【问题讨论】：

我不会对 Reddit Enhancement Suite 中的组合进行过多解读。在任何大型或不断发展的项目中，您都会发现（大部分）有效的旧式代码以及更新或更好的实践。（虽然更新不一定更好。）......很少有开发人员或团队会重构旧的工作代码以使一切保持一致。

标签： jquery-selectors cross-browser css-selectors greasemonkey userscripts

【解决方案1】：

使用querySelector() 或querySelectorAll() 的唯一原因是您不使用jQuery。与高级 CSS 选择器相比，jQuery 选择器更强大，并且更有可能在浏览器中始终如一地执行。

也就是说，包含 jQuery 会使简单脚本不必要地复杂化。它需要在大多数浏览器上进行脚本注入——这会破坏沙盒、产生潜在的冲突并使您的脚本依赖于第三方服务器。
Here is a cross-browser way to include jQuery that minimizes conflicts. And, if the browser supports local jQuery copies, it doesn't require a third-party server to always be up/fast.

如果脚本很简单并且您可以轻松避免使用 jQuery，请使用querySelector()。您的脚本可以在所有支持脚本的浏览器上运行，99% 以上的时间。

如果脚本仍然加载 jQuery，请使用 jQuery 选择器以获得最大的功能和一致性。

请注意，除了最基本的 DOM 操作之外，jQuery 通常是物有所值的。对于 Firefox+Greasemonkey 或 Chrome+Tampermonkey，如果你 @require it，使用 jQuery 几乎没有缺点。

【讨论】：

另外，只要你提供了一个有效的 CSS 选择器，jQuery 就会默认使用 querySelectorAll()。

【解决方案2】：

querySelectoris not supported in some browser versions，而 jQuery 的 $() 是。

【讨论】：

不适用于greasemonkey 和userscripts 问题。所有最新版本的脚本浏览器都支持querySelector()。（至少在标准供应商中）