前端DOM-排他思想
发布时间
阅读量：
阅读量
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
-
一、排他思想是什么？
-
二、案例：百度换肤
-
- 1.案例分析
- 2.介绍
- 3.代码块
-
表格隔行变色
-
- 1.案例分析
- 业务需求
一、排他思想是什么？
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
- 所有元素全部清除样式（干掉其他人）
- 给当前元素设置样式 （留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
二、案例：百度换肤
1.案例分析
1.这个案例练习的是给一组元素注册事件
2.给4个小图片利用循环注册点击事件
3.当我们点击了这个图片，让我们页面背景改为当前的图片
4.核心算法： 把当前图片的src 路径取过来，给 body 做为背景即可
2.介绍
录像1
3.代码块
<body>
<ul class="baidu">
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
<li><img src="./images/4.jpg" alt=""></li>
</ul>
<script>
// 获取元素
var images = document.querySelector('.baidu').querySelectorAll('img');
// 事件
for (var i = 0; i < images.length; i++) {
images[i].onclick = function() {
// this.src 是鼠标点到那就是那的路径
// 获取body document.body
document.body.style.backgroundImage = 'url(' + this.src + ')'
}
}
</script>
</body>表格隔行变色
1.案例分析
1.全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
2.下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，3.如果有一个没选中的， 上面全选就不选中。
可以设置一个变量，来控制全选是否选中
业务需求
点击上面全选复选框，下面所有的复选框都选中（全选）
再次点击全选复选框，下面所有的复选框都不中选（取消全选）
如果下面复选框全部选中，上面全选按钮就自动选中
如果下面复选框有一个没有选中，上面全选按钮就不选中
所有复选框一开始默认都没选中状态
<script>
// 1. 全选和取消全选的思想： 让下面的复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
//下面所有的复选框
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 注册事件
j_cbAll.onclick = function() {
// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，
// 如果是false就是没选中
// console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
// 下面所有的复选框给 父级控制
j_tbs[i].checked = this.checked;
}
}
// 下面复选框全选种对应 上面的选中
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag = true; 来控制是否被选中
var flag = true;
// 每次点击下面的复选框都要循环检查4个小按钮是否全被选种
for (var j = 0; j < j_tbs.length; j++) {
// 如果有一个没被选上就是false
if (!j_tbs[j].checked) {
flag = false;
break; // 只要有一个没被选中，则就无需循环，退出即可
}
}
j_cbAll.checked = flag;
}
}
</script>全部评论 (0)
还没有任何评论哟~