3-11. Selecting HTML Elements that Have a Specified Attribute Regardless of its Value
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
Listing 3-10. Selector to select all elements with the specified attribute name
Windows Phone Recipes- Visual C# 2010 Recipes
- UML Applied
- Sharepoint 2010 Designer Guide
- Pro WPF in C# 2010
- Zend Enterprise PHP Patterns
- Web Designer's Reference
- Practical Ajax Projects with Java
- The Definitive Guide to HTML5 WebSocket
- The Essential Guide to HTML5 and CSS3
How It Works
In this code, the book titles are listed with the hyperlink on the first book title. If you want to select all the items that
have an tag and a hyperlink attribute with them, use the "[attributeName]" 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 () {
$("[href]").css("background-color", "yellow");
});
This code selects the input button with id as btnTestIt and binds a function (the event handler) to its click
event. When a user clicks this button, the following code is executed.
70
www.it-ebooks.info
Chapter 3 ■ jQuery Selectors
$("[href]").css("background-color", "yellow");
$("[href]") selects the HTML element and
returns the jQuery object. The css() method is executed on the HTML element in the returned jQuery object. Refer to
Recipe 3-2 for the css() method explanation. Figure 3-16 displays the page when it is viewed in a browser.
Figure 3-16. Initial page display
When you press the Test It button, the button’s click event handler changes the background color of the selected
element to yellow. Figure 3-17 displays the effect of clicking the Test It button.
Figure 3-17. Highlighted item when the Test It button is clicked
Listing 3-11 provides the code for the HTML file that is displayed when the “Windows Phone Recipes” link is clicked.
Listing 3-11. Contents of the file Ch03-Listing 3-11-Windows Phone Recipes.htm
71
www.it-ebooks.info
Chapter 3 ■ jQuery Selectors
Category:.NET
Book ID: B001
Title:Windows Phone Recipes
Figure 3-18 displays the page when the book title/hyperlink “Windows Phone Recipes” is clicked.
Figure 3-18. Displays the book’s details
3-12. Selecting the nth Item from the Selected HTML Elements
Problem
You want to select a particular HTML element from an already selected set of HTML elements.
Solution
The following jQuery selector syntax selects an HTML element at a specific index number from the set of already
selected (matched) HTML elements.
$(selector).eq(indexNumber)
where selector is any of the basic selector types, most of which you have already read about in previous sections and
indexNumber is the zero-based index number of the desired item in the HTML elements array. When you use basic
selector types, it returns a jQuery object. The returned jQuery object contains all the matched HTML elements as
an array.
Such methods, which narrow down the selected HTML elements, are also called filter methods. Listing 3-12
demonstrates the use of the eq() method to select an HTML element located at a specified index number.
Listing 3-12. Using the eq() method to select a specific element from the set of already selected elements
| Employee Name | Department Name | 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 employee details—employee name, department name, and salary—are listed in a tabular form using
the
| HTML tags. If you want to select the first record and perform an action on it, you must first select all the records using $(“tr”) and use the eq(0) method to select the first record out of these selected records. 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 () { $("tr").eq(0).css("background-color", "lightgray"); }); 73 www.it-ebooks.info Xem Thêm Tài liệu liên quan Tải bản đầy đủ (.pdf) (621 trang) |
