前端学习小白打卡14

最新推荐文章于 2024-09-14 17:14:08 发布

白潏

最新推荐文章于 2024-09-14 17:14:08 发布

阅读量49

点赞数

分类专栏：前端文章标签：前端学习 javascript css3 html5

本文链接：https://blog.csdn.net/qq_65719034/article/details/132788949

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

window对象
BOM包含DOM，BOM是浏览器对象
window对象是一个全局对象，也可以说是js的顶级对象
如document，alert（），console.log()这都是window的属性，基本BOM属性和方法都是window的
所有通过var定义在全局作用域中的变量，函数都会变成window对象的属性和方法
window对象下的属性和方法调用的时候可以省略window

定时器-延时函数
js内置了一个让代码延迟执行的函数，叫setTimeout
语法：
setTimeout（回调函数，等待的毫秒数）
setTimeout仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，一般省略window
清除延时函数：
let timer = setTimeout（回调函数，等待的毫秒数）
clearTimeout（timer）
注意：
延时器需要等待，所以后面的代码先执行
每一次调用延时器都会产生一个新的延时器
对比：
延时函数：执行一次
间歇函数：每隔一段时间就执行一次，除非手动清除

js是单线程，同一时间只能做一件事

为了解决js单线程的问题，html5提出了web Worker标准
允许js脚本创建多个线程，js就出现了同步和异步
同步：
前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的，同步的，比如做饭的同步做法：先烧水,等水开（10分钟），再去切菜，炒菜

异步：
因为一件事情会花费很长时间，在做这件事的同时可以去处理其他事情，比如：
在烧水的同时，利用这10分钟去切菜，炒菜

区别：这条流水线上各个流程的执行顺序不同

理解：
同步任务：（主车道）
同步任务都在主线程上执行，形成一个执行栈

异步任务：（应急车道）浏览器处理
js的异步任务是通过回调函数实现的
一般而言，异步任务有：
1.普通事件,click,resize
2.资源加载,load,error
3.定时器,setlnterval,setTimeout
异步任务相关添加到任务队列中

js执行机制：（事件循环）
1.先执行执行栈中的同步任务
2.异步任务放入任务队列中
3.一旦执行栈中所有的同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
由于主线程不断的重复获得任务，执行任务，再获取任务，再执行，所以这种机制被称为事件循环（event loop）

location的数据类型是对象，它拆分并保存了URL地址的各个组成部分

console.log(location.href)//可以得到当前文件URL地址
location.href=''//用js的方式来调转页面

location.search
search属性属性获取地址中的参数，符号？后面的部分（通常在网页地址栏）

location.hash
hash属性获取地址中的哈希值，符号#后面部分

location.reload()
reload方法用来刷新当前页面，传入参数true时表示强制刷新
不传相当于f5
传入true ctrl+f5

navigator对象
navigator的数据类型是对象，该对象记录了浏览器自身的相关信息
常用属性和方法
通过userAgent检测浏览器的各个版本及平台

history对象
history主要管理历史记录，该对象与浏览器地址栏的操作相对应，如前进，后退，历史记录等
back（）作用：可以后退功能
forward（）前进功能
go（参数）前进后退功能参数如果是1前进1个页面，如果是-1后退1个页面

本地存储
1.数据存储在用户浏览器中
2.设置，读取方便，甚至页面刷新也不会丢失数据
3.容量较大 sessionStorage和localStorage 约5M左右

localStorage 本地存储只能存储字符串
作用：可以把数据永久性的存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在
特性：
可以多窗口（页面）共享（同一浏览器可以共享）
以键值对的形式存储使用
语法：
存储数据： localStorage.setItem(key,value)
获取数据： localStorage.getItem(key)//都加引号
删除数据： localStorage.removeItem(key)//只删除名字 key
修改数据： localStorage.setItem(key,value)

sessionStorage
特性：
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据可以共享
以键值对的形式存储使用
用法和localStorage基本相同

存储复杂数据类型
const obj={
uname:'pink',
age:18,
gender: '男'
}

