Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 细说 jQuery DOM操作篇(一) – 属性操作

细说 jQuery DOM操作篇(一) – 属性操作

发布时间:2016-09-12   编辑:www.jquerycn.cn
jquery中文网为您提供细说 jQuery DOM操作篇(一) – 属性操作等资源,欢迎您收藏本站,我们将为您提供最新的细说 jQuery DOM操作篇(一) – 属性操作资源

之前已经知道可以使用 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';
    }
  })

结果为:
细说 jQuery DOM操作篇(一) - 属性操作

DOM 元素属性

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

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

细说 jQuery DOM操作篇(一) - 属性操作

我们可以使用 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/

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

[关闭]