js之DOM(webApi)

web API

第一天

web：网页

api：用来操作网页的一个接口（一些列的方法）
通过js来操作网页任何一种功能
学习各种用来操作网页的方法
js运行在浏览器的脚本语言
EMCAscript简称ES，是js的一个规范

• js和es的关系

  • ECMAScript 是一套语法标准

    • 简称ES

  • 我们之前学的语法其实就是 ECMAScript 里的语法变量、数据类型、运算等规则都是 ECMAScript 规定的

  • JavaScript 遵守 ECMAScript 规则的一套编程语言

  • 严格来讲，ECMAScript 配合浏览器提供的 Web APIs 才称之为 JavaScript

  • Web APIs 浏览器提供的一套操作浏览器、页面内容的功能（主要是一些对象和方法）

DOM

• DOM的核心思想把网页内容当做对象来处理
  作用 开发网页内容特效和实现用户交互
• DOM树：整个网页（文档对象）是一个树状结构
  文档树直观的体现了标签与标签之间的关系
• DOM节点：在网页中任何的一个标签、符号、空格都为节点
  HTML 中任意标签都是【元素类型节点】
• DOM元素：在网页中任何一个html标签
• 文档对象模型
  dom将网页封装成一个document对象document是 DOM 里提供的一个对象，用来访问和操作网页内容的console.dir()在控制台以对象的形式输出前提是自身是对象
  浏览器提供的一套专门用来操作网页内容的功能

webapis通过js操作网页

• 查找元素节点就是选择页面中标签元素

  • 获取页面的标签

    • document.body获取body标签不用小括号
    • document.documentElement获取html标签
    • document.getElementById('标签的id值')获取网页中的任何一个元素，只能获取一个对象和html标签对象传入的id是字符串，记得加引号，直接写id名即可，不需要加 #返回一个匹配到 ID 的 DOM Element 对象（所有节点都是对象）
      找不到会得到null可以通过对象里面的 nodeType 属性来标识节点类型

  • 操作元素

    • 操作元素的节点
      对象.属性=值先获取标签对象用标签对象.innerText或者innerHTML

      • 图片

        • 获取的是图片标签对象.src绝对路径
        • 设置的时候可以是相对路径

      • 文字

        • 区别

          • innerText获取标签的纯文本
            将文本内容添加/更新到任意标签位置
            文本中包含的标签不会被解析
          • innerHTML可以获取文本也可以获取标签
            将文本内容添加/更新到任意标签位置
            文本中包含的标签会被解析

        • document.write

          • 只能将文本内容追加到 前面的位置
          • 文本中包含的标签会被解析

    • 通过setAttribute方法修改
      对象.setAttribute（'属性','值'）

      • 属性和值都要加引号

  • js操作样式

    • 给标签设置样式

      • 行内样式

        • 标签对象.style.css属性=值;

          • 值不是变量记得加引号和单位
          • 在写css的属性时候不是随便写的要看当前对象有哪些属性，例如backgroundColor属性是和css属性不一样没有-修改样式通过style属性引出
            如果属性有-连接符，需要转换为小驼峰命名法
            赋值的时候，需要的时候不要忘记加css单位

      • 选择器添加类样式

  • Date

    • 获取系统时间

      • let 变量=new Date（）

      • 获取年月日时分秒

        • 日期对象.

          • getFullYear()
          • getMonth()+1
          • getDate()
          • getHours
          • getMinutes()
          • getSeconds()

    • 时间戳

      • 毫秒表示
      • 三种方式 .getTime;Date.now();+new Date()

  • 定时器

    • 隔一段时间自动执行一次
    • setinterval（函数名，时间间隔）
      时间间隔是毫秒

清除定时器 使代码不会隔一段时间执行

clearInterval（定时器的id值）

定时器的id值：当在程序中每一次调用setinterval（），它的返回值就是定时器的id值

如果获取标单元素中的文字内容，则不能用innerhtml和innertext，用表单对象.value

表单按钮disabled能点击是false，不能点击是true，操作按钮 标签对象.disabled=true

第二天

高级函数，环境对象，dom

• 高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高级应用。

  【值】就是 JavaScript 中的数据，如数值、字符串、布尔、对象等。

  函数分为具名函数和匿名函数，具名函数是指函数要有具体的名称，匿名函数是指没有名字的函数，匿名函数要赋值给变量，即函数表达式，匿名函数必须先声明在调用，推荐所有函数先声明再调用。在高阶函数中无名字的叫回调函数，不在高级函数中，叫匿名函数

  • 自调用函数（函数体）（）;

  第一个括号内是函数体，第二个函数调用可以传参数

  第一种用括号把整个函数包起来包括函数定义和调用

  第二种()()用小括号把定义包起来再用小括号调用

  可以是匿名函数

  小闭包

  自调用函数不是递归函数

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

  简单理解： 在高阶函数中，参数是个函数，这个参数的函数就是回调函数

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

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

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

  l【谁调用， this 就是谁】 是判断 this 指向的粗略规则

  事件中的this是指向事件源的

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

• 事件是编程语言中的术语，任何一个具体的动作，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。常见的事件有鼠标事件和键盘事件，多个标签注册事件的时候，必须要遍历伪数组

• Ø事件源： 那个dom元素被事件触发了，要获取dom元素，是单个标签

  Ø事件类型： 用什么方式触发，代表用户不同的动作，要加引号，比如鼠标单击 click、鼠标经过 mouseover 等

  Ø事件的处理程序（调用的回调函数）： 要做什么事（实现的什么功能）

  获取内容在事件内部获取，不能写在外面，写外面黄花菜都凉了

• 事件监听 程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应

