學(xué)習(xí)前端 DOM、BOM 和 jQuery

DOM - 文檔對(duì)象模型 (DOM) 是一個(gè)跨平臺(tái)的、獨(dú)立于語言的約定，能以對(duì)象的形式對(duì) HTML、XHTML 和 XML 文檔進(jìn)行展示和交互。每一個(gè)文檔的節(jié)點(diǎn)被放到一個(gè)樹形結(jié)構(gòu)中，這棵樹被稱為 DOM 樹。

— 維基百科

BOM - 瀏覽器對(duì)象模型 (BOM)是一個(gè)瀏覽器規(guī)范約定，涉及到網(wǎng)絡(luò)瀏覽器暴露出來的所有對(duì)象。不像文檔對(duì)象模型，BOM 并沒有實(shí)現(xiàn)的標(biāo)準(zhǔn)和嚴(yán)格的定義，所以瀏覽器廠商想怎么實(shí)現(xiàn) BOM 都可以。

— 維基百科

jQuery - jQuery 是一個(gè)跨平臺(tái)的 JavaScript 庫，為了簡(jiǎn)化客戶端 HTML 中的腳本編寫而誕生。jQuery 如今是最流行使用的 JavaScript 庫，排名前 1000 萬的高訪問量網(wǎng)站中，有 65% 都在使用它。

— 維基百科

最理想的學(xué)習(xí)路徑，但也是最難的，就是先學(xué)習(xí) JavaScript，然后學(xué) DOM，然后 jQuery。但還是要確保你做的事有意義。大部分前端開發(fā)者是在初次學(xué)習(xí) jQuery 的時(shí)候，順帶著學(xué)習(xí) JavaScript 和 DOM。但無論你選哪一條路，都不能將 JavaScript、DOM 和 jQuery 當(dāng)做一個(gè)黑盒來看。

普通學(xué)習(xí)資源：

• Codecademy.com jQuery [觀看]
• 文檔對(duì)象模型 [閱讀]
• HTML/JS: 打造可交互的頁面 [觀看]
• HTML/JS: 通過 jQuery 打造可交互頁面 [觀看]
• jQuery 啟蒙 [閱讀]

進(jìn)階：

• 高級(jí) DOM 編程: 動(dòng)態(tài) Web 設(shè)計(jì)技術(shù) [閱讀][$]
• jQuery & 純 DOM 腳本編程的高級(jí) JS 基礎(chǔ) [觀看][$]
• Douglas Crockford: 麻煩的 API - DOM 理論 [觀看]
• DOM 啟蒙 [閱讀][$] 或者 在線免費(fèi)閱讀
• 修正 jQuery 常見 Bug [觀看][$]
• 無 jQuery 的 JavaScript [觀看][$]
• jQuery 小貼士和小技巧 [觀看][$]

參考/文檔:

• jQuery 文檔
• 事件
• DOM 瀏覽器支持度
• DOM 事件瀏覽器支持度
• HTML 接口瀏覽器支持度
• MDN 文檔對(duì)象模型 (DOM)
• MDN 瀏覽器對(duì)象模型
• MDN 文檔對(duì)象模型
• MDN 事件一覽表
• MSDN 文檔對(duì)象模型 (DOM)

標(biāo)準(zhǔn)/規(guī)范:

• 文檔對(duì)象模型 (DOM) Level 3 事件規(guī)范
• 文檔對(duì)象模型 (DOM) 技術(shù)報(bào)告
• DOM 最新標(biāo)準(zhǔn)
• W3C DOM4