DOM, BOM & JQuery · 前端開發者手冊

## DOM, BOM & JQuery >**DOM** - 文檔對象模型(DOM)用于代表和對象交互的HTML, XHTML 和 XML 文檔, 是一種跨平臺和語言無關性的約定. 每一份文檔的所有節點被組織成一種樹結構, 稱為 DOM 樹. DOM 對象通過使用對象上的方法被處理和操作, 一個 DOM 對象的公共接口被指定為它的應用程序編程接口(API). - wikipedia.org >**BOM** - 瀏覽器對象模型(BOM)是一種瀏覽器規范, 代指 Web 瀏覽器暴露出的對象. 與文檔對象模型不同的是, 目前并沒有關于瀏覽器對象模型的標準和嚴格定義, 因而瀏覽器廠商可以按照他們的意愿, 采取任何方式來實現 BOM. - wikipedia.org >**JQuery** - JQuery 是一個跨平臺的 JavaScript 庫, 其設計目的是簡化客戶端的 HTML 腳本操作. JQuery 也是目前最流行的 JavaScript 庫, 在目前排名前1000萬的網站中, 65% 的網站安裝了 JQuery. JQuery 是免費的, 基于 MIT 協議的開源軟件. - wikipedia.org 最理想但又難度最大的學習路徑就是首先學習 JavaScript, 然后學習 DOM, 之后再學習 JQuery. 然后, 完全可以按照你所想的學習路徑來安排學習的順序. 大多數的前端開發者在了解 JavaScript 和 DOM 之后, 才會接觸 JQuery. 無論采取什么學習路徑, 都要確保 JavaScript, DOM 或者 JQuery 不要成為"黑盒子". **綜合學習:** <ul> <li><a href="http://eloquentjavascript.net/13_dom.html" target="_blank">The Document Object Model</a> [read]</li> <li><a href="https://www.codecademy.com/tracks/jquery" target="_blank">codecademy.com jQuery</a> [watch]</li> <li><a href="http://jqueryenlightenment.com/" target="_blank">jQuery Enlightenment</a> [read]</li> <li><a href="http://www.pluralsight.com/courses/jquery-getting-started" target="_blank">jQuery: Getting Started</a> [watch][$]</li> </ul> **精通:** <ul> <li><a href="http://www.amazon.com/DOM-Enlightenment-Cody-Lindley/dp/1449342841/" target="_blank">DOM Enlightenment</a> [read][$] or <a href="http://domenlightenment.com/" target="_blank">read online for free</a></li> <li><a href="https://frontendmasters.com/courses/javascript-jquery-dom/" target="_blank">Advanced JS Fundamentals to jQuery & Pure DOM Scripting</a> [watch][$]</li> <li><a href="http://www.amazon.com/gp/product/1590598563/ref=as_li_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=1590598563&linkCode=as2&tag=fronenddevejo-20&linkId=VQZU5EQIQQXCF56Y" target="_blank">AdvancED DOM Scripting: Dynamic Web Design Techniques</a> [read][$]</li> <li><a href="http://www.pluralsight.com/courses/fixing-common-jquery-bugs" target="_blank">Fixing Common jQuery Bugs</a> [watch][$]</li> <li><a href="http://www.pluralsight.com/courses/jquery-tips-and-tricks" target="_blank">jQuery Tips and Tricks</a> [watch][$]</li> <li><a href="http://www.pluralsight.com/courses/jquery-free-javascript" target="_blank">jQuery-free JavaScript</a> [watch][$]</li> <li><a href="https://www.youtube.com/watch?v=Y2Y0U-2qJMs&list=PL5586336C26BDB324&index=2" target="_blank">Douglas Crockford: An Inconvenient API - The Theory of the DOM</a> [watch]</li> </ul> **參考/文檔:** <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model" target="_blank">MDN Document Object Model</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/Events" target="_blank">MDN Event reference</a></li> <li><a href="http://api.jquery.com/" target="_blank">jQuery Docs</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window" target="_blank">MDN Browser Object Model</a></li> <li><a href="https://msdn.microsoft.com/en-us/library/hh772384%28v=vs.85%29.aspx" target="_blank">msdn Document Object Model (DOM)</a></li> </ul> **標準和規范:** <ul> <li><a href="http://www.w3.org/TR/2014/WD-dom-20140204/" target="_blank">W3C DOM4</a></li> <li><a href="https://dom.spec.whatwg.org/" target="_blank">DOM Living Standard</a></li> <li><a href="http://www.w3.org/TR/2013/WD-DOM-Level-3-Events-20131105/" target="_blank">Document Object Model (DOM) Level 3 Events Specification</a></li> <li><a href="http://www.w3.org/DOM/DOMTR" target="_blank">Document Object Model (DOM) Technical Reports</a></li> </ul>