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/