web APIs-day04

1.日期对象

用来表示时间的对象

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

1.1实例化

• 在代码中发现了new关键字，一般将这个操作称为实例化

• 创建一个时间对象并获取时间

• 获得当前时间

const date = new Date()

• 获得指定时间

const date = new Date('2008-8-8')

1.2日期对象方法

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

1.3时间戳

• 使用场景：如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

• 什么是时间戳

• 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

• 算法：

• 将来的时间戳-现在的时间戳=剩余时间毫秒数

• 剩余时间毫秒数 转换为 剩余时间的年月日时分秒就是倒计时时间

三种方式获取时间戳

1. 使用getTime()方法

//注：此方法必须实例化
const date = new Date()
console.log(date.getTime())

2. 简写+newDate()

console.log(+newDate())

3. 使用Date.now()

1. 无需实例化，但是只能得到当前的时间戳，前面两种可以返回指定时间的时间戳

console.log(Date.now())

2.节点操作

2.1DOM节点

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

• 节点类型

• 元素节点

• 所有的标签 比如body、div

• html是根节点

• 属性节点

• 所有的属性 比如href

• 文本节点

• 所有的文本

• 其他

2.2查找节点

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

• 父节点

• 子节点

• 兄弟节点

• 父节点查找：

• parentNode属性

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

子元素.parentNode

• 子节点查找：

• childNodes

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

• children属性（重点）

• 仅获得所有元素节点

• 返回的还是一个伪数组

父元素.children

• 兄弟关系查找：

• 下一个兄弟节点

• nextElementSibling属性

• 上一个兄弟节点

• previousElementSibling属性

2.3增加节点

• 一般情况下，新增节点按照如下操作：

• 创建一个新的节点

• 把创建的新节点放入到指定的元素内部

• 1.创建节点

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

• 创建元素节点方法：

document.createElement('标签名')

• 2.追加节点

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

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

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

• 插入到父元素中某个子元素的前面

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

2.4克隆节点和删除节点

• 克隆节点

cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值

• 若为true，则代表克隆时会包含后代节点一起克隆

• 若为false，则代表克隆时不包含后代节点

• 默认为false

//克隆一个已有的元素节点
元素.cloneNode(布尔值)

• 删除节点

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

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

• 语法

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

• 注：

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

• 删除节点和隐藏节点（display:none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

3.M端事件

• 触屏事件touch（也称触摸事件）Android和IOS都有

• touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

• 常见的触屏事件如下：

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

4.swiper插件

• 学习插件的基本过程

• 熟悉官网，了解这个插件可以完成什么需求

swiper官网

• 看在线演示，找到符合自己需求的demo

在线演示

• 查看基本使用流程

基本使用流程

• 查看API文档，去配置自己的插件

APi文档

• 注意：多个swiper同时使用的时候，类名需要注意区分