<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="content-type" content="text/html;charset=utf-8">

    </head>

<body>

    <p id="intro">property: 指的是html 标签自带的属性，比如input 的value，id这些特有的属性，也就是说在w3c标准里面有提到的属性</p>

    <input id="abc" name="name123" data="data123" value="value123">

    <p>attributes:指的是html标签上面的所有属性，包括自定义属性，比如：data属性，mydata属性，daye属性</p>

    <h2>

        总结：

    </h2>

    <p>

        1、property和attributies都是properties的子集，而每个attribute是attributies的子集；

    </p>

    <p>

        2、attribute可以理解为特性，可以自定义，直接在html标签上添加的和使用setAttribute添加的情况一致，即html标签添加的都是attribute属性， <br>

        property则是使用xx.属性进行更改，通常来讲，更改互相影响（value除外）

    </p>

    <p>

        3、当添加新的非默认属性时，是不互通的；

    </p>

    <p>

        4、一些特殊属性，则需要特殊对待。

    </p>

    <p>

        js的setAttribute()、getAttribute()，jQ的prop()、attr()。

    </p>

</body>

<script src="http://libs.baidu.com/jquery/1.6.3/jquery.min.js"></script>

<script>

        var x=document.getElementById("abc");

        //1.1

        console.log("1.1、");

        console.log("修改前(x.value方式获取value的值)：value="+x.value);

        console.log("修改前(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute('value'));

        //1.2

        console.log("1.2、");

        console.log('通过x.value="value456";方式修改value的值。');

        x.value="value456";

        console.log("修改后(x.value方式获取value的值)：value="+x.value);

        console.log("修改后(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute("value"));

        //1.3

        console.log("1.3、");

        console.log('通过x.setAttribute("value","value789")方式修改value的值。');

        x.setAttribute("value","value789");

        console.log("修改后(x.value方式获取value的值)：value="+x.value);

        console.log("修改后(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute("value"));

        console.log("**********************************************************************\n");

        //2.1

        console.log("2.1、");

        console.log("修改前(x.data方式获取data的值)：data="+x.data);

        console.log("修改前(x.getAttribute('data')方式获取data的值)：data="+x.getAttribute('data'));

        //2.2

        console.log("2.2、");

        console.log('通过x.data="data456";方式修改data的值。');

        x.data="data456";

        console.log("修改后(x.data方式获取data的值)：data="+x.data);

        console.log("修改后(x.getAttribute('data')方式获取data的值)：value="+x.getAttribute("data"));

        //2.3

        console.log("2.3、");

        console.log('通过x.setAttribute("data","data789")方式修改data的值。');

        x.setAttribute("data","data789");

        console.log("修改后(x.data方式获取data的值)：data="+x.data);

        console.log("修改后(x.getAttribute('data')方式获取data的值)：data="+x.getAttribute("data"));

        console.log("**********************************************************************\n");

        //3.1

        console.log("3.1、");

        console.log("修改前(x.name方式获取name的值)：name="+x.name);

        console.log("修改前(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute('name'));

        //3.2

        console.log("3.2、");

        console.log('通过x.name="name456";方式修改name的值。');

        x.name="name456";

        console.log("修改后(x.name方式获取name的值)：name="+x.name);

        console.log("修改后(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute("name"));

        //3.3

        console.log("3.3、");

        console.log('通过x.setAttribute("name","name789")方式修改name的值。');

        x.setAttribute("name","name789");

        console.log("修改后(x.name方式获取name的值)：name="+x.name);

        console.log("修改后(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute("name"));

        console.log("**********************************************************************\n");

        //4.1 JQ

        console.log("4.1、");

        console.log("修改前($('#abc').prop('value')方式获取value的值)：value=" + $("#abc").prop('value'));

        console.log("修改前($('#abc').attr('value')方式获取value的值)：value="+$("#abc").attr('value'));

        console.log("修改前(x.value方式获取value的值)：value="+x.value);

        console.log("修改前(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute('value'));

        //4.2

        console.log("4.2、");

        console.log('通过$("#abc").attr("value","*value456");方式修改value的值。');

        $('#abc').attr("value","*value456");

        console.log("修改后($('#abc').prop('value')方式获取value的值)：value=" + $("#abc").prop('value'));

        console.log("修改后($('#abc').attr('value')方式获取value的值)：value="+$("#abc").attr('value'));

        console.log("修改后(x.value方式获取value的值)：value="+x.value);

        console.log("修改后(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute("value"));

        //4.3

        console.log("4.3、");

        console.log('通过$("#abc").prop("value","*value789");方式修改value的值。');

        $('#abc').prop("value","*value789");

        console.log("修改后($('#abc').prop('value')方式获取value的值)：value=" + $("#abc").prop('value'));

        console.log("修改后($('#abc').attr('value')方式获取value的值)：value="+$("#abc").attr('value'));

        console.log("修改后(x.value方式获取value的值)：value="+x.value);

        console.log("修改后(x.getAttribute('value')方式获取value的值)：value="+x.getAttribute("value"));

        console.log("**********************************************************************\n");

        //5.1

        console.log("5.1、");

        console.log("修改前($('#abc').prop('data')方式获取data的值)：data=" + $("#abc").prop('data'));

        console.log("修改前($('#abc').attr('data')方式获取data的值)：data="+$("#abc").attr('data'));

        console.log("修改前(x.data方式获取data的值)：data="+x.data);

        console.log("修改前(x.getAttribute('data')方式获取data的值)：data="+x.getAttribute('data'));

        //5.2

        console.log("5.2、");

        console.log('通过$("#abc").attr("data","*data456");方式修改data的值。');

        $('#abc').attr("data","*data456");

        console.log("修改后($('#abc').prop('data')方式获取data的值)：data=" + $("#abc").prop('data'));

        console.log("修改后($('#abc').attr('data')方式获取data的值)：data="+$("#abc").attr('data'));

        console.log("修改后(x.data方式获取data的值)：data="+x.data);

        console.log("修改后(x.getAttribute('data')方式获取data的值)：value="+x.getAttribute("data"));

        //5.3

        console.log("5.3、");

        console.log('通过$("#abc").prop("data","*data789");方式修改data的值。');

        $('#abc').prop("data","*data789");

        console.log("修改后($('#abc').prop('data')方式获取data的值)：data=" + $("#abc").prop('data'));

        console.log("修改后($('#abc').attr('data')方式获取data的值)：data="+$("#abc").attr('data'));

        console.log("修改后(x.data方式获取data的值)：data="+x.data);

        console.log("修改后(x.getAttribute('data')方式获取data的值)：value="+x.getAttribute("data"));

        console.log("**********************************************************************\n");

        //6.1

        console.log("6.1、");

        console.log("修改前($('#abc').prop('name')方式获取name的值)：name=" + $("#abc").prop('name'));

        console.log("修改前($('#abc').attr('name')方式获取name的值)：name="+$("#abc").attr('name'));

        console.log("修改前(x.name方式获取name的值)：name="+x.name);

        console.log("修改前(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute('name'));

        //6.2

        console.log("6.2、");

        console.log('通过$("#abc").attr("name","*name456");方式修改name的值。');

        $('#abc').attr("name","*name456");

        console.log("修改后($('#abc').prop('name')方式获取name的值)：name=" + $("#abc").prop('name'));

        console.log("修改后($('#abc').attr('name')方式获取name的值)：name="+$("#abc").attr('name'));

        console.log("修改后(x.name方式获取name的值)：name="+x.name);

        console.log("修改后(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute("name"));

        //6.3

        console.log("6.3、");

        console.log('通过$("#abc").prop("name","*name789");方式修改name的值。');

        $('#abc').prop("name","*name789");

        console.log("修改后($('#abc').prop('name')方式获取name的值)：name=" + $("#abc").prop('name'));

        console.log("修改后($('#abc').attr('name')方式获取name的值)：name="+$("#abc").attr('name'));

        console.log("修改后(x.name方式获取name的值)：name="+x.name);

        console.log("修改后(x.getAttribute('name')方式获取name的值)：name="+x.getAttribute("name"));

        console.log("**********************************************************************\n");

    </script>

</html>

　　

属性attribute和property的区别的更多相关文章

  1. javascript DOM 操作 attribute 和 property 的区别

    javascript DOM 操作 attribute 和 property 的区别 在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...

  2. attribute和property的区别

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  3. javascript中attribute和property的区别详解

    DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...

  4. boolean attribute(布尔值属性) attribute vs property

    boolean attribute(布尔值属性) boolean attribute     HTML - Why boolean attributes do not have boolean val ...

  5. js中Attribute和property的区别与联系

    相信大多数的初学者对js中的property和attribute的关系很容易搞混, Attribute大多用于DOM的操作中,比如ele.attributes指的是一个元素的特性集合,是一个nodel ...

  6. JS中attribute和property的区别

    attribute是HTML标签上的特性,它的值只能够是字符串:html 上id,class property是JavaScript里定义的对象: 如var  obj={x:1,y:2}  ,这里x, ...

  7. Attribute 与 Property 的区别

    网上的说法是: Property 是面向对象的概念,是Object的一部分. Attribute 是<input type="text"> type就是Attribut ...

  8. jQuery的attr与prop,attribute和property区别

    jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东 ...

  9. Objective-C中属性及其特质@property、attribute

    属性: 属性@property和属性attribute不同,@property在OC里有自己的一套专对实例变量的处理机制.attribute我们可以特指属性所具有或遵循的特质. 使用属性,编译器就会自 ...

随机推荐

  1. [C++]怎么将.h和.cpp文件分别放在不同的目录

    相关资料: http://blog.csdn.net/onafioo/article/details/8775501 具体操作: 1.找到.h文件目录.2.将所以的.h文件剪切到“include”目录 ...

  2. 最新phpcms v9.6.0 sql注入漏洞分析

    昨天爆出来的,但其实在此之前就i记得在某群看见有大牛在群里装逼了.一直也没肯告诉.现在爆出来了.就来分析一下.官方现在也还没给出修复.该文不给出任何利用的EXP. 该文只做安全研究,不做任何恶意攻击! ...

  3. [转][Python基础]Python中的Lambda表达式

    引用自:http://www.cnblogs.com/evening/archive/2012/03/29/2423554.html 在学习python的过程中,lambda的语法时常会使人感到困惑, ...

  4. Golang 中操作 Mongo Update 的方法

    Golang 和 MongoDB 中的 ISODate 时间交互问题 2018年02月27日 11:28:43 独一无二的小个性 阅读数:357 标签: GolangMongoDB时间交互时间转换 更 ...

  5. 关于为空必填js判断

    为了减少一不必要的if逻辑判断,自已写了一个方法 $(function () { $("#btnAdd").click(function () { var strLinValu = ...

  6. 游戏开发之coco2dx ---2d 游戏特效

    http://www.cnblogs.com/gamedes/p/4547722.html

  7. iOS Web开发

    1.让web页面的输入框是数字键盘 html 中 input 的 type = "tel"

  8. FragmentStatePagerAdapter写法

    为了节省资源,分批加载数据//适配器class TabLayoutViewPagerAdapter extends FragmentStatePagerAdapter { public TabLayo ...

  9. 第九讲 C#练习题

    1.接收一个整数N 如果N是正数就输出1·N 如果是负数就提示出错输出 由丰老师提供 -_-~ 2.编一个程序,从三个红球,五个白球,六个黑球中任意取出八个球,且其中必须有白球,输出所有可能的方案. ...

  10. Android之內置、外置SDCard

    From:http://blog.csdn.net/u011290399/article/details/10363881 在项目中,发现通过Android提供的API获取外置SDCard的操作一直不 ...