「写在前面」
本文为 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）
目录
-
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) // 8
1.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 综合案例
P125：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=125
P126：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=126
本文由 mdnice 多平台发布
