前端WebAPIs回顾3

日期对象

用来表示时间的对象

实例化

使用new关键字将时间变为一个对象

// GET NOW TIME
const date=new Date()
// GET CUSTOM TIME
const date1=new Date('2005-2-19')

日期对象方法

getFullYear():获取四位年份
getMonth()：获取月份（0-11）
getDate():获取号数
getDay():获取星期（0-6）
getHours():获取小时（0-23）
getMinutes():获取分钟（0-59）
getDSeconds():获取秒（0-59）
快速转化年月日：toLocaleString()

时间戳

是指1970年1月1日00时00分00秒起至现在的毫秒数，确定时间的标识。
可以用来倒计时效果，将来的时间戳-现在的时间戳=剩余时间毫秒数
getTime(): 对实例化后的时间对象调用该方法，获得时间对象的时间戳。

const date=new Date()
const Time=date.getTime()

+new Date()
获取时间戳，实际是将字符型时间对象转为数字型时间戳。

console.log(+new Date('2005-2-19'))

Date.now()
获取当前时间戳

DOM节点

DOM树内的每个内容都是节点，比如元素节点（标签）、属性节点（属性，如src、class等）、文本节点（文本）。
以下操作针对元素节点

查找节点

父节点查找

const cls=document.querySelector('.cls')
const clsParent=cls.parentNode//return cls`s parentNode

子节点查找
childNodes获得所有子节点，包括文本节点等等
children仅仅获得所有元素节点，返回伪数组

const cls=document.querySelector('.cls')
const clsChildren=cls.children//return cls`s all childrenNode

兄弟节点查找
nextElementSibling下一个兄弟节点
previousElementSibling上一个兄弟节点

const cls=document.querySelector('.cls')
const clsNextBro=cls.nextElementSibling//return cls`s NextBro
const clsPreviousBro=cls.previousElementSibling//return cls`s PreviousBro

增加节点

createElement创建元素节点
**appendChild(ele)**增加子节点
**insertBefore(insertEle,endEle)**增加子节点到某子节点前

// Create Element
const div=document.createElement('div')
const div1=document.createElement('div')
const cls=document.querySelector('.cls')
div.innerHTML='I am examp children'
div1.innerHTML='I am examp children1'
cls.appendChild(div)
cls.insetBefore(div1,div)//cls.insetBefore(div1,cls.children[0])

克隆节点

**Ele.cloneNode(boolean)**会克隆一个与原标签一样的元素，括号内传入true时代表克隆该节点的所有包括后代节点，false时仅克隆该节点标签本身（不包含内容），默认为false

const cls=document.querySelector('.cls')
const div=cls.cloneNode(true)
cls.insertBefore(div,cls.children[0])

删除节点

删除节点需要通过父元素删除

cls.removeChild(cls.children[0])

M端事件

M端即移动端

touch（触摸事件）

touchstart:手指触摸到一个DOM元素时触发
touchmove:手指在一个DOM元素上滑动触发
touchend：手指从一个DOM元素上移开触发

Swiper

Swiper