写在前面
本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。推荐先按顺序阅读往期内容：\
1. JavaScript 学习笔记（Day1） \
2. JavaScript 学习笔记（Day2） \
3. JavaScript 学习笔记（Day3） \
4. JavaScript 学习笔记（Day4） \
5. JavaScript 学习笔记（Day5） \
6. JavaScript 学习笔记（WEB APIs Day1） \
7. JavaScript 学习笔记（WEB APIs Day2） \
8. JavaScript 学习笔记（WEB APIs Day3）
::: block-1
目录
- 1 日期对象
- 2 节点操作
- 3 M端事件
- 4 JS插件
- 5 综合案例
:::
1 日期对象
1.1 实例化
P117：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=117
在代码中发现了 new 关键字时，一般将这个操作称为实例化
创建一个时间对象并获取时间
// 1．得到当前时间
const date = new Date()
console.log(date)
// 2．指定时间
const date1 = new Date('2022-5-1 08:30:00')
console.log(date1)1.2 日期对象方法
因为日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
| 方法 | 作用 | 说明 |
|---|---|---|
| getFullYear() | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为 0 ~ 11 |
| getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay() | 获取星期 | 取值为 0 ~ 6 |
| getHours() | 获取小时 | 取值为 0 ~ 23 |
| getMinutes() | 获取分钟 | 取值为 0 ~ 59 |
| getSeconds() | 获取秒 | 取值为 0 ~ 59 |
例：
// 获得日期对象
const date = new Date('2022-8-8')
// 使用里面的方法
console.log(date.getFullYear()) // 2022
console.log(date.getMonth() + 1) // 81.3 时间戳
P118：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=118
什么是时间戳:
是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
三种方式获取时间戳：
// 1.使用 getTime() 方法
const date = new Date()
console.log(date.getTime())
// 2.简写 +new Date() 推荐
console.log(+new Date()) // 当前时间戳
console.log(+new Date('2022-4-1 18:30:00')) // 指定日期时间戳
// 3.使用 Date.now()
console.log(Date.now())P119：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=119
2 节点操作
2.1 DOM 节点
P120：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=120
DOM节点
- DOM树里每一个内容都称之为节点
节点类型
元素节点
- 所有的标签 比如 body、 div
- html 是根节点
属性节点
- 所有的属性 比如 href
文本节点
- 所有的文本
- 其他
2.2 查找节点
父节点查找：
- parentNode 属性
- 返回最近一级的父节点，找不到返回为 null
子节点查找：
- children 属性 （重点）
- 仅获得所有元素节点
- 返回的还是一个伪数组
兄弟关系查找：
- 下一个兄弟节点
- nextElementSibling 属性
- 上一个兄弟节点
- previousElementSibling 属性
例：
<body>
<div class= "yeye ">
<div class="dad">
<div class="baby">x</div>
</div>
</div>
<script>
const baby = document.querySelector('.baby')
console.log(baby) // 返回 baby div
console.log(baby.parentNode) // 返回 dad div
console.log(baby.parentNode.parentNode) // 返回 yeye div
</script>
</body>2.3 增加节点
P121：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=121
1.创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：
document.createElement('标签名')2.追加节点
要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素：
父元素.appendChild(要插入的元素)插入到父元素中某个子元素的前面：
父元素.insertBefore(要插入的元素, 在哪个元素前面)3.克隆节点
P122：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=122
元素.colneNode(布尔值)cloneNode 会克隆出一个跟原标签一样的元素，括号内传入布尔值
- 若为true，则代表克隆时会包含后代节点一起克隆
- 若为false，则代表克隆时不包含后代节点
- 默认为false
2.4 删除节点
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法：
父元素.removeChild(要删除的元素)3 M端事件
P123：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=123
移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。
- touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
- 常见的触屏事件如下：
| 触屏touch事件 | 说明 |
|---|---|
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |
4 JS插件
P124：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=124
- 插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
学习插件的基本过程
- 熟悉官网,了解这个插件可以完成什么需求 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同时使用的时候, 类名需要注意区分
5 综合案例
<center>结束</center>
本文由mdnice多平台发布
程序员
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。