jQuery中 prop() attr()使用详解


Posted in Javascript onMay 19, 2015

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。

关于它们两个的区别,网上的答案很多。这里谈谈我的心得,我的心得很简单:

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

上面的描述也许有点模糊,举几个例子就知道了。 

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

 这个例子里元素的DOM属性有“href、target和class",这些属性就是元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在IDE里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

这个例子里元素的DOM属性有“href、id和action”,很明显,前两个是固有属性,而后面一个“action”属性是我们自己自定义上去的,元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时,建议使用attr方法。使用prop方法取值和设置属性值时,都会返回undefined值。

再举一个例子:

<input id="chk1" type="checkbox" />是否可见

<input id="chk2" type="checkbox" checked="checked" />是否可见

像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。

$("#chk1").prop("checked") == false

$("#chk2").prop("checked") == true

如果上面使用attr方法,则会出现:

$("#chk1").attr("checked") == undefined

$("#chk2").attr("checked") == "checked"

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
由document.body和document.documentElement想到的
Apr 13 Javascript
JS 有名函数表达式全面解析
Mar 19 Javascript
js 代码优化点滴记录
Feb 19 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
原生JS实现京东查看商品点击放大
Dec 21 Javascript
javascript实现获取服务器时间
May 19 #Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 #Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 #Javascript
7个有用的jQuery代码片段分享
May 19 #Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 #Javascript
javascript检测两个数组是否相似
May 19 #Javascript
10条建议帮助你创建更好的jQuery插件
May 18 #Javascript
You might like
php代码把全角数字转为半角数字
2007/12/10 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
PHP Pear 安装及使用
2009/03/19 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
2016/12/29 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
原生js实现商品筛选功能
2019/10/28 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python实现二叉堆
2016/02/03 Python
python用match()函数爬数据方法详解
2019/07/23 Python
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
中学生评语大全
2014/04/18 职场文书
出生公证书
2015/01/23 职场文书
教师考核鉴定意见
2015/06/05 职场文书
实习报告范文之电话客服岗位
2019/07/26 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python