关于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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
May 26 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
Laravel 5框架学习之Blade 简介
2015/04/08 PHP
PHP 错误处理机制
2015/07/06 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
JS组件Bootstrap Table使用方法详解
2016/02/02 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
微信小程序三级联动选择器使用方法
2020/05/19 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python中的tcp示例详解
2018/12/09 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
Python中的pathlib.Path为什么不继承str详解
2019/06/23 Python
django如何通过类视图使用装饰器
2019/07/24 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
一篇文章弄懂Python中的可迭代对象、迭代器和生成器
2019/08/12 Python
在django中实现页面倒数几秒后自动跳转的例子
2019/08/16 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
2014年元旦活动方案
2014/02/15 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2015元旦晚会主持词(开场白+结束语)
2014/12/14 职场文书
导游词之青城山景区
2019/09/27 职场文书