blocks|key|1486303|text|没有意识到性能影响，过度使用选择器，而不是将它们赋给局部变量。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486304|$('#button').click(function()+{
++++$('#label').method();
++++$('#label').method2();
++++$('#label').css('background-color',+'red');
});|code-block|syntax|javascript|1486305|而不是：|1486306|$('#button').click(function()+{
++++var+$label+=+$('#label');
++++$label.method();
++++$label.method2();
++++$label.css('background-color',+'red');
});|1486307|或even+better+with+chaining:-|offset|length|1486308|$('#button').click(function()+{
++++$("#label").method().method2().css("background-color",+"red");+
});|1486309|当我意识到调用堆栈是如何工作的时，我发现this是一个启发性的时刻。|1486310|编辑:将建议合并到评论中。|1486311|entityMap|0|LINK|mutability|MUTABLE|url|http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip10|1|http://www.youtube.com/watch?v=mHtdZgou0qU^0|0|0|0|0|1|P|0|0|0|K|4|1|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|16|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|18|8|@]|9|@$M|19|N|1A|1|1B]]|A|$]]|$1|O|3|P|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@$M|1E|N|1F|1|1G]]|A|$]]|$1|S|3|T|5|6|7|1H|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]|12|$5|X|Y|Z|A|$10|13]]]]

Being unaware of the performance hit and overusing selectors instead of assigning them to local variables. For example:-

<pre><code>$('#button').click(function() {
 $('#label').method();
 $('#label').method2();
 $('#label').css('background-color', 'red');
});
</code></pre>

Rather than:-

<pre><code>$('#button').click(function() {
 var $label = $('#label');
 $label.method();
 $label.method2();
 $label.css('background-color', 'red');
});
</code></pre>

Or <a href="http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx#tip10" rel="noreferrer">even better with chaining</a>:-

<pre><code>$('#button').click(function() {
 $("#label").method().method2().css("background-color", "red"); 
});
</code></pre>

I found <a href="http://www.youtube.com/watch?v=mHtdZgou0qU" rel="noreferrer">this</a> the enlightening moment when I realized how the call stacks work.

Edit: incorporated suggestions in comments.

blocks|key|1486537|text|了解如何使用上下文。通常，jQuery选择器将搜索整个文档：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486538|//+This+will+search+whole+doc+for+elements+with+class+myClass
$('.myClass');|code-block|syntax|javascript|1486539|但你可以通过在上下文中搜索来加快速度：|1486540|var+ct+=+$('#myContainer');
//+This+will+search+for+elements+with+class+myClass+within+the+myContainer+child+elements
$('.myClass',+ct);|1486541|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Understand how to use context. Normally, a jQuery selector will search the whole doc:

<pre><code>// This will search whole doc for elements with class myClass
$('.myClass');
</code></pre>

But you can speed things up by searching within a context:

<pre><code>var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);
</code></pre>

blocks|key|1486230|text|尝试拆分匿名函数，以便可以重用它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486231|//Avoid
$('#div').click(+function(){
+++//do+something
});

//Do+do
function+divClickFn+(){
+++//do+something++++
}

$('#div').click(+divClickFn+);|code-block|syntax|javascript|1486232|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|$]]

Try to split out anonymous functions so you can reuse them.

<pre><code>//Avoid
$('#div').click( function(){
 //do something
});

//Do do
function divClickFn (){
 //do something 
}

$('#div').click( divClickFn );
</code></pre>

blocks|key|1271641|text|在对发往服务器的Ajax请求使用$.ajax函数时，应避免使用complete事件来处理响应数据。无论请求是否成功，它都会触发。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1271642|使用success而不是complete。|1271643|请参阅文档中的Ajax+Events。|1271644|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Ajax_%2528programming%2529|1|http://docs.jquery.com/Ajax_Events^0|G|6|V|8|8|4|0|0|2|7|C|8|0|7|B|1|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|J|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

While using <code>$.ajax</code> function for <a href="http://en.wikipedia.org/wiki/Ajax_%28programming%29" rel="noreferrer">Ajax</a> requests to server, you should avoid using the <code>complete</code> event to process response data. It will fire whether the request was successful or not. 

Rather than <code>complete</code>, use <code>success</code>.

See <a href="http://docs.jquery.com/Ajax_Events" rel="noreferrer">Ajax Events</a> in the docs.

blocks|key|1486176|text|如果你多次绑定()同一个事件，它也会触发多次。为了安全起见，我通常都去unbind('click').bind('click')。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1486177|entityMap^0|Z|T|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

If you bind() the same event multiple times it will fire multiple times . I usually always go <code>unbind('click').bind('click')</code> just to be safe

blocks|key|1272087|text|“链接”动画-带有回调的事件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1272088|假设您想要使一个段落在单击时消失。之后，您还希望从DOM中删除该元素。您可能认为您可以简单地链接这些方法：|1272089|$("p").click(function(e)+{
++$(this).fadeOut("slow").remove();
});|code-block|syntax|javascript|1272090|在本例中，.remove()将在.fadeOut()完成之前被调用，销毁渐变效果，并使元素立即消失。相反，当您希望仅在完成前一个命令后才触发命令时，请使用回调的：|1272091|$("p").click(function(e){
++$(this).fadeOut("slow",+function(){
++++$(this).remove();
++});
});|1272092|.fadeOut()的第二个参数是一个匿名函数，它将在.fadeOut()动画完成后运行。这会导致逐渐淡入淡出，并随后移除该元素。|1272093|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<h3>&quot;Chaining&quot; Animation-events with Callbacks.</h3>
Suppose you wanted to animate a paragraph vanishing upon clicking it. You also wanted to remove the element from the DOM afterwards. You may think you can simply chain the methods:
<pre><code>$(&quot;p&quot;).click(function(e) {
 $(this).fadeOut(&quot;slow&quot;).remove();
});
</code></pre>
In this example, .remove() will be called before .fadeOut() has completed, destroying your gradual-fading effect, and simply making the element vanish instantly. Instead, when you want to fire a command only upon finishing the previous, use the callback's:
<pre><code>$(&quot;p&quot;).click(function(e){
 $(this).fadeOut(&quot;slow&quot;, function(){
 $(this).remove();
 });
});
</code></pre>
The second parameter of .fadeOut() is an anonymous function that will run once the .fadeOut() animation has completed. This makes for a gradual fading, and a subsequent removal of the element.

blocks|key|1271787|text|在正确的上下文中使用此标识符的误解。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1271788|$(+"#first_element").click(+function(+event)
{
+++$(this).method(+);+//referring+to+first_element
+++$(".listOfElements").each(+function()
+++{
++++++$(this).someMethod(+);+//+here+'this'+is+not+referring+first_element+anymore.
+++})
});|code-block|syntax|javascript|1271789|下面是你如何解决这个问题的一个例子：|1271790|$(+"#first_element").click(+function(+event)
{
+++$(this).method(+);+//referring+to+first_element
+++var+$that+=+this;
+++$(".listOfElements").each(+function()
+++{
++++++$that.someMethod(+);+//+here+'that'+is+referring+to+first_element+still.
+++})
});|1271791|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Misunderstanding of using this identifier in the right context. For instance:

<pre><code>$( "#first_element").click( function( event)
{
 $(this).method( ); //referring to first_element
 $(".listOfElements").each( function()
 {
 $(this).someMethod( ); // here 'this' is not referring first_element anymore.
 })
});
</code></pre>

And here one of the samples how you can solve it:

<pre><code>$( "#first_element").click( function( event)
{
 $(this).method( ); //referring to first_element
 var $that = this;
 $(".listOfElements").each( function()
 {
 $that.someMethod( ); // here 'that' is referring to first_element still.
 })
});
</code></pre>

