Smashing CoffeeScript

CHAPTER 2

Using jQuery: DOM Manipulation

jQuery is considered the pre-eminent library for creating and manipulating HTML. This chapter is dedicated to demonstrating how to use jQuery on CoffeeScript projects. Although designed originally for use from JavaScript, the fluent API that jQuery offers works incredibly well in CoffeeScript—arguably, it’s easier to use than in the native JavaScript.

jQuery came to prominence for its straightforward approach to manipulating web pages, but has quickly become more of a utility library than that. As well as smoothing out various browser differences, it provides a range of additional functionality, to the extent that jQuery has almost become a platform itself.

jQuery’s fluent API

Arguably the finest decision made when authoring jQuery was the use of the fluent API. Coined in 2005 by design pattern gurus Martin Fowler and Eric Evans, the term “fluent” is associated with a method-chaining style of code structure. Although as a design pattern it had been in use decades by that point, it was particularly appropriate to dynamic languages.

Within each web browser, there is something called the Document Object Model, or DOM. But what is the DOM? It’s almost like a window into the internal functioning of the browser: it represents the internal data structure of how the browser has interpreted the HTML document, and any assets mentioned in the document, but does so in a standard way which for the most part is the same in every browser. The browser ...