APIs

1、APIs作用与分类

  • 作用：使用JavaScript去操作html和浏览器
  • 分类：DOM（文档对象模型）和 BOM（浏览器对象模型）

2、DOM概念

  • 定义：用来呈现以及与任意HTML或XML文档交互的API
  • 作用：开发网页内容特效和实现用户交互

3、DOM树

  • 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树
  • 作用：文档树直观的体现了标签与标签之间的关系

4、DOM对象

  • 定义：浏览器根据html标签生成的JS对象
    • 所有的标签属性都可以在这个对象上找到
    • 修改这个对象的属性会自动映射到标签身上
  • document对象
    • 是DOM里提供的一个对象
    • 所以它提供的属性和方法都是用来访问和操作网页内容的
    • 网页所有的内容都在document里面

5、获取DOM对象

1.根据CSS选择器来获取DOM元素

  • 选择匹配的第一个元素

    • 代码：

      • document.querySelector('css选择器')
        • 获取匹配的第一个元素
        • 包含一个或多个有效的CSS选择器字符串

    • 返回值：

      • CSS选择器匹配的第一个元素，一个HTML Element对象
      • 没有就返回null

  • 选择匹配的多个元素

    • 代码：
      • document.querySelectorAll('css选择器')
        • 获取匹配的多个元素
        • 包含一个或多个有效的CSS选择器字符串
    • 返回值：
      • CSS选择器匹配的NodeList对象集合
      • 得到的是一个伪数组
        • 有长度有索引号的数组
        • 但是没有pop()、push()等数组方法

2.其他获取DOM元素

  • 代码：
    • document.getElementById('nav')
    • document.getElementsByTagName('div')
    • document.getElementsByClassName('w')

6、操作元素内容

1.对象.innerText

  • 将文本内容添加/更新到任意标签位置
  • 显示纯文本，不解析标签

2.元素.innerHTML属性

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

7、操作元素属性

1.常用属性修改

  • 代码
    • 对象.属性 = 值

2.控制样式属性

1.通过style修改样式属性

  • 代码

    • 对象.style.属性 = 值

    • 举例：改变div的宽

      <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
</style>

<body>
  <div class="box"></div>
  <script>
    const box = document.querySelector('.box')
    box.style.width = '400px'
  </script>

</body>

</html>

    • 注意：

      • 如遇见background-color等多语句，则采取小驼峰形式，如：box.style.backgroundColor
      • 有单位的属性记得带带单位，如px等单位

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

  • 代码：
    • 元素.className = '类名'
  • 注意：
    • 由于class是关键字，所以使用className去代替
    • className是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

3.通过classList 操作类控制CSS

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

3.操作表单元素属性

  • 获取：DOM对象.属性名
  • 设置：DOM对象.属性名 = 新值
  • 代码：
    • 表单.value = '用户名'
    • 表单.type = ’password‘
  • 其他属性：selected、checked、disabled

4.自定义属性

  • 标准属性：标签自带的属性 如class、id、title等，可以直接使用点语法操作，如：disabled、checked、selected
  • 自定义属性：
    • 在html5中推出来了专门的data-自定义属性
    • 在标签上一律以data开头
    • 在DOM对象上一律以dataset对象方式获取

8、定时器-间歇函数

1.开启定时器

  • 代码：
    • setInterval(函数 ，间歇函数)
  • 作用：每隔一段时间调用这个函数
  • 注意：
    • 间隔时间单位是毫秒
    • 函数名字不需要加括号
    • 定时器返回的是一个id数字

2.关闭定时器

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

    clearInterval(变量名)

9、事件监听

  • 代码：

    • 元素对象.addEventListener('事件类型'，要执行的函数)

      • 举例：

        <button>点击</button>
  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click',function(){
      alert('你干嘛！')
    })
  </script>

  • 事件监听的三要素：

    • 事件源：获取触发事件的元素
    • 事件类型：用什么方式触发，如鼠标单击click、鼠标经过 mouseover…
    • 事件调用的函数

1.事件类型

  • 鼠标事件
    • click：鼠标点击
    • mouseenter：鼠标经过
    • mouseleave：鼠标离开
  • 焦点事件
    • focus：获取焦点
    • blur：失去焦点
  • 键盘事件
    • Keydown：键盘按下触发
    • Keyup：键盘抬起触发
  • 文本事件
    • input：用户输入事件

