3-12. Selecting the n th Item from the Selected HTML Elements

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

.listDepartments {

width: 300px;

border: 3px double green;

background-color: lightyellow;

}

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 , , and

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

Chapter 3 ■ jQuery Selectors

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.

$("tr").eq(0).css("background-color", "lightgray");

The above code statement can also be written as

$("tr:eq(0)").css("background-color", "lightgray");

or as

$("tr:first").css("background-color", "lightgray");

$("tr") selects all the HTML elements with tag name "tr" and returns the jQuery object. .eq(0) selects the

HTML element at the index number 0 out of these selected HTML elements in the returned jQuery object and returns

another jQuery object. The css() method is executed on the selected HTML element in the returned jQuery object.

css("background-color", "lightgray") changes the background color of the selected element to light gray.

Figure 3-19 displays the page when it is viewed in a browser.

Figure 3-19. 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-20 displays the effect of clicking the Test It button.

Figure 3-20. Table header with a light gray background

74

www.it-ebooks.info

Chapter 3 ■ jQuery Selectors

3-13. Selecting Even and Odd Numbered Items from the

Matched HTML Elements

Problem

You want to select even or odd numbered HTML elements from the matched set of HTML elements.

Solution

The following jQuery selector syntax selects even or odd numbered HTML elements from the set of already selected

(matched) HTML elements.

$(selector:even)

$(selector:odd)

where selector is any of the basic selector types. You can use selector extensions like :even and :odd to narrow down

the matched HTML elements. Listing 3-13 demonstrates the use of the :even and :odd selector extensions to select

the HTML element located at the even and odd numbered locations, respectively. In the array of HTML elements,

location number is zero-based.

Listing 3-13. Selects even and odd numbered elements

75

www.it-ebooks.info

Chapter 3 ■ jQuery Selectors

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 employee details—Employee Name, Department Name, and Salary—are listed in a tabular form

using the , , and ) have the "row" CSS class. If you want to select the even numbered or odd numbered rows, excluding the

header record, you first select all the records using $(".row") selector and then use the :even and :odd extensions to

select the even and odd numbered elements from these matched 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.

$(".row:even").css("background-color", "lightblue");

$(".row:odd").css("background-color", "lightyellow");

$(".row") selects all the HTML elements with the class name "row" and then $(".row:even") narrows down

the matched elements to select only the even numbered elements and returns a jQuery object. The css() method is

executed on the selected HTML element in the returned jQuery object. css("background-color", "lightblue")

changes the background color of the selected elements (the even numbered ones) to light blue. Similarly, the odd

numbered selected elements’ background color changes to light yellow. Figure 3-21 displays the page when it is

viewed in a browser.

Figure 3-21. Even and odd numbered elements with different background colors

76

www.it-ebooks.info

Xem Thêm