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

java求职学习day32

news 来源：原创 2025/5/9 15:11:28

JavaScript 详解

课程目标：

1 、 JavaScript 介绍

2 、 HTML 和 JavaScript 结合方式

3 、 JavaScript 的使用

4 、 DOM 操作

5 、 BOM 操作

1. JavaScript介绍

(1)虽然是 java 作为前缀，但 java 和 javascript 的关系，就像老婆和老婆饼之间的关系，没有一毛钱关

系！

(2)网景公司在 Netscape2.0 首先推出了 JavaScript

(3)JavaScript 的正式名称是 “ECMAScript” ，此标准由 ECMA 组织发展和维护，简称 “js”

(4)JavaScript 是一种网页编程技术，用来向 HTML 页面添加交互行为

(5)JavaScript 是一种基于对象和事件驱动的解释性脚本语言，直接嵌入 HTML 页面，由浏览器解释执行代码，不进行预编译。

1.1 js的特点

(1)可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序（后面会学习不用浏览器也能运行）

(2)解释执行：事先不编译，逐行执行

(3)基于对象：内置大量现成对象

(4)适宜：

客户端数据计算

客户端表单合法性验证

浏览器事件的触发

网页特殊显示效果制作

1.2 js的组成

(1)ECMAScript ：定义核心语法，关键字，运算符，数据类型等系列标准

(2)DOM ： 文档对象模型 ，将一个 html 页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。

(3)BOM ： 浏览器对象模型 ，是对浏览器窗口进行访问和操作。使用 BOM ，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。

弹出新的浏览器窗口

移动、关闭浏览器窗口以及调整窗口大小

提供 Web 浏览器详细信息的定位对象

提供用户屏幕分辨率详细信息的屏幕对象

对 cookie 的支持

IE 扩展了 BOM ，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象，进而

实现 ajax 局部刷新技术

2. HTML与javaScript结合方式

使用 js 的三种方式

2.1.行内脚本

1. 点击按钮（触发）

2. 弹框（具体的操作）

<button onclick="alert('弹框测试')">点我一下</button>

2.2.内部脚本

1. 使用 <script></script>

2. 标准是写在 head 和 body 之间（脖子位置），但其实只要写在 html 文件内部就可以，无论什么位置 <html>外， <p></p> 内部，都可以。

<body>
<script>
alert("弹框");
</script>
</body>

2.3.外部脚本

2. 在 js 目录中创建一个文件，后缀名是 .js

3. 在 html 页面中，使用

<script src="js/xx.js"></script>

以上使用脚本的三种方式的优先级，谁在上，谁先执行。因为是解释性语言。

3. JavaScript的使用

3.1 变量

(1)因为 js 是弱类型语言，所以，在定义变量的时候，所有的数据类型都是 var

(2)声明变量： var x ; var x,y;

(3)数值类型： number

不区分整型数值和浮点型数值

所有数字都采用 64 位浮点格式存储，类似于 double 格式

(4)字符串： string

首尾由单引号或双引号括起

var aa="欢迎来到\"JavaScript世界";

(5)布尔类型：

仅有两个值： true 和 false 也代表 1 和 0

实际运算中 true=1,false=0

3.1.1 自动类型转换

数字 + 字符串：数字转换为字符串 10+’a’ -> 10a
数字 + 布尔值：true转换为1，false转换为0 true+5->6
字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea
布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2

3.1.2 数据类型转换函数

(1)parseInt ：强制转换成整数

(1.1) 如果不能转换，则返回 NaN （ NaN 属性是代表非数字值的特殊值。该属性用于指示某个值

不是数字）

例如： parseInt("6.32")=6

(2)parseFloat ：强制转换成浮点数

如果不能转换，则返回 NaN

例如： parseFloat("6.32")=6.32

(3)typeof ：查询数值当前类型，返回 string / number / boolean / object

例如： typeof("test"+3)=="string"

3.1.3 null 与 undefined

(1)null 在程序中代表 “ 无值 ” 或者 “ 无对象 ”

可以通过给一个变量赋值 null 来清除变量的内容

(2)undefined

声明了变量但从未赋值或者对象属性不存在

3.1.4 算术运算

(1)加 ( ＋ ) 、减 ( － ) 、乘 ( * ) 、除 ( / ) 、余数 ( % )

- 可以表示减号，也可以表示负号，如： x = -y

+ 可以表示加法，也可以用于字符串的连接

(2)递增 ( ++ ) 、递减 ( -- )

i++ 相当于 i=i+1

i-- 相当于 i=i-1

3.1.5 关系运算

(1) 严格相等：===

类型相同

数值相同

(2)非严格相等： !==

var a = "10";
var b = 10;
if (a == b)
alert("equal");
if (a === b)
alert("same");

3.1.6 逻辑运算

(1)逻辑非（ ! ）、逻辑与（ && ）、逻辑或（ || ）

(2)逻辑运算的操作数均为 boolean 表达式

我要吃两碗拉面或者 10 个包子才能吃饱！问题是，我只吃两碗面，饱了！我只吃 10 个包子，饱了

我要吃两碗拉面并且 10 个包子才能吃饱！问题是，我只吃两碗面，没饱！我只吃 10 个包子，没

饱，

3.1.7 控制语句

if（关系表达式） {
// 语句块 1
}else {
// 语句块 2
}

if (表达式1) {
// 语句1;
}else if (表达式2){
// 语句2;
}else if (表达式3){
// 语句3;
} else{
// 语句4;
}

switch (表达式) {
case 值1:
// 语句1;
break;
case 值2:
// 语句2;
break;
default:
// 语句4;
}

for (var i=1 ; i<=5 ; i++){
alert(i);
}

while (条件){
// 语句1;
...
}

3.2 常用字符串API

length: 获取字符串的长度（字符串中字符的个数）属性，没有小括号

var str = "hello";
console.log( str.length );

toUpperCase/toLowerCase : 转大小写

var name = "AngierSun";
console.log( "大写："+name.toUpperCase() );
console.log( "小写："+name.toLowerCase() );

charAt( 下标 ) ：返回某个下标上的字符

var str1 = "javascript网页教程";
var str2 = str1.charAt(12); // 下标12上的字符
console.log(str2); //教
var str3 = str1.charCodeAt(12);
console.log(str3); //25945:（汉字“教”在unicode编码中的编号）

indexof( 字符 ) ：查找字符串中字符出现的首次下标

lastIndexof( 字符 ) ：查找字符串中字符最后一次出现的下标

var str1 = "javascript网页教程";
var str2 = str1.indexOf("a");
console.log(str2); // 1 , a字符在str1中第一次出现的下标
var str3 = str1.lastIndexOf("a"); //3,a字符在str1中最后一次出现的下标
console.log(str3);

substring( 开始 , 结束 ) ：截取字符串中一部分（结束是不包含的）

var str1 = "abcdefgh";
var str2 = str1.substring(2,4);
console.log(str2); //cd，从2开始（包含），4结束（不包含）

replace( 旧的 , 新的 ) ：将字符串中的旧字符替换成新字符

var str1 = "abcde";
var str2 = str1.replace("cd","XXX");
console.log(str2); // abXXXe，将str1中的cd替换成XXX

split( 分割的节点 ) ：一个字符串切割成 N 个小字符串，所以返回的是数组类型

var str1 = "一,二,三,四,五";
var arr = str1.split(","); // 将str1 以逗号进行分割，分割成N份，所以返回的结果一定
是数组结构
console.log( "共分割成："+arr.length+"份" );
console.log( "第三份是：" + arr[2] ); // 三

3.3 数组

3.3.1 创建数组

var arr1 = new Array();

3.3.2 初始化数组的三种方式

// 第一种
var arr1 = new Array();
arr1[0] = 110;
arr1[1] = 119;
arr1[2] = 120;
// 第二种
var arr1 = new Array(10,"a",true);
// 第三种
var arr1 = [10,"a",true];
for (var i = 0; i < arr1.length; i++) {
console.log(arr1[i]);
}

3.3.3 数组的常用方法

tostring() ：将数组转换成字符串

var arr = [1,2,3,4];
console.log("类型为：" + typeof( arr ) );
var str = arr.toString(); // 将数组转换成字符串
console.log( str +",类型为：" + typeof( str ) );

join( 连接符号 ) ：将数组中的每个元素用连接符号连接成一个新的字符串。

var arr = [1,2,3,4];
var str = arr.join("-"); // 将数组中每个元素用-进行连接，并形成一个全新的字符串
console.log( str +",类型为：" + typeof( str ) );

concat( 新元素 ) ：将原来的数组连接新元素，原数组不变。

var arr = [1,2,3,4];
var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素，形成一个新数组，但是
原数组是不变的
console.log( arrnew +",类型为：" + typeof( arrnew ) );
console.log("原数组：" + arr);

slice( 开始，结束 ) ：在数组中提取一部分，形成新的数组。

1,2,3,4,5 slice(2,4) 结果： 3,4

var arr = ['a','b','c','d','e','f','g','h'];
var arrnew = arr.slice( 2,4 ); // 在arr数组中截取，从2开始（包含），4结束（不包
含）
console.log( arrnew ); // cd

reverse() ：数组的反转（倒序）

var arr = [31,12,111,444];
console.log( arr.toString() );
arr.reverse(); // 将数组中的元素倒置
console.log( arr.toString() );

sort() ：数组排序

arr.sort() 字符排序

var arr = [31,12,111,444];
arr.sort(); // 字符排序（不会按照字面量的大小）
console.log( arr );

arr.sort(func) 数值排序

var arr = [31,12,111,444];
arr.sort( laosun ); // 数字排序（会按照字面量的大小）
console.log( arr );
// 定义排序函数
function laosun(a,b){
return a-b;
}

3.4 Math数学对象

Math 对象用于执行数学任务

没有构造函数 Math()

无需创建，直接把 Math 作为对象使用就可以调用其所有属性和方法

// 返回0-9之间任意一个随机数字
var i = Math.random() * 10;
var j = Math.floor(i);
console.log(j);

3.5 Number对象

Number.fixed(2); 自带四舍五入技能

var n = new Number( 12.345 );
var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入
console.log( n1 );
var x = new Number( 12.3 );
var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐
console.log( n2 );

3.6 正则表达式

对字符串执行模式匹配的强大工具

var reg1 = /^\d{3,6}$/; // 匹配纯数字3-6个
var reg2 = new RegExp(“^\\d{3,6}$");

// 方式1
var age = "18"; // 判断：1-3位纯数字
var reg = /^\d{1,3}$/; // 以/^开始，中间写正则内容，以$/结束
var b = reg.test(age); // 验证age变量的是否符合reg的匹配
if (b == true) {
console.log("验证通过！");
} else {
console.log("格式错误");
}
// 方式2
var name = "abc123"; // 大小写字母和数字的组合（特殊字符不能出现）, 5~8位
var reg = new RegExp("^[a-zA-Z0-9]{5,8}$"); // 以^开始，中间写正则内容，以$结束
if (reg.test(name)) {
console.log("验证通过！");
} else {
console.log("格式错误");
}

3.7 日期对象

var time = new Date();
console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)
var year = time.getFullYear(); // 年份
var month = time.getMonth() + 1; //月份从0开始，11结束，所以国内习惯要+1
var day = time.getDate(); // 几号
var hour = time.getHours(); // 几点
var mm = time.getMinutes(); // 分钟
var s = time.getSeconds(); //秒
var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒
var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒";
console.log( timestr );

3.8 函数

使用关键字 function 定义函数

function 函数名( 形参列表 ){
// 函数体
return 返回值;
}

函数声明后不会立即执行，会在我们需要的时候调用到。

注意：

形参：一定不要带数据类型

分号是用来分隔可执行 JavaScript 语句。由于函数声明不是一个可执行语句，所以不以分号

结束。

3.8.1 无返回值

function qiuhe(a, b) {
var he = a + b;
console.log("两数之和：" + he);
}
qiuhe(3,4);

3.8.2 有返回值

function qiuhe(a, b) {
var he = a + b;
return "两数之和：" + he;
}
var s = qiuhe(3,4);
console.log( s );

3.8.3 参数对象

在函数内部，调用参数列表的属性

function func(a,b,c){
console.log( arguments.length ); // 获得参数的个数
console.log( arguments[1] ); // 获得下标为1的参数
}

3.8.4 构造函数

函数同样可以通过内置的 JavaScript 函数构造器（ Function() ）定义

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);
console.log(x);

注：上述函数以分号结尾，因为它是一个执行语句。

3.8.5 匿名函数

没有名称的函数

var fn = function(a, b) {// 没有名字的函数，应该用一个变量来接收
return a * 10 + b;
};
console.log( fn(3, 4) );

3.8.6 全局函数

isNaN ：检查其参数是否是 非数字值

console.log( isNaN( 123 ) ); // 数字，false
console.log( isNaN( "hello" ) ); // 非数字，true
console.log( isNaN( 4-1 ) ); // 数字，false
console.log( isNaN( 123 ) ); // 数字，false
console.log( isNaN( -10 ) ); // 数字，false
console.log( isNaN( "123" ) ); // 数字，false
console.log( isNaN( "1a23" ) ); // 非数字，true

eval ：用来转换字符串中的运算

var str = "1+3";
console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用
console.log( eval( str ) ); // 让字符串中的运算符号生效

encodeURI 与 decodeURI

var name = "拉勾网";
console.log( "转码前：" + name );
name = encodeURI(name);
console.log( "转码后：" + name );
name = decodeURI(name);
console.log( "解码后：" + name );

3.8.7 闭包

1 、闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数。

2 、闭包的作用：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理；

简单地说：就是在函数的局部范围内声明一个封闭的环境，此环境不会被垃圾回收探测到。保证了数据的安全唯一性

想了解闭包，首先要了解什么是全局变量，什么是局部变量

a = 10; // 全局变量，声明的时候可以不使用var
function test1(){
b = 20; // 不适用var声明的变量，就是全局变量
var c = 30; // 用var声明，并且在函数的内部。这样的变量叫做局部变量，有效范围只能
在其声明的函数内部
console.log(c);
}
function test2(){
console.log(c); //c is not defined (c变量没有定义)
}
test1();
test2();

需求：统计方法执行了多少次

var count = 0; // 总次数
function test1(){
count++; // 自增+1
}
test1();
test1();
test1();
console.log( count );

谁都可以访问 count ，所以 count 变量并不安全，因为是全局变量。

如何才能安全呢？将 count 声明为局部变量

function test1(){
var count = 0; //局部变量
return count++; //外部无法访问count，只能通过return才能将count变量返回，并输
出
}
test1();
test1();
test1();
console.log( test1() ); // 每次调用方法，首先就是将变量还原为0

结果一直是 0 ，因为每次调用 test1() ，方法体的第一句代码就是还原，无论曾经的值是多少。

突发奇想，如果在 test1() 函数里面，再嵌套一个函数， js 是支持函数嵌套的

function test1(){
var count = 0; //局部变量
function jia(){
return count++;
}
jia();
return count;
}
test1();
test1();
test1();
console.log( test1() ); // 每次调用方法，首先就是将变量还原为0

如果每次只调用 test1() 里面的 jia() 就好了。 ok ，闭包帮你解决此问题！

function test1(){
var count = 0; //局部变量
function jia(){
return count+=1;
}
return jia;
}
var fn = test1(); // fn => function jia(){return count+=1; }
fn();
fn();
console.log( fn() ); // 每次调用方法，首先就是将变量还原为0

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。

直观的说就是形成一个不销毁的栈环境。

闭包的优点：方便调用上下文中声明的局部变量逻辑紧密，可以在一个函数中再创建个函数，避免了传参的问题

闭包的缺点：因为使用闭包，可以使函数在执行完后不被销毁，保留在内存中，如果大量使用闭包就会造成内存泄露，内存消耗很大

3.9 弹框输出

普通弹框 alert("hello ，拉勾 ");

控制台日志输出 console.log(" 谷歌浏览器按 F12 进入控制台 ");

页面输出 document.write("<h2> 我爱你中国 </h2>"); 将 <h2> 元素输出到 <body> 中

确认框 confirm(" 确定删除吗？ ");

var b = confirm("确定删除吗？");
if(b){
document.write( "<h1>删除成功！</h1>" );
}else{
document.write( "<h1>你取消了操作</h1>" );
}

输入框 prompt(" 请输入姓名： ");

var name = prompt("请输入你的名字：");
document.write( "<h1>大名："+name+"！</h1>" );

4.DOM 操作

在一个 html 页面中，会使用很多标签来规划制作页面。

每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找

到这个标签元素

如何查找到这个元素是个难题， W3C 组织的工程师们，突然看到了一棵大树。我要是想找到某一

片叶子，应该怎么做？

“ 顺藤摸瓜 ” ，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一

片叶子都不是难事了

叶子和大树的一些启发，工程师们开会讨论就定了这个理论 “ 文档对象模型 ” ，

文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节

点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了

在节点树中，顶端节点就是根节点（ root ）

每个节点都有父节点（除了根节点）

任何一个节点都可以拥有任意数量的子节点

同胞是拥有相同父节点的节点

<html>
<head>
<meta charset="utf-8">
<title>DOM 教程</title>
</head>
<body>
<h1>第一节：HTML DOM</h1>
<p>Hello world!</p>
</body>
</html>

从上面的 HTML 中：

<html> 节点没有父节点；它是根节点

<head> 和 <body> 的父节点是 <html> 节点

文本节点 "Hello world!" 的父节点是 <p> 节点

并且：

<html> 节点拥有两个子节点： <head> 和 <body>

<head> 节点拥有两个子节点： <meta> 与 <title> 节点

<title> 节点也拥有一个子节点：文本节点 "DOM 教程 "<h1> 和 <p> 节点是同胞节点，同时也是

<body> 的子节点

并且：

<head> 元素是 <html> 元素的首个子节点

<body> 元素是 <html> 元素的最后一个子节点

<h1> 元素是 <body> 元素的首个子节点

<p> 元素是 <body> 元素的最后一个子节点

js 为我们提供了很多种方法来实现在页面找查找某个元素节点

4.1 DOM访问

getElementById ：通过 id 属性获得元素节点对象

案例：当帐号为空时，阻止表单提交

<body>
<form action="xxx" onsubmit="return login()">
<p>帐号：<input id="username"/></p>
<p>电话：<input id="phone"/></p>
<p><button>登录</button></p>
</form>
<script>
function login() {
var name = document.getElementById("username").value ;
if(name == ""){
alert("帐号不能为空！");
return false; // 阻止表单的提交
}
return true; // 放行，让表单提交
}
</script>
</body>

getElementsByName ：通过 name 属性获得元素节点对象集

案例：购物车全选效果

<body>
<h2>我的购物车</h2>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" onchange="quan(this)" /> 全选</td>
<td>名称</td>
<td>单价</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />1</td>
<td>功能性饮料-尖叫</td>
<td>4.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />2</td>
<td>火腿肠</td>
<td>2.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />3</td>
<td>包子</td>
<td>1.5</td>
</tr>
</table>
<p>
<button>提交订单</button>
</p>
<script>
function quan(all) {
var arr = document.getElementsByName("one");
for (var i = 0; i < arr.length; i++) {
arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框
}
}
</script>
</body>

getElementsByTagName ：通过标签名称获得元素节点对象集

案例：表格隔行变色