blocks|key|1272196|text|避免多次搜索整个DOM。这确实会延迟你的脚本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1272197|不好：|1272198|$(".aclass").this();
$(".aclass").that();
...|code-block|syntax|javascript|1272199|好：|1272200|$(".aclass").this().that();|1272201|1272202|$("#form+.text").this();
$("#form+.int").that();
$("#form+.choice").method();|1272203|1272204|$("#form")
++++.find(".text").this().end()
++++.find(".int").that().end()
++++.find(".choice").method();|1272205|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|N|3|O|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|P|3|J|5|6|7|11|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|T|$]]

Avoid searching through the entire DOM several times. This is something that really can delay your script. 

Bad:

<pre><code>$(".aclass").this();
$(".aclass").that();
...
</code></pre>

Good:

<pre><code>$(".aclass").this().that();
</code></pre>

Bad:

<pre><code>$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();
</code></pre>

Good:

<pre><code>$("#form")
 .find(".text").this().end()
 .find(".int").that().end()
 .find(".choice").method();
</code></pre>

blocks|key|1486903|text|始终将$(this)缓存到有意义的变量，尤其是在.each()|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486904|像这样|1486905|$(selector).each(function+()+{
++++var+eachOf_X_loop+=+$(this);+
})|code-block|syntax|javascript|1486906|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Always cache $(this) to a meaningful variable
especially in a .each()

Like this

<pre><code>$(selector).each(function () {
 var eachOf_X_loop = $(this); 
})
</code></pre>

blocks|key|1486967|text|类似于Repo+Man所说的，但不完全是。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1486968|在开发ASP.NET+winforms时，我经常这样做|1486969|$('<%25=+Label1.ClientID+%25>');|code-block|syntax|javascript|1486970|忘记了#号。正确的形式是|1486971|$('#<%25=+Label1.ClientID+%25>');|1486972|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|$]]

Similar to what Repo Man said, but not quite.

When developing ASP.NET winforms, I often do

<pre><code>$('&lt;%= Label1.ClientID %&gt;');
</code></pre>

forgetting the # sign. The correct form is

<pre><code>$('#&lt;%= Label1.ClientID %&gt;');
</code></pre>

blocks|key|1271701|text|避免多次创建相同的jQuery对象|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1271702|//Avoid
function+someFunc(){
+++$(this).fadeIn();
+++$(this).fadeIn();
}

//Cache+the+obj
function+someFunc(){
+++var+$this+=+$(this).fadeIn();
+++$this.fadeIn();
}|code-block|syntax|javascript|1271703|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|$]]

Avoid multiple creation of the same jQuery objects

<pre><code>//Avoid
function someFunc(){
 $(this).fadeIn();
 $(this).fadeIn();
}

//Cache the obj
function someFunc(){
 var $this = $(this).fadeIn();
 $this.fadeIn();
}
</code></pre>

blocks|key|1487035|text|我对JavaScript也是这样说的，但是jQuery，JavaScript永远不应该取代CSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1487036|另外，要确保这个站点对关闭了JavaScript的人是可用的(今天不像以前那么重要了，但是有一个完全可用的站点总是很好的)。|1487037|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I say this for JavaScript as well, but jQuery, JavaScript should NEVER replace CSS.

Also, make sure the site is usable for someone with JavaScript turned off (not as relevant today as back in the day, but always nice to have a fully usable site).

blocks|key|1272565|text|进行了太多的DOM操作。虽然.html()、.append()、.prepend()等方法很棒，但由于浏览器呈现和重新呈现页面的方式，太频繁地使用它们会导致速度变慢。通常，最好将html创建为字符串，并将其包含到DOM中一次，而不是多次更改DOM。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1272566|而不是：|1272567|var+$parent+=+$('#parent');
var+iterations+=+10;

