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

我可以根据理论想象出对此的正确答案，但我只想找到一些确认。 我想知道重用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不会被强制一遍又一遍地找到一个元素，但是它被迫将它转换为jQuery对象[$（this）]。 因此，作为一般的经验法则，如果jQuery对象总是被存储在变量中，如果它将被多次使用吗？

Answer 1

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

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

Answer 2

您应该编写代码，以便限制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 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); });