WebApis学习笔记 更新完毕 2022最新黑马程序员

发布于：2023-02-16 ⋅ 阅读:(1201) ⋅ 点赞:(1)

Web Apis第一天

Dom获取&属性操作

WebAPi基本认知

作用和分类

作用:使用JS去操作html和浏览器

分类:DOM(文档对象模型) BOM(浏览器对象模型)

什么是DOM

用来呈现以及与任意HTML或XML文档交互的API

DOM是浏览器提供的一套专门用来操作网页内容的功能

DOM作用:开发网页内容特效和实现用户交互

DOM树

将HTML文档以树状结构直观的表现出来,称为文档树或DOM 描述网页内容关系的名词

作用:文档树直观的体现了标签与标签之间的关系

DOM对象 重

浏览器根据html标签生成的Js对象

所有的标签属性都可以在这个对象上面找到

修改这个对象的属性会自动映射到标签身上

DOM的核心思想 ==> 把网页内容当作 对象 来处理

document对象 ==> 是DOM里提供的一个对象 所以它提供的属性 和方法都是 用来访问和操作网页内容的 如 document.write()

网页所有内容都在document 里面

获取DOM对象 重

根据CSS选择器来获取DOM元素(重点)

查找元素DOM元素就是利用Js选择页面中标签元素.

1.选择匹配的第一个元素
document.querySelector('css选择器')

query ==>查询 Selector选择

参数 包含一个或多个有效的CSS选择器 字符串

返回值 CSS选择器匹配的 第一个元素 一个HTML Element对象 没匹配到返回null

选择匹配的多个元素:

document.querySelectorAll('css选择器')

参数 包含一个或多个有效的CSS选择器 字符串

返回值 CSS选择器匹配的 NodeList对象集合

得到的是一个 伪数组: ==>又长度又索引号的数组 但是没有pop() push()等数组方法

想要得到里面的每一个对象, 需遍历(for)的方式获得

其他获取DOM元素方法(了解)

// 根据id获取一个元素
document.getElementById('nav')

// 根据 标签获取 一类元素 获取页面 所有div
document.getElementsByTagName('div')

// 根据 类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')

操作元素内容

对象 .innerText属性

元素 innerText属性 ==> 将文本内容添加/更新到任意标签位置 == 显示纯文本 不解析标签

对象innerHTML属性

将文本内容添加/更新到任意标签位置 == 会解析标签 多标签建议使用模板字符

操作元素属性

操作元素常用属性

​ 可以通过JS设置/修改 标签元素属性 比如通过 src更换 图片

最常见的属性比睿:href title src等

语法:

对象.属性 = 值

举例说明:

// 1 获取元素
const pic = document.querySelector('img')
// 2 操作元素
pic.src = './images/b01.jpg'
[ic.title = '刘德华黑马演唱会'

操作元素样式属性

通过JS设置 / 修改标签元素的样式属性

==> 通过 轮播图小圆点自动更换颜色样式

==> 点击按钮可以滚动图片 这是移动的图片位置left等等

通过style属性操作CSS
语法:
对象.style.样式属性 = 值
通过类名操作CSS

​ 如果修改的样式比较多,直接通过style属性修改比较繁琐 我们可以通过借助于css类名的形式

// 语法:
// active 是一个css类名
元素.className = 'active'

注: 由于class是关键字 所以使用className代替 == className是使用新值换旧值 如需添加一个类 要保留之前的类名

通过classList操作类控制CSS 常用

​ 为了解决className 容易覆盖以前的类名,我们可以通过calssList方式追加和删除类名

// 语法:
// 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

操作表单元素 属性

​ 表单很多情况 需要修改属性 比如点击眼睛可以看到密码 本质是把表单类型转为文本框

​ 正常的有属性有取值的 跟其他的标签属性没有任何区别

获取: DOM对象.属性名

设置: DOM对象.属性名 = 新值

表单.value = '用户名'
表单.type = 'password'

​ 表单属性中添加就有效果 移除就没效果 一律使用布尔值表示 如果为true 代表添加了该属性 如果是false代表移除了该属性

比如 disabled ==> 禁用吗?

checked ==> 勾选

selected ==> 下拉菜单

<script>
        // 接收布尔值
        //  1 获取
        const input = document.querySelector("input");
    //   console.log(input.checked);  // false   只接收布尔值
    input.checked = true; // 勾选
    //   input.checked = "true"; // 会选中 不提倡 有隐式转换

    //   1 获取
    const button = document.querySelector("button");
    //   默认false  不禁用    disabled ==> 禁用吗?
    //   console.log(button.disabled);
    button.disabled = true; // 禁用按钮
</script>

自定义属性

​ 标准属性: 标签天生自带的属性 比如 class id title 等 可以直接使用点语法操作 比如 disabled checked selected

​ 自定义属性:

在html5中推出来了专门的data-自定义属性

在标签上一律以data-开头

在DOM对象上一律以dataset对象方式获取

<body>
    <div class="box" data-id="10">盒子</div>
	<script>
        const box = document.querySelector('.box')
		console.log(bix.dataset.id)
	</script>
</body>

    <script>
        // 自定义属性
        const one = document.querySelector("div");
    //    怎么拿到自定义属性
    console.log(one.dataset.id); // 想获取里面的1 加一个.id
    console.log(one.dataset.sm); // 打印出什么
    </script>

定时器-间歇函数

​ 定时器函数可以开启和关闭定时器

1 开启定时器

setInterval(函数,间隔时间)

​ 作用:每间隔多少时间 调用这个函数 ==> 间隔时间单位是毫秒 ms

​ 定时器返回的是一个id数字

2 关闭定时器

let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名)

=================================================================================================

Web Apis第二天

DOM事件基础

事件监听(绑定)

事件监听

拓展阅读-事件监听版本

能够给DOM元素添加事件监听

​ > 事件是在编程时 系统内发生的动作 或者发生的事情 比如用户在网页上单机一个按钮

​ > 事件监听:就是让程序检测是否有事件产生,一旦有事件触发,就立即条用一个函数做出响应,也称为 绑定事件或者注册事件 > 比如鼠标经过显示 下拉菜单 比如点击可以播放轮播图等

// 语法:
元素对象.addEventListener('事件类型',要执行的函数)
  • 事件监听三要素
    • **事件源:**那个dom元素被事件触发了,要获取dom元素
    • **事件类型:**用什么方式触发 比如鼠标单击 click 鼠标经过 mouseover等
    • **事件调用的函数:**要做什么事

函数不会立即执行! 等时机成熟 才能实现

<button class="btn">按钮</button>
<script>
// 举例说明
const btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
alert("点击了~");
});
</script>

注: > 事件类型要加引号; > 函数是点击之后再去执行,每次点击都会执行一次

拓展 :事件监听版本

  • DOM L0 ==> 事件源.on事件 = function(){}
  • DOM L2 ==> 事件源.addEventListener(事件,事件处理函数)

区别: on方式会被覆盖,addEventListener方式可绑定多次,拥有事件更多特性,推荐使用

事件类型

  • 鼠标事件

    • 鼠标触发

      • click 鼠标点击

        mouseenter 鼠标经过

        mouseleave 鼠标离开

  • 焦点事件

    • 表单获取光标

      • focus 获得焦点

        blur 失去焦点

  • 键盘事件

    • 键盘触发

      • Keydown 键盘按下触发

        Keyup 键盘弹起触发

  • 文本事件

    • 表单输入触发

      • input 用户输入事件

// 2 用户输入文本事件 input
input.addEventListener('input', function () {
    // 得到用户输入的内容
    console.log(input.value);
})

事件对象

获取事件对象

事件对象也是一个对象 这个对象里有事件触发时的相关信息

如:鼠标点击事件中 事件对象就 存了鼠标点在哪个位置等信息

使用场景 可以判断出用户按下哪个键 比如 按下回车可发布新闻

可以判断鼠标点了哪个元素 从而做出相应的操作

语法:如何获取
> 在事件绑定的回调函数的第一个参数就是事件对象
> 一般命名为event ev e
元素.addEventListener('click',function(e){})  // e为事件对象

事件对象常用属性

  • 部分常见属性
    • type > 获取当前的事件类型
  • clientX / clientY
    • 获取光标相对于浏览器可见窗口左上角的位置
  • offsetX/offsetY
    • 获取光标相对于当前DOM元素左上角的位置
  • key
    • 用户按下的键盘键的值
    • 现在不提倡使用keyCode

拓展 -trim方法 去除左右空格

const str = '去除左右空格'
// 方法 trim()  去除左右空格
console.log(str.trim());

环境对象 重

**环境对象:**函数内部特殊的 变量this 它代表着当前函数运行时所处的环境

作用: 弄清楚this的指向,可以让我们代码更简洁

this ==> 谁调用函数 指向谁

函数的调用方式不同,this指代的对象也不同

[谁调用,this就是谁] 是判断this指向的粗略规则

直接调用函数 其实相当于是 window.函数,所以this指代window

回调函数

如果将 函数A 做为参数传递给 函数B时 我们称函数A为 回调函数

简解法:当一个函数当做参数来传递给另外一个函数的时候,这个函数就是 回调函数

常见的使用场景:
function fn(){
    console.log('我是回调函数...')
}
// fn传递给了setInterval,fn就是回调函数
setInterval(fn,1000)

=================================================================================================

Web Apis第三天

事件流

事件流与两个阶段说明

  • 事件流 事件完整执行过程中的流动路径 简称 事件流动
    • 说明: 假设页面里有个div 当触发事件时 会经历两个阶段 分别是 捕获阶段 冒泡阶段
    • 简单说:捕获阶段是 父到子 冒泡阶段是 子到父
    • 实际工作都是使用事件 冒泡为主

事件捕获

  • 事件捕获概念: 从DOM的根元素开始执行对应的事件 从外到里

  • 事件捕获需要写对应代码才能看到效果

  • 代码:
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
说明:
addEventListener 第三个参数传入 true 代表是捕获阶段触发(很少使用)
若传入false代表冒泡阶段触发 默认为false

事件冒泡

  • 事件冒泡概念: 当一个元素的事件被触发时 同样的事件将会在该元素的所有祖先元素中依次被触发.这一过程被称为事件冒泡

  • **简单理解:**当一个元素触发事件后,会依次向上调用所有父级的 同名事件

  • 事件冒泡是默认存在的

  • L2事件监听第三个参数是false 或者默认都是冒泡

阻止冒泡

  • 问题:默认有冒泡模式的存在 所以容易导致事件影响到父级元素

  • 需求:若想把事件就限制在当前元素内,就需要阻止事件冒泡

  • 前提: 阻止事件冒泡需要拿到事件对象

  • // 语法:
事件对象.stopPropagation()

  • 注: 此方法可以阻止阻断事件流动传播 不光在冒泡阶段有效 捕获阶段也有效

阻止默认行为

  • 某些情况下需要 阻止默认行为的发生 比如 阻止 链接的跳转 表单域跳转

    语法:
e.preventDefault()

    <form action="http://www.baidu.com">
        <input type="submit" value="免费注册">
    </form>
    <script>
        const form = document.querySelector('form')
        form.addEventListener('submit', function (e) {
            // 阻止默认行为
            e.preventDefault()
        })
    </script>

解绑事件

  • on事件方法 直接使用null 覆盖偶就可以实现事件的解绑
// 语法:
// 绑定事件
btn.onclick = function () {
    alert('点击了')
}
//解绑事件
btn.onclick = null

  • addEventListener方式,必须使用:

  • removeEventLisrtener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])

  • 语法:

  • function fn () {
    alert('点击了')
}
// 绑定事件'
btn.addEventListener('click',fn)
// 解绑事件
btn.removeEventListener('click',fn)
// 注:匿名函数无法被解绑

鼠标经过事件的区别

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave 没有冒泡效果(推荐使用)

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点: 减少注册次数,可以提高程序性能

