Documentation

Attributes/attr

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Attributes

[edit]

attr( name )

Access a property on the first matched element. This method makes it easy to retrieve a property value from the first matched element. If the element does not have an attribute with such a name, undefined is returned. Attributes include title, alt, src, href, width, style, etc.
Arguments:
nameString
The name of the property to access.
Examples:

Finds the title attribute of the first <em> in the page.

    var title = $("em").attr("title");
    $("div").text(title);



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    var title = $("em").attr("title");
    $("div").text(title);

  });
  </script>
  <style>
  em { color:blue; font-weight;bold; }
  div { color:red; }
  </style>
</head>
<body>
  <p>
    Once there was a <em title="huge, gigantic">large</em> dinosaur...
  </p>
  The title of the emphasis is:<div></div>
</body>
</html>

NameType
[edit]

attr( properties )

Set a key/value object as properties to all matched elements.
This serves as the best way to set a large number of properties on all matched elements. Note that you must use 'className' as key if you want to set the class-Attribute. Or use .addClass( class ) or .removeClass( class ). Keep in mind this recursively calls attr( key, value ) or attr ( key, fn ), so if one of the properties you are passing is a function, the function will be evaluated and not stored as the attribute itself.
Arguments:
propertiesMap
Key/value pairs to set as object properties.
Examples:

Set some attributes for all <img>s in the page.

    $("img").attr({ 
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });
    $("div").text($("img").attr("alt"));



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("img").attr({ 
          src: "/images/hat.gif",
          title: "jQuery",
          alt: "jQuery Logo"
        });
    $("div").text($("img").attr("alt"));

  });
  </script>
  <style>
  img { padding:10px; }
  div { color:red; font-size:24px; }
  </style>
</head>
<body>
  <img />
  <img />
  <img />
  <div><B>Attribute of Ajax</B></div>
</body>
</html>

NameType
[edit]

attr( key, value )

Set a single property to a value, on all matched elements.
Arguments:
keyString
The name of the property to set.
valueObject
The value to set the property to.

Examples:
Disables buttons greater than the 1st button.

$("button:gt(1)").attr("disabled","disabled");


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("button:gt(1)").attr("disabled","disabled");
  });
  </script>
  <style>
  button { margin:10px; }
  </style>
</head>
<body>
  <button>0th Button</button>
  <button>1st Button</button>
  <button>2nd Button</button>
</body>
</html>

NameType
[edit]

attr( key, fn )

Set a single property to a computed value, on all matched elements.
Instead of supplying a string value as described above, a function is provided that computes the value.
Arguments:
keyString
The name of the property to set.
fnFunction
A function returning the value to set. Scope: Current element, argument: Index of current element 
function callback(indexArray) {
  // indexArray == position in the jQuery object
  this; // dom element
}
Examples:

Sets id for divs based on the position in the page.

    $("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("div").attr("id", function (arr) {
          return "div-id" + arr;
        })
        .each(function () {
          $("span", this).html("(ID = '<b>" + this.id + "</b>')");
        });

  });
  </script>
  <style>
  div { color:blue; }
  span { color:red; }
  b { font-weight:bolder; }
  </style>
</head>
<body>
  <div>Zero-th <span></span></div>
  <div>First <span></span></div>
  <div>Second <span></span></div>
</body>
</html>

Sets src attribute from title attribute on the image.

    $("img").attr("src", function() { 
          return "/images/" + this.title; 
        });



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("img").attr("src", function() { 
          return "/images/" + this.title; 
        });

  });
  </script>
  
</head>
<body>
  <img title="hat.gif"/>
  <img title="hat-old.gif"/>
  <img title="hat2-old.gif"/>
</body>
</html>

NameType

Retrieved from "http://docs.jquery.com/Attributes/attr"