JavaScript（Web APIs）

这个阶段两天也能看完

---

目录

壹_DOM-获取元素

        00、获取DOM元素（根据CS选择器来获取DOM元素）

        01、修改元素内容

        02、修改CSS

        03、H5自定义属性

        04、定时器

贰_DOM-事件基础

        00、事件监听

        01、事件类型

        02、事件对象

        03、环境对象

        04、回调函数

叁_DOM-事件进阶

        00、事件流

        01、事件解绑

        02、阻止默认行为

        03、其他事件类型

        04、元素的尺寸与位置（属性）

肆_DOM-节点操作

        00、日期对象

        01、节点操作

        02、M端事件

        03、JS插件

伍_BOM-操作浏览器

        00、JS执行机制

        01、location对象的常用属性和方法

        02、navigator对象的常见属性

        03、history对象的常见方法

        04、本地存储

        05、利用方法map()和join()拼接字符串

陆_正则表达式

        00、语法

        01、元字符（特殊字符）

        02、修饰符

---

壹_DOM-获取元素

00、获取DOM元素（根据CS选择器来获取DOM元素）

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

        document.querySelector('css选择器')【返回CSS选择器匹配的第一个对象】

2>选择匹配的多个元素

        document.querySelectorAll('css选择器')【返回CSS选择器匹配的对象集合】

3>css选择器补充知识（优先级逐渐升高）

        type选择器：标签名

        class选择器： .类名

        id选择器：#i

01、修改元素内容

obj.innerText=值【只识别文本】

obj.innerHTML=值【会识别标签】

02、修改CSS

1>通过style属性：obj.style.样式属性=值

2>通过类名(className)

        obj.className=css类名

        【让对象的类指向写好的CSS代码；css类名会覆盖之前的类名，css类名可以有多个】

3>通过classList【避免直接通过类名修改会覆盖之前的类】

        obj.classList.add('类名')【追加类】

        obj.classList.remove('类名')【删除类】

        obj.classList.toggle('类名')【切换类，有则删、无则加】

03、H5自定义属性

1>html5推出自定义属性：data-

2>查询标签自定义属性：

        obj.dataset或obj.dataset.属性名【后者的属性名为data-后面的部分】

04、定时器

1>开启定时器

        setInterval(函数名,间隔时间)【间歇函数】

        setTimeout(回调函数，等待时间)【延时函数】

        【间隔时间以毫秒为单位1s=1000ms】

        【定时器返回一个id数字】

2>关闭定时器【关闭指定id的定时器】

        clearInterval(定时器id)

        clearTimeout(定时器id)

贰_DOM-事件基础

00、事件监听

obj.addEventListener('事件类型',要执行的函数)

【addEventListener可多次绑定一个对象的同一事件，对象发生一个事件会产生多个效果】

01、事件类型

1>鼠标事件

        click鼠标点击

        mouseenter鼠标经过

        mouseleave鼠标离开

2>焦点事件（表单获得光标）

        focus获得焦点

        blur失去焦点

3>键盘事件

        Keydqwn键盘按下触发

        Keyup键盘抬起触发

4>文本事件

        input用户输入事件

02、事件对象

事件绑定的函数的第一个参数就是事件对象

一般命名为event、ev、e

03、环境对象

定义：函数内部特殊的变量 this，指向一个对象

原则：谁调用，this就是谁

04、回调函数

定义：将函数 A做为参数传递给函数 B，称函数A为回调函数

叁_DOM-事件进阶

00、事件流

事件流定义：事件执行过程中的流动路径，分为捕获阶段和冒泡阶段

事件冒泡：一个元素触发事件后，会依次向上调用所有父级元素的同名事件

阻止冒泡：obj.stopPropagation()【阻止上级触发事件；写在监听函数中，obj用e替代】

01、事件解绑

obj.removeEventListener('事件类型',要执行的函数)【匿名函数无法解绑】

02、阻止默认行为

obj.preventDefault()【写在监听函数中，obj用e替代】

03、其他事件类型

1>等待加载：load等待对象加载完毕

2>元素滚动：scroll滚动

---

        获取位置：属性scrollLeft和scrollTop表示内容往左(上)滚出去看不到的距离

        获取html对象：document.documentElement【网页滚动，是html对象在滚动】

3>页面尺寸：resize页面尺寸改变

