WebAPIs 第四天

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/88845.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！