原理:事件委托其实是利用事件冒泡的特点.

​ 给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件

实现:事件对象.target.tagName 可以获得真正触发事件的元素

其他事件

1.页面加载事件

  • 加载外部资源(如图片 外联css和Js等)加载完毕时触发的事件

  • 为什么要学?

  • 有些时候需要等页面资源全部处理完之后做一些事情

    老代码喜欢把script写在head中,这时候直接dom元素找不到

  • 事件名:load

  • 监听页面所有资源加载完毕:

  • 给window添加load事件

    //页面加载事件
window.addEventListener('load',function(){
    // 执行的操作
})
// 注: 不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件

  • 当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表,图像等完全记载

  • 时间名:DOMContentLoaded

  • 监听页面DOM加载完毕

  • document添加DOMContentLoaded事件

    // 语法:
document.addEventListener('DOMContentLoaded', function () {
    //执行的操作
})

2.元素滚动事件

  • 滚动条 在滚动的时候持续触发的事件

  • 为什么要学?

  • 很多网页需要检测用户把页面滚动到某个区域后做一些处理,比如固定导航栏,比如返回顶部

  • 事件名:scroll

  • 监听整个页面滚动

  • // 页面滚动事件
window.addEventListener('scroll', function () {
    // 执行的操作
})

  • 监听某个元素的内部滚动直接给某个元素加即可

    获取位置

    • scrollLeft和ScrollTop(属性)

      • 获取被卷去的大小
      • 获取元素内容往左 往上滚出去看不到的举例
      • 这两个值是可 读写的

    • 开发中 经常检测页面滚动的距离,比如页面滚动100像素,就可以显示一个元素,或者固定一个元素

    • //页面滚动事件
window.addEventListener('scroll',function(){
    const n = document.documentElement.scrollTop
    console.log(n)
})

    • 注:document.documentElement HTML文档返回对象为HTML元素

    • document.documentElement是可读的 数字型 不带单位 可以赋值

    滚动到指定的坐标

    • scrollTo()方法可把内容滚动到指定的坐标
语法:
	元素.scrollTo(x,y)
// 让页面滚动到y轴1000像素的位置  --了解
window.scrollTo(0,1000)

3.页面尺寸事件

  • 会在窗口尺寸改变的时候触发事件:

    • resize

      window.addEventListener('resize',function(){
    //执行的代码
})

    • 检测屏幕宽度:

      window.addEventListener('resize',function (){
    let w = document.documentElement.clientWidth
    console.log(w)
})

获取元素宽高

  • 获取宽高:

    • 获取元素的可见部分宽高(不包含边框,margin,滚动条等)

      clientWidth和clientHeight

元素尺寸与位置

通过Js的方式,得到 元素在页面中的位置

可以做到 页面滚动到这个位置 就可以做某些操作 省去计算

尺寸

  • 获取宽高:

    • 获取元素的自身宽高 包含元素自身设置的宽高 padding border

      offsetWidth和offsetHight

      获取出来的是数值 方便计算

      注:获取的可视宽高 如果盒子是隐藏的 获取的结果为0

  • 获取位置:

    • 获取元素距离自己定位父级元素的左 上距离

      offsetLeft和offsetTop 注意是只读属性

offsetWidth和offsetHeight是得到元素的内容+padding+border的宽高

offsetLeft和offsetTop得到位置以带有定位的父级为准

Web Apis第四天

日期对象

实例化

  1. 日期对象

  • 日期对象:用来表示时间的对象

  • 作用:得到当前系统时间

  • 在代码中发现new关键字时,一般将这个操作称为实例化

  • 创建一个时间对象且获取时间

    • 获取当前的时间

      const date = new Date()

      获得指定的时间

      const date = new Date('2008-8-8')

日期对象方法

方法 作用 说明
getFullYear() 获得年份 获取四位数年份
getMonth() 获得月份 取值为0-11
getDate() 获取月份中的每一天 不同月份取值不同
getDay() 获取星期 取值为0-6
getHours() 获取小时 取值为0-23
getMinutes() 获取分钟 取值为0-59
getSeconds() 获取秒 取值为0-59

