当前位置：首页 > news >正文

day30_JS

news 2025/8/28 10:59:22

今日内容

上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili
同步笔记沐沐霸的博客_CSDN博客-Java2301
零、复习昨日
一、作业
二、BOM
三、定时器
四、正则表达式

零、复习昨日

事件

事件绑定方式
鼠标事件
onmouseover
onmouseout
onmousemove

键盘事件
onkeydown
onkeyup
onkeypress

表单事件
onfocus
onblur
onchange
onsubmit

页面加载事件
onload

dom

dom树
查找dom
document.getElementById(“id”)
document.getElementsByTagName(“p”)
document.getElementsByClassName(“c1”)

查找设置标签内容
innerText
innerHTML

查找设置标签的属性
var a = dom.属性;
dom.属性 = “”

查找设置标签的样式
var a = dom.style.css属性
dom.style.css属性 = “”

元素操作
创建元素 document.createElement(“li”)
创建文本 document.createTextNode(“文本”)
元素内部追加内容 document.appendChild()
元素内部删除子元素 document.removeChild()

Jquery是js框架,把js的操作封装

$(“#id”).val()

一、作业

见代码

二、BOM

浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器"对话"。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

2.1 window

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一

Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。一些例子：
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
location.href 属性返回当前页面的 URL
location.assign() 方法加载新的文档

<html>
<head>
<script>
function newDoc(){window.location.assign("http://www.baidu.com/")}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>

Window History
window.history 对象包含浏览器的历史。
window.history 对象在编写时可不使用 window 这个前缀。
history.back() 与在浏览器点击后退按钮相同
history.forward() 与在浏览器中点击按钮向前相同

一些方法示例如下：

2.1.1 location

表示当前浏览器的链接地址
可以读取地址
可以修改地址

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>location</title></head><body><input type="text" name="url" id="url" placeholder="请输入链接地址..."/><button type="button" onclick="showUrl()">打印当前链接</button><button type="button" onclick="toUrl()">跳转</button><button type="button" onclick="assignUrl()">替换url</button></body><script type="text/javascript">/* 打印当前链接*/function showUrl(){console.log(window.location.href);}/*** 跳转* 	1、获取输入框中的链接* 	2、修改location的href属性*/function toUrl(){// 获取输入的内容var newUrl = document.getElementById("url").value;// 修改href属性location.href = newUrl;}</script>
</html>

2.1.2 history

浏览器历史
能控制浏览器页面的前进和后退的跳转

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>a</title></head><body style="background-color: antiquewhite;"><a href="a.html">a页面</a><a href="b.html">b页面</a><hr ><button type="button" onclick="backPage()">上一页</button><button type="button" onclick="forwardPage()">下一页</button></body><script type="text/javascript">// 后退一页function backPage(){window.history.back();}// 前进一页function forwardPage(){window.history.forward();}</script></html>

三、定时器

设置定时器
setInterval(调用函数,毫秒时间)：每间隔固定毫秒值就执行一次函数
setTimeout(调用函数,毫秒时间)：在固定时间之后执行一次调用函数

关闭定时器：
clearInterval(定时器名称)
clearTimeout(定时器名称)

<body><button type="button" onclick="showTimeOut()">倒计时</button><button type="button" onclick="showInterval()">定时执行</button><button type="button" onclick="showName()">随机显示名字</button><div id="box">10</div><!-- 展示名字 --><div id="name-box">姓名</div></body><script type="text/javascript">/*** 定时执行* 	每间隔指定的时间执行一次* * 倒计时执行* 	给定义一个时间，时间到了执行一次*/function showTimeOut(){// 设置倒计时,3000毫秒之后执行setTimeout(function() {alert("时间到");}, 3000);}// 每一秒输出一个随机数字setInterval(function(){console.log(Math.random());},1000);var num = 10;// 定时器var timer;function showInterval(){// 开启定时器,间隔一秒执行一次timer = setInterval(function(){document.getElementById("box").innerText = --num;if (num <= 0) {// 清除定时器alert("发射");clearInterval(timer);}},1000);}var nameList = ["杜学帅","崔芙蓉","梅永芳","孙浩翔","宋宁波","李鑫","夏文博","郭森","苏红伟","豆艳磊","张志炜","李潇龙","马鹏飞","崔峻豪","陈鑫淼","姚俊杰","石玉剑","夏先飞","丁康","杨迎港","刘政锴","宋一帆","郝正鑫","张子龙","刘文强","赵凯鑫","黄晨","张德鹏","张勇皓","董子豪","吴浩源","全永岐","冯迪","王翌豪","王本业","蔡明星","王柯然","王烁","肖先丽","熊枫","张恒","戚兴康","申庆峰","关丽娟"];/*** 定时切换姓名*/function showName(){setInterval(function(){// 每一秒生成一个名字的随机索引var nameIndex = parseInt(Math.random()*nameList.length);// 每一秒修改一次显示的名字document.getElementById("name-box").innerText = nameList[nameIndex];},100);}</script>

四、正则表达式

Regular expression

RegExp

4.1 正则表达式

正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
语法：
var patt=new RegExp(pattern,modifiers);
var patt=/pattern/modifiers;

4.2 基本知识

var reg = new RegExp("模板");
var reg = /模板/;

方括号：用于查找某个范围内的字符

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
(red\|blue\|green)	查找任何指定的选项。

元字符（Metacharacter）：是拥有特殊含义的字符：

元字符	描述
.	查找单个字符，除了换行和行结束符。
\w	查找单词字符。
\W	查找非单词字符。
\d	查找数字。
\D	查找非数字字符。
\s	查找空白字符。
\S	查找非空白字符。
\b	匹配单词边界。
\B	匹配非单词边界。
\0	查找 NULL 字符。
\n	查找换行符。
\f	查找换页符。
\r	查找回车符。
\t	查找制表符。
\v	查找垂直制表符。
\xxx	查找以八进制数 xxx 规定的字符。
\xdd	查找以十六进制数 dd 规定的字符。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

量词：用于表示重复次数的含义

量词	描述
n+	匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。
n*	匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。
n?	匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。
n{X}	匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。
n{X,}	X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。
n{X,Y}	X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。
n{X}	前面的模式 n 连续出现X 次时匹配
n$	匹配任何结尾为 n 的字符串。
^n	匹配任何开头为 n 的字符串。
?=n	匹配任何其后紧接指定字符串 n 的字符串。
?!n	匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象方法

方法	描述
compile	编译正则表达式。
exec	检索字符串中指定的值。返回找到的值，并确定其位置。
test	检索字符串中指定的值。返回 true 或 false。

正则表达式的使用

test方法：搜索字符串指定的值，根据结果并返回真或假
exec() 方法：检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));

4.3 演示

<body>数据<input id="i1" onblur="checkData()" /><script>var i1 = document.getElementById("i1");function checkData() {var val = i1.value;// 创建正则表达式1// var reg = new RegExp("[0-9]");// 创建正则表达式2var reg = /[0-9]/; // 模板1: 判断内容是否包含0-9之间任何一个数字var reg2 = /[a]/; // 模板2: 是否包含avar reg3 = /[abc]/; // 模板3: 是否包含abc中任何一个var reg4 = /[a-z]/; // 模板4: 是否包含a-z中任何一个var reg5 = /[A-Z]/; // 模板5: 是否包含A-Z中任何一个var reg6 = /[a-zA-Z]/; // 模板6: 是否包含大小写中任何一个var reg7 = /[A-z]/; // 模板7: 是否包含大小写中任何一个(因为ascll码值)var reg8 = /[0-9A-Za-z]/; // 模板8: 是否包含数字或者字母var reg9 = /[\dA-Za-z]/; // 模板9: 是否包含数字或者字母var reg10 = /\d+/; // 匹配至少一个数字var reg11 = /\d*/; // 匹配0或者多个数字var reg12 = /\d?/; // 匹配0或者1个,只要字符串内有1个或0个就对var reg13 = /^\d?$/; // 匹配整个内容中只能有0或者1个数字var reg14 = /^\d{4}$/; // 整个内容中只能有数字,且数字个数是4位var reg15 = /^\d{4,6}$/; // 整个内容中只能有数字,且数字个数是4-6位var reg16 = /^\d{4,}$/; // 整个内容中只能有数字,且数字个数是至少4位// 匹配手机号// 手机号开头必须是1,第二位可以是3,5,6,8,9,后续数字任意,总长得11位var reg17 = /^1[35689]\d{9}$/;// 匹配邮箱 237876779@qq.com// 开头是数字或者字母,其中必须包含@符号,@后可以是数字和字母,必须有.符号,后面必须是字母// .是正则表达式的特殊符号,需要转移var reg18 = /^[\dA-Za-z]+@[\da-z]+\.[a-z]+$/;console.log(reg18.test(val));// 置空// i1.value = "";// 重点是能看懂就行,会写简单模板}</script></body>

4.4 练习

day30_JS

今日内容上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、复习昨日一、作业二、BOM 三、定时器四、正则表达式零、复习昨日事件事件绑定方式鼠标事件 onmouseoveronmouseoutonmousemove 键盘事件 onkeydownonkeyupon…...

编程日记 2023/3/12 1:53:08

【Java学习笔记】19.Java 正则表达式(2)

前言本章继续介绍Java的正则表达式。 Matcher 类的方法索引方法索引方法提供了有用的索引值，精确表明输入字符串中在哪能找到匹配： 序号方法及说明1public int start()返回以前匹配的初始索引。2public int start(int group)返回在以前的匹配操作…...

编程日记 2023/3/12 1:51:00

华为云arm架构轻松安装kubeedge

先安装k8s 华为云arm架构安装k8s(kubernetes) 下载kubeedge需要的软件官方github下载kubeedge地址 cloudcore.service文件下载地址注意:下载对应的版本和arm架构 keadm-v1.6.1-linux-arm64.tar.gz 下面的2个文件可以不用下载,安装kubeedge时也会自动去下载到/etc/kubee…...

编程日记 2023/3/12 1:49:55

33--Vue-前端开发-使用Vue脚手架快速搭建项目

一、vue脚手架搭建项目 node的安装：官方下载，一路下一步 node命令类似于python npm命令类似于pip 使用npm安装第三方模块，速度慢一些，需换成淘宝镜像以后用cmpm代替npm的使用 npm install -g cnpm --registry=https://registry.npm.taobao.org安装脚手架： cnpm inst…...

编程日记 2023/3/12 1:48:51

TMS WEB Core开发Web应用优势说明

一、Delphi开发Web应用的三大框架如下： IntraWEB适合于WEB前、后端的开发，其自带的网络服务器非常强大、稳定，笔者使用Cesium框架开发的WEB GIS地理信息系统前端不需要Apache Tomcat或Nginx即可稳定运行； uniGUI是对JavaScript库Sencha ExtJS的封装，它带有两套VCL组件包，…...

编程日记 2023/3/12 1:47:49

人工智能简单应用1-OCR分栏识别：两栏识别三栏识别都可以，本地部署完美拼接

大家好，我是微学AI，今天给大家带来OCR的分栏识别。一、文本分栏的问题在OCR识别过程中，遇到文字是两个分栏的情况确实是一个比较常见的问题。通常情况下，OCR引擎会将文本按照从左到右，从上到下的顺序一行一行地识别…...

编程日记 2023/3/12 1:45:33

Gin框架路由拆分与注册详解析

Gin框架路由拆分与注册详解析1.基本的路由注册2.路由拆分成单独文件或包3.路由拆分成多个文件4.路由拆分到不同的APP1.基本的路由注册下面最基础的gin路由注册方式，适用于路由条目比较少的简单项目或者项目demo // StatCost 是一个统计耗时请求耗时的中间件 func…...

编程日记 2023/3/12 1:44:30

2020蓝桥杯真题凯撒加密 C语言/C++

题目描述给定一个单词，请使用凯撒密码将这个单词加密。凯撒密码是一种替换加密的技术，单词中的所有字母都在字母表上向后偏移 3 位后被替换成密文。即 a 变为 d，b 变为 e，⋯，w 变为z，x 变为 a&#xff0…...

编程日记 2023/3/12 1:42:17

taro+vue3小程序使用v-html渲染的内容为class写了样式无效

taro小程序如果是直接引入的一个less文件是包含scoped，只是当前页面采用。<script setup>import ./index.less</script><view v-html"itehtml" class"article-content"></view>let itehtml"<p class"line…...

编程日记 2023/3/12 1:40:04

MASK-RCNN网络介绍

目录前言一.MASK R-CNN网络1.1.RoIPool和RoIAlign1.2.MASK分支二.损失函数三.Mask分支预测前言在介绍MASK R-CNN之前，建议先看下FPN网络，Faster-CNN和FCN的介绍：下面附上链接： R-CNN、Fast RCNN和Faster RCNN网络介绍FCN网络介绍…...

编程日记 2023/3/12 1:39:01

导航技术调研（CSDN_0023_20221217）

文章编号：CSDN_0023_20221217 目录 1. 惯性导航 2. 组合导航技术 3. 卡尔曼滤波 1. 惯性导航惯性导航系统(INS-Inertial Navigation System)是上个世纪初发展起来的。惯性导航是一种先进的导航方法，但实现导航定位的原理却非常简单，它是…...

编程日记 2023/3/12 1:37:56

121. 买卖股票的最佳时机自己的思路：采用求最长连续子串和题目的思路 class Solution {public int maxProfit(int[] prices) {if(prices.length 1) return 0;int[] nums new int[prices.length - 1];for(int i 0;i < prices.length - 1;i){nums[i] prices[…...

编程日记 2023/3/12 1:36:49

STM32—LCD1602

LCD1602（Liquid Crystal Display）是一种工业字符型液晶，能够同时显示 1602 即 32 字符(16列两行) 第 1 脚: VSS 为电源地第 2 脚: VDD 接 5V 正电源第 3 脚: VL 为液晶显示器对比度调整端,接正电源时对比度最弱，接地时对比度最…...

编程日记 2023/3/12 1:35:45

英雄算法学习路线

文章目录零、自我介绍一、关于拜师二、关于编程语言三、算法学习路线1、算法集训1）九日集训2）每月算法集训2、算法专栏3、算法总包四、英雄算法联盟1、英雄算法联盟是什么？2、如何加入英雄算法联盟？3、为何会有英雄算法联盟&#…...

编程日记 2023/3/12 1:34:41

【设计模式】备忘录模式和迭代器模式

备忘录模式和迭代器模式备忘录模式代码示例迭代器模式代码示例使用迭代器遍历集合的同时不能删除/增加元素总结备忘录模式备忘录模式，也叫快照（Snapshot）模式。在 GoF的《设计模式》⼀书中，备忘录模式是这么定义的：…...

编程日记 2023/3/12 1:33:40

rapidcsv 写csv文件实例

csv实质是一个文本文件，可以使用rapidcsv写文件操作，如下实例： 第一行实质是从-1行开始，列是从0开始 #include "rapidcsv.h" #include <string> using namespace std; void CMFCApplication1Dlg::OnBnClickedBu…...

编程日记 2023/3/12 1:31:30

数据库--进阶篇--9--存储引擎

MySQL体系结构索引是在引擎层，所以不同的存储引擎，它的索引结构不同。存储引擎简介存储引擎就是存储数据、建立所以、更新/查询数据等技术的实现方式。存储引擎是基于表的，而不是基于库的，所以存储引擎也可以被称为表类型。 …...

编程日记 2023/3/12 1:30:26

物品的管理的隐私政策

本应用尊重并保护所有使用服务用户的个人隐私权。为了给您提供更准确、更有个性化的服务，本应用会按照本隐私权政策的规定使用和披露您的个人信息。但本应用将以高度的勤勉、审慎义务对待这些信息。除本隐私权政策另有规定外，在未征得您事先许可的情况下…...

编程日记 2023/3/12 1:29:23

深度解析首个Layer3 链 Nautilus Chain，有何优势？

以流支付为主要概念的Zebec生态，正在推动流支付这种新兴的支付方式向更远的方向发展，该生态最初以Zebec Protocol的形态发展，并从初期的Solana进一步拓展至BNB Chian以及Near上。与此同时，Zebec生态也在积极的寻求从协议形态向公链…...

编程日记 2023/3/12 1:28:18

配对变量t检验

区别双变量t检验，见：https://mp.csdn.net/postedit/100640098 配对变量为两两相关的变量：如敷药前后体重变化。要求：两变量服从正态分布。 SPSS演练打开数据文件：ptest.sav 载地址：https://download.c…...

编程日记 2023/3/12 1:27:15

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...

编程新知 2025/8/25 8:23:12

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优）核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/8/27 10:57:08

golang循环变量捕获问题

在 Go 语言中，当在循环中启动协程（goroutine）时，如果在协程闭包中直接引用循环变量，可能会遇到一个常见的陷阱 - 循环变量捕获问题。让我详细解释一下： 问题背景看这个代码片段： fo…...

编程新知 2025/7/5 11:03:11

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/8/18 9:46:04

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。本文全面剖析RNN核心原理，深入讲解梯度消失/爆炸问题，并通过LSTM/GRU结构实现解决方案，提供时间序列预测和文本生成…...

编程新知 2025/8/21 5:10:57

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享文件木马：https://w…...

编程新知 2025/8/25 22:57:09

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时，Again增益0db变化为6DB，画面的变化只有2倍DN的增益，比如10变为20。这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析： 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/7/8 0:38:36

Python Ovito统计金刚石结构数量

大家好，我是小马老师。本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2025/8/22 5:22:41

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念： 1）ZYNQ全称：ZYNQ7000 All Pgrammable SoC 2）SoC:system on chips(片上系统)，对比集成电路的SoB（system on board） 3）ARM：处理器…...

编程新知 2025/8/22 6:52:15

统计学（第8版）——统计抽样学习笔记（考试用）

一、统计抽样的核心内容与问题研究内容从总体中科学抽取样本的方法利用样本数据推断总体特征（均值、比率、总量）控制抽样误差与非抽样误差解决的核心问题在成本约束下，用少量样本准确推断总体特征量化估计结果的可靠性（置…...

编程新知 2025/8/1 21:29:13