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

1、日期对象

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

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

1、实例化

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

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

        获得当前时间

const date=new Date()

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

        获得指定时间

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

例如:

        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()方法

const date=new Date()
console.log(date.getTime())

2、简写 +new Date()

无需实例化

console.log(+new Date())

3、使用Date.now()

无需实例化

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

console.log(Date.now())

2、节点操作

1、DOM节点

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

节点类型:

        元素节点

                所有的标签 比如 body、div

                html是根节点

        属性节点

                所有的属性 比如href

        文本节点

                所有的文本

        其他

2、查找节点

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

父节点

子节点

兄弟节点

1、父节点查找:

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

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

子元素.parentNode

例如:

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

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

2、子节点查找

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

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

父元素.children
3、兄弟关系查找

下一个兄弟节点:nextElementSibling属性

上一个兄弟节点:previousElementSibling属性

3、增加节点

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

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

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

        创建一个新的节点

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

1、创建节点

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

创建元素节点方法:

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

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

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

//插入到这个父元素的最后
父元素.appendChild(要插入的元素)

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

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

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

        复制一个原有的节点

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

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

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

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

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

        默认为false

4、删除节点

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

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

语法:

父元素.removeChild(要删除的元素)

注:

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

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

3、M端事件

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

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

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

常见的触摸事件如下:

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

4、swiper插件

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

主要找到package文件夹

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

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

相关文章

力扣刷题:二叉树OJ篇(上)

大家好,这里是小编的博客频道 小编的博客:就爱学编程 很高兴在CSDN这个大家庭与大家相识,希望能在这里与大家共同进步,共同收获更好的自己!!! 目录 1.单值二叉树(1)题目描…

4.1.2 栈和队列(二)

文章目录 队列的定义队列的基本运算队列的存储结构 队列的定义 队列先进先出,仅允许一端插入、一端删除 队尾(Rear),插入 队头(Front),删除 队列的基本运算 队列的基本运算 初始化空队列:initQueue(Q)判队空:isEmpty…

【HeadFirst系列之HeadFirst设计模式】第1天之HeadFirst设计模式开胃菜

HeadFirst设计模式开胃菜 前言 从今日起,陆续分享《HeadFirst设计模式》的读书笔记,希望能够帮助大家更好的理解设计模式,提高自己的编程能力。 今天要分享的是【HeadFirst设计模式开胃菜】,主要介绍了设计模式的基本概念、设计模…

Oracle数据库如何找到 Top Hard Parsing SQL 语句?

有一个数据库应用程序存在过多的解析问题,因此需要找到产生大量硬解析的主要语句。 什么是硬解析 Oracle数据库中的硬解析(Hard Parse)是指在执行SQL语句时,数据库需要重新解析该SQL语句,并创建新的执行计划的过程。这…

【GBT32960协议学习系列】GBT 32960协议的背景、目的和适用范围

GBT 32960协议的背景、目的和适用范围 1. GBT 32960协议的背景 GBT 32960是中国国家标准,全称为《电动汽车远程服务与管理系统技术规范》。该标准由中国国家标准化管理委员会发布,旨在规范电动汽车远程服务与管理系统的技术要求,确保电动汽车…

蓝桥杯备赛:C++基础,顺序表和vector(STL)

目录 一.C基础 1.第一个C程序: 2.头文件: 3.cin和cout初识: 4.命名空间: 二.顺序表和vector(STL) 1.顺序表的基本操作: 2.封装静态顺序表: 3.动态顺序表--vector:…

创建并配置华为云虚拟私有云