时间戳

  • 使用场景:计算倒计时效果 前面方法无法直接计算 需要借助 时间戳完成

  • 时间戳是什么?

    • 是指1970年01月01日00时00分00秒起至现在的毫秒数 它是一种特殊的计量时间的方式

  • 算法:

    • 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数

      剩余的时间毫秒数 转换为 剩余时间的 年月日时分秒 就是倒计时时间

      比如 将来时间戳 2000ms - 现在的时间戳 1000ms = 1000ms

      1000ms转换为就是0小时0分1秒

3种方式获取时间戳:

// 1. 使用getTime()方法
const date = new Date() // 必须实例化 
console.log(date.getTime())
// 2. 简写 +new Date() 推荐 无需实例化
console.log(+new Date())
// 3. 使用 Date.now()  只能得到当前的时间戳 前面两种可以返回指定时间的时间戳
console.log(Date.now())

小结:

1.实例化日期对象怎么写?

​ new Date()

2.日期对象方法里面月份和星期有什么需要注意的?

​ 月份0-11 需要加1 星期是0-6 星期天是0

3.获取时间戳有哪三种方式 重点记哪一个?

​ date.getTime() +new Date() Date.now()

​ 重点记:+new Date() 因为可以返回当前时间戳 或者 指定的时间戳

节点操作

DOM节点

  • DOM节点

    • DOM树里每一个内容都称之为节点

  • 节点类型

    • 元素节点

      • ​ 所有的标签 比如body div
      • html是根节点

    • 属性节点

      • 所有的属性 比如 href

    • 文本节点

      • 所有的文本

    • 其他

什么是DOM节点?

  • ​ DOM树里每一个内容称之为节点

DOM节点的分类?

  • ​ 元素节点 div标签
  • 属性节点 class标签
  • 文本节点 标签里面的文字

我们重点记住哪个节点?

  • 元素节点
  • 可以更好的让我们理清标签元素之间的关系

查找节点

节点关系:针对的找亲戚返回的都是对象

  • 父节点

    • 父节点查找:

      • parentNode属性

      • 返回最近一级的父节点 找不到返回为null

      • 子元素.parentNode

  • 子节点

    • ​ 子节点查找:

      • childNodes

        • 获得所有子节点 包括文本节点(空格 换行) 注释节点等

      • children属性(重点)

        • 仅获得所有元素节点

        • 返回的还是一个伪数组

        • 父元素.children

  • 兄弟节点

    • ​ 下一个兄弟节点
      • nextElementSibling属性
    • 上一个兄弟节点
      • previousElementSibling属性

总结

查找父节点用的哪个属性? == parentNode

查找所有子节点用的哪个属性? == children

查找兄弟节点用那个属性? nextElementSibling == previousElementSibling

增加节点

  • 很多情况下,需要在页面中增加元素

    • 比如 点击发布按钮 可以新增一条信息

  • 一般情况下 新增节点 按如下操作:

    • 创建一个新的节点 ==> 创建的新的节点放入到指定的元素内部

1 创建节点.

  • 即创造出一个新的网页元素 再添加到网页内 一般先创建节点 然后插入接待你

  • 创建元素节点方法:

  • // 创建一个新的元素节点
document.createElement('标签名')

2 追加节点

  • 想在界面中看到 还要插入到某个父元素中

  • 插入到父元素 的 最后一个子元素:

  • //插入到父元素的最后
父元素.appendChild(要插入的元素)

  • 插入到父元素 的某个子元素的 前面:

  • // 插入到某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)

  • 特殊情况下 我们新增节点 按照如下操作:

  • 复制一个原有的节点

    把复制的节点放入到指定的元素内部

克隆节点

// 克隆一个已有的元素节点
元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素,括号内 传入布尔值

若为true 则代表克隆时 会包含后代节点一起克隆

若为false 则代表克隆时不包含后代节点

默认为false