<body>
<table border="1" cellspacing="0">
<tr>
<td><input type="checkbox" onchange="quan(this)" /> 全选</td>
<td>名称</td>
<td>单价</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />1</td>
<td>功能性饮料-尖叫</td>
<td>4.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />2</td>
<td>火腿肠</td>
<td>2.0</td>
</tr>
<tr>
<td><input type="checkbox" name="one" />3</td>
<td>包子</td>
<td>1.5</td>
</table>
<script>
var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象
集合
for (var i = 0; i < rows.length; i++) {
if(i % 2 == 1){ // 奇数
rows[i].style.backgroundColor = "pink";
}
}
</script>
</body>

4.2 DOM修改

修改 HTML DOM 意味着许多不同的方面：

改变 HTML 内容

改变 CSS 样式

改变 HTML 属性

创建新的 HTML 元素

删除已有的 HTML 元素

改变事件（处理程序）

1. 改变一个 <h2> 元素的 HTML 内容 :

<body>
<button onclick="test()">点我试试</button>
<script>
function test(){
document.getElementById("hello").innerHTML = "走哇，喝点去~！";
}
</script>
<h2 id="hello">你好！</h2>
</body>

2. 改变一个 <h2> 的 HTML 样式

<body>
<button onclick="chou()">你瞅啥</button>
<script>
function chou(){
document.getElementById("hello").style.color = "red";
document.getElementById("hello").style.fontFamily = "华文彩云";
}
</script>
<h2 id="hello">你好！</h2>
</body>

4.2.1 添加节点

点击按钮，在页面中创建一张图片

<body>
<button onclick="add()">添加</button>
<div></div>
<script>
function add(){
var img = document.createElement("img"); // <img>
img.setAttribute("src","../lagou-html/img/cat.gif"); // <img
src="../lagou-html/img/cat.gif">
img.setAttribute("title","小猫咪"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪">
img.setAttribute("id","cat"); // <img src="../lagouhtml/img/cat.gif" title="小猫咪" id="cat">
var divs = document.getElementsByTagName("div");
divs[0].appendChild(img);
}
</script>
</body>

4.2.2 删除节点

点击按钮，把上面刚创建的图片从页面上删除

<body>
<button onclick="add()">添加</button>
<button onclick="del()">删除</button>
<div>
</div>
<script>
function add(){
。。。略。。。
}
function del(){
var img = document.getElementById("cat");
img.parentNode.removeChild(img); // 必须通过父节点，才能删除子节点
}
</script>
</body>

4.2.3 替换节点

点击按钮，把上面刚创建的图片替换成另一张

<body>
<button onclick="add()">添加</button>
<button onclick="del()">删除</button>
<button onclick="rep()">替换</button>
<div>
</div>
<script>
function add(){
。。。略。。。
}
function del(){
。。。略。。。
}
function rep(){
var imgold = document.getElementById("cat");
// 通过修改元素的属性，做的替换
// img.setAttribute("src","../lagou-html/img/2.jpg");
var imgnew = document.createElement("img");
imgnew.setAttribute("src","../lagou-html/img/1.jpg");
imgold.parentNode.replaceChild( imgnew, imgold );
}
</script>
</body>

4.3 事件

js 捕获某个动作而做出的反馈

HTML 事件的例子：

当用户点击鼠标时

当网页已加载时

当图片已加载时

当鼠标移动到元素上时

当输入字段被改变时

当 HTML 表单被提交时

当用户触发按键时

4.3.1 窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。

onload 当文档被载入时执行脚本

<body onload="test()">
<script>
function test() {
document.write("哈哈哈哈");
}
</script>
</body>

4.3.2 表单元素事件 (Form Element Events)

仅在表单元素中有效。

onblur 当元素 失去焦点 时执行脚本

onfocus 当元素 获得焦点 时执行脚本

<body>
<script>
function a() {
console.log("获得焦点==被激活");
}
function b() {
console.log("失去焦点");
}
</script>
<form action="">
<p>帐号：<input onfocus="a()" onblur="b()" /></p>
<p>密码：<input /></p>
</form>
</body>

4.3.3 鼠标事件 (Mouse Events)

onclick 当鼠标被单击时执行脚本

ondblclick 当鼠标被双击时执行脚本

onmouseout 当鼠标指针移出某元素时执行脚本

onmouseover 当鼠标指针悬停于某元素之上时执行脚本

<style>
img{
width: 30%;
border: 5px solid white;
}
</style>
<body>
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)"
onclick="dan()">
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)"
ondblclick="shuang()">
<img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" >
<script>
function dan(){
alert("点了一下");
}
function shuang(){
alert("连续快读点两下");
}
function shang(img){
img.style.border = "5px solid red";
}
function xia(img){
img.style.border = "5px solid white";
}
</script>
</body>

4.3.4 键盘事件

onkeydown 按下去

onkeyup 弹上来

<script>
window.onkeydown = function(){
// event：事件源（按键）
// console.log( "按键编码："+event.keyCode );
if(event.keyCode == "13"){ // 回车键
alert("登录成功！");
}
}
window.onkeyup = function(){
console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则
触发
}
</script>

4.3.5 事件冒泡

创建两个 div ，一个大一些，一个小一些

<style>
#father {
width: 200px;
height: 200px;
background: black;
padding: 10px;
}
#child {
width: 100px;
height: 100px;
background: greenyellow;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
<script>
// 代码不重要，重要是知道这个事件发生，是正常现象
document.getElementById("father").addEventListener("click", function() {
alert("父级元素的事件被触发：" + this.id);
});
document.getElementById("child").addEventListener("click", function(e) {
e.stopPropagation() //取消事件的冒泡机制
alert("子级元素的事件被触发：" + this.id);
});
</script>
</body>

先子，后父。事件的触发顺序 * 自内向外 * ，这就是事件冒泡；

4.3.6 事件捕获

还是刚才创建两个 div ，一个大一些，一个小一些

<style>
#father {
width: 200px;
height: 200px;
background: black;
padding: 10px;
}
#child {
width: 100px;
height: 100px;
background: greenyellow;
}
</style>
<body>
<div id="father">
<div id="child"></div>
</div>
<script>
document.getElementById("father").addEventListener("click",function(){
alert("父级：" + this.id);
},true);
document.getElementById("child").addEventListener("click",function(){
alert("子级：" + this.id);
},true);
</script>
</body>

先父 , 后子。事件触发顺序变更为 * 自外向内 * ，这就是事件捕获；

4.4 面向对象OOP

使用 Object 创建通用对象

var user = new Object();
user.name = "吕布";
user.age = 21;
user.say = function(){
console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
}
user.say();
var dog = new Object();
dog.nickname = "屎尿多";
dog.wang = function(){
console.log("我饿了，我要拆家了！");
}
dog.wang();

