1.日期对象
2.节点操作
3.M端事件
4.JS插件
一.日期对象
- 实例化
- 时间对象方法
- 时间戳
日期对象：用来表示时间的对象
作用：可以得到当前系统时间
1.1 实例化
① 概念：在代码中发现了new关键字时，一般将这个操作称为实例化
② 创建一个时间对象并获取时间
- 获取当前时间
const date = new Date()- 获得指定时间
const date = new Date('2022-01-05 08:28')1.2 时间对象方法
日期对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
const date = new Date()
console.log(date.getFullYear())
console.log(date.getMonth() + 1)
let h = date.getHours()
let m = date.getMinutes()
let s = date.getSeconds()1.3 时间戳
① 概念：指的是1970年01月01日00分00秒起到现在的毫秒数，是一种特殊的计量时间的方式
② 算法
- 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数转换为剩余时间的年月日就是倒计时时间
- 1秒 = 1000毫秒
③ 获取时间戳
- 使用getTime() 方法 (需要实例化)
const date = new Date()
console.log(date.getTime())- 简写 new Date() （无需实例化）
console.log(+new Date())- 使用Date.now() （无需实例化）
但是只能得到当前的时间戳，前两种可以得到指定时间的时间戳
console.log(Date.now())二.节点操作
- DOM节点
- 查找节点
- 增加节点
- 删除节点
2.1 DOM节点
① DOM节点：DOM树里面的每一个内容都称为节点
② 节点类型：
- 元素节点：所有的标签，比如div body
- 属性节点：所有的属性，比如href
- 文本节点: 所有的文本
- 其他
2.2 查找节点
① 节点关系
- 父节点
（1）parentNode属性
(2）返回的最近一级的父节点，找不到返回为null
(3) 语法：节点.parentNode
const baby = document.querySelector('.son')
console.log(baby.parentNode.parentNode)- 子节点
（1）childNodes 获得所有子节点，包括文本节点（空格，换行），注释节点等
（2）children属性 ：仅获得所有元素节点，返回一个伪数组
（3）语法：节点.children
const ul = document.querySelector('ul')
// 获取所有子节点
console.log(ul.children) //选择最近一级孩子
- 兄弟节点
(1) 下一个兄弟节点：nextElementSibling 属性
（2）上一个兄弟节点：previousElementSibling 属性
const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.nextElementSibling)
console.log(li2.previousElementSibling)2.3 增加节点
① 创建一个新节点
- 概念：创造一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
- 创建元素节点方法： document.createElement('标签名')
const div = document.createElement('div')
console.log(div)② 追加节点（还需要插入到某个父元素中）
- 插入到父元素的最后一个子元素: appendChild
const div = document.createElement('div')
console.log(div)
document.body.appendChild(div)- 插入到父元素的某个子元素的前面: insertBefore
const ul = document.querySelector('ul')
const li = document.createElement('li')
ul.insertBefore(li, ul.children[0])2.4 克隆节点
① 语法： 元素.cloneNode(布尔值)
② cloneNode 会克隆出一个跟原标签一样的元素，括号中传入布尔值
- 如果传入的是true,则代表克隆时会包含后代节点一起克隆
- 如果传入的是false，则表示克隆时不包含后代节点
- 默认为false
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
const ul = document.querySelector('ul')
const li1 = ul.children[0].cloneNode(true)
ul.appendChild(li1)
</script>2.5 删除节点
① 删除元素必须通过父元素删除
② 语法： 父元素.removeChild(要删除的元素)
③ 注意
- 如果不存在父子关系则删除不成功
三.M端事件
① 移动端也有自己独特的地方，比如触屏事件touch,android和ios都有
② touch对象代表一个触摸点，触摸点可能是一根手指，也可能是一根触摸笔，触屏事件可响应用户手指对屏幕或者触控板操作
③ 常见的触屏事件
const div = document.querySelector('div')
div.addEventListener('touchstart', function() {
console.log('开始触摸')
})
div.addEventListener('touchmove', function() {
console.log('一直触摸')
})
div.addEventListener('touchend', function() {
console.log('停止触摸')
})四. JS插件 -- swiper
① 插件的概念：就是别人写好的一些代码，我们只需要复制对应的代码，就可以实现对应的效果② 学习插件过程
- 熟悉官网，了解这个插件可以完成什么需求
- 看在线演示，找到符合自己需求的demo
- 查看基本使用流程
- 查看API文档，去配置自己的插件
- 多个swiper同时使用的时候，类名需要注意区分
swipper的 使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/swiper.min.css">
<style>
.box {
width: 600px;
height: 200px;
background-color: pink;
margin: 100px;
}
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
</div>
<script src="./js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
autoplay: {
delay: 1000,//1秒切换一次
// 鼠标点击或触摸之后，继续自动播放
disableOnInteraction: false,
},
// 键盘
keyboard: {
enabled: true,
onlyInViewport: true,
},
});
</script>
</body>
</html>
![[数据分析与可视化] Python绘制数据地图5-MovingPandas绘图实例](https://img-blog.csdnimg.cn/img_convert/27d0e108fa1ee2c9ea997ab4c1812057.png)
