1、排他思想
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
- 所有元素全部清除样式（干掉其他人）
- 给当前元素设置样式 （留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
2、百度换肤
// 1. 获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 循环注册事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// this.src 就是我们点击图片的路径 images/2.jpg
// console.log(this.src);
// 把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
3、 表格隔行变色
①用到新的鼠标事件 鼠标经过 onmouseover鼠标离开 onmouseout
②核心思路：鼠标经过 tr 行，当前的行变背景颜色， 鼠标离开去掉当前的背景颜色
③注意： 第一行（thead里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
for(var i = 0; i < trs.length;i++){
trs[i].onmouseover = function(){
// trs[i].className = 'bg'; 这样写报错，直接写this
this.className = 'bg';
}
trs[i].onmouseout = function(){
// trs[i].className = ''; 这样写报错，直接写this
this.className = '';
}
}
4、表单全选及取消全选
①全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 1.获取元素
var qx = document.getElementById('j_cbAll'); //全选框
// 获取下面所有的单选框
// 使用querySelector获取有id值的元素必须要加 #
// var dxs = document.querySelector('#j_tb').querySelectorAll('input');
// 有id值就选用getElementById，获取大量标签时就选用getElementsByTagName
var dxs = document.getElementById('j_tb').getElementsByTagName('input')
// 以上两种获取单选框元素的方式都正确
// 2.注册事件
qx.onclick = function () {
// this.checked 它可以得到当前复选框的选中状态，如果选中值为true，未选中值为false
console.log(this.checked);
// 将全选框按钮的checked值赋给所有的单选框的checked值，就可以实现全选和取消全选的效果
for (var i = 0; i < dxs.length; i++) {
dxs[i].checked = this.checked;
}
}
②下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
可以设置一个变量，来控制全选是否选中
//给每一个单选框都绑定事件(指当单选框每次被点击时就会检查所有的单选框是否都被勾选，若全部被勾选则选中全选框)，利用flag变量来确定全选框的cheecked值。
for(var i = 0 ; i < dxs.length; i++){
dxs[i].onclick = function(){
// 先令flag = true ，这样单选框全部被勾选时，全选框就可以被勾选
var flag = true;
// 每次点击单选框，都需要检查一下所有的单选框是否全部被选中，如果全部被选中则全选框就被选中
for(var i = 0; i < dxs.length; i++){
// 单选框被选中则dxs[i].checked值为true, 取非则是有的单选框被选中，所以全选框不勾选
if(!dxs[i].checked){
flag = false;
// 只要有一个按钮没有被选择，剩下的就不需要再循环和判断了
break;
}
}
qx.checked = flag
}
}
5、获取和设置自定义属性值
5.1 获取元素属性值
element.属性 = ‘值’// 设置内置属性值。element.getAttribute('属性', '值');
5.2 设置自定义属性值
element.属性 = ‘值’设置内置属性值。element.setAttribute('属性', '值');
5.3 移除自定义属性值
element.removeAttribute('属性');
5.4 区别
element.'属性'-----元素自带属性值获取
element.getAttribute('属性')------自定义属性
//获取属性值
element.'属性'; //获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’); //主要获得自定义的属性 （标准） 我们程序员自定义的属性
var div = document.querySelector('#demo');
// element.属性 获取的是元素本身自带的属性
console.log(div.id)
console.log(div.getAttribute('id'))
// index是自己定义的属性,最好使用element.getAttribute来获取属性值
console.log(div.getAttribute('index'));
//设置属性值
element.属性 //设置内置属性值
element.setAttribute(‘属性’); //主要设置自定义的属性 （标准）
// (1) element.属性 = '值'
div.id = 'text';
// console.log(div.id);
div.className = 'mmmmo'
// console.log(div.className);
// (2)element.setAttribute('属性'，'值')
div.setAttribute('index',2)
console.log(div.getAttribute('index'));
// 这里要写为class才能修改类名，写为className则是添加了一个属性名className的属性
//只有这个class是特殊的
div.setAttribute('className','lllll')
div.setAttribute('class','00000')
console.log(div.getAttribute('className'));
console.log(div.getAttribute('class'));
// 3.移除属性值
div.removeAttribute('index')
6、 tab栏切换
①Tab栏切换有2个大的模块
②上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
③下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
④规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
⑤核心思路： 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。
⑥ 当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的 内容显示，其余隐藏（排他思想）
// 获取元素
// 导航栏的切换
// querySelector获取元素时，类名前要加 .
var tab = document.querySelector('.tab_list');
var lis = tab.querySelectorAll('li');
var index = this.getAttribute('index');
var items = document.querySelectorAll('.item');
// for循环为每个li元素绑定点击事件
for (var i = 0; i < lis.length; i++) {
// 开始为5个小li设置索引号
// 这里的i不需要写成'i'，否则都会变成index = 'i'
lis[i].setAttribute('index', i);
// 排他思想
lis[i].onclick = function () {
// 干掉所有人
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 选项卡切换，显示不同的内容
// 干掉所有人
for (var i = 0; i < lis.length; i++) {
items[i].style.display = '';
}
// 留下我自己
items[index].style.display = 'block';
}
}
7、 H5自定义属性
7.1 自定义属性目的：
为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
7.2 设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
//比如
<div data-index="1"></div>
//或者使用 JS 设置
element.setAttribute(‘data-index’, 2)
7.3 获取H5自定义属性
兼容性比较好，获取 element.getAttribute(‘data-index’);
H5新增 element.dataset.index 或者 element.dataset[‘index’]ie 11才开始支持
<div getTime = "20" data-index = '2' data-list-name="andy"></div>
<script>
var div = document.querySelector('div');
// console.log(div.getTime); 输出undefined，因为自定义属性要使用getAttribute来获取
console.log(div.getAttribute('getTime'));
div.setAttribute('data-time',20);
console.log(div.getAttribute('data-index'));
// h5新增的获取自定义属性的方法，dataset，只能获取以data-开头的
console.log(div.dataset.index);
// dataset是自定义元素集合的意思，存放了所以以data开头的元素属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
// 如果自定义属性里面有多个-连接的单词，我们获取的时候采取的是驼峰命名法
console.log(div.dataset.listName);
console.log(div.dataset['listName']);
</script>
