Jquery中attr与prop的区别详解


Posted in jQuery onMay 27, 2017

实践过程

在前一段时间,同事做了一个页面,效果是这样的

Jquery中attr与prop的区别详解
页面

当点击左上方那个checkBox时,要将下面的checkBox全部选中,我们的代码是这样的

$("input[name='checkbox']").attr("checked",true);

然并卵,一点效果都没有,后来换成这样,好了

$(function(){
  $("#all").click(function(){
   if($("#all").prop("checked")){
    $("input[name='checkbox']").prop("checked",true);
   }else{
    $("input[name='checkbox']").prop("checked",false);
   }
  });
 });

于是上官方的文档查了下attr和prop的区别,发现根本看不懂,如下图

Jquery中attr与prop的区别详解

Jquery中attr与prop的区别详解

于是,我们做了个实验

c1:<input id="c1" name="checkbox" type="checkbox" checked="checked" /></br>
  c2:<input id="c2" name="checkbox" type="checkbox" checked=true/></br>
  c3:<input id="c3" name="checkbox" type="checkbox" checked=""/></br>
  c4:<input id="c4" name="checkbox" type="checkbox" checked/></br>
  c5:<input id="c5" name="checkbox" type="checkbox" /></br>
  c6:<input id="c6" name="checkbox" type="checkbox" checked=false/></br>

   var a1=$("#c1").attr("checked");
   var a2=$("#c2").attr("checked");
   var a3=$("#c3").attr("checked");
   var a4=$("#c4").attr("checked");
   var a5=$("#c5").attr("checked");
   var a6=$("#c6").attr("checked");

   var p1=$("#c1").prop("checked");
   var p2=$("#c2").prop("checked");
   var p3=$("#c3").prop("checked");
   var p4=$("#c4").prop("checked");
   var p5=$("#c5").prop("checked");
   var p6=$("#c6").prop("checked");

   console.log("a1:"+a1);
   console.log("a2:"+a2);
   console.log("a3:"+a3);
   console.log("a4:"+a4);
   console.log("a5:"+a5);
   console.log("a6:"+a6);

   console.log("p1:"+p1);
   console.log("p2:"+p2);
   console.log("p3:"+p3);
   console.log("p4:"+p4);
   console.log("p5:"+p5);
   console.log("p6:"+p6);

结果是这样的(chrome)

Jquery中attr与prop的区别详解
效果

发现attr的返回值要么是checked要么是undefined,prop的返回值只有true和false。

经过在网上搜素和测试总结

prop()函数的结果:

      1.如果有相应的属性,返回指定属性值。

      2.如果没有相应的属性,返回值是空字符串。

attr()函数的结果:

      1.如果有相应的属性,返回指定属性值。

      2.如果没有相应的属性,返回值是undefined。

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
为JQuery EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jquery ztree实现右键收藏功能
Nov 20 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 #jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 #jQuery
jQuery导航条固定定位效果实例代码
May 26 #jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 #jQuery
jQuery滚动插件scrollable.js用法分析
May 25 #jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 #jQuery
jQuery模拟实现天猫购物车动画效果实例代码
May 25 #jQuery
You might like
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP提示Warning:phpinfo() has been disabled函数禁用的解决方法
2014/12/17 PHP
php使用Cookie控制访问授权的方法
2015/01/21 PHP
PHP Reflection API详解
2015/05/12 PHP
php中define用法实例
2015/07/30 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
JScript的条件编译
2007/05/29 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
JavaScript中filter的用法实例分析
2019/02/27 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
vue中实现上传文件给后台实例详解
2019/08/22 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
详解Django中Request对象的相关用法
2015/07/17 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
娇韵诗Clarins意大利官方网站:法国天然护肤品牌
2020/03/11 全球购物
房地产管理毕业生自荐信
2013/11/04 职场文书
高中语文教学反思
2014/01/16 职场文书
高一政治教学反思
2014/01/28 职场文书
导师就业推荐信范文
2014/05/22 职场文书
2015暑期社会实践通讯稿
2015/07/18 职场文书
工作会议简报
2015/07/20 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js