关于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绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现日历效果
Sep 11 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
jquery tab标签页的制作
2010/05/10 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
2013/05/07 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
jQuery遍历节点方法汇总(推荐)
2017/05/13 jQuery
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[04:16]完美世界DOTA2联赛PWL S2 集锦第一期
2020/11/23 DOTA
python获得一个月有多少天的方法
2015/06/04 Python
Python读取键盘输入的2种方法
2015/06/16 Python
python函数局部变量用法实例分析
2015/08/04 Python
Python3多线程操作简单示例
2018/05/22 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
高中生第一学年自我鉴定
2014/09/12 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
导游词之镇江焦山
2019/11/21 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js