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方法的含义也可能会有变化。
Jquery学习笔记: attr和 prop的区别,以及为html标签自定义属性的更多相关文章
- jQuery知识点:attr与prop的区别
做项目时遇到个莫名的问题,全选的时候仅第一次有效,再次点击全选按钮是无效了,查了查原因,看到篇很不错的文章,问题出在jquery中的attr属性上,这里做下笔记. 原文链接:http://www.cn ...
- jquery中的attr与prop的区别,什么时候用attr,什么时候用prop
只要有 Boolean() 属性的,简单说就是具有true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),(其实这些都是表单类的), ...
- Jquery学习笔记(6)--jquery中attr和prop的区别【精辟】
jquery中attr和prop的区别 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很 ...
- 【JAVAWEB学习笔记】21_多条件查询、attr和prop的区别和分页的实现
今天主要学习了数据库的多条件查询.attr和prop的区别和分页的实现 一.实现多条件查询 public List<Product> findProductListByCondition( ...
- jQuery中.attr()和.prop()的区别
之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...
- jquery中attr和prop的区别、 什么时候用 attr 什么时候用 prop (转自 芈老头 )
jquery中attr和prop的区别. 什么时候用 attr 什么时候用 prop 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这 ...
- jquery中attr和prop的区别(转)
在网络上看到这样一篇关于jquery中attr和prop的区别文章,觉得不错,所以转载了. 在jQuery 1.6中,.attr()方法查询那些没有设置的属性,则会返回一个undefined.如果你要 ...
- jquery中attr和prop的区别分析
这篇文章主要介绍了jquery中attr和prop的区别分析的相关资料,需要的朋友可以参考下 在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别 ...
- tips:Jquery的attr和prop的区别
Jquery的attr和prop的区别 描述:想做一个复选框checkbox全选的功能,当勾选全选后,将子项的复选框状态设置成一致的, 但遇到了一个问题,就是attr函数并不能改变子项的checkbo ...
随机推荐
- Jquery构建Form表单Post提交数据的简单方法
$.extend({ PostSubmitForm: function (url, args) { var body = $(document.body), form = $("<fo ...
- 访问Tableau自带的PostgreSQL数据库
突然发现公司Tableau服务器的数据库大小急剧增加,因此决定直接连上数据库排查.过程记录如下:最后发现有个http_requests 表体积巨大(7G),本来以为是数据缓存什么的.结果是日志问题o( ...
- python--内建函数(1)
Python中,按照对象是否可变,将类型分类为: 不可变类型:对象的内容不能够改变(not mutable),这些类型中主要有数值类型(整数,浮点数,复数),字符串类型,元组等 可变类型:对象的内容能 ...
- (Problem 57)Square root convergents
It is possible to show that the square root of two can be expressed as an infinite continued fractio ...
- VS2012 创建项目失败,,提示为找到约束。。。。
首先查看 控制面板里已安装的更新 在Microsoft .NET Freamewofk 4.5 小 查看 是否有KB2833957和KB2840642这两个补丁(如下图) 如果有 卸载它 然后 下载 ...
- HDU 4267 线段树 离散点区间更新, 自叶子节点至根单点查询
题意: n个数字 下面n个数字表示数列 2个操作 1 [u, v] k add [u,v ]区间 (u点要计算)每隔k个位置,该数字+add 2 pos 询问 pos下标的值(下标从1开始) 思路 ...
- spring-mvc关键点掌握 high level
在本例中,我们将使用Spring MVC框架构建一个入门级web应用程序.Spring MVC 是Spring框架最重要的的模块之一.它以强大的Spring IoC容器为基础,并充分利用容器的特性来简 ...
- CodeForces 260A Adding Digits
这道题目的意思是给你提供a, b, n 三个数 a为 输入的数字 ,你需要在a后面加n次 ,每次可以加0-9 但要保证每次加上去的那个数字能被b整除 不过数据规模有点大,用搜索会MLE(即使开了个开栈 ...
- HDU 3917 最大权闭合图 求最小割
具体参考http://blog.csdn.net/power721/article/details/6665750 TODO //#pragma comment(linker, "/STAC ...
- 2014 HDU多校弟九场I题 不会DP也能水出来的简单DP题
听了ZWK大大的思路,就立马1A了 思路是这样的: 算最小GPA的时候,首先每个科目分配到69分(不足的话直接输出GPA 2),然后FOR循环下来使REMAIN POINT减少,每个科目的上限加到10 ...