3-5. Selecting HTML Elements by Tag 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
For example, for 
, IMG is the tag name and its selector is specified as “IMG”.
Listing 3-4 demonstrates the use of jQuery selector to select an HTML element by its tag name.
Listing 3-4. jQuery selector to select all elements with the specified tag name
55
www.it-ebooks.info
Chapter 3 ■ jQuery Selectors
How It Works
In this code, various photos are displayed using the
with tag name as IMG), you use the "htmlElementTagName" 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.
$("#btnReduceOpacity").click( function() {
$("img").css("opacity", "0.3");
});
$("#btnReset").click( function() {
$("img").css("opacity", "1.0");
});
This code selects the input button with id as btnReduceOpacity and binds a function (the event handler) to its
click event. When the user clicks this button, the following code is executed.
$("img").css("opacity", "0.3");
$("img") selects all the HTML elements with the tag name
method is executed on all the HTML elements in the returned jQuery object. Refer to Recipe 3-2 for the css() method
explanation. css("opacity", "0.3") changes the opacity of all selected elements (i.e., all images) to 0.3. When the
Reset button is clicked, the opacity reverts to its default value of 1.0. Opacity ranges from 0.0 (fully transparent) to
1.0 (full opaque). Figure 3-6 displays the page when it is viewed in a browser.
56
www.it-ebooks.info
Chapter 3 ■ jQuery Selectors
Figure 3-6. Initial page display with images opacity set to 1.0
When you press the Reduce Opacity button, the button’s click event handler changes the opacity of all selected
elements to 0.3. Figure 3-7 displays the effect of clicking the Reduce Opacity button.
57
www.it-ebooks.info
Chapter 3 ■ jQuery Selectors
Figure 3-7. Reduced opacity when the Reduce Opacity button is clicked
3-6. Selecting HTML Elements by Tag Name to Highlight a
Focused Field
Problem
You want to know how to highlight a focused field by using the tagName selector.
Solution
The following jQuery selector syntax selects all the HTML elements with the specified htmlElementTagName:
$("htmlElementTagName")
where htmlElementTagName is the tag name of the HTML element and the return value is a jQuery object. Listing 3-5
demonstrates the use of the jQuery tagName selector to highlight a field that’s in focus.
58
www.it-ebooks.info
Chapter 3 ■ jQuery Selectors
Listing 3-5. Using the jQuery tagName selector to highlight a focused field
How It Works
In this code, a typical form is created to accept data entry from the user. If you want to highlight the current data-entry
field when the user moves from field to field, you can use the htmlElementTagName 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.
$("input").focus(function () {
$(this).css("background-color", "yellow");
});
$("input").blur(function () {
$(this).css("background-color", "white");
});
59
www.it-ebooks.info
