javascript - 關於jquery中$(function(){})的使用。
typecho
typecho 2017-06-26 10:51:00
0
5
1059

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

typecho
typecho

Following the voice in heart.

全部回覆(5)
过去多啦不再A梦
  1. 如果你把兩種方式都放到html頁面結構下面的話,寫不寫$(function(){})都行,都是等到頁面加載完後執行(別忘了html是從上到下解析載入的)。

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

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


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

女神的闺蜜爱上我

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

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

阿神

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

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

phpcn_u1582

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

给我你的怀抱

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

$ = 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肯定更複雜。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板