//复杂数据类型存储必须转换成JSON字符串存储
localStorage.setItem('obj',JSON.stringify(obj))
// JSON对象属性和值有引号，而且是双引号
// 把JSON字符串转换为对象
const str=localStorage.getItem('obj')
const l=JSON.parse(str)
将复杂数据类型转换成JSON字符串，在存储在本地
JSON.parse(JSON字符串)//把取出来的字符串转换成对象

逻辑判断
const arr=JSON.parse（localStorage.getItem('obj')）||[]
如果没有数据就用空数组来代替

根据持久化数据渲染页面
根据数据渲染页面。遍历数组，根据数据生成tr，里面填充数据，最后追加给tbody

字符串拼接：（效果更高，开发常用）
利用map（）和join（）数组方法实现字符串拼接

map（）：
map 可以遍历数组处理数据，并且返回新的数组
const arr=['red','blue','green']
const newArr=arr.map(function(ele,index){
console.log(ele)//数组元素
console.log(index)//数组元素索引号
return ele+'颜色'
})
console.log(newArr)//['red颜色','blue颜色','green颜色']

map也称为映射，映射是个术语，指2个元素的集之间元素相互"对应"的关系
map重点在于返回值，forEach没有返回值

join（）
join（）方法用于把数组中的所有元素转换一个字符串
语法
console.log(arr.join(''))//red颜色blue颜色green颜色

参数：
数组元素是通过参数里面指定的分隔符进行分割的，空字符串（''），则所有元素之间没有任何字符，（）为空则默认逗号分隔

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/my.css">
    <title>Document</title>
</head>
<body>  

    <!-- <div></div> -->
    <!-- <a href="http://www.baidu.com">支付成功<span>5</span>秒钟后跳转</a> -->
    <!-- <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>22</td>
            <td>男</td>
            <td>19999</td>
            <td>上海</td>
            <td>2099</td>
            <td>
                <a href="#">
                    <i class="iconfont icon-shanchu"></i>删除
                </a>
            </td>
        </tr>
    </tbody> -->

    <script src="./js/my.js">
    </script>
    
</body>
</html>

css

div{
    width: 200px;
    height: 200px;
    background-color: black;
}

const div  =document.querySelector('div')
setTimeout(function(){
    div.style.display='none'
},4000)


console.log(1)
console.log(2)
setTimeout(function(){
    console.log(3)
},0)
console.log(4)

// 1 2 4 3 

const a=document.querySelector('a')
let num=5
let timerId=setInterval(function(){
    num--
    a.innerHTML=`支付成功<span>${num}</span>秒钟后跳转`
    if(num===0){
        clearInterval(timerId)
        location.href='http://www.baidu.com'
    }
},1000)

// const obj={
//     uname:'pink',
//     age:18,
//     gender: '男'
// }

// //复杂数据类型存储必须转换成JSON字符串存储
// localStorage.setItem('obj',JSON.stringify(obj))
// // JSON对象属性和值有引号，而且是双引号
// // 把JSON字符串转换为对象
// const str=localStorage.getItem('obj')
// const l=JSON.parse(str)

// const arr=['red','blue','green']
// const newArr=arr.map(function(ele,index){
//     console.log(ele)//数组元素
//     console.log(index)//数组元素索引号
//     return ele+'颜色'
// })
// console.log(newArr)//['red颜色','blue颜色','green颜色']

// console.log(arr.join(''))//red颜色blue颜色green颜色

const initDate=[
    {
        stuId:1,
        uname:'李',
        age:22,
        gender:'男',
        salary:'21333',
        city:'上海',
        time:'2012'
    }
]
// localStorage.setItem('data',JSON.stringify(initDate))
//这一行没必要一直存在，第一次存储的时候已经存储在本地了，仅仅为了测试

const arr=JSON.parse(localStorage.getItem('data'))||[]
//渲染函数，利用map和join方法来渲染
function render(){
   const trarr= arr.map(function(ele,index){
        return `
        <tbody>
        <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="#" data-id='${index}'>
                    <i class="iconfont icon-shanchu"></i>删除
                </a>
            </td>
        </tr>
    </tbody>`
    })
    tbody.innerHTML=trarr.join('')

}
render()