• l之前我们学的查找元素节点一次只能找到一个

  l以下方法可以找到若干个元素节点

  Ødocument.getElementsByTagName('HTML标签名')

  结果是一个伪数组形式的标签对象

  Ødocument.querySelector('选择器'); // 根据指定选择器返回第一个元素对象

  Ødocument.querySelectorAll(‘选择器’); // 根据指定选择器返回所有元素

  ØquerySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector('#nav');

  Ø以上方法要在选择器前加前缀会得到一个伪数组形式的标签对象，找到几个元素长度就为几

• l伪数组

  ​ 能有序存多个数据，且有下标、有长度，但没有真数组方法（例如push）的一种数据

  \1. 元素.style.样式名 = 样式值

  Ø缺点：如果要同时设置多个样式会比较繁琐

  \2. cssText

  通过cssText属性，可以一次设置多个样式

  缺点：如果这类样式多个元素要用，改动麻烦

  \3. className

  Ø本质是先写好类样式，再通过className修改元素拥有这个类

  Ø缺点：需要预先写样式

标签操作类样式

标签对象.classname='类名1 类名2……' 不加点

多个类名用空格隔开类似css

添加类名时候可以将原来的类名覆盖(实质是这个标签对象的所有类样式)

标签不需要类名可以给标签类名一个空

标签对象.classname=''

排他思想：干掉所有人，设置自己

• 属性：描述标签特定功能的名称

• 自定义属性

  在 HTML 中除了标签的【标准属性】外，开发者还可以给标签【自定义属性】

  例：img的标准属性为src、alt等，但若写一个 data-info 则data-info叫自定义属性

  l作用：一般用来存储额外数据辅助完成某个功能

  l规范：自定义属性一律以 data- 开头，后面接名字，且名字中若多个单词用-隔开

  自定义属性本质是一个容器，保存数据到标签

  理由：方便区分什么是【标准属性】，什么是【自定义属性】

  JavaScript操作自定义属性：dataset

  1. （标签对象）元素.dataset.自定义属性名=值 不用加data-，后面遵守驼峰命名法

2. （标签对象）元素.setAttribute('data-自定义属性名',值)
3. 不用js直接加也行太粗鲁

获取的就不用等号了

• 例子：div.dataset.属性名

  在div.dataset是一个带有data-开头的自定义属性对象所以不用加data-

例：某元素的自定义属性叫 data-label，则 元素.dataset.label

通过dataset可以获取自定义属性也可以重新赋值，若赋值的自定义属性不存在时则自动添加

• 元素.getAttribute('自定义属性')

  可以获取不带data的属性

  获取自定义的要加data- 属性名元素.setAttribute('data-自定义属性名')

  也可以获取不带data-的属性，元素.getAttribute('属性')

延伸

标准属性

标签自带的属性（value、class、id、name……）

.datasate专业操作自定义属性的，不能操作标准属性，undefined

第三天

通过命名空间或自执行函数实现程序的基本封装，提升程序的可维护度

大型项目中涉及的代码量是惊人的，然而代码并非一成不变，随时会面临功能升级或者 bug 修复，因此需要有良好的代码组织管理的方式，才能保证将来维护代码时更加的高效。1.自执行函数2.命名空间

• 自执行函数 是一种将函数声明和调用合并到一起的写法，我们称为自执行函数或立即执行函数

• 自执行函数前面尽量都加上分号

  1.不然会引起错误

  2.后期我们压缩代码也会引起错误

  3.常见的除了分号之外也有 ！或者+

  4.但是加分号是我们最常见的写法

l自执行函数也可以传递参数 自执行函数也普通函数并无本质的区别，同样具有形参与实参

命名空间

命名空间本质上是一个普通对象，将具有关联性的变量和函数封装起来，做为该对象的属性或方法

Ø解决变量污染的问题

Ø变量污染：占用某个变量导致后续无法使用此变量（标识）的问题

为什么要封装：

①以前每次使用日期，都必须要实例化（new Date()）

②如果多个人同时使用日期，很容易命名冲突

③日期函数里面月份少1，每次需要+1 才能使用

①new Date()

②属性和方法

③this指向方法的调用者（即对象）

④如何返回对象里面方法的值？ （return）

++++

DOM事件

1.行内事件

监听一个元素的事件，也可以写在标签内，这种写法称之为行内事件

外双内单

l如果事件触发时要执行多句代码，一般会调用函数

Ø此时也可以给函数传参

Ø注：此时函数内的this是window，匿名函数

Ø在后面的Vue中，会有类似的用法，现在作为了解…

2.DOM L0事件

Ø这种写法就是在事件类型前固定加on，即监听此类事件

Ø我们之前学的 addEventListener 是 L2 事件（推荐使用）

lDOM L0 和 DOM L2 区别

ØDOM L0 写法： 相同事件类型只能绑定一次通过给属性赋值的方式注册事件，属性只能保存一个值

ØDOM L2 写法： 相同事件类型可以绑定多次,调用函数实现注册事件，函数不限制调用次数

Ø还有其他区别后续再讲

如果元素同一种事件只注册一个用doml0 .onclick事件在同一时间只能指向唯一对象

同一个事件注册多个用doml2

3.事件移除

​ 移除监听的事件，可以提升性能 比如放大镜的拖拽效果， 当鼠标按下并且移动则添加监听事件，如果鼠标弹起，此时再移动鼠标则需要移除监听事件

移除事件针对的是通过on事件方式注册的事件

注：如果添加事件监听时是用的匿名函数，则无法移除，推荐l2

只能移除addeventlistener注册的事件，如果要移除事件在注册事件的时候要写对应的函数名字

移除谁事件源就写谁

语法必须是函数名，函数在外面不能在括号内写，否则移除不了

4.事件类型

l鼠标事件 是指跟鼠标操作相关的事件，如单击、双击、移动等。

事件类型	作用	说明
click	鼠标单击	鼠标点击一次
dblclick	鼠标双击	快速双击两次
mouseover	鼠标移入悬停在	鼠标经过元素会触发
mouseout	鼠标移出	鼠标离开元素会触发
mousemove	鼠标移动	鼠标在元素上移动会触发
mousedown	鼠标按下	鼠标按下的时候触发
mouseup	鼠标弹起	鼠标弹起的时候触发
mouseenter	鼠标进入
mouseleave	鼠标离开事件

5.事件对象

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

在事件中以对象的形式存在的一个参数

一般命名为event eve、e

Øtype 获取当前的事件类型

clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置可视区域不包含滚动条

offsetX/offsetY 获取光标相对于当前事件源左上角的位置

pageX/Y效果与client数值一样，相对于页面，如果有滚动条，page包括滚动条移动出去的位置

screenx/y获取鼠标坐标相对于整块屏幕，电脑屏幕

给整个页面注册事件，不是盒子，可以是body或者html 事件源要有大小body,html{h:100%}

鼠标移动的坐标给盒子的margin position translate，既可以改变元素位置又不影响其他元素position有left和top记得带单位

第四天

递归函数

递归是函数的高级用法，本质上是函数自已调用自已，它的行为非常类似循环，如果一个函数内部调用自已本身，并且通过条件控制避免陷入死循环，那么我们称这个函数为递归函数。自调用函数不是递归函数，递归要加结束条件

• 递归函数有 3 个特征：

  Ø1. 重复执行

  Ø2. 调用自身

  Ø3. 【必须】要有条件控制，避免死循环和栈溢出 可以加if或者return

节点操作

元素节点 　　 Node.ELEMENT_NODE(1)
属性节点 　　 Node.ATTRIBUTE_NODE(2)
文本节点 　　 Node.TEXT_NODE(3)
CDATA节点 　　 Node.CDATA_SECTION_NODE(4)
实体引用名称节点 　　 Node.ENTRY_REFERENCE_NODE(5)
实体名称节点 　　 Node.ENTITY_NODE(6)
处理指令节点 　　 Node.PROCESSING_INSTRUCTION_NODE(7)
注释节点 　　 Node.COMMENT_NODE(8)
文档节点 　　 Node.DOCUMENT_NODE(9)
文档类型节点 　　 Node.DOCUMENT_TYPE_NODE(10)
文档片段节点 　　 Node.DOCUMENT_FRAGMENT_NODE(11)
DTD声明节点 　　 Node.NOTATION_NODE(12)

nodeType节点类型判断，常用类型返回值：元素节点返回1，属性节点返回2，文本节点返回3，注释节点返回8

1. 插入节点

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

l创建元素节点方法：

返回的是一个标签对象

获取文本的文本内容.length即.innerText.length/.value.length字数

输入事件：oninput

输入框.oninput或者输入框.addeventlistener('input',function(){})

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值若为true，则代表克隆时会包含后代节点一起克隆若为false，则代表克隆时不包含后代节点默认为false

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

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

插入父元素前面

新标签对象，目标元素,这里不加引号

将标签添加到指定的目标元素前面

2.删除节点

l若一个节点在页面中已不需要时，可以删除它

l在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除

l语法

l如不存在父子关系则删除不成功

还有一种innerHTML和innerText等于''但是是清空

３．　替换节点

l替换节点是指把一个已经存在页面中的元素替换成新的元素

l方法一语法：

首先要有新的节点，然后直接替换不插入

二：

l方法二的innerHTML本质上是修改双标签里面的内容，只不过遇到标签也会解析成元素

4. 查找****节点

父子关系

\1. 获取父节点方法

ØparentNode 属性 返回最近一级的父节点 找不到返回为null，得到的是一个标签对象

\2. 获取子节点

ØchildNodes获得所有子节点、包括文本节点（空格、换行）、注释节点等

Øchildren 父元素.children 结果是伪数组

得到当前标签所有的直接子元素，后代选择器找不到，得到的是一个数组（伪数组），数组的每一个值都是标签对象

children是一个属性不能带（）仅获得所有元素节点，第一个子节点和最后一个子节点

l查找兄弟的属性 属性不加括号

previousSibling　　找到上一个兄弟节点，包含文本、注释等节点

previousElementSibling　　找到上一个兄弟元素，只找到元素

nextSibling　　　　　　　找到下一个兄弟节点，包含文本、注释等节点

nextElementSibling　　　　　　找到下一个兄弟元素，只找到元素

事件流

嵌套的结构执行事件过程中的一种现象：事件捕获和事件冒泡

冒泡特点：当一个元素执行事件的时候，如果事件依然向外传递执行，那么这就是时间冒泡

捕获：嵌套关系的标签中，必须是addeventlistener注册的事件

l捕获阶段是 从父到子 冒泡阶段是从子到父

给元素注册事件后，不管通过那种方法注册默认都是事件冒泡现象，只有设置addeventlistener第三个参数为布尔值设置捕获或者冒泡现象true是捕获从外到内，false冒泡从内到外，事件冒泡是默认存在的，它指的是：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件，事件捕获需要写对应代码才能看到效果ØaddEventListener第三个参数传入true代表是捕获阶段触发（很少使用）若传入false代表冒泡阶段触发，默认就是false 若是用 L0 事件监听，则只有冒泡阶段，没有捕获阻止事件流动因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

l代码：

l说明：

ØaddEventListener第三个参数传入true代表是捕获阶段触发（很少使用）

Ø若传入false代表冒泡阶段触发，默认就是false

Ø若是用 L0 事件监听，则只有冒泡阶段，没有捕获

• 阻止事件流动因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

l若想把事件就限制在当前元素内，就需要阻止事件流动

l阻止事件流动需要拿到事件对象

e.stopPropagation()

l语法：

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

• l鼠标经过事件：

  Ømouseover 和 mouseout 会有冒泡效果

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

事件委托

l事件委托是利用事件流的特征解决一些开发需求的知识技巧事件委托其实是利用事件冒泡的特点，给父级元素加事件事件对象.target 可以获得真正触发事件的元素，如果不是动态创建的根据js解析，用户执行事件，页面结束，并且没创建绑定事件就会报错

应用场景：一般是元素包含通过js动态创建的且元素还要设置事件

实现方式：事件交给父元素（必须是存在的不是js动态创建的） 通过事件对象 e.target 得到真正的事件源

标签对象.nodename='值'大写的，判断事件源，解决点击空白报错

第五天

元素滚动、资源加载、大小、位置、动画等DOM知识点、能够编写可交互网页特效

应用：将js代码写到html结构前面的时候，必须要用load事件window注册load事件
onload 事件会在页面或图像加载完成后立即发生等页面把所有dom元素全部加载结束再执行，还有一种domcontentloaded不包含图片仅只是dom节1、网页当中凡是写路径的都会再network被查看2、凡是有路径的都需要有外部资源有时候我们需要加载资源之后再去做某些事情，那么此时就需要加载事

注意：通过window来监听页面加载的情况 window.addEventListener(‘load’, function () {});页面所以的外部资源加载完成才会触发、和顺序无关

element.addEventListener(‘load’,function () {});

事件要添加给事件源、那如何为页面滚动添加事件可以为document添加上事件、也可以给window添加事件,如果某个元素内容移除要添加滚动事件，就给元素添加

• 监听页面的滚动，window 和 document 均可监听该事件在滚动监听的过程中能实时获取页面滚动的距，实质就是滚动条位置发生改变的时候
• element.addEventListener(‘scroll’, function () {});

语法：element.clientWidth、element.offsetWidth、element.scrollWidth

clientWidth/Height 动态获取元素的大小，包含内边距。注：如有滚动条需要减掉滚动条的宽度，chrome 滚动条宽 15px

offsetWidth/Height 动态获取元素的大小，包含内边距和边框

l关于元素盒子的大小还有一种形式，那就是内容溢出产生滚动时的情形：

scrollWidth/Height 动态获取元素滚动区域的大小

注意：如果一个盒子既没有滚动条、边框、内填充，那么三个获取的都相同

元素.offsetTop、元素.offsetLeft

• offsetLeft/Top 相对最近的已定位的祖先元素的位置，当所有祖先都未定位则参照 body 元素，fixed 定位的元素始终参照浏览器窗口。offsetParent 获取元素位置时所参照的祖先元素偏移位置
• 获取页面滚动距离是在滚动事件里，设置不需要滚动事件

元素.scrollTop、元素.scrollLeft

注意：页面被卷去的头部window.pageYoffset

​ 元素被卷去的头部元素.scrollTop

电梯导航：滚动条的滚动距离就是盒子距离页面顶的距离 自定义属性建立联系

拖拽移动案例

    // 获取盒子在页面的移动的最大距离

        // 鼠标在盒子内的坐标

            // 盒子移动的距离=鼠标移动后相对整个页面的位置坐标-鼠标在盒子内的坐标

            // 三元表达式限制移动距离，移动的范围 两种情况 超出移动范围为最大移动距离  小于移动范围为0   

            // 记得加单位

• scrollLeft/Top 动态获取元素滚动的位置

  scrollLeft/Top 允许被赋值动态改变元素的滚动位置

  获取整个页面的滚动位置通过 documentElement 元素

  document.documentElement .scrollTop=对象.offsetTOP

  新的方法 getBoundingClientRect 获取相对于浏览器窗口左上角的位置及元素的大小

  // 元素加定位不影响其他元素

  ​ // 按下鼠标鼠标给页面注册移动事件鼠标抬起移除移动事件

  扩展：还有一对属性 clientLeft 和 clientHeight 实际指的是边框的宽度。

  window.setTimeout(function () {}, 时间); window可以省略，可以直接写函数名或者函数不带括号

  延时函数是实现程序暂缓执行的技术，如下代码所示：

  延时函数和间歇函数统称为定时器或定时任务，间歇函数的特征是不间断的重复执行，而延时函数只会执行 1 次。

  结合递归函数可以使用 setTimeout 实现 setInterval 一样的功能！！！

  一个值得关注的细节是 setInterval 间歇函数也会延时执行，如下所示：

  setTimeout 结合递归函数创建定时任务时，是立即执行定的

  因此实践中经常使用 setTimeout 配合递归来替代 setInterval ！清楚定时器

  • 总结：

    setInterval 的特征是重复执行（每隔一段时间调用一次函数，默认无限次），首次执行会延时

    setTimeout 的特征是延时执行(等待一段时间自动调用)，只执行 1 次

    setTimeout 结合递归函数，能模拟 setInterval 重复执行，且不会有延时但是要有停止 return 停止递归函数 可以用cleartimeout（定时器id）停止

setInterval 、 setTimeout 常被用于创建 JavaScript 动画。aniamte.css

创建定时任务不间断的更改元素的样式，实现动画效果借助定时器创建动画效时常使用 setTimeout

requestAnimationFrame 是一个类似 setTimeout 的函数，在频繁操作 DOM 时的性能更好，但是浏览器的兼容性较 setTimeout 稍差。

l频繁操作 DOM 时，requestAnimationFrame 比 setTimeout 和 setInterval 性能更好

基于 JavaScript DOM 操作实现的动画多采用 requestAnimationFrame

cancelAnimationFrame 停止执行 requestAnimationFrame

操作标签类名 clasList.方法（）方法内用逗号隔开 类名都是不加点的

