发表于： 2023-03-01 20:47:47
0 117
今天学习的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js同步和异步</title>
</head>
<body>
<script>
//同步："同步模式"就是后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的
// 异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，"
// "而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
//他们的本质区别：这条流水线上各个执行顺序不同
// console.log(1);
// setInterval(function (){
// console.log(3)
// },2000)
// console.log(2);
//执行顺序 1 -- 2 隔2秒之后才执行3
//2、同步任务
// 执行机制
//1.先执行同步任务
//2.异步任务（回调函数）放到任务列队中
//3.一旦执行栈中的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，被读取的异步任务就会开始执行
// console.log(1);
// setInterval(function (){
// console.log(3)
// },0)
// console.log(2);
console.log(1);
document.onclick = function () {
console.log('click');
}
console.log(2);
setInterval(function () {
console.log(3);
},3000)
//由于主线程不断的重复获得任务、执行 任务、再获得任务、再执行。
// 所以这种机制被成为事件循环 (event loop 事件循环)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
</style>
</head>
<body>
<!-- <a href="http://www.baidu.com"></a>-->
<a href="#/my">我的</a>
<a href="#/friend">关注</a>
<a href="#/download">下载</a>
<button>刷新</button>
<script>
// window对象给我们提供了一个location属性用于获取或设置窗口的URL，并且可以用用于解析URL
//URL：统一资源定位符(Uniform Resource Locator,URL)是互联网上标准资源的地址
// console.log(window.location)
console.log(location)
//search属性 获取地址中携带的参数 符号？后面部分 location.search
//search属性 获取地址中哈希值 符号#后面部分 location.hash
//reload 方法用来刷新当前页面， 传入参数 true时 表示 强制刷新
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
//类似于 F5 刷新
// location.reload()
// 传入参数 true 表示强制刷新
//类似于 CTRL+F5
location.reload(true)
})
//location.href 获取或者设置 整个URL
//location.search 返回的是参数
//案例：五秒之后的跳转页面
//需求：用户点击可以跳转。如果不点击，则五秒之后自动跳转，要求里面有秒数倒计时
// const a = document.querySelector('a')
// let timer = 5
// setInterval(function () {
// const skip = {a : function () {
// if(timer === 0){
// location.href = 'http://www.baidu.com'
// }else {
// a.innerHTML = '你将在' + timer + '秒之后跳转到首页'
// timer--
// }
// }}
// skip.a()
// },1000)
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//检测userAgent（浏览器信息)
!(function () {
const userAgent = navigator.userAgent
//验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\soS)\s([\d_]+)/)
//如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://www.baidu.com'
}
})();
// (function () {})();
!(function () {})()
</script>
</head>
<body>
这是pc端页面
<button class="back">后退</button>
<button>前进</button>
<script>
//history是数据类型是对象，主要管理历史记录，该对象于浏览器地址栏的操作相对应，如前进、后退、历史记录等
// history对象方法
//back() 可以后退功能
//forward() 前进功能
//go() 前进后退功能 参数 如果是 1 前进 1个页面，如果是 -1 后退 1个页面
const back = document.querySelector('.back')
const forward = back.nextElementSibling
back.addEventListener('click', function () {
//后退一步
// history.back()
history.go(-1)
})
forward.addEventListener('click', function () {
//前进一步
//history.forward()
history.go(1)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// // 1、存储数据 localStorage.setItem('key', 'value')
// // localStorage.setItem('键', '值')
// localStorage.setItem('uname', '李白')
//
// // 2、获取方式 都加引号
// console.log(localStorage.getItem('uname'))
// // 3、删除本地存储
// // localStorage.removeItem('uname')
// //4、改 如果原来有这个键就是改，如果没有这个键就是增
// localStorage.setItem('uname', '杜甫')
//
// //存储一个年龄
// // 本地存储只能存储字符串数据类型
// localStorage.setItem('age', '18')
// console.log(localStorage.getItem('age'))
//存储复杂数据类型
//1、本地存储只能存储字符串 ，不能存储复杂数据类型
//存储复杂数据类型 无法直接使用
//解决：需要将复杂数据类型转换成JSON字符串，在存储到本地
//语法：JSON.stringify(复杂数据类型)
const obj = {
uname: '李白',
age: 18,
gender: '男'
}
// // 存储复杂数据类型 无法直接使用
// localStorage.setItem('obj', obj)
// //取
// console.log(localStorage.getItem('obj'))
//1、复杂数据类型存储必须转换为 JSON 字符串存储
localStorage.setItem('obj', JSON.stringify(obj))
// JSON 对象 属性和值有引号， 而是引号统一是双引号
// {"uname":"李白","age":18,"gender":"男"}
// console.log(localStorage.getItem('obj'))
// console.log(typeof localStorage.getItem('obj')) // string
//2、把JSON字符串转换为 对象
console.log(JSON.parse(localStorage.getItem('obj')))
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// // map 方法也是遍历数组 可以处理数据，并且返回新的数组
// arr.map(function (item,i) {}
const arr = ['red', 'blue', 'green']
const newArr = arr.map(function (item,i) {
console.log(item) // 数据元素
// console.log(i) // 下标/索引号
// return item + '老师'
})
// console.log(newArr)
//
// const arr1 = [10, 20, 30]
// const newArr1 = arr1.map(function (item, i) {
// return item + 10
// })
// console.log(newArr1)
// join() 方法用于把数组中所有元素转换一个字符串
// const arr = ['red', 'blue', 'green']
// //吧数组元素 转换为字符串
// console.log(arr.join('-'))
</script>
</body>
</html>
添加本地存储优化学生表案例案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="../css/17-学生信息表.css">
</head>
<body>
<h1>新增学员</h1>
<form class="info" autocomplete="off">
姓名：<input type="text" class="uname" name="uname" />
年龄：<input type="text" class="age" name="age" />
性别:
<select name="gender" class="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
薪资：<input type="text" class="salary" name="salary" />
就业城市：<select name="city" class="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="曹县">曹县</option>
</select>
<button class="add">录入</button>
</form>
<h1>就业榜</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>薪资</th>
<th>就业城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!--
<tr>
<td>1001</td>
<td>欧阳霸天</td>
<td>19</td>
<td>男</td>
<td>15000</td>
<td>上海</td>
<td>
<a href="javascript:">删除</a>
</td>
</tr>
-->
</tbody>
</table>
<script>
//参考数据
// const initData = [
// {
// stuId: 1001,
// uname: '欧阳',
// age: 19,
// gender: '男',
// salary: '20000',
// city: '成都',
// }
// ]
//1、读取本地存储的数据 student-data 本地存储的命名
const data = localStorage.getItem('student-data')
// console.log(data)
//2、如果有就返回对象，没有就生命一个空的数组 arr 一会渲染的时候用的
const arr = data ? JSON.parse(data) : []
// console.log(arr)
//获取tbody
const tbody = document.querySelector('tbody')
//3、渲染模块函数
function render() {
//遍历数组 arr. 有几个对象就生成几个tr ，然后追击给tbody
const trArr = arr.map(function (item,i) {
return `
<tr>
<td>${item.stuId}</td>
<td>${item.uname}</td>
<td>${item.age}</td>
<td>${item.gender}</td>
<td>${item.salary}</td>
<td>${item.city}</td>
<td>
<a href="javascript:" data-id="${i}">删除</a>
</td>
</tr>
`
})
console.log(trArr)
tbody.innerHTML = trArr.join('')
}
render()
//4、录入模块
const info = document.querySelector('.info')
//获取表单 form 里面带有 name属性的元素
const items = info.querySelectorAll('[name]')
console.log(items)
info.addEventListener('submit', function (e) {
// 阻止默认行为 不跳转
e.preventDefault()
//声明空的对象
const obj = {}
// obj.stuId = arr.length + 1
//假如有2条数据 2
obj.stuId = arr.length? arr[arr.length - 1].stuId + 1 : 1
//非空判断
for (let i = 0; i < items.length; i++) {
// console.log(items) //数组里面包含 5个表单
// console.log(items[i]) // 每一个表单 对象
// console.log(items[i].name) //得到每一个对应的属性名
//item 是每一个表单
const item = items[i]
if(items[i].value=== '') {
return alert('输入内容不能为空')
}
// console.log(item.name)
// obj[item.name] === obj.uname
obj[item.name] = item.value
}
// console.log(obj)
//追击给数组
arr.push(obj)
//把数组 arr 存到本地存储里面
localStorage.setItem('student-data', JSON.stringify(arr))
//渲染函数
render()
//重置表单
this.reset()
})
//5. 删除模块
tbody.addEventListener('click', function (e) {
if (e.target.tagName === 'A') {
// 得到当前元素的 自定义属性 data-id
// console.log(e.target.dataset.id)
//删除 arr 数组里面对应的数据
arr.splice(e.target.dataset.id, 1)
// console.log(arr)
//写到本地存储
localStorage.setItem('student-data', JSON.stringify(arr))
//重新渲染
render()
}
})
</script>
</body>
</html>
返回列表
评论