Attribute Selector examples in JQuery

With attribute selector in JQuery we can select element based on particular attribute.

Lets understand attribute selector by example.

My HTML looks something as below image.

And it appears in browser as under

Now let see, how attribute selector works in JQuery.

Example 1: Has Attribute Selector (Live Demo)
Let change all the link appearing in blue to red.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
       $("a[href]").css("color", "Red");        

    });

</script>

It will result in following output on browser screen.

Example 2: Equal to Attribute Selector (Live Demo)
Let change all the link appearing in blue to red only for links which as rel="nofollow"

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

       $("a[rel='nofollow']").css("color", "Red");        

    });

</script>

It will result in following output on browser screen.

Example 3: Start with Attribute Selector (Live Demo)
Let change all the email link appearing in blue to red.  i.e. Change all links which are begining with mailto

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

       $("a[href^='mailto']").css("color", "Red");        

    });

</script>

It will result in following output on browser screen.

Example 4: Ends with Attribute Selector (Live Demo)
Let change all the link appearing in blue to red for one which are ending with .com.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

       $("a[href$='.com']").css("color", "Red");        

    });

</script>

It will result in following output on browser screen.

Example 5: Contains Attribute Selector (Live Demo)
Let change all the link appearing in blue to red for one which contains word example.

Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

       $("a[href*='example']").css("color", "Red");        

    });

</script>

Note: Here we are selecting href attribute with word example, hence their are 3 links pointing to http://www.Syntax-Example.com, it has shown all three links in red color.

It will result in following output on browser screen.

Example 6: Not Equal to Attribute Selector (Live Demo)

Let change all the link appearing in blue to red for one which NOT contains rel="nofollow". 
Please add below script at the end of the page.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {

       $("a[rel!='nofollow']").css("color", "Red");        

    });

</script>

It will result in following output on browser screen.

Watch Live demo of JQuery Attribute Selector Example