prop()方法和attr()方法的区别
分类：实例代码
这两个方法作用好像是一模一样，其实绝大多数作用都是一样，只有在一些特殊的情况下才有可能出现一些差异，下面就结合实例实例介绍一下在这两个方法的区别。
先看一段代码实例:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>prop()函数和attr()函数的区别-前端教程网</title>
<style type="text/css">
li{
list-style-type:none;
font-size:12px;
color:blue;
width:300px;
height:20px;
line-height:20px;
}
a{
width:200px;
height:20px;
float:left;
}
.ck{
float:left;
width:26px;
}
.time{
color:red;
width:60px;
height:20px;
float:right;
}
.do{
font-size:12px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myck").bind("click",function(){
$('input[type=checkbox]').prop('checked',$(this).prop('checked'));
if($(".do").text()=="全选"){
$(".do").text("取消");
}
else{
$(".do").text("全选");
}
})
})
</script>
</head>
<body>
<div>
<ul>
<li>
<span class="ck"><input type="checkbox"/></span>
<a href="#">前端教程网欢迎您</a>
<span class="time">12-13</span>
</li>
<li>
<span class="ck"><input type="checkbox"/></span>
<a href="#">大家好，好久不见了</a>
<span class="time">12-13</span>
</li>
<li>
<span class="ck"><input type="checkbox"/></span>
<a href="#">前端教程网</a>
<span class="time">12-13</span>
</li>
</ul>
<div><input type="checkbox" id="myck"/><span class="do">全选</span></div>
</div>
</body>
</html>
以上代码是非常常见的复选框的全选和全不选功能，在上面的代码中使用了prop()来获取或设置复选框的checked属性值。
但是如果将以下代码:
$('input[type=checkbox]').prop('checked',$(this).prop('checked'))
修改为:
$('input[type=checkbox]').prop('checked',$(this).attr('checked'))
这样就不能实现我们想要的功能。下面简单分析一下原因:
当使用attr()方法去获取复选框的checked属性值的时候，如果复选框被选中，那么获取的属性值为checked，如果没有选中获取的属性值就是undefined，自然也就无法实现我们想要的功能。prop()方法能够很好的弥补attr()方法的不足，此方法统一返回true或false。
两种方法的选择:
有的浏览器只要写disabled，checked就可以了，而有的要写成disabled="disabled"，checked="checked"，比如用attr("checked")获取checkbox的checked属性时选中的时候可以取到值,值为"checked"但没选中获取值就是undefined。
两种方法的选择原则如下:
1.添加属性名称该属性就会生效应该使用prop();
2.是有true,false两个属性使用prop();
3.其他则使用attr();
其实大可不必苛责，为了避免这些麻烦直接只是用prop()就好了。
prop()方法和attr()方法的区别，这样的场景在实际项目中还是用的比较多的，关于prop()方法和attr()方法的区别就介绍到这了。
prop()方法和attr()方法的区别属于前端实例代码，有关更多实例代码大家可以查看。