我开始一个项目与jQuery。
在你的jQuery项目中有哪些陷阱/错误/误解/滥用/误用?
我开始一个项目与jQuery。
在你的jQuery项目中有哪些陷阱/错误/误解/滥用/误用?
当前回答
在一个小项目中使用jQuery,只需几行普通的JavaScript就可以完成。
其他回答
如果你想让用户在他们的浏览器中看到html实体,使用'html'而不是'text'来注入Unicode字符串,例如:
$('p').html("Your Unicode string")
没有意识到性能受到了影响,并且过度使用选择器而不是将它们分配给局部变量。例如:-
$('#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");
});
当我意识到调用栈是如何工作的时候,我发现这是一个具有启发性的时刻。
编辑:在评论中加入建议。
用回调“链接”动画事件。
假设你想让一个段落在点击后消失。您还希望随后从DOM中删除该元素。你可能认为你可以简单地链接这些方法:
$("p").click(function(e) {
$(this).fadeOut("slow").remove();
});
在这个例子中,.remove()将在. fadeout()完成之前被调用,破坏渐变效果,只是让元素立即消失。相反,当你想在完成前一个命令后才触发一个命令时,使用回调函数:
$("p").click(function(e){
$(this).fadeOut("slow", function(){
$(this).remove();
});
});
. fadeout()的第二个参数是一个匿名函数,它将在. fadeout()动画完成后运行。这使得逐渐褪色,并随后删除元素。
进行过多的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);
使用ClientID在ASP中获取控件的“真实”id。网络项目。
jQuery('#<%=myLabel.ClientID%>');
另外,如果你在SharePoint内部使用jQuery,你必须调用jQuery. noconflict()。