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

  • Attribute Methods

    @shristi.shandilya
    Recommendations Offline Message

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 234
    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:-

    1. <html>
    2.  
    3.    <head>
    4.       <title>The Selecter Example</title>
    5.       <script type = "text/javascript" 
    6.          src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    7.      </script>
    8.  
    9.       <script type = "text/javascript" language = "javascript">
    10.          $(document).ready(function() {
    11.             $("img").attr({ 
    12.                src: "/images/jquery.jpg",
    13.                title: "jQuery",
    14.                alt: "jQuery Logo"
    15.             });
    16.          });
    17.       </script>    
    18.    </head>
    19.  
    20.    <body>
    21.       <div class = "division" id="divid">
    22.          <p>Following is the logo of jQuery</p>
    23.          <img src = "wrong src" title = "none" alt = "none" />
    24.       </div>
    25.    </body>
    26.  
    27. </html>

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

    Syntax:-selector.attr( key, func )

    Example:-

    1.  <html>
    2.  
    3.    <head>
    4.       <title>The Selecter Example</title>
    5.       <script type = "text/javascript" 
    6.          src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    7.      </script>
    8.  
    9.       <script type = "text/javascript" language = "javascript">
    10.          $(document).ready(function() {
    11.             $("table").attr("border", function(index) {
    12.                return "4px";
    13.             })
    14.          });
    15.       </script>    
    16.    </head>
    17.  
    18.    <body>
    19.  
    20.       <table>
    21.          <tr><td>This is first table</td></tr>
    22.       </table>
    23.  
    24.       <table>
    25.          <tr><td>This is second table</td></tr>
    26.       </table>
    27.  
    28.       <table>
    29.          <tr><td>This is third table</td></tr>
    30.       </table>
    31.  
    32.    </body>
    33.  
    34.     </html>

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

    Syntax:-selector.removeAttr( name )

    Example:-

    1.      <html>
    2.    <head>
    3.       <title>The Selecter Example</title>
    4.       <script type = "text/javascript" 
    5.          src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    6.      </script>
    7.  
    8.       <script type = "text/javascript" language = "javascript">
    9.          $(document).ready(function() {
    10.             $("table").removeAttr("border");
    11.          });
    12.       </script>
    13.    </head>
    14.  
    15.    <body>
    16.  
    17.       <table border = "2">
    18.          <tr><td>This is first table</td></tr>
    19.       </table>
    20.  
    21.       <table border = "3">
    22.          <tr><td>This is second table</td></tr>
    23.       </table>
    24.  
    25.       <table border = "4">
    26.          <tr><td>This is third table</td></tr>
    27.       </table>
    28.  
    29.    </body>
    30.  
    31. </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:-

    1. <html>
    2.  
    3.    <head>
    4.       <title>The Selecter Example</title>
    5.       <script type = "text/javascript" 
    6.          src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    7.     </script>
    8.  
    9.       <script type = "text/javascript" language = "javascript">
    10.          $(document).ready(function() {
    11.             $("#result1").text( $("p#pid1").hasClass("red") );
    12.             $("#result2").text( $("p#pid2").hasClass("red") );
    13.          });
    14.       </script>
    15.  
    16.       <style>
    17.          .red { color:red; }
    18.          .green { color:green; }
    19.       </style>
    20.    </head>
    21.  
    22.    <body>
    23.       <p class = "red" id = "pid1">This is first paragraph.</p>
    24.       <p class = "green" id = "pid2">This is second paragraph.</p>
    25.  
    26.       <div id = "result1"></div>
    27.       <div id = "result2"></div>
    28.    </body>
    29.  
    30. </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:-

    1. <html>
    2.  
    3.    <head>
    4.       <title>The Selecter Example</title>
    5.       <script type = "text/javascript" 
    6.          src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    7.      </script>
    8.  
    9.       <script type = "text/javascript" language = "javascript">
    10.          $(document).ready(function() {
    11.             $("p#pid").click(function () {
    12.                $(this).toggleClass("red");
    13.             });
    14.          });
    15.       </script>
    16.  
    17.       <style>
    18.          .red { color:red; }
    19.       </style>
    20.    </head>
    21.  
    22.    <body>
    23.       <p class = "green">Click following line to see the result</p>
    24.       <p class = "red" id = "pid">This is first paragraph.</p>
    25.    </body>
    26.  
    27. </html>
    html Blog jquery attr
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: