【转】jQuery attr() 方法和 prop() 方法区别
版权声明：本文为CSDN博主「程序媛zcc」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40015157/article/details/110823718
————————————————
jQuery attr() 方法
定义和用法
attr() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值，则返回第一个匹配元素的值。
当该方法用于设置属性值，则为匹配元素设置一个或多个属性/值对。
jQuery prop() 方法
定义和用法
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
提示：如需检索 HTML 属性，请使用 attr() 方法代替。
提示：如需移除属性，请使用 removeProp() 方法。
一、在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。不同之处如下：
1、操作对象
很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。
不过，在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。
2、应用版本
attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。
对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean类型：如果被选中(或禁用)就返回true，否则返回false。
但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。
因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。
因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。
prop()
方法操作radio（checkbox）之类的控件，让其选中的时候，其控件选中的值也会随之改变。即既可以控制其选中，也能控制其取消选中；
$("...").prop("checked");返回的是true或者false
如果有相应的属性，返回的是该属性，如果没有则返回空串
attr()
方法操作adio（checkbox）之类的控件，让其选中的时候，其控件选中的值不会随之改变。即只能控制其选中，不能控制其取消选中；
$("...").attr("checked");返回的是'checked'或者undefined
如果有相应的属性，返回的是该属性，如果没有则返回undefined
以下是我写的一个小案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>attr/prop</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#p1").html("attr('checked'): " + $("input").attr('checked')+"<br>prop('checked'): " + $("input").prop('checked')); }); }); </script> </head> <body> <button>查看attr() 和 prop() 的值</button> <br><br> <input id="check1" type="checkbox" checked="checked"> <label for="check1">Check me</label> <p id="p1"></p> </body> </html>
选中：
取消选中：
<input id="check1" type="checkbox" checked="checked"> 去掉checked="checked"，改为<input id="check1" type="checkbox" >
效果：
选中：
取消选中：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>radio</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $('input:radio:first').prop('checked', true); alert($("input[name='killOrder']:checked").val()); }); }); </script> </head> <body> <div class="radio-inline"> <input type="radio" name="killOrder" id="killOrder1" value="1" /> <label for="killOrder1">是</label> </div> <div class="radio-inline"> <input type="radio" name="killOrder" id="killOrder2" value="0" checked/> <label for="killOrder2">否</label> </div> <button>查看</button> </body> </html>
$('input:radio:first').prop('checked', true);
点击查看，确定后会选择是，选择值为1，再次选择否，点击查看，确定，还是会选择是，选择值为1。
改成 $('input:radio:first').attr('checked', true);
点击查看，确定后会选择是，选择值为1，再次选择否，点击查看，确定，还是会选择否，选择值为0。点击查看无法自动选中是，只能手动选择。
attr和prop的使用场景：
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();（如'checked','selected','disabled'等）
3.其他则使用attr();
官方推荐使用如下图：
浙公网安备 33010602011771号