jquery中attr和prop的区别

转载 2015年11月17日 17:50:47

jquery中attr和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"

全文完。


[JS]jQuery中attr和prop方法的区别

相比attr,prop是1.6.1才新出来的,两者从中文意思理解,都是获取/设置属性的方法(attributes和properties)。只是,window或document中使用.attr()方法在...
  • szwangdf
  • szwangdf
  • 2015年01月21日 10:10
  • 7328

jquery中attr和prop的区别

原文:http://www.cnblogs.com/zhwl/p/3520162.html 另一篇:http://www.cnblogs.com/Showshare/p/different-bet...
  • dszgf5717
  • dszgf5717
  • 2016年07月07日 19:59
  • 1515

jquery中prop和attr的区别

jquery中prop和attr的区别prop:prop(name|properties|key,value|fn)**概述** 获取在匹配的元素集中的第一个元素的属性值。 随着一些内置...
  • H5_QueenStyle12
  • H5_QueenStyle12
  • 2016年05月10日 15:51
  • 1297

jQuery函数attr()和prop()的区别

参考:http://www.365mini.com/page/jquery-attr-vs-prop.htm 在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们...
  • MJZ_CSDN
  • MJZ_CSDN
  • 2016年07月14日 16:01
  • 218

jquery中attr方法和prop方法的区别

jQuery中,用于获取属性的方法,主要是基于prop方法的,我们经常使用的是attr方法,不过在attr方法中,有时候会出现一些问题的,这里就看下jquery的API中attr的介绍,主要内容翻译自...
  • Lingfeng928
  • Lingfeng928
  • 2016年12月15日 17:53
  • 720

jQuery函数attr()与prop()的区别

JAVA流式输入/输出原理      流是用来读写数据的,java有一个类叫File,它封装的是文件的文件名,只是内存里面的一个对象,真正的文件是在硬盘上的一块空间,在这个文件里面存放着各种各样的...
  • tomcat_2014
  • tomcat_2014
  • 2015年08月04日 15:05
  • 511

jquery中attr和prop的区别

原文:http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html在高版本的jquery引入prop方法后,什么时候该...
  • Vasilis_1
  • Vasilis_1
  • 2017年06月29日 08:49
  • 213

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区...
  • baidu_31333625
  • baidu_31333625
  • 2017年05月22日 17:18
  • 84

jquery中attr和prop的区别

原文连接:http://www.cnblogs.com/Showshare/p/different-between-attr-and-prop.html jquery中attr和prop的区别 ...
  • shaoswc
  • shaoswc
  • 2016年07月25日 12:58
  • 127

jQuery的attr与prop使用区别

转自:http://www.jb51.net/article/41997.htm jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HT...
  • superit401
  • superit401
  • 2016年05月26日 16:40
  • 420
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery中attr和prop的区别
举报原因:
原因补充:

(最多只允许输入30个字)