Chapter 4
DOM Element Selection and Manipulation
WHAT’S IN THIS CHAPTER?
- The Power of jQuery Selectors
- Doing DOM Traversal
- Accessing and Modifying HTML Elements
Previously, you got your feet wet learning about the jQuery core, and getting a bird’s-eye view of how it works. In this chapter, you delve more into selectors, and manipulating elements retrieved by jQuery selectors.
Paraphrasing the Apple iPhone’s phrase, “There’s a selector for that” should be the jQuery motto. A necessity for web application development is the common pattern of selecting a DOM element, and then performing some operation on the selected element. With jQuery’s selector engine, this is a snap. If you’ve ever used CSS selectors, you will feel right at home using jQuery selectors. The syntax used by jQuery is a combination of CSS1-3 and XPath selectors.
This chapter takes you in depth into the many different ways to retrieve elements, control the context within which you select elements, and how to generate new HTML code on the fly. You’ll also check out the many shortcuts for manipulating the DOM.
To interactively experiment with the various selectors, use the interactive jQuery tester found at www.woods.iki.fi/interactive-jquery-tester.html. To try out the interactive tester, enter the selector pattern inside the text input at the top, and the HTML code in the text area on the bottom right. Upon changing the selector pattern, the matched elements are highlighted in the text area on the bottom left. ...
