devbox
运维做开发
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Web API学习_web api 入门

作者：运维做开发 | 2024-08-06 04:24:30

赞

踩

web api 入门

Lodash中文文档
swiper官网

黑马学习视频链接

目录

Web API基本认知

作用和分类

作用：就是使用 JS 去操作 html 和浏览器

分类：DOM （文档对象模型）、BOM（浏览器对象模型）

什么是DOM

DOM（Document Object Model–文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

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

DOM作用：

  • 开发网页内容特效和实现用户交互

DOM树

DOM树是什么

  • 将HTML文档以树状结构直观的表现出来,我们称之为文档树或DOM
  • 树描述网页内容关系的名词
  • 作用：文档树直观的体现了标签与标签之间的关系

DOM对象

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

  • 所有的标签属性都可以在这个对象上面找到
  • 修改这个对象的属性会自动映射到标签身上

DOM的核心思想

  • 把网页内容当做对象来处理

document 对象

  • 是 DOM 里提供的一个对象
  • 所以它提供的属性和方法都是用来访问和操作网页内容的
    • 例：document.write()
  • 网页所有内容都在document里面
<div>123</div>
<script>
    const div = document.querySelector('div')
    console.dir(div)   // dom 对象
</script>

  • 1
  • 2
  • 3
  • 4
  • 5

获取DOM元素

首先选中这个标签，跟 CSS选择器类似，选中标签才能操作查

找元素DOM元素就是利用 JS 选择页面中标签元素

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

  1. 选择匹配的第一个元素

    语法：document.querySelector('css选择器')

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

    返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。

  2. 选择匹配的多个元素

    语法：document.querySelectorAll('css选择器')

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

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

    document.querySelectorAll('ul li')

    • 1

    document.querySelectorAll('css选择器')
    得到的是一个伪数组：

    • 有长度有索引号的数组但是没有 pop() push() 等数组方法
    • 想要得到里面的每一个对象,则需要遍历(for)的方式获得。

    注意事项哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已

其他获取DOM元素方法（了解）

// 根据id获取一个元素
document.getElementById('nav')
// 根据 标签获取一类元素 获取页面 所有d
ivdocument.getElementsByTagName ( 'div')
// 根据 类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

操作元素内容

元素innerText 属性

  • 将文本内容添加/更新到任意标签位置
  • 显示纯文本，不解析标签
const info = document.querySelector('.info')
// 获取标签内部的文字
console. Log(info. innerText)
// 添加/修改标签内部文字内容
info.innerText = '嗨喽，俺是刘德华~'

  • 1
  • 2
  • 3
  • 4
  • 5

元素.innerHTML 属性

  • 将文本内容添加/更新到任意标签位置
  • 会解析标签，多标签建议使用模板字符
const info = document.querySelector('.info')
// 获取标签
console. Log(info. innerHTML)
// 添加/修改标签内容
info.innerHTML = '<strong>嗨喽，俺是刘德华~</striong>'

  • 1
  • 2
  • 3
  • 4
  • 5

操作元素属性

操作元素常用属性

  • 可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
  • 最常见的属性比如: href、 title、src等
  • 语法：对象.属性 = 值
  • 举例说明
    // 1. 获取元素
const pic = document.querySelector('img')
// 2. 操作元素
pic.src = './images/liudehua.jpg'pic.title = '刘德华'

    • 1
    • 2
    • 3
    • 4

操作元素常用样式

  1. 通过style属性操作CSS

    • 语法：对象.style.样式属性 = 值
    const box  = document.querySelector('.box')
// 字符串
box.style.width = '500px'
// 小驼峰命名法
box.style.backgroundColor = 'hotpink' 
box.style.border = '2px solid blue'
box.style.borderTop = '2px solid skyblue'

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

  2. 通过类名（className）操作CSS

    • 如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
    • 语法:元素.className = 'active'
    • active 是一个css类名
    • 注意：
      • 由于class是关键字，所以使用className去代替
      • className是使用新值换旧值,如果需要添加一个类,需要保留之前的类名

  3. 通过classList操作类控制CSS

    • 为了解决className容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
    • 语法：
      // 追加一个类
