Selecting elements

This lesson covers

• Selecting elements with jQuery by using CSS selectors
• Discovering the unique jQuery-only filters
• Developing custom filters
• Learning the context parameter of the jQuery() function

In this lesson, we’ll examine in great detail how the DOM elements to be acted upon are identified by looking at one of the most powerful and frequently used capabilities of jQuery’s $() function: the selection of DOM elements via selectors. Throughout the pages of this lesson, you’ll become familiar with the plethora of selectors available. jQuery not only provides full support for all the CSS selectors but also introduces other ones. We’ll also introduce you to filters, many of which are special jQuery-only selectors that usually work with other types of selectors to further reduce a set of matched elements. As if this weren’t enough, you’ll learn how to create custom filters (also referred to as custom selectors or custom pseudo-selectors) in case your pages need one the library doesn’t support. We’ll also discuss context, the second parameter of the $() function, and describe the implications of its use.

A good number of the capabilities required by interactive web applications are achieved by manipulating the DOM elements that make up the pages. But before they can be manipulated, they need to be identified and selected. This and the next lesson provide you with the concepts to select elements. In the previous edition of this app, they were a unique lesson because their contents are highly related, but we decided to split them to help you digest the huge number of concepts described. Note that, despite the split, this lesson is still pretty long and terse. You may expect to go through it several times before mastering all its concepts. With this last note in mind, let’s begin our detailed tour of the many ways that jQuery lets you specify which elements are to be targeted for manipulation.