关于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实现瀑布流页面
Apr 11 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jquery实现吸顶导航效果
Jan 08 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设计模式中的工厂模式
2008/06/12 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
laravel手动创建数组分页的实现代码
2018/06/07 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
2014/06/04 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
Python实现的堆排序算法示例
2018/04/29 Python
Python中的取模运算方法
2018/11/10 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
荣耀商城:HIHONOR
2020/11/03 全球购物
华为慧通面试题
2012/09/11 面试题
建龙钢铁面试总结
2014/04/15 面试题
体育教育毕业生自荐信
2013/11/21 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
公司应聘自荐书
2014/06/14 职场文书
装修活动策划方案
2014/08/27 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
MySQL数据库中的锁、解锁以及删除事务
2022/05/06 MySQL