jQuery中prop和attr的区别
来源:互联网 发布:php parse url 编辑:程序博客网 时间:2024/05/22 00:32
html中的attribute和property
- attribute是html文本层面的,我们在写html时看到的 key=”value” 就是attribute。其值始终是html元素定义时的值,除非html文本改变。
- property是dom层面的,可以理解成用原生JavaScript函数获取的dom对象的属性。并且会随着我们对dom树的操作而改变。 有的property是attribute在dom对象中的一种呈现。所以property和attribute有一定的交集。
<input type="checkbox" id="cb" class="cb" name="key" checked="checked"/>这是一个checkbox,默认是勾选状态的。它的attribute有id,type,class,name和checked。这些attribute的值都不会改变。 即使取消了勾选状态,其checked属性也是”checked”(但此时property属性与attribute属性不同,名为checked的property其值会变为false)
再看dom层面,id,type,name和checked都有同名的property。class这个attribute对应property的叫className。另外,作为一个dom元素,它还有nodeName这个property。 上面那个checkbox元素的dom对象可以通过JavaScript获取。你可以把property看成JavaScript里面dom对象的属性。
var el = document.getElementById('cb');el.className // "cb" property的名称跟attribute的名称并不是完全对应的。el.class // undefinedel.nodeName // "INPUT" property也不一定就是attribute的照搬,它只跟dom有关el.checked // true 注意这里不是"checked"
jQuery中的attr和prop
为了遵守html规范,jQuery对attribute和property分别提供了封装方法attr和prop。但因为prop是jQuery 1.6版本才引进的,而且jQuery 1.9之前的版本为了考虑老代码的兼容性问题, 对attr和prop的界限划得有点模糊。还是拿上面那个checkbox举例子,看看jQuery中各版本的区别,先拿checked属性做个实验
$('.cb').prop("checked") // true 会随着checkbox状态改变而改变$('.cb').attr("checked") // (pre-1.6) true 会随着checkbox状态而改变 // (1.6) "checked" 始终获取checkbox的初始状态,不会改变 // (1.6.1 - 1.8) "checked" 会随着checkbox状态改变而改变,这是出于对老代码的兼容性考虑 // (1.9.1) "checked" 始终获取checkbox的初始状态,跟1.6一样然后看看其他属性,attr和prop获取的值是否有区别:
$('.cb').prop('name', "aaa") // 这里不管用prop还是attr对实验结果都没有影响$('.cb').prop('name') // "aaa" 返回的是改变后的状态$('.cb').attr('name') // "aaa" 同上可以看到这里并没有什么区别,为什么?因为attribute针对的是html文本改变,以上代码,改变name的时候,相应的html文本也产生了变化(用开发工具可以看到)。 所以这里attr和prop获取的都是改变后的值。
最后个人总结一下什么时候适合用什么方法:
改变property就会改变html的,不管用prop还是attr都可以。大多数的property都属于此列,比如type,name,src。 你可以用JavaScript改变property后再用开发工具看看html是否产生了变化。
改变property不会改变html的,适合用prop,或者jQuery针对该属性专门提供的方法 举个例子,文本框里的value属性,可以通过用户输入,或者用JavaScript改变,prop和val都可以获取正确的值,但优先推荐val。 这种情况attr返回的值就完全不对了。
不属于attribute对应的property,适合用prop,比如nodeName。
表示true/false含义的attribute,适合用prop,比如checked,disabled,方便做判断。
0 0
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jQuery中prop和attr的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jquery中attr和prop的区别
- jQuery中prop和attr的区别
- jquery中attr()和prop()的区别
- 《Java编程思想》学习笔记16——枚举
- Python-OpenCV 处理视频(一): 输入输出
- iOS学习笔记:移除cocoaPod
- C++ Primer Plus第六版-第八章学习笔记
- UIScrollView的属性总结
- jQuery中prop和attr的区别
- Android:网络:多线程下载(原理)
- hibernate主键设置
- 《老炮儿》的江湖道义就是互联网创业的规矩?
- Xcode HTTP 报错。。。(麻辣个蛋。。。)
- LaTeX中加入包hyperref出现的错误之解决
- 《Java编程思想》学习笔记17——注解Annotation
- Netty4学习笔记(5)-- NioEventLoopGroup继承层次结构
- 计算机英语