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自然也就无法操控。