快捷导航
蚂蚁部落 网站首页 实例代码 jQuery实例 查看内容

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

2017-8-18 12:05| 发布者: admin| 查看: 463| 评论: 0|来自: 蚂蚁部落

这两个方法作用好像是一模一样,其实绝大多数作用都是一样,只有在一些特殊的情况下才有可能出现一些差异,下面就结合实例实例介绍一下在这两个方法的区别。

先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!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属性值。

但是如果将以下代码:

[JavaScript] 纯文本查看 复制代码运行代码
$('input[type=checkbox]').prop('checked',$(this).prop('checked'))

修改为:

[JavaScript] 纯文本查看 复制代码运行代码
$('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()就好了。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-10-19 02:29 , Processed in 0.066580 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部