for+(var+i+=+0;+i+<+iterations;+i%2B%2B){
++++var+$div+=+$('<div+class="foo-'+%2B+i+%2B+'"+/>');
++++$parent.append($div);
}|code-block|syntax|javascript|1272568|试试这个：|1272569|var+$parent+=+$('#parent');
var+iterations+=+10;
var+html+=+'';

for+(var+i+=+0;+i+<+iterations;+i%2B%2B){
++++html+%2B=+'<div+class="foo-'+%2B+i+%2B+'"></div>';
}

$parent.append(html);|1272570|或者甚至是这样($wrapper是一个新创建的元素，还没有注入到DOM中。将节点附加到此包装器div不会导致速度减慢，最后我们将$wrapper附加到$parent，只使用一个DOM操作)：|1272571|var+$parent+=+$('#parent');
var+$wrapper+=+$('<div+class="wrapper"+/>');
var+iterations+=+10;

for+(var+i+=+0;+i+<+iterations;+i%2B%2B){
++++var+$div+=+$('<div+class="foo-'+%2B+i+%2B+'"+/>');
++++$wrapper.append($div);
}

$parent.append($wrapper);|1272572|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Making too many DOM manipulations. While the .html(), .append(), .prepend(), etc. methods are great, due to the way browsers render and re-render pages, using them too often will cause slowdowns. It's often better to create the html as a string, and to include it into the DOM once, rather than changing the DOM multiple times.

Instead of:

<pre><code>var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i &lt; iterations; i++){
 var $div = $('&lt;div class="foo-' + i + '" /&gt;');
 $parent.append($div);
}
</code></pre>

Try this:

<pre><code>var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i &lt; iterations; i++){
 html += '&lt;div class="foo-' + i + '"&gt;&lt;/div&gt;';
}

$parent.append(html);
</code></pre>

Or even this ($wrapper is a newly created element that hasn't been injected to the DOM yet. Appending nodes to this wrapper div does not cause slowdowns, and at the end we append $wrapper to $parent, using only one DOM manipulation):

<pre><code>var $parent = $('#parent');
var $wrapper = $('&lt;div class="wrapper" /&gt;');
var iterations = 10;

for (var i = 0; i &lt; iterations; i++){
 var $div = $('&lt;div class="foo-' + i + '" /&gt;');
 $wrapper.append($div);
}

$parent.append($wrapper);
</code></pre>

blocks|key|1271850|text|在ASP.NET项目中使用ClientID获取控件的“真实”id。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1271851|jQuery('#<%25=myLabel.ClientID%25>');|code-block|syntax|javascript|1271852|此外，如果在SharePoint中使用jQuery，则必须调用jQuery.noConflict()。|1271853|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Using ClientID to get the "real" id of the control in ASP.NET projects.

<pre><code>jQuery('#&lt;%=myLabel.ClientID%&gt;');
</code></pre>

Also, if you are using jQuery inside SharePoint you must call jQuery.noConflict().

blocks|key|1272129|text|将ID而不是jQuery对象传递给函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1272130|myFunc+=+function(id)+{+//+wrong!
++++var+selector+=+$("#"+%2B+id);
++++selector.doStuff();
}

myFunc("someId");|code-block|syntax|javascript|1272131|传递包装集要灵活得多：|1272132|myFunc+=+function(elements)+{
++++elements.doStuff();
}

myFunc($("#someId"));+//+or+myFunc($(".someClass"));+etc.|1272133|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

Passing IDs instead of jQuery objects to functions:

<pre><code>myFunc = function(id) { // wrong!
 var selector = $("#" + id);
 selector.doStuff();
}

myFunc("someId");
</code></pre>

Passing a wrapped set is far more flexible:

<pre><code>myFunc = function(elements) {
 elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.
</code></pre>

blocks|key|1271521|text|过度使用链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1271522|请看以下内容：|1271523|this.buttonNext[n+?+'bind'+:+'unbind'](this.options.buttonNextEvent,+this.funcNext)[n+?+'removeClass'+:+'addClass'](this.className('jcarousel-next-disabled')).attr('disabled',+n+?+false+:+true);|code-block|syntax|javascript|1271524|Explanation|offset|length|1271525|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/1075651/help-understanding-jquery-button-enable-disable-code/1075870#1075870^0|0|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

Excessive use of chaining. 

See this:

<pre><code>this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);
</code></pre>

<a href="https://stackoverflow.com/questions/1075651/help-understanding-jquery-button-enable-disable-code/1075870#1075870">Explanation</a>

blocks|key|1487227|text|使用字符串累加器样式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1487228|使用%2B运算符在内存中创建一个新字符串，并将连接后的值赋给它。只有在此之后，才会将结果赋给一个变量。为了避免中间变量用于拼接结果，可以直接使用%2B=运算符对结果赋值。慢速：|1487229|a+%2B=+'x'+%2B+'y';|code-block|syntax|javascript|1487230|更快：|1487231|a+%2B=+'x';
a+%2B=+'y';|1487232|基元操作可以比函数调用更快|1487233|考虑在性能关键的循环和函数中对函数调用使用替代原语操作。慢速：|1487234|var+min+=+Math.min(a,+b);
arr.push(val);|1487235|1487236|var+min+=+a+<+b+?+a+:+b;
arr[arr.length]+=+val;|1487237|有关更多信息，请访问JavaScript+Performance+Best+Practices|offset|length|1487238|entityMap|0|LINK|mutability|MUTABLE|url|http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices^0|0|0|0|0|0|0|0|0|0|0|A|11|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1A|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1C|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|S|3|J|5|6|7|1F|8|@]|9|@]|A|$]]|$1|T|3|U|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|V|3|W|5|6|7|1H|8|@]|9|@$X|1I|Y|1J|1|1K]]|A|$]]|$1|Z|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|10|$11|$5|12|13|14|A|$15|16]]]]

