普歌-智音团队-JavaScript 之排他操作及案例
排他操作
排他思想
如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:
1. 所有元素全部清除样式(干掉其他人)
2. 给当前元素设置样式 (留下我自己)
3. 注意顺序不能颠倒,首先干掉其他人,再设置自己
效果
代码
<button>aaa</button>
<button>bbb</button>
<button>ccc</button>
<button>ddd</button>
<button>fff</button>
<script>
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
//2. 首先先排除其他人,然后才设置自己的样式 这种排除其他人的思想我们成为排他思想
百度换肤案例
效果
案例代码
<ul class="baidu">
<li><img src="images/换肤.jpg"></li>
<li><img src="images/换肤1.jpg"></li>
<li><img src="images/换肤2.jpg"></li>
<li><img src="images/换肤3.jpg"></li>
</ul>
<script>
// 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 + ')';
}
}
表格隔行换色案例
效果
案例代码
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>班级</th>
<th>专业</th>
<th>电话号</th>
<th>学校</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>1班</td>
<td>金融</td>
<td>152********</td>
<td>xx大学</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>1班</td>
<td>金融</td>
<td>152********</td>
<td>xx大学</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>1班</td>
<td>金融</td>
<td>152********</td>
<td>xx大学</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>2班</td>
<td>财管</td>
<td>150********</td>
<td>xx大学</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>1班</td>
<td>金融</td>
<td>152********</td>
<td>xx大学</td>
</tr>
<tr>
<td>赵六</td>
<td>男</td>
<td>1班</td>
<td>金融</td>
<td>152********</td>
<td>xx大学</td>
</tr>
</tbody>
</table>
<script>
// 1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onmouseover
trs[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>