Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Attribute Selectors
The CSS specification lets elements be identified by their attributes. Although browsers don't widely support this useful feature for styling documents, jQuery lets us use it regardless of the current browser.
Attribute selectors follow a syntax where an attribute expression that begins with the attribute's name appears between square brackets. For example, $('img[alt=""]') specifies that all <img> elements containing empty alt attributes are to be selected.
The following table lists the supported attribute selectors.
|
Attribute Selector |
Description |
Attribute Contains ("[name *= 'value']") |
Select elements that have the specified attribute with a value containing the given substring. The comparison is case sensitive. For example, $('a[name *= "list"]') selects all <a> elements whose name attribute contains list as a substring. This is the most flexible of jQuery's attribute selectors that match against a value. It selects an element when the selector's string appears anywhere within the element's attribute value. |
Attribute Contains Prefix ("[name |= 'value']") |
Select elements that have the specified attribute with a value equal to a given string or starting with that string followed by a hyphen (-). The comparison is not case sensitive. For example, $('a[hreflang |= "fr"]') selects all <a> elements whose hreflang attribute equals fr, or that begin with fr and are followed by a single hyphen character. This selector was introduced into the CSS specification to handle language attributes. |
Attribute Contains Word ("[name ~= 'value']") |
Select elements that have the specified attribute with a value containing a given word, delimited by spaces. The comparison is case sensitive. For example, $('a[name ~= "list"]') selects all <a> elements whose name attribute contains list delimited by whitespace on either side. |
Attribute Ends With ("[name $= 'value']") |
Select elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive. For example, $('a[name $= "list"]') selects all <a> elements whose name attribute contains a value ending in list. |
Attribute Equals ("[name = 'value']") |
Select elements that have the specified attribute with a value exactly equal to a certain value. The comparison is case sensitive. For example, $('a[name = "list"]') selects all <a> elements whose name attribute contains list. |
Attribute Not Equal ("[name != 'value']") |
Select elements that either don't have the specified attribute, or do have the specified attribute but not with a certain value. The comparison is case sensitive. For example, $('a[name != "list"]') selects all <a> elements without a name attribute or with a name attribute that does not contain list. |
Attribute Starts With ("[name ^= 'value']") |
Select elements that have the specified attribute with a value beginning exactly with a given string. The comparison is case sensitive. For example, $('a[name ^= "list"]') selects all <a> elements whose name attribute contains a value beginning with list. |
Has Attribute ("[name]") |
Select elements that have the specified attribute, with any value. For example, $('div[id]') selects all <div> elements that have id as an attribute. |
Multiple Attribute ("[name = 'value'][name2 = 'value2']") |
Select elements that match all of the specified attribute filters. Each successive attribute filter narrows the selection even more. For example, $('input[id][name $= "list"]') selects all <input> elements that have an id attribute and, from this selection, those <input> elements whose name attribute ends with list. |
Listing 4 presents an HTML document that demonstrates the Equals, Not Equal, and Has Attribute selectors.
Listing 4: Experimenting with the Equals, Not Equal, and Has Attribute selectors.
<html>
<head>
<title>Attribute Selector Demo: Equals, Not Equal, and Has Attribute</title>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.7.2.min.js">
</script>
</head>
<body>
<div id="1">
first division
</div>
<p>
<div id="2">
second division
</div>
<p>
<div id="3">
third division
</div>
<p>
<div>
fourth division
</div>
<script type="text/javascript">
$(function()
{
$('div[id="2"]').css("box-shadow", "5px 5px 5px #888888").css("border", "1px solid #ffaa00");
$('div[id!="2"]').css("border-style", "dotted");
$('div[id]').css("background-color", "yellow");
});
</script>
</body>
</html>
Listing 4 specifies four <div> elements, with the first three elements having unique id attribute values; the fourth <div> element doesn't have an id attribute. It also specifies a <script> element whose anonymous function modifies CSS properties for these elements.
The $('div[id="2"]') expression demonstrates Equals. The second <div> element is given a thin orangey border that reveals a shadow because its id attribute is assigned the value 2.
The $('div[id!="2"]') expression demonstrates Not Equals. The first, second, and fourth <div> elements are given a dotted border. This expression proves that the absence of an id attribute qualifies a <div> element for inclusion in the selected elements.
The $('div[id]') expression demonstrates Has Attribute. Each <div> element that has an id attribute is assigned a yellow background color. The first three <div> elements, which have this attribute, are given yellow backgrounds.
Figure 5 shows the resulting page.
)
Figure 5 The fourth <div> element is also given a dotted border.
Conclusion
Part 1 of this series introduced you to selectors and explored jQuery's basic and hierarchy selectors. Part 2 has added to your understanding with form and attribute selectors. Part 3 completes the series by taking you through three more categories: filter selectors, extension selectors, and custom selectors.