一、点击换肤效果
案例分析：
1、这个案例是给一组元素注册事件
2、给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>换肤效果</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: url(./images/1.jpg) no-repeat center top;
}
.baidu{
overflow: hidden;
margin: 100px auto;
background-color: #fff;
width: 415px;
padding-top: 3px;
}
.baidu img{
width: 100px;
}
</style>
<body>
<ul class="baidu">
<img src="./images/1.jpg" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<img src="./images/4.jpg" alt="">
</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 就是我们图片的路径
console.log( this.src);
// 把这个路径this.src给body就好了
document.body.style.backgroundImage = 'url('+ this.src +')';
}
}
</script>
</body>
</html>结果展示：
二、隔行变色
案例分析：
1、用到新的鼠标事件，鼠标经过 onmouseover 鼠标离开 onmouseout
2、核心思路，鼠标经过li，当前变背景色，鼠标离开去掉当前的背景色
代码段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li.hover{
background: red;
color: #fff;
}
</style>
</head>
<body>
<ul class="nav">
<li>我是列表1</li>
<li>我是列表2</li>
<li>我是列表3</li>
<li>我是列表4</li>
</ul>
<script>
var navs = document.querySelectorAll(".nav li");
for(var i=0;i<navs.length;i++){
navs[i].onmouseover = function(){
this.className = "hover";
}
navs[i].onmouseout = function(){
this.className="";
}
}
</script>
</body>
</html>结果展示：
三、全选全不选
案例分析；
1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
2. 下面复选框需要全部选中， 上面全选才能选中做法： 给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的， 上面全选就不选中。
3.需要一个变量flag 控制全选按钮是否选中
代码展示：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></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>HUAWEI MateBook 14s</td>
<td>7099</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>HUAWEI WATCH GT 3 </td>
<td>1388</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>HUAWEI FreeBuds Pro 2 </td>
<td>1299</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>HUAWEI MatePad Pro </td>
<td>3399</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
// 1. 全选和取消全选做法： 让下面所有复选框的checked属性（选中状态） 跟随 全选按钮即可
// 获取元素
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
// 注册事件
j_cbAll.onclick = function() {
// this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
console.log(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() {
// flag 控制全选按钮是否选中
var flag = true;
// 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中，剩下的就无需循环判断了
}
}
j_cbAll.checked = flag;
}
}
</script>结果展示：
