一、onload，DOMContentLoaded和jQuery的.ready的區(qū)別
1、觸發(fā)時(shí)機(jī)不同
onload事件是在所有資源加載完成后觸發(fā)，包括圖片、腳本和樣式表等；DOMContentLoaded事件是在DOM樹(shù)構(gòu)建完成后立即觸發(fā)，不需要等待其他資源的加載；jQuery的ready事件是在DOM樹(shù)構(gòu)建完成后，CSS和圖片等資源也加載完成后觸發(fā)。
2、應(yīng)用場(chǎng)景不同
onload事件適合處理與頁(yè)面內(nèi)容相關(guān)的操作；DOMContentLoaded事件適合處理DOM元素操作，如添加事件監(jiān)聽(tīng)器等；jQuery的ready事件既能夠處理與頁(yè)面內(nèi)容相關(guān)的操作，也能夠處理外部資源加載完成后的回調(diào)。
3、獲取資源狀態(tài)的能力不同
onload事件可以獲得所有資源的加載狀態(tài)；DOMContentLoaded事件只能獲取DOM樹(shù)的構(gòu)建狀態(tài)，無(wú)法獲取外部資源（如圖片、音頻、視頻等）的加載狀態(tài)；jQuery的ready事件可以確保頁(yè)面中所有資源都已經(jīng)加載完成，包括外部資源。
二、jQuery 概述
1、JavaScript 庫(kù)
庫(kù)，是用于開(kāi)發(fā)軟件的子程序集合。庫(kù)和可執(zhí)行文件的區(qū)別是，庫(kù)不是獨(dú)立程序，他們是向其他程序提供服務(wù)的代碼庫(kù)鏈接。JavaScript 庫(kù)即 library，是一個(gè)封裝好的特定的集合（方法和函數(shù)）。就是把各種常用的代碼片段，組織起來(lái)放在一個(gè) js 文件里，組成一個(gè)包，這個(gè)包就是 JavaScript 庫(kù)。
簡(jiǎn)單理解就是一個(gè) JS文件，里面對(duì)我們?cè)?js 代碼進(jìn)行了封裝，存放到里面。這樣我們就可以快速高效的使用這些封裝好的功能了。比如 jQuery，就是為了快速方便的操作 DOM，里面基本都是函數(shù)（方法）。再比如 Prototype、Dojo、Extjs 、 YUI、移動(dòng)端的 zepto 等等，這些都是優(yōu)異的 JavaScript 庫(kù)。它們都是對(duì)原生 JavaScript 的封裝，內(nèi)部都是用 JavaScript 實(shí)現(xiàn)的。
2、jQuery
jQuery 是一個(gè)快速、簡(jiǎn)潔的 JavaScript 框架，是繼 Prototype 之后又一個(gè)優(yōu)異的 JavaScript 代碼庫(kù)（ 或 JavaScript 框架 ）。 jQuery 設(shè)計(jì)的宗旨是 “write Less，Do More”，即倡導(dǎo)寫(xiě)更少的代碼，做更多的事情。jQuery = javascript Query（查詢）。意思是查詢 js，把 js 中的 DOM 操作做了封裝，我們可以快速的查詢使用里面的功能。它封裝 JavaScript 常用的功能代碼，提供一種簡(jiǎn)便的 JavaScript 設(shè)計(jì)模式，優(yōu)化 HTML 文檔操作、事件處理、動(dòng)畫(huà)設(shè)計(jì)和 Ajax 交互。
3、jQuery 優(yōu)點(diǎn)
輕量級(jí)，體積小，不會(huì)影響頁(yè)面加載速度。強(qiáng)大的選擇器。方便的選擇頁(yè)面元素（模仿 css 選擇器更精確、更靈活）。出色的 DOM 操作的封裝。對(duì)事件、樣式、動(dòng)畫(huà)支持，大大簡(jiǎn)化了 DOM 操作?？鐬g覽器兼容?；炯嫒萘爽F(xiàn)在主流的瀏覽器。鏈?zhǔn)讲僮鳌㈦[式迭代。支持插件擴(kuò)展開(kāi)發(fā)，有著豐富的第三方插件。免費(fèi)、開(kāi)源。4、jQuery 特點(diǎn)
快速獲取文檔元素：? jQuery的選擇機(jī)制構(gòu)建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強(qiáng)化了JavaScript中獲取頁(yè)面元素的方式。提供漂亮的頁(yè)面動(dòng)態(tài)效果：jQuery中內(nèi)置了一系列的動(dòng)畫(huà)效果，可以開(kāi)發(fā)出非常漂亮的網(wǎng)頁(yè)，許多網(wǎng)站都使用jQuery的內(nèi)置的效果，比如淡入淡出、元素移除等動(dòng)態(tài)特效。?創(chuàng)建AJAX無(wú)刷新網(wǎng)頁(yè)：AJAX是異步的JavaScript和XML的簡(jiǎn)稱，可以開(kāi)發(fā)出非常靈敏無(wú)刷新的網(wǎng)頁(yè)，特別是開(kāi)發(fā)服務(wù)器端網(wǎng)頁(yè)時(shí)，比如PHP網(wǎng)站，需要往返地與服務(wù)器通信，如果不使用AJAX，每次數(shù)據(jù)更新不得不重新刷新網(wǎng)頁(yè)，而使用AJAX特效后，可以對(duì)頁(yè)面進(jìn)行局部刷新，提供動(dòng)態(tài)的效果。?提供對(duì)JavaScript語(yǔ)言的增強(qiáng)：jQuery提供了對(duì)基本JavaScript結(jié)構(gòu)的增強(qiáng)，比如元素迭代和數(shù)組處理等操作。?增強(qiáng)的事件處理：jQuery提供了各種頁(yè)面事件，它可以避免程序員在HTML中添加太多事件處理代碼，最重要的是，它的事件處理器消除了各種瀏覽器兼容性問(wèn)題。?更改網(wǎng)頁(yè)內(nèi)容：jQuery可以修改網(wǎng)頁(yè)中的內(nèi)容，比如更改網(wǎng)頁(yè)的文本、插入或者翻轉(zhuǎn)網(wǎng)頁(yè)圖像，jQuery簡(jiǎn)化了原本使用JavaScript代碼需要處理的方式。5、jQuery語(yǔ)法
jQuery 語(yǔ)法是通過(guò)選取 HTML 元素，并對(duì)選取的元素執(zhí)行某些操作。
基礎(chǔ)語(yǔ)法：
$(selector).action()示例：
$(this).hide() ：隱藏當(dāng)前元素$(“p”).hide() ：隱藏所有元素$(“p.test”).hide() ：隱藏所有 class=”test” 的元素$(“#test”).hide() ：隱藏所有 id=”test” 的元素三、onload事件
在 JavaScript 中，onload 事件在頁(yè)面完全加載完畢的時(shí)候觸發(fā)。該事件包含所有的圖形圖像、外部文件（如 CSS、JS 文件等）的加載，也就是說(shuō)，在頁(yè)面所有內(nèi)容全部加載之前，任何 DOM 操作都不會(huì)發(fā)生。為 window 對(duì)象綁定 onload 事件的方法有兩種。
1、直接為 window 對(duì)象注冊(cè)頁(yè)面初始化事件處理函數(shù)
window.onload = f;
function f() {
alert("頁(yè)面加載完畢");
}2、在頁(yè)面標(biāo)簽中定義onload 事件處理屬性
延伸閱讀1：onload的定義和用法
onload 事件在對(duì)象被加載后發(fā)生。onload 最常用于 元素中，用于在網(wǎng)頁(yè)完全加載所有內(nèi)容（包括圖像、腳本文件、CSS 文件等）后執(zhí)行腳本。onload 事件可用于檢查訪問(wèn)者的瀏覽器類型和瀏覽器版本，并根據(jù)這些信息加載網(wǎng)頁(yè)的正確版本。onload 事件也可用于處理 cookie。
京公網(wǎng)安備 11010802030320號(hào)