<!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. Observable 示例之 Windows Phone 列表内项目逐个加载

    在写 Windows phone应用性能优化(一)的时候,在 ListBox 的项加载的时候,添加了一些简单的动画. 其实在 Windows Phone 的应用中使用 Blend 设计动画是很容易的, ...

  2. Oracle：shared memory realm does not exist

    1. 先描述一个连接Oracle 10g的错误:“shared memory realm does not exist” 如图所示Sqlplus连接时出现这个错误: 2. Oracle 服务器主要组件 ...

  3. pip install read time-out

    Problem ReadTimeoutError: HTTPSConnectionPool(host='pypi.python.org', port=443): Read timed out. 1 S ...

  4. 【安卓】自己定义基于onDraw的随意动画(不不过平移/旋转/缩放/alpha)、！

    思路: 1.基于时间的显示映射.如:给定度数,显示圆弧,加上时序,就可以有圆弧动画的效果 2.给定时序. 用于驱动动画的一帧帧绘制 方案一.基于ObjectAnimator.动画运作时会调用degre ...

  5. php7 扩展模块添加

    php 扩展模块添加   1. 新增安装扩展模块的位置 [root@node_22 ~]# ls /usr/local/php7/lib/php/extensions/no-debug-non-zts ...

  6. Oracle 错误：ORA-06413: Connection not open 解决办法

    http://blog.csdn.net/neso520/article/details/6037411 ——————————————————————————————————————————————— ...

  7. 在Javascript弹出窗口中输入换行符

    private void showMessage(string strMsg) { Page.RegisterStartupScript("scriptStr", "&l ...

  8. Javascript事件监听

    FireFox : addEventListener()方法 IE : attachEvent()方法 为HTML元素添加一个事件监听, 而不是直接对元素的事件属性(如:onclick.onmouse ...

  9. 005杰信-factory删除数据

    factory表的删除分为两种:单行删除,以及批量删除. 过程:在jFactoryCreate.jsp页面上两个按钮,单行删除以及批量删除.

  10. 小结：hash

    概要: 判重的时候可以用手写hash,也可以用stl中的map,手写hash的好处是快,解决冲突的方案较好,map慢.但是手写hash要求的空间高,而且有时处理得不好的话会wa. 注意及技巧: 注意的 ...