Use strings accumulator-style

Using + operator a new string is created in memory and the concatenated value is assigned to it. Only after this the result is assigned to a variable.
To avoid the intermediate variable for concatenation result, you can directly assign the result using += operator.
Slow:

<pre><code>a += 'x' + 'y';
</code></pre>

Faster:

<pre><code>a += 'x';
a += 'y';
</code></pre>

Primitive operations can be faster than function calls

Consider using alternative primitive operation over function calls in performance critical loops and functions.
Slow:

<pre><code>var min = Math.min(a, b);
arr.push(val);
</code></pre>

Faster:

<pre><code>var min = a &lt; b ? a : b;
arr[arr.length] = val;
</code></pre>

Read More at <a href="http://www.developer.nokia.com/Community/Wiki/JavaScript_Performance_Best_Practices" rel="nofollow">JavaScript Performance Best Practices</a>

blocks|key|1272462|text|如果希望用户在其浏览器中看到html实体，请使用“html”而不是“text”来注入Unicode字符串，如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1272463|$('p').html("Your+Unicode+string")|code-block|syntax|javascript|1272464|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|$]]

If you want users to see html entities in their browser, use 'html' instead of 'text' to inject a Unicode string, like:

<pre><code>$('p').html("Your Unicode string")
</code></pre>

blocks|key|1487140|text|我的两个观点)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1487141|通常，使用jquery意味着您不必一直担心实际的DOM元素。您可以编写类似这样的代码-+$('div.mine').addClass('someClass').bind('click',+function(){alert('lalala')})+-并且此代码将执行而不会抛出任何错误。|offset|length|style|CODE|1487142|在某些情况下，这是有用的，在某些情况下，根本不是，但事实是，jquery往往是空匹配友好的。然而，如果有人试图将replaceWith与不属于文档的元素一起使用，它将抛出错误。我觉得这有点违反直觉。|1487143|在我看来，另一个缺陷是prevAll()方法$('<div><span+class="A"/><span+class="B"/><span+class="C"/><span+class="D"/></div>').find('span:last-child').prevAll()返回的节点顺序。实际上，这不是什么大问题，但我们应该记住这一事实。|1487144|entityMap^0|0|18|26|0|1K|B|0|M|3A|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|U|8|@$D|V|E|W|F|G]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|M|$]]

