前端(API)学习笔记(CLASS 4):进阶

1、日期对象

日期对象:用来表示事件的对象

作用:可以得到当前系统时间

1、实例化

在代码中发现了new关键字,一般将这个操作称为实例化

创建一个时间对象并获取时间

获得当前时间

javascript 复制代码
const date=new Date()

使用日志查看,得到的结果为:

获得指定时间

javascript 复制代码
const date=new Date('2008-8-8')
console.log(date)
2、日期对象的方法

使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式

|---------------|-----------|----------------|
| 方法 | 作用 | 说明 |
| getFullYear() | 获得年份 | 获取四位年份 |
| getMonth() | 获得月份 | 取值为0~11 |
| getDate() | 获取月份中的每一天 | 不同月份取值也不相同 |
| getDay() | 获取星期 | 取值为0~6(星期天为0) |
| getHours() | 获取小时 | 取值为0~23 |
| getMinutes() | 获取分钟 | 取值为0~59 |
| getSeconds() | 获取秒 | 取值为0~59 |

例如:

javascript 复制代码
        let date=new Date()
        console.log(date.getFullYear())
        console.log(date.getMonth()+1)
        console.log(date.getDate())
        console.log(date.getDay())
        console.log(date.getHours()+1)
        console.log(date.getMinutes()+1)
        console.log(date.getSeconds()+1)

运行结果为:

3、时间戳

使用场景:如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成

时间戳:是指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计算时间的方式

算法:

将来的时间戳-现在的时间戳=剩余时间毫秒数

剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间

比如 将来的时间戳 2000ms-现在的时间戳 1000ms=1000ms

1000ms转换为就是 0小时0分1秒

三种方式获取时间戳:

1、使用getTime()方法

javascript 复制代码
const date=new Date()
console.log(date.getTime())

2、简写 +new Date()

无需实例化

javascript 复制代码
console.log(+new Date())

3、使用Date.now()

无需实例化

但是只能得到当前的时间戳,而前面两种可以返回指定时间的时间戳

javascript 复制代码
console.log(Date.now())

2、节点操作

1、DOM节点

DOM树里每一个内容都称为节点

节点类型:

元素节点

所有的标签 比如 body、div

html是根节点

属性节点

所有的属性 比如href

文本节点

所有的文本

其他

2、查找节点

节点关系:针对的找亲戚返回的都是对象

父节点

子节点

兄弟节点

1、父节点查找:

parentNode属性,最近一级的父节点

返回最近一级的父节点 找不到返回为null

javascript 复制代码
子元素.parentNode

例如:

javascript 复制代码
        const son=document.querySelector('.son')
        son.addEventListener('click',function() {
            console.log('11')
            son.parentNode.style.display='none'
        })

当点击子元素的时候,就可以操控父元素进行操作,无需再次获取父元素的DOM对象

2、子节点查找

childNodes属性:获取所有的子节点,包括文本节点(空格、换行)、注释节点等

children属性(重点):仅获得所有元素节点、返回的还是一个伪数组,最近一级的子节点

javascript 复制代码
父元素.children
3、兄弟关系查找

下一个兄弟节点:nextElementSibling属性

上一个兄弟节点:previousElementSibling属性

3、增加节点

很多情况下,我们需要在页面中增加元素

比如,点击发布按钮,可以新增一条信息

一般情况下,我们新增节点,按照如下操作:

创建一个新的节点

把创建的新的节点放入到指定的元素内部

1、创建节点

创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点

创建元素节点方法:

javascript 复制代码
//创造一个新的元素节点
document.createElement('标签名')
2、追加节点

要想在界面看到,还得插入到某个父元素中

插入到父元素的最后一个子元素:

javascript 复制代码
//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面

javascript 复制代码
//插入到某个子元素的前面
父元素.insertBefore(要插入的元素,在哪个元素前面)

特殊情况下,我们新增节点,按照如下操作:

复制一个原有的节点

把复制的节点放入到指定的元素内部

3、克隆节点
javascript 复制代码
//克隆一个已有元素节点
元素.cloneNode(布尔值)

cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值

若为true,则代表克隆时会包含后代节点一起克隆

若为false,则代表克隆时不包含后代节点

默认为false

4、删除节点

若一个节点在页面中已不需要时,可以删除它

在JavaScript原生DOM操作中,要删除元素必须通过父元素删除

语法:

javascript 复制代码
父元素.removeChild(要删除的元素)

注:

如不存在父子关系则删除不成功

删除节点和隐藏节点有区别的:隐藏节点还是存在的,但是删除,则从html中删除节点

3、M端事件

移动端也有自己独特的地方。比如触屏事件touch,Android和IOS都有

触摸事件touch(也称触摸事件)

touch对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作

常见的触摸事件如下:

|------------|------------------|
| 触屏touch事件 | 说明 |
| touchstart | 手指触摸到一个DOM元素时触发 |
| touchmove | 手指在一个DOM元素上滑动时触发 |
| touchend | 手指从一个DOM元素上移开时触发 |

4、swiper插件

插件:就是别人写好的一些代码,我们只需要复制对应的代码,就可以实现对应的效果

主要找到package文件夹

相关推荐
云上艺旅14 小时前
K8S学习之基础七十四:部署在线书店bookinfo
学习·云原生·容器·kubernetes
你觉得20514 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
A旧城以西16 小时前
数据结构(JAVA)单向,双向链表
java·开发语言·数据结构·学习·链表·intellij-idea·idea
无所谓จุ๊บ16 小时前
VTK知识学习(50)- 交互与Widget(一)
学习·vtk
FAREWELL0007516 小时前
C#核心学习(七)面向对象--封装(6)C#中的拓展方法与运算符重载: 让代码更“聪明”的魔法
学习·c#·面向对象·运算符重载·oop·拓展方法
吴梓穆16 小时前
UE5学习笔记 FPS游戏制作38 继承标准UI
笔记·学习·ue5
Three~stone17 小时前
MySQL学习集--DDL
数据库·sql·学习
齐尹秦17 小时前
HTML 音频(Audio)学习笔记
学习
V---scwantop---信17 小时前
英文字体:大胆都市街头Y2Y涂鸦风格品牌海报专辑封面服装字体 Chrome TM – Graffiti Font
笔记·字体
瞌睡不来17 小时前
(学习总结32)Linux 基础 IO
linux·学习·io