Web APIs -day4
目标: 了解DOM节点的增删改查，掌握利用数据操作页面，完成移动端通讯录案例
日期对象
日期对象：用来表示日期和时间的对象
作用：可以得到当前系统日期和时间
Date是JavaScript内置对象
日期对象使用必须先实例化：创建一个日期对象并获取时间
在代码中发现了 new 关键字时，一般将这个操作称为实例化
实例化
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<script>
const date = new Date()
console.log(date)
const date1 = new Date('2099-12-12 08:08:08')
console.log(date1)
</script>
</body>
|
格式化日期对象
| 方法 |
作用 |
说明 |
| getFullYear() |
获得年份 |
获取四位年份 |
| getMonth() |
获得月份 |
取值为 0 ~ 11 |
| getDate() |
获取月份中的每一天 |
不同月份取值也不相同 |
| getDay() |
获取星期 |
取值为 0 ~ 6 |
| getHours() |
获取小时 |
取值为 0 ~ 23 |
| getMinutes() |
获取分钟 |
取值为 0 ~ 59 |
| getSeconds() |
获取秒 |
取值为 0 ~ 59 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <body>
<script>
const myDate = new Date()
console.log(myDate.getFullYear())
console.log(myDate.getMonth() + 1)
console.log(myDate.getDate())
console.log(myDate.getDay())
console.log(myDate.getHours())
console.log(myDate.getMinutes())
console.log(myDate.getSeconds())
console.log(`现在的日期是:${myDate.getFullYear()}年${myDate.getMonth() + 1}月${myDate.getDate()}日`)
</script>
</body>
|
格式化日期对象另外方法
| 方法 |
作用 |
说明 |
| toLocaleString() |
返回该日期对象的字符串（包含日期和时间） |
2099/9/20 18:30:43 |
| toLocaleDateString() |
返回日期对象日期部分的字符串 |
2099/9/20 |
| toLocaleTimeString() |
返回日期对象时间部分的字符串 |
18:30:43 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <body>
<div class="box"></div>
<script>
const date = new Date()
console.log(date.toLocaleString())
console.log(date.toLocaleDateString())
console.log(date.toLocaleTimeString())
function getDateTime() {
const date = new Date()
return date.toLocaleString()
}
document.querySelector('.box').innerText = getDateTime()
setInterval(function () {
document.querySelector('.box').innerText = getDateTime()
}, 1000)
</script>
</body>
|
时间戳
什么是时间戳:
- 是指1970年01月01日00时00分00秒起至现在的总毫秒数(数字型)，它是一种特殊的计量时间的方式
使用场景： 计算倒计时效果，需要借助于时间戳完成
算法：
- 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
- 剩余时间毫秒数转换为年月日时分秒就是倒计时时间
1
2
3
4
5
6
7
8
9
|
const date = new Date()
console.log(date.getTime())
console.log(+new Date())
console.log(Date.now())
|
获取时间戳的方法，分别为 getTime 和 Date.now 和 +new Date()
DOM 节点
**DOM树：**DOM 将 HTML文档以树状结构直观的表现出来，我们称之为 DOM 树 或者 节点树
**节点（Node）**是DOM树(节点树)中的单个点。包括文档本身、元素、文本以及注释都属于是节点。
元素节点（重点）
- 所有的标签 比如 body、 div
- html 是根节点
- 属性节点
- 文本节点
查找节点
利用节点关系查找节点，返回的都是对象
有了查找节点可以使我们选择元素更加方便
父节点
语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <body>
<div class="pop">
<a href="javascript:;" class="close"></a>
</div>
<script>
const closeBtn = document.querySelector('.close')
console.log(closeBtn.parentNode)
closeBtn.addEventListener('click', function () {
this.parentNode.style.display = 'none'
})
</script>
</body>
|
子节点
语法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
</ul>
<script>
const ul = document.querySelector('ul')
console.log(ul.children)
const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.previousElementSibling)
console.log(li2.nextElementSibling)
console.log(ul.children[0])
console.log(ul.children[2])
</script>
</body>
|
兄弟节点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
</ul>
<script>
const li2 = document.querySelector('ul li:nth-child(2)')
console.log(li2.previousElementSibling)
console.log(li2.nextElementSibling)
console.log(ul.children[0])
console.log(ul.children[2])
</script>
</body>
|
增加节点
很多情况下，我们需要在页面中增加元素
一般情况下，我们新增节点，按照如下操作：
- 创建一个新的节点
- 把创建的新的节点放入到指定的元素内部
-
父元素最后一个子节点之后，插入节点元素
-
父元素第一个子元素的之前，插入节点元素
如下代码演示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <body>
<ul>
<li>我是小li</li>
</ul>
<script>
const li = document.createElement('li')
li.innerHTML = '我是放到后面的'
console.log(li)
const ul = document.querySelector('ul')
ul.append(li)
const firstli = document.createElement('li')
firstli.innerHTML = '我是放到前面的'
ul.prepend(firstli)
</script>
</body>
|
删除节点
若一个节点在页面中已不需要时，可以删除它
语法：
- 把对象从它所属的 DOM 树中删除
- 删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从DOM树中删除
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!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>删除节点</title>
</head>
<body>
<div class="remove">我要删除</div>
<div class="none">我要隐藏</div>
<script>
const remove = document.querySelector('.remove')
remove.remove()
const none = document.querySelector('.none')
none.style.display = 'none'
</script>
</body>
</html>
|
M端事件
M端(移动端)有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS都有。
touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。
常见的触屏事件如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <body>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
box.addEventListener('touchstart', function () {
console.log('我开始摸了')
})
box.addEventListener('touchmove', function () {
console.log('我一直摸')
})
box.addEventListener('touchend', function () {
console.log('我摸完了')
})
</script>
</body>
|
JS插件
插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
学习插件的思路：
1.看官网。了解这个插件可以完成什么需求 https://www.swiper.com.cn/
2.查看基本使用流程 。 https://www.swiper.com.cn/usage/index.html
3.写个小demo。看在线演示,找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html
4.应用的开发中。
AlloyFinger
AlloyFinger 是腾讯 AlloyTeam 团队开源的超轻量级 Web 手势插件，为元素注册各种手势事件
github地址：https://github.com/AlloyTeam/AlloyFinger
使用步骤：
- 下载js库：http://alloyteam.github.io/AlloyFinger/alloy_finger.js
- 将AlloyFinger库引入当前文件：<scriptsrc=“alloy_finger.js”>
或者使用在线地址：
-
配置
1
2
3
4
5
| new AlloyFinger(element, {
swipe: function (e) {
}
})
|
