Web Development with jQuery

Chapter 2Selecting and Filtering

This chapter talks about jQuery's sophisticated implementation of the Selectors API, which provides the ability to select elements in the DOM using CSS selectors. jQuery's Selectors API allows you to select one or more elements from the DOM using a selector; then either you can 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, 3rd Edition, 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:

div#exampleFormWrapper form#exampleSummaryDialog {
    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 can assign id and class names to elements, and you can control the presentational aspects of elements specifically using selectors. In jQuery, the concept of selectors as applied to CSS is also applied to the concept of the Document Object Model (DOM). In the DOM, you have available to you every element that exists in the markup of your document, ...