Overview of jQuery - HTML5 Programming for ASP.NET Developers - page 48

The click event handler displays the EmployeeID from the row being clicked. The td:first selector
returns the first < td> element in the current row. The text() method, when called without any parameter,
returns the text content from that table column ( EmployeeID in this case). If the header row is clicked, an
error message is displayed. Notice how the hasClass() method is used to determine whether a row has a
specific CSS class applied to it.

Selecting Elements Based on Their Attribute Value
Attribute selectors let you match attributes of HTML elements with certain criteria. It isn't limited to equal-
to matching; several other options are also available, as outlined in Table 2-4. Using an attribute selector
takes the following general form:
<element_name>[<attribute_name> <operator> <value_to_match>]

Table 2-4. Attribute Selectors

Attribute Selector Operator Description

= Attribute equals Selects elements whose specific attribute value exactly equals a

specific string value.

!= Attribute not equal Selects elements whose specific attribute value doesn't match a

specific string value or whose specified attribute is missing.

^= Attribute starts with Selects elements whose specified attribute value begins with a

specific value.

$=

Attribute ends with Selects elements whose specified attribute value ends with a

certain string value.

*= Attribute contains Selects elements whose specified attribute value contains a

specific string.

Attribute contains prefix

|=

Selects elements whose specified attribute value matches exactly
the specified value or that starts with the specified value followed
by a hyphen ( - ).

Has attribute selector Selects an element if a specified attribute is present.

Let's consider some examples that show how the attribute selectors are used.
Suppose you have a web page with a bunch of hyperlinks, and you wish to select hyperlinks whose
href attribute is exactly equal to http://www.microsoft.com . Th e following attribute selector does the trick.
The alert box displays the total number of elements selected:
alert($("a[href = 'http://www.microsoft.com']").length);
Suppose you have a few hyperlinks: http://microsoft.com , http://msdn.microsoft.com , an d http://
www.asp.net . Yo u need to select only those hyperlinks that contain the word Microsoft . The following
attribute contains selector selects the first two hyperlinks but not the third one:
alert($("a[href *= 'microsoft.com']").length);

Let's say a product catalog page displays many images. Some of them are product images, and others
are web site theme images (logo, menus, and so on). Also assume that the product images are stored in a
folder named product . To select all the product images for processing, you can use this attribute starts with
selector to return image elements whose src attribute begins with product :
alert($("img[src ^= 'product']").length);