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 相关文章推荐
用Javascript 和 CSS 实现脚注(Footnote)效果
Sep 09 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
JS、CSS加载中的小问题探讨
Nov 26 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
socket.io学习教程之深入学习篇(三)
Apr 29 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
angularJS开发注意事项
May 26 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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 zend解密软件绿色版测试可用
2008/04/14 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
Yii框架登录流程分析
2014/12/03 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
win7下安装配置node.js+express开发环境
2015/12/06 Javascript
Express的路由详解
2015/12/10 Javascript
树结构之JavaScript
2017/01/24 Javascript
js date 格式化
2017/02/15 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
JS实现图片手风琴效果
2020/04/17 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
微信小程序使用GoEasy实现websocket实时通讯
2020/05/19 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
python删除某个目录文件夹的方法
2020/05/26 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
Html5新增标签有哪些
2017/04/13 HTML / CSS
size?德国官方网站:英国伦敦的球鞋精品店
2018/03/17 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
售后服务承诺书
2014/03/26 职场文书
三年级评语大全
2014/04/23 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
工作建议书范文
2019/07/08 职场文书
解决Jupyter-notebook不弹出默认浏览器的问题
2021/03/30 Python