JavaScript —— APIs(五)

 一、Window对象

1.  BOM(浏览器对象模型)  

2.  定时器-延时函数

①、定义

②、定时器比较

③、【案例】

3.  JS执行机制

4.  location对象

注意:hash应用

不点击页面刷新号,点击刷新按钮也可以实现页面刷新

【案例】

5.  navigator对象

注意:蓝色区域的代码可以实现在手机端,刷新页面后,跳转到location.href的那个网址

6.  histroy对象

可以实现点击前进后退两个按钮,跳转到对应的前一个或者后一个页面上

  

这两种代码等价

二、本地存储

1.   本地存储介绍

2.  本地存储分类 - localStorage 语法

注意:所有键都要加引号

若要改一个数据,前提是这个数据已经被存储过了

(原来有这个键,则这样操作就是改,若原来没有这个键,这样操作就是增)

注意:本地存储只能存储字符串型,要进行别的操作时,记得转换

3.  本地存储分类 - sessionStorage

4.  【总结】

5.  本地存储处理复杂类型

先将复杂类型数据转化为 JSON 字符串,再将 JSON 字符串转化为对象

定义一个变量,将取到的字符串接过来

注意:这里(‘键’,值)

存储简单数据类型,可以直接使用

存储复杂数据类型,结果无法使用

注意:本地类型中,只能存储字符串

  字体颜色为黑色,所以是字符串

JSON存储的数据是一个字符串,不是数组。JSON存储可以便于查看数据,方便之后取数据

【总结】

三、综合案例

【学生就业信息表】

1.  渲染业务

注意:黄框中话的意思是,如果有数据,则将其转化为JSON字符串,再转化为对象,用于后期渲染页面。

要是没有数据的话,就执行后面的语句,即返回空数组

①、读取并拿到数据

②、map( )和 join( )实现数组拼接

<1> map ( ) 方法

<2> join ( ) 方法

注意:小括号中用什么符号分隔,结果里面就显示什么符号

若不想要分隔符,则小括号里面写空字符串

小括号中什么都不写时,默认为逗号分隔

③、用map + join 实现渲染页面

注意:本地存储已经存到页面里面去了,不需要每次都存一次,存一次就会一直在

2.  新增业务

① 阻止默认事件,追加新数据 

 注意:获取此刻的时间用 new Date( ).toLocalestring( )

② 重置和渲染页面

注意:获取此刻的时间用 new Date( ).toLocalestring( )

<1>  渲染页面 

前面写过将新写的内容加入到数组中去的函数 render( ),所以渲染页面的时候直接调用函数就好了

<2>  重置页面

this 指向函数的调用者 info  (用 info 注册提交事件,可以便于在重置的时候,直接用 reset())

③ 把数组重新存入本地存储里面,记得转换为ISON字符串存储

注意:需要将之前的数据存储到本地存储中去,否则页面刷新后,数据会被删除

3.  删除业务

注意:用 index 来获取索引号

① 

② 

注意:confirm 返回两个值,一个是 true 一个是 false

③ 处理再加一个数据后的序号问题

<1> 当数组为空时,返回结果是0 ,则执行后面的语句,

<2> 当数组不为空时返回结果是1数组的长度,则执行问号后面冒号前面的语句

四 正则表达式

1.  定义

2.  应用场景

3.  语法

① 定义

注意:/ / 中间不需要加引号

② 判断

【例如】这两个不匹配,所以结果是 false

4.  exec( )

【区别】

5.  元字符

①、边界符

以 哈 开头

当 ^ 和 $ 在一起时,只有一种情况是 true ,其他情况都是 false

②、量词

注意:这些量词在使用时,都有必须加^ 和 $ 

只能出现 哈 ,但是可以出现 0 次,或者无数次。中间有其他字符都是错误的

 *

+

?

只能出现一次或者不出现,其他情况都是错的

{ n }

等于 n 

只有黄框中是 true ,其他都是 false

{ n ,}

大于等于 n

{ n,m } 中间千万不能有空格

③、字符类

加了精确匹配后,只能选择一个

可以选择【】内三个数中的两个

用 - 可以实现在一定范围内选择

【案例】

【代码】

添加焦点事件

