标签：
prop()方法和attr()方法的区别:
关于这两个方法的具体用法这里就不多介绍了，可以参阅prop()和attr()方法相关手册即可。
这两个方法作用好像是一模一样，其实绝大多数作用都是一样，只有在一些特殊的情况下才有可能出现一些差异，下面就结合实例实例介绍一下在这两个方法的区别。
先看一段代码实例:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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()就好了。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=5814
更多内容可以参阅:http://www.softwhy.com/jquery/
标签：
原文地址：http://www.cnblogs.com/xiaofinder/p/5025771.html
