Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Basic Selectors
jQuery provides various categories of selectors. Basic selectors are based on the World Wide Web Consortium's Cascading Style Sheets Level 1 specification.
The following table lists the supported basic selectors.
|
Basic Selector |
Description |
All ("*") |
Select all elements in the document. This selector results in slower selection when not appearing by itself. Example: $('*'). |
Class (".class") |
Select all elements with the given class. For example, $('.note') selects all elements whose class attribute is set to note. |
Element ("element") |
Select all elements with the given tag name. For example, $('a') selects all <a> elements in the document. |
ID ("#id") |
Select a single element with the given id attribute. For example, $('#article') selects the element whose id attribute is set to article. Don't use the same id value for more than one element, because jQuery returns only the first matched element in the DOM. |
Multiple ("selector1, selector2, selectorN") |
Select the combined results of all the specified selectors. For example, $('a, img, .note, #article') selects all <a> and <img> elements, all elements belonging to the note class, and the element whose id attribute is set to article. This example shows that you can specify a comma-separated list of selector expressions to expand the list of elements to be selected. Elements are returned in document order. |
Listing 1 presents an HTML document that demonstrates basic selectors.
Listing 1: Experimenting with basic selectors.
<html>
<head>
<title>Basic Selector Demo</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.7.2.min.js">
</script>
</head>
<body>
<div id="1">
This is my first <span>div element</span>.
</div>
<div class="mydiv">
Div #2
</div>
<div>
Div #3
</div>
<div class="mydiv">
Div #4
</div>
<script type="text/javascript">
$(function()
{
$("*").css("border", "1px solid blue");
$("#1").css("color", "red");
$(".mydiv").css("color", "green");
$("span").css("font-size", "24px");
$(".mydiv, span").css("font-style", "italic");
});
</script>
</body>
</html>
Listing 1 specifies a <script> element that includes the production version of jQuery 1.7.2, which is the latest version at the time of writing. The production version is "minified" (variable and other names have been shortened) and compressed to load quickly.
Listing 1 also specifies a <script> element whose $(function() { /* ... */ }); expression executes the anonymous function passed as an argument to this jQuery(callback) constructor after the DOM tree has been created.
The anonymous function executes the following expressions:
- $("*").css("border", "1px solid blue") surrounds each element with a 1-pixel thick solid blue border.
- $("#1").css("color", "red") colors the text red in any <div> element whose id attribute is set to 1.
- $(".mydiv").css("color", "green") colors the text green in any <div> element whose class attribute is set to mydiv.
- $("span").css("font-size", "24px") sets the size of text bracketed by <span> and </span> tags to 24 pixels.
- $(".mydiv, span").css("font-style", "italic") italicizes text in <div> elements whose class attribute is set to mydiv, and italicizes text in span elements.
Figure 1 shows the resulting page.
)
Figure 1 The <body> element, each <div> element, and the nested <span> element are surrounded with a blue border.
Hierarchy Selectors
Hierarchy selectors let you match elements within the context of other elements. Some selectors match only elements that are direct children of their parent elements; other selectors match elements all the way down the hierarchy (for example, the child of a child of a parent element).
The following table lists the supported hierarchy selectors.
|
Hierarchy Selector |
Description |
Child ("parent > child") |
Select all direct child elements specified by child of elements specified by parent. For example, $('ol.top > li') selects all <li> elements that are immediate children of <ol> elements whose class attribute is set to top. <li> elements of nested <ol> elements are not selected. |
Descendant ("ancestor descendant") |
Select all elements that are descendants of a given ancestor. A descendant of an element could be a child, grandchild, great-grandchild, and so on. For example, $('#article div') selects all <div> elements that are descendants of the element whose id attribute is set to article. |
Next Adjacent ("prev + next") |
Select all next elements matching next that are immediately preceded by a sibling prev element. For example, $('#page + div') selects the <div> element that is immediately preceded by a sibling element whose id attribute is set to page. |
Next Siblings ("prev ~ siblings") |
Select all sibling elements that follow after the prev element, have the same parent, and match the filtering siblings selector. For example, $('#page ~ div') selects the <div> element that is immediately preceded by a sibling element whose id attribute is set to page, and selects sibling <div> elements that follow. |
Listing 2 presents an HTML document that demonstrates hierarchy selectors.
Listing 2: Experimenting with hierarchy selectors.
<html>
<head>
<title>Hierarchy Selector Demo</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.7.2.min.js">
</script>
</head>
<body>
<ul class="top">
<li>
List item #1
</li>
<li>
List item #2
</li>
<li>
List item #3
<ul style="color: green">
<li>
List item #3.1
</li>
<li>
List item #3.2
</li>
</ul>
</li>
<li>
List item #4
</li>
</ul>
<p>
Paragraph #1
</p>
<p>
Paragraph #2
</p>
<script type="text/javascript">
$(function()
{
$("ul.top > li").css("border", "1px solid blue");
$("ul.top li").css("color", "brown");
$("ul+p").css("color", "red");
$("ul~p").css("font-weight", "bold");
});
</script>
</body>
</html>
The anonymous function executes the following expressions:
- $("ul.top > li").css("border", "1px solid blue") surrounds each <li> element that is a direct child of the <ul> element whose <class> attribute is set to top with a 1-pixel thick solid blue border.
- $("ul.top li").css("color", "brown") colors the content brown in all <li> elements that are descendants of the <ul> element whose class attribute is set to top. (The $("ul.top li").css("color", "brown") expression overrides the inner <ul> element's style="color: green" attribute. If you change this expression to $("ul.top > li").css("color", "brown"), "List item #3.1" and "List item #3.2" will be colored green because the reach of ul.top > li doesn't extend past direct <li> child elements, so the style="color: green" attribute of the inner <ul> element takes over.)
- $("ul+p").css("color", "red") colors red the first <p> element after the outermost <ul> element. The <p> element is a sibling of <ul>.
- $("ul~p").css("font-weight", "bold") boldfaces all <p> sibling elements after the outermost <ul> element.
Figure 2 shows the resulting page.
)
Figure 2 The <li> elements of the nested <ul> element are not surrounded by a blue border.
Conclusion
Selectors let you select DOM elements, which can be modified; for example, by setting a CSS property on each selected element that supports the property.
Along with basic and hierarchy selectors, jQuery supports form and attribute selectors. Part 2 introduces you to these selector categories.