将 jQuery 元素保存到 var 是否会导致在使用时重新查找该元素？

Question

所以，我有一些 JavaScript/jQuery，看起来像这样：

var $foo = $('#bar');
$foo.hide();

我一直在假设 jQuery 对给定选择器进行操作，并将生成的 DOM 元素保存到

var $foo

...据我所知，这是正确的。

但是，调用

$foo.hide()

是否会导致 jQuery 重新寻找

#bar

元素？

Answer 1

不，不是，调用 $(elem) 时会进行引用。这就是为什么使用

var

来存储对元素的引用。存储对

var

的引用始终是最佳实践，因此下次使用代码时，将使用旧引用，并且无需再次搜索 DOM。

//reference
var a = $('#id');

//use
a.hide();

//same reference, use again
a.show();

Answer 2

根据我的理解，将 jQuery 对象设置为 var，缓存该对象，因此每次需要使用它来执行某些操作时，它不会重建 jQuery 对象。

一些关于此的文章，这是我在谷歌上找到的第一篇文章

我认为

$('#bar')

直接引用 document.getElementById('bar') 所以，没有太多构建，因此相当快，但是当你有一个对象数组时它会更快。

$('.class tagType')

Answer 3

@Davor Zubak 的回答大部分是正确的。然而，与所述相反，存储元素引用并不总是被认为是最佳实践。

只要您知道元素引用将存在，就存储它们，并且您将重用它们，这才是最佳实践。元素查找（尤其是通过 id 进行查找）的成本并不是特别高，除非相乘。

DOM 内容发生变化，如果您存储对已删除项目的元素引用，然后用类似的 content 替换（即相同的“查询”现在会找到 this 元素），那么您正在存储并使用引用到不再存在并阻止垃圾收集的元素。

通常最好的做法是在重用上下文中的元素（有时甚至只能在该进程滴答内）时存储元素引用，并在下一次调用时重新获取