关于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实现图片平滑滚动详解
Mar 22 jQuery
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery AJAX应用实例总结
May 19 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 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
apache和PHP如何整合在一起
2015/10/12 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
js资料toString 方法
2007/03/13 Javascript
jQuery ul标签下拉菜单演示代码
2010/12/11 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
修复IE9&safari 的sort方法
2011/10/21 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
浅析JavaScript动画
2015/06/10 Javascript
jquery实现定时自动轮播特效
2015/12/10 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
[03:07]完美世界DOTA2联赛PWL DAY10 决赛集锦
2020/11/11 DOTA
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
python中sort sorted reverse reversed函数的区别说明
2020/05/11 Python
Footshop乌克兰:运动鞋的最大选择
2019/12/01 全球购物
会计应聘求职信范文
2013/12/17 职场文书
同学聚会欢迎辞
2014/01/14 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
尊老爱幼演讲稿
2014/09/04 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
道歉的话语大全
2015/05/12 职场文书
名人传读书笔记
2015/06/26 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL