<!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. jquery easy ui 验证框架

    引入参考最下面API ) var reg = /^1[3|4|5|8|9]\d{9}$/; return reg.test(value); }, message: '输入手机号码格式不准确.' } } ...

  2. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  3. C#里面的枚举与位或运算符 一个枚举变量存入多个值

    以前我们如果定义一个枚举类型 ,然后定义一个枚举变量,那么这个枚举变量只能为类型中的一个值,现在我们想要一个变量能够代表多个值: 今天看<Pro Net 2.0 Windows Forms An ...

  4. 【noip模拟题】挖掘机（模拟题+精度）

    这题直接模拟. 可是我挂在了最后两个点上QAQ.唯一注意的是注意精度啊...用来double后边转成整数就忘记用longlong...sad #include <cstdio> #incl ...

  5. 收藏几个支持中文的PHP字符串截取函数

    字符串截取是一个非常常见的编程任务,而往往带中文的字符串截取会经常用到.虽然不难,但是自己写函数实现又耗费时间,这里介绍一个比较好用的字符串截取函数,能够胜任基本的需求了. <?php func ...

  6. SQL操作【整理中...】

    /////////////////////////////////////////////////////////////////////////////////////////////////数据库 ...

  7. C# 直接调用非托管代码的方法

    C# 代码有以下两种可以直接调用非托管代码的方法: 直接调用从 DLL 导出的函数. 调用 COM 对象上的接口方法. 对于这两种技术,都必须向 C# 编译器提供非托管函数的声明,并且还可能需要向 C ...

  8. C#------引用System.Data.Entity后DbContext依然无法继承解决方法

    解决方法: 需要在“引用”->“管理NuGet程序包”里面添加->“EntityFramework.dll”文件即可

  9. 编程之美 set 9 字符串移位包含问题

    题目 给定字符串 s1 和 s2, 要求判定 s2能否能够被通过 s1 做循环移位得到的字符包含. s1 = AABCD, s2 = CDAA 返回 true. 给定 s1 = ABCD 和 s2 = ...

  10. 【ArcGIS for Android】基于位置查询Graphic和Feature

    1.graphicsLayer.getGraphicIDs(x, y, 20); 2.featureLayer.getFeatureIDs(x, y, 20); x.y为屏幕坐标 20量纲为dp px ...