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

JavaScript——DOM编程、JS的对象和JSON

news 文章来源：https://blog.csdn.net/Helen_1997_1997/article/details/143755545 2024/11/27 4:02:45

一、DOM编程

DOM(Document Object Model)编程：就是使用document对象的API，完成对网页HTML文档进行动态修改，以实现网页数据，和样式动态变化效果的编程。

(一)DOM获取元素的多种方法

1.查找元素的函数

getElementById("id值")                      查找到唯一一个元素
getElementsByClassName("class值")           查找指定class的元素数组
getElementsByTagName("标签名")              查找指定标签名的元素document.getElementById("myDiv").getElementsByTagName("input")    在元素内部查找指定元素
document.getElementById("myDiv").getElementsByClassName("mycls")  在元素内部查找指定元素

2.查找元素的属性

dom树中根据节点关系查找元素，注意这里的方法后面没有()

子节点：children                   所有子节点(集合)firstElementChild          元素lastElementChild           元素
兄弟(同级)节点：nextElementSibling         下一个兄弟(同级)节点previousElementSibling     上一个兄弟(同级)节点
父节点：parentElement              父元素节点

代码示例：

<ul id="myUl"><li>列表1</li><li>列表1</li><li id="myli">列表1</li><li>列表1</li><li>列表1</li>
</ul>
<div>abc</div>// Prototype 原型
console.log(document.getElementById("myUl").children);    //元素集合   HTMLCollection
console.log(document.getElementById("myUl").childNodes);    //节点集合 NodeList 不要用
console.log(document.getElementById("myUl").getElementsByTagName("li"));console.log(document.getElementById("myUl").firstChild);    //节点 如果有空白文本 会获得文本
console.log(document.getElementById("myUl").firstElementChild);    //元素节点console.log(document.getElementById("myUl").lastElementChild);    //元素节点console.log(document.getElementById("myli")
.nextElementSibling.nextElementSibling
.previousElementSibling.previousElementSibling
.previousElementSibling);console.log(document.getElementById("myli").parentElement.parentElement)

(二)DOM操作属性

所有的效果都是找元素改属性

读属性：元素.属性
写属性：元素.属性 = "xxx"

函数形式操作属性：
Attribute 属性
Properties 属性

读属性：getAttribute("属性名")
写属性：setAttribute("属性名","属性值")

两套不完全体通用 (js语法特点)

<body><input type="text" id="myText" />
</body>
<script>document.getElementById("myText").value = "你好";document.getElementById("myText").setAttribute("val"+"ue","你不好");console.log(document.getElementById("myText").getAttribute("value"));  // 你不好console.log(document.getElementById("myText").getAttribute("val"+"ue"));  // 你不好
</script>

element.value：这是直接操作 DOM 对象的 value 属性。对于 <input> 元素，value 会直接影响输入框的显示内容。因此 document.getElementById("myText").value = "你好"; 会直接把输入框中显示的内容改为 "你好"。

setAttribute("value", ...)：这是操作 DOM 属性，而不是直接操作 value 属性。这会更新元素的 value 属性，但并不会立即影响 <input> 的显示值。setAttribute("value", "你不好") 修改的是 HTML 属性，而 JavaScript 的 element.value 会优先显示设置过的值（即你好）。这就是为何 console.log 会显示 "你不好"，但页面上显示的是 "你好"。

(三)动态dom操作

创建元素(不会出现在dom树上，虚拟dom元素支持属性设置)	document.createElement("li")
追加子元素(可以把元素渲染出来挂在dom树上)	元素.appendChild(newEle)
在指定元素前添加	元素.insertBefore(newEle,指定的元素)
复制节点	元素.cloneNode(true) bol值决定子节点是否赋值默认值false
删除元素	元素.removeChild(删除的节点); 通常搭配查找元素使用

1.动态添加元素

步骤：

生成出元素(虚拟dom结构可以设置属性页面上没有)
渲染(通过特定api 把元素显示到页面中的某个为止挂载到dom树上)

添加li：

