[英]Most efficient way to re-use jQuery-selected elements
I can imagine the correct answer to this based on theory, but I'm just looking for some confirmation. 我可以根据理论想象出对此的正确答案,但我只想找到一些确认。 I'm wondering what the most efficient way to re-use a jQuery-selected element is. 我想知道重用jQuery选择元素的最有效方法是什么。 For example: 例如:
$('#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');
I assume the second example is more efficient because the element #my_div doesn't have to get found more than once. 我假设第二个例子更有效,因为元素#my_div不必多次被发现。 Is that correct? 那是对的吗?
Similarly, is it more efficient to first save $(this) in a varaible, such as 'obj', and then reuse 'obj' rather than using $(this) over and over? 同样,首先将$(this)保存在变量(例如'obj')中,然后重复使用'obj'而不是反复使用$(this)是否更有效? In this case, jQuery isn't being forced to find an element over and over again, but it IS being forced to convert this to a jQuery object [$(this)]. 在这种情况下,jQuery不会被强制一遍又一遍地找到一个元素,但是它被迫将它转换为jQuery对象[$(this)]。 So as a general rule of thumb, should a jQuery object ALWAYS be stored in a variable if it will be used more than once? 因此,作为一般的经验法则,如果jQuery对象总是被存储在变量中,如果它将被多次使用,那么它应该是什么?
You should write your code such that you limit the number of DOM traversals. 您应该编写代码,以便限制DOM遍历的数量。
When you write something like this: 当你写这样的东西:
$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');
You are finding #my_div
twice, which is inefficient. 你发现#my_div
两次#my_div
,效率很低。
You can improve this either by assigning the result of a selector (ie var x = $('.something')
) and manipulate the variable x
, or you can chain your method calls like this: 您可以通过分配选择器的结果(即var x = $('.something')
)并操纵变量x
来改进这一点,或者您可以链接方法调用,如下所示:
$('#my_div').css('background','red').attr('name','Red Div');
You'll see the above code used a lot, because you're finding the element once. 你会看到上面的代码使用了很多,因为你找到了一次元素。 The css()
method will apply a CSS style and return the actual result of $('#my_div')
, so you can invoke another method, in this case attr()
. css()
方法将应用CSS样式并返回 $('#my_div')
的实际结果,因此您可以调用另一个方法,在本例中为attr()
。
My preferred way of handling the re-use of selectors is to store them as a variable, and wrap my stuff in a closure. 处理选择器重用的首选方法是将它们存储为变量,并将我的东西包装在一个闭包中。
if you're using jQuery selector ( like $('#element')
), then yes, you should always store your results. 如果你正在使用jQuery选择器( like $('#element')
),那么是的,你应该总是存储你的结果。
if you're using object and wrapping it in jQuery (like $(this)
), it's not necessary, because jQuery doesn't need to search for that element again. 如果您正在使用对象并将其包装在jQuery中(如$(this)
),则没有必要,因为jQuery不需要再次搜索该元素。
One thing that I find is generally overlooked is just how powerful jQuery chains are. 我发现的一件事通常被忽略的是jQuery链是多么强大。 It may not be so noticeable, but since jQuery caches your wrapped elements within a chain, you can modify elements, go into a more specific subset, modify, then go back up into aa general superset without much overhead. 它可能不那么引人注目,但是由于jQuery将链接的元素缓存在一个链中,你可以修改元素,进入一个更具体的子集,修改,然后重新进入一般的超集,而不需要太多开销。
I expect something like (pardon the example) 我期待类似的东西(请原谅这个例子)
$('#myDiv')
.addClass('processing')
.find('#myInput')
.hide('slow')
.end()
.removeClass('processing')
;
to be better performance-wise than even 比平等更好的表现
var $myDiv = $('#myDiv').addClass('processing');
var $myInput = $('#myDiv #myInput').hide('slow');
$myDiv.removeClass('processing');
This also holds for applying the jQuery function to elements returned in an event handler. 这也适用于将jQuery函数应用于事件处理程序中返回的元素。 Try to avoid applying $(...) too many times, because this is slow. 尽量避免多次使用$(...),因为这很慢。 Instead create a variable that contains the result of $(...). 而是创建一个包含$(...)结果的变量。 Good practice is to start the variable with a $, which gives a hint about the jQuery object inside the variable. 好的做法是用$启动变量,它提供了变量内部jQuery对象的提示。
$('a').click(function(){
var $this = $(this);
$this.addClass("clicked");
$this.attr("clicked", true);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.