问题描述

由于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. layui + jfinal 实现上传下载

    1.需要把jfinal的环境配置好 2.导入相关的库文件 layui的库文件 就是这两个文件需要导入到自己的页面 注意:jfinal总会把路径拦截,所以需要静态文件处理.本人不太懂.就网上找了下,说w ...

  2. c#工厂模式与抽象工厂模式

    一. 工厂方法(Factory Method)模式 工厂方法(FactoryMethod)模式是类的创建模式,其用意是定义一个创建产品对象的工厂接口,将实际创建工作推迟到子类中. 工厂方法模式是简单工 ...

  3. HDnoip2017题解

    那么,作为一名初入信息竞赛的选手,我也试着开始用博客记录自己的学习历程,那么这篇文章先简单介绍一下我自己吧. 本人开始学习信息学大概以来,主要都是用的C++,所以对其他语言并不是十分熟悉.2016我还 ...

  4. Java数据结构和算法（二）——数组

    上篇博客我们简单介绍了数据结构和算法的概念,对此模糊很正常,后面会慢慢通过具体的实例来介绍.本篇博客我们介绍数据结构的鼻祖——数组,可以说数组几乎能表示一切的数据结构,在每一门编程语言中,数组都是重要 ...

  5. python学习笔记 list

    1.list中的任一元素可以是任一类型.可以是混合的,如,前两个字符串后面的是数字.都是可以的. 2.可以用-1表示最后一个元素. 3.注意不要越界. 4.len(mates) 用来计算list的大小 ...

  6. head first python菜鸟学习笔记（第六章）

    1. Python提供字典,允许有效组织数据,将数据与名关联,从而实现快速查找,而不是以数字关联. 字典是内置数据结构,允许将数据与键而不是数字关联.这样可以使内存中的数据与实际数据的结构保持一致.? ...

  7. 对于String 与StringBuffer 和StringBuilder的总结

    StringBuffer   1,线程安全的可变字符序列.一个类似于 String 的字符串缓冲区,但不能修改 2,虽然在任意时间点上它都包含某种特定的字符序列,但通过某些方法调用可以改变该序列的长度 ...

  8. Android 在通知栏实现计时功能

    Notification是APP 向系统发出通知时,它将先以图标的形式显示在通知栏中.用户可以下拉通知栏查看通知的详细信息.我们可以在通知栏实现自定义的效果,也可以结合service和BroadCas ...

  9. Activity讲解

    Activity Activity 是 Android 应用的重要组成单元之一(另外三个是 Service.BroadcastReceiver 和 ContentProvider),而 Activit ...

  10. 物联网蓝牙模块：DA14586蓝牙5模块很快到来

    Dialog半导体的SmartBond系列的下一代产品---DA14586已经发布.该全新的系统级芯片(SoC)是公司首款支持最新蓝牙5.0规范的独立器件,为先进应用提供最低的功耗和无可比拟的功能. ...