jQuery in Action
Unobtrusive JavaScript
3
jQuery statements to make your pages come alive. Let's briefly examine how this
code snippet works.
code snippet works.
We identify every even row (
<tr>
element) in all of the tables on the page and
add the
CSS
class
striped
to each of those rows. By applying the desired back-
ground color to these rows via a
CSS
rule for class
striped
, a single line of Java-
Script can improve the aesthetics of the entire page.
When applied to a sample table, the effect could be as shown in figure 1.1.
The real power in this jQuery statement comes from the selector, an expression
The real power in this jQuery statement comes from the selector, an expression
for identifying target elements on a page that allows us to easily identify and grab
the elements we need; in this case, every even
the elements we need; in this case, every even
<tr>
element in all tables. You'll
find the full source for this page in the downloadable source code for this book in
file chapter1/zebra.stripes.html.
file chapter1/zebra.stripes.html.
We'll study how to easily create these selectors; but first, let's examine how the
inventors of jQuery think JavaScript can be most effectively used in our pages.
1.2 Unobtrusive JavaScript
Remember the bad old days before
CSS
when we were forced to mix stylistic
markup with the document structure markup in our
HTML
pages?
Anyone who's been authoring pages for any amount of time surely does and,
perhaps, with more than a little shudder. The addition of
CSS
to our web devel-
opment toolkits allows us to separate stylistic information from the document
structure and give travesties like the
structure and give travesties like the
<font>
tag the well-deserved boot. Not only
does the separation of style from structure make our documents easier to
Figure 1.1
Adding "zebra
stripes" to a table is
easy to accomplish
in one statement
with jQuery!
stripes" to a table is
easy to accomplish
in one statement
with jQuery!