细说 jQuery DOM操作篇（一） - 属性操作

之前已经知道可以使用 addClass 和 removeClass 等方法来修改类属性，今天来具体讨论下各种属性的操作。

非类属性

有时候，我们还需要对一些其他的属性进行操作，例如 href，title，id 等等。这里，我们可以使用 jQuery 的 attr 和 removeAttr 方法。举例如下：

<a href="http://segmentfault.com/" title="segmentfault">segmentfault</a>

使用 attr 方法同时修改 href 和 title 属性如下：

  $('a').attr({href: 'http://baidu.com/', title: 'baidu'})

除了简单的赋值，我们还可以使用值回调的方法来修改属性值，例如我希望把上例中的 href 值从 segmentfault 主页修改为我的个人主页：

  $('a').attr({
    href: function(index, content) {
      return content + 'stephenlee';
    }
  })

结果为：

DOM 元素属性

DOM 元素属性指的是通过 Javascript 存取的值，而 HTML 属性指的是放在引号内的值，大部分情况下，两者的名字和值都是相同的，但在有些情况下也存在区别。例如单选按钮的 checked 属性。

<input id="a" type="radio" />A
<input id="b" type="radio" checked="checked" />B

我们可以使用 prop 方法来获得 DOM 元素属性：

$('#b').attr('checked'); // 值为 checked
$('#b').prop('checked'); // 值为 true

prop 方法的使用与 attr 方法一样，也可以对多个属性进行操作，接收值回调函数等。
大多数情况，DOM 元素属性和 HTML 属性都是对应的，可能在名称上有些差异，例如 class 和 className，文本框的 value 和 defaultValue 等。但也存在不对应的情况，例如 DOM 元素属性 nodeName，在 HTML 属性中就没有跟它对应的属性。

参考

http://book.douban.com/subject/24669823/