锋利的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、为代码添加注释

　　　　

 

 

 

 

转载于:https://www.cnblogs.com/wuqin/p/6492288.html

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是生活随笔为你收集整理的锋利的jQuery--关于$(document).ready()函数及jQuery代码风格的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。