Web API及DOM介绍(二) ——排他思想（多案例）
作者：互联网
本篇博客的主要内容就是排他思想。
目录
一、排他思想
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
- 所有元素全部清除样式（干掉其他人）
- 给当前元素设置样式 （留下我自己）
- 注意顺序不能颠倒，首先干掉其他人，再设置自己
案例代码：
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 1. 获取所有按钮元素
var btns = document.getElementsByTagName('button');
// btns得到的是伪数组 里面的每一个元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我们先把所有的按钮背景颜色去掉 干掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然后才让当前的元素背景颜色为pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
</script>
上图就是利用排他思想的一个小案例，这种例子在网页中十分常见，所以我们需要熟练掌握排他思想。
案例1：模拟百度换肤效果
效果要求：点击小图片更换对应的背景图片
思路：
1.先给一组元素注册事件
2.给4张小图片循环注册点击事件
3.当我们点击了这张图片，就将页面背景改为当前的图片
4.核心算法：获取当前图片的src，给body作为背景
案例代码：
<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. 获取元素
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 就是我们点击图片的路径 images/2.jpg
// console.log(this.src);
// 把这个路径 this.src 给body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>案例2：表格隔行换色
效果要求：当鼠标移动到表内的某一行时，该行有背景颜色方便查看
思路：
1.使用新的鼠标事件-鼠标经过、鼠标离开
2.当鼠标经过tr行时，改变当前行的背景颜色，当鼠标离开时，清除该行的背景颜色
3.第一行（表头）不需要改变颜色，所以我们获取的是tbody里面的行
案例代码：
<head>
<title>隔行换色t</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 866px;
margin: 100px auto;
}
table thead {
height: 40px;
background-color: #7fc8ed;
}
table tbody {
color: #333;
font-size: 12px;
}
table tbody tr th {
height: 30px;
border-bottom: 1px solid #ccc;
}
.bg {
background-color: rgb(165, 225, 248);
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
<th>公布日期</th>
</tr>
</thead>
<tbody>
<tr>
<th>003526</th>
<th>农银金穗3个月定期开放债务</th>
<th>1.075</th>
<th>1.079</th>
<th>1.074</th>
<th>+0.047%</th>
<th>2019-01-11</th>
</tr>
<tr>
<th>270047</th>
<th>广发理财30天债券B</th>
<th>0.903</th>
<th>3.386</th>
<th>0.000</th>
<th>0.000%</th>
<th>2019-01-16</th>
</tr>
<tr>
<th>163417</th>
<th>兴全合宜混合A</th>
<th>0.860</th>
<th>0.860</th>
<th>0.863</th>
<th>-0.382%</th>
<th>2019-01-16</th>
</tr>
<tr>
<th>003929</th>
<th>中银证券安进债券A</th>
<th>1.034</th>
<th>1.088</th>
<th>1.034</th>
<th>+0.077%</th>
<th>2019-01-16</th>
</tr>
</tbody>
</table>
<script>
// 1.获取元素 获取的是 tbody 里面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠标经过事件 onm ouseover
trs[i].onmouseover = function () {
this.className = 'bg';
}
// 4. 鼠标离开事件 onm ouseout
trs[i].onmouseout = function () {
this.className = '';
}
}
</script>
</body>
案例3：全选操作
效果要求：
1.点全选复选框，下面所有的复选框都会被选中，取消全选，下面所有都会取消
2.如果下面有一个复选框没有被选中，则取消上面的全选框
3.如果下面的复选框全部选中，则上面的全选复选框会自动选中
4.所有复选框一开始默认都不选中
思路：
1.先给上面的复选框绑定注册事件，上面被选中，下面的全部选中，上面取消下面也取消
2.下面的复选框需要全部选中，上面全选才选中--循环查看下面的复选框是否选中，若全部选中，则上面的选中
3.设置一个变量，来控制全选是否选中
案例代码：
<head>
<title>全选</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 400px;
margin: 100px auto;
}
thead {
height: 40px;
background-color: #7fc8ed;
}
thead tr th {
border: 1px solid #ccc;
}
tbody {
color: #333;
font-size: 12px;
}
table tbody tr td {
height: 30px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" name="" id="ckall"></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="ck">
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>iPhone13</td>
<td>8999</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>iPad Pro</td>
<td>6999</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>iPad Air</td>
<td>4999</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>Apple Watch</td>
<td>2999</td>
</tr>
</tbody>
</table>
<script>
// 1. 全选和取消全选做法：让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
var ckall = document.getElementById('ckall');
var cks = document.getElementById('ck').querySelectorAll('input');
ckall.onclick = function(){
for(var i = 0;i<cks.length;i++ ){
cks[i].checked = this.checked;
}
}
// 给所有的子复选框注册单击事件
for (var i = 0; i < cks.length; i++) {
cks[i].onclick = function () {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < cks.length; i++) {
if (!cks[i].checked) {
flag = false;
break;
}
}
// 设置全选按钮的状态
ckall.checked = flag;
}
}
</script>
</body>
二、自定义属性操作
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
1.获取属性值
- element.属性 //获取属性值
- element.getAttribute('属性')；
区别：
element.属性 获取内置属性（即元素本身自带的属性）
element.getAttribute('属性')； 主要获得自定义的属性（标准）
2.设置属性值
- element.属性 = '值' //设置内置属性值
- element.setAttribute('属性','值')；
区别：
element.属性 设置内置属性（即元素本身自带的属性）
element.getAttribute('属性')； 主要设置自定义的属性（标准）
3.移出属性
element.removeAttribute('属性')；
4.H5自定义属性
有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。于是H5给我们新增了自定义属性。
4.1设置H5自定义属性
H5规定自定义属性以data-开头作为属性名并且赋值 如： <div data-index = "1"></div>
或者使用js设置 如：element.setAttribute('data-index','2')；
4.2获取H5自定义属性
1.element.getAttribute('属性')；
2.H5新增：element.dataset.属性 或者element.dataset['属性'] //ie11才支持
案例4：Tab栏切换
思路：
1.Tab栏切换有两个模块
2.上面的选项卡，点击某一个，当前的底色会改变，其余不变 （排他思想）
3.下面的模块内容，跟随上面的选项卡进行变化，所以写到点击事件里面
4.下面的显示内容和上面的选项卡一一对应
5.给上面的选项卡添加自定义属性data-index属性 从0开始编号
6.当我们点击上面的选项卡，让下面li里面对应序号的内容显示，其余隐藏（排他思想）
案例代码：
<head>
<title>tab栏切换</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 1000px;
height: 500px;
margin: 50px auto;
}
ul {
list-style: none;
}
.title {
float: left;
width: 1000px;
height: 40px;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.title li {
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 20px;
cursor: pointer;
}
.cor {
background-color: #ec4141;
color: #fff;
}
.tbody {
width: 1000px;
height: 400px;
}
.tbody li {
display: none;
width: 100%;
height: 100%;
}
.tbody li:first-child {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul class="title">
<li class="cor">首页</li>
<li>娱乐</li>
<li>体育</li>
<li>国内</li>
<li>国际</li>
</ul>
<ul class="tbody">
<li>首页页面</li>
<li>娱乐页面</li>
<li>体育页面</li>
<li>国内页面</li>
<li>国际页面</li>
</ul>
</div>
<script>
var tt = document.querySelector('.title');
var tlis = tt.querySelectorAll('li');
var lis = document.querySelector('.tbody').querySelectorAll('li');
// 上面的变化
for (var i = 0; i < tlis.length; i++) {
// 设置index
tlis[i].setAttribute('data-index', i);
// 鼠标点击版
tlis[i].onclick = function () {
for (var i = 0; i < tlis.length; i++) {
tlis[i].className = '';
lis[i].style.display = 'none';
}
this.className = 'cor'
var index = this.getAttribute('data-index');
lis[index].style.display = 'block';
}
}
</script>
</body>
看完本篇博客，排他思想你get了吗？
标签：Web,自定义,DOM,tbody,element,全选,API,var,属性 来源： https://blog.csdn.net/weixin_45990864/article/details/120768886