我开始一个项目与jQuery。

在你的jQuery项目中有哪些陷阱/错误/误解/滥用/误用?


当前回答

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

用成功代替完成。

请参阅文档中的Ajax事件。

其他回答

没有意识到性能受到了影响,并且过度使用选择器而不是将它们分配给局部变量。例如:-

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

而不是:

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

或者更好的链接:-

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

当我意识到调用栈是如何工作的时候,我发现这是一个具有启发性的时刻。

编辑:在评论中加入建议。

不要使用裸类选择器,像这样:

$('.button').click(function() { /* do something */ });

这将检查每一个元素,看它是否有一个“button”类。

相反,你可以帮助它,比如:

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

这是我去年从Rebecca Murphy的博客中学到的

更新:这个答案是2年前给出的,不适合当前版本的jQuery。 其中一个评论包括一个测试来证明这一点。 还有一个更新的测试版本,其中包含了回答这个问题时的jQuery版本。

理解如何使用上下文。通常,jQuery选择器会搜索整个文档:

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

但是你可以通过在上下文中搜索来加快速度:

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

总是缓存$(this)到一个有意义的变量 特别是在.each()中

像这样

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

避免滥用文件准备。 保持文档仅为初始化代码准备。 始终在文档外部提取函数,以便它们可以被重用。

我在doc ready语句中看到了数百行代码。丑陋,不可读,不可能维护。