javascript - 關於jquery中$(function(){}）的使用。

Question

各位大俠，我js的小白，我最近在設計一個簡單的網站，在網站抄了一些jq的程式碼。
我發現有些程式碼段的開頭是$(function(){。。。。}),那我就按照這種格式寫在$(function(){。。}）裡面，如$( function(){$('#denglu_submit').click(function(){。。。。
但我還看見有的程式碼段中沒有$(function(){}),而直接是$(' #denglu_submit').click(function(){。。等內容，我試驗了一下，兩種好像都可以運行。那我就不知道有什麼區別了？

Answer 1

1. 如果你把兩種方式都放到html頁面結構下面的話，寫不寫$(function(){})都行，都是等到頁面加載完後執行（別忘了html是從上到下解析載入的）。

2. 但是如果你都放在頁面結構上面的話區別就大了，$(function(){})為網頁加載完後執行，沒有$(function(){})直接寫的話是按html頁面從上到下的順序執行，也就是說如果js程式碼執行時間比較長（如取得大量資料），那下面的html內容得等到js執行完後才會載入顯示。這顯然不合理。應該是讓html內容先顯示完才對。

3. 所以我們一般寫程式碼還是加上$(function(){})為好，這樣就算js程式碼出錯了或執行時間比較久，頁面主要內容也可以載入完成，不會影響使用者瀏覽網頁。而且保險最好把程式碼放到頁面結構下面，這樣也是為了確保頁面載入完整（畢竟html是依照從上到下的順序解析載入的）。

---

其它小知識$(function(){})為網頁載入完後執行，好像和原生js的window.onload = function() {}一樣，其實有差別，前者是載入完結構（不包括圖片）後執行，後者是載入完結構（包含圖片）後才執行。

Answer 2

$(function(){})這個是js載入完畢後並且dom結構載入完畢後才執行裡面的的邏輯。

$('#denglu_submit').click(function(){。。}) 這個是js載入完畢後就執行。

Answer 3

$(function(){...})這裡面的內容是等頁面的節點或引用的檔案都載入完了，再執行。這樣可以確保頁面節點已經載入完了，裡面選擇器對應的節點也有了。

$('#denglu_submit').click(function(){...})，這個是等加載到這裡的時候就執行了，執行的時候並不知道#denglu_submit有沒有加載到頁面上。如果頁面沒有這個節點，那麼對應的事件是沒有反應的。
你可以試著把這兩段段程式碼都放到head裡面去運行下，就知道差別了！

Answer 4

你知道window.onload麼。這個比onload早執行

Answer 5

首先，我來回答一下吧，$是函數名，舉個例子：

$ = function() {
alert('good');
}
$();

這樣子就定義來一個函數叫做$並執行來；你可以自己測試一下；
然後

$(function() {})

此處在這個$函數裡傳遞來一個參數，這個參數是一個匿名的函數（沒有名稱的函數，也叫做閉包）；
那麼假設

$ = function(fun) {
fun();
}
$(function() { alert("good"); } );

最後執行來就是和上面的一樣，但是會更靈活，你可以傳遞任意想執行的函數進去執行；
而在此處：

$('#denglu_submit').click(function(){alert("good");});

其實是給$方法傳遞一個字串'#denglu_submit'進去，然後給$裡的click函數來一個匿名函數進去，整個函數設計類似於這樣：

$ = function(a) {
    alert(a);
    return $;
}
$.click = function(fun) { fun(); }; 
$("hello").click(function() {alert("fun")});

當然，jquery肯定更複雜。