我开始一个项目与jQuery。

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


当前回答

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

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

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

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

过度使用链条。

看到这个:

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

解释

理解如何使用上下文。通常,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);

将id而不是jQuery对象传递给函数:

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

myFunc("someId");

传递一个包装集要灵活得多:

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

跟“回购人”说的差不多,但不完全一样。

在开发ASP时。NET winforms,我经常这样做

$('<%= Label1.ClientID %>');

忘记#符号。正确的形式是

$('#<%= Label1.ClientID %>');