webAPI第四天-Dom节点&移动端滑动
日期对象
实例化
1. 日期对象
目标:掌握日期对象,可以让网页显示日期
日期对象:用来表示时间的对象
作用:可以得到当前系统时间
学习路径:
1. 实例化
2. 日期对象方法
3. 时间戳
1.1 实例化
目标:能够实例化日期对象
在代码中发现了 new 关键字时,一般将这个操作称为实例化
创建一个时间对象并获取时间
获得当前时间
const date = new Date()
获得指点时间
const date = new Date(‘2008-8-8’)
console.log(date)
日期对象方法
目标:能够使用日期对象中的方法写出常见日期
使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式
使用方法:const n = new Date()
let h = n.getHours() //获取小时
时间戳
目标:能够获得当前时间戳
使用场景: 如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成
什么是时间戳:
是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式
算法:
将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间
比如 将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
1000ms 转换为就是 0小时0分1秒
三种方式获取时间戳:
1. 使用 getTime() 方法
const date = new Date()
console.log(date.getTime())
2. 简写 +new Date()
console.log(+new Date())
3. 使用 Date.now()
无需实例化
但是只能得到当前的时间戳, 而前面两种可以返回指定时间的时间戳
console.log(Date.now())
实例化日期对象怎么写?
new Date()
2. 日期对象方法里面月份和星期有什么注意的?
月份是0~11, 星期是 0~6
3. 获取时间戳有哪三种方式?重点记住那个?
date.getTime()
+new Date()
Date.now()
重点记住 +new Date() 因为可以返回当前时间戳或者指定的时
间戳
节点操作
DOM 节点
1.1 DOM节点
目标:能说出DOM节点的类型
DOM节点
DOM树里每一个内容都称之为节点
节点类型
元素节点
所有的标签 比如 body、 div
html 是根节点
属性节点
所有的属性 比如 href
文本节点
所有的文本
其他
2.2 查找节点
目标:能够具备根据节点关系查找目标节点的能力
关闭二维码案例:
点击关闭按钮, 关闭的是二维码的盒子, 还要获取erweima盒子
思考:
关闭按钮 和 erweima 是什么关系呢?
父子关系
所以,我们完全可以这样做:
点击关闭按钮, 直接关闭它的爸爸,就无需获取erweima元素了
节点关系:针对的找亲戚返回的都是对象
父节点
子节点
兄弟节点
父节点查找:
parentNode 属性
返回最近一级的父节点 找不到返回为null
子元素.parentNode
子节点查找:
childNodes
获得所有子节点、包括文本节点(空格、换行)、注释节点等
children 属性 (重点)
仅获得所有元素节点
返回的还是一个伪数组
父元素.children
兄弟关系查找:
1. 下一个兄弟节点
nextElementSibling 属性
2. 上一个兄弟节点
previousElementSibling 属性
2.3 增加节点
目标:能够具备根据需求新增节点的能力
很多情况下,我们需要在页面中增加元素
比如,点击发布按钮,可以新增一条信息
一般情况下,我们新增节点,按照如下操作:
创建一个新的节点
把创建的新的节点放入到指定的元素内部
学习路线:
创建节点
追加节点
1.创建节点
即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
创建元素节点方法:
//创造一个新的元素节点
document.createElement('标签名')
2.追加节点
要想在界面看到,还得插入到某个父元素中
//插入到父元素的最后一个子元素:
父元素.appendChild(div)
插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素,在那个元素前面)
特殊情况下,我们新增节点,按照如下操作:
复制一个原有的节点
把复制的节点放入到指定的元素内部
克隆节点
元素.cloneNode(布尔值)
cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为false
删除节点
目标:能够具备根据需求删除节点的能力
若一个节点在页面中已不需要时,可以删除它
在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
语法
父元素.removeChild(要删除的元素)
注:
如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none) 有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点
M端事件
目标:了解M端常见的事件
移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
触屏事件 touch(也称触摸事件),Android 和 IOS 都有。
touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔
)对屏幕或者触控板操作。
常见的触屏事件如下:
JS插件
插件: 就是别人写好的一些代码,我们只需要复制对应的代码,就可以直接实现对应的效果
学习插件的基本过程
熟悉官网,了解这个插件可以完成什么需求
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同时使用的时候, 类名需要注意区分
版权声明:
作者:zhuim521
链接:https://zhuimwl.com/115.html
来源:追梦博客
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论