对象元素.classList.add('类名不加点'，'类名2不加点') 不会覆盖原标签的类名 添加多个用逗号隔开如''类名1不加点'，'类名2不加点……

对象元素.classList.remove('类名不加点')

对象元素.classList.toggle（'要切换的类名不加点'） 如果标签身上有对应的类名，则切换类名的时候删除，如果没有就添加

对象.classList.contains('要判断的类名') 返回的是布尔值 有true 无false

键盘事件

​ keydown用户按下键盘按钮时候触发的事件（键盘上的任何一个按键都可以）

keyup 用户离开键盘按钮的时候触发的事件

keypress 用户按下键盘按钮的时候触发的事件（键盘上的默写功能组合键 方向键、esc键、alt键、ctrl键、shift键不能执行）

根据事件对象的code或者key或者keyCode都可以记录事件信息

e.code/e.key 返回的是字符串

e.keyCode 返回数字

​ // 空格是32

​ // document.documentElement.onkeydown=function(e){

​ // console.log(e.keyCode);

​ // }

• 小鸟案例

1. 元素要有定位

2. 元素的初始位置一般为0，0

3. 设置元素每次移动的距离

4. 获取元素

5. 注册键盘事件，html或者body onkeydown

6. 获取按键信息并判断

7. 向右走初始位置+每次移动的距离 向左走初始位置-每次移动的距离（去除元素的旋转类）（并且利用classlist.add() y轴旋转） 向上走初始位置-每次移动的距离

   这里不能用e.toggle切换

向下走初始位置+每次移动的距离

8. 赋值+单位

• 同意案例

  / 分析:
  	// 最后效果: 控制按钮是否能够点击 (操作按钮 disabled属性)
  	// 如果复选框的状态是选中状态,则按钮可以点击 disabled = false;
  	// 如果复选框的状态是未被选中,则按钮不能点击 disabled = true;
  	// 需要在点击复选框的时候,判断复选框的状态, 实现最后按钮是否可以点击...

第六天

动画特效

再加两个属性 backward/forward结束动画位置停留 alternate逆波

通过js调用网页的动画类样式/ js调用第三方动画样式

// 1. 通过js调用第三方动画

​ // 步骤:

​ // 1. 先去找一个第三方一个网站: https://animate.style/(英文)

​ // 2. 下载对应的动画css文件

​ // 3. 在网页中引入对应的css文件

​ // 4. 标签身上必须设置 animate__animated 类名

​ // 5. animate__rotateIn 类名是真正的动画类名

js封装一个动画效果 页面的元素高度为0，修改元素高度、让元素自动的对高度进行累加，定时器、延时器

正则表达式

正则表达式（正则）是专来概括描述字符串格式的代码片段实质定义一个规则，用于：查找、替换、验证表单字符串 过滤(替换)页面中的敏感词 提取(京东搜索演示)特点等 。在js中,正则表达式也是一个对象.

1. 灵活性,逻辑性强
2. 可以快速实现匹配字符串的控制
3. 实际开发中,一般都是复制写好的正则表达式,能够根据需求会修改即可

正则表达式使用

1.1 创建

let 变量= / /;不需要加引号 推荐

let 变量=new RegExp()

1.2检测正则表达式

正则表达式.test(str);test()正则表达式中一个方法,小括号内除变量外必须加引号，检测是否匹配正则规则,返回布尔类型的结果,true 表示符合 false 表示不符合
exec()正则表达式中一个方法,检测是否匹配正则规则, 如果不匹配返回null

3. 正则表达式字符

1.0正则表达式基本语法介绍

简单模式:
let reg = /abc/;

1.1 边界符

• ^ 符号

^: 匹配输入的开始,以谁开始

• $ $: 匹配输入的结束
• /^abc$/有且只有一个abc不能有其他任何值

1.2字符集

• [] 不要随便加空格

  []: 一个字符集合。匹配方括号中的任意字符
  
  例如:
  //规则: 匹配 abcd中任意一个字符
  let reg = /[abcd]/;
  let str = 'a';
  console.log(reg.test(str)); 
  
  let str = 'b';
  console.log(reg.test(str)); 
  
  let str = 'ac';
  console.log(reg.test(str)); 
  
  let str = 'bfc';
  console.log(reg.test(str));  
  
  let str = 'efg';
  console.log(reg.test(str)); 
  
  let str = 'Abc';
  console.log(reg.test(str)); 
  
  let str = 'A';
  console.log(reg.test(str)); 
  

• 思考题:

  //规则: 适配以a,b,c三个中任意一个开始
  let reg = /^[abc]/;
  let str = 'a';
  console.log(reg.test(str)); 
  
  
  let str = 'buffa';
  console.log(reg.test(str)); 
  
  let reg = /^[abc]/;
  let str = 'cccc';
  console.log(reg.test(str)); 
  
  
  
  //规则: 必须是 a, b, c 三个字母中的一个,有其他的不行, 三选一
  let reg = /^[abc]$/;
  let str = 'cccc';
  console.log(reg.test(str)); 
  
  
  let str = 'a';
  console.log(reg.test(str)); 
  
  let str = 'ab';
  console.log(reg.test(str)); 
  

• [-]

  [-]: 表示范围
   
  例如:
  //规则: 匹配 a 到 f 之间的任意一个
  let reg = /[a-f]/;	
  let str = 'abcdef';
  console.log(reg.test(str));  
  
  let str = 'ag';
  console.log(reg.test(str));
  
  let str = 'g';
  console.log(reg.test(str)); 
  
  
  举一反三:
  //规则: 以 a - f 中任意一个字母开头
  let reg = /^[a-f]/;
  let str = 'ga';
  console.log(reg.test(str));
  
  let str = 'afa';
  console.log(reg.test(str)); 
  
  let str = 'efg';
  console.log(reg.test(str));
  
  
  //规则: 必须是 a - f 中的任意一个字母, 多选一
  let reg = /^[a-f]$/;
  let str = 'efg';
  console.log(reg.test(str));
  
  let str = 'af';
  console.log(reg.test(str)); 
  
  let str = 'c';
  console.log(reg.test(str));
  

  /^[1]$/
  结果必须是一个0-9的数字多选一

