JS DAY4 日期对象与节点
一·日期对象
日期对象:用来表示时间的对象
作用:可以得到当前系统时间
1.实例化
在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间
时间必须实例化
获得当前时间
const date = new Date()获得指定时间
const date = new Date('2008-8-8')
console.log(date)2.时间对象方法
目标:能够使用日期对象中的方法写出常见日期
使用场景:因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
3.时间戳
使用场景:如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成
什么是时间戳:
>是指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())二·节点操作
1.DOM节点
> DOM树里每一个内容都称之为节点
节点类型
>元素节点
所有的标签 比如 body、 div·html是根节点
>属性节点
所有的属性 比如 href
> 文本节点
所有的文本
>其他
2.查找节点
节点关系:针对的找亲戚返回的都是对象
父节点查找
parentNode 属性
返回最近一级的父节点 找不到返回为null
子元素.parentNode子节点查找
childNodes
获得所有子节点、包括文本节点(空格、换行)、注释节点等
children 属性(重点)
仅获得所有元索节点
返回的还是一个伪数组
父元素.children兄弟节点查找
1.下一个兄弟节点
nextElementSibling属性
2.上一个兄弟节点
previousElementSibling 属性
3.增加节点
1.创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法:
//创造一个新的元素节点
document.createElement('标签名')2.追加节点
要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素:
//插入到这个父元素的最后
父元素.appendchild(要插入的元素)插入到父元素中某个子元素的前面
// 插入到某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素前面）3.增加节点
特殊情况下，我们新增节点，按照如下操作
复制一个原有的节点
把复制的节点放入到指定的元素内部
克隆节点
//克隆一个已有的元素节点
元素.cloneNode(布尔值)cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点R
默认为false
4.删除节点
若一个节点在页面中已不需要时，可以制除它
在JavaScript 原生DOM操作中，要删除元素必须通过父元素制除
语法
父元素.removeChild(要删除的元素)如不存在父子关系则删除不成功
制除节点和隐藏节点(display:none)有区别的:隐藏节点还是存在的，但是制除，则从html中制除节点
三·M端事件
移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件)，Android 和 I0S 都有。
触屏事件 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同时使用的时候,类名需要注意区分