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方法的含义也可能会有变化。

原文地址:https://www.cnblogs.com/51kata/p/5176207.html