Web APIs案例小合集
目录
1、排他思想
1.1 什么叫排他思想
首先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们称为排他思想。
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式 （留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
1.2 案例展示
1.3 代码实现
<!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() {
//(1)首先需要把所有的按钮背景颜色去掉
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
//(2)然后才让当前元素的背景颜色改变
this.style.backgroundColor = 'pink';
}
}
//首先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们称为排他思想
</script>
</body>
</html>2、案例：百度换肤
2.1 案例展示
2.2 案例分析
- 这个案例练习的是一组元素注册事件
- 给四个小图片用循环设置点击事件
- 我们点击了这个图片，让我们页面背景改为当前的图片
- 核心算法：把当前图片的src路径获取过来，给body做为背景
2.3 代码实现
<!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;
}
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>
var imgs = document.querySelector('.baidu').querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
//this.src 就是我们点击的图片的路径
//然后把这个this.src 路径给我们的body
//获取body document.body
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
</html>3、表格隔行变色
3.1 案例展示
3.2 案例分析
- 用到新的鼠标事件，鼠标经过onmouseover 鼠标离开onmouseout
- 核心思路：鼠标进过tr行，当前的行的背景颜色改变，鼠标离开去掉当前的背景颜色
- 注意：第一行的样式我们不需要去获取进行更改，我们获取的是tbody里面的内容
2.3 代码实现
<!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: 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>
//获取的元素对象是tbody里面的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
//利用循环绑定注册事件
for (var i = 0; i < trs.length; i++) {
//鼠标经过事件 onmouseover
trs[i].onmouseover = function() {
this.className = 'bg';
}
//鼠标离开事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
</html>4、表单全选案例
4.1 案例展示
4.2 案例分析
- 全选和取消全选做法：让下面所有复选框的checked属性(选中状态) 跟随全选按钮即可
- 下面复选框需要全部选中，上面全选才能选中的做法：给下面所有复选框绑定点击事件，每次点击都要循环查看下面所有的复选框是否有没有选中，如果有一个没有选中的，上面全选就不选中
- 可以设置一个变量，来控制全选是否选中
4.3 代码实现
<!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>
* {
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>
//1.全选和取消全选做法： 让下面所有复选框的CheckBox属性（选中状态） 跟随 全选按钮即可
//获取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
//注册事件
j_cbAll.onclick = function() {
//this.checked 可以得到当前复选框的选中状态
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
//2.下面复选框需要全部选中，上面全选才能选中的做法，给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中，上面全选就不选中
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
//3.可以设置一个变量，来控制全选是否选中
var flag = true;
//每次点击下面的复选框都要循环检查这四个按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
}
}
j_cbAll.checked = flag;
}
}
</script>
</body>
</html>总结
今天小编的分享到现在就结束了！看在小编如此努力的份上，点个赞再走吧！
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码