我开始一个项目与jQuery。
在你的jQuery项目中有哪些陷阱/错误/误解/滥用/误用?
我开始一个项目与jQuery。
在你的jQuery项目中有哪些陷阱/错误/误解/滥用/误用?
当前回答
不理解事件绑定。JavaScript和jQuery的工作方式不同。
根据大众需求,一个例子:
jQuery:
$("#someLink").click(function(){//do something});
没有jQuery:
<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
//do something
}
</script>
基本上JavaScript所需要的钩子不再是必要的。例如,使用内联标记(onClick等),因为您可以简单地使用开发人员通常用于CSS目的的ID和类。
其他回答
用回调“链接”动画事件。
假设你想让一个段落在点击后消失。您还希望随后从DOM中删除该元素。你可能认为你可以简单地链接这些方法:
$("p").click(function(e) {
$(this).fadeOut("slow").remove();
});
在这个例子中,.remove()将在. fadeout()完成之前被调用,破坏渐变效果,只是让元素立即消失。相反,当你想在完成前一个命令后才触发一个命令时,使用回调函数:
$("p").click(function(e){
$(this).fadeOut("slow", function(){
$(this).remove();
});
});
. fadeout()的第二个参数是一个匿名函数,它将在. fadeout()动画完成后运行。这使得逐渐褪色,并随后删除元素。
不要使用裸类选择器,像这样:
$('.button').click(function() { /* do something */ });
这将检查每一个元素,看它是否有一个“button”类。
相反,你可以帮助它,比如:
$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });
这是我去年从Rebecca Murphy的博客中学到的
更新:这个答案是2年前给出的,不适合当前版本的jQuery。 其中一个评论包括一个测试来证明这一点。 还有一个更新的测试版本,其中包含了回答这个问题时的jQuery版本。
如果您计划在大量数据中使用Ajax,比如一个有20列的1500行表,那么甚至不要考虑使用jQuery将这些数据插入到HTML中。使用纯JavaScript。jQuery在较慢的机器上太慢了。
而且,有一半的时间jQuery会做一些导致它变慢的事情,比如试图解析传入HTML中的脚本标记,以及处理浏览器的异常。如果您想要更快的插入速度,请坚持使用纯JavaScript。
当使用$。ajax函数对服务器的ajax请求,你应该避免使用完整的事件来处理响应数据。无论请求是否成功,它都会触发。
用成功代替完成。
请参阅文档中的Ajax事件。
将id而不是jQuery对象传递给函数:
myFunc = function(id) { // wrong!
var selector = $("#" + id);
selector.doStuff();
}
myFunc("someId");
传递一个包装集要灵活得多:
myFunc = function(elements) {
elements.doStuff();
}
myFunc($("#someId")); // or myFunc($(".someClass")); etc.