操作元素--排他思想
2020-09-14 本文已影响0人
潘肚饿兵哥哥
如果有同一组元素，我们想要某一个元素实现某种样式，需要用到循环的排他思想算法：
1.所有元素全部清除样式
2.给自己(当前元素)设置样式
3.顺序不能颠倒，首先清除样式，再给自己设置样式
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
//给5个按钮都绑定点击事件
//1.获取所有按钮元素
//btns得到的是伪数组，获取里面的每一个元素用btns[i]
//单纯只用for循环取每一个按钮，然后添加点击事件是没用的
//因为没点一个都会变色，但是点下一个按钮上一个按钮的颜色不会取消
//所以用双重for循环，外层循环用于获取按钮，而内层循环用于去掉每一个按钮的颜色
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++) {
//点谁this就指向谁
btns[i].style.backgroundColor = '';
}
//2.颜色去掉后让当前点击事件绑定的那个按钮背景颜色为pink
this.style.backgroundColor = 'pink';
}
}
</script>
image.png
分析：
1.这个案例练习是给一组元素注册事件
2.给4个小图片利用循环注册点击事件
3.当我们点击了这张图片，让我们的页面背景改为当前的图片
4.核心思路：把当前图片(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.循环注册时间
for (i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
//this.scr就是点击的那张图片的路径
//把这张图的路径给body就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
image.png
案例分析：
1.用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
2.核心思路：鼠标经过tr行，当前行变背景颜色，鼠标离开去掉当前的背景色
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>累计净值</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>
//1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
//2.循环注册，绑定事件
for (var i = 0; i < trs.length; i++) {
//3. 鼠标经过 onmouseover
trs[i].onmouseover = function() {
//写一个背景色的类.bg，鼠标经过每一行换成bg设定好的颜色pink
this.className = 'bg';
}
//4.鼠标离开事件 onmouseout
//鼠标离开后颜色为空
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
image.png
