Using the Selectors API (^) ❘ 29
The great thing about jQuery and other JavaScript frameworks is that they had their own versions
of the Selectors API already implemented prior to its native inclusion in browsers, which allows
them to use the native implementation, if it is available. Using the native implementation makes
selecting elements screamingly fast. Otherwise, if the user has an older browser, the framework
can fall back on its own, slower, JavaScript-based implementation. This means that when using a
JavaScript framework like jQuery, the Selectors API is ubiquitously available across all platforms
it supports. jQuery 1.9 supports IE back to version 6 and should be used if you need compatibility
with the older versions of IE, in addition to all other popular browsers, of course. jQuery 2.0 drops
support for the older versions of Internet Explorer and supports only IE9 onward. jQuery 1.9 keeps
support for those legacy browsers and the way legacy browsers do things. jQuery 2.0 is a clean
break with the past and supports only the newer versions of browsers with excellent support for
standards.
Using the Selectors API
Using the Selectors API in jQuery is easy. As explained in Chapter 1, “Introduction to jQuery,”
everything that you want to do with jQuery originates from a single, simply named object called $
(a single dollar sign). You can also use “jQuery” in place of the dollar sign, but from here on
throughout this book, I will use only the dollar sign, and I will refer to it either as “the dollar sign
object” or “the dollar sign method,” depending on context, because it is really both a method and
an object at the same time.The dollar sign is both a method and an object because it can be used like a function call, but it also
has member properties and methods that you can call. The dollar sign is named after a single dollar
sign for one reason only, and that is to reduce the amount of code that you have to write.Here’s a simple example of how you would use this method with a selector to add a click behavior
to a collection of links. Basically, the object of the following code is to force the links to open in a
new window, instead of using the target attribute, which can sometimes be left out when content is
managed, and because of this it’s easy to abstract away its use by putting in a little JavaScript that
follows a few rules that most companies tend to want when it comes to the question of when to open
a link in a new window.Say that you have a markup document that looks like this. (You can try this example for yourself;
it’s available as Example 2-1 in the book’s download materials.)<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="content-language" content="en-us" />
<title>Links</title>
<script type='text/javascript' src='../jQuery.js'></script>
<script type='text/javascript' src='Example 2-1.js'></script>
<link type='text/css' href='Example 2-1.css' rel='stylesheet' />
</head>
<body>
<ul id="exampleFavoriteLinks">