HTML and CSS Reference
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
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
Attribute ends with
Selects elements whose specified attribute value ends with a
certain string value.
Selects elements whose specified attribute value contains a
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);
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);