日期对象

实例化

时间对象实例化的两种方式：

• 获得当前时间：const date = new Date()
• 获得指定时间：const date = new Date('2008-08-08')

时间对象方法

时间戳

获得时间戳的三种方式：

• 对象方法：date.getTime()
• 隐式转换：const timeStamp = +new Date()
• 无需实例化：Date.now()

节点操作

DOM 节点

有三种节点类型：

• 元素节点
• 属性节点
• 文本节点

查找节点

父节点

1
2
3
4

// 获取子节点
const son = document.querySelector('.dad')
// 根据子节点获取父节点
console.log(son.parentNode)

子节点

1
2
3
4
5

// 获取父节点
const dad = document.querySelector('.dad')
// 有两种方式获取子节点
// 元素.childNodes：获得所有子节点、包括文本节点（空格、换行）、注释节点等
// 元素.children：1.仅获得所有元素节点 2. 返回的还是一个伪数组

兄弟节点

• 下一个兄弟节点：nextElementSibling 属性
• 上一个兄弟节点：previousElementSibling 属性

增加节点

craeteElement

新增 DOM 节点分为两个步骤：

• 创建节点：createElement('标签名')
• 插入节点：
  • 父元素.appendChild(要插入的元素)
  • 父元素.insertBefore(要插入的元素, 在哪个元素前面)

cloneNode

语法：元素.cloneNode(false)

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

注意事项：

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

删除节点

• 若一个节点在页面中已不需要时，可以删除它
• 在 JavaScript 原生 DOM 操作中，要删除元素必须通过父元素删除

语法：父元素.removeChild(要删除的元素)

注意事项：

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

M 端事件

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 同时使用的时候,类名需要注意区分