首先,我们先搞清楚属性与属性节点是什么?
属性:
在对象中,我们说属性就是对象存储的数据,或则说对象身上保存的变量就是属性。在CSS的样式中，因为它也是键值对的形式，所以我们也称CSS样式属性。
操作属性的方法：
1、点语法： 对象.属性 = 属性值； （赋值）
对象.属性 (取值)
2、字符串语法： 对象[‘属性名称’] = 属性值； （赋值）
对象[‘属性名’] （取值）
属性节点：
一、在编写HTML的时候，我们写在HTML标签里面的属性就是属性节点。
<input type="checkbox" indexnum="{{ value.id }}">
//两个属性 type 和 indexnum二、分类：
标签属性分为四类：
// (1)行内标准属性：
// 比如: id class style
<h3 class="name">布头儿</h3>
//（2）行内自定义属性
// 比如：自定义的index属性，属性值是1
<li index="1" >导航菜单</li>
// （3）js动态添加属性
//点语法添加，既可以添加自定义也可以添加行内标准属性
div.className = "box"; //类名是行内标准
div.style.display = "none"; //设置显示模式
div.dataNum = "1"; //自定义属性dataNum
// （4）行外属性
//行外属性就是不在html标签中书写的属性，比如:内嵌式、外联式
<style>
th,td {
max-width: 420px;
}
</style>三、操作属性的方法：
3.1 原生JS操作属性的方法：
3.1.1 点语法操作属性
//点语法操作属性：
//可以获取到属性：标准的行内属性/点语法动态添加的属性
div.ClassName = "box1"; //可以获取或修改
div.dataNum = '1'; //先动态添加dataNum属性
div.dataNum; //打印出来是1,这是获取
//不可以获取属性：行外属性/行内自定义的属性
//如果是行内的自定义点语法拿不到
<div index="123" ></div>
document.querySelector('div');.index; //这样获取不到内容注意点：点语法动态添加属性是显示在行内的。
3.1.2 attribute方式
/* 获取属性：元素.getAttribute('属性名')
添加属性：元素.setAttribute('属性名',属性值);
* 用setAttribute方式添加只能用getAttribute获取
删除属性： 元素.removeAttribute('属性名');
* a.属性名属性值全部删除，更加彻底
* b.点语法只能删除属性值，不能删除属性名
* /
/*
利用attribute属性
* 可以获取的内容： 行内标准，行内自定义，以及利用setAttribute方法设置的属性。
* 不可以获取的内容： 行外属性，JS点语法动态添加的属性
*/3.1.3 获取所有的样式方法：
使用window.getComputedStyle(‘要获取的元素’,null)
* 既能获取行内，也能获取内嵌（外联），是string
* 能获取任何属性，但是不能设置
* IE8及之前无法使用（浏览器兼容问题）
* IE8及之前使用 元素名.currentStyle[属性名] ,这种方式谷歌和火狐都不支持3.2 jQuery里面获取属性的方法：
3.2.1 attr方法：
//1.1 设置单个属性
// 第一个参数：需要设置的属性名
// 第二个参数：对应的属性值
$obj.attr(name, value);
//1.2 获取单个属性
$obj.attr(name);
//2.1 设置多个属性(传入一个对象)
$obj.attr({
name1 ：value1，
name2 ：value2，
.......
});
//3. 移出属性
// 参数：需要移除的属性名，
$obj.removeAttr(name);
3.2.2 jQuery针对CSS属性的操作，有专门的方法
//1. 设置单个属性
// name：需要设置的样式名称
// value：对应的样式值
$obj.css(name, value);
//2. 设置多个属性（传入一个对象）
$obj.css({
name1 ：value1，
name2 ：value2，
.......
})
//3. 获取属性
$obj.css(name);
注意：获取样式操作只会返回第一个元素对应的样式值。
隐式迭代：
设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。
3.2.3 jQuery针对class属性的操作，有专门的方法
//1. 添加类样式
// name：需要添加的样式类名，注意参数不要带点.
$obj.addClass(name);
//2.移出类样式
// name:需要移除的样式类名
$obj.removeClass('name');
//3.判断是否有类样式
// name:用于判断的样式类名，返回值为true false
$obj.hasClass(name)
//4.切换类样式
// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
$obj.toggleClass(name);下面介绍一个案例，给获取input标签里面的自定义属性，来拼接字符串。
input标签有模板引擎生成：
<!-- 准备一个内容模板 -->
<script type="text/html" id="tpl2">
{{ each list value key }}
{{ if value.status == "held" }}
<tr class="danger">
{{ else }}
<tr>
{{ /if }}
<td class="text-center"><input type="checkbox" indexnum="{{ value.id }}"></td>
<td>{{ value.author }}</td>
<td>{{ value.content }}</td>
<td>《{{ value.title }}》</td>
<td>{{ value.created.slice(0,10).split("-").join('/') }}</td>
{{ if value.status == "approved" }}
<td>已批准</td>
{{ else if value.status == "held" }}
<td>未批准</td>
{{ else }}
<td>已拒绝</td>
{{ /if }}
<td class="text-center">
{{ if value.status == "approved" }}
<a href="javascript:changecommentStatus( 'approved',{{ value.id }});" class="btn btn-warning btn-xs">批准</a>
{{ else if value.status == "held" }}
<a href="javascript:changecommentStatus( 'held',{{ value.id }});" class="btn btn-info btn-xs">拒绝</a>
{{ /if }}
<a href="javascript:changecommentStatus( 'trashed',{{ value.id }});" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
{{ /each }}
</script>部分JQuery代码：
$('tbody :checked').each(function(index,ele){
//第一种直接给input自定义的属性，使用它需要改模板里面的内容
// console.log(ele.value);
// str += ele.value + ",";
//第二种利用Jquery的attr方法来获取，注意each遍历出来的是原生的DOM,
//使用的时候要用$包起来
console.log($(ele).attr('indexnum'));
str += $(ele).attr('indexnum') + ',';
//第三种是使用原生的getAttribute方法来实现
// console.log(ele.getAttribute('indexnum'));
// str += ele.getAttribute('indexnum') + ",";
});这里特别注意jQuery里面的each方法是用来是显式迭代的，但是遍历出来的是DOM元素。
四、H5里面关于属性的操作：
在H5新增一个自定义属性的写法：
//自定义属性：不是标签自带的属性，我们开发者自己定义的
//这里就是自定义属性index，但是不是H5的
<li index="1" >导航菜单</li>
//H5新增属性的语法：data-属性名
//这里面的data-index就是H5自定义的属性
<li id="li" data-index="1" >导航菜单</li>
//H5推出了一个专门取自定义属性的方法
//JS取值：元素.dataset.属性名
document.getElementById('li').dataset.index; //1