jQuery属性操作,attr 和 prop的区别。笔记记录
看了 jQuery API文档,属性操作一栏,看到 prop 是1.6+版本新增的方法。
那attr 和 prop 到底具体有什么区别呢?看以下演示,立马就知道结果了。
操作一:
新建一个多选框:
多选框: <input type="checkbox" name="n-checkbox" value="apple" checked/>苹果 <input type="checkbox" name="n-checkbox" value="banana"/>香蕉 <input type="checkbox" name="n-checkbox" value="pear" />梨
先获取 value属性看一下,script 代码如下:
<script> $(function () { // attr alert($(":checkbox:first").attr("value")); //prop alert($(":checkbox:first").prop("value")); }) </script>
结果都是:
apple
看到这里,其实 attr ,prop获取属性值,结果都是一样。
操作二:
有些疑惑,再获取 一个都都没有的 checked属性,看一下结果:
<script> $(function () { // attr alert($(":checkbox:last").attr("checked")); //prop alert($(":checkbox:last").prop("checked")); }) </script>
结果:
undefined false
attr 显示 undefined ?
prop 显示 false。
这又是什么操作?
查询官方的一些文档,可得到一些结果:
随着一些内置属性的DOM元素或window对象,如果试图将删除该属性,浏览器可能会产生错误。jQuery第一次分配undefined值的属性,而忽略了浏览器生成的任何错误。
大概意思是,原来的 attr 属性获取,在操作一些 [选中,未选中的这些]元素时,结果会出现 undefined 结果,官方觉得返回 undefined 是一个错误,
因此,在1.6+版本 ,出了一个prop 属性操作。用来解决上述问题,当一个元素被选中,为true,否则 为 false。
那,是不是 以后 只用 prop 方法就可以了?不用 attr属性了。
其实不然,attr 方法 其实还是很强大的,强大的一点,就是 它可以 操作 非标准的 属性,也就是 自定义属性。如下:
<script> $(function () { $(":checkbox:first").attr("patch","test"); }) </script>
页面 显示结果如下:
那自定属性也啥用呢,当然是 临时用来 储存一些数据了。
最后整理笔记:
attr() 可以设置和获取属性的值。 不推荐操作:checked、readOnly、selected、disabled等 会返回undefined 值的属性。
但是,attr方法 可以操作非标准的属性,也就是自定义属性。
prop() 可以设置和获取属性的值。 只推荐操作:checked、readOnly、selected、disabled等 会返回undefined 值的属性。
by不言谢
by不言谢
不要和别人比,要赢得是自己。(ง •̀_•́)ง
本文来自博客园,作者:不言谢,转载请注明原文链接:https://www.cnblogs.com/byx1024/p/13127439.html