my two cents)

Usually, working with jquery means you don't have to worry about DOM elements actual all the time. You can write something like this - <code>$('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})</code> - and this code will execute without throwing any errors.

In some cases this is useful, in some cases - not at all, but it is a fact that jquery tends to be, well, empty-matches-friendly. Yet, <code>replaceWith</code> will throw an error if one tries to use it with an element which doesn't belong to the document. I find it rather counter-intuitive. 

Another pitfall is, in my opinion, the order of nodes returned by prevAll() method - <code>$('&lt;div&gt;&lt;span class="A"/&gt;&lt;span class="B"/&gt;&lt;span class="C"/&gt;&lt;span class="D"/&gt;&lt;/div&gt;').find('span:last-child').prevAll()</code>. Not a big deal, actually, but we should keep in mind this fact.

blocks|key|1272027|text|如果您计划在大量数据中使用Ajax，比如包含20列的表的1500行，那么甚至不要考虑使用jQuery将这些数据插入到您的HTML中。使用纯JavaScript。在速度较慢的机器上，jQuery会太慢。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1272028|而且，一半的时间，jQuery会做一些会导致它变慢的事情，比如试图解析传入的超文本标记语言中的脚本标记，以及处理浏览器的怪癖。如果你想要更快的插入速度，请坚持使用普通的JavaScript。|1272029|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

If you plan to Ajax in lots of data, like say, 1500 rows of a table with 20 columns, then don't even think of using jQuery to insert that data into your HTML. Use plain JavaScript. jQuery will be too slow on slower machines.

Also, half the time jQuery will do things that will cause it to be slower, like trying to parse script tags in the incoming HTML, and deal with browser quirks. If you want fast insertion speed, stick with plain JavaScript.

blocks|key|1272426|text|在一个只需几行普通JavaScript就能完成的小项目中使用jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1272427|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Using jQuery in a small project that can be completed with just a couple of lines of ordinary JavaScript.

blocks|key|1271557|text|不了解事件绑定。JavaScript和jQuery的工作方式不同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1271558|根据大众需求，举个例子：|1271559|在jQuery中：|1271560|$("#someLink").click(function(){//do+something});|code-block|syntax|javascript|1271561|不使用jQuery：|1271562|<a+id="someLink"+href="page.html"+onClick="SomeClickFunction(this)">Link</a>
<script+type="text/javascript">
SomeClickFunction(item){
++++//do+something
}
</script>|1271563|基本上，JavaScript所需的挂钩不再是必需的。例如，使用内联标记(onClick等)，因为您可以简单地使用开发人员通常用于CSS目的的ID和类。|1271564|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Not understanding event binding. JavaScript and jQuery work differently.

By popular demand, an example:

In jQuery:

<pre><code>$("#someLink").click(function(){//do something});
</code></pre>

Without jQuery:

<pre><code>&lt;a id="someLink" href="page.html" onClick="SomeClickFunction(this)"&gt;Link&lt;/a&gt;
&lt;script type="text/javascript"&gt;
SomeClickFunction(item){
 //do something
}
&lt;/script&gt;
</code></pre>

Basically the hooks required for JavaScript are no longer necessary. I.e. use inline markup (onClick, etc) because you can simply use the ID's and classes that a developer would normally leverage for CSS purposes.

I am starting a project with jQuery.

What pitfalls/errors/misconceptions/abuses/misuses did you have in your jQuery project?

jQuery pitfalls to avoid

服务器

jQuery

我正在和jQuery一起开始一个项目。您在jQuery项目中有哪些陷阱/错误/误解/滥用/误用？

问要避免的jQuery陷阱
EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问要避免的jQuery陷阱EN

回答 22

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问要避免的jQuery陷阱
EN