属性attribute和property的区别

<!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的区别的更多相关文章

javascript DOM 操作 attribute 和 property 的区别
javascript DOM 操作 attribute 和 property 的区别在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 at ...
attribute和property的区别
DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...
javascript中attribute和property的区别详解
DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密.很多新手朋友,也包括以前的我,经常会搞不清楚. attribute翻译成中文术语为“特 ...
boolean attribute(布尔值属性) attribute vs property
boolean attribute(布尔值属性) boolean attribute HTML - Why boolean attributes do not have boolean val ...
js中Attribute和property的区别与联系
相信大多数的初学者对js中的property和attribute的关系很容易搞混, Attribute大多用于DOM的操作中,比如ele.attributes指的是一个元素的特性集合,是一个nodel ...
JS中attribute和property的区别
attribute是HTML标签上的特性,它的值只能够是字符串:html 上id,class property是JavaScript里定义的对象: 如var obj={x:1,y:2} ,这里x, ...
Attribute 与 Property 的区别
网上的说法是: Property 是面向对象的概念,是Object的一部分. Attribute 是<input type="text"> type就是Attribut ...
jQuery的attr与prop,attribute和property区别
jQuery1.6中新添加了一个prop方法,看起来和用起来都和attr方法一样,这两个方法有什么区别呢?这要从HTMl 的attribute与property区别说起,attr与prop正是这两个东 ...
Objective-C中属性及其特质@property、attribute
属性: 属性@property和属性attribute不同,@property在OC里有自己的一套专对实例变量的处理机制.attribute我们可以特指属性所具有或遵循的特质. 使用属性,编译器就会自 ...

随机推荐

Linux下protobuf的编译与安装
1.下载源码首先,从github上下载protobuf的源码,地址:https://github.com/google/protobuf,我选择下载2.5.0版本. 2.编译protobuf 将下载 ...
libcurl库的编译
终于弄懂了libcurl库的编译,记下来免得忘记. 下载地址: libcurl库:http://curl.haxx.se/latest.cgi?curl=zip openssl安装包:http ...
第二百六十节，Tornado框架-内置模板方法
Tornado框架-内置模板方法直接在html文件使用,不需要传值 Tornado默认提供的这些功能其实本质上就是 UIMethod 和 UIModule,也就是Tornado框架定义好的html文 ...
malloc 返回值的类型是 void *
malloc 返回值的类型是 void *,所以在调用 malloc 时要显式地进行类型转换,将 void * 转换成所需要的指针类型. #include <iostream> using ...
(转)directx中丢失的设备(lost device)
directx中丢失的设备(lost device) 丢失的设备一个Microsoft? Direct3D?可以处于操作状态或丢失状态.操作状态是设备的正常状态,设备按预期运行并present所 ...
开源 java CMS - FreeCMS2.3 移动app生成栏目数据
原文地址:http://javaz.cn/site/javaz/site_study/info/2015/28230.html 项目地址:http://www.freeteam.cn/ 生成栏目数据 ...
db2 import和load
Import和Load 都可以将数据导入到DB2服务器中,但是2者是有很大区别的. Import 其实执行了SQL 的INSERT 操作.和INSERT 操作一样,Import 执行的时候会激活触发器 ...
js post
在进行html5页面的设计时,希望用户加载完成页面后,进行交互时只改变其中的某些元素的内容,这样更像本地APP的呈现效果,但是HTML中的post.get如果使用submit进行提交的话会直接使用返回 ...
C# 创建XML文件
private void CreateXMLFile(string pathAndFileName) { XmlDocument doc = new XmlDocument(); XmlElement ...
hdu 4715(打表）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4715 思路:先打个素数表,然后判断一下就可以了. #include<iostream> # ...

属性attribute和property的区别

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

随机推荐

热门专题