开发者社区> 半指温柔乐> 正文

第82天:jQuery中prop()和attr()的区别

简介: 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。 关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单: 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
+关注继续查看

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。

关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:

  • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
  • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

上面的描述也许有点模糊,举几个例子就知道了。 

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

 这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里<a>元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

再举一个例子:

<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见

checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
最新 Linux 运维必备 150 个命令汇总
本文章盘点了 Linux 运维必备 150 个命令。
5 0
Fatal Not possible to fast-forward, aborting
git是一个很好用的版本管理工具,然而,有时候一些冲突还是让人很郁闷的。 遇到过两次merge报错,是在不同的情形下出现的。
6 0
手把手教你实现在Monaco Editor中使用VSCode主题
手把手教你实现在Monaco Editor中使用VSCode主题
7 0
浅析组件库实现按需引入的几种方式
浅析组件库实现按需引入的几种方式
6 0
揭开Vue异步组件的神秘面纱
揭开Vue异步组件的神秘面纱
6 0
JDK1.8新特性(一):JDK1.8究竟有哪些新特性呢
JDK1.8新特性常常在面试中被问及的频率很高哦
8 0
Vue动态组件的实践与原理探究
Vue动态组件的实践与原理探究
9 0
从零打造一个Web地图引擎
从零打造一个Web地图引擎
7 0
为了实践微前端,重构了自己的导航网站
为了实践微前端,重构了自己的导航网站
5 0
Mycat实现单库水平分表、按月分表
Mycat实现单库分表,实现按月分表,实现时间戳按月分表
35 0
+关注
半指温柔乐
热衷于研究前端新知识,学习新技术。精通HTML5+CSS3,Javascript,jQuery,Angular,Bootstrap。
245
文章
205
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载