元素.classList.add('类名')
// 删除一个类
元素.classList.remove('类名')
// 切换一个类
元素.classList.toggle('类名')

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6

使用className和classList的区别?

  • 修改大量样式的更方便
  • 修改不多样式的时候方便
  • classList 是追加和删除不影响以前类名

操作表单元素属性

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

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

  • 获取：DOM对象.属性名

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

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

    • 比如:
      • disabled（禁用）
      • checked（选中，只接受布尔值）
      • selected

自定义属性

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

  • 自定义属性：

    • 在html5中推出来了专门的data-自定义属性
    • 在标签上一律以data-开头
    • 在DOM对象上一律以dataset对象方式获取
     <body>
 <div data-id = "1" data-spm="buzhidao">1</div>
 <div data-id = "2">2</div>
 <div data-id = "3">3</div>
 <script>
     const one = document.querySelector('div')
     console.log(one.dataset.id)  //1
     console.log(one.dataset.spm)  //buzhidao
 </script>
 </body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

定时器-间歇函数

开启定时器

setInterval(函数, 时间)

  • 1
  • 作用:每隔一段时间调用这个函数
  • 间隔时间单位是毫秒
function repeat() {console.log('前端程序员，就是头发多咋滴~~')}
//每隔一秒调用repeat 函数
setInterval(repeat, 1000)

  • 1
  • 2
  • 3

注意：

  1. 函数名字不需要加括号
  2. 定时器返回的是一个id数字

关闭定时器

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

  • 1
  • 2

事件监听

什么是事件？

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

什么是事件监听？

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

语法：元素对象.addEventListener('事件类型',要执行的函数)
事件监听三要素：

  • 事件源： 那个dom元素被事件触发了，要获取dom元素
  • 事件类型:用什么方式触发，比如鼠标单击click、鼠标经过 mouseover等
  • 事件调用的函数： 要做什么事

事件监听版本

  • DOM LO
    • 事件源.on事件 = function() {}
  • DOM L2
    • 事件源.addEventListener(事件,事件处理函数)
  • 区别：
    • on方式会被覆盖, addEventListener方式可绑定多次,拥有事件更多特性,推荐使用

发展史：

  • DOM LO: 是DOM的发展的第一个版本; L: level
  • DOM L1: DOM级别1于1998年10月1日成为W3C推荐标准
  • DOM L2: 使用addEventListener注册事件
  • DOM L3: DOM3级事件模块在DOM2级事件的基础上重新定义了这些事件,也添加了一些新事件类型

事件类型

鼠标事件

鼠标触发
mouseenter 鼠 标 经 过
click 鼠标点击
mouseleave 鼠标离开

焦点事件

表单获得光标
focus 获得焦点
blur失去焦点

键盘事件

键盘触发
Keydown 键盘按下触发
Keyup键盘抬起触发

文本事件

表单输入触发
input 用户输入事件

事件对象

事件对象是什么

  • 也是个对象,这个对象里有事件触发时的相关信息
  • 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

使用场景

  • 可以判断用户按下哪个键，比如按下回车键可以发布新闻
  • 可以判断鼠标点击了哪个元素，从而做相应的操作

获取事件对象

语法：如何获取

  • 在事件绑定的回调函数的第一个参数就是事件对象
  • 一般命名为event、 ev、e
    元素.addEventListener('lick', function(e) {

})

    • 1
    • 2
    • 3

事件对象常用属性

部分常用属性

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

环境对象

每个函数里都有this环境对象，普通函数里的this指向的是window

  • 环境对象： 指的是函数内部特殊的变量 this，它代表着当前函数运行时所处的环境

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

    • 函数的调用方式不同, this指代的对象也不同
    • 【谁调用，this 就是谁】是判断 this 指向的粗略规则
    • 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

回调函数

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

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

常见的使用场景:

