鋒利的jQuery--關於$(document).ready()函數及jQuery代碼風格

jQuery代碼：

　　$(document).ready(function(){

　　　　//jQuery代碼

　　});

在該函數內的全部代碼都將在DOM加載完畢後，頁面所有內容（包括圖片等）徹底加載完畢前被執行。

window.onload與$(document).ready()的對比：

一、執行時機：

　　　　window.onload方法：必須等網頁中的全部內容加載完成後（包括圖片和關聯文件）才能執行。

　　　　$(document).ready()方法：網頁中全部的DOM結構繪製完畢後就執行，可能DOM元素關聯的東西並無加載完。

二、編寫個數：

　　　　window.onload方法：不能夠同時編寫多個，否則會只執行最後一個。

　　　　$(document).ready()方法：可以編寫多個，結果依次輸出。

三、簡寫方法：

　　　　window.onload方法：無簡寫。

　　　　$(document).ready()方法：能夠簡寫成：$(function(){

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//jQuery代碼　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 });

2、jQuery代碼風格

　　一、鏈式操做風格

　　（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）對於多個對象的較多操做，建議結合第二、3條。

　　二、爲代碼添加註釋