关于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 03 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jquery实现抽奖功能
Oct 22 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
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP利用header跳转失效的解决方法
2014/10/24 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
ajax异步刷新实现更新数据库
2012/12/03 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
解析js如何获取css样式
2016/12/11 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
微信小程序 request接口的封装实例代码
2017/04/26 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
python实现数独算法实例
2015/06/09 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python脚本完成post接口测试的实例
2018/12/17 Python
python基础梳理(一)(推荐)
2019/04/06 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
django的model操作汇整详解
2019/07/26 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
大学生操行评语大全
2014/12/31 职场文书
学雷锋活动简报
2015/07/20 职场文书
解决Golang time.Parse和time.Format的时区问题
2021/04/29 Golang
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android