• 课堂案例

• 不能乱加空格

  1. 用户名中包含 a到z 或者 A 到Z 正则如何写?

  let reg =/[a-zA-Z]/
  

  2. 用户名中只能包含 a到z 或者 A到Z 中的一个字母 正则如何写?

  let reg = /^[a-zA-Z]$/
  

  3. 用户名中包含 a到z 或者 A 到Z 或者 0 - 9 正则如何写?

     let reg = /[a-zA-Z0-9]/
     

• ^取反

  //规则: 匹配只要不是 abc这三个字母中的任何一个都可以
  let reg = /[^abc]/;
  let str = 'a';
  console.log(reg.test(str));  
  
  let str = 'd';
  console.log(reg.test(str)); 
  
  let str = 'def';
  console.log(reg.test(str)); 
  
  
  举一反三:
  //规则: 只要不是以 a b c 三个字母中任意一个字母开头就可以
  let reg = /^[^abc]/;
  let str = 'def';
  console.log(reg.test(str)); 
  
  let str = 'abc';
  console.log(reg.test(str)); 
  
  let str = 'cawq';
  console.log(reg.test(str));
  

1.3量词符

• *

  出现次数 >= 0
  
  //匹配: 字母a出现次数 >= 0     备注:要出现只能出现a,不能有其他的字符
  let  reg = /^a*$/;
  let str = 'aaa';
  console.log(reg.test(str));
  
  
  let str = '';
  console.log(reg.test(str)); 
  
  
  let str = 'bcf';
  console.log(reg.test(str));
  
  
  举一反三:
  
  //匹配: a - z 中任意一个字母出现次数 >=0次
  let  reg = /^[a-z]*$/;
  let str = '123abcdef123';
  console.log(reg.test(str)); 
  
  let str = '';
  console.log(reg.test(str));
  
  let str = 'aabbcc';
  console.log(reg.test(str));
  

• +

  出现次数 >= 1
  
  //匹配: 字母a出现次数 >= 1    要出现只能出现字母a
  let  reg = /^a+$/;
  let str = 'bcf';
  console.log(reg.test(str));  
  
  let str = '';
  console.log(reg.test(str)); 
  
  let str = 'aabb';
  console.log(reg.test(str)); 
  
  let str = 'aa';
  console.log(reg.test(str));
  
  
  举一反三:
  //匹配: a - z 中任意一个字母出现次数最少一次
  let reg = /^[a-z]+$/;
  let str = '';
  console.log(reg.test(str));
  
  
  let str = 'abcdef';
  console.log(reg.test(str));
  
  
  let str = 'aabbccddeeff';
  console.log(reg.test(str)); 
  
  
  let str = '123abcdef123';
  console.log(reg.test(str));
  

• ?

  出现次数 1次 或者 0次
  // 匹配: 字母a出现1次或者0次
  let reg = /^a?$/;
  let str = 'aa';
  console.log(reg.test(str)); 
  
  let str = 'a';
  console.log(reg.test(str));
  

• {n}

  出现具体n次
  
  //匹配: 字母a必须出现3次
  let reg = /^a{3}$/;
  let str = 'a';
  console.log(reg.test(str));
  
  let str = 'aa';
  console.log(reg.test(str)); 
  
  let str = 'aaa';
  console.log(reg.test(str)); 
  
  let str = '';
  console.log(reg.test(str)); 
  
  let str = 'bdc';
  console.log(reg.test(str)); 
  

• {n,}

  出现大于等于 n 次
  
  // 匹配: 字母a出现的次数大于等于3
  let reg = /^a{3,}$/;
  let str = 'a';
  console.log(reg.test(str)); 
  
  let str = 'aa';
  console.log(reg.test(str)); 
  
  let str = 'aaa';
  console.log(reg.test(str)); 
  
  let str = 'aaaaaa';
  console.log(reg.test(str)); 
  

• {n,m}

  出现次数大于等于 n 小于等于m
  // 匹配: 字母a出现的次数大于等于3小于等于4次
  let reg = /^a{3,4}$/;
  let str = 'aaa';
  console.log(reg.test(str)); 
  
  
  let str = 'aaaa';
  console.log(reg.test(str)); 
  
  
  let str = 'aa';
  console.log(reg.test(str)); 
  
  let str = 'aaadc';
  console.log(reg.test(str)); 
  
  let str = '';
  console.log(reg.test(str)); 
  
  注意: 数字之间不能出现空格
  
  
  举一反三:
  //匹配: 字母 a-c 出现总次数等于4   (从字面a-c中只能选4个值)
   let reg = /^[a-c]{4}$/;
   let str = 'aaaa';
   console.log(reg.test(str));
  
    let str = 'aaaabbbb';
    console.log(reg.test(str));
  
   let str = 'abca';
   console.log(reg.test(str));
  
   let str = 'aacc';
   console.log(reg.test(str));
  
  //匹配: 字母 a - c 出现总次数大于等于4   (从字面a-c中最少选出4个)
  let reg = /^[a-c]{4,}$/;
  let str = 'aaa';
  console.log(reg.test(str));  
  
  let str = 'aaaabbbb';
  console.log(reg.test(str));  
  
  let str = 'abcdffff';
  console.log(reg.test(str)); 
  
  let str = 'hjkl';
  console.log(reg.test(str));  
  
  
  //匹配: 字母 a -c 出现次总次数 大于等于2 小于等于5  (从字面a-c中最少选出2个到5个)
  let reg = /^[a-c]{2,5}$/;
  let str = 'aaa';
  console.log(reg.test(str)); 
  		  
  let str = 'aaaabbbb';
  console.log(reg.test(str)); 
  
  let str = 'hjkl';
  console.log(reg.test(str));
  
  
  思考:
  //匹配: abc三个字母中c连续出现3次
  let reg = /^abc{3}$/;
  let str = 'abcabcabc';
  console.log(reg.test(str));
  
  let str = 'abccc';
  console.log(reg.test(str));
  
  
  //匹配: abc三个字母整体连续出现三次
  let reg = /^(abc){3}$/;
  let str = 'abcabcabc';
  console.log(reg.test(str));
  

  总结：

  + 表示重复至少 1 次

  ? 表示重复 0 次或1次

  * 表示重复 0 次或多次

  {m, n} 表示复 m 到 n 次

  ?=n
  以目标值为参考匹配任何其后紧接指定字符串 n 的字符串。？>=n
  ?!n
  匹配任何其后没有紧接指定字符串 n 的字符串
  ？>=n
  匹配任何前跟紧接指定字符串 n 的字符串。

