jQuery中 prop() attr()使用详解
更新时间：2015年05月19日 10:53:42 投稿：hebedich
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？关于它们两个的区别，这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。
关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
上面的描述也许有点模糊，举几个例子就知道了。
复制代码 代码如下:
这个例子里元素的DOM属性有“href、target和class"，这些属性就是元素本身就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用prop方法。
复制代码 代码如下:
<a href="#" id="link1" action="delete">删除</a>
这个例子里元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，而后面一个“action”属性是我们自己自定义上去的，元素本身是没有这个属性的。这种就是自定义的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"
以上所述就是本文的全部内容了，希望大家能够喜欢。
您可能感兴趣的文章:
- Jquery中attr与prop的区别详解
- jQuery获取attr()与prop()属性值的方法及区别介绍
- jQuery中attr()与prop()函数用法实例详解(附用法区别)
- jquery判断复选框选中状态以及区分attr和prop
- jquery中attr和prop的区别分析
- jQuery中attr()和prop()在修改checked属性时的区别
- jQuery学习之prop和attr的区别示例介绍
- jquery中prop()方法和attr()方法的区别浅析
- jquery获取自定义属性(attr和prop)实例介绍
- jquery 获取自定义属性(attr和prop)的实现代码
- 关于jquery中attr()和prop()方法的区别
相关文章
这个插件主要用于解决IE5.5与IE6.0下面的png图片无法透明的解决方法，如果您的网站使用了png图片而且访客很大一部分是IE7之前的版本，可以使用这个。2010-08-08
大家在逛淘宝的时候，把鼠标放在宝贝上就会放大，奇怪这种效果怎么实现的，下面小编就给大家分享基于jquery实现放大镜效果，有需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JQuery常用选择器功能与用法,结合实例形式分析了jquery常见选择器基本功能、使用方法及操作注意事项,需要的朋友可以参考下2019-12-12
下面小编就为大家带来一篇浅谈jquery中使用canvas的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要为大家详细介绍了jquery实现拖拽table表头改变列宽，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了jQuery基于ajax方式实现用户名存在性检查功能,结合实例形式分析了jQuery前台ajax交互及后台C#验证操作的相关实现技巧,需要的朋友可以参考下2017-02-02
基于Jquery+div+css实现弹出登录窗口(代码超简单)
这篇文章给大家介绍基于jquery div css三者相结合实现弹出登录窗口，实现大致思路是这样的：通过dispaly：none属性先隐藏在显示，感兴趣的朋友一起看看代码实现过程吧2015-10-10
jquery $.ajax相关用法分享，使用jquery的朋友可以参考下2012-03-03
下面小编就为大家带来一篇jQuery 更改checkbox的状态,无效的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
jquery操作checkbox火狐下第二次无法勾选的解决方法
这篇文章主要介绍了jquery操作checkbox火狐下第二次无法勾选问题的解决方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
最新评论