jQuery - 每次都可以使用$（'＃ElementId'）吗？

Question

我刚刚学会了如何在jQuery中执行'document.getElementById'对应（并且它更强大）。我的问题是，每次或每行代码都可以使用它吗？以下是我现在使用它的方法：

$('#MyParentElement').html('<tr id="' + $('#MyElement').val() + '"><td>' + $('#MyElement').val() + '</td></tr>';

如果我做一些像使用变量来引用对象的东西，那不是更好吗？

var x = $('#MyElement');
$('#MyParentElement').html('<tr id="' + x.text() + '"><td>' + x.text() + '</td></tr>';

请注意，我更关心的是性能，而不是代码的清洁度。

Answer 1

DOM选择很昂贵。缓存它。

var x = $('#MyElement');

---

Here's a jsPerf test。在Mac OS X上的Chrome 13中，变量引用速度提高了1000多倍。

这不仅是因为DOM选择当然，还因为构造了jQuery对象。

Answer 2

对于性能和编码风格，是的会更好。

http://jquery-howto.blogspot.com/2008/12/caching-in-jquery.html

jQuery / javascript caching elements for efficiency?

Answer 3

考虑到第二个代码仅为x查询DOM一次，是的，存储jQuery对象是一个更好的主意。

Answer 4

为什么不呢？

var x = $('#MyElement').text();
$('#MyParentElement').html('<tr id="' + x + '"><td>' + x + '</td></tr>';

Answer 5

如果我错了，有人会纠正我，但我的理解是，如果您使用第二个选项（即var x = $（'＃myElement'）），它将无法动态更新。如果#myElement发生了变化，就像元素有时那样，你仍然会引用将它的值赋给X时的任何内容。

如果你不想改变#myElement，那么继续使用var x选项。正如其他人所说，它更快一点。

Answer 6

在变量中存储$（'＃MyParentElement'）会更快，但是由于按元素ID选择的速度很快，因此要小一些。虽然如果构建一个大的JS应用程序，那么它可以加起来。

Answer 7

和每次调用document.getElementById一样好。

从技术上讲，最好使用第二个选项，并将结果存储到变量中，如果您要重复访问它。但实际上，除非你有数百个对同一元素的引用，否则差异对于用户来说并不明显。