前端(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是中国国家标准,全称为《电动汽车远程服务与管理系统技术规范》。该标准由中国国家标准化管理委员会发布,旨在规范电动汽车远程服务与管理系统的技术要求,确保电动汽车…

软件工程期末复习(一)

题目复习 单选题 软件产品的核心特性是什么? A. 物质性 B. 逻辑性 C. 可复制性 D. 消耗性 正确答案:B 单选题 在软件开发过程中,哪个环节最接近于传统制造业中的“生产”过程? A. 需求分析 B. 编码 C. 测试 D. 研制&#xff08…

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

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

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

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

Rust中的Option枚举快速入门

引言 Option是Rust编程语言中的一个枚举类型,用于表示一个值可能存在也可能不存在(即我们熟知的null)的情况。它是Rust处理可能为空的值的主要方式,有助于避免空指针异常等问题。 Option介绍 Option枚举定义在标准库中,其源码如下所示&…

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提供的官方文档,比如较新…

云打印之菜鸟打印组件交互协议

菜鸟打印组件交互协议相关介绍如下: 1、打印组件下载地址 https://page.cainiao.com/waybill/cloud_printing/home.html 2、socket连接商品 如果是http的话,端口是13529 socket new WebSocket(ws://localhost:13528); 如果是https的话&#xff0c…

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(顺…

【HDU】1090 A+B for Input-Output Practice (II)

1090 AB for Input-Output Practice (II) :题目有N个输入组,接下来依次给出N个输入组数据 Problem Description Your task is to Calculate a b.Input Input contains an integer N in the first line, and then N lines follow. Each line consists of a pair of…

GNU链接器简介-2

GNU链接器简介-2 1 简单链接器脚本命令1.1 Setting the Entry Point1.2 Commands Dealing with Files2.3 Commands Dealing with Object File Formats2.4 Assign alias names to memory regions2.5 Other Linker Script Commands 3 5Assigning Values to Symbols3.1 Simple Ass…

AWS DMS基础知识

1.AWS Database Migration Service (DMS) 概述 AWS DMS 定义:它能助力以最少停机时间把数据库迁移至 AWS,支持同构(如 Oracle 到 Oracle)、异构(如 Oracle 到 PostgreSQL )迁移。常…

Ubuntu 安装英伟达显卡驱动问题记录

建议 无论什么版本的系统,都建议从官网下载驱动,一般下载下来后是一个 run 开头的可执行程序,直接在命令行执行就可以。 之所以这么建议,是因为使用 包管理工具安装的驱动一般都是社区版本,社区版本的问题就是没有签…

什么是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编程来编写宏,通过编写宏来简化这些手动操作并不现…