$(function(){ })的使用

JQuery 的代碼我們通常會包裹在一個$(function(){})函數中，jq 的$(function(){})也就是$(document).ready(function(){})的簡寫，與之對應的原生 js 的window.onload事件，這倆者之間到底有什麼區別呢？

$(function () {
    console.log("ready執行");
});
 
$(function() {
    console.log("ready1執行");
});
 
window.onload = function () {
    console.log('load執行');
};
window.onload = function () {
    console.log('load1執行');
}

我們來看一下控制檯中輸出的結果：

ready執行
ready1執行
load1執行

這裏可以看出兩點不同： 
1.$(function(){})不會被覆蓋，而window.onload會被覆蓋，個人感覺$(function(){})不會被覆蓋的原因是將其放入到了一個隊列中，在對應時機一次出隊。 
2. $(function(){})在window.onload執行前執行的，$(function(){})類似於原生 js 中的DOMContentLoaded事件，在 DOM 加載完畢後，頁面全部內容（如圖片等）完全加載完畢前被執行。而window.onload會在頁面資源全部加載完畢後纔會執行。

DOM 文檔加載步驟：

1. 解析 HTML 結構
2. 加載外部的腳本和樣式文件
3. 解析並執行腳本代碼
4. 執行 $(function(){}) 內對應代碼
5. 加載圖片等二進制資源
6. 頁面加載完畢，執行 window.onload