<body><input type="button" value="添加元素" onclick="addEle()" /><ul id="myUl"><li>测试li</li></ul>
</body>
<script>function addEle() {// 创建虚拟的dom结构let newEle = document.createElement("li");// 可以对生成的虚拟dom结构的属性进行操作newEle.innerHTML = "newLi";// 向dom数添加元素的动作叫做渲染// 注意：渲染必须要做，否则页面不显示新的元素document.getElementById("myUl").appendChild(newEle);// 也可以在添加新元素后设置属性// 双标签使用innerHTML进行赋值//   document.getElementById("myUl").lastElementChild.innerHTML = "newLi";}
</script>

添加button：

<input type="button" value="添加元素" onclick="addEle()" />
<ul id="myUl"><li><input type="button" value="测试按钮" /></li>
</ul>function addEle() {// 创建虚拟的dom结构let newEle = document.createElement("li");/* 常规操作let newBtn = document.createElement("input");newBtn.type = "button";newBtn.value = "测试按钮";newEle.appendChild(newBtn); */// 简化dom操作// innerHTML可以解析html标签newEle.innerHTML = "<input type='button' value='测试按钮' style='font-weight: bold;'>";// 渲染document.getElementById("myUl").appendChild(newEle);
}

2.其他动态操作

<input type="button" value="添加元素" onclick="addEle()" />
<input type="button" value="指定元素位置添加" onclick="addEle2()" />
<input type="button" value="复制元素" onclick="copyEle()" />
<input type="button" value="删除元素" onclick="delEle()" />
<ul id="myUl"><li id="myLi"><input type="button" value="测试按钮" /></li>
</ul>function addEle2() {let newEle = document.createElement("li");newEle.innerHTML = "newLi...";document.getElementById("myUl").insertBefore(newEle, document.getElementById("myLi"));
}
function copyEle() {let newEle = document.getElementById("myLi").cloneNode(true);document.getElementById("myUl").appendChild(newEle);
}
function delEle() {/*// 删除头部的第一个节点document.getElementById("myUl").removeChild(document.getElementById("myLi").firstElementChild); */// 删除指定的子元素document.getElementById("myUl").removeChild(document.getElementById("myLi"));
}

3.简化dom操作

innerHTML可以解析html标签

1.追加和替换可以借助innerHTML可以解析html标签的特征完成
2.删除用原生api实现

<input type="button" value="添加元素" onclick="addEle()" />
<input type="button" value="删除元素" onclick="delEle()" />
<ul id="myUl"><li id="myLi"><input type="button" value="测试按钮" /></li>
</ul>function addEle() {let content = `<li id="myLi"><input type="button" value="新按钮" /></li>`;document.getElementById("myUl").innerHTML += content;
}
function delEle() {document.getElementById("myUl").removeChild(document.getElementById("myUl").lastElementChild);
}

4.动态table操作

JS中对table描述成⼆维数组 (行数组和单元格数组)：

table对象.rows ⾏数组

row对象.cells 单元格数组

找到指定的单元格可以通过⾏索引+单元格索引查找：

table对象.rows[idx].cells[idx]

动态操作table⽅法：

insertRow(idx) 添加⾏

insertCell(idx) 新增单元格(列)

deleteRow(idx) 删除列

<input type="button" value="添加一行数据" onclick="addRow()" />
<input type="button" value="添加多行数据" onclick="addRow2()" />
<input type="button" value="删除一行数据" onclick="deleteOneRow()" />
<input type="button" value="清空表格数据" onclick="clearRow()" />
<table id="myTable" border="1"><tr><th>编号</th><th>名称</th><th>住址</th></tr><tr><td>1</td><td>尼古拉斯赵四</td><td>象牙山</td></tr>
</table>

function addRow() {// insertRow  新建行 传入索引let newRow = document.getElementById("myTable").insertRow(2);// insertCell  相当于每一个td 传入索引let td1 = newRow.insertCell(0);let td2 = newRow.insertCell(1);let td3 = newRow.insertCell(2);// 编辑每一个td标签中的内容td1.innerHTML = "2";td2.innerHTML = "张三";td3.innerHTML = "北京";
}// 简化dom操作
// 批量添加的数据
let numArr = [[2, "张三", "北京"],[3, "李四", "上海"],[4, "王五", "深圳"],
];
function addRow2() {// table中都是双标签，所以可以使用innerHTML// 遍历数组添加for (let obj of numArr) {let content = ` <tr><td>${obj[0]}</td><td>${obj[1]}</td><td>${obj[2]}</td></tr>`;document.getElementById("myTable").innerHTML += content;}// 找到指定的单元格console.log(document.getElementById("myTable").rows[2].cells[2].innerHTML);
}function deleteOneRow() {document.getElementById("myTable").deleteRow(1);
}function clearRow() {let table = document.getElementById("myTable");// 获取表格的所有行let rows = document.getElementsByTagName("tr");for (let i = 1; i < rows.length; i++) {rows[i].innerHTML = "";}
}

二、JS的对象

(一)String对象

js中字符串： '' "" ``修饰的内容
js中处理字符串更多

let myStr = "abc123fnsabc";
console.log(myStr.indexOf("bc"));
console.log(myStr.indexOf("bc9")); // 对于不存在的字符串会返回-1// 判断指定字符串存在的方法
// if(myStr.lastIndexOf("bc") >= 0)
console.log(myStr.lastIndexOf("bc"));
console.log(myStr.substring(2, 4)); // c1
console.log(myStr.substr(2, 4)); // c123
// 分割字符串  根据指定的字符分割为数组
// 常用在有格式的字符串解析上
let myStr2 = "age=15;name=jack;addr=streetABC";
// ['age=15', 'name=jack', 'addr=streetABC']
console.log(myStr2.split(";")[1].split("=")[1]);
//转大写 toUpperCase
console.log(myStr.toUpperCase()); // ABC123FNSABC
//转小写 toLowerCase
console.log(myStr.toLowerCase()); // abc123fnsabc
//字符串替换
console.log(myStr.replace("123", "你好")); // abc你好fnsabc

(二)Math对象

let myNum = 10.5;
//向上取整 ceil
console.log(Math.ceil(myNum)); // 11
//向下取整(直接舍去小数点后面的数字) floor
console.log(Math.floor(myNum)); // 10
//四舍五入 round
console.log(Math.round(myNum)); // 11
//绝对值   当不知道两个数(事件)之间的大小时，使用绝对值计算两个数之间的差值
let a = 1;
let b = 3;
console.log(Math.abs(a - b)); // 2
// 随机数 random 默认[0,1)
// [0-2]  +1  变成 [1-3)
console.log(parseInt(Math.random() * 3));
// Math.random() * 10
// 取整数部分的方法：parseInt    向上 1-10    向下 0-9   四舍五入 0-10(不要用，偏差大)
// 一般用向下取整，比最终要的值大1即可 例如，取[0,2] 乘以3即可
// 扩倍 移动区间

(三)Date对象

1.日期获取

// 获取当前运行的时间
console.log(new Date()); // Thu Nov 14 2024 15:15:57 GMT+0800 (中国标准时间)
// 获取指定日期的时间
// 2001-11-11 11:11:11
// 2021/12/12 12:12:12
console.log(new Date("2001-11-12 11:11:11"));
// Mon Nov 12 2001 11:11:11 GMT+0800 (中国标准时间)
console.log(new Date("2021/12/12 12:12:12"));
// Sun Dec 12 2021 12:12:12 GMT+0800 (中国标准时间)

2.日期计算

// 2.日期的毫秒数 当前日期的毫秒数
// 做日期计算
let nowDate = new Date();
console.log(new Date().getTime()); // 1731568685074
// 获取5天前的时间
console.log(nowDate.getTime() - 1000 * 60 * 60 * 24 * 5); // 1731136763045
console.log(new Date(nowDate.getTime() - 1000 * 60 * 60 * 24 * 5));
// Sat Nov 09 2024 15:18:10 GMT+0800 (中国标准时间)

3.日期显示

// 3. 根据需要 显示日期格式
// 获取年
let myYear = nowDate.getFullYear();
console.log(myYear);
//获取月 0-11
let myMonth = nowDate.getMonth() + 1;
console.log(myMonth);
//获取星期
let myDay = nowDate.getDay();
console.log(myDay);
//获取日期
let myDate = nowDate.getDate();
console.log(myDate);
//获取时
let myHours = nowDate.getHours();
console.log(myHours);
//获取分
let myMinutes = nowDate.getMinutes();
console.log(myMinutes);
//获取秒
let mySeconds = nowDate.getSeconds();
console.log(mySeconds);
let dateStr = `${myYear}年${myMonth}月${myDate}日 ${myHours}:${myMinutes}:${mySeconds} 星期${myDay}`;
console.log(dateStr);
// 2024年11月14日 15:19:45 星期4

(四)Array对象

数组表示数据的集合，在Java中：
        1.指定数据类型
        2.指定数组长度(不可变)
        3.数组是一种底层数据结构(需要在内存中直接占用空间)
js是弱类型语言：
js数组：1.没有加泛型的list
2.不需要指明数据类型
3.长度可变

1.数组创建

let newArr = new Array();
console.log(newArr);
let newArr2 = [];
console.log(newArr2);

2.数组中的内容

let newArr3 = [1, "abc", true, new Date(), [1, 2, 3]];
console.log(newArr3);
// 实际使用时，一般把相同数据类型的数据放入一个数组
let newArr4 = [4, 1, 3, 8, 6, 2];
console.log(newArr4);

3.数组常用方法

// join()：通过指定的字符串，将数组中的元素拼接为一个字符串
// join 把数组串转成字符串
// 经常与字符串的split方法对应起来 字符串 与 数组 互换
console.log(newArr4.join(";")); // 4;1;3;8;6;2
console.log(newArr4.join(";").split(";")); // ['4', '1', '3', '8', '6', '// 排序  排序规则  function(a,b){return a-b} a-b 升序 b-a降序
// 开发中一般是后端排序好传给前端
// 升序 a-b
console.log(newArr4.sort(function (a, b) {return a - b;})
); // [1, 2, 3, 4, 6, 8]
// 降序 b-a
console.log(newArr4.sort(function (a, b) {return b - a;})
); // [8, 6, 4, 3, 2, 1]// 当链表使用
/*newArr4.push("a")     队尾添加  返回值是数组的长度newArr4.pop()         队尾删除newArr4.unshift("a")  队头添加newArr4.shift()       队头删除
*/
newArr4.push("a"); // [8, 6, 4, 3, 2, 1, 'a']
console.log(newArr4);
newArr4.pop();
console.log(newArr4); // [8, 6, 4, 3, 2, 1]
newArr4.unshift("b");
console.log(newArr4); // ['b', 8, 6, 4, 3, 2, 1]
newArr4.shift();
console.log(newArr4); // [8, 6, 4, 3, 2, 1]// 删除指定索引位置的元素
// splice()动态操作数组元素方法
// splice(起始,个数,可以选参数)
// 如果没有可选参数 可以做删除
newArr4.splice(1, 2);
console.log(newArr4); // [8, 3, 2, 1]// 如果有可选参数   做替换 根据个数 与可选参数的个数 决定增加还是减少
newArr4 = [4, 1, 3, 8, 6, 2];
newArr4.splice(1, 2, "a");
console.log(newArr4); // [4, 'a', 8, 6, 2]newArr4 = [4, 1, 3, 8, 6, 2];
newArr4.splice(1, 2, "a", "b");
console.log(newArr4); // [4, 'a', 'b', 8, 6, 2]

4.数组的遍历

newArr4.forEach(function (data) {console.log(data);
});console.log(document.getElementById("btns").children);
// HTMLCollection(4) [input, input, input, input]// 获取元素集合  Prototype HTMLCollection
let eles = document.getElementById("btns").children;// Prototype不一样  Array 包含的函数和属性不同
// Array.from(eles); 方法把非Array的数组类型转成Array 就可以调用array的函数了let newEles = Array.from(eles);
console.log(newEles); // [input, input, input, input]
// 转换后 才可以用forEach遍历
newEles.forEach(function (data) {data.style.color = "red";
});/* 
eles.forEach(function (data) {console.log(data);
}); 
// Uncaught TypeError: eles.forEach is not a function
*/

三、JSON

通过JSON可以自定义对象。

1.创建JSON对象

let myStu = { "id": 1, "name": "zhangsan", "age": 18 };
console.log(myStu);
// 获取某个属性值
console.log(myStu.name);
// 修改属性值
myStu.name = "rose";
console.log(myStu);
// 新增属性
myStu.addr = "北京";
console.log(myStu);

2.JSON数据类型

key 字符串

value 任意类型

let myObj = {name: "jack",age: 15,birthDay: new Date(),study: function () {// this 指向当前json对象console.log(this);console.log(this.name + "在学习");},
};
console.log(myObj);
// 调用JSON中的函数对象
myObj.study(); // jack在学习

3.JSON书写格式

分为标准格式(前后端传递数据)和简化格式(纯前端使用)

// 3.1 标准格式 key带引号 指明是字符串
// let myStu = { "id": 1, "name": "zhangsan", "age": 18 };
// 3.2 简化格式 key的引号 可以省略不写
// let myStu = { id: 1, name: "zhangsan", age: 18 };// 前后端数据传递 使用标准json格式
let myStu2 = '{ "id": 1, "name": "zhangsan", "age": 18 }';
// 传递给后端时，要转成JSON对象，才能获取属性
console.log(JSON.parse(myStu2).name); // zhangsan// 纯前端使用     使用简化格式
// 简化格式转为JSON对象时会失败
/* let myStuStr = '{ id: 1, name: "zhangsan", age: 18 }';
console.log(JSON.parse(myStuStr).name); */
// Uncaught SyntaxError: Expected property name or '}' in JSON at position 2 (line 1 column 3) at JSON.parse (<anonymous>)

4.JSON与字符串互相转换

JSON.stringify(newStu) JSON对象转标准格式字符串
JSON.parse('{"ID":1,"name":"jack2","age":18}') 标准格式字符串转json对象

// JSON===>字符串
let myStu4 = { id: 1, name: "zhangsan", age: 18 };
console.log(JSON.stringify(myStu4));// 字符串===>JSON
// 注意：字符串转JSON时要使用标准格式
console.log(JSON.parse('{"ID":1,"name":"jack2","age":18}'));

5.JSON实际使用时，经常搭配数组使用

// 数组中套JSON
let students = [{ ID: 2, name: "jack1", age: 15 },{ ID: 2, name: "jack2", age: 15 },{ ID: 3, name: "jack3", age: 15 },
];
console.log(students[1].name); // jack2// JSON中套数组
let myClass = {className: 606,classAddr: "6楼606",students: [{ ID: 1, name: "jack1", age: 15 },{ ID: 2, name: "jack2", age: 15 },{ ID: 3, name: "jack3", age: 15 },],
};
console.log(myClass);// 遍历出每一个学生名字
myClass.students.forEach(function (data) {console.log(data.name);
});
// jack1   jack2   jack3

JavaScript——DOM编程、JS的对象和JSON

一、DOM编程 DOM(Document Object Model)编程：就是使用document对象的API，完成对网页HTML文档进行动态修改，以实现网页数据，和样式动态变化效果的编程。 (一)DOM获取元素的多种方法 1.查找元素的函数 getElementById("id值…...

编程日记 2024/11/20 20:59:27

SIMCom芯讯通A7680C在线升级:FTP升级成功；http升级腾讯云对象储存的文件失败；http升级私有服务器的文件成功

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…...

编程日记 2024/11/20 20:58:25

命令一把梭 wget https://download.geofabrik.de/asia/china-latest.osm.pbf docker pull osrm/osrm-backend docker run -t -v "${PWD}:/data" osrm/osrm-backend osrm-extract -p /opt/car.lua /data/china-latest.osm.pbf docker run -t -v "${PWD}:/data&q…...

编程日记 2024/11/20 20:57:24

Vue3 动态获取 assets 文件夹图片

我真服了Vue3 这个老六了,一个简单图片src 赋值搞得那么复杂. //item.type 是我遍历类型的类型参数 <img alt"吐槽大会" :src"getAssetUrl(item.type)" /> 基于 Vue2 的Webpack 处理,还不错,可以用/ 这种绝对路径,可以接受,虽然多了个require很不爽…...

编程日记 2024/11/20 20:56:21

＜项目代码＞YOLOv8 草莓成熟识别＜目标检测＞

YOLOv8是一种单阶段（one-stage）检测算法，它将目标检测问题转化为一个回归问题，能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法（如Faster R-CNN），YOLOv8具有更高的…...

编程日记 2024/11/20 20:55:18

代码随想录算法训练营第五十一天|Day51 图论

岛屿数量深搜 https://www.programmercarl.com/kamacoder/0099.%E5%B2%9B%E5%B1%BF%E7%9A%84%E6%95%B0%E9%87%8F%E6%B7%B1%E6%90%9C.html 思路 #include <stdio.h> #define MAX_SIZE 50 int grid[MAX_SIZE][MAX_SIZE]; int visited[MAX_SIZE][MAX_SIZE]; int N, M; …...

编程日记 2024/11/20 20:52:15

uniapp 自定义加载组件,全屏加载,局部加载（微信小程序）

效果图全屏加载页面加载使用局部加载列表加载里面使用使用gif html <template><view><view class"" v-if"typeFullScreen"><view class"loading" v-if"show"><view class""><i…...

编程日记 2024/11/20 20:51:13

STM32完全学习——系统时钟设置

一、时钟框图的解读首先我们知道STM32在上电初始化之后使用的是内部的HSI未经过分频直接通过SW供给给系统时钟，由于内部HSI存在较大的误差，因此我们在系统完成上电初始化，之后需要将STM32的时钟切换到外部HSE作为系统时钟，那么我…...

编程日记 2024/11/20 20:49:11

Github 2024-11-16Rust开源项目日报 Top10

根据Github Trendings的统计，今日(2024-11-16统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下：开发语言项目数量Rust项目10Go项目1Python项目1Lapce：用 Rust 编写的极快且强大的代码编辑器创建周期：2181 天开发语言：Rust协议类型：Apache License 2.0St…...

编程日记 2024/11/20 20:48:10

CH03_反射

第3章：反射本章目标掌握反射的原理熟悉反射的基本运用本章内容反射是什么 C# 编译运行过程首先我们在VS点击编译的时候，就会将C#源代码编译成程序集程序集以可执行文件 (.exe) 或动态链接库文件 (.dll) 的形式实现程序集中包含有Microsoft …...

编程日记 2024/11/20 20:45:06

vue2侧边导航栏路由

<template><div><el-menu:default-active"active"class"el-menu-vertical-demo"background-color"#545c64"text-color"#fff"active-text-col…...

编程日记 2024/11/20 20:44:02

core 不可变类型线程安全 record

当一个类型的对象在创建时被指定状态后，就不会再变化的对象，我们称之为不可变类型。这种类型是线程安全的，不需要进行线程同步，非常适合并行计算的数据共享。它减少了更新对象会引起各种bug的风险，更为安全。 System.D…...

编程日记 2024/11/20 20:42:00

linux之调度管理(8)-SMP cpu 的 psci启动

一、psci介绍 psci是arm提供的一套电源管理接口，当前一共包含0.1、0.2和1.0三个版本。它可被用于以下场景： （1）cpu的idle管理 （2）cpu hotplug以及secondary cpu启动 （3）系统shutdo…...

编程日记 2024/11/20 20:38:55

review-消息中间件MQ

RabbitMQ RabbitMQ，作为当今流行的开源消息代理软件，以其卓越的可靠性、灵活性和易用性在微服务架构和分布式系统中扮演着至关重要的角色。它不仅能够确保消息在不同系统组件间的高效传递，还能通过其高级消息队列协议（AMQP&#x…...

编程日记 2024/11/20 20:34:47

leetcode400第N位数字

代码 class Solution {public int findNthDigit(int n) {int base 1;//位数int weight 9;//权重while(n>(long)base*weight){//300n-base*weight;base;weight*10;}//n111 base3 weight900;n--;int res (int)Math.pow(10,base-1)n/base;int index n%base;return String…...

编程日记 2024/11/20 20:30:37

前端网页开发学习（HTML+CSS+JS）有这一篇就够！

目录 HTML教程 ▐ 概述 ▐ 基础语法 ▐ 文本标签 ▐ 列表标签 ▐ 表格标签 ▐ 表单标签 CSS教程 ▐ 概述 ▐ 基础语法 ▐ 选择器 ▐ 修饰文本 ▐ 修饰背景 ▐ 透明度 ▐ 伪类 ▐ 盒子模型 ▐ 浮动 ▐ 定位 JavaScript教程 ▐ 概述 ▐ 基础语法 ▐ 函数 …...

编程日记 2024/11/20 20:28:33

CSS遮罩：mask

CSS属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 // 一般用位图图片做遮罩 mask: url(~/assets/images/mask.png); mask-size: 100% 100%;// 使用 SVG 图形中的形状来做遮罩 mask: url(~/assets/images/mask.svg#star);…...

编程日记 2024/11/20 20:25:30

Swift闭包的本质

1 闭包的本质其实是一个引用类型：存储在堆空间上，由堆分配空间，且生命周期由ARC（自动引用计数机制）管理 2 捕获值：闭包会捕获上下文使用到的变量（引用类型会保持引用关系）&#xff…...

编程日记 2024/11/20 20:24:28

时代变迁对传统机器人等方向课程的巨大撕裂

2020年之后，全面转型新质课程规划，传统课程规划全部转为经验。农耕-代表性生产关系-封建分配制度主要生产力-人力工业-代表性生产关系-资本分配制度工业分为机械时代，电气时代，信息时代；主要生产力-人力转为人脑&…...

编程日记 2024/11/20 20:23:27

【算法设计与分析实训】第1关：求序列的最大字段和

务描述本关任务：编写用动态规划解决最大字段和问题。相关知识为了完成本关任务，你需要掌握：动态规划。编程要求给定由n个整数（可能为负数）组成的序列：a1,a2,……,an, 求该序列的最大子段和。当所有整…...

编程日记 2024/11/20 20:22:26

【澜舟科技-注册/登录安全分析报告】

前言由于网站注册入口容易被机器执行自动化程序攻击，存在如下风险： 暴力破解密码，造成用户信息泄露，不符合国家等级保护的要求。短信盗刷带来的拒绝服务风险 ，造成用户无法登陆、注册，大量收到垃圾短信的…...

编程日记 2024/11/20 20:20:24

【读书笔记-《网络是怎样连接的》- 7】Chapter3_2 路由器

本篇继续介绍路由器及其转发过程。 1 路由器内部结构路由器内部结构图如图所示。即主要包含左侧的包转发模块和右侧的端口模块。转发模块负责查找包的发送目的地，端口模块完成包的发送。通过安装不同的硬件，转发模块不仅可以支持以太网，也…...

编程日记 2024/11/20 20:19:22

Android Activity 基础接口知识和常见问题

Activity 知识点及问题点接口onMultiWindowModeChangedonConfigurationChanged 常见问题Android解决点击桌面图标，就重新启动应用程序问题接口 onMultiWindowModeChanged 定义 onMultiWindowModeChanged是Android中Activity类的一个回调方法。它会在活动&#xf…...

编程日记 2024/11/20 20:16:16

利用python 检测当前目录下的所有PDF 并转化为png 格式

以下是一个完整的 Python 脚本，用于检测当前目录下的所有 PDF 文件并将每一页转换为 PNG 格式： import os from pdf2image import convert_from_path# 设置输出图像的 DPI（分辨率） DPI 300# 获取当前目录 current_directory os…...

编程日记 2024/11/20 20:12:09

解决 Spring Boot 中 `Ambiguous mapping. Cannot map ‘xxxController‘ method` 错误

前言在使用 Spring Boot 开发 Web 应用时，经常会遇到各种各样的错误。其中一种常见的错误是 Ambiguous mapping. Cannot map ‘testController‘ method。本文将详细介绍这个错误的原因及解决方法，帮助开发者快速定位并解决问题。错误解释这个错误…...

编程日记 2024/11/20 20:03:57

C++ 函数返回值优化

本文中部分内容来自下面的文章，还有一部分来自智谱清言 C 返回值优化_c 局部变量返回优化-CSDN博客 elision:省略 copy elision：拷贝省略 RVO (Return Value Optimization)：返回值优化 ------ 我最近也遇到了上面博文中说到的问题&…...

编程日记 2024/11/20 20:01:54

c++源码阅读ThreadPool正文阅读

一. 简介本章我们开始阅读c git 高星开源项目ThreadPool, 这是一个纯c的线程池项目, 并且代码量极小, 非常适合新手阅读 git地址: progschj / ThreadPool 二. 前提知识为了面对不同读者对c掌握情况不同的情况, 这里我会将基本上稍微值得一说的前提知识点, 全部专门写成一篇…...

编程日记 2024/11/20 20:00:52

关于ES的查询

查询结果那么多字段都是什么？ 为什么会提到这个问题呢，因为默认ES查询的结果会有很多信息，我们可能并不希望要那么多数据，所以你需要了解这些字段都表示什么，并正确的返回和使用它们。 took– Elasticsearch 运行查询…...

编程日记 2024/11/20 19:57:47

数据结构初识

目录 1.初识 2.时间复杂度常见时间复杂度举例： 3.空间复杂度 4.包装类&简单认识泛型 4.1装箱和拆箱 5.泛型 6.泛型的上界 7.泛型方法 8.List接口 1.初识 1.多画图 2.多思考 3.多写代码 4.多做题牛客网-题库/在线编程/剑指offer 算法篇&#xff1a…...

编程日记 2024/11/20 19:56:44

保存数据到Oracle时报错ORA-17004: 列类型无效: 1111

1、问题描述： 关键信息：Mybatis；Oracle （1）保存信息到Oracle时报错： Caused by: org.apache.ibatis.type.TypeException: Error setting null for parameter #10 with JdbcType OTHER . Try setting a dif…...

编程日记 2024/11/20 19:55:42

有没有做代理商的明细网站/正规代运营公司

简介 yii2-redis 扩展为 Yii2 框架提供了 redis 键值存储支持。包括缓存（Cache）、会话存储处理（Session），并实现了 ActiveRecord 模式，允许您将活动记录存储在 redis 中。相关链接 yii2-redis 扩展网址…...

编程日记 2024/11/27 0:33:05

做网站可以不写代码/营销案例100例小故事

Linux修改时区的正确方法 CentOS和Ubuntu的时区文件是/etc/localtime，但是在CentOS7以后localtime以及变成了一个链接文件 [rootcentos7 ~]# ll /etc/localtime lrwxrwxrwx 1 root root 33 Oct 12 11:01 /etc/localtime -> /usr/share/zoneinfo/Asia/Shanghai…...

编程日记 2024/11/26 20:55:07

网站友情链接对方网站没有加入本站链接对本站有没有影响?/网站优化培训

目录一、PySide6概述二、安装PySide6三、设计界面四、响应UI操作五、打包部署一、PySide6概述近几年，受益于人工智能的崛起，Python语言几乎以压倒性优势在众多编程语言中异军突起，成为AI时代的首选语言。在很多情况下，我们想要以…...

编程日记 2024/11/26 15:55:10

英语可以做推广的亲子类网站/南京seo网络推广

oracle中Where子句的条件顺序对性能的影响 - Oracle - 网站开发-技术教程-中国素材网经常有人问到oracle中的Where子句的条件书写顺序是否对SQL性能有影响，我的直觉是没有影响，因为如果这个顺序有影响，Oracle应该早就能够做到自动优化&#…...

编程日记 2024/11/26 15:51:08

新网站在谷歌上面怎么做推广/网站推广优化公司

电脑使用时间久了，就容易出现C盘空间不足的情况。而这个时候，很多朋友都会选择使用安全管理软件对电脑进行清理操作，但是效果却不明显。过一段时间之后，C盘就会再次出现空间不足的情况！有很多朋友想过要对电脑C盘文件夹…...

编程日记 2024/11/26 15:40:54

在手机上怎么注册公司/一个网站可以优化多少关键词

智能家居网络随着集成技术、通信技术、互操作能力和布线标准的实现而不断改进。它涉及对家庭网络内所有的智能家具、设备和系统的操作、管理以及集成技术的应用。其技术特点表现如下： 1．通过家庭网关及其系统软件建立智能家居平台系统家庭网关是智能…...

编程日记 2024/11/26 15:02:35