版权声明：本文为博主（shixinbing）原创文章，转载请注明出处 https://blog.csdn.net/shixinbing/article/details/82143709
attr()和prop的区别
一、两者定义
1、attr() ：
获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
*.attr( attributeName, value ) 给元素的某个属性设置值
*.attr(attributeName) 获取元素某个属性
2、prop() ：
获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。
*.prop( propertyName, value ) 给元素DOM对象的某个属性设置值
*.prop( properties ) 获取元素DOM对象的某个属性
两者都是获取元素的属性的值和设置元素的值，但两者获取的东西却有不同。
在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性
根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()。
二、区别
先看一下如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>attr和prop区别</title>
<script src="jquery.js"></script>
<style type="text/css">
.checkBox{
}
</style>
</head>
<body>
<input id="check" type="checkbox" class="checkBox">
<span>篮球</span>
</body>
</html>
<script>
var check = $("#check");
check.on('change', function () {
var check_attr = check.attr("checked");
var check_prop = check.prop("checked");
console.log('check_attr=' + check_attr); // undefined
console.log('check_prop=' + check_prop); // false
});
</script>执行结果：
得到的结果
1）attr是undefined，无法获得checked的属性值
2 ）prop是true，可以获得checked的属性
区别：js把html封装成dom元素，attr获得的是html的元素属性，而prop获得的是dom属性。
在jQuery中，
prop() 函数的设计目标是，用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；
attr() 函数的设计目标是，用于设置或获取指定DOM元素所对应的文档节点上（指HTML的元素，元素节点）的属性(attribute)
我们可以看到，不管我们怎么点击单选（checkbox），在html元素标签中并不会出现checked这个属性，但是我们可以在dom对象这个属性却会在改变。
通过在浏览器中调试可以看到：
通过在浏览器中选中要看的标签，在控制台中可以输入$0，打印出所选中的标签。console.dir($0)打印出所选元素的dom对象
从上图中我们可以看到在元素标签中没有checked=“checked”这个属性，但我们可以看到在dom对象中checked：true这个属性的。
而这个属性我们只能通过prop来获得。
jquery中attr和prop的区别介绍：
•对于HTML元素本身就带有的固有属性，且可能在标签中并不会改变或显示的属性，在处理时，使用prop方法。
•对于HTML元素我们自己自定义的DOM属性，在标签中会改变或显示的属性，在处理时，使用attr方法。
在jQuery 1.6及以后版本中，获取和设置disabled、selected、checked这些属性时，应该使用prop()方法，不要使用attr()方法！！能够用prop()操作的尽量用prop()操作，不要用attr()操作。