<meta charset="utf-8">
排他操作
排他思想
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
- 所有元素全部清除样式（干掉所有人）
- 给当前元素设置样式 （留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
var btns = document.getElementsByTagName('button')
// btns[0]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
// 干掉所有人
for (var j = 0; j < btns.length; j++) {
btns[j].style.backgroundColor = '';
}
// for (var i = 0; i < btns.length; i++) {
// btns[i].style.backgroundColor = '';
// }
this.style.backgroundColor = 'blue';
}
}
</script>
image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(../imgs/bgc/1.jpg) no-repeat center top;
}
li{
list-style-type: none;
}
.baidu{
overflow: hidden;
margin: 100px auto;
width: 410px;
padding-top: 3px;
background-color: #fff;
}
.baidu li{
float: left;
margin: 0 1px;
/*小手*/
cursor: pointer;
}
.baidu img{
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="../imgs/bgc/1.jpg" alt=""></li>
<li><img src="../imgs/bgc/2.jpg" alt=""></li>
<li><img src="../imgs/bgc/3.jpg" alt=""></li>
<li><img src="../imgs/bgc/4.jpg" alt=""></li>
</ul>
<script>
// 控制 img
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function () {
// console.log(this.src)
document.body.style.backgroundImage = 'url('+ this.src +')';
}
}
</script>
</body>
</html>
image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<title>Document</title>
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
var trs = document.querySelector('tbody').querySelectorAll('tr')
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () {
this.className = 'bg';
}
trs[i].onmouseout = function () {
this.className = '';
}
}
</script>
</body>
</html>
image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPhone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
var j_cbAll = document.getElementById('j_cbAll') // 全选按钮
// 下面的所有复选框
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input')
// 注册事件
j_cbAll.onclick = function () {
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 () {
var flag = true;
// 每次点击下面的复选框都要检查4个小按钮是否全被选中
for (var j = 0; j <j_tbs.length ; j++) {
if(!j_tbs[j].checked){
// 没有被选中
flag = false;
// 只要有一个没选中就不需要判断了
// console.log('flag' + flag)
break;
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>
作者：method
链接：http://08643.cn/p/6d288dc56c23
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
