事件

$("selector").html($("another-selector").html());

不会克隆任何事件-你必须重新绑定它们。

根据JP的评论- clone()如果您传递true，则会重新绑定事件。

进行过多的DOM操作。虽然.html()， .append()， .prepend()等方法很棒，但由于浏览器呈现和重新呈现页面的方式，经常使用它们会导致速度变慢。通常更好的方法是将html创建为字符串，并将其包含到DOM中一次，而不是多次更改DOM。

而不是:

var $parent = $('#parent');
var iterations = 10;

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

试试这个:

var $parent = $('#parent');
var iterations = 10;
var html = '';

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

$parent.append(html);

甚至这个($wrapper是一个新创建的元素，还没有注入到DOM中。将节点附加到这个包装器div不会导致速度变慢，最后我们将$wrapper附加到$parent，只使用了一个DOM操作):

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

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

$parent.append($wrapper);

避免多次搜索整个DOM。这确实会耽误你的剧本。

Bad:

$(".aclass").this();
$(".aclass").that();
...

好:

$(".aclass").this().that();

Bad:

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

好:

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

当使用$。ajax函数对服务器的ajax请求，你应该避免使用完整的事件来处理响应数据。无论请求是否成功，它都会触发。

用成功代替完成。

请参阅文档中的Ajax事件。

误解在正确的上下文中使用此标识符。例如:

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

这里有一个解决方法的例子:

$( "#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.
   })
});

我的意见)

通常，使用jquery意味着你不必一直担心DOM元素。你可以这样写- $('div.mine'). addclass ('someClass')。Bind ('click'， function(){alert('lalala')}) -这段代码将执行而不会抛出任何错误。

在某些情况下，这是有用的，在某些情况下-根本不是，但这是一个事实，jquery倾向于，嗯，空匹配友好。但是，如果试图将replaceWith与不属于文档的元素一起使用，则会抛出错误。我觉得这是违反直觉的。

另一个陷阱是，在我看来，由prevAll()方法返回的节点顺序- $('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll()。其实没什么大不了的，但我们应该记住这个事实。