与prop一样attr也可以用来获取与设置元素的属性。 区别在于，对于自定义属性和选中属性的处理。 选中属性指的是 checked,selected 这2种属性 1. 对于自定义属性 attr能够获取，prop不能获取 2. 对于选中属性 attr 只能获取初始值， 无论是否变化 prop 能够访问变化后的值，并且以true|false的布尔型返回。 所以在访问表单对象属性的时候，应该采用prop.
<script src="http://how2j.cn/study/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
alert("game属性是:" + $("#c").attr("game") );
});
$("#b2").click(function(){
alert("game属性是:" + $("#c").prop("game") );
});
$("#b3").click(function(){
alert("checked属性是:" + $("#c").attr("checked") );
});
$("#b4").click(function(){
alert("checked属性是:" + $("#c").prop("checked") );
});
});
</script>
<style>
button{
display:block;
}
</style>
<button id="b1">通过attr获取自定义属性 game</button>
<button id="b2">通过prop获取自定义属性 game</button>
<button id="b3">通过attr获取 checked属性</button>
<button id="b4">通过prop获取 checked属性</button>
<br>
<br>
<input type="checkbox" id="c" game="LOL" checked="checked"> 选中的复选框
参考声明:https://www.cnblogs.com/thiaoqueen/p/7604684.html
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自然也就无法操控
参考声明:https://blog.csdn.net/qq_45932447/article/details/109532349
实践过程
在前一段时间，同事做了一个页面，效果是这样的
页面
当点击左上方那个checkBox时，要将下面的checkBox全部选中，我们的代码是这样的
$("input[name='checkbox']").attr("checked",true);
然并卵，一点效果都没有，后来换成这样，好了
$(function(){
$("#all").click(function(){
if($("#all").prop("checked")){
$("input[name='checkbox']").prop("checked",true);
}else{
$("input[name='checkbox']").prop("checked",false);
}
});
});
于是上官方的文档查了下attr和prop的区别，发现根本看不懂，如下图
于是，我们做了个实验
c1:<input id="c1" name="checkbox" type="checkbox" checked="checked" /></br>
c2:<input id="c2" name="checkbox" type="checkbox" checked=true/></br>
c3:<input id="c3" name="checkbox" type="checkbox" checked=""/></br>
c4:<input id="c4" name="checkbox" type="checkbox" checked/></br>
c5:<input id="c5" name="checkbox" type="checkbox" /></br>
c6:<input id="c6" name="checkbox" type="checkbox" checked=false/></br>
var a1=$("#c1").attr("checked");
var a2=$("#c2").attr("checked");
var a3=$("#c3").attr("checked");
var a4=$("#c4").attr("checked");
var a5=$("#c5").attr("checked");
var a6=$("#c6").attr("checked");
var p1=$("#c1").prop("checked");
var p2=$("#c2").prop("checked");
var p3=$("#c3").prop("checked");
var p4=$("#c4").prop("checked");
var p5=$("#c5").prop("checked");
var p6=$("#c6").prop("checked");
console.log("a1:"+a1);
console.log("a2:"+a2);
console.log("a3:"+a3);
console.log("a4:"+a4);
console.log("a5:"+a5);
console.log("a6:"+a6);
console.log("p1:"+p1);
console.log("p2:"+p2);
console.log("p3:"+p3);
console.log("p4:"+p4);
console.log("p5:"+p5);
console.log("p6:"+p6);
结果是这样的（chrome）
效果
发现attr的返回值要么是checked要么是undefined，prop的返回值只有true和false。
经过在网上搜素和测试总结
prop()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
1.如果有相应的属性，返回指定属性值。
2.如果没有相应的属性，返回值是undefined。
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()
参考声明:https://www.jb51.net/article/114876.htm
标签：checked,attr,区别,prop,log,console,属性 From： https://www.cnblogs.com/javaxubo/p/16861003.html