注意:这是选择 input 的下一个兄弟

6.  修饰符

i 匹配时不区分大小写

蓝框中只能替换一次,想要全局的都替换,需要加 g,g 写在 i 前面或者后面都可以

替换 replace

【案例】

注意: | 表示或者

好啦!这次分享就到此结束啦!我们APIs部分的学习到这里也就告一段落啦!!!

下面就是JS的进阶学习!

那么我们下周同一时间同一地点不见不散!!!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WAF防火墙可以给您解决什么问题?哪些情况下使用WAF最适合?

一、什么是WAF&#xff1f; Web应用防护系统&#xff08;也称为&#xff1a;网站应用级入侵防御系统。英文&#xff1a;Web Application Firewall&#xff0c;简称&#xff1a;WAF&#xff09;。利用国际上公认的一种说法&#xff1a;Web应用防火墙是通过执行一系列针对HTTP/H…

Occlum原理解析及使用说明

目录 一、设计初衷 二、背景知识 1.什么是可信计算 2.什么是TEE 3.传统SGX SDK的问题 三、Occlum 1.如何使用 2.特点 3.如何使用 1.Docker部署 1 硬件支持 2 环境 3 拉取镜像创建虚机 4 简单验证 4.Occlum中gcc编译 1 交叉编译 2 初始化Occlum实例 3 Occlum构…

如何更好的使用cpm

nvidia发布了RAFT库&#xff0c;支持向量数据库的底层计算优化&#xff0c;RAFT 也使用CMake Package Manager( CPM )和rapids-cmake管理项目&#xff0c;可以方便快捷的下载到需要的对应版本的thirdparty的依赖库&#xff0c;但是&#xff0c;一般情况下&#xff0c;项目是直接…

数据库复习1

1.试述数据、数据库、数据库管理系统、数据库系统的概念 1.数据(Data): 数据是关于事物的符号表示或描述。它可以是任何事实、观察或者测量的结果&#xff0c;如数字、字符、声音、图像等。数据在没有上下文的情况下可能没有明确的意义。 2.数据库(Database): 数据库是一个持…

面试题:集合篇

说说 List, Set, Queue, Map 四者的区别&#xff1f; List(对付顺序的好帮手): 存储的元素是有序的、可重复的。Set(注重独一无二的性质): 存储的元素是无序的、不可重复的。Queue(实现排队功能的叫号机): 按特定的排队规则来确定先后顺序&#xff0c;存储的元素是有序的、可重…

传输层协议 TCP UDP协议 解析(二)

文章目录 UDP&#xff1a;用户数据报协议UDP报文格式TCP与UDP的区别 UDP&#xff1a;用户数据报协议 UDP是一种面向无连接的传输层协议&#xff08;数据一直发送&#xff0c;没有ack&#xff0c;所以不需要考虑ack&#xff09;&#xff0c;传输可靠性没有保证。 UDP不提供重传…

Rust 实战thiserror+自定义错误消息体

导航 一、背景二、实践1、导入thiserror2、自定义错误消息体&#xff08;1&#xff09;创建ErrMsg.rs和创建自定义结构体&#xff08;2&#xff09;lib.rs添加ErrMsg&#xff08;3&#xff09;main函数&#xff08;4&#xff09;完整代码 一、背景 开发中遇到需要通用、能够满…

Note-backbone预训练权重对模型收敛速度的影响和mmlab实验测试

简介 在训练一些复杂模型时候&#xff0c;通常会考虑读取backbone的预训练权重&#xff0c;这种方法有以下好处&#xff1a; 初始化网络参数&#xff1a;在深度学习模型训练过程中&#xff0c;通常需要随机初始化神经网络的参数。然而&#xff0c;如果采用Backbone预训练权重进…

拼多多不花钱推广能做起来吗

拼多多推广可以使用3an推客。3an推客&#xff08;CPS模式&#xff09;给商家提供的营销工具&#xff0c;由商家自主设置佣金比例&#xff0c;激励推广者去帮助商家推广商品链接&#xff0c;按最终有效交易金额支付佣金&#xff0c;不成交不扣费。是商家破零、积累基础销量的重要…

背景音乐广播系统解决方案

