<!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>
