一、onload，DOMContentLoaded和jQuery的.ready的區別

1、觸發時機不同

onload事件是在所有資源加載完成后觸發，包括圖片、腳本和樣式表等；DOMContentLoaded事件是在DOM樹構建完成后立即觸發，不需要等待其他資源的加載；jQuery的ready事件是在DOM樹構建完成后，CSS和圖片等資源也加載完成后觸發。

2、應用場景不同

onload事件適合處理與頁面內容相關的操作；DOMContentLoaded事件適合處理DOM元素操作，如添加事件監聽器等；jQuery的ready事件既能夠處理與頁面內容相關的操作，也能夠處理外部資源加載完成后的回調。

3、獲取資源狀態的能力不同

onload事件可以獲得所有資源的加載狀態；DOMContentLoaded事件只能獲取DOM樹的構建狀態，無法獲取外部資源（如圖片、音頻、視頻等）的加載狀態；jQuery的ready事件可以確保頁面中所有資源都已經加載完成，包括外部資源。

二、jQuery 概述

1、JavaScript 庫

庫，是用于開發軟件的子程序集合。庫和可執行文件的區別是，庫不是獨立程序，他們是向其他程序提供服務的代碼庫鏈接。JavaScript 庫即 library，是一個封裝好的特定的集合（方法和函數）。就是把各種常用的代碼片段，組織起來放在一個 js 文件里，組成一個包，這個包就是 JavaScript 庫。

簡單理解就是一個 JS文件，里面對我們原生 js 代碼進行了封裝，存放到里面。這樣我們就可以快速高效的使用這些封裝好的功能了。比如 jQuery，就是為了快速方便的操作 DOM，里面基本都是函數（方法）。再比如 Prototype、Dojo、Extjs 、 YUI、移動端的 zepto 等等，這些都是優異的 JavaScript 庫。它們都是對原生 JavaScript 的封裝，內部都是用 JavaScript 實現的。

2、jQuery

jQuery 是一個快速、簡潔的 JavaScript 框架，是繼 Prototype 之后又一個優異的 JavaScript 代碼庫（ 或 JavaScript 框架 ）。 jQuery 設計的宗旨是 “write Less，Do More”，即倡導寫更少的代碼，做更多的事情。jQuery = javascript Query（查詢）。意思是查詢 js，把 js 中的 DOM 操作做了封裝，我們可以快速的查詢使用里面的功能。它封裝 JavaScript 常用的功能代碼，提供一種簡便的 JavaScript 設計模式，優化 HTML 文檔操作、事件處理、動畫設計和 Ajax 交互。

3、jQuery 優點

輕量級，體積小，不會影響頁面加載速度。強大的選擇器。方便的選擇頁面元素（模仿 css 選擇器更精確、更靈活）。出色的 DOM 操作的封裝。對事件、樣式、動畫支持，大大簡化了 DOM 操作。跨瀏覽器兼容。基本兼容了現在主流的瀏覽器。鏈式操作、隱式迭代。支持插件擴展開發，有著豐富的第三方插件。免費、開源。

4、jQuery 特點

快速獲取文檔元素：? jQuery的選擇機制構建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。提供漂亮的頁面動態效果：jQuery中內置了一系列的動畫效果，可以開發出非常漂亮的網頁，許多網站都使用jQuery的內置的效果，比如淡入淡出、元素移除等動態特效。?創建AJAX無刷新網頁：AJAX是異步的JavaScript和XML的簡稱，可以開發出非常靈敏無刷新的網頁，特別是開發服務器端網頁時，比如PHP網站，需要往返地與服務器通信，如果不使用AJAX，每次數據更新不得不重新刷新網頁，而使用AJAX特效后，可以對頁面進行局部刷新，提供動態的效果。?提供對JavaScript語言的增強：jQuery提供了對基本JavaScript結構的增強，比如元素迭代和數組處理等操作。?增強的事件處理：jQuery提供了各種頁面事件，它可以避免程序員在HTML中添加太多事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問題。?更改網頁內容：jQuery可以修改網頁中的內容，比如更改網頁的文本、插入或者翻轉網頁圖像，jQuery簡化了原本使用JavaScript代碼需要處理的方式。

5、jQuery語法

jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。

基礎語法：

 $(selector).action()

美元符號定義 jQuery選擇符（selector）“查詢”和”查找” HTML 元素jQuery 的 action() 執行對元素的操作

示例：

$(this).hide() ：隱藏當前元素$(“p”).hide() ：隱藏所有元素$(“p.test”).hide() ：隱藏所有 class=”test” 的元素$(“#test”).hide() ：隱藏所有 id=”test” 的元素

三、onload事件

在 JavaScript 中，onload 事件在頁面完全加載完畢的時候觸發。該事件包含所有的圖形圖像、外部文件（如 CSS、JS 文件等）的加載，也就是說，在頁面所有內容全部加載之前，任何 DOM 操作都不會發生。為 window 對象綁定 onload 事件的方法有兩種。

1、直接為 window 對象注冊頁面初始化事件處理函數

window.onload = f;
function f() {
alert("頁面加載完畢");
}

2、在頁面標簽中定義onload 事件處理屬性

延伸閱讀1：onload的定義和用法

onload 事件在對象被加載后發生。onload 最常用于 元素中，用于在網頁完全加載所有內容（包括圖像、腳本文件、CSS 文件等）后執行腳本。onload 事件可用于檢查訪問者的瀏覽器類型和瀏覽器版本，并根據這些信息加載網頁的正確版本。onload 事件也可用于處理 cookie。