元素的特性attributes和属性properties：
1. attribute翻译为特性，是HTML标签内自带的属性（如id、name、value…）
2. property翻译为属性，HTML标签元素返回为Dom元素后，Dom元素作为一个对象，给这个Dom对象重新添加的属性。（如firstChild、lastChild…）
3. HTML标签默认自带的属性也添加到了Dom的属性中，也可以通过“.”运算符来获取设置属性。但要注意特性“class”添加到Dom属性中后变为“className”；
4. 自定义的HTML标签属性不能添加到Dom的属性中，也不能通过“.”运算符来获取设置该属性。
- 特性的值为字符串。
- 属性可以为boolean、number、字符串、对象等。
联系：
常用的Attribute，例如id、class、title等，已经被作为属性（property）附加到DOM对象上，可以和Property一样取值和赋值。
但是自定义的特性（attribute），就不会有这样的特殊优待。
规律：
HTML元素的固有属性，使用属性（property）方法。
HTML元素自定义的DOM属性，使用特性（attribute）方法。
属性也好，特性也罢，值为字符串以外的形式，使用属性（property）方法。
JS设置特性值
setAttribute( ) 设置
getAttribute( ) 获取
JS设置属性值
.特性名 = '特性值' 设置
.特性名 获取特性（attributes）
获取特性值
attr(属性名)
注意，如果是class，需要写成className。
设置特性值
attr(属性名，属性值) 一次一个
attr({属性名:属性值，...}) 一次多个
删除特性
removeAttr(属性名) 如果多个，用空格隔开
属性（properties）
获取属性值
prop(属性名)
注意，如果是class，需要写成className。
设置属性值
prop(属性名，属性值) 一次一个
prop({属性名:属性值，...}) 一次多个
删除属性值
removeProp(属性名) 注意，一次一个！<img src="dog.jpg" alt="jQuery" id="logo" class="img-jquery" title="jQuery logo"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//特性
var img=document.getElementById('logo');
console.log(img.attributes)
console.log(img.getAttribute('class'));
})
</script>
<body>
<img src="dog.jpg" alt="jQuery" id="logo" class="img-jquery" title="jQuery logo"/>
<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px" title="Check this!" description="just a checkbox" checked/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var checkbox=document.getElementById('check');
console.log(checkbox.tabIndex)//属性
console.log(checkbox.getAttribute('tabindex'));//特性
console.log(checkbox.style)//属性
console.log(checkbox.getAttribute('style'));
console.log(checkbox.checked)//属性
console.log(checkbox.getAttribute('checked'));//返回空。如果checked="true",则为true.
})
元素的特性和属性有一种动态链接的关系，他们中有一个有变化，另一个也变化。
他们的同步规则:
- 如果attributes是本来在DOM对象中就存在的，attributes和properties的值会同步。
- 如果attributes是本来在DOM对象中就存在的，但是类型为Boolean，那么attributes和properties的值不会同步。
- 如果attributes是在DOM对象内建的属性，attributes和properties的值不会同步。description。因为description不是input内建的属性。
var img=document.getElementById('logo');
console.log(img.src)
console.log(img.getAttribute('src'));
img.src='../logo.jpg'
console.log(img.src)
console.log(img.getAttribute('src'));
var img=document.getElementById('logo');
console.log(img.class)
console.log(img.getAttribute('class'));
img.class为undefined的原因是class是保留字。我们应该写成img.className
我们一般操作特性。特殊才操作属性。
attribute特性和property属性都称为属性。
操作元素的特性：
- 获取特性的值：attr(name)
- 设置特性的值：attr(name,value) attr(attributes)
- 删除特性：removeAttr(name)
<img src="dog.jpg" alt="jQuery" id="logo" class="img-jquery" title="jQuery logo"/>
<img src="dog.jpg" alt="jQuery" id="logo2" class="img-jquery2" title="jQuery logo2"/>
<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px" title="Check this!" description="just a checkbox" checked/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var img1=document.getElementById('logo');
console.log(img1.title);//jQuery logo
//特性的名称不区分大小写。
var img=$('img');
console.log(img.attr('title'));//jQuery logo
/*init(2) [img#logo.img-jquery, img#logo2.img-jquery2, selector: "img", context: document]
0:img#logo.img-jquery
1:img#logo2.img-jquery2
context:document
length:2
selector:"img"
__proto__:Object(0)*/
console.log(img.attr('title','123'));
console.log(img.attr('title'));//123
var checkbox=document.getElementById('check');
console.log(checkbox.checked)//true
console.log(checkbox.getAttribute('checked'));//返回空
var checkbox=$('#check');
console.log(checkbox.attr('checked'));//true
})<img src="dog.jpg" alt="jQuery" id="logo" class="img-jquery" title="jQuery logo"/>
<img src="dog.jpg" alt="jQuery" id="logo2" class="img-jquery2" title="jQuery logo2"/>
<input type="checkbox" id="check" tabindex="1" style="width: 50px; height: 50px" title="Check this!" description="just a checkbox"
checked="true"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var img1=document.getElementById('logo');
console.log(img1.title);//jQuery logo
//特性的名称不区分大小写。
var img=$('img');
console.log(img.attr('title'));//jQuery logo
/*init(2) [img#logo.img-jquery, img#logo2.img-jquery2, selector: "img", context: document]
0:img#logo.img-jquery
1:img#logo2.img-jquery2
context:document
length:2
selector:"img"
__proto__:Object(0)*/
console.log(img.attr('title','123'));
console.log(img.attr('title'));//123
var checkbox=document.getElementById('check');
console.log(checkbox.checked)//true
console.log(checkbox.getAttribute('checked'));//true
var checkbox=$('#check');
console.log(checkbox.attr('checked'));//true
}) var checkbox=$('#check');
console.log(checkbox.attr('checked'));//如果页面上没有checked时，结果为false。
checkbox.checked=true;
//特性值没有改变，属性值改变
console.log(checkbox.attr('checked'));//false
console.log(checkbox.checked);//true要想特性值改变，用.attr("title","new title")；
var img=$('img');
img.attr('title','new title');
img.attr({
title:'new title',
alt:'new alt',
tabindex:'2'
});通过函数设置特性：比较灵活，可以做些操作和判断。
var img=$('img');
img.attr('title',function(index,previousValue){
console.log(previousValue);
return previousValue+"_____new ";
});
删除特性：
img.removeAttr("title");操作元素的属性：区分大小写。
- 获取属性的值：prop(name)
- 设置属性的值：prop(name，value) prop(properties)
添加并移除名为 "color" 的属性：
$("button").click(function(){
var $x = $("div");
$x.prop("color","FF0000");
$x.append("The color 属性： " + $x.prop("color"));
$x.removeProp("color");
});
<button>添加和删除属性</button>
<br><br>
<div></div>