Jquery - 我不应该重复选择器（存储在变量中）吗？

Question

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

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

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

我可以在变量中存储jquery对象吗？ 如果是这样，我什么时候可以？

Answer 1

当重复使用它（并且你不能链）将它存储在一个变量中并不是一个坏主意，它使用的频率越高或选择器越昂贵，将它作为变量存储就越好。 例如， $(this)几次的性能是微不足道的，但$("[attr=val]")的性能非常差，如果重复使用，应该绝对缓存。 如果有疑问，请将其缓存为变量。

---

只是另一个提示，在该示例中，您还可以将对象传递给.css() ：

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

Answer 2

我应该以某种方式将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'
});

在编写jquery插件以将$(this)存储在变量中时，将常用/重复选择器存储在变量中也很有用。

Answer 3

你可以这样做

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。 如果可以，您应该存储元素引用。