jQuery in Action
18
CHAPTER 2
Creating the wrapped element set
The selector that you type (in this case
li
) is applied to the
HTML
page loaded
into an
<iframe>
in the
DOM
Sample pane at upper right. The jQuery code on
the sample page causes all matched elements to be highlighted with a red border.
After clicking Apply, you should see the display shown in figure 2.2 in which all
After clicking Apply, you should see the display shown in figure 2.2 in which all
<li>
elements in the page are highlighted.
Note that the
<li>
elements in the sample page have been outlined and that
the executed jQuery statement, along with the tag names of the selected ele-
ments, has been displayed below the Selector text box.
ments, has been displayed below the Selector text box.
The
HTML
markup used to render the
DOM
Sample page is displayed in the
lower pane labeled
HTML
for
DOM
Sample to help you experiment with writing
selectors.
We'll talk more about using this Lab as we progress through the chapter. But
first, let's wade into familiar territory: traditional
CSS
selectors.
Figure 2.1 The Selectors Lab page allows us to observe the behavior of any selector we choose in
real time.
real time.