blocks|key|5274199|text|您应该编写代码以限制DOM遍历的数量。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5274200|当你像这样写东西的时候：|5274201|$('#my_div').css('background','red');
//some+other+code
$('#my_div').attr('name','Red+Div');|code-block|syntax|javascript|5274202|您正在查找#my_div两次，这效率很低。|offset|length|style|CODE|5274203|您可以通过分配选择器的结果(即var+x+=+$('.something'))并操作变量x来改进这一点，或者您可以像这样对您的方法调用进行：|5274204|$('#my_div').css('background','red').attr('name','Red+Div');|5274205|您将看到上面的代码被大量使用，因为您只找到了一次元素。css()方法将应用一个CSS样式的，并将$('#my_div')的实际结果返回给，因此您可以调用另一个方法，在本例中为attr()。|BOLD|5274206|我首选的处理选择器重用的方法是将它们存储为一个变量，并将我的东西包装在一个闭包中。|5274207|entityMap^0|0|0|0|5|7|0|F|N|18|1|0|0|R|5|1C|C|2F|6|19|N|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|12|8|@$K|13|L|14|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|15|8|@$K|16|L|17|M|N]|$K|18|L|19|M|N]]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|S|3|T|5|6|7|1B|8|@$K|1C|L|1D|M|N]|$K|1E|L|1F|M|N]|$K|1G|L|1H|M|N]|$K|1I|L|1J|M|U]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1K|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|Y|$]]

You should write your code such that you limit the number of DOM traversals.

When you write something like this:

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

You are finding <code>#my_div</code> twice, which is inefficient.

You can improve this either by assigning the result of a selector (i.e. <code>var x = $('.something')</code>) and manipulate the variable <code>x</code>, or you can chain your method calls like this:

<pre><code>$('#my_div').css('background','red').attr('name','Red Div');
</code></pre>

You'll see the above code used a lot, because you're finding the element once. The <code>css()</code> method will apply a CSS style and return the actual result of <code>$('#my_div')</code>, so you can invoke another method, in this case <code>attr()</code>.

My preferred way of handling the re-use of selectors is to store them as a variable, and wrap my stuff in a closure.

blocks|key|2154454|text|如果你正在使用jQuery选择器(like+$('#element'))，那么是的，你应该总是存储你的结果。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2154455|如果使用object并将其包装在jQuery+(如$(this))中，则不需要这样做，因为jQuery不需要再次搜索该元素。|2154456|entityMap^0|H|I|0|P|7|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

if you're using jQuery selector (<code>like $('#element')</code>), then yes, you should always store your results.

if you're using object and wrapping it in jQuery (like <code>$(this)</code>), it's not necessary, because jQuery doesn't need to search for that element again.

blocks|key|5274262|text|这也适用于将jQuery函数应用于事件处理程序中返回的元素。尽量避免应用$(...)太多次了，因为这太慢了。而是创建一个包含$(...)结果的变量。一种好的做法是以$开始变量，这会给出有关变量内部的jQuery对象的提示。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5274263|$('a').click(function(){
++var+$this+=+$(this);
++$this.addClass("clicked");
++$this.attr("clicked",+true);
});|code-block|syntax|javascript|5274264|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This also holds for applying the jQuery function to elements returned in an event handler. 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.

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

blocks|key|2154487|text|我发现有一件事通常被忽视了，那就是jQuery链是多么强大。它可能不那么明显，但是因为jQuery将包装的元素缓存在链中，所以您可以修改元素，进入更具体的子集，修改，然后返回到通用超集，而不需要太多开销。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2154488|我希望是这样的(请原谅我的例子)|2154489|$('#myDiv')
++++.addClass('processing')
++++.find('#myInput')
++++.hide('slow')
++++.end()
++++.removeClass('processing')
++++;|code-block|syntax|javascript|2154490|更好的性能甚至比|2154491|var+$myDiv+=+$('#myDiv').addClass('processing');
var+$myInput+=+$('#myDiv+#myInput').hide('slow');
++++$myDiv.removeClass('processing');|2154492|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

One thing that I find is generally overlooked is just how powerful jQuery chains are. 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 a a general superset without much overhead.

I expect something like (pardon the example)

<pre><code>$('#myDiv')
 .addClass('processing')
 .find('#myInput')
 .hide('slow')
 .end()
 .removeClass('processing')
 ;
</code></pre>

to be better performance-wise than even

<pre><code>var $myDiv = $('#myDiv').addClass('processing');
var $myInput = $('#myDiv #myInput').hide('slow');
 $myDiv.removeClass('processing');
</code></pre>

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. For example:

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

vs.

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

I assume the second example is more efficient because the element #my_div doesn't have to get found more than once. 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? 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)]. 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?

Most efficient way to re-use jQuery-selected elements

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我可以想象基于理论的正确答案，但我只是在寻找一些确认。我想知道重用jQuery选择的元素最有效的方法是什么。例如：$('#my_div').css('background','red');//some other code$('#my_div').attr('name','Red Div');与myDiv = $('#...

问重用jQuery选定元素的最有效方法
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重用jQuery选定元素的最有效方法EN