jQuery in Action
20
CHAPTER 2
Creating the wrapped element set
We can use jQuery out of the box with the
CSS
selectors that we're already
accustomed to using. To select elements using jQuery, we wrap the selector in
$()
,
as in
$("p a.specialClass")
With a few exceptions, jQuery is fully
CSS3
compliant, so selecting elements this
way will come with no surprises; the same elements that would be selected in a
style sheet by a standards-compliant browser will be selected by jQuery's selector
engine. Note that jQuery doesn't depend upon the
style sheet by a standards-compliant browser will be selected by jQuery's selector
engine. Note that jQuery doesn't depend upon the
CSS
implementation of the
browser it's running within. Even if the browser doesn't implement a standard
CSS
selector correctly, jQuery will correctly select elements according to the rules
of the World Wide Web Consortium (
W3C
) standard.
For some exercise, go play with the Selectors Lab and run some experiments
with the various basic
CSS
selectors.
These basic selectors are powerful, but sometimes we need even finer-grained
control over which elements we want to match. jQuery meets this challenge and
steps up to the plate with even more advanced selectors.
steps up to the plate with even more advanced selectors.
2.1.2 Using child, container, and attribute selectors
For more advanced selectors, jQuery uses the next generation of
CSS
supported
by Mozilla Firefox, Internet Explorer 7, Safari, and other modern browsers.
These advanced selectors include selecting the direct children of some elements,
elements that occur after other elements in the
These advanced selectors include selecting the direct children of some elements,
elements that occur after other elements in the
DOM
, and elements with
attributes matching certain conditions.
Sometimes, we'll want to select only the direct children of a certain element.
For example, we might want to select list elements directly under some list, but
not list elements belonging to a sublist. Consider the following
not list elements belonging to a sublist. Consider the following
HTML
fragment
from the sample
DOM
of the Selectors Lab:
<ul class="myList">
<li><a href="http://jquery.com">jQuery supports</a>
<ul>
<li><a href="css1">CSS1</a></li>
<li><a href="css2">CSS2</a></li>
<li><a href="css3">CSS3</a></li>
<li>Basic XPath</li>
</ul>
</li>
<li>jQuery also supports
<ul>