4. 用户名案例

1.1 呈现要求

• 如果用户名输入合法,则提示信息为:用户名合法,颜色为绿色

• 如果用户名输入不合法,提示用户名不符合规范,颜色为红色

1.2具体实现

// 要求:用户名只能为英文字母,数字,下划线组成,且用户名长度为6-16位
let reg = /^[a-zA-Z0-9_]{6,16}$/;
//获取当前输入框
let int = document.querySelector('input');
int.onfocus = function() {
	this.value = '';
}
int.onblur = function() {
	let v = this.value;
	if(reg.test(v)) {
	 	this.style.borderColor = 'green';
	 }else {
	 	this.style.borderColor = 'red';
	 	this.value = '输入有误';
	 }
}

5.预定义类

备注: 使用在线工具演示即可

1.1 数字类

\d :  匹配0-9之间的任意一个数字  相当于 [0-9]
\D:   匹配0-9以外的所有字符     相当于[^0-9]

1.2 字符类

\w :  匹配任意的字母,数字和下划线  相当于 [a-zA-Z0-9_]
\W :  除所有的字母,数字,和下划线以外的字符  相当于 [^a-zA-Z0-9_]

1.3特殊符号(了解)

\s: 匹配空格(包含换行符,制表符,空格符等)    相当于[\t\r\n\v\f]
\t 制表符
\r 回车
\n  换行
\v查找垂直制表符。
\f查找换页符
\S: 匹配除特殊字符外      相当于[^\t\r\n\v\f]

6.正则替换

1.1语法

字符串.replace(正则表达式,替换为哪个值);
字符串.replace(要被替换的值,替换后的值);

1.2正则参数

//[switch]
g : 全局匹配 (global)  
如果不带g，正则过程中字符串从左到右匹配，找到第一个符合条件的即匹配成功，返回
如果带g，则字符串从左到右，找到每个符合条件的都记录下来，直到字符串结尾位置
例如:
let reg = /abc/g;
let str = 'abcdefabc';
console.log(reg.exec(str));
console.log(reg.exec(str));

i: 忽略大小写 (ignore)
例如: 
let reg = /a/i;
console.log(reg.test('A'));

gi: 全局忽略大小写
let reg = /a中国/gi;
console.log(reg.test('A中国'));

课堂案例:
let tar = document.querySelector('textarea');
let btn = document.querySelector('input');
let div = document.querySelector('div');
btn.onclick = function() {
	let v = tar.value;
	let reg = /[日本狗2B]/gi;
	v = v.replace(reg, '*');
	div.innerHTML = v;
}

一般量词符和字符集搭配，

易错点：单个字符即普通的正则表达式没有字符集就不用量词符，有全局匹配就不用 /a/g a不能加量词符或不全局（不现实）就能替换成功

表单类型

取值 number 时，只允许输入数值，提供动态调整数值的功能，可配合 step、min、max 属性使用
取值 url 时，在手机端应用时会弹出方便输入网址的键盘
取值 email 时，在手机端应用时会弹出方便输入邮箱的键盘
取值 date 时，出现自由选择时间的弹层
取值 tel 时，在手机端应用时会弹出数字键盘
取值 range 时，可拖动的滑块，可配合 min、max 属性使用
取值 color 时，弹出颜色拾色器，允许用户自选颜色
取值 file 时，选择待上传的本地文件
注：表单类型比较多，先有个初步印象，不必强行记忆！

1. 表单验证是检测用户输入信息合法的重要手段，HTML 表单自带了表单验证的功能 pattern="^\d{6}$"

2. 表单类型为 url 的表单中输入非地址格式内容时无法提交表单
   表单类型为 email 的表单中输入非邮箱格式内容时无法提交表单
   require 属性要求当前表单不能为空，必须输入合法信息
   pattern 属性允许自定义正则表达式，验证输入信息是否合法
   novalidate 属性关闭表单的验证功能
   注：表单默认的验证功能非常强大，但仍然存在局限性，现实开发中更多的编写 JavaScript 或借助一些插件完成表单的验证功能。

3. 表单 DOM 元素的 value 属性动态获取表单中输入的信息，也可以为 value 直接赋值动态设置表单中的值
   单选框、复选框、下拉框 value 属性必须要有值，value 属性的值即为对应表单的数据
   单选框、复选框的 value 属性没有值时，获得到的数据为 on
   单选框、复选框的 checked 属性值决定了其选中状态，为 true 时为选中状态，为 false 时不选中

