关于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实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
jQuery实现的上传图片本地预览效果简单示例
Mar 29 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 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 ADODB使用方法集锦
2008/03/25 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php删除指定目录的方法
2015/04/03 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
js 操作符实例代码
2009/10/24 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
在Python中编写数据库模块的教程
2015/04/29 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
Python简单生成随机数的方法示例
2018/03/31 Python
python实现简单加密解密机制
2019/03/19 Python
python实现的接收邮件功能示例【基于网易POP3服务器】
2019/09/11 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
python能在浏览器能运行吗
2020/06/17 Python
Python中lru_cache的使用和实现详解
2021/01/25 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
HTML5 语音搜索只需一句代码
2013/01/03 HTML / CSS
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
文艺演出策划方案
2014/06/07 职场文书
工作违纪检讨书范文
2015/01/26 职场文书
个人优缺点总结
2015/02/28 职场文书
职工食堂管理制度
2015/08/06 职场文书
MySQL的InnoDB存储引擎的数据页结构详解
2022/03/03 MySQL
Docker安装MySql8并远程访问的实现
2022/07/07 Servers