最有效的方法来重用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对象总是被存储在变量中,如果它将被多次使用吗?

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

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

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

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

我发现的一件事通常被忽略的是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'); 

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

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