c 网站开发平台十大搜索引擎入口
目录
1. Window对象
1.1 BOM
1.2 定时器-延时函数
1.3 JS执行机制
1.4 location对象
1.6 history对象
2. 本地存储（重点）
2.1 介绍
2.2 分类
localStorage
sessionStorage
存储复杂数据类型
3. 综合案例—学生就业统计表
3.1 渲染业务
map()
join()
3.2 新增业务
3.3 新增业务
1. Window对象
1.1 BOM
console.log(document === window.document); //truefunction fn() {console.log(11);}window.fn()var num = 10 //const let挂在自己的作用域内console.log(window.num);1.2 定时器-延时函数
const img = document.querySelector('img')setTimeout(function () {img.style.display = 'none'}, 3000)1.3 JS执行机制
1.4 location对象
//5秒后跳转<a href="http://www.itcast.cn"><span>5</span>秒后跳转</a><script>const a = document.querySelector('a')let num = 5let timerId = setInterval(function () {num--a.innerHTML = `<span>${num}</span>秒后跳转`if (num === 0) {clearInterval(timerId)// 跳转location.href = 'http://www.itcast.cn'}}, 1000)</script>
1.5 navigator对象（复制）
立即执行函数
1.6 history对象
2. 本地存储（重点）
2.1 介绍
2.2 分类
localStorage
键一定记得加引号，不加当变量名看
本地存储只能存字符串类型
// localStorage.setItem('键', '值') 键一定记得加引号 不加当变量名看localStorage.setItem('uname', 'hahah') //存储方式console.log(localStorage.getItem('uname')); //获取方式localStorage.removeItem('uname') //删除localStorage.setItem('uname', 'llll') //有键是修改//本地存储只能存字符串类型localStorage.setItem('age', 18)console.log(localStorage.getItem('age')); //18以字符串形式存储sessionStorage
存储复杂数据类型
const obj = {uname: '小明',age: 19,gender: '男'}// 1.复杂数据类型存储必须转换成JSON字符串存储localStorage.setItem('obj', JSON.stringify(obj))//JSON对象 {"uname":"小明","age":19,"gender":"男"} // 2.把JSON字符串转换成对象console.log(JSON.parse(localStorage.getItem('obj')));3. 综合案例—学生就业统计表
3.1 渲染业务
map()
join()
3.2 新增业务
3.3 新增业务
<script>// 参考数据const initData = [// {// stuId: 1,// uname: '迪丽热巴',// age: 22,// salary: '12000',// gender: '女',// city: '北京',// time: '2099/9/9 08:08:08'// }]// 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(function (ele, index) {return `<tr><td>${ele.stuId}</td><td>${ele.uname}</td><td>${ele.age}</td><td>${ele.gender}</td><td>${ele.salary}</td><td>${ele.city}</td><td>${ele.time}</td><td><a href="javascript:" data-id="${index}"><i class="iconfont icon-shanchu"></i>删除</a></td></tr>`})console.log(trArr)// join把数组转换为字符串 追加给tbody 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 salary = document.querySelector('.salary')const gender = document.querySelector('.gender')const city = document.querySelector('.city')info.addEventListener('submit', function (e) {e.preventDefault() // 阻止默认提交行为// 非空判断if (!uname.value || !age.value || !salary.value) {return alert('输入内容不能为空')}// 获取表单元素的值，并追加进数组中arr.push({stuId: arr.length ? +arr[arr.length - 1].stuId + 1 : 1, //确保id不重复 要考虑数组长度为0的情况uname: uname.value,age: age.value,salary: salary.value,gender: gender.value,city: city.value,time: new Date().toLocaleString()})render()this.reset() //重置表单// 把数组转为JSON字符串存入本地存储中localStorage.setItem('data', JSON.stringify(arr))})// 3.删除业务// 采用事件委托的形式，给tbody注册点击事件tbody.addEventListener('click', function (e) {if (e.target.tagName === 'A') {if (confirm('确认删除')) { //点击确定返回true，否则falsearr.splice(e.target.dataset.id, 1) //通过自定义属性知道要删除数组的第几条元素render()localStorage.setItem('data', JSON.stringify(arr)) //数组更改，本地存储也改，要保证本地存储存最新数据}}})</script>