4. 焦点事件是与鼠标的光标相关的事件类型，一般为 input 或 textarea 元素添加事件监听。
   focus 监听光标是否进入 input 或 textarea 元素
   blur 监听光标是否离开 input 或 textarea 元素

5. input 事件监听文本的输入，一般用于 input 或 textarea
   change 事件只有表单元素中的内容发生改变时才会被触发
   大部分表单元素都能够监听 change 事件

6. 获取焦点的元素能够监听用户的键盘输入
   keydown 用户按下键盘任意键的一瞬间触发
   keyup 用户接下键盘任意键后抬起的一瞬间触发
   keypress 介于 keydown 和 keyup 之间被触发，只针对能输出字符的按键生效
   事件对象 ev.keyCode 可以获得按键字符对应的 ASCII 码
   注：document 对象能够监听用户按键相关事件。

7. 只有按钮的 type 属性值为 submit 时表单才会被提交，同时触发 submit 事件事件对象 ev.preventDefault 用来阻止表单真正被提交（提交表单页面会被刷新）

8. 注：网页中一些操作带有默认行为，如点击链接会跳转、右键鼠标会现菜单等，使用事件对象 ev.preventDefault 能够阻止默认行为发生。autofocus 属性使表单自动获得焦点，只能有其中一个生效，写多个时只有第1个生效
   autocomplete 属性提供记录提交历史的功能，方便下次快速输入，默认开启其值为 on，关闭时赋值为 off

window对象

window 对象：js的顶级对象 包含了navigation、location、document、history、screen

1. window对象包含了document对象，也属于window对象的一个属性
2. 自定义普通函数，默认也被添加到了window中
3. 如果顶级对象的方法可以省略window不写
4. 对象中方法的this指向对象
   事件中的this指向事件源
   普通函数的this 指向window

• window属性

1. window.Navigator属性
   虽然是window的属性但是对象形式，记录浏览器自身的相关信息appVersion: 记录浏览器及系统基本信息 其中有一个online属性，即navigation.online，记录当前网络状态的布尔值只能获取不能设置局域网也是联网状态

2. window.history属性
   记录当前浏览器访问过的历史记录

   window.history.back（）后退历史记录

   window.history.forward() 上一步历史记录

   window.history.go() 历史记录 括号内是正数表示前进历史记录 如果是负值表示后退

3. window.lacation属性
   本身也是对象，用来获取或设置网页地址它拆分并保存了 URL 地址的各个组成部分 获取：location.href设置：location.href='地址'
   设置好路径地址后如果想在新窗口打开用window.open('地址') 打开扩展window.close('地址') 关闭

window方法

1. alert（）警告框

2. confirm（）可选询问

3. prompt（）输入框

   window事件

   load事件
   当页面中所有的标签全部加载完成后
   load 会等待所有的资源（图片、样式、脚本、音视频等）加载完毕后才触发
   DOMContentLoaded 只要 HTML 结构加载完毕就会被触发，该事件通过 document 进行监听
   将 script 标签写在 head 标签中时，查找 DOM 会失败
   由于 DOMContentLoaded 比 load 更早被触发，因此通常推荐使用 load 事件
   beforeunload事件
   当页面发生跳转、关闭、刷新的时候触发该事件
   提高用户体验
   页面需要有a标签
   在事件中通过默认行为提示信息
   事件对象参数.returnValue=""
   固定用法
   scroll事件
   拖拽滚动条触发的事件
   滚动事件
   应用：网页的返回顶部，隐藏显示，搜索区域
   滚动条位置发生改变的时候
   window注册scroll事件
   网页上必须要有滚动条
   获取滚动的距离必须在滚动事件中获取
   document.documentElement.scrollTop
   scrollTop是属性不加()获取，返回顶部就让他赋值等于0
   rasize事件
   页面或者浏览器窗口大小发生改变的事件适配时常用rem原理
   在窗口变化监听的过程中能实时获取视口的大小
   documentElement 能够获得视口的大小

案例：适配

// rem计算根标签的文字字体大小 视口的宽度/人为规定的一个份数获取视口宽度 let html_v=html.offsetWidth

出于安全性考虑 JavaScript 无法直接读取用户本地的文件，必须由用户主动选择才能对本地文件进行读取，有两种方式引导用户做出选择： 和文件拖拽

文件上传

文件上传效果推荐
必须有file按钮
注册change事件
内容发生改变才会触发的事件
在change事件中获取用户上传的文件
通过事件源.files得到伪数组获取文件第一个值列表用下标为0 this.files[0] ,
读取文件创建一个用来读取的文件的对象固定写法 let reader=new FileReader()
然后通过读取对象的一个方法开始读取文件
reader.readerAsDataURL(用户上传的文件)
这样通过读取对象读取文件把用户上传的文件读取成路径
路径有了，但是要读取必须在load事件中，所以可以在读取对象添加load事件并通过
读取对象.result 获取读到的结果
还有可以把结果在页面显示通过img的src属性
如果用户上传的不是图片而是其他的文件
文本
读取文件中的文件内容
只是改了一下读取方式
reader.readAsText(文件)
用户上传的文件编码格式改为utf-8

拖拽读取

drag 拖
drop 拽
先准备目标区域
俩个拖拽事件中阻止浏览器默认跳转行为
事件对象参数.preventDefault() 如果要使用浏览器默认事件行为的要把阻止行为写在事件后面，注意顺序，顺序会影响整个页面的加载
将文件拖到目标区域后，给目标区域注册 dragover事件 拖
当文件拖拽到目标区域后松开鼠标，给目标区域注册drop 事件（释放）拽
当鼠标松开后先获取文件
事件对象参数的属性
e.dataTransfer.files[0]
这一点和上面不一样
获取对象后读取对象
创建读取对象
读取文件
获取读取结果

---

1. 0-9 ↩︎