一、onload，DOMContentLoaded和jQuery的.ready的區(qū)別

1、觸發(fā)時(shí)機(jī)不同

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

2、應(yīng)用場景不同

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

3、獲取資源狀態(tài)的能力不同

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

二、jQuery 概述

1、JavaScript 庫

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

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

2、jQuery

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

3、jQuery 優(yōu)點(diǎn)

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

4、jQuery 特點(diǎn)

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

5、jQuery語法

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

基礎(chǔ)語法：

 $(selector).action()

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

示例：

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

三、onload事件

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

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

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

2、在頁面標(biāo)簽中定義onload 事件處理屬性

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

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