使用构造函数

function userinfo(name , age){
this.name = name;
this.age = age;
this.say = function(){
console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
}
}
var user = new userinfo("詹姆斯",35);
user.say();

使用直接量

var user = {
username : "孙悟空",
age : 527,
say : function(){
console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
}
};
user.say();

4.5 JSON

大家在互联网上来回传递数据，如果没有一个统一的格式，解析起来的难度很大（每个人的编码喜

好不一样）

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

易于人阅读和编写，同时也易于机器解析和生成

{

属性 1 ：值 1 ，

属性 2 ：值 2 ，

。。。。

}

<script>
var json1 = { username: "吕布", age: 31 };
console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁");
// json数组
var josnarr = [{ name: "貂蝉", age: 18 }, { name: "小乔", age: 17 }];
console.log("貂蝉" + josnarr[0].age + "岁了");
console.log("小乔" + josnarr[1].age + "岁了");
// 复杂的json对象
var long = {
name: "赵云",
sex: "男",
hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"]
};
console.log(long.name + "的主攻武器：" + long.hobby[1]);
</script>

5. BOM操作

就是 javascript 对浏览器的一些常规操作的方法

5.1 window对象

<button onclick="kai()">极速入职</button>
<script>
function kai(){
window.open("http://lagou.com" , "拉勾网" ,
"width=500,height=300,left=400");
// window.open("http://lagou.com" , "拉勾网" , "fullscreen=yes"); // IE才
生效
}
</script>

5.1.1 screen屏幕对象

我想知道我的电脑屏幕多大？实际上，得到的就是分辨率

<body>
<button onclick="kai()">求大小</button>
</body>
<script>
function kai() {
alert(window.screen.width + "|" + window.screen.height);
}
</script>

5.1.2 location定位

包含有关当前 URL 的信息，通常用来做页面跳转

<button onclick="test()">测试</button>
<script>
function test(){
console.log( "当前页面的URL路径地址："+ location.href );
location.reload(); // 重新加载当前页面（刷新）
location.href = "http://lagou.com"; // 跳转页面
}
</script>

5.1.3 history浏览器历史

history 对象会记录浏览器的痕迹

a.html

<a href="b.html">去b页面</a>

b.htm

<button onclick="hui()">返回</button>
<script>
function hui(){
//history.go(-1); //上一级页面
history.back(); // 与go(-1)是等价的
}
</script>

5.1.4 navigator 导航（了解）

window.navigator 对象包含有关访问者浏览器的信息 ;

<script>
var str = "";
str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>";
str += "<p>浏览器的名称："+ navigator.appName+"</p>";
str += "<p>浏览器的版本："+ navigator.appVersion+"</p>";
str += "<p>硬件平台："+ navigator.platform+"</p>";
str += "<p>用户代理："+ navigator.userAgent +"</p>";
str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>";
document.write(str);
</script>

5.1.5 存储对象

用起来和我们在 java 中 map 很相似，都是键值对的方式存数据

5.1.5.1 本地存储 localStorage

在关闭窗口或标签页之后将会删除这些数据

保存数据

localStorage.setItem("name","curry");

提取数据

localStorage.getItem("name");

删除数据

localStorage.removeItem("name");

多样化操作

// 三种方式保存数据
localStorage["a"] = 1;
localStorage.b = 2;
localStorage.setItem("c",3);
// 查看数据类型
console.log( typeof localStorage["a"] )
console.log( typeof localStorage["b"] )
console.log( typeof localStorage["c"] )
// 第一种方式读取
var a = localStorage.a;
console.log(a);
// 第二种方式读取
var b = localStorage["b"];
console.log(b);
// 第三种方式读取
var c = localStorage.getItem("c");
console.log(c);

5.1.5.2 会话存储 sessionStorage

会话，就是保持浏览器别关闭。

关闭浏览就等于结束了一次会话。

开启浏览器就意味着创建了一次会话。

保存数据

sessionStorage.setItem("name", "klay");

提取数据

var lastname = sessionStorage.getItem("name");

删除指定键的数据

sessionStorage.removeItem("name");

删除所有数据

sessionStorage.clear();

案例：记录点击了几下按钮

<button onclick="dian()">点我</button>
<h3 id="result"></h3>
<script>
function dian(){
if( sessionStorage.getItem("clickCount") ){
sessionStorage.setItem("clickCount",
Number(sessionStorage.getItem("clickCount")) + 1);
}else{
sessionStorage.setItem("clickCount", 1);
}
document.getElementById("result").innerHTML = "已经点击了"+
sessionStorage.getItem("clickCount") +"次！"
}
</script>

5.2 计时操作

5.2.1 周期性定时器 setInterval

setInterval(1,2) ：周期性触发代码 exp （常用）

1 ：执行语句

2 ：时间周期，单位为毫秒

案例：闪烁的字体（ 1 秒 1 变色）

<body>
<h1 id="title">拉勾网：极速入职</h1>
<script>
var colors = ["red","blue","yellow","pink","orange","black"];
var i = 0;
function bian(){
document.getElementById("title").style.color = colors[i++];
if(i == colors.length){
i = 0; // 颜色重新开始
}
}
setInterval(bian,100); // 每隔0.1秒，执行一次bian函数
</script>
</body>

案例：在闪烁字体的基础上扩展，闪烁的电子时钟

<body>
<h1 id="title"></h1>
<script>
var colors = ["red","blue","yellow","pink","orange","black"];
var i = 0;
function bian(){
document.getElementById("title").style.color = colors[i++];
if(i == colors.length){
i = 0; // 颜色重新开始
}
}
function time(){
var d = new Date();
var str = d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"号
"+d.getHours()+"点"+d.getMinutes()+"分"+d.getSeconds()+"秒";
document.getElementById("title").innerHTML = str;
}
setInterval(bian,100); // 每隔1秒，执行一次变色函数bian
setInterval(time,1000); // 每隔1秒，执行一次时间函数time
</script>
</body>

5.2.2 停止定时器 clearInterval

案例：模拟年会抽奖

<body>
<img id="tu" src="../lagou-html/img/1.jpg" width="50%" />
<br />
<button onclick="begin()">开始</button>
<button onclick="stop()">停止</button>
<script>
var arr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
function begin() {
timer = setInterval(bian, 100); // 没有使用var，所以timer是全局变量
}
function stop() {
clearInterval(timer); // 停止定时器
}
function bian() {
var i = Math.floor(Math.random() * arr.length); // 0-4
document.getElementById("tu").src = "../lagou-html/img/" + arr[i];
}
</script>
</body>

