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]")
的性能非常差,如果重用它应该绝对缓存。 如果有疑问,请将其缓存为变量。
只是另一个提示,在该示例中,您还可以将对象传递给.css()
:
$('a.contactus').css({ padding: '10px', margin: '4px', display: 'block' });
我应该以某种方式将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)
存储在变量中时,将常用/重复选择器存储在变量中也很有用。