问题描述

由于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. C# 扩展方法使用

    为指定类型扩展方法: 定义类Class1: public static class Class1                                  //必须为static类,且不能包含 ...

  2. Hive 学习笔记（启动方式，内置服务）

    一.Hive介绍 Hive是基于Hadoop的一个数据仓库,Hive能够将SQL语句转化为MapReduce任务进行运行. Hive架构图分为以下四部分. 1.用户接口 Hive有三个用户接口: 命令 ...

  3. java之JVM学习--基本机构

    JDK,JRE,JVM关系图 JVM物理结构: jvm内存区详解: 程序计数器 程序计数器(Program Counter Register)是一块较小的内存空间,它的作用可以看做是当前线程所执行的字 ...

  4. label的作用是什么？是怎么用的？

    label标签是用来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上. 主要有以下两种用法用法: 一. <label for = "Name&qu ...

  5. pt-show-grants

    用法: pt-show-grants [OPTION ... ] [DSN]   例子: pt-show-grants pt-show-grants --separate --revoke | dif ...

  6. spring4+srpingmvc+mybatis基本框架（app后台框架搭建一）

    前言: 随着spring 越来越强大,用spring4来搭建框架也是很快速,问题是你是对spring了解有多深入.如果你是新手,那么在搭建的过程中可以遇到各种各样奇葩的问题. SSM框架的搭建是作为我 ...

  7. Oracle数据库应用

    Oracle数据库应用 一:.Oracle数据库应用知识 二:表空间和用户权限管理 表空间: 表空间是数据逻辑结构的一个重要组件,表空间可以存放各种应用对象,如表,索引.而每个表空间由一个或者多个数据 ...

  8. tomcat集群日志切割和远程备份脚本分享

    笔者一共有3台tomcat服务器,一共4个tomcat服务,未来还会增加4个作为负载,笔者想通过在存储服务器对tomcat服务的日志进行远程切割和备份到存储上. 文中采用清空日志的方式,优点是不用重启 ...

  9. 基于FPGA的有限状态机浅析

    前言:状态机大法好,状态机几乎可以实现一切时序逻辑电路. 有限状态机(Finite State Machine, FSM),根据状态机的输出是否与输入有关,可分为Moore型状态机和Mealy型状态机 ...

  10. C++反汇编第一讲,认识构造函数,析构函数,以及成员函数

    C++反汇编第一讲,认识构造函数,析构函数,以及成员函数 以前说过在C系列下的汇编,怎么认识函数.那么现在是C++了,隐含有构造和析构函数 一丶认识构造函数 高级代码: class MyTest { ...