Saturday, September 24, 2011

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.


No comments:

Most Recent Post

Community Updates

Subscribe Blog via Email

Enter your email address:



Disclaimers:We have tried hard to provide accurate information, as a user, you agree that you bear sole responsibility for your own decisions to use any programs, documents, source code, tips, articles or any other information provided on this Blog.
Page copy protected against web site content infringement by Copyscape