各位大俠,我js的小白,我最近在設計一個簡單的網站,在網站抄了一些jq的程式碼。
我發現有些程式碼段的開頭是$(function(){。。。。}),那我就按照這種格式寫在$(function(){。。})裡面,如$( function(){$('#denglu_submit').click(function(){。。。。
但我還看見有的程式碼段中沒有$(function(){}),而直接是$(' #denglu_submit').click(function(){。。等內容,我試驗了一下,兩種好像都可以運行。那我就不知道有什麼區別了?
如果你把兩種方式都放到
html
頁面結構下面的話,寫不寫$(function(){})
都行,都是等到頁面加載完後執行(別忘了html
是從上到下解析載入的)。但是如果你都放在頁面結構上面的話區別就大了,
$(function(){})
為網頁加載完後執行,沒有$(function(){})
直接寫的話是按html頁面從上到下的順序執行,也就是說如果js
程式碼執行時間比較長(如取得大量資料),那下面的html內容得等到js執行完後才會載入顯示。這顯然不合理。應該是讓html內容先顯示完才對。所以我們一般寫程式碼還是加上
$(function(){})
為好,這樣就算js
程式碼出錯了或執行時間比較久,頁面主要內容也可以載入完成,不會影響使用者瀏覽網頁。而且保險最好把程式碼放到頁面結構下面,這樣也是為了確保頁面載入完整(畢竟html是依照從上到下的順序解析載入的)。其它小知識
$(function(){})
為網頁載入完後執行,好像和原生js的window.onload = function() {}
一樣,其實有差別,前者是載入完結構(不包括圖片)後執行,後者是載入完結構(包含圖片)後才執行。$(function(){})這個是js載入完畢後並且dom結構載入完畢後才執行裡面的的邏輯。
$('#denglu_submit').click(function(){。。}) 這個是js載入完畢後就執行。
$(function(){...})
這裡面的內容是等頁面的節點或引用的檔案都載入完了,再執行。這樣可以確保頁面節點已經載入完了,裡面選擇器對應的節點也有了。$('#denglu_submit').click(function(){...})
,這個是等加載到這裡的時候就執行了,執行的時候並不知道#denglu_submit
有沒有加載到頁面上。如果頁面沒有這個節點,那麼對應的事件是沒有反應的。你可以試著把這兩段段程式碼都放到
head
裡面去運行下,就知道差別了!你知道window.onload麼。這個比onload早執行
首先,我來回答一下吧,$是函數名,舉個例子:
這樣子就定義來一個函數叫做$並執行來;你可以自己測試一下;
然後
此處在這個$函數裡傳遞來一個參數,這個參數是一個匿名的函數(沒有名稱的函數,也叫做閉包);
那麼假設
最後執行來就是和上面的一樣,但是會更靈活,你可以傳遞任意想執行的函數進去執行;
而在此處:
其實是給$方法傳遞一個字串'#denglu_submit'進去,然後給$裡的click函數來一個匿名函數進去,整個函數設計類似於這樣:
當然,jquery肯定更複雜。