22 www.it-ebooks.info Chapter ■ jQuery Fundamentals 2- 2 Using Conditional... locations: jQuery" name="description"/> 3-16. Selecting the First and/or Last Element from the Selected HTML Elements - Tài liệu text
  1. Trang chủ >
  2. Công Nghệ Thông Tin >
  3. Quản trị mạng >

3-16. Selecting the First and/or Last Element 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



table {

border:3px double green;

}





















































Employee NameDepartment NameSalary
Jane SmithMarketing$95,000
John SmithTechnology$90,000
Brian AdamSales$72,000
Mary JonesSupport$60,000
Michael JeffersonTechnology$85,000
Total Salary:$373,000











How It Works

In this code, the employee details—employee names, department names, and salary—are listed in a tabular form

using the , , and
HTML tags. If you want to select the first and last record and perform an action on

them, first select all the records using $(“tr”) and then use the first() and last() methods to select the first and

last records from these selected records.



81

www.it-ebooks.info



Chapter 3 ■ jQuery Selectors



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").first().css("background-color", "lightgray");

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

});

 

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.

 

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

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

 

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

HTML element at the first location of the selected HTML elements array 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.

Similarly, .last() selects the HTML element at the last location of the selected HTML elements’ array. Figure 3-24

displays the page when it is viewed in a browser.



Figure 3-24.  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 light gray. Figure 3-25 displays the effect of clicking the Test It button.



82

www.it-ebooks.info



Chapter 3 ■ jQuery Selectors



Figure 3-25.  Header and footer with gray background



3-17. Excluding Some Elements from the Matched HTML

Elements

Problem

You want to exclude some elements from the matched HTML elements so that the intended action is not performed

on them.



Solution

The following jQuery selector syntax excludes HTML elements from the set of already selected (matched) HTML

elements.

 

$("selector:not(excludeSelector) ")

 

where selector and excludeSelector are any of the basic selector types. You can use selector extension like :not

to narrow down the matched HTML elements. Listing 3-17 demonstrates the use of the :not selector extension to

exclude the HTML element matched by excludeSelector.

Listing 3-17.  Select all input elements except for buttons















83

www.it-ebooks.info



Chapter 3 ■ jQuery Selectors


































How It Works

In this code, a basic data-entry form is created using the ,