目录 私有云 创建虚拟私有云 私有云 私有云是一种云计算模式,它将云服务部署在企业或组织内部的私有基础设施上,仅供该企业或组织内部使用,不对外提供服务.私有云的主要特点包括: 私密性:私有云的资源(如…

OWASP ZAP之API 请求基础知识

ZAP API 提供对 ZAP 大部分核心功能的访问,例如主动扫描器和蜘蛛。ZAP API 在守护进程模式和桌面模式下默认启用。如果您使用 ZAP 桌面,则可以通过访问以下屏幕来配置 API: Tools -> Options -> API。 ZAP 需要 API 密钥才能通过 REST API 执行特定操作。必须在所有 …

音视频入门基础:MPEG2-PS专题(3)——MPEG2-PS格式简介

一、引言 本文对MPEG2-PS格式进行简介。 进行简介之前,请各位先下载MPEG2-PS的官方文档。ITU-T和ISO/IEC都分别提供MPEG2-PS的官方文档。但是ITU提供的文档是免费的,ISO/IEC是付费的,所以我们主要阅读ITU提供的官方文档,比如较新…

CPT203 Software Engineering 软件工程 Pt.3 系统建模(中英双语)

文章目录 5. System Modeling(系统建模)5.1 Context models(上下文模型)5.2 Interaction models(交互模型)5.2.1 Use case modeling(用况建模)5.2.2 Sequence diagram(顺…

什么是Kafka的重平衡机制?

Kafka 的重平衛机制是指在消费者组中新增或删除消费者时,Kafka 集群会重新分配主题分区给各个消费者,以保证每个消费者消费的分区数量尽可能均衡。 重平衡机制的目的是实现消费者的负载均衡和高可用性,以确保每个消费者都能够按照预期的方式…

Nginx——反向代理(三/五)

目录 1.Nginx 反向代理1.1.Nginx 反向代理概述1.2.Nginx 反向代理的配置语法1.2.1.proxy_pass1.2.2.proxy_set_header1.2.3.proxy_redirect 1.3.Nginx 反向代理实战1.4.Nginx 的安全控制1.4.1.如何使用 SSL 对流量进行加密1.4.2.Nginx 添加 SSL 的支持1.4.3.Nginx 的 SSL 相关指…

VBA(Visual Basic for Applications)编程|excel|一系列网址或文件路径快速转换为可点击的超链接

很多时候,我们需要把导入的数据某一列转换成超链接,比如URL形式的列。 那么,大批量的情况下,无疑一个个手动点击是非常愚蠢的办法,这个时候我们就需要VBA编程来编写宏,通过编写宏来简化这些手动操作并不现…

【C++】图像模糊处理题目详解与实现

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述题目内容输入格式输出格式示例输入:输出: 💯题目分析问题拆解 💯我的做法代码实现代码分析 💯老师的做法…

在 Ubuntu 22.04 上部署 AppArmor 应用安全教程

在这篇教程中,我们将为你设置 AppArmor 以增强应用程序的安全性。 AppArmor 是一个 Linux 安全模块,允许你限制各个程序的功能。通过强制执行强制访问控制策略,AppArmor 增强了你的应用程序和系统的安全性。 AppArmor 是一个易于使用的 Lin…

Nginx:动静分离

什么是动静分离? 动静分离 是指将网站中的静态资源(如图片、样式表、脚本等)和动态内容(如 PHP、Python、Node.js 等后端生成的内容)分开部署和处理。这样做的好处是可以利用不同的服务器或缓存策略来优化不同类型的资源。 动静分离的好处 提高性能:静态资源可以直接从…

每天40分玩转Django:Django插件开发

Django插件开发 一、插件开发概述表 阶段主要任务技术要点难度准备工作项目结构设计、环境配置项目布局、setup.py★★★☆☆开发实现功能开发、测试编写Django AppConfig、Signals★★★★☆文档编写API文档、使用说明Markdown、reStructuredText★★★☆☆发布部署PyPI打包…

什么是TDD测试驱动开发(Test Driven Development)?

什么是测试驱动开发? 软件开发团队通常会编写自动化测试套件来防止回归。这些测试通常是在编写应用程序功能代码之后编写的。我们将采用另一种方法:在实现应用程序代码之前编写测试。这称为测试驱动开发 (TDD)。 为什么要应用 TDD?通过在实…

后台管理系统用户退出登录方案实现

退出登录一直是一个通用的前端实现方案,对于退出登录而言,它的触发时机一般有两种: 1. 用户主动退出,即用户点击登录按钮之后退出; 2. 用户被动退出,Token过期或被 其他人"顶下来" 时退出&…

文献分享:BGE-M3——打通三种方式的嵌入模型

文章目录 1. \textbf{1. } 1. 背景与导论 1.1. \textbf{1.1. } 1.1. 研究背景 1.2. \textbf{1.2. } 1.2. 本文的研究 1.3. \textbf{1.3. } 1.3. 有关工作 2. M3-Embedding \textbf{2. M3-Embedding} 2. M3-Embedding 2.1. \textbf{2.1. } 2.1. 模型核心: 混合检索方式 2.1.1. \…