webAPI第四天-Dom节点&移动端滑动

日期对象

实例化

1. 日期对象
目标：掌握日期对象，可以让网页显示日期
 日期对象：用来表示时间的对象
 作用：可以得到当前系统时间
学习路径：
1. 实例化
2. 日期对象方法
3. 时间戳

1.1 实例化

目标：能够实例化日期对象
 在代码中发现了 new 关键字时，一般将这个操作称为实例化
 创建一个时间对象并获取时间
 获得当前时间

const date = new Date()

获得指点时间

const date = new Date(‘2008-8-8’)
console.log(date)

日期对象方法

目标：能够使用日期对象中的方法写出常见日期
使用场景：因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式

使用方法：const n = new Date()
                 let h = n.getHours()   //获取小时

时间戳

目标：能够获得当前时间戳
 使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
 什么是时间戳:
 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
 算法：
 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
 剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
 比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
 1000ms 转换为就是 0小时0分1秒

三种方式获取时间戳：
1. 使用 getTime() 方法

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

2. 简写 +new Date()

console.log(+new Date())

3. 使用 Date.now()
 无需实例化
 但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳

console.log(Date.now())

实例化日期对象怎么写？
 new Date()
2. 日期对象方法里面月份和星期有什么注意的？
 月份是0~11, 星期是 0~6
3. 获取时间戳有哪三种方式？重点记住那个？
 date.getTime()
 +new Date()
 Date.now()
 重点记住 +new Date() 因为可以返回当前时间戳或者指定的时
间戳

节点操作

DOM 节点

1.1 DOM节点

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

2.2 查找节点

目标：能够具备根据节点关系查找目标节点的能力
 关闭二维码案例：
点击关闭按钮， 关闭的是二维码的盒子， 还要获取erweima盒子
 思考：
 关闭按钮 和 erweima 是什么关系呢？
 父子关系
 所以，我们完全可以这样做：
 点击关闭按钮， 直接关闭它的爸爸，就无需获取erweima元素了
 节点关系：针对的找亲戚返回的都是对象
 父节点
 子节点
 兄弟节点

 父节点查找：

 parentNode 属性
 返回最近一级的父节点 找不到返回为null

子元素.parentNode

 子节点查找：

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

父元素.children

兄弟关系查找：

1. 下一个兄弟节点
 nextElementSibling 属性
2. 上一个兄弟节点
 previousElementSibling 属性

2.3 增加节点

目标：能够具备根据需求新增节点的能力
 很多情况下，我们需要在页面中增加元素
 比如，点击发布按钮，可以新增一条信息
 一般情况下，我们新增节点，按照如下操作：
 创建一个新的节点
 把创建的新的节点放入到指定的元素内部
 学习路线：
 创建节点
 追加节点

1.创建节点

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

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

//插入到父元素的最后一个子元素:
父元素.appendChild(div)

父元素.insertBefore(要插入的元素，在那个元素前面)

元素.cloneNode(布尔值)

删除节点

目标：能够具备根据需求删除节点的能力
 若一个节点在页面中已不需要时，可以删除它
 在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
 语法

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

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

M端事件

目标：了解M端常见的事件
移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
 触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔
）对屏幕或者触控板操作。
 常见的触屏事件如下：

JS插件

 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
 学习插件的基本过程
 熟悉官网,了解这个插件可以完成什么需求
https://www.swiper.com.cn/
 看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
 查看基本使用流程 https://www.swiper.com.cn/usage/index.html
 查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html
 注意: 多个swiper同时使用的时候, 类名需要注意区分