关于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 常用方法(推荐)
May 21 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
基于jquery实现左右上下移动效果
May 02 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jQuery ajax - getScript() 方法和getJSON方法
May 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
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
Zend Framework基本页面布局分析
2016/03/19 PHP
Yii框架Session与Cookie使用方法示例
2019/10/14 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
Javascript typeof 用法
2008/12/28 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
js限制文本框只能输入数字方法小结
2014/06/16 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
vue组件生命周期详解
2017/11/07 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
python安装pywin32clipboard的操作方法
2019/01/24 Python
python中update的基本使用方法详解
2019/07/17 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
如何利用python进行时间序列分析
2020/08/04 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
牵手50台湾:专为黄金岁月的单身人士而设的交友网站
2021/02/18 全球购物
Aosom西班牙:家具在线商店
2020/06/11 全球购物
法律专业求职信
2014/05/24 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
群众路线对照检查剖析材料
2014/10/09 职场文书
员工辞职信怎么写
2015/02/27 职场文书
歌舞青春观后感
2015/06/10 职场文书
python实现简单区块链结构
2021/04/25 Python
react国际化react-intl的使用
2021/05/06 Javascript
深入理解Vue的数据响应式
2021/05/15 Vue.js
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电