jQuery属性篇-attr

.attr( attributeName )

获取第一个匹配的元素的属性的值。

.attr(attributeName)

类型是字符串。

用于获取的属性的名字。

这个.attr()方法是获取第一个匹配元素的属性值。为了单独的获取每个元素的值，使用循环结构如jQuery的.each()或.map()方法。

jQuery1.6，没有被设置的属性的元素使用.attr()方法返回的是undefined，另外，.attr()不应该被使用在普通对象,arrays,window或者document上。为了获取和改变DOM元素的properties，使用.prop()方法(见下一篇详细讲解attribute和property的区别)

使用jQuery的.attr()方法来获取元素属性的值有两个主要的优点：

1、便利：它能够直接的在一个jQuery对象上调用并且使用链式结构传递给其他jQuery方法。

2、跨浏览器一致性：一些属性的值被报告在浏览器间不一致，甚至是同一个浏览器的不同版本。.attr()方法减少了这些不一致。

NOTE：属性值一般都是字符串，除了少数一些属性如value和tabindex.

.attr( attributeName, value )

为匹配元素设置一个或多个属性

.attr(attributeName,value)

.attr(attributes)

.attr(attributeName,function(index,attr))

attributeName

类型字符串

用于设置的属性的名字。

value

类型是字符串或者数字。

为属性设置的值。

attributes

类型是普通对象。

一个用于设置的属性和值对的对象。

function(index,attr)

类型是函数。

一个函数返回用来设置的值。this是当前的元素。接收集合中元素的index位置和原来的属性值做为参数。

.attr()方法是一个方便的方式来设置属性的值，特别是设置多了属性值或者使用函数返回的值。如下的image：

<img id="greatphoto" src="brush-seller.jpg" alt="brush seller" />

设置简单的属性

改变alt的属性，只要传递属性的名称和它的新的值到.attr()方法中：

$('#greatphoto').attr('alt', 'Beijing Brush Seller');

同样的方式添加一个title属性：

$('#greatphoto')
.attr('title', 'Photo by Kelly Clark');

一次设置不同的属性

同时改变alt的属性值并添加title属性，使用简单javascript对象传递名字和值的集合到方法中。在对象中的每个key-value对来添加或者修改属性

$('#greatphoto').attr({
  alt: 'Beijing Brush Seller',
  title: 'photo by Kelly Clark'
});

当设置不同的属性时，在属性名周围的引号是可选的。

警告：当设置class属性时，必须使用引号！

NOTE：jQuery禁止在<input>或者<button>上改变属性type，不然会在所有浏览器中会抛出错误。这是因为属性type不能够在IE中被改变。

计算属性值

通过使用函数设置属性，你能够使用这个元素上的其他属性来计算属性值。比如，通过存在的属性值来连接成新的值

$('#greatphoto').attr('title', function(i, val) {
  return val + ' - photo by Kelly Clark'
});

当一次性改变多了元素的属性时，这个方法很有用。

NOTE：如果函数（如function(index, attr){}）没有值，或者undefined被返回，当前的值不会改变。当某些条件被满足的时候，可以有选择的设置。

.removeAttr( attributeName )

移除每一个集合中匹配的元素的属性

.removeAttr(attributeName)

attributeName

类型是字符串。

用来移除的属性。在jQuery1.7中，它可以是有空格隔开的属性列表。

.removeAttr(）方法使用了javascript的removeAttribute()函数，但是它的优势是能直接在一个jQuery对象上调用，并且它考虑了浏览器中的不同属性的命名。

NOTE：移除一个内联的onclick事件句柄，在IE6，7，8中使用.removeAttr()不会得到期望的结果，为了避免潜在的问题，使用.prop()替换：

$element.prop("onclick", null);
console.log("onclick property: ", $element[0].onclick);

<script>
//设置页面中所有的<img>的属性
$("img").attr({ 
  src: "/images/hat.gif",
  title: "jQuery",
  alt: "jQuery Logo"
});
$("div").text($("img").attr("alt"));
</script>

<script>
//根据在页面中的位置设置div的id
$("div").attr("id", function (arr) {
  return "div-id" + arr;
})
.each(function () {
  $("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
</script>

<script>
//从image的title属性设置其src属性
$("img").attr("src", function() { 
    return "/images/" + this.title; 
});
</script>

<script>
//点击button使在它下一个的input元素可以输入
(function() {
  var inputTitle = $("input").attr("title");
  $("button").click(function () {
    var input = $(this).next();
    if ( input.attr("title") == inputTitle ) {
      input.removeAttr("title")
    } else {
      input.attr("title", inputTitle);
    }
    $("#log").html( "input title is now " + input.attr("title") );
  });
})();
</script>