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 - &lt;a rel="nofollow" href="http://www.google.com" lang="en-US"&gt;
    </a>
</div>
 
<div>
    <a href="http://www.yahoo.com" lang="en">
     Yahoo - &lt;a href="http://www.yahoo.com" lang="en" &gt;
    </a>
</div>
 
<div>
    <a href="http://www.abc-yahoo.com" lang="-en">
     Yahoo - &lt;a href="http://www.abc-yahoo.com" lang="-en"&gt;
    </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("<h4>Attribute Selector : " + str + "</h4>");
    });
 
	$("#reset").click(function () {
      location.reload();
    });
 
</script>
 
</body>
</html>
Try Demo
Any Java questions or problems? please post at this JavaNullPointer.com forum, see you there ~
[ Read More ] You can find more similar articles at jQuery Tutorials