Javascript Jquery-我是否应该重复选择器（存储在变量中）？

有时我会发现自己多次重复选择器。我是否应该以某种方式将jquery对象存储到一个变量中，然后仅使用该变量？作为一个简单的例子，下面是什么

$('a.contactus').css('padding', '10px');
$('a.contactus').css('margin', '4px');
$('a.contactus').css('display', 'block');

现在我知道这不是一个很好的例子，因为可以有效地链接每个css函数。但是假设在每一个语句之间都有一个条件语句或阻止链接的东西

我可以将jquery对象存储在变量中吗？如果是的话，我什么时候应该/可以？你可以这样做

var myvar = $('a.contactus');
myvar.css('padding', '10px').css('margin', '4px').css('display', 'block');

但为了可读性，我这样做

var myvar = $('a.contactus');
myvar.css('padding', '10px')
  .css('margin', '4px')
  .css('display', 'block');

---

基本上，每次使用$（someselector）时，都会遍历dom。如果可以，您应该存储元素引用。

当多次重复使用元素引用时（并且您不能链接），将元素引用存储在变量中不是一个坏主意，使用频率越高或选择器的成本越高，将元素引用存储为变量就越好。例如，

$（this）

的性能有时微不足道，但

$（“[attr=val]”

的性能非常差，如果重复使用，应该绝对缓存。如果有疑问，请将其作为变量缓存

---

另一个提示，在该示例中，您还可以将对象传递给：

我应该以某种方式存储jquery吗 对象，然后 用那个

如果可能的话，您应该考虑性能。例如，您可以这样重新编写代码：

var $el = $('a.contactus');
$el.css('padding', '10px');
$el.css('margin', '4px');
$el.css('display', 'block');

$el.css({
  padding: '10px',
  margin:'4px',
  display: 'block'
});

您可以将其缩短，如下所示：

var $el = $('a.contactus');
$el.css('padding', '10px');
$el.css('margin', '4px');
$el.css('display', 'block');

$el.css({
  padding: '10px',
  margin:'4px',
  display: 'block'
});

---

当编写jquery插件来存储变量中的

$（this）

时，在变量中存储公共/重复选择器也很有用。

您不应该总是存储引用，除非它被多次使用，否则性能会更差。@Nick Craver:是的，我同意。应该注意的是，对于这个例子来说，这两种方法都不是一个好的解决方案（参见其他答案）……但是如果你的答案被接受，请确保你的答案至少是正确的。