(^28) ❘ CHAPTER 2 SELECTING AND FILTERING
After you select elements from the DOM, you can apply behavior to them. You can listen to events
and make something happen when a user clicks an element, for example. You can make something
happen when the user’s mouse cursor comes over or leaves an element. Basically, you can make your
web documents look and behave more like desktop applications. You are no longer limited to static
content as you are with markup and CSS alone—you can apply behavior as well.
This chapter describes how to use jQuery’s Selectors API to retrieve elements from a document, in
addition to providing some practical examples of usage. It also describes how you can chain calls
in jQuery. One use for this is fi ltering a selection, which you would do to reduce a larger selection
of elements down to a smaller selection. Finally, it discusses how jQuery’s Event API works in rela-
tion to the W3C’s Event API and Microsoft’s event model as it was implemented up to IE8. IE9 and
newer all have support for the standard W3C event model, in addition to Microsoft’s older, propri-
etary event model.
The Origin of the Selectors API
The concept of a Selectors API was fi rst dreamed up by Dean Edwards, a JavaScript guru who fi rst
created a Selectors API in JavaScript in a free, open-source package he called cssQuery. Not long
after Dean pioneered the idea and produced a working, proof-of-concept implementation of that
idea, it was taken up and expanded upon by John Resig (and other JavaScript framework authors,
mutually exclusive to John’s efforts) and implemented in his jQuery framework. This led to some
back-and-forth collaboration and competition between Dean, John, and other JavaScript framework
authors, which resulted in much-needed performance boosts in these ad-hoc implementations, which
at their conception were quite slow in some scenarios.Not long after Dean came up with the concept of a Selectors API, W3C members and editors Anne
van Kesteren and Lachlan Hunt drafted it into a specifi cation for the W3C. The offi cial W3C
Selectors API involves two methods, one for selecting a single element called document.querySelec-
tor() and one for selecting multiple elements called document.querySelectorAll().NOTE The names for the offi cial API were under considerable debate for quite
some time because no browser makers could agree on the names used. The
names were fi nally put to a vote, with these names being the ones decided on.
The controversy surrounding the names was not without merit, as this API is
quite possibly the most important change to JavaScript that will have a lasting
impact for years to come. It’s important in that, in one fell swoop, it replaces
methods like document.getElementById, document.all, and document.getElements-
ByTagName, which are no longer needed—because these methods let you use selec-
tor syntax, you can select by id, by tag name, by class name, or by context, via
whatever selectors the browser already supports for CSS.document.querySelector and document.querySelectorAll are both implemented natively in Chrome,
Safari, Firefox, and IE (back to IE8).