<meta charset="utf-8">
排他操作
排他思想
如果有同一組元素职恳，我們想要某一個元素實現(xiàn)某種樣式， 需要用到循環(huán)的排他思想算法：
- 所有元素全部清除樣式（干掉所有人）
- 給當前元素設置樣式 （留下我自己）
- 注意順序不能顛倒，首先干掉其他人饼拍，再設置自己
<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>農(nóng)銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農(nóng)銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農(nóng)銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農(nóng)銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農(nóng)銀金穗3個月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>農(nóng)銀金穗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>
