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

    

 

 

 

 

posted @ 2017-03-02 19:59  乌勤  阅读(376)  评论(0编辑  收藏  举报