Web Development with jQuery®

(Elliott) #1

Selecting 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 fi ltered down to a more specifi c
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 fi rst part of a CSS rule, before the
fi rst 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 specifi cally 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, and you can traverse the DOM and select the elements you want to work with
using selectors, just like you use in your CSS style sheets.

2


http://www.it-ebooks.info

Free download pdf