javascript - 重用 jQuery 选择元素的最有效方式

Question

我可以根据理论想象对此的正确答案，但我只是在寻找一些确认。我想知道重用 jQuery 选定元素的最有效方法是什么。例如:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

对比

myDiv = $('#my_div');
myDiv.css('background','red');
//some other code
myDiv.attr('name','Red Div');

我假设第二个示例更有效，因为不必多次找到元素#my_div。对吗？

同样，首先将 $(this) 保存在一个变量中，例如 'obj'，然后重用 'obj' 比一遍又一遍地使用 $(this) 更有效吗？在这种情况下，jQuery 并没有被迫一遍又一遍地寻找元素，而是被迫将 this 转换为 jQuery 对象 [$(this)]。因此，作为一般经验法则，如果一个 jQuery 对象将被多次使用，它是否应该始终存储在一个变量中？

Answer 1

您应该编写代码以限制 DOM 遍历的次数。

当你这样写的时候:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

您找到 #my_div 两次，效率很低。

您可以通过分配选择器的结果(即 var x = $('.something'))和操作变量 x 来改善这一点，或者您可以像这样链接你的方法调用:

$('#my_div').css('background','red').attr('name','Red Div');

您会看到上面的代码使用了很多次，因为您只查找了一次元素。 css() 方法将应用 CSS 样式并返回 $('#my_div') 的实际结果，因此您可以调用另一个方法，在本例中为 attr()。

处理选择器重用的首选方法是将它们存储为变量，并将我的东西包装在闭包中。