Question

我可以根据理论想象出这个问题的正确答案，但我只想找到一些确认。我想知道重用jQuery选择元素的最有效方法是什么。例如：

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

VS

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

我假设第二个例子更有效，因为元素#my_div不必多次被发现。这是对的吗？

同样，首先在变量（如'obj'）中保存$（this）更有效率，然后重复使用'obj'而不是反复使用$（this）？在这种情况下，jQuery不会被强制一遍又一遍地找到一个元素，但是它被迫将它转换为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()。

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

Answer 2

如果您正在使用jQuery选择器（like $('#element')），那么是的，您应该始终存储结果。

如果您正在使用对象并将其包装在jQuery中（如$(this)），则没有必要，因为jQuery不需要再次搜索该元素。

Answer 3

我发现的一件事通常被忽略的是jQuery链是多么强大。它可能不那么引人注目，但是由于jQuery将链接的元素缓存在一个链中，你可以修改元素，进入一个更具体的子集，修改，然后重新进入一个通用的超集，而不需要太多的开销。

我期待像（原谅例子）

$('#myDiv')
    .addClass('processing')
    .find('#myInput')
    .hide('slow')
    .end()
    .removeClass('processing')
    ;

比性能更好

var $myDiv = $('#myDiv').addClass('processing');
var $myInput = $('#myDiv #myInput').hide('slow');
    $myDiv.removeClass('processing');

Answer 4

这也适用于将jQuery函数应用于事件处理程序中返回的元素。尽量避免多次使用$（...），因为这很慢。而是创建一个包含$（...）结果的变量。好的做法是用$启动变量，它提供了变量内部jQuery对象的提示。

$('a').click(function(){
  var $this = $(this);
  $this.addClass("clicked");
  $this.attr("clicked", true);
});

最有效的方法来重用jQuery选择的元素

4 个答案: