Pro PHP and jQuery by Jason Lengstorf.pdf - Computer Science ...

14
CHAPTER 1 ■ INTRODUCING JQUERY
To select descendant spans in your test document, execute the following command in the Firebug
console:
$("body span");
This will find all spans contained within the body tag () of the document, even though the
spans are also inside paragraph tags.
>>> $("body span");
[ span, span.foo ]
Selecting Child Elements
Child elements are a more-specific style of descendant selector. Only the very next level of element is
considered for matching. To select a child element, use the parent element followed by a greater than (>)
symbol, followed by the child element to match:
parent>child
In your test file, try to select any spans that are child elements of the body element by entering the
following command in the console:
$("body>span");
Because there are no spans directly contained within the body element, the console will output the
following:
>>> $("body>span");
[ ]
Next, filter all span elements that are direct children of a paragraph element:
$("p>span");
The resulting output looks like this:
>>> $("p>span");
[ span, span.foo ]
Selecting Next Elements
Occasionally in a script, you’ll need to select the next element in the DOM. This is accomplished by
providing an identifier for the starting element (any selector pattern works here), followed by a plus sign
(+), followed by the selector to match the next instance of:
start+next
Try this in the console by typing the following command: