关于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实现上传图片前预览效果功能
Aug 03 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现电梯导航模块
Dec 22 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学习之 数组声明
2011/06/09 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php防止SQL注入详解及防范
2013/11/12 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
Js callBack 返回前一页的js方法
2008/11/30 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
js中addEventListener()与removeEventListener()用法案例分析
2020/03/02 Javascript
python机器学习理论与实战(五)支持向量机
2018/01/19 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
使用python实现简单五子棋游戏
2019/06/18 Python
flask框架配置mysql数据库操作详解
2019/11/29 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
如何完美的建立一个python项目
2020/10/09 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
FC-Moto西班牙:摩托车手最大的购物场所之一
2019/04/11 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
驾驶员岗位职责
2014/01/29 职场文书
运动会通讯稿300字
2014/02/02 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
党支部半年考察意见
2015/06/01 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python