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 the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
ChetanJayme Brandstromurvish Recent comment authors
newest oldest most voted
Chetan
Guest
Chetan

very nice examples…. helpfull…..

Jayme Brandstrom
Guest
Jayme Brandstrom

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… Read more »

urvish
Guest
urvish

is there anyway to compare non case sensitive?
for find or contains operation?