function fn() {
  console.log('我是回调函数...')
  // fn传递给了setInterval, fn就是回调函数
  setInterval(fn, 1000) 
  }

  • 1
  • 2
  • 3
  • 4
  • 5
box.addEventListener('click', function () {
  console.log('我也是回调函数')
})

  • 1
  • 2
  • 3
  • 把函数当做另外一个函数的参数传递，这个函数就叫回调函数
  • 回调函数本质还是函数,只不过把它当成参数使用
  • 使用匿名函数做为回调函数比较常见

事件流

事件流与两个阶段说明

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

事件捕获

  • 概念：从DOM的根元素开始去执行对应的事件(从外到里)
  • 事件捕获需要写对应代码才能看到效果
  • 代码：DOM.addEventListener（事件类型，事件处理函数，是否使用捕获机制）
  • 说明：
    • addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
    • 若传入false代表冒泡阶段触发,默认就是false
    • 若是用 LO 事件监听，则只有冒泡阶段，没有捕获

事件冒泡

  • 概念：当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
  • 简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
  • 事件冒泡是默认存在的
  • L2事件监听第三个参数是 false，或者默认都是冒泡

阻止冒泡

  • 问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
  • 需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
  • 前提：阻止事件冒泡需要拿到事件对象
  • 语法：事件对象.stopPropagation()
  • 注意：此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
