jQuery的 $(function(){}) 和 (function($) {})(jQuery)

jQuery的文檔就緒函數:

$(document).ready(function(){

--- jQuery functions go here ----

});

$(function(){…}); 也可以寫作 jQuery(function($) {…}); , 其實就是$(document).ready(function{...}); 的簡寫。

jQuery(function(){ 
});
or

$(function(){ 
});

這是爲了防止文檔在完全加載(就緒)之前運行 jQuery 代碼。

如果在文檔沒有完全加載之前就運行函數,操作可能失敗。下面是兩個具體的例子:

  • 試圖隱藏一個不存在的元素
  • 獲得未完全加載的圖像的大小

$(document).ready() 和JavaScript window.onload的區別:

兩者都是指頁面加載完成後,執行函數裏的內容, $(document).ready() 是指DOM加載完成後就可以執行,JavaScript window.onload 不僅僅指DOM加載完成,還包括圖片等外部資源完全加載後才能執行。

區別:

window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行,$(document).ready()是DOM結構繪製完畢後就執行,不必等到加載完畢

window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個,$(document).ready()可以同時編寫多個,並且都可以得到執行

window.onload沒有簡化寫法,$(document).ready(function(){})可以簡寫成$(function(){})


(function($) {})(jQuery)
(function(){ 
})(jQuery);

其實際上是執行()(para)匿名方法,只不過是傳遞了jQuery對象。

相當於 

function aa($){} 
aa(jQuery)

是初始化jquery對象的慣用方法.

通俗點說就是在頁面DOM加載完成後(不包括圖片下載完成)執行你需要的代碼,由於不包括圖片下載,所以比window.onload效率高. 
不過這個東西,有的時候會使頁面跳動,很多JQUERY插件都是在加載完成後,才改變樣式的,頁面會有跳動或閃動的感覺.比如ui.tab這個插件,頁面元素一多,全部顯示出來了,它才形成TAB,很暈的說

 

(function(){})();
立即執行函數;相當於先申明一個函數,聲明完後直接調用; 

如果參數如: 

(function(str){alert(str)})("output"));
相當於:
function OutPutFun(str){alert(str);};OutPutFun("output");


總結: 

1. $(function(){ }) 或 jQuery(function(){ })

   此函數也可以寫成 jQuery(function(){ }), 用於存放操作DOM對象的代碼,執行其中代碼時DOM對象已存在。不可用於存放開發插件的代碼,因爲jQuery對象沒有得到傳遞,外部通過jQuery.method也調用不了其中的方法(函數)。

2.(function($){...})() 或 (function($){...})(jQuery)

   此函數也可以寫成(function(){ })(jQuery);其實際上是執行()(para)匿名方法,只不過是傳遞了jQuery對象。用於存放開發插件的代碼,執行其中代碼時DOM不一定存在,所以若要直接自動執行DOM操作的代碼請小心使用。它相當於:

function wido($){} ;  wisdo(jQuery), 是初始化jquery對象的慣用方法.

3. (function(){})() 或  (function(){ })(jQuery)

  可以理解爲閉包,是一個匿名方法的調用,以保證方法內的變量不與外界衝突,它等效於匿名函數 function(arg){...} ,參數爲 arg,是初始化jquery對象的慣用方法,有的時候會使頁面跳動, 在調用函數時,是在函數後面寫上括號和實參的,由於操作符的優先級,函數本身也需要用括號,即: (function(arg){...})(param),這就相當於定義了一個參數爲arg的匿名函數,並且將param作爲參數來調用這個匿名函數,而(function($){...})(jQuery)則是一樣的,之所以只在形參使用$,是爲了不與其他庫衝突,所以實參用jQuery,

例如:

(funtion(str){alert(str)})("output"));

相當於:

funtion OutPutFun(str){alert(str);};

OutPutFun("output");




參考文檔:jQuery 中 jQuery(function(){})與(function(){})(jQuery) 的區別


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章