Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Attribute Methods

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 64
    Comment on it

    1. attr( properties ):-Set a key/value object as properties to all matched elements.

    Syntax:-selector.attr({property1:value1, property2:value2})

    Example:-

    <html>
    
       <head>
          <title>The Selecter Example</title>
          <script type = "text/javascript" 
             src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
         </script>
    
          <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
                $("img").attr({ 
                   src: "/images/jquery.jpg",
                   title: "jQuery",
                   alt: "jQuery Logo"
                });
             });
          </script>    
       </head>
    
       <body>
          <div class = "division" id="divid">
             <p>Following is the logo of jQuery</p>
             <img src = "wrong src" title = "none" alt = "none" />
          </div>
       </body>
    
    </html>
    

    2. attr( key, fn ):-Set a single property to a computed value, on all matched elements.

    Syntax:-selector.attr( key, func )

    Example:-

     <html>
    
       <head>
          <title>The Selecter Example</title>
          <script type = "text/javascript" 
             src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
         </script>
    
          <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
                $("table").attr("border", function(index) {
                   return "4px";
                })
             });
          </script>    
       </head>
    
       <body>
    
          <table>
             <tr><td>This is first table</td></tr>
          </table>
    
          <table>
             <tr><td>This is second table</td></tr>
          </table>
    
          <table>
             <tr><td>This is third table</td></tr>
          </table>
    
       </body>
    
        </html>
    

    3. removeAttr( name ):-Remove an attribute from each of the matched elements.

    Syntax:-selector.removeAttr( name )

    Example:-

         <html>
       <head>
          <title>The Selecter Example</title>
          <script type = "text/javascript" 
             src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
         </script>
    
          <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
                $("table").removeAttr("border");
             });
          </script>
       </head>
    
       <body>
    
          <table border = "2">
             <tr><td>This is first table</td></tr>
          </table>
    
          <table border = "3">
             <tr><td>This is second table</td></tr>
          </table>
    
          <table border = "4">
             <tr><td>This is third table</td></tr>
          </table>
    
       </body>
    
    </html>
    

    4. hasClass( class ):-Returns true if the specified class is present on at least one of the set of matched elements.

    Syntax:-selector.hasClass( class )

    Example:-

    <html>
    
       <head>
          <title>The Selecter Example</title>
          <script type = "text/javascript" 
             src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
        </script>
    
          <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
                $("#result1").text( $("p#pid1").hasClass("red") );
                $("#result2").text( $("p#pid2").hasClass("red") );
             });
          </script>
    
          <style>
             .red { color:red; }
             .green { color:green; }
          </style>
       </head>
    
       <body>
          <p class = "red" id = "pid1">This is first paragraph.</p>
          <p class = "green" id = "pid2">This is second paragraph.</p>
    
          <div id = "result1"></div>
          <div id = "result2"></div>
       </body>
    
    </html>
    

    5. toggleClass( class ):-Adds the specified class if it is not present, removes the specified class if it is present.

    Syntax:- selector.toggleClass( class )

    Example:-

    <html>
    
       <head>
          <title>The Selecter Example</title>
          <script type = "text/javascript" 
             src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
         </script>
    
          <script type = "text/javascript" language = "javascript">
             $(document).ready(function() {
                $("p#pid").click(function () {
                   $(this).toggleClass("red");
                });
             });
          </script>
    
          <style>
             .red { color:red; }
          </style>
       </head>
    
       <body>
          <p class = "green">Click following line to see the result</p>
          <p class = "red" id = "pid">This is first paragraph.</p>
       </body>
    
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: