前端系列-1 HTML+JS+CSS基础

背景：

前端系列会收集碎片化的前端知识点，作为自己工作和学习时的字典，欢迎读者收藏和使用。
笔者是后端开发😶前端涉猎不深，因此文章重在广度和实用，对原理和性能不会过多深究。

1.html

1.1 html5网页结构

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>标题</title><link rel="icon"  href="data:image/png;base64,i..." type="image/x-icon"><link rel="shortcut icon" href="data:image/png;base64,...=" type="image/x-icon"></head><body></body>
</html>

1.2 html标签中包括head标签和body标签：

（1）head标签中可以定义字符编码格式，以及网页的标题和图标;
（2）页面显示的内容需要在body中定义。

1.3 在html中引入js：

(1) 内部插入的代码格式如下：

<script type="text/javascript">// JavaScript代码
</script>

(2) 引入js外部文件

<script type="text/javascript" src="文件路径">

一般在body标签底部引入，以保证所有的DOM元素都被加载后再加载JS文件;
注意加载多个JS文件时，如果有依赖关系，需要保证被依赖的文件先被引入。因此会先引入jquery等三方库，再引入业务js文件。

1.4 在html中引入样式：

(1) 内联样式

<h1 style="margin-left: 40px;">内联样式</h1>

直接在DOM元素中使用style属性进行样式设置，优先级最高；不利于维护。

(2) 内嵌样式

<head><title>内嵌样式</title><style>h1 {margin-left: 40px;}</style>
</head>

在head中通过style标签引入。

(3) 外部样式表

<link rel="stylesheet" href="./css/index.css">

通过link标签的href引入。

(4) 导入样式表

<link rel="stylesheet" href="./css/index.css">

在index.css文件中：

@import "1.css";
@import "2.css";
@import "3.css";
@import "4.css";

注意：在一个html文件中引入的多个样式表，如果选择器重复了，后者会覆盖前者。

1.5 常见元素:块和内联

DOM元素整体上可以分为块元素和内联元素两类。 块元素可用于布局，内联元素可用于显示。二者主要区别在于：
(1) 块元素可以包含块元素、内联元素、文本；内联元素只能包含内联元素和文本；
(2) 块与其他元素之间有换行；内联元素不会换行；
(3) 块元素可以设置高度(height)和宽度(width), 内联元素不能设置;
常见的块级元素有： div, p/h, table/form, ul/ol, hr
常见的内联元素有： span, a, img, input/textarea, br

1.6 Dom原生语法

jquery出现后，基本不会再用DOM的原生语句。

(1)获取DOM对象
#返回拥有指定id的对象
document.getElementById('id属性值');
#返回拥有指定类型的对象集合
document.getElementsByClassName('class属性值');
#返回拥有指定标签名的对象集合
document.getElementsByTagName('标签名');
...

2.javascript

javascript作为脚本语言，语法与Java存在相似之处。如：注释使用双斜线(//), 使用分号(;)作为表达式的结尾…

2.1 常用类型

常用类型有：String，Number，Boolean, 数组，对象类型.

2.1.1 String

字符串可以使用单引号或者双引号包裹，可以使用加号(+)对字符串进行拼接。

创建方式如下：

var str1 = "str1";
var str2 = 'str1';
var str3 = new String("str1");
var str4 = "s"+"tr"+new String("4");

常用API:

// 判断string字符串是否以str开头, 返回true或false
string.startsWith(str)// 判断string字符串是否以str开头，返回true或false
string.endsWith(str)// 返回字符串string中第start+1位开始的长度为len字符串内容。
string.substr(start,len)// 替换字符串内容方法:将str1替换为str2
string.replace(str1, str2)

其他与java用法基本一致。

2.1.2 Number

可以表示整数，也可以表示小数；数值太大或者太小可以用科学计数法表示。

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

Number类型中有个比较特殊对象NAN，表示非数值。

typeof NaN; // "number"

NaN对象不等于任何对象，包括自己：

NaN == NaN //false

可以使用js内置的函数isNaN()来判断：

var nan = NaN;
isNaN(nan); // true
Number.isNaN(NaN); // true

当字符串不能转换为数字时，返回NaN表示解析失败；undefined和NaN的算术操作会返回NaN; 数学函数的无效参数如负数的平方根、负数的对数时会返回NaN；在js中存在无限大, 无限大乘以0会返回NaN：

var result = 1/0; //Infinity
var resultN = -1/0; //-Infinity
isNaN(result * 0); // true

2.1.3 Boolean

只有两个值：true和false; 注意大小写敏感。

2.1.4 数组

js中的数组中不要求元素类型相同，但尽量保持元素类型一致以方便维护。

创建方式如下：

var test_arr = ["a", 1, null];
var cars=new Array("ET7","ES8","EC6");

常用API:

//1.使用下标进行取值和赋值
cars[0]="Saab";
//2.添加、删除最后一个元素
list.push("banana");
list.pop();
//3.添加、删除第一个元素
scores.shift();
scores.unshift(76);

其他与java用法基本一致。

2.1.5 对象类型

var car = {name:"EC6", a:4.5, color:"blue"
};
// 有以下两种方式获取对象
car.name;
car["name"];

2.1.6 typeof 运算符

可以返回对象的大致类型，结果是字符串

typeof new String("str1"); // "object"typeof "str2"; // "string"typeof 123e5; // "number"var b3 = true; 
typeof b3; // "boolean"var arr_4 = ["a", 1, null];
typeof arr_4; // "object"var object5 = {name:"EC6", a:4.5, color:"blue"
};
typeof object5; // "object"

2.2 空对象

js中存在两个空对象，null和undefined，有以下区别：
(1) null是Object类型；undefined是Undefined

typeof null; // "object"
typeof undefined // "undefined"

(2) undefined表示缺少了预期的值或参数；使用var声明变量，未赋值时为undefined, 当函数为传参时为undefined，未定义函数返回值时-返回undefined；

(3) null通常用于显式地表示空或无效的对象、数组或变量; 清空一个变量或者释放一个对象的引用时，可以将其设置为null。

2.3 变量和作用域

在ES5及之前的js版本中使用var声明变量，在ES6中引入了let和const; 常见浏览器对这两个关键字兼容，可直接使用。

2.3.1 var关键字

  • 函数级作用域：变量的作用域限制在声明的函数内部，从函数外部访问会报错。
  • 变量提升：变量声明会被提升到作用域的顶部。
  • 可以重复声明：后面的声明会覆盖前面。

2.3.2 let关键字

  • 块级作用域：变量的作用域为所在代码块，即从代码块外部访问会报错。
  • 不可重复声明：同一个作用域内，不可以多次使用let对同一个变量反复声明。
  • 没有变量提升：let声明的变量在声明语句之后才能使用。

2.3.3 const关键字

  • 常量：被赋值后不可修改。
  • 块级作用域：与let相同，块级作用域。
  • 不可重复声明：同一个作用域内，多次使用const声明同一个变量会报错。

let和const的特性和限制可以将var中可能引入发热误操作显示地提前到开发阶段，从而避免bug的产生；因此开发过程中，建议使用let和const替代var。

2.4 字符串和JSON常见操作

//1.JSON.stringify()将对象转换为JSON格式字符串
var obj = {name:"seong", age: 28}
var objStr = JSON.stringify(obj);
console.log(objStr);
//2.JSON.parse()将JSON格式字符串转为对象
var obj2 = JSON.parse(objStr)

2.5 if 和 switch-case;

if (条件表达式 1) {// 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {// 条件表达式 2 为真时执行的代码
} else if (条件表达式N) {// 条件表达式 N 为真时执行的代码
} else {// 所有条件表达式都为假时要执行的代码
}

if-else语法与Java基本相同, 需要注意条件表达式为变量时，零值转为false,非零值转为true;

let scoreLevel = "A";
switch(scoreLevel){case "A"://...break;case "B"://...break;default://...
}

switch-case语法与Java相同, 穿透和break用法也相同。

2.6 try-catch异常处理;

try {//...
} catch(err) {//...console.writeln( err.name+ err.message);
} finally {//...
}

异常对象中有name和message信息。

2.7 for循环和while循环

for (var i = 1; i <= 5; i++) {if (i == 3) {break;}console.log('提示信息：' + i);
}continue、breakvar num = 1;
while (num <= 10) {console.log(num + '\n');num++; 
}

for和while用法同Java, continue和break用法也相同。

2.8 与或非

与(&&) ，或(||)，非(!)，与Java完全相同

2.9 是否相等;

== 仅判断值是否相等；=== 判断值和类型是否相等。

var str1 = "1";
var int1 = 1;
console.log(str1 == int1);  // true
console.log(str1 === int1); // false

3.css

3.1 盒子模型

HTML中每个元素都是盒子模型，每个盒子模型包括4个部分：content、padding、border、margin，如下图所示：
在这里插入图片描述

3.1.1 内容content

content 作为元素的内容部分，常见样式如下：
【1】width和height
块级元素和内联元素有所区别：内联元素不可设置，宽/高属性由其内容(文本、图片大小)决定；块级元素可设置宽/高，默认宽度为父元素的100%，高度默认由内容(元素内容或者子元素高度之和)决定。

<div style="width:200px;height:100px;background-color:orange"></div>

显示如下：
在这里插入图片描述
说明：
在设置width和height时可使用倍数(em),像素(px),百分比(%)三种类型。

【2】display
none：隐藏元素且不占用任何空间；
block：设置为块级元素，允许设置width和height；
inline-block：设置为内联元素，不会独占一行，同时可以设置宽度和高度。

【3】background-color和background-image
background-color用于设置背景色，background-image用于设置背景图片；

/* 将div的背景颜色设置为红色 */  
div {  background-color: #ff0000; 
}div {  background-image: url('background.jpg');
}

说明：当同时设置背景色和背景图片时，仅背景图片生效。
其中：
CSS样式的颜色属性可以使用
（1）关键字，如"red"，“blue”；
（2）十六进制值：如"#ff0000"，"#00ff00"等；
（3）RGB，如rgb(255,0,0)，第一个数字表示红色，第二个数字表示绿色，第三个数字表示蓝色。

【4】color, font-size, text-align,overflow
color用于设置文本颜色；font-size用于设置本文大小；

text-align用于设置文本的水平对齐方式，常见取值有：
（1）left：文本内容将相对于元素的左边界对齐。
（2）right：文本内容将相对于元素的右边界对齐。
（3）center：文本内容将居中对齐。
（4）justify：文本内容将被对齐到左右两端，并在每行结束时调整单词间距，使其占据整个行宽。

overflow表示当内容超过盒子内容区指定的width和height时的显示方式，常见取值有：
（1）hidden:隐藏
（2）visible正常显示
（3）scroll显示滚动条；

3.1.2 内边距padding

内边距是内容区和边框之间的空间,可通过padding对内边距进行设置：

div {  padding: 10px;  
}

此时，padding作用于上下左右四侧，可通过下面的方式分别进行设置：

div {  padding-top: 1px;  padding-right: 10px;  padding-bottom: 1px;  padding-left: 3px;  
}

说明：设置盒子背景色属性时，背景色会延伸到填充区域。
注意：内联元素可以设置水平方向的内边距，不可设置垂直方向的内边距。

3.1.3 边框border

边框是环绕内容区和填充的边界，可以设置的属性有border-style、border-width和border-color ；
【1】border-style
边框样式，常见有：solid(实线), 虚线(dashed), 点线(dotted), 双线(double)

div {  border-style: solid;  /* 设置div的边框样式为实线 */  
}

【2】border-width
边框宽度，可通过px设置；

div {  border-width: 2px;  /* 设置div的边框宽度为2像素 */  
}

【3】border-color
用于设置边框颜色，默认无颜色

div {  border-color: #ff0000;  /* 设置div的边框颜色为红色 */  
}

说明：这三个属性可以一起使用，顺序无关紧要，如下所示：

div {  border: solid 2px #FF0000;
}

3.1.4 外边距margin

外边距是边框之外的空间,可通过margin对内边距进行设置：

div {  margin: 10px;  
}

此时，margin作用于上下左右四侧，可通过如下的方式分别进行设置：

div {  margin-top: 1px;  margin-right: 10px;  margin-bottom: 1px;  margin-left: 3px;  
}

注意：内联元素可以设置水平方向的外边距，不可设置垂直方向的外边距。
说明：多个元素之间的外边距，不是取和，而是取并集。

3.2 定位与浮动

【1】position
css使用position确定元素的定位方式，有以下几种：
（1）static
默认定位方式，即文档流。

<head><style>#node-1 {width: 500px;height: 100px;background-color: red;}#node-2 {width: 400px;height: 200px;background-color: orange;}#node-3 {width: 300px;height: 300px;background-color: yellow;}</style>
</head><body><div id="node-1"></div><div id="node-2"></div><div id="node-3"></div>
</body>

文档流显示如下：
在这里插入图片描述
分析：node-1(红色)、 node-2(橙色)、 node-3(黄色)分别各占一行，紧密排列

（2）relative
相对于原来的位置进行浮动；保留占用的空间。
将node-2节点的样式修改为：

#node-2 {width: 400px;height: 200px;background-color: orange;position: relative;top:100px;left: 100px;
}

显示为：
在这里插入图片描述
分析：node-1(红色)与node-3(黄色) 分别各占一行，node-2(橙色)原来的空间保持，node-2(橙色)根据top和left相对原空间进行偏移。

（3）absolute
相对已定位的父节点(否则相对浏览器)进行浮动；不保留占用的空间。

将node-2节点的样式修改为：

#node-2 {width: 400px;height: 200px;background-color: orange;position: absolute;top:100px;left: 100px;
}

显示为：
在这里插入图片描述
分析：node-1(红色)与node-3(黄色) 分别各占一行，node-2(橙色)原来的空间不保持，node-2(橙色)根据top和left相对浏览器左上角进行偏移。

（4）fixed
相对浏览器)进行浮动；不保留占用的空间。

将node-2节点的样式修改为：

#node-2 {width: 400px;height: 200px;background-color: orange;position: fixed;top:100px;left: 100px;
}

显示为：
在这里插入图片描述
分析：node-1(红色)与node-3(黄色) 分别各占一行，node-2(橙色)原来的空间不保持，node-2(橙色)根据top和left相对浏览器左上角进行偏移。

【2】float
使用float属性可以使元素脱离原文档流，float属性取值范围如下：
（1）left：使元素浮动到左侧；
（2）right：使元素浮动到右侧；
（3）none：默认值，元素不浮动；

<head><style>#node-1 {width: 500px;height: 100px;background-color: red;/*float: left;*/}#node-2 {width: 400px;height: 200px;background-color: orange;/*float: left;*/}#node-3 {width: 300px;height: 300px;background-color: yellow;/*float: left;*/}</style>
</head><body>
<div style="width:1200px; border: black 5px solid"><div id="node-1"></div><div id="node-2"></div><div id="node-3"></div>
</div>
</body>

显示如下：
在这里插入图片描述
分析：node-1(红色)、node-2(橙色) 、node-3(黄色) 分别各占一行，父节点因未设置hight从而高度为三个字节点之和。

对node-2(橙色)和node-3(黄色)节点样式添加 float: left;，显示如下：
在这里插入图片描述
分析：当node-2(橙色)和node-3(黄色)浮动后，不再占据原来的空间，父节点高度与node-1(红色)保持一致。

对node-1、node-2、node-3节点样式添加 float: left;，显示如下：
在这里插入图片描述
分析：当node-1(红色)、node-2(橙色)和node-3(黄色)浮动后，均不再占据原来的空间，父节点高度为0。

3.3 选择器

3.3.1 id选择器

使用井号(#)拼接元素id

#id{witdh: 100px;
}

3.3.2 类选择器

使用句号(.)拼接元素id

.class{witdh: 100px;
}

3.3.3 标签选择器

直接使用标签名

tag{witdh: 100px;
}

3.3.4 组合选择器

选择器1 选择器2 {...}表示选择器1下的所有满足选择器2的节点，可以直接相连，也可不连；
选择器1 > 选择器2{...}表示选择选择器1下直接包含的选择器2，而不包含间接包含的选择器2；
选择器1 + 选择器2{...}表示选择器1同级的下一个相邻的选择器2；
选择器1 ~ 选择器2{...}表示与选择器1同级的且在选择器1后面的所有的选择器2；
选择器1选择器2{...}表示同时满足选择器1和选择器2的元素.

4.jquery

4.1 安装和引入

在html中通过script标签引入：

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

也可以将jquery-2.0.2.min.js文件下载到本地后引入，避免每次引用都需要从远程下载。
注意：HTML中导入js时，依赖jquery的js文件需要在jquery之后被引入。

说明：
jQuery代码需要包含在$(document).ready(function(){})内部，为了确保代码在DOM完全加载后才执行。
当页面加载时，浏览器会逐步解析和构建DOM；如果jQuery代码在DOM还没有完全加载时就执行，可能会导致无法找到所需的DOM元素或执行操作。$(document).ready(function(){})会在DOM加载完成后触发，执行内部的代码块。

4.2 操作DOM

4.2.1 获取jquery的DOM对象

// 直接使用字符串【用于创建新的DOM节点】
$("<div></div>")// 包装HTML原生DOM对象
const inputMsg = document.getElementById("chat-input");
$(inputMsg)//使用css选择器获取, 支持id,标签，类选择器【用于操作现有DOM节点】
$("#chat-input")

4.2.2 删除节点

remove方法用于删除节点：

// 删除id为chat-input的元素
$("#chat-input").remove();

4.2.3 获取/设置节点内容

text方法用于获取或设置节点的内容

//设置
$("#chat-input").text('节点内容');
// 获取
var content = $("#chat-input").text();

4.2.4 设置样式

css方法获取和设置节点样式

// 设置背景色
$(".message-box").css("background-color":"red")
// 获取背景色
$(".message-box").css("background-color")

4.2.5 设置属性

attr方法获取和设置节点属性

// 设置背景色
$(".message-box").attr("display":"none")
// 获取背景色
$(".message-box").attr("display")

说明：属性可以是元素特有的，也可以是用户自定义的，用于储存信息。

4.2.6 隐藏与显示

hide和show方法用于控制节点的隐藏和显示

// 隐藏detail-box元素
$("#detail-box").show();// 显示detail-box元素
$("#appRightBottom").hide();

4.2.7 添加子节点

append方法用于添加子节点

const bodyDom = $("<span>新增内容</span>")
// 对id为chat-input元素添加<span>新增内容</span>节点
$("#chat-input").append(bodyDom);

4.2.8 获取子节点列表

// children()方法获取子节点列表
$("#chat-wrapper").children()//first()获取第一个子节点
$("#chat-wrapper").children().first()//last()获取最后一个子节点
$("#chat-wrapper").children().last()

获取子节点后，操作方式同操作节点。

4.3 事件机制

4.3.1 鼠标事件

单击和双击事件：

// 为元素绑定鼠标单击事件
$("#send-btn").click(function(){console.log("单机鼠标左键");
});// 为元素绑定鼠标双击事件
$("#send-btn").dbclick(function(){console.log("双机鼠标左键");
});

鼠标移入和移出事件：

//用户光标进入元素上时触发
$("#send-btn").mouseenter(function(){console.log("鼠标移入");
});// 光标离开元素时触发
$("#send-btn").mouseleave(function(){console.log("鼠标移出");
});

其他暂不涉及。

4.3.2 键盘事件

keydown 键盘按下时触发，keyup在按键释放时触发，keypress按下并抬起同一个按键时触发。

$("#xxx").keydown(function (event) {// event.keyCode可获取按键的idif (event.ctrlKey && event.keyCode == 13) {alert('Ctrl+Enter');};switch (event.keyCode) {case 37:alert('左');break;case 39:alert('右');break;};return false;
});

其他暂不涉及。

4.4 ajax

使用ajax方法调用HTTP接口，如下所示：

$.ajax({url:  "/aiws/api/queryHistoryById?recordId=0", type: 'GET', async: false, data: '', dataType: 'json', success: function (result) {console.log(result)}, error: function (msg) {console.error(msg)}
});

其中：url表示服务器接口地址；type表示方法类型，如GET, POST; async表示请求是否异步；data表示发送给服务器的数据；dataType表示接受的数据类型，如果为text将服务器返回的结果解析为字符串；如果为json，会将服务器返回的结果解析为对象类型；success在请求成功时调用，error在请求异常时调用。

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

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

相关文章

嵌入式处理趋势，第一部分：超集成MCU

嵌入式处理趋势，第一部分：超集成MCU

当今的嵌入式微控制器&#xff08;MCU&#xff09;是协同和创新的惊人例子。单个芯片上可容纳30,000至2百万个门&#xff0c;直到最近&#xff0c;各种集成的组件和模块都被视为独立的高级IC。 例如&#xff0c;当前典型的MCU设备&#xff08;下面的图1&#xff09;可能包含以…
阅读更多...
Quarto 入门教程 (1)：简单介绍和资料汇总

Quarto 入门教程 (1)：简单介绍和资料汇总

本推文是 “手把手教你使用 Quarto 构建文档” 教程的第一部分&#xff0c;本文先介绍 Quarto 构建文档的原理&#xff1b;可创建的文档类型&#xff1b;对应的参考资源分享。 下一部分&#xff0c;会手把手介绍如何使用它&#xff08;下次推文吧&#xff5e;&#xff09;。 …
阅读更多...
Springboot使用Aop保存接口请求日志到mysql（及解决Interceptor拦截器中引用mapper和service为null）

Springboot使用Aop保存接口请求日志到mysql（及解决Interceptor拦截器中引用mapper和service为null）

一、Springboot使用Aop保存接口请求日志到mysql 1、添加aop依赖 <!-- aop日志 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId></dependency> 2、新建接口保存数据…
阅读更多...
排序算法之【归并排序】

排序算法之【归并排序】

&#x1f4d9;作者简介&#xff1a; 清水加冰&#xff0c;目前大二在读&#xff0c;正在学习C/C、Python、操作系统、数据库等。 &#x1f4d8;相关专栏&#xff1a;C语言初阶、C语言进阶、C语言刷题训练营、数据结构刷题训练营、有感兴趣的可以看一看。 欢迎点赞 &#x1f44d…
阅读更多...
chrome窗口

chrome窗口

chrome 窗口的层次&#xff1a; 父窗口类名&#xff1a;Chrome_WidgetWin_1 有两个子窗口&#xff1a; Chrome_RenderWidgetHostHWNDIntermediate D3D Window // 用于匹配 Chrome 窗口的窗口类的前缀。 onst wchar_t kChromeWindowClassPrefix[] L"Chrome_WidgetWin_…
阅读更多...
《低代码指南》——低代码维格云服务菜单

《低代码指南》——低代码维格云服务菜单

简介​ 快速了解付费客户能够获得维格服务团队哪些服务，本篇内容不包含使用免费试用版本的客户。 了解维格表产品价格与功能权益：戳我看价格与权益​ 客户付费后能得到哪些服务项目？​ 常规服务项目：
阅读更多...
一、Excel VBA 是个啥？

一、Excel VBA 是个啥？

Excel VBA 从入门到出门一、Excel VBA 是个啥&#xff1f;二、Excel VBA 简单使用 &#x1f44b;Excel VBA 是个啥&#xff1f; ⚽️1. Excel 中的 VBA 是什么&#xff1f;⚽️2. 为什么 VBA 很重要&#xff1f;⚽️3. 是否有无代码方法可以在 Excel 中实现工作流程自动化&…
阅读更多...
深挖 Python 元组 pt.1

深挖 Python 元组 pt.1

哈喽大家好&#xff0c;我是咸鱼 好久不见甚是想念&#xff0c;2023 年最后一次法定节假日已经结束了&#xff0c;不知道各位小伙伴是不是跟咸鱼一样今天就开始“搬砖”了呢&#xff1f; 我们知道元组&#xff08;tuple&#xff09;是 Python 的内置数据类型&#xff0c;tupl…
阅读更多...
Qt扫盲-QTreeView 理论总结

Qt扫盲-QTreeView 理论总结

QTreeView 理论使用总结 一、概述二、快捷键绑定三、提高性能四、简单实例1. 设计与概念2. TreeItem类定义3. TreeItem类的实现4. TreeModel类定义5. TreeModel类实现6. 在模型中设置数据 一、概述 QTreeView实现了 model 中item的树形表示。这个类用于提供标准的层次列表&…
阅读更多...
C#封装、继承和多态的用法详解

C#封装、继承和多态的用法详解

大家好&#xff0c;今天我们将来详细探讨一下C#中封装、继承和多态的用法。作为C#的三大面向对象的特性&#xff0c;这些概念对于程序员来说非常重要&#xff0c;因此我们将对每个特性进行详细的说明&#xff0c;并提供相应的示例代码。 目录 1. 封装&#xff08;Encapsulati…
阅读更多...
【用unity实现100个游戏之14】Unity2d做一个建造与防御类rts游戏

【用unity实现100个游戏之14】Unity2d做一个建造与防御类rts游戏

前言 欢迎来到本次教程&#xff0c;我将为您讲解如何使用 Unity 引擎来开发一个建造与防御类 RTS&#xff08;即实时战略&#xff09;游戏。 在本教程中&#xff0c;我们将学习如何创建 2D 场景、设计 2D 精灵、制作 2D 动画、响应用户输入、管理游戏数据、以及其他有关游戏开…
阅读更多...
机器学习7：pytorch的逻辑回归

