排他操作
时间:2022-07-28
本文章向大家介绍排他操作,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1. 排他操作
1.1 排他思想
如果有同一组元素,我们想要某一个元素实现某种样式, 需要用到循环的排他思想算法:
- 所有元素全部清除样式(干掉其他人)
- 给当前元素设置样式 (留下我自己)
- 注意顺序不能颠倒,首先干掉其他人,再设置自己
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</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) 然后才让当前的元素背景颜色为purple 留下我自己
this.style.backgroundColor = 'purple';
}
}
</script>
1.2 案例:百度换肤
案例分析
① 这个案例练习的是给一组元素注册事件
② 给4个小图片利用循环注册点击事件
③ 当我们点击了这个图片,让我们页面背景改为当前的图片
④ 核心算法: 把当前图片的src 路径取过来,给 body 做为背景即可
<style>
* {
padding: 0;
margin: 0;
}
body {
background: url(images/1.jpg) no-repeat center;
}
.baidu {
width: 410px;
height: 100px;
margin: 150px auto;
background-color: #fff;
}
.baidu li {
float: left;
list-style: none;
width: 100px;
height: 98px;
margin: 0 1px;
}
.baidu li img {
width: 100%;
height: 100%;
}
</style>
<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>
// 1. 获取元素
var imgs = document.querySelector(".baidu").querySelectorAll("img");
// 2.注册循环事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
document.body.style.backgroundImage = "url(" + this.src + ")";
};
}
</script>
</body>
1.3 案例:表格隔行变色
案例分析
① 用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
② 核心思路:鼠标经过 tr 行,当前的行变背景颜色, 鼠标离开去掉当前的背景颜色
③ 注意: 第一行(thead里面的行)不需要变换颜色,因此我们获取的是 tbody 里面的行
<script>
// 1. 获取元素
var tb = document.querySelector("tbody").querySelectorAll("tr");
// 2.利用循环绑定注册事件
for (var i = 0; i < tb.length; i++) {
// 3.鼠标经过
tb[i].onmouseover = function () {
this.className = "bg";
};
// 4. 鼠标离开
tb[i].onmouseout = function () {
this.className = "";
};
}
</script>
1.4 案例::表单全选取消全选案例
业务需求: 1. 点击上面全选复选框,下面所有的复选框都选中(全选) 2. 再次点击全选复选框,下面所有的复选框都不中选(取消全选) 3. 如果下面复选框全部选中,上面全选按钮就自动选中 4. 如果下面复选框有一个没有选中,上面全选按钮就不选中 5. 所有复选框一开始默认都没选中状态
案例分析 ① 全选和取消全选做法: 让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
② 下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都 要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。
③ 可以设置一个变量,来控制全选是否选中
<script>
// 获取元素
var j_cbAll = document.getElementById("j_cbAll");
var j_tbs = document.getElementById("j_tb").getElementsByTagName("input");
j_cbAll.onclick = function () {
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 () {
var flag = true;
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
}
}
j_cbAll.checked = flag;
};
}
</script>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 快速学习-Jenkins CLI QuickStart
- 快速学习-Jenkins CLI用户
- 快速学习-Jenkins CLI诊断
- 快速学习-Jenkins CLI下载
- vue-element-admin提交表单数据到后端
- JDK15正式发布,划时代的ZGC同时宣布转正
- Redis的各种数据类型实践---List结构
- Git分支操作方法
- 最全解密微信红包随机算法(含代码实现)
- 两次死锁的分析
- 一次解决你的图像尺寸和定位问题。
- vuedraggable实现列表拖动排序
- 在 Xcode 中添加 Swift package 依赖
- 浅谈JavaScript中的apply,call和bind
- Git 的简单使用