2.事件对象

  • 获取事件对象
    • 在事件绑定的回调函数的第一个参数就是事件对象
    • 一般命名为event、ev、e
    • 例如：
      • 元素.addEventListener('click',function(e){})
  • 常见属性
    • type
      • 获取当前的事件类型
    • clientX/offsetY
      • 获取光标相对于浏览器可见窗口左上角的位置
    • offsetX/offsetY
      • 获取光标相对于当前DOM元素左上角的位置
    • key
      • 用户按下的键盘键的值

3.环境对象

  • 定义：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
  • 每个函数里面都有 this 环境对象，普通函数里面this指向的是 window，事件监听函数里指向的是对应事件执行的组件对象

4.回调函数

  • 定义：如果将函数A 作为参数传递给函数B时，我们称函数 A 为回调函数

5.事件流

  • 定义：指的是事件完整执行过程中的流动路径
  • 示例图：
    • 事件流示例图

5.1 事件捕获

  • 定义：从DOM的根元素开始去执行对应事件
  • 代码：
    • DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制（默认为false）)

5.2 事件冒泡

  • 定义：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。
  • 代码：
    • DOM.addEventListener(事件类型，事件处理函数)（事件默认为冒泡）

5.3 阻止冒泡

  • 语法：
    • 事件对象.stopPropagation()
    • 注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

5.4 解绑事件

  • on 事件方式，直接使用 null 覆盖就可以实现事件的解绑

    • 语法：

      • btn.onclick = function(){
    alert('点击了')
}
btn.onclick = null  //解绑事件

  • addEventListener 方式，必须使用 removeEventListener(事件类型，事件处理函数，[获取捕获或者冒泡阶段])，如：

    • function fn(){
    alert('点击了')
}
//绑定事件
btn.addEventListener('click',fn)
//解绑事件
btn.removeEventListener('click',fn)

    • 注意：匿名函数无法解绑

6.事件委托

  • 优点：减少注册次数，可以提高程序性能
  • 原理：事件委托其实是利用事件冒泡的特点
    • 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
  • 实现：事件对象.target.tagName 可以获取真正触发事件的元素

7.阻止默认行为

  • 语法：e.preventdefault()，如：

    • <form action="http://www.baidu.com">
    <input type="submit" value="提交">
    </form>
<script>
  const form = document.querySelector('form')      
        form.addEventListener('click',function(e){
            e.preventDefault()
        })
  </script>

8.其他事件

8.1 页面加载事件

  • 事件名：load
    • 定义：加载外部资源加载完毕时触发的事件
    • 监听页面所有资源加载完毕：
      • 给 wiindow 添加 load 事件，如：
        • window.addEventListener('load',function(){})
    • 监听某个资源：
      • 给 img 添加 load 事件，如：
        • img.addEventListener('load',function(){})
  • 事件名：DOMContentLoaded
    • 定义：当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式、图像等完全加载
    • 监听页面DOM加载完毕：
      • 给 document 添加 DOMContentLoaded 事件，如：
        • document.addEventListener('DOMContentLoaded'，function(){})

8.2 页面滚动事件

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

  • 监听整个页面滚动：

    • window.addEventListener('scroll',function(){})

  • 属性：

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

  • 扩展：获取 HTML 元素的方式：

    • document.documentElement

10、日期对象

1.时间对象的创建

  • 获取当前时间：const date = new Date()
  • 获取指定时间：const date = new Date('2010-9-8')

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秒起至现在的毫秒数，它是一种特殊的计量时间的方式

获取时间戳

  1. 使用 getTime() 方法

    • const date = new Date()
console.log(date.getTime())

  2. 简写 +new Date()

    • console.log(+new Date())或console.log(+new Date('2024-5-1 19:30:01'))

  3. 使用 Date.now()

11、节点操作

1.DOM节点

概念

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

节点类型

  • 元素节点
    • 所有的标签，如 body、div
    • html是根节点
  • 属性节点
    • 所有的属性，如 href
  • 文本节点
    • 所有的文本

2.查找节点

父节点查找

  • parentNode 属性

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

  • 示例代码：子元素.parentNode

子节点查找

  • childNodes 属性
    • 获取所有子节点、包括文本节点、注释节点等
  • children 属性
    • 仅获得所有元素节点
    • 返回的还是一个伪数组
  • 示例代码：父元素.children

兄弟关系查找

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

3.增加节点

创建节点

  • 创建出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
  • 创建元素节点方法：
    • document.createElement('标签名')

追加节点

  • 插入到父元素的最后一个子元素：
    • 父元素.appendChild(要插入的元素)
  • 插入到父元素中某个元素的前面
    • 父元素.insertBefore(要插入的元素，在哪个元素前面)
  • 克隆节点
    • 元素.cloneNode(布尔值)，其中布尔值：
      • 若为true，则代表克隆时会包含后代节点一起克隆
      • 若为false，则代表克隆时不包含后代节点
      • 默认为false

