jquery中attr和prop的区别
attr 和 prop 的本质
attr 是 attribute 的缩写,prop 是 property 的缩写,都有属性的意思,只不过 attr 是操作 html 文档节点属性,prop 是操作 js 对象属性. attr 在 js 中使用的是 setAttribute 和 getAttribute 而 prop 直接使用原生 js 的 element[value] 和 element[value]=key。
区别
attr 设置的属性值只能是字符串类型,如果不是字符串类型,也会调用其 toString() 方法,将其转换成字符串类型。
prop 设置的属性值可以包括数组和对象在内的任意类型
对应到 js 中就是:
property 是 DOM 中的属性,是 JavaScript 里的对象;
attribute 是 HTML 标签上的,它的值只能够是字符串;
对应到 jQuery 中就是:
对于 HTML 元素本身就带有的固有属性,或者说 W3C 标准里就包含有这些属性,更直观的说法就是,编辑器里面可以智能提示出来的一些属性,如:src、href、value、class、name、id等。在处理时,使用 prop() 方法。
对于 HTML 元素我们自定义的 DOM 属性,即元素本身是没有这个属性的,如:data-*。在处理时,使用 attr() 方法。
当涉及到 boolean 值时:
$("button").click(function(){
console.log( $("input").prop("checked") ); //如果属性值存在,则返回 true;如果属性值不存在,则返回 false。
console.log( $("input").attr("checked") );//如果属性值存在,则返回 checked;如果属性值不存在,则返回 undefined。
});
比如 checkbox 这样的,有 true 和 false 这样的布尔值的元素属性,attributes 在页面加载的时候就被设置,并且一直保持初始值,而 properties 则存储着元素属性的当前值。
所以当我没有点击单选按钮的时候,它就是没被用户点击过的浏览器刚加载出来的初始状态,此时可以通过 attr 去设置并操控,当有用户点击的时候,当前按钮就不是初始状态,attr自然也就无法操控。