背景音乐广播系统解决方案18123651365 在公共广播背景音乐系统虽然是一个小小分支&#xff0c;但是却与人们的生活质量直接挂钩&#xff0c;如早晨时间&#xff0c;可以通过播放一些愉快的音乐&#xff0c;使得住宅居名、上班一族和晨运一族有一个愉快的心情&#xff0c;精神抖…

《QT实用小工具·五十六》自适应界面变化的控件

1、概述 源码放在文章末尾 该项目实现了网格显示多张带文字的图片在界面中自适应布局 特点 跟随窗口大小变换位置&#xff0c;并带移动动画 响应鼠标事件&#xff0c;图片缩放动画 点击水波纹动画 项目demo演示如下所示&#xff1a; 项目部分代码如下所示&#xff1a; #i…

剖析QMS质量管理系统:推动企业效益提升的关键因素

质量管理系统&#xff08;QMS&#xff09;是企业管理中至关重要的一环&#xff0c;它涵盖了组织的所有流程和活动&#xff0c;并旨在提高产品和服务的质量。通过实施和运营一个有效的QMS&#xff0c;企业能够不断改进其业务&#xff0c;满足客户需求&#xff0c;提高竞争力&…

书生浦语第三节茴香豆:搭建你的RAG智能助理笔记

RAG&#xff08;Retrieval Augmented Generation&#xff09;是一项通过检索与用户输入相关的信息片段&#xff0c;并结合外部知识库来生成更准确、更丰富的回答的技术。解决 LLMs 在处理知识密集型任务时可能遇到的挑战, 如幻觉、知识过时和缺乏透明、可追溯的推理过程等。提供…

4月威胁态势 | 0day占比82%!Polyransom勒索家族强势来袭

近日&#xff0c;亚信安全正式发布《2024年4月威胁态势报告》&#xff08;以下简称“报告”&#xff09;&#xff0c;报告显示&#xff0c;4月份新增安全漏洞1260个&#xff0c;涉及0day漏洞占82%&#xff1b;监测发现当前较活跃的勒索病毒家族是Polyransom和Blocker&#xff0…

SPI思想机制

目录 如何解释简单概括SPI 和 APISPI 实现原理&#xff08;重要-线程上下文类加载器&#xff09; 如何使用一个Demo功能介绍使用效果&#xff08;直接在本地模拟服务商提供服务&#xff09;使用效果&#xff08;通过 jar 的方式引入&#xff09; 应用分析参考文章 如何解释 简…

Docker容器:Docker-Consul的容器服务更新与发现

目录 前言 一、什么是服务注册与发现 二、 Docker-Consul 概述 1、Consul 概念 2、Consul 提供的一些关键特性 3、Consul 的优缺点 4、传统模式与自动发现注册模式的区别 4.1 传统模式 4.2 自动发现注册模式 5、Consul 核心组件 5.1 Consul-Template组件 5.2 Consu…

Blazor流程编排的艺术:深入Z.Blazor.Diagrams库的使用与实践

合集 - .Net(3)1.基于AntSK与LLamaSharp打造私人定制的离线AI知识库03-032.深入解析&#xff1a;AntSK 0.1.7版本的技术革新与多模型管理策略03-123.Blazor流程编排的艺术&#xff1a;深入Z.Blazor.Diagrams库的使用与实践05-05收起 为现代网页应用开发提供动力的其中一…

招展工作的接近尾声“2024上海国际科技创新展会”即将盛大开幕

2024上海国际科技创新展会&#xff0c;即将于6月中旬在上海新国际博览中心盛大召开。随着招展工作的接近尾声&#xff0c;目前仍有少量余位可供各企业和机构预定。这一盛大的科技展会&#xff0c;将汇聚全球智能科技领域的精英&#xff0c;共同展示最新的科技成果&#xff0c;探…

【Spring】JdbcTemplate

JdbcTemplate 是 Spring 提供的一个 JDBC 模板类&#xff0c;是对 JDBC 的封装&#xff0c;简化 JDBC 代码 也可以让 Spring 集成其它的 ORM 框架&#xff0c;例如&#xff1a;MyBatis、Hibernate 等 使用 JdbcTemplate 完成增删改查 一、环境准备 数据库&#xff1a; 准备…
最新文章