04、元素的尺寸与位置（属性）

client-系列属性（不包含边框）

offset-系列属性（包含边框）（eg. offsetTop上边距）

肆_DOM-节点操作

00、日期对象

1>实例化：const date=new Date()

2>常用方法：

        .getFullYear()【年份】

        .getMonth()【0~11】

        .getDate()【一个月中的第几天】

        .getDay()【0~6】

        .getHours/Minutes/seconds()【0~23/59】

3>时间戳：

        定义：1970年1月1日0时0分0秒至今的毫秒数，是一种特殊的计时方式

        获取方式：时间戳=+new Date()【实参传入时间可以获取指定时间戳】

01、节点操作

1>DOM节点类型：元素节点（重点）、属性节点、文本节点

2>查找节点

        父节点：子节点.parentNode

        子节点：父节点.children【获得所有元素节点，返回一个伪数组】

        兄弟节点：节点.nextElementSibling、节点.previousElementSibling【下(上)一个兄弟节点】

3>增加节点

        创建节点：document.createElement('标签名')

        追加节点：

                父节点.appendchild(要插入的元素)【追加在父节点的子结点队尾】

                父节点.insertBefore(要插入的元素,在哪个元素前)【追加在指定子结点前面】

        克隆节点：节点.cloneNode(布尔值)【默认为false，代表克隆时不包含后代节点和标签内容】

4>删除节点：父元素.removeChild(要删除的元素)

02、M端事件

touch触屏

        -start【手指触摸到一个 DOM 元素时触发】

        -move【手指在一个 DOM 元素上滑动时触发】

        -end【手指从一个 DOM 元素上移开时触发】

03、JS插件

Swiper滑动特效插件

伍_BOM-操作浏览器

00、JS执行机制

同步：任务按顺序执行

异步：任务并发执行

01、location对象的常用属性和方法

location.href【URL地址，对其赋值可跳转页面】

location.search【地址中的参数，?后的部分】

location.hash【地址中的哈希值，#后的部分】

location.reload()【刷新页面，传入参数true表示强制刷新】

02、navigator对象的常见属性

通过userAgent属性检测浏览器的版本与平台

03、history对象的常见方法

.back()

.forward()

.go()【参数为正数表示前进】

04、本地存储

1>注意：本地存储只能存储字符串

2>常用方法

        localStorage.setltem(key,value)【存/改】

        localStorage.getItem(key)【取】

        localStorage. removeItem(key)【删】

3>存储复杂数据类型

        JSON.stringify(复杂数据类型)【将复杂数据类型转换成JSON字符串,再存储到本地】

        JSON.parse(JSON字符串)【将JSON字符串转换成复杂数据类型】

05、利用方法map()和join()拼接字符串

1>map

        定义：遍历处理数组数据，返回新数组

        使用：arr.map(function(ele,index)return 修改后的数组元素)

2>join

        定义：把数组全部元素转换成一个字符串

        使用：arr.join(字符串)【字符串作为返回值各元素间分隔符，默认逗号分隔】

陆_正则表达式

00、语法

1>声明：const 变量=/正则表达式/

2>匹配

        变量.test(被检查字符串)【返回布尔值】

        变量.exec(被检查字符串)【返回数组】

01、元字符（特殊字符）

1>边界符【必须用什么开头/结尾】

        ^e【以e开头】

        e$【以e结尾】

2>量词【表示重复次数】

        *【重复次数∈[0,+∞)】

        +【重复次数∈[1,+∞)】

        ?【重复次数∈[0,1]】

        {n}【重复次数=n】

        {n,}【重复次数∈[n,+∞)】

        {n,m}【重复次数∈[n,m]】

3>字符类

        [] 匹配字符集合【匹配括号中任意一个字符即可】

        [a-z]【表示全部小写字母】

        [^a-z]【表示除了小写字母以外的字符】

        预定义:某些常见模式的简写方式【大写表示取反】

                \d：[0-9]

                \w：[A-Za-z0-9_]

                \s：[\t\r\n\v\f]

4>精确匹配

        ^e$【以同一个e开头结尾】

        ^e+量词$【以e开头e结尾，中间不能有别的】

02、修饰符

1>语法：/正则表达式/修饰符

2>分类：

        i：匹配时字母不区分大小写

        g：匹配所有满足正则表达式的结果