本文探讨了HTML中的元素操作，特别是通过JavaScript实现的节点层级管理。内容涉及排他思想在处理元素相互关系中的应用。
一、排他思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for(var i = 0; i < btns.length; i++){
btns[i].onclick = function(){
// 先把所有按钮背景颜色去掉
for(var i = 0; i < btns.length; i++){
btns[i].style.backgroundColor = '';
}
// 然后才让当前的元素背景为 yellow
this.style.backgroundColor = 'yellow';
}
}
// 首先要先排除其他人，然后才设置自己的样式 此为排他思想
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(./images/1.jpg) no-repeat center top;
background-size: 1600px;
}
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" 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>
// 案例分析
// 这个案例练习的是给一组元素注册事件
// 给4个小图片利用循环注册点击事件
// 当我们点击了这个图片，让我们页面背景改为当前的图片
// 核心算法∶把当前图片的src路径取过来，给body做为背景即可
// 1、获取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img')
// console.log(imgs);
// 2、循环注册事件
for(var i = 0; i < imgs.length; i++){
imgs[i].onclick = function(){
// this.src 就是点击图片的路径
// console.log(this.src);
// 把这个路径 this.src给body就可以了
document.body.style.backgroundImage = ' url('+this.src+') ';
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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: steelblue;
}
</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>
</tbody>
</table>
<script>
// 1、获取元素 获取的是 tdoby 里面的所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 利用循环绑定注册事件
for(var i = 0; i < trs.length; i++){
// 鼠标经过事件 onmouseover
trs[i].onmouseover = function(){
// console.log(11);
this.className = 'bg';
}
// 鼠标离开事件 onmouseout
trs[i].onmouseout = function(){
最低0.47元/天 解锁文章
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