删除节点

  • 若一个节点在页面中 不需要 可删除它 在JS原生DOM操作中 要删除元素必须通过 父元素删除

  • 语法:

  • 父元素.removeChild(要删除的元素)

  • 注:

    • 如不存在父子关系则删除不成功
    • 删除节点和隐藏节点 display:none 有区别: 隐藏节点还是存在的 但是删除 是从html中删除

M端事件

移动端有自己独特的地方 如 触屏事件touch(也称触摸事件) Android 和 IOS都有

  • 触屏事件touch(也称触摸事件)Android 和IOS都有

  • touch 对象 代表一个触摸点 触摸点可能是一根手指 也可能是一根触摸笔 触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作.

  • 常见的触屏事件如下:

  • 触屏touch 说明
    touchstart 手指触摸到一个DOM元素时触发
    touchmove 手指在一个DOM元素上滑动时触发
    touchend 手指从一个DOM元素上移开时触发

Js插件

  • 插件:别人写好的一些代码 只需要复制粘贴 就可以实现对应的效果
  • 学习插件的基本过程

重绘和回流

1 浏览器是如何进行界面渲染的

  • 解析(Parser)HTML 生成DOM树 (DOM Tree)
  • 同时解析 CSS 生成样式规则
  • 根据DOM树和样式规则 生成 渲染树
  • 进行布局Layout(回流/重排):根据生成的渲染树 得到节点的几何信息
  • 进行绘制 Painting(重绘):根据计算和获取的信息进行整个页面的绘制
  • Display:展示在页面上

重绘不一定引起回流 而回流一定会引起重绘

Web APIs 第五天

Window对象

BOM(浏览器对象模型)

  • 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语言的一大特点就是 单线程 也就是说 同一个时间只能做一件事

这是因为Js这门脚本语言诞生的使命所致 Js是处理页面中用户的交互 以及操作DOM而诞生的 比如我们对某个DOM元素进行添加和删除操作 不能同时进行 应该先进行添加 之后再删除

单线程就意味着 所有任务需要排队 前一个任务结束 才会执行后一个任务 这样所导致的问题就是:如果JS执行的时间过长 这样就会造成页面的渲染不连贯 导致页面渲染加载阻塞的感觉

  • 为了解决这个问题 利用多核CPU的计算能力 H5提出Web Workeri标准 允许JS脚本创建多个线程 于是JS中出现了同步和异步

同步

前一个任务结束后再执行后一个任务 程序的执行顺序与任务的排列顺序是一致的 同步的

同步任务

都是在主线程上执行 形成一个 执行栈

异步

你在做一件事情的同时 因为这事情会花费很长时间 在做这件事的同时 还可以去处理其他事情

本质区别:这条流水线上各个流程的执行顺序不同.

异步任务

Js的异步 是通过 回调函数实现的

一般而言 异步任务 有以下三种类型:

1 普通时间 如 click resize等

2 资源加载 load error等

3 定时器 包括setInterval setTimeout等

异步任务相关添加到 任务队列 中(任务队列也称为消息队列)

开始–> 执行栈(JS主线程) --> 当有异步任务时 提交给对应的异步进程处理 --> webAPI(异步API) 1 ajax(网络模块) 2 DOM事件 DOM模块 3 setTimeout + setInterval timer模块 --> 异步执行完毕 推入任务队列中 --> 任务队列(异步队列) 任务队列1 onload onclick等 任务队列2 setTimeout等 任务队列3 网络请求ajax

开始–> 执行栈(JS主线程) -->1 主线程执行完毕 查询任务队列 取出一个任务 推入主线程处理;2 重复该动作(此过程称为事件循环) --> 任务队列(异步队列) 任务队列1 onload onclick等 任务队列2 setTimeout等 任务队列3 网络请求ajax

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-at8oPsxA-1659238383908)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220729183750519.png)]

由于主线程不断的重复获得任务 执行任务 在获取任务 在执行 所以这种机制被称为 事件循环(event loop)

location对象

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

  • 常用属性和方法:

  • // search属性获取地址中携带的参数 型号 ? 后面部分