机器学习7：pytorch的逻辑回归

一、说明 逻辑回归模型是处理分类问题的最常见机器学习模型之一。二项式逻辑回归只是逻辑回归模型的一种类型。它指的是两个变量的分类&#xff0c;其中概率用于确定二元结果&#xff0c;因此“二项式”中的“bi”。结果为真或假 — 0 或 1。 二项式逻辑回归的一个例子是预测人…
阅读更多...
HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 八）

HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 八）

其他状态管理概述 除了前面章节提到的组件状态管理和应用状态管理&#xff0c;ArkTS还提供了Watch和$$来为开发者提供更多功能&#xff1a; Watch用于监听状态变量的变化。$$运算符&#xff1a;给内置组件提供TS变量的引用&#xff0c;使得TS变量和内置组件的内部状态保持同步…
阅读更多...
Python环境安装

Python环境安装

1、下载python安装包 &#xff08;1&#xff09;可以从官网下载需要的版本&#xff1a;Python Releases for Windows | Python.org &#xff08;2&#xff09;或者从我的百度网盘下载3.11.1版本&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1qNH3KU0iHIi-tS9wYBVrtQ …
阅读更多...
【论文阅读】通过3D和2D网络的交叉示教实现稀疏标注的3D医学图像分割(CVPR2023)

【论文阅读】通过3D和2D网络的交叉示教实现稀疏标注的3D医学图像分割(CVPR2023)

目录 前言方法标注3D-2D Cross Teaching伪标签选择Hard-Soft Confidence Threshold Consistent Prediction Fusion 结论 论文&#xff1a;3D Medical Image Segmentation with Sparse Annotation via Cross-Teaching between 3D and 2D Networks 代码&#xff1a;https://githu…
阅读更多...
95、Spring Data Redis 之使用RedisTemplate 实现自定义查询 及 Spring Data Redis 的样本查询

95、Spring Data Redis 之使用RedisTemplate 实现自定义查询 及 Spring Data Redis 的样本查询

Spring Data Redis 之使用RedisTemplate 实现自定义查询 Book实体类 原本的接口&#xff0c;再继承我们自定义的接口 自定义查询接口----CustomBookDao 实现类&#xff1a;CustomBookDaoImpl 1、自定义添加hash对象的方法 2、自定义查询价格高于某个点的Book对象 测试&a…
阅读更多...
【JavaEE】线程安全的集合类

【JavaEE】线程安全的集合类

文章目录 前言多线程环境使用 ArrayList多线程环境使用队列多线程环境使用哈希表1. HashTable2. ConcurrentHashMap 前言 前面我们学习了很多的Java集合类&#xff0c;像什么ArrayList、Queue、HashTable、HashMap等等一些常用的集合类&#xff0c;之前使用这些都是在单线程中…
阅读更多...
RabbitMQ之Fanout（扇形） Exchange解读

RabbitMQ之Fanout（扇形） Exchange解读

目录 基本介绍 适用场景 springboot代码演示 演示架构 工程概述 RabbitConfig配置类&#xff1a;创建队列及交换机并进行绑定 MessageService业务类&#xff1a;发送消息及接收消息 主启动类RabbitMq01Application&#xff1a;实现ApplicationRunner接口 基本介绍 Fa…
阅读更多...
使用华为eNSP组网试验⑸-访问控制

使用华为eNSP组网试验⑸-访问控制

今天练习使用华为sNSP模拟网络设备上的访问控制&#xff0c;这样的操作我经常在华为的S7706、S5720、S5735或者H3C的S5500、S5130、S7706上进行&#xff0c;在网络设备上根据情况应用访问控制的策略是一个网管必须熟练的操作&#xff0c;只是在真机上操作一般比较谨慎&#xff…
阅读更多...
微服务技术栈-Gateway服务网关

微服务技术栈-Gateway服务网关

文章目录 前言一、为什么需要网关二、Spring Cloud Gateway三、断言工厂和过滤器1.断言工厂2.过滤器3.全局过滤器4.过滤器执行顺序 四、跨域问题总结 前言 在之前的文章中我们已经介绍了微服务技术中eureka、nacos、ribbon、Feign这几个组件&#xff0c;接下来将介绍另外一个组…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023