当前位置: 代码迷 >> .NET相关 >> prop()步骤和attr()方法的区别
  详细解决方案

prop()步骤和attr()方法的区别

热度:160   发布时间:2016-04-24 02:39:19.0
prop()方法和attr()方法的区别

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/

  相关解决方案