JavaScript 学习笔记（WEB APIs Day4）

最新推荐文章于 2024-09-14 18:52:56 发布

TigerZ 生信宝库

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量913

点赞数 21

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45851732/article/details/135739529

版权

前端专栏收录该内容

28 篇文章 1 订阅

订阅专栏

这篇文章是关于JavaScript学习笔记，详细介绍了日期对象的实例化、方法、时间戳获取，DOM节点的操作，包括查找、增加、删除，以及移动端事件和JS插件Swiper的基础使用。

摘要由CSDN通过智能技术生成

「写在前面」

本文为 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 日期对象

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