jQuery Attribute Selector



The jQuery Attribute selector allows you to select elements based on whether the element has a particular attribute. It can even if the attribute matches a specific value.

To give a simple example, you can find <img> tags that have the alt attribute set. You can also match an <img>tag that has a particular alt text value. As a more specific example, you could find every link tag that points outside your site, and add code to just those links, so they will open in new windows.

Take a look at the following example, we have highligted the text based upon selection by id attribute


<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
  $("[id]").css("background-color","pink");
});
 </script>
<body>

<h1>Reference Designer jQuery Selector example</h1>
<p class="intro">
With jQuery Attribute Selector you can select by attribute</p>
<p>Here is an example</p>
<p>that has id attribute</p>

Programming languages to learn
<ul id="program">
<li>Javascript</li>
<li>jQuery</li>
<li>Csharp</li>
</ul>
</body>
</html>

You may like to try this example here.

To take another example, $(a[href]) locates all <a> tags that have an href attribute set. The following example will highlight all the links with pink background. 


<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
  $("a[href]").css("background-color","pink");
});
 </script>
<body>

<h1>Reference Designer jQuery Attribute Selector example</h1>
<p class="intro">
A list of Important Tutorial in Reference Designer</p>

<a href ="http://www.referencedesigner.com/tutorials/jquery/jq_1.php">jQuery Tutorial </a> <br />
<a href ="http://referencedesigner.com/tutorials/js/js_1.php">JS Tutorial </a><br />
<a href ="http://www.referencedesigner.com/tutorials/html/html_1.php">HTML Tutorial </a>

</body>
</html>
You may like to try this example here.
Also, [attribute^="value"] matches elements with an attribute that begins with a specific value. For example, if you want to find links that point outside the site http, you can use this code:

$('a[href^="http://referencedesigner.com"]')

As an example the following code will highlight all the links of http://referencedesigner.com but not google or yahoo or other links 


<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>
$(document).ready(function(){
  $('a[href^="http://referencedesigner.com"]').css("background-color","pink");
});
 </script>
<body>

<h1>Reference Designer jQuery Attribute Selector example</h1>
<p class="intro">
A list of Important Tutorial in Reference Designer</p>


<a href ="http://google.com">Google</a> <br />
<a href ="http://referencedesigner.com">Reference Designer</a> <br />
<a href ="http://yahoo.com">Yahoo</a> <br />

</body>
</html>
You may like to try this example here.
- [attribute$="value"] matches elements whose attribute ends with a specific value. As a practical example, you can use this selector to locate links that point to PDF files. You may potentiall add a pdf icon next to the link. The selector will typically look like - $('a[href$=".pdf"]'

- [attribute*="value"] matches elements whose attribute contains a specific value anywhere in the attribute. As a practical example, a wesite address like referencedesigner.com can be written in many ways - http://referencedesigner.com , referencedesigner.com, www.referencedesigner.com or even http://www.referencedesigner.com . If you will to select all such occurences, you may use $('a[href*="referencedesigner.com"]')