3-7. Selecting HTML Elements by Class Name
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (17.05 MB, 621 trang )
Chapter 3 ■ jQuery Selectors
Solution
The following jQuery selector syntax selects all the HTML elements with the specified className:
$(".className")
where className is one of the CSS class names of the HTML element and the return value is a jQuery object.
For example, for , dataEntry and
mandatoryField are CSS classes of this input form field. Listing 3-6 demonstrates the use of jQuery selector to select
all the HTML elements that match the specified class name.
Listing 3-6. jQuery selector selects all the HTML elements that match the specified class name
| Employee Name | Department | Salary |
| Jane Smith | Marketing | $95,000 |
| John Smith | Technology | $90,000 |
| Brian Adam | Sales | $72,000 |
| Mary Jones | Support | $60,000 |
| Michael Jefferson | Technology | $85,000 |
How It Works
In this code, the employees’ details—employee name, department, and salary—are listed in a tabular format. If you
want to select all the HTML elements with a specific class name, use the .className selector.
After the DOM is ready (i.e., all HTML elements are created and loaded in the browser memory), the following
code is executed as a result of the document-ready event handler.
$("#btnTestIt").click(function () {
$(".evenRow").css("background-color", "lightyellow");
$(".oddRow").css("background-color", "lightblue");
});
This code selects the input button with id as btnTestIt and binds a function (the event handler) to its click
event. When the user clicks this button, the following code is executed.
$(".evenRow").css("background-color", "lightyellow");
$(".oddRow").css("background-color", "lightblue");
$(".evenRow") selects all the HTML elements with class evenRow and returns the jQuery object. The css()
method is executed on all the HTML elements in the returned jQuery object. Refer to Recipe 3-2 for the css() method
explanation. Similarly, for all HTML elements with the class name as oddRow, the background-color is changed to
lightblue. Figure 3-10 displays the page when it is viewed in a browser.
Figure 3-10. Initial page display
62
www.it-ebooks.info
Chapter 3 ■ jQuery Selectors
When you press the Test It button, the button’s click event handler changes the background color of the selected
elements. Elements with an evenRow class name change to lightyellow and the elements with the class oddRow
change to lightblue. Figure 3-11 displays the effect of clicking the Test It button.
Figure 3-11. Even and odd numbered rows are highlighted with different background colors
3-8. Selecting HTML Elements that Match Any of the Specified
Multiple Selectors
Problem
You want to know how to get a single set of selected elements using multiple selection criteria (selectors).
Solution
The following jQuery selector syntax selects the HTML element with the specified ID:
$("selector1, selector2, ...")
The return value is a jQuery object. Listing 3-7 demonstrates the use of multiple jQuery selectors to get a
combined set of selected elements matching any of the specified selectors.
Listing 3-7. Selecting elements that match any of the specified selectors
How It Works
In this code, the form data-entry screen is created so users can enter their names, addresses, state, and any comments.
These form elements use the following HTML tags—input, select, and textarea. If you want to perform the same
action on elements with these different HTML tags, you use the multiple selector syntax.
After the DOM is ready (i.e., all HTML elements are created and loaded in the browser memory), the following
code is executed as a result of the document-ready event handler.
$("input, select, textarea" ).focus(function () {
$(this).css("background-color", "yellow");
});
$("input, select, textarea").blur(function () {
$(this).css("background-color", "white");
});
This code selects all HTML elements with tag name of input, select, or textarea and binds two event handlers
to them—the first one is triggered when a selected HTML element gets the focus and the second event handler is
triggered when it loses the focus.
On the input focus event, the following code is executed.
$(this).css("background-color", "yellow");
$(this) selects the HTML element that triggered the event and returns the jQuery object. The css() method
is executed on all the HTML elements in the returned jQuery object. Refer to Recipe 3-2 for the css() method
explanation.
On the selected element’s blur event, the following code is executed.
$(this).css("background-color", "white");
64
www.it-ebooks.info