4.删除节点

  • 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
    • 语法：父元素.removeChild(要删除的元素)
  • 注：
    • 如不存在父子关系则删除不成功
    • 删除节点和隐藏节点（display:none）有区别的：隐藏节点是存在的，但是删除，则从html中删除节点

12、M端事件

概念

  • 触屏事件 touch（也称触摸事件）

常见的触屏事件

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

  • 示例代码：

    • const div = document.querySelector('div')
div.addEventListener('touchstart',function(){
    //执行代码
})

13、Window对象

1. BOM

概念

  • BOM（Browser Object Model）是浏览器对象模型

2. 定时器--延时函数

  • JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout

  • 语法：setTimeout(回调函数，等待的毫秒数)

  • 清除延迟函数：

    • let timer = setTimeout(回调函数，等待的毫秒数)
clearTimeout(timer)

  • 注意：

    • 延迟器需要等待，所以后面的代码先执行
    • 每一次调用延迟器都会产生一个新的延迟器

3. JS 执行机制

同步任务

  • 同步任务都在主线程上执行，形成一个执行栈。

异步任务

  • JS 的异步是通过回调函数实现的。示例：
    • 普通事件，如 click、resize 等
    • 资源加载，如 load、error等
    • 定时器，包括 setInterval、setTimeout 等

执行顺序

  1. 先执行执行栈中的同步任务
  2. 异步任务放入任务队列中
  3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。

事件循环

  • 由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为世界循环（event loop）

4. location的常用属性

  1. href：获取完整的URL地址，对其赋值时用于地址的跳转
  2. search：获取地址中携带的参数，符号？后面的部分
  3. hash：获取地址中的哈希值，符号#后面的部分
  4. reload：用来刷新当前页面，传入参数true时表示强制刷新

5. 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 = 'https://www.baidu.com'
      }
    })()
  </script>

6. histroy对象

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

常用属性和方法

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

7.本地存储

存储数据

  • 语法：localStorage.setItem(key,value) （如果“pg”已经存在，则为修改数据）

    • 示例代码：

      • //存储一个名字 uname，pg
localStorage.setItem('uname','pg')

获取数据

  • 语法：localStorage.getItem(key)

    • 示例代码：

      • //获取pg
localStorage.getItem('uname')

删除数据

  • 语法：localStorage.removeItem(key)

    • 示例代码：

      • //删除pg
localStorage.removeItem('uname')

  • 注意：本地存储只能存储字符串数据类型

存储复杂数据类型

  • 方法：将复杂数据类型转化为JSON数据类型存储到本地

  • 语法：JSON.stringify(复杂数据类型)

    • 示例代码：

      • const obj = {
    name:'pg',
    age:18
}
localStorage.setItem('obj',JSON.stringify(obj))

  • 将JSON字符串转化为对象：JSON.parse(字符串)

14、正则表达式

概念

  • 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 Javascript中，正则表达式也是对象

定义正则表达式

  • 语法：const 变量名 = /表达式/
    • 其中/ / 是正则表达式字面量

匹配正则表达式

  • test() 方法 用来查看正则表达式与指定的字符串是否匹配

  • 语法：

    • const regObj = /你干嘛/
regObj.test(被检测的字符串)

检索符合规则的字符串

  • exec() 方法 在一个指定字符串中执行一个搜索匹配
  • 语法：regObj.exec(被检测字符串)

元字符

边界符

  • 正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符：

    • 边界符说明
      ^表示匹配行首的文本（以谁开始）
      $表示匹配行尾的文本（以谁结束）

    • 示例代码：

      • /^p/.test('p')  //true
/^p$/.test('p')  //true
/^p$/.test('pp')  //false

量词

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

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

  • 示例代码：

    • /^p*$/.test('pp')  //true
/^p*$/.test('pxp')  //false
/^p{3}$/.test('ppp')  //true

字符类

  • [] ：匹配字符集合

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

      • 示例代码：

        • /[abc]/.test('ac')  //true
/[abc]/.test('plm')  //false

  • [ - ] : [] 里加上 - 连字符

    • 使用连字符 - 表示一个范围
    • 如：
      • [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}

修饰符

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

  • 语法：

    • /表达式/修饰符
    • i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
    • g 是单词 global 的缩写，匹配所有满足正则表达式的结果

  • 示例代码：

    • /p/i.test('p')  //true

  • 替换 replace

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

    • 示例代码：

      • const str = 'pg你干嘛！'
//用gg替换pg/PG
str.replace(/pg/i,'gg')