问题描述

由于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区别的更多相关文章

  1. jQuery中prop和attr区别

    问题 今天给一个button加onclick事件,由于最后button根据需要转成字符串,因此不能使用jQurey.click(),只能给button添加onclick属性的方式. 于是,$butto ...

  2. jquery之prop与attr区别。

    一切看下面代码示例<!DOCTYPE html> <html> <head> <title>全选和反选</title> <script ...

  3. jQuery的prop和attr的区别，及判断复选框是否选中

    jQuery的prop和attr的区别 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. 参数有区别,att ...

  4. jquery里prop和attr的区别

    本文通过具体的实例来讲述jquery里prop和attr的区别及使用方法. 在jquery里,我们要获取一个标签元素的属性,可以用attr或者prop,那么两者有什么区别呢? 其实很简单: attr可 ...

  5. jquery中prop和attr的区别

    jquery中prop和attr的区别 prop: prop(name|properties|key,value|fn) **概述** 获取在匹配的元素集中的第一个元素的属性值. 随着一些内置属性的D ...

  6. 第82天：jQuery中prop()和attr()的区别

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了. 关于它们两个的区别,网上的答案很多.这里谈谈我的心得,我的心得很简单: ...

  7. jquery中prop，attr，data的区别

    这两天翻了jq的源码,今天看到了jq关于数据存储的几个方法,遂总结一下,和小伙伴没分享一下,哪里说的不对,还望批评指正~~~ 废话不多说,直接上代码: $(function(){ $('#div1') ...

  8. jQuery中的prop和attr区别

    最近在做一个项目用jq时发现一个问题  在谷歌中可以正常出效果  但是在火狐中就是不行 就是这个prop和attr   之前用的是attr方法   但是在火狐中不出效果  于是特意看了两者的区别 主要 ...

  9. jQuery 选择器 prop() 和attr()

    Day30 jQuery 1.1.1.1 什么是jQuery? n jQuery是javaScript的前端框架.对常见的对象和常用的方法进行封装,使用更方便. 它兼容CSS3,还兼容各种浏览器.文档 ...

随机推荐

  1. 收集—— css实现垂直居中

    Method1: 在父元素上设置display:table-cell;vertical-align:middle(父元素不能设置浮动) Method2: 使用flex:父元素设置成display: f ...

  2. ImageMagick图片服务器

    1.前置准备工具如下: nodejs express(nodejs mvc框架) body-parser(express middleware) gm(nodejs中用来处理图片的) uuid(nod ...

  3. 如何基于 eolinker 的进行接口管理

    由于工作的原因,经常要接触到很多API接口,而API接口在设计时往往需要编写大量的文档,而且编写完成后往往需要根据实际情况,经常改动文档,这使得文档编写维护工作量相对较大,这让我也包括很多的开发者都很 ...

  4. SpringMVC注解HelloWorld

    今天整理一下SpringMVC注解 欢迎拍砖 @RequestMapping RequestMapping是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是 ...

  5. JMS学习之路（一）：整合activeMQ到SpringMVC 转载：http://www.cnblogs.com/xiaochangwei/p/5426639.html

    JMS的全称是Java Message Service,即Java消息服务.它主要用于在生产者和消费者之间进行消息传递,生产者负责产生消息,而消费者负责接收消息.把它应用到实际的业务需求中的话我们可以 ...

  6. abstract的方法是否可同时是static,是否可同时是native，是否可同时是synchronized?

    1.abstract与static (what) abstract:用来声明抽象方法,抽象方法没有方法体,不能被直接调用,必须在子类overriding后才能使用 static:用来声明静态方法,静态 ...

  7. Python 面向对象(二) 特殊方法

    一些Python特殊方法的汇总 __bases__    类的基类,返回元祖__base__  类的基类,也叫父类__call__ '类名()',类名加括号调用时执行的语句__class__ 对象或类 ...

  8. 用C语言画一个心

    用C语言图形库画一个心 --环家伟 这次我教大家用代码画一个心,这样你们就可以送给你们的女(男)朋友了.没找到对象的也可以用来表白啊. 1.首先,我去百度找了心形线的函数,如下: 2.  联系高中的数 ...

  9. c#统计代码行数

    小编,已经快学了两年编程了.昨天突发奇想,想统计下这些年到底写过多少行代码,于是做了一个这个小程序来统计代码行数.老规矩,先上图. 比较惭愧,写了两年只有2万多行.那我们还是进入下一项吧. 界面搭建我 ...

  10. Js特殊字符转义之htmlEscape()方法

    为了防止XSS攻击,常常需要将用户输入的特殊字符进行转义,原生js貌似还没有直接对其专业的方法,最近再读Js高级程序设计的时候刚好看到,碰巧项目中也刚好需要使用次方法,于是就之家搬来用了. 网上关于转 ...