锋利的jQuery--关于$(document).ready()函数及jQuery代码风格
jQuery代码:
$(document).ready(function(){
//jQuery代码
});
在该函数内的所有代码都将在DOM加载完毕后,页面全部内容(包括图片等)完全加载完毕前被执行。
window.onload与$(document).ready()的对比:
1、执行时机:
window.onload方法:必须等网页中的所有内容加载完成后(包括图片和关联文件)才能执行。
$(document).ready()方法:网页中所有的DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完。
2、编写个数:
window.onload方法:不可以同时编写多个,不然会只执行最后一个。
$(document).ready()方法:能够编写多个,结果依次输出。
3、简写方法:
window.onload方法:无简写。
$(document).ready()方法:可以简写成:$(function(){
//jQuery代码
});
二、jQuery代码风格
1、链式操作风格
(1)对于同一对象不超过3个操作的,可以直接写成一行。
eg:
$("li").show().unbind("click");
(2)对于同一个对象的较多操作,建议每行写一个操作。
eg:
$(this).removeClass("mouseout")
.addClass("mouseover")
.stop()
.fadeTo("fast",0.6)
.fadeTo("fast",1)
.unbind("click")
.click(function(){
//do something...
})
(3)对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当的缩进。
eg:
$(".has_children").click(function(){
$(this).addClass("highlight")
.children("a").show().end()
.siblings().removeClass("highlight")
.children("a").hide();
});
(4)对于多个对象的较多操作,建议结合第2、3条。
2、为代码添加注释