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

发布时间:2019-05-27 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了细说 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 DOM操作篇(一) - 属性操作所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。