如果有同一組元素，我們想要某一個(gè)元素實(shí)現(xiàn)某種樣式，需要用到循環(huán)的排他思想算法：
1.所有元素全部清除樣式
2.給自己(當(dāng)前元素)設(shè)置樣式
3.順序不能顛倒钱雷，首先清除樣式，再給自己設(shè)置樣式
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
//給5個(gè)按鈕都綁定點(diǎn)擊事件
//1.獲取所有按鈕元素
//btns得到的是偽數(shù)組吹零，獲取里面的每一個(gè)元素用btns[i]
//單純只用for循環(huán)取每一個(gè)按鈕罩抗，然后添加點(diǎn)擊事件是沒用的
//因?yàn)闆]點(diǎn)一個(gè)都會(huì)變色，但是點(diǎn)下一個(gè)按鈕上一個(gè)按鈕的顏色不會(huì)取消
//所以用雙重for循環(huán)灿椅，外層循環(huán)用于獲取按鈕套蒂，而內(nèi)層循環(huán)用于去掉每一個(gè)按鈕的顏色
var btns = document.getElementsByTagName('button');
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
//1.先把所有的按鈕背景色去掉
for (var i = 0; i < btns.length; i++) {
//點(diǎn)誰this就指向誰
btns[i].style.backgroundColor = '';
}
//2.顏色去掉后讓當(dāng)前點(diǎn)擊事件綁定的那個(gè)按鈕背景顏色為pink
this.style.backgroundColor = 'pink';
}
}
</script>
image.png
分析：
1.這個(gè)案例練習(xí)是給一組元素注冊(cè)事件
2.給4個(gè)小圖片利用循環(huán)注冊(cè)點(diǎn)擊事件
3.當(dāng)我們點(diǎn)擊了這張圖片，讓我們的頁(yè)面背景改為當(dāng)前的圖片
4.核心思路：把當(dāng)前圖片(this)的src路徑取過來茫蛹，給body作為背景即可
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(images/1.jpg) no-repeat center top;
}
li {
list-style: none;
}
.baidu {
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 410px;
padding-top: 3px;
}
.baidu li {
float: left;
margin: 0 1px;
cursor: pointer;
}
.baidu img {
width: 100px;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
//1.獲取元素： 4張圖片
var imgs = document.querySelector('.baidu').querySelectorAll('img');
//2.循環(huán)注冊(cè)時(shí)間
for (i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
//this.scr就是點(diǎn)擊的那張圖片的路徑
//把這張圖的路徑給body就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
image.png
案例分析：
1.用到新的鼠標(biāo)事件 鼠標(biāo)經(jīng)過 onmouseover 鼠標(biāo)離開 onmouseout
2.核心思路：鼠標(biāo)經(jīng)過tr行操刀，當(dāng)前行變背景顏色，鼠標(biāo)離開去掉當(dāng)前的背景色
3.注意：第一行(thead里面的行)不需要變換顏色婴洼，因此我們獲取的是tbody里面的行
<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>累計(jì)凈值</th>
<th>前單位凈值</th>
<th>凈值增長(zhǎng)率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>農(nóng)銀金穗3個(gè)月定期開放債券</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個(gè)月定期開放債券</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個(gè)月定期開放債券</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個(gè)月定期開放債券</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個(gè)月定期開放債券</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個(gè)月定期開放債券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
//1.獲取元素 獲取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
//2.循環(huán)注冊(cè)骨坑，綁定事件
for (var i = 0; i < trs.length; i++) {
//3. 鼠標(biāo)經(jīng)過 onmouseover
trs[i].onmouseover = function() {
//寫一個(gè)背景色的類.bg，鼠標(biāo)經(jīng)過每一行換成bg設(shè)定好的顏色pink
this.className = 'bg';
}
//4.鼠標(biāo)離開事件 onmouseout
//鼠標(biāo)離開后顏色為空
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
image.png
