在高版本的 JQuery 引入 prop()方法后一直没有把它和 attr()做过多的区别,经常是用 attr()处理问题,少有时候用 prop(),由于前期的学习及结果的正确性而没有过多的去关心理解这两者的区别。
但是最近在这方面遇到了困惑, 由此自己思考什么时候该用 attr()?什么时候该用 prop()?
- .attr(),它从 jQuery1.0 就已经存在,官方文档说的是读写 dom 的 attribute 值;
- .prop(),它在 jquery1.6 才引入,官方文档说的是读写 property 值;
其实 attr()和 prop()都是获取和设置指定的属性,均表示”属性”的意思;
但在 JQuery 中 attribute 和 property 是两个不同的概念
attribute 表示 HTML 文档节点的属性,property 表示 js 对象的属性。
如下:
1 | <!-- 这里的id、class、type、checked均是该元素文档节点的attribute --> |
那么在 jquery 底层实现中 attr()和 prop()都是通过什么实现的呢,其实它们都是通过 JS 原生的 element 对象实现的,其主要依赖的函数是 element 对象的 getAttribute()和 setAttribute()两个方法。
1 | <input id="content-test" class="content-test" type="checkbox" checked="checked"></div> |
当然,我们在 jquery 中使用的这些方法被封装之后使我们操作起来更方便,并跨浏览器兼容。
上面了解到了两者的实现方式,它们最终的区别最终是什么呢?如下:
1 | <input id="content-test1" class="content-test1" type="checkbox" checked="checked"></div> |
通过结果比对发现,在使用 attr()和 prop()得到的结果在 input 上没有 checked 选中状态时才会有所不同。
结果表明 prop()会得到对应的布尔值,attr()在没有将属性值没有正确的写成字符串时会得到 undefined。
在 checked = ''
的情况下 attr 和 prop 也都会得到正确的值,所以用的时候注意了。
总结
在 dom 结构中如果是其固有属性,即在 W3C 标准里就含有的属性,在处理时使用 prop() 例如:class,id,checked 等;
我们自定义的属性在处理时使用 attr() 例如:action=”test”;
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!