细说 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/
您可能感兴趣的文章:
细说 jQuery DOM操作篇(一) – 属性操作
jQuery源码分析系列
细说 jQuery 元素篇(二) – 选择符
细说 jQuery 元素篇(一) – 理解 DOM
解密jQuery内核 DOM操作的核心函数domManip
前端优化-Javascript篇(4.DOM优化)
JQuery操作DOM的笔记
利用js(jquery)操作Cookie的方法说明
细说 jQuery DOM操作篇(二) – DOM 树操作
细说 jQuery 事件篇(二) – 处理简单事件