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

非类属性

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

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

使用 attr 方法同时修改 hreftitle 属性如下:

  $('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 属性都是对应的,可能在名称上有些差异,例如 classclassName,文本框的 valuedefaultValue 等。但也存在不对应的情况,例如 DOM 元素属性 nodeName,在 HTML 属性中就没有跟它对应的属性。

参考

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

本文固定链接: http://www.js-code.com/jquery/jquery_32787.html