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.org

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.org

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.org

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:

Mastering:

DOM Enlightenment [read][$] or read online for free
Advanced JS Fundamentals to jQuery & Pure DOM Scripting [watch][$]
AdvancED DOM Scripting: Dynamic Web Design Techniques [read][$]
Fixing Common jQuery Bugs [watch][$]
jQuery Tips and Tricks [watch][$]
jQuery-free JavaScript [watch][$]
Douglas Crockford: An Inconvenient API - The Theory of the DOM [watch]

References/docs:

Standards/specifications: