【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,还兼容各种浏览器.文档 ...
随机推荐
- Java并发Fork-Join框架原理解析
1.什么是Foirk/Join框架 Fork/Join框架是Java7提供用于并行执行任务的框架,是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架. 2.什么是并行流与顺 ...
- 数据库中float类型字段，转化到前端显示，统一保留两位小数
客户的一个需求,mybatis查询到的数据库的数据进行转换,采用TypeHandler<T>的方式.float保留两位精度可以采用DecimalFormat 直接贴上最终的解决代码(事情没 ...
- 在foreach的判断条件里执行方法会有效率问题吗？
楼猪平时一有空就有看别人代码的习惯,从许多优秀规范的代码中学习到了很多简约高效的写法和画龙点睛的思想精华.但是有的时候也会觉得某些写法很值得玩味.比如刚看到一段代码,在foreach的条件判断里加了一 ...
- 《Linux命令行与shell脚本编程大全》第九章 安装软件程序
包管理系统(PMS):用来进行软件安装.管理和删除的命令行工具 9.1包管理基础 1.主流的Linux发行版都采用了某种形式的包管理系统来控制软件和库的安装 2.PMS用一个数据库来记录:系统上安装了 ...
- [动态规划]P1854 花店橱窗布置
题目描述 某花店现有F束花,每一束花的品种都不一样,同时至少有同样数量的花瓶,被按顺序摆成一行,花瓶的位置是固定的,从左到右按1到V顺序编号,V是花瓶的数目.花束可以移动,并且每束花用1到F的整数标识 ...
- PL/SQL 游标 (实验七)
PL/SQL 游标 emp.dept 目标表结构及数据 要求 基于部门表建立游标dept_cursor1,使用记录变量接收游标数据,输出部门表信息: 显示格式: 部 门 号: XXX 部门名称: XX ...
- laravel 嵌套的渴求式加载
今天在通过需求表A查询场地类型表B,然后通过表B的场地类型id去查询表C场地类型名的时候遇到了一个小的问题. 需求表A的字段:id.user_id .name等等: 中间表B的字段:id.appeal ...
- HTML基础上
知识点一:HTML Hyper Text Markup Language 超文本标记语言. HTML标准结构: < ! doctype html> 声明文档类型 <html> ...
- 九、Hadoop学习笔记————Hive简介
G级别或者T级别都只能用hadoop
- 【深圳】大湾区第三次.NET技术交流会（网络直播）
活动简介 云.devops.微服务.容器是现在这个发展阶段的软件形态, 本次活动我们围绕这些话题介绍.NET生态下的发展.SQL Server 2017可根据需要运行本地部署的SQL Server,当 ...