js进阶Web APIs02---案例实现
作者：互联网
1.百度换肤（点击某个图片，给body换背景）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
<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>
</html>
2.表格隔行变色（鼠标放到某一行时，某一行变色；鼠标移开时，没有颜色）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容1</td>
<td>内容1</td>
</tr>
<tr>
<td>内容2</td>
<td>内容2</td>
<td>内容2</td>
</tr>
<tr>
<td>内容3</td>
<td>内容3</td>
<td>内容3</td>
</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() {
// console.log(11);
this.className = 'bg';
}
// 4. 鼠标离开事件 onm ouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
</body>
</html>
3.全选反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table {
width: 200px;
margin: 100px auto;
/* 表格变为单线条 */
border-collapse: collapse;
}
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>
<body>
<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>JAVA</td>
<td>10元</td>
</tr>
<tr>
<!--子按钮-->
<td><input type="checkbox" /></td>
<td>HTML</td>
<td>20元</td>
</tr>
<tr>
<!--子按钮-->
<td><input type="checkbox" /></td>
<td>CSS</td>
<td>30元</td>
</tr>
</tbody>
</table>
<script>
var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
// 1当全选按钮被点击后，使 下面几个复选的状态与全选按钮的状态相同，实现
//①.全选按钮选中，则其它几个按钮都选上
//②.全选按钮不选中，则其它几个按钮都不选
j_cbAll.onclick = function() {
console.log(j_cbAll.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = j_cbAll.checked;
}
}
//当点击每一个选项时，判断全选按钮的状态
//①所有选项如果都已经被选中，则全选按钮选中
//②如果有一个没有被选中，则全选按钮不选中
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>
</body>
</html>
标签：Web,进阶,color,tbs,js,全选,background,按钮,var 来源： https://blog.csdn.net/pilgrim_121/article/details/113184472