5.2.3 一次性定时器 setTimeout

相当于延迟的效果，只执行一次

<script>
function bian(){
document.body.style.backgroundColor = "red";
}
//3秒之后调用
setTimeout(bian,3000);
</script>

java求职学习day32

JavaScript 详解课程目标： 1 、 JavaScript 介绍 2 、 HTML 和 JavaScript 结合方式 3 、 JavaScript 的使用 4 、 DOM 操作 5 、 BOM 操作 1. JavaScript介绍 (1)虽然是 java 作为前缀，但 java 和 javascript 的关系，就像老婆和老婆…...

编程日记 2025/5/9 15:11:28

【Markdown语法】锚点机制：跳转任意位置

最近写文章时，发现有一个需求：想要实现一种点击跳转到文档中任意位置的功能，这就是锚点机制，就像游戏中的传送锚点，于是写成文章记录一下使用方式。本文将详细介绍如何使用Markdown创建文档内部跳转（即锚…...

编程日记 2025/5/4 17:56:19

Docker安装pypiserver私服

Docker安装pypiserver私服 1 简介 Python开源包管理工具有pypiserver、devpi和Nexus等，pypiserver安装部署比较简单，性能也不错。搭建pypiserver私服，可以自己构建镜像，也可以使用官网的docker镜像。 # Github地址 https://g…...

编程日记 2025/5/9 9:25:28

基于微信小程序的居住证申报系统设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/5/9 10:49:37

网站改HTTPS方法

默认的网站建设好后打开的样子那看起来像是钓鱼网站，现在的浏览器特别只能，就是你新买来的电脑默认的浏览器同样也会出现这样“不安全”提示。传输协议启动了向全球用户安全传输网页内容的流程。然而，随着HTTPS的推出，传输协议通…...

编程日记 2025/5/1 22:49:00

什么是三层交换技术？与二层有什么区别？

什么是三层交换技术？让你的网络飞起来！ 一. 什么是三层交换技术？二. 工作原理三. 优点四. 应用场景五. 总结前言点个免费的赞和关注，有错误的地方请指出，看个人主页有惊喜。作者：神的孩子都在歌唱大家好…...

编程日记 2025/5/9 13:42:16

极客说｜利用 Azure AI Agent Service 创建自定义 VS Code Chat participant

作者：卢建晖 - 微软高级云技术布道师「极客说」是一档专注 AI 时代开发者分享的专栏，我们邀请来自微软以及技术社区专家，带来最前沿的技术干货与实践经验。在这里，您将看到深度教程、最佳实践和创新解决方案。关注「极客说」&a…...

编程日记 2025/5/9 13:52:41

Rust语言进阶之标准输入: stdin用法实例(一百零五)

简介： CSDN博客专家、《Android系统多媒体进阶实战》一书作者新书发布：《Android系统多媒体进阶实战》🚀 优质专栏： Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏： 多媒体系统工程师系列【…...

编程日记 2025/5/9 14:29:09

力扣刷题思路

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言递归70. 爬楼梯112. 路径总和509. 斐波那契数分治169. 多数元素240.搜索二维矩阵 II --- 二分查找单调栈 ---「找最近一个比当前值大/小」的问题739. 每日温度…...

编程日记 2025/5/9 13:45:43

一、搭建实验拓扑图二、基本设备配置设备接口IP地址子网掩码网关PC1E0/0/110.0.1.1255.255.255.0N/APC2E0/0/110.0.1.2255.255.255.0N/APC3E0/0/110.0.1.3255.255.255.0N/APC4E0/0/110.0.1.4255.255.255.0N/APC5E0/0/110.0.1.6255.255.255.0N/Aserver-1E0/0/110.0.1.5255.2…...

编程日记 2025/5/4 12:24:56

音频进阶学习十二——Z变换

文章目录前言一、Z变换1.Z变换的作用2.Z变换公式3.Z的状态表示1） r 1 r1 r12） 0 < r < 1 0<r<1 0<r<13） r > 1 r>1 r>1 4.关于Z的解释二、收敛域1.收敛域的定义2.收敛域的表示方式3.ROC的分析1）当 …...

编程日记 2025/5/6 7:30:14

理解推理型大语言模型

构建和改进推理模型的方法与策略本文描述了构建推理模型的四种主要方法，以及我们如何增强大型语言模型（LLM）的推理能力。我希望这能为你提供有价值的见解，并帮助你了解这一领域快速发展的文献和热潮。在2024年，LLM…...

编程日记 2025/5/9 14:51:38

【Brinson 绩效归因模型】

Brinson 绩效归因模型 1、前言2、Brinson模型介绍2.1 归因方式2.1.1 BHB 超额收益分解方案2.1.2 BF 超额收益分解方案 2.2 多期 Brinson 模型 1、前言如此之多的基金，收益率各有不同，即使同等收益率的基金也各有不同的成因。在这种形势下，广…...

编程日记 2025/5/9 14:35:39

如何轻松将Matlab生成的图表嵌入PowerPoint演示文稿

文章目录 Matlab将生成的图添加PPT中一、Matlab脚本1.添加图片函数2.使用示例总结 Matlab将生成的图添加PPT中在许多科学、工程和商业领域，Matlab作为一款强大的数值计算和可视化工具，被广泛应用于数据分析和模型构建。然而，当涉及到分享这…...

编程日记 2025/5/9 14:48:55

组合(力扣77)

从这道题开始，我们正式进入回溯算法的学习。之前在二叉树中只是接触到了一丢丢，而这里我们将使用回溯算法解决很多经典问题。那么这道题是如何使用回溯算法的呢？在讲回溯之前，先说明一下此题是如何递归的。毕竟回溯递归不分家&a…...

编程日记 2025/5/6 7:49:27

2.7学习

crypto buu-还原大师仔细阅读题目，这里有一段字符串，但是其中有四个大写字母被替换成了‘？’，那么我们写脚本：首先将四个问号均换成26个大写字母并且组成不同的组合， 所以有四个循环让四个问号都遍历26个…...

编程日记 2025/5/6 7:34:26

[开源/教程]使用Ollama+ESP32实现本地对话助手(可接入deepseek等模型)

[开源/视频教程]使用OllamaESP32实现本地对话助手(可接入deepseek等模型) 简介使用ollama实现本地模型的定制, 可以做到数据不泄露以及绕开检测的效果, 之后使用嘉立创的esp32开发板实现简单的对话助手同时接入本文档, 可以直接使用AI对话的方式进行文档处理 XuSenfeng/ai…...

编程日记 2025/5/9 4:39:05

Swagger2 自定义排序

