关于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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
详解jquery和vue对比
Apr 16 jQuery
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
用jQuery实现抽奖程序
Apr 12 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 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
Linux编译升级php的详细方法
2013/11/04 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP的反射机制实例详解
2017/03/29 PHP
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
Javascript 6里的4个新语法
2016/08/25 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
JavaScript的变量声明与声明提前用法实例分析
2019/11/26 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python使用Pickle库实现读写序列操作示例
2018/06/15 Python
Python元组常见操作示例
2019/02/19 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
用python写测试数据文件过程解析
2019/09/25 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
python3.7调试的实例方法
2020/07/21 Python
Python 3.9的到来到底是意味着什么
2020/10/14 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
党风廉设责任书
2014/04/16 职场文书
求职信模板
2014/05/23 职场文书
企业宣传标语
2014/06/09 职场文书
死亡赔偿协议书
2015/01/28 职场文书
2015年司法所工作总结
2015/04/27 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
2016教师节感恩话语
2015/12/09 职场文书
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技