Beginning JavaScript® and CSS Development with jQuery

Chapter 2. Selecting and Filtering

In this chapter, I talk about jQuery's sophisticated implementation of a Selectors API, which provides the ability to select elements in the DOM using selectors just like you use in CSS. jQuery's Selectors API allows you to select one or more elements from the DOM using a selector, then you can either use that result set, or you can pass those elements on to be filtered down to a more specific result set.

If you've never heard of a selector before, then I recommend that you have a look at my book, Beginning CSS: Cascading Style Sheets for Web Design, 2nd ed. (Wrox, 2004; ISBN 978-0-7645-7642-3), which has extensive coverage of selectors.

In CSS, you can apply style to one or more elements by writing a style sheet. You choose which elements to style based on the syntax that appears in the first part of a CSS rule, before the first curly brace, which is known as the selector. Here is a sample CSS selector:

body form#hProductSummaryDialogue {
    display: block;
    position: absolute;
    z-index: 1;
    top: 22px;
    left: 301px;
    right: 0;
    bottom: 24px;
    width: auto;
    margin: 0;
    border: none;
    border-bottom: 1px solid rgb(180, 180, 180);
}

Using markup and CSS, you are able to assign IDs and class names to elements, and you are able to control the presentational aspects of elements very specifically using selectors. In jQuery, that concept of selectors as applied to CSS is also applied to the concept of the DOM, or Document Object Model. In the DOM, you have available to ...