const fa = document.querySelector('.father')
const son = document.querySelector('.son')
document.addEventListener('click', function() {
  alert('我是爷爷')
})
fa.addEventListener('click',function(){
  alert('我是爸爸')
})
son.addEventListener('click',function(e){
  alert('我是儿子')
  //阻止流动传播
  e.stopPropagation()
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

阻止默认行为

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

  • 语法：e.preventDefault()
const a = document.querySelector('a')
a.addEventListener('click',function (ee) {
  // 阻止默认行为 提交
  ee.preventDefault()
})

  • 1
  • 2
  • 3
  • 4
  • 5

解绑事件

addEventListener方式,必须使用:

  • removeEventListener(事件类型,事件处理函数, [获取捕获或者冒泡阶段])
const btn = document.querySelector('button')
// btn.onclick = function(){
//     alert('爷爷在此')
//     //L0 事件移除解绑
//     btn.onclick = null
// }

// btn.addEventListener('click',function(){
//     alert('爷爷在此')
// })

function fn(){
  alert('爷爷在此')
}
btn.addEventListener('click',fn)
// L2 事件移除解绑
btn.removeEventListener('click',fn)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

两种注册时间的区别

传统on注册（LO）

  • 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
  • 直接使用null覆盖偶就可以实现事件的解绑
  • 都是冒泡阶段执行的
  • 事件监听注册（L2）
  • 语法: addEventListener(事件类型, 事件处理函数,是否使用捕获)
  • 后面注册的事件不会覆盖前面注册的事件(同一个事件)
  • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  • 必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
  • 匿名函数无法被解绑

事件委托

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

  • 优点：减少注册次数，可以提高程序性能
  • 原理：事件委托其实是利用事件冒泡的特点。
    • 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
const ul = document.querySelector('ul')
ul.addEventListener('click',function(ee){
  // alert('我是你爹')
  // this.style.color = 'red'
  // console.log(ee.target)  // 点击的对象
  // console.dir(ee.target) 
  // ee.target.style.color = 'red'
  // 需求：只有点击li才有效果
  if(ee.target.tagName === 'LI'){
      ee.target.style.color = 'red'
  }
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

其他事件

页面加载事件

  1. load 事件
    • 加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
    • 为什么要学？
      • 有些时候需要等页面资源全部处理完了做一些事情
      • 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
    • 监听页面所有资源加载完毕：
      • 给 window 添加 load 事件
    • 注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
// 页面加载事件
widnow.addEventListener('load', function () {
  // 要执行的操作
})

  • 1
  • 2
  • 3
  • 4
  1. DOMContentLoaded 事件
    • 当初始的HTML文档被完全加载和解析完成之后, DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载
    • 监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件
// 页面滚动事件
document.addEventListener('DOMContentLoaded', function () {
  // 要执行的操作
})

  • 1
  • 2
  • 3
  • 4

元素滚动事件

  1. scroll 事件
    • 滚动条在滚动的时候持续触发的事件
    • 为什么要学？
      • 很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
    • 使用场景:
      • 我们想要页面滚动一段距离,比如100px,就让某些元素
      • 显示隐藏,那我们怎么知道,页面滚动了100像素呢?
    • 就可以使用scroll 来检测滚动的距离~~~
    • 监听整个页面滚动：
// 页面滚动事件
window.addEventListener('scroll', function () {
  // 要执行的操作
})

  • 1
  • 2
  • 3
  • 4

  1. scrollLeft和scrollTop(属性)

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

  2. crollTo

    • 把内容滚动到指定的坐标
    • 语法：元素.scrolTo(x, y)

页面尺寸事件

  1. resize:

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

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

  • 1
  • 2
  • 3

检测屏幕宽度：

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

  • 1
  • 2
  • 3
  • 4
  1. 获取宽高：
    • 获取元素的可见部分宽高（不包含边框，margin，滚动条等)
    • clientWidth和clientHeight

元素尺寸与位置

使用场景：

  • 前面案例滚动多少距离,都是我们自己算的,最好是页面滚动到某个元素,就可以做某些事。
  • 简单说,就是通过js的方式,得到元素在页面中的位置
  • 这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了

  1. 尺寸

    • 获取宽高：
      • 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
      • offsetWidth和offsetHeight
      • 获取出来的是数值，方便计算
      • 注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
    • 获取位置：
      • 获取元素距离自己定位父级元素的左、上距离
      • offsetLeft和offsetTop 是只读属性

  2. 位置

    • 2.element.getBoundingClientRect()
    • 方法返回元素的大小及其相对于视口的位置
属性作用说明
scrollLeft和scrollTop被卷去的头部和左侧配合页面滚动来用，可读写
clientWidth 和 clientHeight获得元素宽度和高度不包含border,margin，滚动条 用于js获取元素大小，只读属性
offsetWidth和offsetHeight获得元素宽度和高度包含border、padding，滚动条等，只读
offsetLeft和offsetTop获取元素距离自己定位父级元素的左、上距离获取元素位置的时候使用，只读属性

日期对象

日期对象：用来表示时间的对象

作用：可以得到当前系统时间

  1. 实例化

    • 在代码中发现了 new 关键字时，一般将这个操作称为实例化
    • 创建一个时间对象并获取时间
      • 获得当前时间 const date = new Date()
      • 获得指定时间 const date = new Date('2008-8-8 08:00:00')

  2. 时间对象方法

    目标:能够使用日期对象中的方法写出常见日期

    使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式

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

  3. 时间戳

    • 目标：能够获得当前时间戳使用场景: 如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
    • 什么是时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
    • 算法：
      • 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
      • 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
      • 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
      • 1000ms 转换为就是 0小时0分1秒
    • 三种方式获取时间戳：
      • 使用 getTime（）方法
      • 简写 +new Date()
      • 使用 Date.now()
      const date = new Date()
console.log(date.getTime())
//无需实例化
console.log(+new Date())
//无需实例化  
//但是只能得到当前的时间戳，而前面两种可以返回指定时间的时间戳
console.log(Date.now())

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7

节点操作

  1. DOM节点

    • DOM树里每一个内容都称之为节点
    • 节点类型
      • 元素节点
        • 所有的标签 比如 body、div
        • html 是根节点
      • 属性节点
        • 所有的属性 比如 href
      • 文本节点
        • 所有的文本
      • 其他

  2. 查找节点

    • 关闭二维码案例：点击关闭按钮，关闭的是二维码的盒子，还要获取erweima盒子

    • 思考：

      • 关闭按钮 和 erweima 是什么关系呢？
      • 父子关系
      • 所以，我们完全可以这样做：
      • 点击关闭按钮，直接关闭它的爸爸，就无需获取erweima元素了

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

      • 父节点
      • 子节点
      • 兄弟节点

    • 父节点查找：

      • parentNode 属性
      • 返回最近一级的父节点 找不到返回为null
      • 子元素.parentNode

    • 子节点查找：

      • childNodes
        • 获得所有子节点、包括文本节点（空格、换行）、注释节点等
      • children 属性（重点）
        • 仅获得所有元素节点
        • 返回的还是一个伪数组
        • 父元素.children

    • 兄弟关系查找：

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

  3. 增加节点

    • 很多情况下，我们需要在页面中增加元素
      • 比如，点击发布按钮，可以新增一条信息
    • 一般情况下，我们新增节点，按照如下操作：
      • 创建一个新的节点
      • 把创建的新的节点放入到指定的元素内部
    • 创建节点
      • 即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
      • 创建元素节点方法:document.createElement('标签名')
    • 追加节点
      • 要想在界面看到，还得插入到某个父元素中
      • 插入到父元素的最后一个子元素：父元素.appendChild(要插入的元素)
      • 插入到父元素中某个子元素的前面：父元素.insertBefore(要插入的元素，在哪个元素前面)
    • 克隆节点
      • 特殊情况下，我们新增节点，按照如下操作：
        • 复制一个原有的节点
        • 把复制的节点放入到指定的元素内部克隆节点
      • 克隆一个已有的元素节点：元素.cloneNode(布尔值)
      • cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
        • 若为true，则代表克隆时会包含后代节点一起克隆
        • 若为false，则代表克隆时不包含后代节点
        • 默认为false

  4. 删除节点

    • 若一个节点在页面中已不需要时，可以删除它
    • 在JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
    • 语法父元素.removeChild(要删除的元素)
    • 注：
      • 如不存在父子关系则删除不成功
      • 删除节点和隐藏节点(display:none)有区别的:隐藏节点还是存在的,但是删除,则从html中删除节点

M端事件

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

  • 触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
  • touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。
  • 常见的触屏事件如下：
触屏touch事件说明
touchstart手指触摸到一个 DOM 元素时触发
touchmove手指在一个 DOM 元素上滑动时触发
touchend手指从一个 DOM 元素上移开时触发
const div = document.querySelector('div')
div.addEventListener('touchstart',function(){
  console.log('开始摸')
})
div.addEventListener('touchmove',function(){
  console.log('滑动了')
})
div.addEventListener('touchend',function(){
  console.log('离开了')
})

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

JS插件

Window对象

  • window对象是一个全局对象，也可以说是JavaScript中的顶级对象
  • 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
  • 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
  • window对象下的属性和方法调用的时候可以省略window

  1. BOM(浏览器对象模型)

    • BOM(Browser Object Model ) 是浏览器对象模型

  2. 定时器-延时函数

    • JavaScript内置的一个用来让代码延迟执行的函数，叫 setTimeout
    • 语法：setTimeout(回调函数，等待的毫秒数)
    • setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行，平时省略window
    • 清除延时函数：```clearTimeout(timer)```````
    • 注意点
      • 延时器需要等待,所以后面的代码先执行
      • 每一次调用延时器都会产生一个新的延时器
    • 两种定时器对比执行的次数：
      • 延时函数：执行一次
      • 间歇函数:每隔一段时间就执行一次,除非手动清除

  3. JS执行机制

    • JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。
    • 这是因为Javascript这门脚本语言诞生的使命所致–JavaScript 是为处理页面中用户的交互，以及操作DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后再删除。
    • 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是：如果JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。
    • 为了解决这个问题,利用多核CPU的计算能力, HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程。于是,JS 中出现了同步和异步。
    • 同步
      • 前一个任务结束后再执行后一个任务,程序的执行顺序与任务的排列顺序是一致的、同步的。
    • 异步
      • 你在做一件事情时，因为这件事情会花费很长时间，在做这件事的同时，你还可以去处理其情。
    • 他们的本质区别:
      • 这条流水线上各个流程的执行顺序不同。
    • 同步任务：同步任务都在主线程上执行，形成一个执行栈。
    • 异步任务：JS 的异步是通过回调函数实现的。
      • 一般而言，异步任务有以下三种类型：
        • 普通事件,如click, resize等
        • 资源加载，如 load、error 等
        • 定时器,包括setinterval、setTimeout等
      • 异步任务相关添加到任务队列中（任务队列也称为消息队列）。
    • 执行顺序：
      • 先执行执行栈中的同步任务。
      • 异步任务放入任务队列中。
      • 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
    • 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环(event loop) 。

  4. location对象

    • location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
    • 常用属性和方法：
      • location.href属性获取完整的URL地址,对其赋值时用于地址的跳转
      • search属性获取地址中携带的参数,符号?后面部分：console.log(location.search)
      • hash 属性获取地址中的啥希值，符号 # 后面部分：console.log(location.hash)
      • reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新：location.reload(true)

  5. navigator对象

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  1. histroy对象
    • history的数据类型是对象,主要管理历史记录,该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
    • 常用属性和方法：
      history对象方法作用
      back()可以后退功能
      forward()前进功能
      go(参数)前进后退功能 参数如果是 1 前进1个页面 如果是-1 后退1个页面

本地存储

  1. 本地存储介绍

    • 以前我们页面写的数据一刷新页面就没有了
    • 随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据, HTML5规范提出了相关解决方案。
    • 数据存储在用户浏览器中
    • 设置、读取方便、甚至页面刷新不丢失数据
    • 容量较大, sessionStorage和localStorage约 5M 左右
    • 常见的使用场景：https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丟失

  2. 本地存储分类

    • localStorage
      • 作用：可以将数据永久存储在本地(用户的电脑),除非手动删除,否则关闭页面也会存在
      • 特性：
        • 可以多窗口（页面）共享（同一浏览器可以共享）
        • 以键值对的形式存储使用
        • 本地存储只能存储字符串数据类型
      • 语法：
        • 存储数据：localStorage.setItem(key, value)
        • 获取数据：localStorage.getItem(key)
        • 删除数据：localStorage.removeItem(key)
    • sessionStorage
      • 特性：
        • 生命周期为关闭浏览器窗口
        • 在同一个窗口(页面)下数据可以共享
        • 以键值对的形式存储使用
        • 用法跟localStorage基本相同

  3. 存储复杂数据类型

    • 本地存储只能存储字符串数据类型
      • 需要将复杂数据类型转换成JSON字符串,在存储到本地
        • JSON.stringify(复杂数据类型)
      • 把取出来的字符串转换为对象
        • JSON.parse(JSON字符串)
        • 将JSON字符串转换成对象取出时候使用
          const obj = JSON.parse(localStorage.getItem('obj'))

字符串拼接新思路: (效果更高,开发常用的写法)

利用 map() 和 join() 数组方法实现字符串拼接

  • 数组中map方法 迭代数组
    • 使用场景：map 可以用遍历数组处理数据，并返回新的数组
    • map 也称为映射。映射是个术语，指两个元素的集之间元素相互“对应”的关系。
    • map重点在于有返回值，forEach没有返回值
    const arr = ['red','green', 'blue']
const newArr = arr.map(function(ele,index){
  console.log(ele)    //素组元素
  console.log(index)  //索引号
  return ele + '颜色'
})
console.log(newArr)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 数组中join方法
    • 作用：join() 方法用于把数组中的所有元素转换成一个字符串
    • 语法：
      const arr = ['red','green', 'blue']
console.log(arr.join()) //red,green,blue
console.log(arr.join('')) //redgreenblue
console.log(arr.join('|')) //red|green|blue

      • 1
      • 2
      • 3
      • 4
    • 参数：数组元素是通过参数里面指定的分隔符进行分隔的，空字符串(‘’)，则所有元素之间都没有任何字符。

正则表达式

  • 正则表达式(Regular Expression)是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象
  • 通常用来查找、替换那些符合正则表达式的文本,许多语言都支持正则表达式。
  • 正则表达式在 JavaScript中的使用场景：
    • 例如验证表单:用户名表单只能输入英文字母、数字或者下划线,昵称输入框中可以输入中文(匹配)比如用户名： /[a-z0-9_-][3,16)$/
    • 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等。
  1. 语法
    1. 定义规则
      • 定义正则表达式语法： const 变量名 = /表达式/
      • 其中 / /是正则表达式字面量
    2. 查找
      • 判断是否有符合规则的字符串：test()方法 用来查看正则表达式与指定的字符串是否匹配
      • 语法：regObj.test(被检测的字符串)
      • 如果正则表达式与指定的字符串匹配，返回true，否则false
    3. 检索（查找）符合规则的字符串
      • exec()方法 在一个指定字符串中执行一个搜索匹配
      • 语法：regObj.exec(被检测字符串)
      • 如果匹配成功，exec() 方法返回一个数组，否则返回null
  2. 元字符
    • 普通字符：
      • 大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。
    • 元字符(特殊字符)
      • 是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
      • 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…
      • 但是换成元字符写法：[a-z]
    • 参考文档：
      • MDN: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
      • 正则测试工具: http://tool.oschina.net/regex
    • 为了方便记忆和学习，我们对众多的元字符进行了分类：
      • 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
      • 量词（表示重复次数）
      • 字符类（比如\d 表示 0~9）
    1. 边界符

      • 正则表达式中的边界符(位置符)用来提示字符所处的位置,主要有两个字符

        边界符说明
        ^表示匹配行首的文本(以谁开始)
        $表示匹配行尾的文本(以谁结束)
    2. 量词

      • 量词用来 设定某个模式出现的次数

        量词说明
        *重复零次或更多次
        +重复一次或更多次
        ?重复零次或一次
        {n}重复n次
        {n,}重复n次或更多次
        {n,m}重复n到m次

      • 注意：逗号左右两侧千万不要出现空格

    3. 字符类

      • [] 匹配字符集合

        • 后面的字符串只要包含 abc 中任意一个字符，都返回 true。后面的字符串只要包含 abc 中任意一个字符，都返回 true。

      • [] 里面加上 - 连字符

        • 使用连字符-表示一个范围console.log(/^[a-z]$/.test('c')) //true
        • 比如：
          • [a-z]表示 **a 到 z **26个英文字母都可以
          • [a-zA-Z] 表示大小写都可以
          • [0-9] 表示 0~9 的数字都可以
        • 认识下：腾讯QQ号：^[1-9][0-9]{4，}$（腾讯QQ号从10000开始）

      • [] 里面加上 ^ 取反符号

        • 比如：
          • [^a-z]匹配除了小写字母以外的字符

          • 注意要写到中括号里面

      • .匹配除换行符之外的任何单个字符匹配除换行符之外的任何单个字符

      • 预定义:指的是某些常见模式的简写方式。

        预定义类说明
        \d匹配0-9之间的任一数字，相当于[0-9]
        \D匹配所有0-9以外的字符，相当于[^0-9]
        \w匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]
        \W除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]
        \s匹配空格（包括换行符、制表符、空格符等），相等于[\t\r\n\v\f]
        \S匹配非空格的字符，相当于[^\t\r\n\v\f]

        • 日期格式：^\d{4}-\d{1,2}-\d{1,2}

  3. 修饰符

    • 修饰符约束正则执行的某些细节行为,如是否区分大小写、是否支持多行匹配等

    • 语法：/表达式/修饰符

    • i是单词 ignore 的缩写，正则匹配时字母不区分大小写

    • g 是单词 global 的缩写，匹配所有满足正则表达式的结果

      console.log(/a/i.test('a')) // true
console.log(/a/i.test('A')) // true

      • 1
      • 2

    • replace替换

      • 语法：字符串.replace(/正则表达式/, '替换的文本')

HTML学习
Web移动端学习
JS基础学习
Web API学习
JS进阶学习
ajax学习
Node.js与Webpack学习
Git学习
vue学习—更新中
小程序学习—学习中
XML教学视频

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/运维做开发/article/detail/935786
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号