排他思想，自定义属性操作，tab切换栏

排他思想

如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法︰

1.所有元素全部清除样式(干掉其他人)

2.给当前元素设置样式(留下我自己)

3.注意顺序不能颠倒，首先干掉其他人，再设置自己

 百度换肤效果

1.这个案例练习的是给一组元素注册事件

2.给4个小图片利用循环注册点击事件

3.当我们点击了这个图片，让我们页面背景改为当前的图片

JS代码

注意：

this.src就是我们点击图片的路径    images/2.jpg

console.log(this.src);

把这个路径 this.src 给body就可以了

CSS样式 表格隔行变色效果

用到新的鼠标事件鼠标经过onmouseover鼠标离开onmouseout

核心思路︰鼠标经过tr行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色

注意:第一行( thead里面的行)不需要变换颜色，因此我们获取的是tbody里面的行

 表单全选取消

分析：

全选和取消全选做法︰让下面所有复选框的checked属性（选中状态）跟随全选按钮即可

下面复选框需要全部选中，上面全选才能选中做法∶给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选就不选中。

可以设置一个变量，来控制全选是否选中

 自定义属性的操作

1.获取属性值

• element.属性  获取属性
• element.getAttribute('属性')

区别：

element.属性获取内置属性值(元素本身自带的属性)

element.getAttribute('属性' );   主要获得自定义的属性（标准）我们程序员自定义的属性

2.设置元素属性值

• element.属性='值'  设置属性
• element.setAttribute('属性','值')

区别：

element.属性  设置内置属性

element.setAttribute('属性' );   主要设置自定义的属性（标准）

3.移除元素属性值   removeAttribute

 tab栏切换

1.Tab栏切换有2个大的模块

2.上面的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变(排他思想）修改类名的方式

3.下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。

4.规律︰下面的模块显示内容和上面的选项卡——对应，相匹配。

5.核心思路:给上面的tab_list里面的所有小li添加自定义属性，属性值从o开始编号。

6.当我们点击tab_list里面的某个小li,让tab_con里面对应序号的内容显示，其余隐藏（排他思想)

HTML代码

 JS代码