jQuery 选择器和变量答案

【问题标题】：jQuery selectors and variablesjQuery 选择器和变量
【发布时间】：2010-09-13 23:09:28
【问题描述】：

写作成绩有什么明显优势

var e = $("#el");

e.css(...);
e.attr(...);
....
e.click(...);

而不是

$("#el").css(...);
$("#el").attr(...);
....
$("#el").click(...);

?

【问题讨论】：

标签： jquery jquery-selectors

【解决方案1】：

是的，在第一个版本中，您不会每次都再次找到该元素，这总是有一些成本。还有第三种选择，链接：

$("#el").css(...)
        .attr(...)
        .click(...);

这是您将看到的更常见的方法，但样式因开发人员而异……该库在设计时考虑到了链接。在您的 ID 选择器的特定情况下，document.getElementById() 的成本非常极小，与任何其他选择器相比，它加起来的速度要快得多。

【讨论】：

我认为使用类选择器而不是 id 时成本会更高？在对它执行任何操作之前，我几乎总是将 jQuery 对象存储在一个变量中。
@Marko - 是的，除了$(document)、$(document.body) 之外，几乎所有其他选择器都会比 ID 选择器贵方式。我更喜欢链接（当它可读时），但就像答案所说......它因开发人员（或团队）而异，这完全可以，只要它适用于您和您的团队，就可以使用它:)

【解决方案2】：

是的。此外，您可以获得更好的可读性（特别是如果您使用它们的名称命名事物）：

var $commentForm = $('#comment-form');

【讨论】：

【解决方案3】：

如果在这种情况下，如果您所说的明显优势对用户来说是显而易见的......那么可能不是，因为现在没有人在抱怨。另一方面，如果您的意思是在代码的生命周期（以及必须维护它的人的生命周期[包括您自己]）中具有明显的优势，那么第一个具有相当大的优势。首先，它运行起来更快，因为等效的非 jQuery 代码是：
（在 Windows XP 上使用 Chrome 7.0.517.5 速度提高了 25%。请参阅 jsperf.com 上的 this test I created）

var e = document.getElementById("el");
// do stuff with e

对

document.getElementById("el").//manage the css
document.getElementById("el").//add, alter, or access attributes
document.getElementById("el").onclick // do something with this event.

其次，正如 glebm 所指出的，它更具可读性。如果您使用描述性变量名称 - 这可以让以后更快地理解和编辑。

【讨论】：

【解决方案4】：

是的，第一个会有更好的性能，因为 jQuery 只需要解析选择器并创建一次节点集。当然，差异可能并不明显。

【讨论】：

【解决方案5】：

在性能方面，还不足以说明问题。在可读性方面？非常明显的优势

【讨论】：

如果你不介意我问...你为什么要投反对票？您可以在哪里对性能差异进行基准测试？足以证明你说“真的是 d2burke 吗？那完全错了……我要给你投反对票”？