Jquery学习笔记： attr和 prop的区别，以及为html标签自定义属性

一、自定义html标签属性

对于html文件中的html标签，可以自定义属性，如：

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

上面的标签a并没有action属性（也就是说w3c定义中没有给a标签定义action属性），但有href ,id 属性。

但我们一样可以给它加自己需要的属性，如这里的action。这个在很多场合下还是有用的，特别是当需要给标签来设置某些特性时。

我们看到很多的框架，如bootstrap都给html标签定了各种自定义属性。

二、获取html标签的属性

方法一：利用dom对象来获取

如： $("#link1")[0].id  ,

或   $("#link1")[0]["id"] 

注意：对于自定义属性，无法利用dom对象来获取，比如 $("#link1")[0].action 是获取不到值的。可以利用下面介绍的attr方法来获取。

方法二：利用jquery对象的 attr 或 prop方法

jquery的prop方法是jquery1.6版本引入的，那什么时候使用 prop方法，什么时候使用attr方法呢？

这个还真有些区别。经过实际的测试，发现如下使用比较好。

对于标签的固有属性（也就是说w3c给该标签定义的属性），建议用prop方法。 如  var id = $("#link1").prop("id"); 获取标签a的id属性。

对于上述在html文件中静态添加的自定义属性，建议用attr方法。如  var action = $("#link1").attr("action"); 获取标签a的自定义action属性。因为经过测试发现，对于这种自定义属性，调用prop方法无法获取。如果想深入研究下，建议看下jquery的源代码就清楚了。

三、动态设置html标签的属性

我们知道，html文件的每个标签，在浏览器内存中实际对应一个dom对象。html页面开发中的Js代码实际就是对dom对象的处理。

这样我们可以利用js代码动态的来给dom对象设置属性。

也有两种方法：

第一种方法时，获取dom对象（注意不是jquery对象），如同给普通的js对象一样，给其添加或设置属性。

第二种方法，调用jquery对象的方法，给其对应的dom对象添加和设置属性。

经过测试我们发现，如果要动态添加一个新的属性，需要利用prop方法，使用attr方法是无效的。如 $("#link1").prop("mydata","demo")

如果该属性是通过在html文件中静态添加的自定义的属性，则修改其值时只能用attr方法。

如果该标签已经有某个静态添加的自定义的属性，这时用prop方法添加一个属性，则不会影响原来的静态属性。但原来的静态属性只能用attr方法去读写，而用prop方法添加的属性只能用prop方法去读写。

可以看出，attr方法和prop方法还是有很多区别的。

对于自定义属性，静态设置和动态设置有较大差别，动态添加自定义属性只能用prop方法（包括添加、读取和修改），而静态自定义属性后续的读取和修改只能用attr方法。并且静态设置的自定义属性和动态设置的自定义属性是互不干涉的。对于标签的固定属性，读写都应该用prop方法。

四、动态删除html元素的属性

对于静态自定义的html属性，可以利用jquery对象的 removeAttr 方法来删除属性，如$("#link1").removeAttr("action"); 就删除了action自定义属性。

如果是利用prop方法动态添加的自定义属性，则需要调用jquery的 removeProp方法来删除。

对于固定属性，则也需要调用jquery的 removeProp方法来删除。

 

五、小结

经过上面的介绍可以看出。 attr和prop方法是有区别的，并且容易混淆。这里总结下：

1、如果没有静态自定义的属性。则不管是否会动态设置固定属性或动态属性。都应该用 prop方法，删除也用removeProp方法。

2、对于静态自定义的属性，则用attr方法和removeAttr来操作。

如果同时有静态自定义属性和动态自定义属性，则使用时要小心区别。并且要注意的是，随着jquery版本的区别，prop和attr方法的含义也可能会有变化。