AVAILABLE NOW: Front-End Developer Handbook 2017
Learn DOM, BOM, & jQuery
DOM - The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents. The nodes of every document are organized in a tree structure, called the DOM tree. Objects in the DOM tree may be addressed and manipulated by using methods on the objects. The public interface of a DOM is specified in its application programming interface (API).
โ Wikipedia
BOM - The Browser Object Model (BOM) is a browser-specific convention referring to all the objects exposed by the web browser. Unlike the Document Object Model, there is no standard for implementation and no strict definition, so browser vendors are free to implement the BOM in any way they wish.
โ Wikipedia
jQuery - jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. jQuery is the most popular JavaScript library in use today, with installation on 65% of the top 10 million highest-trafficked sites on the Web. jQuery is free, open-source software licensed under the MIT License.
โ Wikipedia
The ideal path, but certainly the most difficult, would be to first learn JavaScript, then the DOM, then jQuery. However, do what makes sense to your brain. Most front-end developers learn about JavaScript and then DOM by way of first learning jQuery. Whatever path you take, just make sure JavaScript, then DOM, or jQuery don't become a black box.
General Learning:
- Codecademy.com jQuery [watch]
- The Document Object Model [read]
- HTML/JS: Making Webpages Interactive [watch]
- HTML/JS: Making Webpages Interactive with jQuery [watch]
- jQuery Enlightenment [read]
Mastering:
- AdvancED DOM Scripting: Dynamic Web Design Techniques [read][$]
- Advanced JS Fundamentals to jQuery & Pure DOM Scripting [watch][$]
- Douglas Crockford: An Inconvenient API - The Theory of the DOM [watch]
- DOM Enlightenment [read][$] or read online for free
- Fixing Common jQuery Bugs [watch][$]
- jQuery-Free JavaScript [watch][$]
- jQuery Tips and Tricks [watch][$]
References/Docs:
- jQuery Docs
- MDN Browser Object Model
- MDN Document Object Model
- MDN Event reference
- MSDN Document Object Model (DOM)