In order to write effective jQuery, it's important to write well marked-up HTML. Browsers are generally forgiving, and will render most markup to the best of their abilities. But jQuery, which has been referred to as the "find-something/do-something" framework, accomplishes the "find-something" part with its powerful selector engine (see http://api.jquery.com/cateogry/selectors/).

For example, including <thead>, <tbody>, and <tfoot> tags in your table give jQuery direct access to those DOM elements. Consider the following table markup:

<table id="myTable"> 
<thead>
  <tr><th>Column 1</th></tr>
  <tr><th>Column 2</th></tr>
</thead>
<tfoot>
  <tr><td colspan="2">&copy; Charlie Griefer. So there!</td></tr>
</tfoot>
<tbody>
  <tr>
    <td class="firstColumn">Column 1 data</td>
    <td>Column 2 data</td>
  </tr>
  <tr>
    <td class="firstColumn">More Column 1 data</td>
    <td>More Column 2 data</td>
  </tr>
</tbody>
</table>

With the properly structured table, selecting the <tr> in the table footer is as simple as:

$( "#myTable tfoot tr" );

What this does is select the element with an ID of myTable, then selects that element's <tfoot>, and then <tr> within.

Without the <tfoot> tag, the selector would look more like:

$( "#myTable tr:last" );

While this selector doesn't look any worse, what it's doing is actually selecting all of the <tr> elements within the table, and then filtering out all but the last of the rows. This is inefficient at best. Why select all of the rows if you only want one?

Another aspect of well marked-up HTML that helps tremendously with jQuery is the use of id and class attributes.

An id, as the name implies, should identify a unique element. There should only be one ID of a given value on any particular page. The table in the preceding markup has an ID of myTable. Not particularly original, but descriptive. No other elements on the page should be assigned that ID.

A class, on the other hand, is reused and identifies a group of elements. The preceding markup shows that all of the <td> elements that make up the first column have a class of firstColumn. This would allow us to easily display all of the text in all cells in the first column in bold via:

$( "#myTable .firstColumn" ).css( "font-weight", "bold" );

Prefacing the class with the ID of the element is optional. The following code works as well:

$( ".firstColumn" ).css( "font-weight", "bold" );

But this code searches the entire page for any elements with the class of firstColumn. The first code sample is concerned only with elements inside of a specified element. This makes it more efficient.

Besides a well marked-up table, the only other thing you need to get started is jQuery itself.

Including jQuery into your pages is simple. You can either download it from http://www.jquery.com/download/, or include it from a CDN such as Google's or jQuery's.

All of the code samples in this book will include the beta version of jQuery 2.0 from jQuery's CDN. However, all of the recipes should work with any recent version of jQuery.

jQuery 2.0 should work with most modern browsers. See http://jquery.com/browser-support/ for the list of supported browsers in both jQuery 2.0 as well as jQuery 1.9. If any of the code samples fail to run in your browser, please either update to a newer browser, or modify the code samples to include and use an older version of jQuery that supports your browser.