console.log(location.search)
//hash 属性获取地址中的哈希值 符号#后面部分
console.log(location.hash)
//后期vue路由的铺垫 经常用于不刷新页面 显示不同页面 比如 网易云音乐
// 方法
// reload 方法 用来刷新当前页面 传入参数 true时 表示强制刷新
<button>提交</button>
let btn = document.querySelector('button')
btn.addEventListener('click', function () {
location.reload(true)
  1. location.href属性获取完整的URL地址 对其赋值时用于地址的跳转
  2. search 属性获取地址中携带的参数 符号 ? 后面部分
  3. hash 属性 获取地址中的哈希值 符号#后面部分
  4. reload方法 用来刷新当前页面 如果给true代表 强制刷新

navigator对象

  • navigator 的数据类型是对象 该对象下记录了浏览器自身的相关信息
  • 常用属性和方法:
  • 通过userAgent检测浏览器的版本及平台
<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://m.baidu.com";
    }
})();
</script>

histroy对象

  • history 的数据类型是对象 主要管理历史记录 该对象与浏览器地址栏的操作相对应 如前进 后退 历史记录等

  • 常用属性和方法:

  • history对象方法 作用
    back() 可以后退功能
    forward() 前进功能
    go(参数) 前进后退功能 参数如果是1 前进1个页面 如果是-1 后退1个页面

本地存储

本地存储介绍

  • 1 数据存储在用户浏览器中
  • 2 设置 读取方便 甚至页面刷新不丢失数据
  • 3 容量较大 sessionStorage和localStorage约5M左右
  • 常见的使用场景:
  • https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失

本地存储分类

  • localStorage

  • **作用:**可以将数据永久存储在本地(用户的电脑)除非手动删除 否则关闭页面也会存在

  • **特性:**可以多窗口(页面)共享(同一浏览器可以共享) 以键值对的形式存储使用

  • 语法: 本地存储 会转换为字符串

  • // 存储数据: 改数据:
localStorage.setltem(key,value)
// 获取数据:
localStorage.getltem(key)
// 删除数据:
localStorage.removeItem(key)

  • sessionStorage

  • 特性

  • 生命周期为关闭浏览器窗口

  • 在同一个窗口(页面)下数据可以共享

  • 以键值对的形式存储使用

  • 用法跟localStorage基本相同

存储复杂数据类型

  • 本地只能存储字符串 无法直接存储复杂数据类型
  • **解决:**需要将复杂数据类型转换成JSON字符串 在存储到本地
  • 语法:json.stringify(复杂数据类型)
const goods = {
    name:'xx',
    price:1999
}
localStorage.setItem('goods',JSON.stringify(goods))
// 将复杂数据类型转换成JSON字符串 存储 在本地存储中
// 得到
//解决: 把取出来的字符串转换为对象
//语法:JSON.parse(JSON字符串)
const obj = JSON.parse(localStorage.getItem('goods'))
console.log(obj)

数组中map方法 迭代数组

  • **作用:**map迭代数组

  • 语法:

  • const arr = ['pink','pink2','pink3','pink4']
arr.map(function(item,index){
    console.log(item) // item 得到 数组元素 'pink','pink2','pink3','pink4'
    console.log(index) // index 得到 索引号 0 1 2
})

  • 使用场景:

  • map可以处理数据 并且返回新的数组

  • const arr = ['pink','pink2','pink3','pink4']
arr.map(function(item,index){
    console.log(item) // item 得到 数组元素 'pink','pink2','pink3','pink4'
    console.log(index) // index 得到 索引号 0 1 2
    return item + '老师'
})
console.log(newArr) // ['pink老师','pink2老师','pink3老师','pink4老师']

  • map也称为映射.映射是个术语,指两个元素的集之间元素相互"对应"的关系

数组中join方法

  • **作用:**join()方法用于吧数组中的所有元素转换一个字符串

  • 语法:

  • const arr = ['pink','pink2','pink3','pink4']
console.log(arr.join('')) // pinkpink2pink3pink4

  • **参数:**数组元素是通过参数里面指定的分隔符进行分隔的

持续更新中ing

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布