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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
JQuery属性操作与循环用法示例
May 15 jQuery
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery+ajax实现文件上传功能
Dec 22 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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
jQuery Validate 校验多个相同name的方法
2017/05/18 jQuery
让微信小程序支持ES6中Promise特性的方法详解
2017/06/13 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
详解C++编程中一元运算符的重载
2016/01/19 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
美国女孩服装购物网站:Justice
2017/03/04 全球购物
华为慧通笔试题
2016/04/22 面试题
企业厂长岗位职责
2013/12/17 职场文书
公益活动邀请函
2014/02/05 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
2014年仓库工作总结
2014/11/20 职场文书
三年级学生期末评语
2014/12/26 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
教师外出学习心得体会
2016/01/18 职场文书
MySQL窗口函数的具体使用
2021/11/17 MySQL