2.3增加节点
目标：能够具备根据需求新增节点的能力
- ①很多情况下，需要在页面中增加元素
- ②一般情况下，新增节点是先创建个新的节点，再把创建的新的节点放入指定的元素内部
创建元素节点的方法：
/*创建节点*/
const ul=document.querySelector('ul')
const li=document.createElement('li')
/*追加节点(后面追加)*/
ul.appendChild(li)
/*前面追加*/
ul.insertBefore(li, ul.children[0])
- ③克隆节点
特殊情况，需要复制原有的节点，即克隆节点
const ul=document.querySelector('ul')
/*克隆节点*/
const li1=ul.children[0].cloneNode(true)
/*或*/
ul.appendChild(ul.children[0].cloneNode(true))
2.4删除节点
注：
①如果不存在父子关系则删除不成功
②删除节点和隐藏节点（display：none）有区别，隐藏节点还是存在的，删除则是从html中删除节点
/*创建节点*/
const ul=document.querySelector('ul')
const li=document.createElement('li')
/*删除节点*/
ul.removeChild(ul.children[0])
三.M端事件
touch对象代表一个触摸点。触摸点可能是一根手指也可能是一个触摸笔，对屏幕或者触控板操作
①touchstart，手指触摸到一个DOM元素时触发
②touchmove，手指在一个DOM元素上滑动时触发
③touchend，手指从一个DOM元素上移动时触发
四.swiper插件
<link href="./css/swiper.min.css">
<script src="./js/swiper.min.js">
五.学生表综合案例
<!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>学生就业统计表</title>
</head>
<body>
<h1>学生就业统计表</h1>
<form class="info" autocomplete="off">
<input type="text" class="uname" name="uname" placeholder="学号" />
<input type="text" class="age" name="age" placeholder="姓名" />
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
<input type="text" class="second" name="second" placeholder="二级学院" />
<input type="text" class="classes" name="classes" placeholder="班级">
<input type="text" class="major" name="major" placeholder="专业">
<input type="text" class="teacher" name="teacher" placeholder="辅导员">
<button class="add">
<i class="iconfont icon-tianjia"></i>添加
</button>
</form>
<div class="title">共有数据<span>0</span>条</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>二级学院</th>
<th>班级</th>
<th>专业</th>
<th>辅导员</th>
<th>录入时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// 参考数据
const initData = [
{
stuId: 1,
uname: '孙双峰',
age: '19', // 将年龄改为字符串类型，与表单输入一致
second: '计算机工程学院',
gender: '男',
classes: '242201',
major: '软件工程',
teacher: '寇书昀',
time: '2099/9/9 08:08:08'
}
];
// 初始化本地存储数据
if (!localStorage.getItem('data')) {
localStorage.setItem('data', JSON.stringify(initData));
}
// 1. 渲染业务
// 1.1 先读取本地存储的数据
const arr = JSON.parse(localStorage.getItem('data')) || [];
console.log(arr);
// 1.2 利用map和join方法来渲染页面
const tbody = document.querySelector('tbody');
function render() {
const trArr = arr.map((ele, index) => `
<tr>
<td>${ele.stuId}</td>
<td>${ele.uname}</td>
<td>${ele.age}</td>
<td>${ele.gender}</td>
<td>${ele.second}</td>
<td>${ele.classes}</td>
<td>${ele.major}</td>
<td>${ele.teacher}</td>
<td>${ele.time}</td>
<td>
<a href="javascript:" data-id="${index}">
<i class="iconfont icon-shanchu"></i>
删除
</a>
</td>
</tr>
`);
tbody.innerHTML = trArr.join('');
// 显示共计有几条数据
document.querySelector('.title span').innerHTML = arr.length;
}
render();
// 2. 新增业务
const info = document.querySelector('.info');
const uname = document.querySelector('.uname');
const age = document.querySelector('.age');
const second = document.querySelector('.second');
const gender = document.querySelector('.gender');
const classes = document.querySelector('.classes');
const major = document.querySelector('.major');
const teacher = document.querySelector('.teacher');
// 2.1 form表单注册提交事件，阻止默认行为
info.addEventListener('submit', function (e) {
e.preventDefault();
// 2.2 非空判断
if (!uname.value || !age.value) {
return alert('学号和姓名输入内容不能为空');
}
// 2.3 给 arr 数组追加对象，里面存储 表单获取过来的数据
arr.push({
// 处理 stuId：数组最后一条数据的stuId + 1
stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
uname: uname.value,
age: age.value,
second: second.value,
gender: gender.value,
classes: classes.value,
major: major.value,
teacher: teacher.value,
time: new Date().toLocaleString()
});
// 2.4 渲染页面和重置表单（reset()方法）
render();
this.reset(); // 重置表单
// 2.5 把数组重新存入本地存储里面，记得转换为JSON字符串存储
localStorage.setItem('data', JSON.stringify(arr));
});
// 3. 删除业务
// 3.1 采用事件委托形式，给 tbody 注册点击事件
tbody.addEventListener('click', function (e) {
// 判断是否点击的是删除按钮 A 链接
if (e.target.tagName === 'A') {
// 得到当前点击链接的索引号。渲染数据的时候，动态给a链接添加自定义属性例如 data-id="0"
const index = parseInt(e.target.dataset.id);
// 确认框 确认是否要真的删除
if (confirm('您确定要删除这条数据吗？')) {
// 3.3 根据索引号，利用 splice 删除数组这条数据
arr.splice(index, 1);
// 3.4 重新渲染页面
render();
// 3.5 把最新 arr 数组存入本地存储
localStorage.setItem('data', JSON.stringify(arr));
}
}
});
</script>
</body>
</html>
window对象
BOM是浏览器对象模型，window是全局对象，可以说是js中的顶级对象
window：①navigator②location③document④history⑤screen
一.定时器-延时函数
setTimeout(回调函数，等待的毫秒数)
setTimeout仅仅只执行一次，所以可以理解为一段代码延时执行
setTimeout(function(){
console.log('时间到了')
},2000)
二.js执行机制（单线程）
console.log(1111)
setTimeout(function(){
console.log(2222)
},1000)
console.log(3333)
/*结果是111133332222*/
2.1同步任务
同步任务都在主线程上执行，形成一个执行线
2.2异步任务
异步任务相关添加到任务队列中（消息队列）
js的异步是通过回调函数实现的，一般分三种:①普通事件，如click，resize
②资源加载，如load，error
③定时器，包括setinterval，setTimeout
2.3js执行机制
1.先执行执行栈中的同步任务
2.异步任务放入任务队列中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进行执行线，开始执行
三.location对象
它拆分并保存了url地址的各个组成部分
常见属性与方法：
①href，对其赋值用于地址的调转
console.log(location.href)
location.href='http://www.baidu.cn'
②search，获取地址中携带的参数
console.log(location.search)
四.navigatior对象
记录了浏览器自身的相关信息
常见的属性与方法
userAgent检测浏览器的版本及平台
！(function(){
const userAgent=nagigator.userAgent
const android=userAgent.match(/(Android);?[￥s￥/]+([￥d.+]?/)
const iphone=userAgent.match(/(iPhone￥sOS)￥s([￥d_]+)/)
}
五.history对象
主要管理历史记录，如前进，后退，历史记录
常见的属性与方法
back() ：可以后退功能
forward（）：前进对象
go（参数）：前进后退功能，参数如果如果是1前进1个页面，如果是-1后退一个页面、
扫一扫
1522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
