jQuery – Attribute selector examples
In jQuery, the attribute selectors are wrap inside a bracket []. Here’s the supported attribute selectors :
1. Has Attribute [A]
Select all elements that have the “A” attribute.
Examples
$(‘a[rel]’) – selects all elements matched by <a> that have a rel attribute.
2. Attribute Value Equals [A=B]
Select all elements that have the A attribute with a value exactly equal to B.
Examples
$(‘a[rel=nofollow]’) – selects all elements matched by <a> that have a rel attribute with a value exactly equal to ‘nofollow’.
3. Attribute Value Not Equals [A!=B]
Select all elements that do not have the A attribute with a value exactly equal to B.
Examples
$(‘a[rel!=nofollow]’) – selects all elements matched by <a> that do not have a rel attribute with a value exactly equal to ‘nofollow’.
4. Attribute Value Begins [A^=B]
Select all elements that have the A attribute with a value beginning with B.
Examples
$(‘a[rel^=nof]’) – selects all elements matched by <a> that have a rel attribute with a value beginning with ‘nof’.
5. Attribute Value Ends [A$=B]
Select all elements that have the A attribute with a value ending with B.
Examples
$(‘a[rel$=low]’) – selects all elements matched by <a> that have a rel attribute with a value ending with ‘low’.
6. Attribute Value Contains [A*=B]
Select all elements that have the A attribute with a value containing the substring B.
Examples
$(‘a[href*=yahoo.com]’) – selects all elements matched by <a> that have a href attribute with a value containing ‘yahoo.com’.
7. Attribute Value Contains Prefix [A|=B]
Select all elements that have the A attribute with a value either equal to B or starting with B followed by a hyphen (-).
Examples
$(‘a[lang|=en]’) – selects all elements matched by <a> that have a lang attribute with a value either equal to ‘en’ or ‘en-‘.
8. Attribute Value Contains – delimited by spaces [A~=B]
Select all elements that have the A attribute with a value equal to B and delimited by spaces.
Examples
$(‘div[class~=jQuery]’) – selects all elements matched by <div> that have a class attribute with a value equal to ‘ jQuery’, delimited by spaces. For example, ‘Hello jQuery’ will match, ‘Hello-jQuery’ and ‘HellojQuery’ will not match.
Play it
Click on the buttons to play around the attribute selectors.
<html>
<head>
<title>jQuery attribute selector example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div, a{
padding:16px;
}
#msg{
padding:8px;
hright:100px;
}
</style>
</head>
<body>
<h1>jQuery attribute selector example</h1>
<div id="msg"></div>
<div>
<a rel="nofollow" href="http://www.google.com" lang="en-US">
Google - <a rel="nofollow" href="http://www.google.com" lang="en-US">
</a>
</div>
<div>
<a href="http://www.yahoo.com" lang="en">
Yahoo - <a href="http://www.yahoo.com" lang="en" >
</a>
</div>
<div>
<a href="http://www.abc-yahoo.com" lang="-en">
Yahoo - <a href="http://www.abc-yahoo.com" lang="-en">
</a>
</div>
<div class="Hello-jQuery">
class = "Hello-jQuery"
</div>
<div class="Hello jQuery">
class = "Hello jQuery"
</div>
<div class="HellojQuery">
class = "HellojQuery"
</div>
<br/><br/>
<button>a[rel]</button>
<button>a[rel=nofollow]</button>
<button>a[rel!=nofollow]</button>
<button>a[rel^=nof]</button>
<button>a[rel$=low]</button>
<button>a[href*=yahoo.com]</button>
<button>a[lang|=en]</button>
<button>div[class~=jQuery]</button>
<button id="reset">Reset It</button>
<script type="text/javascript">
$("button").click(function () {
var str = $(this).text();
$('a').css("border", "0px solid #000000");
$(str).css("border", "1px solid #ff0000");
$('#msg').html("<h2>Attribute Selector : " + str + "</h2>");
});
$("#reset").click(function () {
location.reload();
});
</script>
</body>
</html>
About Author
very nice examples…. helpfull…..
My wife and i have been very satisfied Chris managed to complete his investigations with the ideas he grabbed out of your blog. It’s not at all simplistic just to always be making a gift of facts which people have been trying to sell. And now we grasp we’ve got the website owner to appreciate because of that. All the explanations you have made, the easy site navigation, the friendships you can give support to create – it’s got most awesome, and it is helping our son in addition to us reason why this concept is exciting, and that is very pressing. Many thanks for all!
is there anyway to compare non case sensitive?
for find or contains operation?