分享一下SpringSwagger2在线文档自定义排序的代码。这里参考swagger2 接口排序_swagger接口排序-CSDN博客提供的思路，并在此基础上做了优化。 1、引用pom信息 <dependency><groupId>io.swagger</groupId>&l…...

编程日记 2025/5/7 3:36:51

sentinel的限流原理

Sentinel 的限流原理基于流量统计和流量控制策略，通过动态规则对系统资源进行保护。其核心设计包括以下几个关键点： 流量统计模型：滑动时间窗口 Sentinel 使用滑动时间窗口算法统计单位时间内的请求量，相比传统的固定时间窗…...

编程日记 2025/5/4 7:19:54

Mac 部署Ollama + OpenWebUI完全指南

文章目录 💻 环境说明🛠️ Ollama安装配置1. 安装[Ollama](https://github.com/ollama/ollama)2. 启动Ollama3. 模型存储位置4. 配置 Ollama 🌐 OpenWebUI部署1. 安装Docker2. 部署[OpenWebUI](https://www.openwebui.com/)（可视化…...

编程日记 2025/5/9 13:47:31

C/C++ 面试智能指针

说下你对智能指针的理解回答1: 因为C使用内存的时候很容易出现野指针、悬空指针、内存泄露的问题。所以C11引入了智能指针来管理内存。有四种： auto_ptr：已经不用了unique_ptr：独占式指针，同一时刻只能有一个指针指向同一个对…...

编程日记 2025/5/9 14:56:08

Halcon缓存？内存泄漏？

目录 1、前言 2、图片缓存 3、全局内存缓存 4、临时内存缓存 5、处理 HALCON 中的疑似内存泄漏 6、其他 1、前言除⾮必要，否则不建议修改 HALCON 自带的缓存设置。 2、图片缓存图像通常需要大量内存，而分配大块内存的过程较慢。因此，当释放图像时，HALCON并…...

编程日记 2025/5/9 13:53:34

升级 SpringBoot3 全项目讲解 — 周边店铺展示功能如何实现

学会这款 🔥全新设计的 Java 脚手架 ，从此面试不再怕！ 1. 升级 Spring Boot 到 3.x 在升级 Spring Boot 之前，我们需要确保项目的依赖和配置与新版本兼容。以下是升级的主要步骤： 1.1 更新 pom.xml 文件首先&#…...

编程日记 2025/5/9 13:21:52

Git(分布式版本控制系统)系统学习笔记【并利用腾讯云的CODING和Windows上的Git工具来实操】

Git的概要介绍 1️⃣ Git 是什么？ Git 是一个分布式版本控制系统（DVCS），用于跟踪代码的变更、协作开发和管理项目历史。由 Linus Torvalds（Linux 之父）在 2005 年开发，主要用于代码管理。…...

编程日记 2025/5/9 13:53:34

光学和光子学模拟工具在 AR/VR 中的作用

AR/VR 中的光学和光子学增强现实 (AR) 和虚拟现实 (VR) 站在数字进化的前沿。光学和光子学这一复杂的科学深入研究了光的产生、检测和操控，在这一转变中发挥着至关重要的作用。图 1 (a) 展示了 AR 系统的设计，强调了光学的关键作用。该图描绘了光的旅…...

编程日记 2025/5/9 1:32:32

大模型产品Deepseek（四）、本地安装部署（Ollama方式）

Ollama与DeepSeek的本地安装与部署教程（Windows/MacOS）在许多AI应用场景中，您可能希望将智能模型本地化，以便更高效地处理数据并减少对外部云服务的依赖。本文将介绍如何在Windows和macOS上直接安装和配置Ollama，以及如何基于Ollama平台部署DeepSeek模型并进行本地交互。…...

编程日记 2025/5/7 15:26:17

visual studio安装

一、下载Visual Studio 访问Visual Studio官方网站。下载 Visual Studio Tools - 免费安装 Windows、Mac、Linux 在主页上找到并点击“下载 Visual Studio”按钮。选择适合需求的版本，例如“Visual Studio Community”（免费版本）&#x…...

编程日记 2025/5/9 13:38:58

AI大模型——DeepSeek模型部署实战

摘要文章主要介绍了DeepSeek大模型的本地部署方法、使用方式以及API接入相关内容。首先指出可通过下载Ollama来部署DeepSeek-R1模型，并给出了模型不同参数版本及存储信息。接着说明了如何通过Chatbox官网下载并接入DeepSeek API，以及如何接入本地部署模…...

编程日记 2025/5/2 1:25:46

音视频的文件封装——AVI、MP4、MKV

3.MKV (Matroska Video File) Matroska （俄语： матроска ）是一种多媒体封装格式，可把多种不同编码的影像、不同格式的音频、不同语言的字幕封装到一个文件内。也是一种开放源代码的多媒体封装格式。 Matroska 支持多种文件…...

编程日记 2025/5/9 14:17:11

讯飞绘镜（ai生成视频）技术浅析（五）：视频生成

讯飞绘镜（AI生成视频）是一种先进的AI视频生成技术，能够将静态的分镜画面转换为动态视频，并使画面中的元素按照一定的逻辑和动作进行动态展示。一、讯飞绘镜视频生成技术概述讯飞绘镜的视频生成技术主要包含以下几个核心模块： 1.视频生成模型：包括生成对抗网络（GAN）…...

编程日记 2025/5/4 18:19:02

【FPGA】 MIPS 12条整数指令【3】

实现乘除修改框架 EX：实现带符号乘除法和无符号乘除法 HiLo寄存器：用于存放乘法和除法的运算结果。Hi、Lo为32bit寄存器。电路描述与实现RegFile思想一致仿真代码 DataMem.v include "define.v"; module DataMem(input wire clk,input…...

编程日记 2025/5/6 7:04:40

【补充】RustDesk一键部署及账号登录配置

前言之前分享的配置rustdesk的帖子只是搭建了一个简易服务器，仅能实现简单的远程桌面功能。在后续的使用中切换设备使用时无法看到之前连接的设备，必须知道每个设备的id号，才能在新设备上连接。数据无法在设备间迁移，感觉很麻烦…...

编程日记 2025/5/9 13:56:09

2025.2.6 数模AI智能体大更新，更专业的比赛辅导，同提示词效果优于gpt-o1/o3mini、deepseek-r1满血

本次更新重新梳理了回复逻辑规则，无任何工作流，一共3.2k字细节描述。具体效果可以看视频，同时也比对了gpt-o1、gpt-o3mini、deepseek-r1-67BI，从数学建模题目解答上来看，目前我的数模AI智能体具有明显优势。 AI智能体优…...

编程日记 2025/5/9 13:48:24

昇腾，Ascend，NPU，mindie，镜像，部署vllm：第3篇，补档，没事可以看看这个readme

文章目录前言文件位置已改变atb model和mindie的关系前言在之前的版本中，我们提到了一个帮助文档（Readme），这个文档告诉我们，当时的mindie版本不支持0.5b版本的通义千问2.5 我现在就很好奇，新版的mindie，是否支持0.5b的版本呢？文件位置已改变之前的文件位置： …...

编程日记 2025/5/9 13:44:51

PbootCMS 修改跳转提示，修改笑脸时间

在使用时，每次都提示这个： 修改方法： 修改跳转时间：找到 handle.php 文件编辑 ，调整 setTimeout 函数的时间参数。修改提示文字：编辑 handle.php 文件，修改提示文字的内容。隐藏提示页面&am…...

编程日记 2025/5/9 14:38:24

Python办公笔记——将csv文件转Json

目录专栏导读1、背景2、库的安装3、代码1—自定义表头4、代码2—全字段5、代码3—全字段总结专栏导读 🌸 欢迎来到Python办公自动化专栏—Python处理办公问题，解放您的双手 🏳️‍🌈 博客主页：请点击——> 一晌…...

编程日记 2025/5/9 13:50:58

25/2/7 ＜机器人基础＞雅可比矩阵计算雅可比伪逆

雅可比矩阵计算雅可比矩阵的定义假设我们有一个简单的两个关节的平面机器人臂，其末端执行器的位置可以表示为： 其中： L1 和 L2 是机器人臂的长度。θ1 和 θ2是关节的角度。计算雅可比矩阵雅可比矩阵 JJ 的定义是将关节速度与末…...

编程日记 2025/5/9 14:23:25

流媒体缓存管理策略

缓存管理策略是指为了优化性能、资源使用和用户体验而对缓存数据进行管理的方法和规则。以下是一些常见的缓存管理策略： 1. LRU（Least Recently Used，最近最少使用） 原理：当缓存满了，需要腾出空间时&…...

编程日记 2025/5/9 14:40:13

【Sql Server】sql server 2019设置远程访问，外网服务器需要设置好安全组入方向规则

大家好，我是，欢迎来到《小5讲堂》。这是《Sql Server》系列文章，每篇文章将以博主理解的角度展开讲解。温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！ 目录前言1、无法链接2、数…...

编程日记 2025/5/9 14:09:51

阿里云 | DeepSeek人工智能大模型安装部署

ModelScope是阿里云人工智能大模型开源社区 ModelScope网络链接地址 https://www.modelscope.cn DeepSeek模型库网络链接地址 https://www.modelscope.cn/organization/deepseek-ai 如上所示，在阿里云人工智能大模型开源社区ModelScope中，使用阿里云…...

编程日记 2025/5/9 13:46:36

Spring Test 教程大纲

Spring Test 教程大纲目标：基于 JUnit 5，系统学习 Spring Test 的核心原理、注解使用、测试框架集成及扩展开发。第 1 章：Spring Test 简介与核心原理 1.1 Spring Test 的作用与优势简化 Spring 应用的单元测试与集成测试。核心目标&am…...

编程日记 2025/5/9 14:57:06

MySQL数据库基础（创建/删除数据库/表）

一、数据库的操作 1.1 显示当前数据库语法：show databases； <1>show 是一个关键字，表示要执行的操作类型 <2>databases 是复数，表示显示所有数据库上面的数据库中，除了java113，其它的数据库…...

编程日记 2025/5/5 11:57:33

Llama最新开源大模型Llama3.1

Meta公司于2024年7月23日发布了最新的开源大模型Llama 3.1，这是其在大语言模型领域的重要进展。以下是关于Llama 3.1的详细介绍： 参数规模与训练数据 Llama 3.1拥有4050亿（405B）参数，是目前开源领域中参数规模最大的…...

编程日记 2025/5/9 14:18:03

PHP 面向对象编程详解

PHP 面向对象编程详解引言 PHP 作为一种广泛使用的服务器端脚本语言，自诞生以来就以其简洁、易学、高效的特点受到开发者的喜爱。随着互联网技术的不断发展，PHP 也在不断地进化，其中面向对象编程（OOP）已经成为 PHP …...

编程日记 2025/5/6 15:03:52

YOLOv11-ultralytics-8.3.67部分代码阅读笔记-files.py

files.py ultralytics\utils\files.py 目录 files.py 1.所需的库和模块 2.class WorkingDirectory(contextlib.ContextDecorator): 3.def spaces_in_path(path): 4.def increment_path(path, exist_okFalse, sep"", mkdirFalse): 5.def file_age(path__fi…...

编程日记 2025/5/5 12:38:59

安卓开发，打开PDF文件

1、把PDF文件复制到raw目录下 （1）新建一个Android Resource Directory (2)Resource type 改成 raw (3) 把PDF文件复制到raw目录下 2、activity_main.xml <?xml version"1.0" encoding"utf-8"?> <LinearLayoutxmlns:and…...

编程日记 2025/5/8 14:12:28

标准模版——添加蜂鸣器及继电器功能模块

一、peripheral.h代码 #include "STC15F2K60S2.H"void Set_Peripheral(unsigned char Buzzer_Status,unsigned char Relay_Status); 二、peripheral.c代码 #include "peripheral.h"void Set_Peripheral(unsigned char Buzzer_Status,unsigned char Rela…...

编程日记 2025/5/4 14:48:34

嵌入式工程师面试经验分享与案例解析

嵌入式工程师岗位受到众多求职者的关注。面试流程严格，技术要求全面，涵盖C/C编程、数据结构与算法、操作系统、嵌入式系统开发、硬件驱动等多个方向。本文将结合真实案例，深入剖析嵌入式工程师的面试流程、常见问题及应对策略，帮助…...

编程日记 2025/5/8 17:03:59

《云夹：高效便捷的书签管理利器》

在信息爆炸的时代，我们每天都会浏览大量的网页，遇到许多有价值的内容。如何高效地管理这些网页书签，以便随时快速访问，成为了一个重要的问题。云夹作为一款出色的书签管理工具，为我们提供了完美的解决方案。强大的功能…...

编程日记 2025/5/2 5:18:46

ASP.NET Core标识框架Identity

目录 Authentication与Authorization 标识框架（Identity） Identity框架的使用初始化自定义属性案例一：添加用户、角色案例二：检查登录用户信息案例三：实现密码的重置步骤 Authentication与Authorizatio…...

编程日记 2025/5/6 19:59:50