这是我参与「第四届青训营 」笔记创作活动的第6天
排他思想（算法）
排他思想在js中也是运用很多，挺重要的一个算法，所以来记录一下
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法:
- 所有元素全部清除样式 (干掉其他人)
- 给当前元素设置样式 (留下我自己)
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
下面来举一些例子说明
案例一
按钮点击变颜色
案例分析：
- 首先要循环获取所有按钮
- 获取完得到的是伪数组，注意要设置成每个元素
- 先把所有按钮的背景颜色去掉 (干掉其他人)
- 然后让点击的按钮背景颜色变成对应颜色 (留下我自己)
案例二
表格隔行变色
案例分析：
- 用到新的鼠标事件鼠标经过onmouseover 鼠标离开onmouseout
- 核心思路:鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
- 注意:第一行(thead里面的行)不需要变换颜色，因此我们获取的是tbody里面的行
案例三
表单全选
案例分析：
- 全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
- 下面复选框需要全部选中，上面全选才能选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。
注意：
- checked它可以得到当前复选框的选中状态如果是true就是选中，如果是false 就是未选中。
- break退出for循环这样可以提高执行效率因为只要有一个没有选中，剩下的就无需循坏。
补充知识：自定义属性
获取属性值
- element.属性 获取属性值。
- element.getAttribute('属性'); 区别：
- element.属性; 获取内置属性值(元素本身自带的属性)
- element.getAttribute('属性'); 主要获得自定义的属性(标准)我们程序员自定义的属性
设置属性值
- element.属性='值'; 设置内置属性值。
- element. setAttribute('属性'，'值'); 区别：
- element.属性; 设置内置属性值
- element.setAttribute('属性'); 主要设置自定义的属性(标准)
移除属性值
removeAttribute(属性)
H5自定义属性
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(属性')获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:
- 设置H5自定义属性
- H5规定自定义属性data开头做为属性名并且赋值。
- 比如< div data-index= "1” > < /div >
- 或者使用JS设置element.setAttribute('data-index' ,2)
- 获取H5自定义属性
- 兼容性获取 element.getAttribute('data-index');
- H5新增elemet.dataset.index或者element.dataset[ 'index' ]ie11才开始支持
getAttribute可以获得自定义属性，没有兼容性
dataset只可以获取‘data-’的自定义属性，有兼容性
