【Jquery系列】prop和attr区别
问题描述
由于prop(property的缩写)和attr(attribute的缩写)翻译成汉语，均有“特性、属性”等意思的原因，导致大家容易混淆分不清，本篇文章将试图从英文含义，中文含义和Jquery含义三个方面，彻底将它们区分开来。
- 在英文中的理解
- 在中文中的理解
- 在jquery中的理解
- 总结
1 内容区
1.1 在英文中的理解
(1)atrr
attr是attribute缩写，其英文意思如下：
(2)prop
prop是property缩写，其英文意思如下：
1.2 在中文中的理解
从英文含义角度，两者是非常容易区分的；从汉语角度，只是涉及到“特性、属性”时，容易混淆，其他意思很好区分，当涉及到“特性、属性”时，attribute可译为“给….添加属性”，即添加上去的属性，而property理解为“事物固有属性，非添加上去的属性”，这样理解，与在Jquery中的prop和attr理解一致；
1.3 在Jquery中的理解
在Jquery中的理解与汉语中的理解一致，attr表示HTML中给DOM添加上去的属性，即自定义属性，prop表示HTML中DOM固有属性；
<!DOCTYPE html> <html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/OuterLibrary/jquery.jqGrid-4.4.3/js/jquery-1.7.2.min.js"></script>
<title>Index</title>
<script>
$(document).ready(function () {
$("#btnJqueryDemo").click(function () {
var attrSrc = $("#error-bg").attr("src");
var propSrc = $("#error-bg").prop("src"); var attrImgAuthor = $("#error-bg").attr("imgAuthor");
var propImgAuthor = $("#error-bg").prop("imgAuthor");
});
}); </script>
</head>
<body>
<div>
<img id="error-bg" src="~/Images/error-bg.png" alt="error-bg" weidth="30" height="30" imgAuthor="Alan_beijing" />
<input type="button" id="btnJqueryDemo" value="JqueryDemo"/>
</div>
</body>
</html>
测试结果：
1.4 总结
(1)在处理自定义时属性时，用attr()，若用prop(),则结果为undefined；
(2)DOM固有属性，采用prop()和attr()均可(不同版本Jquery有所区别)；
关于prop()和attr()在Jquery中的用法，建议严格按照“符合DOM固有属性，W3C标准属性的，用prop()；对于自定义属性，用atrr()”的原则；
2 版权区
- 感谢您的阅读，若有不足之处，欢迎指教，共同学习、共同进步。
- 博主网址：http://www.cnblogs.com/wangjiming/。
- 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的，大部分为原创。
- 如您喜欢，麻烦推荐一下；如您有新想法，欢迎提出，邮箱：2016177728@qq.com。
- 可以转载该博客，但必须著名博客来源。
【Jquery系列】prop和attr区别的更多相关文章
- jQuery中prop和attr区别
问题 今天给一个button加onclick事件,由于最后button根据需要转成字符串,因此不能使用jQurey.click(),只能给button添加onclick属性的方式. 于是,$butto ...
- jquery之prop与attr区别。
一切看下面代码示例<!DOCTYPE html> <html> <head> <title>全选和反选</title> <script ...
- jQuery的prop和attr的区别，及判断复选框是否选中
jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...
- jquery里prop和attr的区别
本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...
- jquery中prop和attr的区别
jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...
- 第82天：jQuery中prop()和attr()的区别
在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...
- jquery中prop，attr，data的区别
这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...
- jQuery中的prop和attr区别
最近在做一个项目用jq时发现一个问题 在谷歌中可以正常出效果 但是在火狐中就是不行 就是这个prop和attr 之前用的是attr方法 但是在火狐中不出效果 于是特意看了两者的区别 主要 ...
- jQuery 选择器 prop() 和attr()
Day30 jQuery 1.1.1.1 什么是jQuery? n jQuery是javaScript的前端框架.对常见的对象和常用的方法进行封装,使用更方便. 它兼容CSS3,还兼容各种浏览器.文档 ...
随机推荐
- Windows定时器学习
定时器是一个在特定时间或者规则间隔被激发的内核对象.结合定时器的异步程序调用可以允许回调函数在任何定时器被激发的时候执行. 通过调用CreateWaitableTimer()可以创建一个定时器,此函数 ...
- SAXParserFactory
Defines a factory API that enables applications to configure and obtain a SAX based parser to parse ...
- Robotium 框架学习之Class By
Class By定义了页面元素的定位和支持哪些页面元素(至少我是这么理解的),使用及其简单:Used in conjunction with the web methods. Examples are ...
- Hi3518EV200平台ADC多通道采样
Hi3518EV200平台ADC多通道采样流程 Hi3518EV200 ADC 本文针对Hi3518EV200平台处理器,通过ADC单次采样方式,实现对多通道(1~4通道)ADC进行采样控制.本文仅仅 ...
- spring boot 中 Mybatis plus 多数据源的配置方法
最近在学习spring boot,发现在jar包依赖方面做很少的工作量就可以了,对于数据库操作,我用的比较多的是mybatis plus,在中央仓库已经有mybatis-plus的插件了,对于单数据源 ...
- Next week plan
1.get a job 2.write a high performance chatroom with encryption. Use scala. Next Week turn to Rust
- 阿里云VPS搭建Hexo博客
最近买了一个阿里云服务器,准备写自己的网站,和将自己的作品放在上面:开始的时候,感觉就一个服务器应该很简单,但是从申请域名到备案,再到服务器搭建,没想到一波三折:闲话不多说,只是记录我在搭建时,最简单 ...
- linux正确的关机方法
[root@localhost ~]# sync #数据写入磁盘 [root@localhost ~]# shutdown -h 10 #通知用户再过10分钟就关机 [root@localhost ~ ...
- Ali OSS 服务端签名并设置回调，客户端上传文件
一.最近做阿里云oss文件上传开发,一点收获分享给大家,帮助大家绕过一些坑.关于阿里云oss服务的介绍,我这里不做赘述了,可以查看阿里云OSS开发api文档. 在这里我主要介绍下,文件上传流程比较复杂 ...
- TCP/IP协议栈 ARP和RARP协议
上几章中我们提到以太网协议中,在以太网首部中一个帧类型的字段,它可以表示为IP ARP RARP协议. 这里说一下ARP 和RARP协议. 首先看ARP协议: 要想网络中的数据包准确到达某个主机,最后 ...