案例:表格的全选以及取消全选
核心思想:1.全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
2.下面的复选框需要全部选中,上面的全选才能选中做法:给下面所有的复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没有选中的,如果有一个没有选中的,上面全选就不选中
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>
<style>
.top {
background-color: rgb(191, 200, 216);
}
div table {
border: solid blue 1px;
}
div th {
border: solid blue 1px;
}
div td {
border: solid blue 1px;
}
</style>
</head>
<body>
<div>
<table cellspacing=0 px>
<thead class="top">
<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>ipone4</td>
<td>4000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
iponewatch
</td>
<td>ipone8</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>ipone10</td>
<td>10000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>ipone8</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
<script>
//让复选框的checked属性跟随全选按钮即可
var j_cball = document.getElementById("j_cball");
var j_tbs = document.getElementById("j_tb").querySelectorAll("input");
j_cball.onclick = function() {
//this.checked它可以得到当前复选框的选中状态是TRUE,就是选中,如果是false就是未选中
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
var flag = true; //flag控制全选按钮是否选中
//每次点击后循环下面的复选框都要循环检查4个小按钮是否被全部选中
for (var j = 0; j < j_tbs.length; j++) {
if (!j_tbs[j].checked) {
flag = false;
}
}
j_cball.checked = flag;
}
}
//思路:当下面的任何一个复选框被点击之后,先设置全选框为选中,然后遍历四个复选框,看是否有没有没被选中的,如果有,则执行if里面的语句,如果 没有,则不执行,flag=1,则如果四个复选框都是被选中状态下的,那么全选框也会被选中,无论点击任何一个都会遍历这个过程
</script>
</body>
</html>
4.6自定义属性的操作
1.获取属性值
- element.属性 获取属性值 获取内置属性值(元素本身自带的属性)
- element.getattribute("属性“);主要获得自定义的属性(标准) 我们程序员自定义的属性
2.设置属性值
- element.属性=”值“ 设置内置属性值
- element.setAttribute("属性," "值”) 主要针对自定义属性
3.移除属性
- element.removeAttribute("属性");
案例:tab栏切换
当鼠标点击上面相应的选项卡,下面内容跟随变化
运用到排他思想!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.t_top {
background-color: pink;
display: block;
width: 400px;
margin-left: 400px;
}
ul {
list-style: none;
margin: 0;
}
li {
display: inline;
border: 1px red;
}
.mycss {
text-align: center;
}
.item {
display: none;
}
.current {
background-color: red;
}
</style>
</head>
<body>
<div class="mycss">
<div class="t_top">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="t_bottom">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
var tab_top = document.querySelector(".t_top");
var lis = tab_top.querySelectorAll("li");
var items = document.querySelectorAll(".item");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("index", i);
lis[i].onclick = function() {
for (var j = 0; j < lis.length; j++) {
lis[j].className = "";
}
this.className = "current";
var index = this.getAttribute("index");
console.log(index);
for (var i = 0; i < items.length; i++) {
items[i].style.display = "none";
}
items[index].style.display = "block";
}
}
</script>
</body>
</html>
4.7自定义属性:
自定义属性的目的:是为了保存并且使用数据,有些数据可以保存到页面中而不用保存到数据库中
自定义属性获取是通过getAttribute("属性")获取
但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性
1.设置h5自定义属性:
h5规定自定义属性date开头作为属性名并且赋值。
比如<div data-index="1"></div>
或者使用js设置
2.获取自定义属性:
- 兼容性获取element,getAttribute("data-index");
- element.dataset.index或者element.dataset["index"] p37