属性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我们可以特指属性所具有或遵循的特质. 使用属性,编译器就会自 ...

随机推荐

Debian8.0 搭建leanote
参考了官方wiki以及中文博客 https://github.com/leanote/leanote/wiki http://leanote.leanote.com/post/Leanote-manu ...
poj2082单调栈
本来实在做后缀数组的题目的,不巧,碰到了pku3415这题,需要用到单调栈来维护,但是之前又没有学习过单调栈这方面的知识,于是水了几题....... 题意:给你一些连续的小矩形,高宽不定,求最大的矩形 ...
Bitmap转灰度字节数组byte[]
工作中遇到图片转灰度数组的须要,经过研究和大神的指导.终于得到例如以下两个方法.能够实现位图转灰度数组简单的位图转灰度数组就是:得到位图中的每一个像素点,然后依据像素点得到RGB值,最后对RGB值, ...
TF和SD
TF卡又称T-Flash卡,全名:TransFLash,又名:Micro SD SD卡(Secure Digital Memory Card,安全数码卡)
将php和mysql命令加入到环境变量中
方法一:直接运行命令export PATH=$PATH:/usr/local/webserver/php/bin 和 export PATH=$PATH:/usr/local/webserver/my ...
C++ 构造中调用构造
//构造中调用构造 #define _CRT_SECURE_NO_WARNINGS #include<iostream> using namespace std; class Point{ ...
为什么逻辑斯特回归(logistic regression)是线性模型
一个典型的logistic regression模型是: 这里明明用了非线性函数,那为什么logistic regression还是线性模型呢? 首先,这个函数不是f(y,x)=0的函数,判断一个模型 ...
TensorFlow基础笔记(6) 图像风格化实验
参考 http://blog.csdn.net/wspba/article/details/53994649 https://www.ctolib.com/AdaIN-style.html Ackno ...
tf.nn.conv2d实现卷积的过程
#coding=utf-8 import tensorflow as tf #case 2 input = tf.Variable(tf.round(10 * tf.random_normal([1, ...
ActionContextCleanUp
ActionContextCleanUp作用延长action中属性的生命周期,包括自定义属性,以便在jsp页面中进行访问,让actionContextcleanup过滤器来清除属性,不让acti ...

属性attribute和property的区别

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

随机推荐

热门专题