关于jquery中attr()和prop()方法的区别


Posted in jQuery onMay 28, 2018

最近项目回归使用jquery,页面渲染全是使用jquery做的,所以做的时候也遇到了许多以前没有见过的问题,如这次操作【radio】控件的"checked"属性时有遇到问题,

$("...").attr("checked",false);无法起到作用,上网查了下使用prop()完美的解决了该问题,特此记录一下。

官方定义:attr():

attr() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值,则返回第一个匹配元素的值。

当该方法用于设置属性值,则为匹配元素设置一个或多个属性/值对。

prop():

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

$('').attr()返回的是html对象

$('').prop()返回的是DOM对象

prop()

方法操作radio(checkbox)之类的控件,让其选中的时候,其控件选中的值也会随之改变。即既可以控制其选中,也能控制其取消选中;

类似于$("...").attr("checked");返回的是true或者false

如果有相应的属性,返回的是该属性,如果没有则返回空串

attr()

方法操作adio(checkbox)之类的控件,让其选中的时候,其控件选中的值不会随之改变。即只能控制其选中,不能控制其取消选中;

类似于$("...").attr("checked");返回的是'checked'或者undefined

如果有相应的属性,返回的是该属性,如果没有则返回undefined

attr和prop的使用场景:

1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop();(如'checked','selected','disabled'等)

3.其他则使用attr();

官方推荐使用:

关于jquery中attr()和prop()方法的区别

jQuery 相关文章推荐
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 #jQuery
jQuery插件jsonview展示json数据
May 26 #jQuery
jQuery插件Validation表单验证详解
May 26 #jQuery
jQuery创建及操作xml格式数据示例
May 26 #jQuery
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 #jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 #jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
You might like
php的urlencode()URL编码函数浅析
2011/08/09 PHP
php中过滤非法字符的具体实现
2013/10/29 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
vue.js从安装到搭建过程详解
2017/03/17 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
python的正则表达式re模块的常用方法
2013/03/09 Python
详解Python中的__init__和__new__
2014/03/12 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
关于多元线性回归分析——Python&SPSS
2020/02/24 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
SQL Server笔试题
2012/01/10 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
健康教育评估方案
2014/05/25 职场文书
情人节活动总结范文
2015/02/05 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
结婚典礼致辞
2015/07/28 职场文书
升学宴家长答谢词
2015/09/29 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript