关于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实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
Jquery使用each函数实现遍历及数组处理
Jul 14 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
使用php自动备份数据库表的实现方法
2017/07/28 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
图解js图片轮播效果
2015/12/20 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
[01:01:35]Optic vs paiN 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
Python中使用SAX解析xml实例
2014/11/21 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
python 阶乘累加和的实例
2019/02/01 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
selenium中get_cookies()和add_cookie()的用法详解
2020/01/06 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
证婚人经典证婚词
2014/01/09 职场文书
革命先烈的英雄事迹材料
2014/02/15 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
实习公司领导推荐函
2014/05/21 职场文书
大学学生个人总结
2015/02/15 职场文书
八月迷情观后感
2015/06/11 职场文书