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.mzph.cn/news/832127.shtml

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

相关文章

电机控制系列模块解析(16)—— 电流环

一、FOC为什么使用串联控制器 在此说明&#xff0c;串联形式&#xff08;内外环形式&#xff0c;速度环和电流环控制器串联&#xff09;并不是必须的&#xff0c;但是对于线性控制系统来说&#xff0c;电机属于非线性控制对象&#xff0c;早期工程师们为了处理电机的非线性&am…

【ARM】ARM寄存器和异常处理

1.指令的执行过程 &#xff08;1&#xff09;一条指令的执行分为三个阶段 1.取址&#xff1a; CPU将PC寄存器中的地址发送给内存&#xff0c;内存将其地址中对应的指令返回 到CPU中的指令寄存器&#xff08;IR&#xff09; 2.译码&#xff1a; 译码器对IR中的指令…

神经网络中的算法优化(皮毛讲解)

抛砖引玉 在深度学习中&#xff0c;优化算法是训练神经网络时至关重要的一部分。 优化算法的目标是最小化&#xff08;或最大化&#xff09;一个损失函数&#xff0c;通常通过调整神经网络的参数来实现。 这个过程可以通过梯度下降法来完成&#xff0c;其中梯度指的是损失函数…

Grafana:云原生时代的数据可视化与监控王者

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Grafana&#xff1a;让数据说话的魔术师》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Grafana简介 2、Grafana的重要性与影响力 …

全方位了解 Meta Llama 3

本文将为您提供 Llama 3 的全面概览&#xff0c;从其架构、性能到未来的发展方向&#xff0c;让您一文了解这一革命性大语言模型的所有要点。 Meta Llama 发展历程 Llama 1 Llama 是由 Meta(FaceBook) AI 发布的一个开源项目&#xff0c;允许商用&#xff0c;影响力巨大。Lla…

力扣每日一题111:二叉树的最小深度

题目 简单 给定一个二叉树&#xff0c;找出其最小深度。 最小深度是从根节点到最近叶子节点的最短路径上的节点数量。 说明&#xff1a;叶子节点是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;2示例 2&#x…

C语言:文件操作(上)

片头 嗨&#xff01;小伙伴们&#xff0c;今天我们来学习新的知识----文件操作&#xff0c;准备好了吗&#xff1f;我要开始咯! 目录 1. 为什么使用文件&#xff1f; 2. 什么是文件&#xff1f; 3. 二进制文件和文本文件&#xff1f; 4. 文件的打开和关闭 5. 文件顺序读写…

启发式算法解魔方——python

未完待续&#xff0c;填坑ing…… 魔方操作的表示——辛马斯特标记 辛马斯特标记&#xff08;Singmaster Notation&#xff09;是一种用于描述魔方和类似拼图的转动操作的标记系统。它以大卫辛马斯特&#xff08;David Singmaster&#xff09;的名字命名&#xff0c;辛马斯特…

C 认识指针

目录 一、取地址操作符&#xff08;&&#xff09; 二、解引用操作符&#xff08;*&#xff09; 三、指针变量 1、 指针变量的大小 2、 指针变量类型的意义 2.1 指针的解引用 2.2 指针 - 整数 2.3 调试解决疑惑 认识指针&#xff0c;指针比较害羞内敛&#xff0c;我们…

单调栈-java

本次主要通过数组模拟单调栈来解决问题。 目录 一、单调栈☀ 二、算法思路☀ 1.暴力做法&#x1f319; 2.优化做法&#x1f319; 3.单调递增栈和单调递减栈&#x1f319; 三、代码如下☀ 1.代码如下&#xff08;示例&#xff09;&#xff1a;&#x1f319; 2.读入数据&a…

Ubuntu MATE系统下WPS显示错位

系统&#xff1a;Ubuntu MATE 22.04和24.04&#xff0c;在显示器设置200%放大的情况下&#xff0c;显示错位。 显示器配置&#xff1a; WPS显示错位&#xff1a; 这个问题当前没有找到好的解决方式。 因为4K显示屏设置4K分辨率&#xff0c;图标&#xff0c;字体太小&#xff…

prometheus搭建

1.prometheus下载 下载地址:Download | Prometheus 请下载LTS稳定版本 本次prometheus搭建使用prometheus-2.37.1.linux-amd64.tar.gz版本 2.上传prometheus-2.37.1.linux-amd64.tar.gz至服务器/opt目录 CentOS7.9 使用命令rz -byE上传 3.解压缩prometheus-2.37.1.linux…

【C++之map的应用】

C学习笔记---021 C之map的应用1、map的简单介绍1.1、基本概念1.2、map基本特性 2、map的基本操作2.1、插入元素2.2、访问元素2.3、删除元素2.4、遍历map2.5、检查元素是否存在2.6、获取map的大小2.7、清空map2.8、基本样例 3、map的基础模拟实现4、测试用例4.1、插入和遍历4.2、…

Flutter笔记:Widgets Easier组件库(11)- 使用提示吐丝

Flutter笔记 Widgets Easier组件库&#xff08;11&#xff09;使用提示吐丝 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this …

【多模态】29、OCRBench | 为大型多模态模型提供一个 OCR 任务测评基准

文章目录 一、背景二、实验2.1 测评标准和结果2.1.1 文本识别 Text Recognition2.1.2 场景文本中心的视觉问答 Scene Text-Centric VQA2.1.3 文档导向的视觉问答 Document-Oriented VQA2.1.4 关键信息提取 Key Information Extraction2.1.5 手写数学公式识别 Handwritten Mathe…

Ubuntu安装配置网络

参考 https://blog.csdn.net/qq_59633155/article/details/131252293https://blog.csdn.net/qq_59633155/article/details/131252293 Ubuntu配置网络 1&#xff0c;查看网络是否连接 终端输入 ping baidu.com 如若成功则如下图所示 如未能成功&#xff0c;则继续按下面步骤…

解决HTTP 403 Forbidden错误:禁止访问目录索引问题的解决方法

解决HTTP 403 Forbidden错误&#xff1a;禁止访问目录索引问题的解决方法 过去有人曾对我说&#xff0c;“一个人爱上小溪&#xff0c;是因为没有见过大海。”而如今我终于可以说&#xff0c;“我已见过银河&#xff0c;但我仍只爱你一颗星。” 在Web开发和服务器管理中&#x…

【精品毕设推荐】基于JSP物流信息网的设计与实现

点击免费下载原文及代码、PPT 摘要 本文讲述了基于JSP物流信息网的设计与实现。该系统使用java语言开发&#xff0c;使系统具有更好的平台性和可扩展性。 该系统实现了用户登录、注册、查询快递信息、快递公司注册成为合作伙伴以及系统管理员对信息进行管理等功能。系统的主…

(三)JVM实战——对象的内存布局与执行引擎详解

对象的内存布局 对象的实例化 对象的创建方式 - new的方式 - Class的newInstance():反射的方式 - Construct的newInstance() - clone:实现Cloneable接口,默认浅拷贝 - 使用反序列化&#xff1a;将二进制流转化为内存对象 创建对象的步骤 - 判断对象对应的类是否加载、链接、初…

You don’t have permission.

The document “XXX” could not be saved. You don’t have permission. 1.查看修改了iOS系统库导致的, 根据提示, 进入到"XXX"文件中, 然后commandz回退/取消 2. Xcode 调试遇到的报错&#xff08;持续更新&#xff09;