关于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 Tree Multiselect使用详解
May 02 jQuery
js和jquery中获取非行间样式
May 05 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery实现简单拖拽效果
Jul 20 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
BBS(php & mysql)完整版(五)
2006/10/09 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
Yii2框架制作RESTful风格的API快速入门教程
2016/11/08 PHP
Js 本页面传值实现代码
2009/05/17 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
javascript实例分享---具有立体效果的图片特效
2014/06/08 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
通过jquery-ui中的sortable来实现拖拽排序的简单实例
2016/05/24 Javascript
jquery获取table指定行和列的数据方法(当前选中行、列)
2016/11/07 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
js html实现计算器功能
2018/11/13 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
python动态加载包的方法小结
2016/04/18 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Spartoo芬兰:欧洲最大的网上鞋店
2016/08/28 全球购物
《植物妈妈有办法》教学反思
2014/02/25 职场文书
爱心捐助倡议书
2014/05/19 职场文书
中学清明节活动总结
2014/07/04 职场文书
安全月宣传标语
2014/10/07 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
创业计划书之面包店
2019/09/17 职场文书
python内置进制转换函数的操作
2021/06/02 Python
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android