DOM – document object model
image.png
image.png
image.png
案例-回到顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java script</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 3000px;
}
.header{
width:100%;
height:80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
color: white;
background-color: skyblue;
transition: top .5s linear;
position: fixed;
top: -80px;
left:0;
}
.goTop{
width: 50px;
height: 50px;
background-color: pink;
font-size: 20px;
text-align: center;
line-height: 25px;
color: white;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="goTop">go top</div>
<script>
// 1. get element
var header = document.querySelector('.header');
var goTop = document.querySelector('.goTop');
// 2. 绑定滚动事件
window.onscroll = function () {
// 2.1 获取浏览器卷去高度
var height = document.documentElement.scrollTop || document.body.scrollTop;
// 2.2 判断卷去的高度
if (height >= 300){
//显示
header.style.top = '0px';
goTop.style.display = 'block';
}else{
//隐藏
header.style.top = '-80px';
goTop.style.display = 'none';
}
// 3. 绑定点击事件
goTop.onclick = function () {
// 3.1 让页面滚回到顶部
window.scrollTo({
top: 0,
behavior :'smooth',
}
)
}
}
</script>
</body>
</html>
案例- 全选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java script</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
padding: 20px;
border: 1px solid pink;
margin: 30px auto;
border-radius: 5px;
}
hr{
margin: 10px 0;
}
</style>
</head>
<body>
<div class="box">
selectAll <input type="checkbox"> <br>
<hr>
<input type="checkbox">1<br>
<input type="checkbox">2<br>
<input type="checkbox">3<br>
<input type="checkbox">4<br>
</div>
<script>
// 1. get element
var allBtn = document.querySelector('input');
var items = document.querySelectorAll('input:nth-child(n+2)');
console.log(allBtn);
console.log(items);
// 2. 给全选按钮绑定事件
allBtn.onclick = function () {
// 2.1 拿到自己的选中状态
var type = allBtn.checked;
console.log(type);
// 2.2 把自己的选中状态设置给每一个选项按钮
for (var i = 0 ; i < items.length; i ++){
items[i].checked = type;
}
}
// 3. 循环给每一个选项按钮绑定点击事件
for (var i = 0 ; i < items.length ; i ++){
// 3.1 给每一个选项按钮绑定点击事件
items[i].onclick = function () {
// 3.2 首先定义假设变量，假设所有按钮都是选中的
var flag = true;
// 3.3 通过循环来验证假设
for (var j = 0 ; j < items.length ; j ++){
if(items[j].checked === false){
flag = false;
break;
}
}
// 3.4 把得到的结果设置给全选按钮
allBtn.checked = flag;
}
}
</script>
</body>
</html>
案例 - 选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java script</title>
<style>
*{
margin: 0;
padding: 0;
}
ul, ol , il{
list-style: none;
}
.box{
width: 600px;
height: 400px;
border: 3px solid pink;
margin: 50px auto;
display: flex;
flex-direction: column;
}
.box > ul {
height: 60px;
display: flex;
}
.box > ul > li {
flex: 1;
color: white;
background-color: skyblue;
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.box > ul > li.active{
background-color: orange;
}
.box > ol {
flex: 1;
position: relative;
}
.box > ol > li {
width: 100%;
height: 100%;
background-color: purple;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 100px;
position: absolute;
left: 0;
top: 0;
display: none;
}
.box > ol > li.active{
display: flex;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<script>
// 1. get element
var btns = document.querySelectorAll('ul > li');
var tabs = document.querySelectorAll('ol > li');
// 2. 给btns里面所有按钮添加绑定事件
btns.forEach(function (item, index) {
item.onclick = function () {
// 2.1 给btn和tabs里面的所有内容取消active类名
btns.forEach(function (t, i) {
t.className = '';
tabs[i].className = '';
})
// 2.2 当前点击的按钮和索引对应的盒子添加active类名
item.className = 'active';
tabs[index].className = 'active'
}
})
</script>
</body>
</html>
image.png
image.png
案例 - 生成表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>java script</title>
<style>
table {
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<!-- JS 渲染 -->
</tbody>
</table>
<script>
var users = [
{ id: 1, name: 'dkw', age: 22},
{ id: 2, name:'yz', age: 21}
];
// 0. 获取到tbody标签
var tbody = document.querySelector('tbody');
// 1. 循环遍历users数据
users.forEach(function (item) {
// item为数组中的一个对象
console.log(item);
// 2. 每循环一次都要生成一个tr标签
var tr = document.createElement('tr');
// 3. 循环遍历item
for(var key in item){
// 4. 生成td标签
var td = document.createElement('td');
td.innerHTML = item[key];
// 5. 把td插入到tr标签内部
tr.appendChild(td)
}
// 6. 把本次的tr插入到tbody的内部
tbody.appendChild(tr);
})
</script>
</body>
</html>
