四、Flask学习之JavaScript
四、Flask学习之JavaScript
JavaScript，作为一种前端脚本语言，赋予网页生动的交互性和动态性。通过它，开发者能够操作DOM（文档对象模型）实现页面元素的动态改变、响应用户事件，并借助AJAX技术实现异步数据请求，为用户提供更流畅的浏览体验。在现代Web开发中，JavaScript不仅是构建丰富用户界面的关键工具，还被广泛应用于服务器端（Node.js）等多个领域，成为一门多用途、强大而灵活的编程语言。
1.下载jQuery（后续会用到）
jQuery 是一款被广泛应用的JavaScript库，旨在简化客户端脚本编写。通过提供便捷的DOM操作、事件处理、动画效果和AJAX请求等功能，jQuery极大地简化了跨浏览器的开发工作。其直观的API和优雅的语法使开发者能够更快速、更轻松地创建交互性强、用户体验良好的网页和Web应用。
下载官网：jQuery，然后找到Download，找到压缩版：
直接复制链接去某网盘或者某雷新建任务下载就行。
2.初识JavaScript
2.1简单示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.name1{background-color: pink;}.name2{text-align: center;}</style>
</head>
<body>
<div class="name1"><div class="name2" onclick="f()"><h1>欢迎访问本系统</h1></div>
</div>
<script type="text/javascript">function f() {confirm("确定吗？")}
</script>
</body>
</html>
效果：当点击标题一所在的区域时，会弹出一个框
2.2代码位置
JavaScript代码在HTML文件中，有两种存放位置，一种是在<head>标签里面，但一定要在<style>标签后面；另一种是在<body>标签里面，但也要在最后的位置，如上的示例代码。推荐使用第二种，因为HTML文件是从上往下进行执行的，如果<script>标签里面有非常耗时的动作，有可能下面的HTML页面显示不出来，所以推荐使用第二种。
2.3存在形式
-
直接写在当前的HTML文件中（如上面的例子）
-
写在一个文件中，然后导入
<script src="你的js存放目录"></script>
以上两种存在形式的代码的位置同上。
2.4基础知识
2.4.1 变量
Javascript在定义变量的时候是使用var关键字来定义的：var a="panda";
在 2015 年以前，使用 var 关键字来声明 JavaScript 变量。
在 2015 后的 JavaScript 版本 (ES6) 允许使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。
在打印变量的时候使用：console.log(a);
2.4.2 字符串
1.声明
一个字符串可以使用单引号或双引号，或者使用String()：
var name1 = "panda";
var name2 = String("panda");
document.write(name1 + '<p>');
document.write(name2 + '<p>')
2. 索引
使用位置（索引）可以访问字符串中任何的字符，字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。
var name1 = "panda";
document.write(name1 + '<p>');
document.write(name1[0])
3. length属性
字符串（String）使用长度属性length来计算字符串的长度：
var txt="Hello World!";
document.write(txt.length);
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);
4. 查找
字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
5. 切片
var name1 = "panda";
document.write(name1.substring(2,4));
substring()的参数遵循左闭右开的原则，比如上面的例子，会输出nd。
更详细的内容可以参考JavaScript String 对象 | 菜鸟教程 (runoob.com)
2.4.3 案例：跑马灯
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div style="text-align: center;background-color: pink;font-weight: bolder" id="name1">编程如画，我是panda！
</div>
<script>function display() {var receive = document.getElementById("name1");var reString = receive.innerText;receive.innerText = reString.substring(1, reString.length) + reString[0];}// 这个函数相当于定时器，第一个参数是指要执行的函数名，第二个参数是指间隔多少毫秒setInterval(display, 1000)
</script>
</body>
</html>
2.4.4 数组
1. 声明
var a1=[1,2,3,4,5];//直接声明
var a2=Array(1,2,3,4,5);//内置声明
2. 修改
对于索引，数组与字符串一样，下标均为0到length-1，修改数组中某个元素的时候，直接使用索引即可，例如：
var a1=[1,2,3,4,5];
a1[0]="panda";
3. 添加和删除
var a1=[1,2,3,4,5];
//在尾部添加
a1.push(6);
//在头部添加
a1.unshift(0);
/*在指定位置添加：
第一个参数是要添加元素的索引，
第二个元素是要从规定索引处删除元素的个数，如果是0就是不删除，
第三个元素是指要添加的元素*/
a1.splice(1,0,"panda")
a1.pop();//删除最后一个元素
a1.shift();//删除第一个元素
document.write(a1);
2.4.5 案例：动态数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul id="language">
</ul>
<script>var languageList=["C","C++","JAVA","Python","PHP"];for (var idx in languageList){var text = languageList[idx];//创建<li></li>标签var la=document.createElement("li");la.innerText=text;document.getElementById("language").appendChild(la);}
</script>
</body>
</html>
2.4.6 对象（字典）
1. 定义（声明）
两种方式：可以带引号也可以不带
my_dict={"name":"panda","age":20
}
my_dict2={name:"panda",age:20
}
2. 修改
直接使用成员运算符或者使用Python中字典的方式：
my_dict.name="你好";
my_dict["name"]="Hello";
2.4.6 案例：动态表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>学号</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="body"></tbody>
</table>
<script>var my_array=[{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20}];for(var each in my_array) {var tr_la = document.createElement('tr');for (var key in my_array[each]) {var td_la = document.createElement('td');td_la.innerText = my_array[each][key];tr_la.appendChild(td_la);}document.getElementById('body').appendChild(tr_la)}
</script>
</body>
</html>
3.DOM
JavaScript DOM（文档对象模型） 是 JavaScript 的一个关键部分，通过它，开发者可以与网页的结构、内容和样式进行交互。DOM以树状结构的形式呈现文档，允许动态地选择、修改、添加和删除元素，实现页面的实时更新和用户交互。通过监听和响应事件，JavaScript DOM还使得开发者能够构建具有响应性和动态效果的现代网页应用，提升用户体验。
具体学习可以参考：JavaScript HTML DOM | 菜鸟教程 (runoob.com)
案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="re_text" placeholder="请输入内容...">
<input type="button" id="my_btn" onclick="f()" value="提交">
<ul id="language"></ul>
<script>function f() {//获取从输入框中获取的数据var text = document.getElementById('re_text').value;if (text.length!==0) {//创建<li></li>标签var la_li = document.createElement('li');//将从文本框中接收到的内容赋给<li></li>标签la_li.innerText = text;//获得id为'language'的标签var tag = document.getElementById('language');//将数据添加进去tag.appendChild(la_li)//最后将文本框中的字符串清除document.getElementById('re_text').value = "";}else{alert("输入内容为空！！！")}}
</script>
</body>
</html>
效果：
4.jQuery
jQuery的东西很多，这里只展示一部分，更多请参考：jQuery API 文档
使用之前要引入：
<script src="static/jquery-3.7.1.min.js"></script>
4.1直接标签选择
4.1.1 ID选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 id="name1">Panda
</h1>
<script src="static/jquery-3.7.1.min.js"></script>
<script type="text/javascript">$('#name1').text('Hello')
</script>
</body>
</html>
<script></script>标签里面的$('#name1')是指找到ID为name1的标签。
4.1.2 样式选择器
<div class="c1">JAVA</div>
<div class="c1">Python</div>
<div class="c2">C/C++</div>
$('.c1')
$('.c1')是指找到所有样式名为c1的标签。
4.1.3 标签选择器
$('div')
是指找到所有标签为<div></div>的标签。
4.1.4 层级选择器
$('.c1 .c2 div')
是指找到应用样式c1的标签下应用c2样式的标签下的所有<div></div>标签。
4.1.5 多选择器
$('#name1,#name2,span')
是指找到所有的ID为name1和所有ID为name2和所有<span></span>标签。
4.1.6 属性选择器
$("div[class='name1']")
是指找到<div></div>标签里面class为name1的标签。
4.2间接标签选择
4.2.1 找到同级标签
<div><div>JAVA</div><div id="name1">Python</div><div>C/C++</div>
</div>
$('name1').prev();//找到前一个同级标签
$('name1').next();//找到后一个同级标签
$('name1').siblings()//找到所有的同级标签
4.2.2 找到父类和子类标签
$('name1').parent();//找到上一个父类标签
$('name1').children();//找到所有的子类标签
4.3案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="userid" placeholder="请输入学号">
<input type="text" id="username" placeholder="请输入用户名">
<input type="button" id="my_btn" value="提交">
<ul id="mylist"></ul>
<script src="static/jquery-3.7.1.min.js"></script>
<script type="text/javascript">$('#my_btn').click(function (){var id_user=$('#userid').val();var name_user=$('#username').val();var text=id_user+'-'+name_user;$('#mylist').append($('<li>').text(text));});
</script>
</body>
</html>
效果：
# 四、Flask学习之JavaScript
JavaScript，作为一种前端脚本语言，赋予网页生动的交互性和动态性。通过它，开发者能够操作DOM（文档对象模型）实现页面元素的动态改变、响应用户事件，并借助AJAX技术实现异步数据请求，为用户提供更流畅的浏览体验。在现代Web开发中，JavaScript不仅是构建丰富用户界面的关键工具，还被广泛应用于服务器端（Node.js）等多个领域，成为一门多用途、强大而灵活的编程语言。
1.下载jQuery（后续会用到）
jQuery 是一款被广泛应用的JavaScript库，旨在简化客户端脚本编写。通过提供便捷的DOM操作、事件处理、动画效果和AJAX请求等功能，jQuery极大地简化了跨浏览器的开发工作。其直观的API和优雅的语法使开发者能够更快速、更轻松地创建交互性强、用户体验良好的网页和Web应用。
下载官网：jQuery，然后找到Download，找到压缩版：
直接复制链接去某网盘或者某雷新建任务下载就行。
2.初识JavaScript
2.1简单示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.name1{background-color: pink;}.name2{text-align: center;}</style>
</head>
<body>
<div class="name1"><div class="name2" onclick="f()"><h1>欢迎访问本系统</h1></div>
</div>
<script type="text/javascript">function f() {confirm("确定吗？")}
</script>
</body>
</html>
效果：当点击标题一所在的区域时，会弹出一个框
2.2代码位置
JavaScript代码在HTML文件中，有两种存放位置，一种是在<head>标签里面，但一定要在<style>标签后面；另一种是在<body>标签里面，但也要在最后的位置，如上的示例代码。推荐使用第二种，因为HTML文件是从上往下进行执行的，如果<script>标签里面有非常耗时的动作，有可能下面的HTML页面显示不出来，所以推荐使用第二种。
2.3存在形式
-
直接写在当前的HTML文件中（如上面的例子）
-
写在一个文件中，然后导入
<script src="你的js存放目录"></script>
以上两种存在形式的代码的位置同上。
2.4基础知识
2.4.1 变量
Javascript在定义变量的时候是使用var关键字来定义的：var a="panda";
在 2015 年以前，使用 var 关键字来声明 JavaScript 变量。
在 2015 后的 JavaScript 版本 (ES6) 允许使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量。
在打印变量的时候使用：console.log(a);
2.4.2 字符串
1.声明
一个字符串可以使用单引号或双引号，或者使用String()：
var name1 = "panda";
var name2 = String("panda");
document.write(name1 + '<p>');
document.write(name2 + '<p>')
2. 索引
使用位置（索引）可以访问字符串中任何的字符，字符串的索引从零开始, 所以字符串第一字符为 [0],第二个字符为 [1], 等等。
var name1 = "panda";
document.write(name1 + '<p>');
document.write(name1[0])
3. length属性
字符串（String）使用长度属性length来计算字符串的长度：
var txt="Hello World!";
document.write(txt.length);
var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.write(txt.length);
4. 查找
字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
5. 切片
var name1 = "panda";
document.write(name1.substring(2,4));
substring()的参数遵循左闭右开的原则，比如上面的例子，会输出nd。
更详细的内容可以参考JavaScript String 对象 | 菜鸟教程 (runoob.com)
2.4.3 案例：跑马灯
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div style="text-align: center;background-color: pink;font-weight: bolder" id="name1">编程如画，我是panda！
</div>
<script>function display() {var receive = document.getElementById("name1");var reString = receive.innerText;receive.innerText = reString.substring(1, reString.length) + reString[0];}// 这个函数相当于定时器，第一个参数是指要执行的函数名，第二个参数是指间隔多少毫秒setInterval(display, 1000)
</script>
</body>
</html>
2.4.4 数组
1. 声明
var a1=[1,2,3,4,5];//直接声明
var a2=Array(1,2,3,4,5);//内置声明
2. 修改
对于索引，数组与字符串一样，下标均为0到length-1，修改数组中某个元素的时候，直接使用索引即可，例如：
var a1=[1,2,3,4,5];
a1[0]="panda";
3. 添加和删除
var a1=[1,2,3,4,5];
//在尾部添加
a1.push(6);
//在头部添加
a1.unshift(0);
/*在指定位置添加：
第一个参数是要添加元素的索引，
第二个元素是要从规定索引处删除元素的个数，如果是0就是不删除，
第三个元素是指要添加的元素*/
a1.splice(1,0,"panda")
a1.pop();//删除最后一个元素
a1.shift();//删除第一个元素
document.write(a1);
2.4.5 案例：动态数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul id="language">
</ul>
<script>var languageList=["C","C++","JAVA","Python","PHP"];for (var idx in languageList){var text = languageList[idx];//创建<li></li>标签var la=document.createElement("li");la.innerText=text;document.getElementById("language").appendChild(la);}
</script>
</body>
</html>
2.4.6 对象（字典）
1. 定义（声明）
两种方式：可以带引号也可以不带
my_dict={"name":"panda","age":20
}
my_dict2={name:"panda",age:20
}
2. 修改
直接使用成员运算符或者使用Python中字典的方式：
my_dict.name="你好";
my_dict["name"]="Hello";
2.4.6 案例：动态表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>学号</th><th>姓名</th><th>年龄</th></tr></thead><tbody id="body"></tbody>
</table>
<script>var my_array=[{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20},{"id":123456, "name":"panda", "age":20}];for(var each in my_array) {var tr_la = document.createElement('tr');for (var key in my_array[each]) {var td_la = document.createElement('td');td_la.innerText = my_array[each][key];tr_la.appendChild(td_la);}document.getElementById('body').appendChild(tr_la)}
</script>
</body>
</html>
3.DOM
JavaScript DOM（文档对象模型） 是 JavaScript 的一个关键部分，通过它，开发者可以与网页的结构、内容和样式进行交互。DOM以树状结构的形式呈现文档，允许动态地选择、修改、添加和删除元素，实现页面的实时更新和用户交互。通过监听和响应事件，JavaScript DOM还使得开发者能够构建具有响应性和动态效果的现代网页应用，提升用户体验。
具体学习可以参考：JavaScript HTML DOM | 菜鸟教程 (runoob.com)
案例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="re_text" placeholder="请输入内容...">
<input type="button" id="my_btn" onclick="f()" value="提交">
<ul id="language"></ul>
<script>function f() {//获取从输入框中获取的数据var text = document.getElementById('re_text').value;if (text.length!==0) {//创建<li></li>标签var la_li = document.createElement('li');//将从文本框中接收到的内容赋给<li></li>标签la_li.innerText = text;//获得id为'language'的标签var tag = document.getElementById('language');//将数据添加进去tag.appendChild(la_li)//最后将文本框中的字符串清除document.getElementById('re_text').value = "";}else{alert("输入内容为空！！！")}}
</script>
</body>
</html>
效果：
4.jQuery
jQuery的东西很多，这里只展示一部分，更多请参考：jQuery API 文档
使用之前要引入：
<script src="static/jquery-3.7.1.min.js"></script>
4.1直接标签选择
4.1.1 ID选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 id="name1">Panda
</h1>
<script src="static/jquery-3.7.1.min.js"></script>
<script type="text/javascript">$('#name1').text('Hello')
</script>
</body>
</html>
<script></script>标签里面的$('#name1')是指找到ID为name1的标签。
4.1.2 样式选择器
<div class="c1">JAVA</div>
<div class="c1">Python</div>
<div class="c2">C/C++</div>
$('.c1')
$('.c1')是指找到所有样式名为c1的标签。
4.1.3 标签选择器
$('div')
是指找到所有标签为<div></div>的标签。
4.1.4 层级选择器
$('.c1 .c2 div')
是指找到应用样式c1的标签下应用c2样式的标签下的所有<div></div>标签。
4.1.5 多选择器
$('#name1,#name2,span')
是指找到所有的ID为name1和所有ID为name2和所有<span></span>标签。
4.1.6 属性选择器
$("div[class='name1']")
是指找到<div></div>标签里面class为name1的标签。
4.2间接标签选择
4.2.1 找到同级标签
<div><div>JAVA</div><div id="name1">Python</div><div>C/C++</div>
</div>
$('name1').prev();//找到前一个同级标签
$('name1').next();//找到后一个同级标签
$('name1').siblings()//找到所有的同级标签
4.2.2 找到父类和子类标签
$('name1').parent();//找到上一个父类标签
$('name1').children();//找到所有的子类标签
4.3案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="userid" placeholder="请输入学号">
<input type="text" id="username" placeholder="请输入用户名">
<input type="button" id="my_btn" value="提交">
<ul id="mylist"></ul>
<script src="static/jquery-3.7.1.min.js"></script>
<script type="text/javascript">$('#my_btn').click(function (){var id_user=$('#userid').val();var name_user=$('#username').val();var text=id_user+'-'+name_user;$('#mylist').append($('<li>').text(text));});
</script>
</body>
</html>
效果：
相关文章：
四、Flask学习之JavaScript
四、Flask学习之JavaScript JavaScript，作为一种前端脚本语言，赋予网页生动的交互性和动态性。通过它，开发者能够操作DOM（文档对象模型）实现页面元素的动态改变、响应用户事件，并借助AJAX技术实现异步数据…...
IO 专题
使用try-with-resources语句块，可以自动关闭InputStream [实践总结] FileIUtils 共通方法最佳实践 [实践总结] java 获取在不同系统下的换行符 [实践总结] StreamIUtils 共通方法最佳实践 斜杠“/“和反斜杠“\“的区别 路径中“./”、“…/”、“/”代表的含义…...
MySql索引事务讲解和(经典面试题)
🎥 个人主页：Dikz12🔥个人专栏：MySql📕格言：那些在暗处执拗生长的花，终有一日会馥郁传香欢迎大家👍点赞✍评论⭐收藏 目录 索引 概念 索引的相关操作 索引内部数据结构 事务 为…...
《微信小程序开发从入门到实战》学习九十一
7.1 视图容器组件 7.1.2 scroll-view组件 scroll-view组件时是滚动的视图容器，可在竖直方向或水平方向上滚动，展示超出屏幕高度或宽度的内容。 使用竖直方向滚动时，需要通过wxss的height样式给scroll-view设置一个固定高度，超出…...
【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解
前言：本文进行布线铺铜实战及详解布线铺铜的细节 在本专栏中【立创EDA-PCB设计基础】前面完成了布线铺铜前的设计规则的设置，接下来进行布线 布局原则是模块化布局（优先布局好确定位置的器件，例如排针、接口、主控芯片ÿ…...
Node.JS CreateWriteStream(大容量写入文件流优化)
Why I Need Node.JS Stream 如果你的程序收到以下错误，或者需要大容量写入很多内容(几十几百MB甚至GB级别)，则必须使用Stream文件流甚至更高级的技术。 Error: EMFILE, too many open files 业务场景，我们有一个IntradayMissingRecord的补…...
安卓开发之自动缩放布局
AutoScalingLayout 适用于 Android 的自动缩放布局。 替换布局： 我们只需要替换根布局所需的自动缩放，子布局也将实现自动缩放。 原始布局AutoScalingLayout相对布局ASRelativeLayout线性布局ASLinearLayoutFrameLayout（框架布局ÿ…...
DDD系列 - 第9讲 实体、值对象
目录 引言一、实体1.1 数据库实体1.2 数据库实体 vs. DDD实体1.3 DDD实体的本质及其识别规则1.4 代码中如何定义实体二 、值对象2.1 值对象 vs. 附属属性2.2 值对象 vs. 实体2.3 代码中如何定义值对象2.4 何时使用值对象引言 之前我在《DDD系列 - 第4讲 从架构师的角度看待DDD…...
5分钟做自己的微信红包封面
文章目录 怎么制作自己的红包封面？开通红包封面的要求如下：收费情况制作具体网站：https://chatapi.onechat.fun/register?affYoU6 提交审核logo封面、挂件、气泡证明材料 发放红包封面其他 怎么制作自己的红包封面？ 开通红包封面…...
pytorch中BCELoss 和 binary_cross_entropy_with_logits之间的区别
在PyTorch中，binary_cross_entropy_with_logits是一个函数，而BCELoss是一个类。它们都是用于二分类任务的损失函数。它们之间存在一些区别如下。 torch.nn.functional.binary_cross_entropy_with_logits： binary_cross_entropy_with_logits…...
无刷电机学习-方波电调 程序篇1（AM32）
一、AM32简介 AM32 固件专为 ARM 处理器设计，用于控制无刷电机 (BLDC)。该固件旨在安全、快速、平滑、快速启动和线性油门。它适用于多种车辆类型和飞行控制器。 AM32具有以下特点： 可通过 betaflight 直通、单线串行或 arduino 升级固件伺服 PWM、Dsh…...
如何自己制作一个属于自己的小程序？
在这个数字化时代，小程序已经成为了我们生活中不可或缺的一部分。它们方便快捷，无需下载安装，扫一扫就能使用。如果你想拥有一个属于自己的小程序，不论是为了个人兴趣，还是商业用途，都可以通过编程或者使用…...
HTML 入门手册(二)
目录 HTML 入门手册(一) 10-表单 11-input标签 11.1文本框 (text) 11.2密码框 (password) 11.3单选按钮 (radio) 11.4复选框 (checkbox) 11.5普通按钮 11.6提交按钮 (submit) 11.7重置按钮 (reset) 11.8隐藏域 (hidden) 11.9文件上传 (file) 11.10数字输入 (numbe…...
零基础学Python（5）— 基本数据类型
前言：Hello大家好，我是小哥谈。在内存中存储的数据可以有多种类型。例如：一个人的姓名可以用字符型存储，年龄可以使用数值型存储，婚姻状况可以使用布尔型存储。这里的字符型、数值型、布尔型都是Python语言中提供的基本…...
centos7安装Redis7.2.4
文章目录 下载Redis解压Redis安装gcc依赖（Redis是C语言编写的，编译需要）编译安装src目录下二进制文件安装到/usr/local/bin修改redis.conf文件启动redis服务外部连接测试 参考： 在centos中安装redis-5.0.7 Memory overcommit must…...
certificate-transparency-go用例
文章目录 证书的SCT列表验证SCT依赖包加载证书初始化log机构信息离线验证在线验证 证书的SCT列表 浏览器对证书链的合法性检查通过后，会再检查服务端证书附件里的SCT列表（Signed Certificate Timestamp）； 浏览器内置了一批certif…...
前端上传大文件使用分片上传
前提：分片上传针对于一些大的文件、普通大小的文件使用element中的上传组件可以实现效果，例如几G的文件就会比较卡，所以这时候就需要用到分片上传~ 前端及后端分片上传笔记 效果：（上传进度展示） 效果：（上传成功的效果展示） 1、 新建一个上传组件 2、使用vue-simple-…...
Kotlin 解构声明
在一些像 Python 的高级语言中，支持 多返回值的，例如 x, y get_position() 这样操作接收。 而在 Kotlin 中，虽然不支持 多返回值，但有类似的 解构（destructure） 对象功能，叫做 解构声明。 用…...
基于若依的ruoyi-nbcio流程管理系统一种简单的动态表单模拟测试实现（四）
更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio 演示地址：RuoYi-Nbcio后台管理系统 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码： https://gitee.com/nbacheng/n…...
遗传算法原理详细讲解（算法+Python源码）
博主介绍：✌专研于前后端领域优质创作者、本质互联网精神开源贡献答疑解惑、坚持优质作品共享、掘金/腾讯云/阿里云等平台优质作者、擅长前后端项目开发和毕业项目实战，深受全网粉丝喜爱与支持✌有需要可以联系作者我哦！ 🍅文末获…...
Debian系统简介
目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版ÿ…...
基础测试工具使用经验
背景 vtune，perf, nsight system等基础测试工具，都是用过的，但是没有记录，都逐渐忘了。所以写这篇博客总结记录一下，只要以后发现新的用法，就记得来编辑补充一下 perf 比较基础的用法： 先改这…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作
一、上下文切换 即使单核CPU也可以进行多线程执行代码，CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短，所以CPU会不断地切换线程执行，从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
: 一刀斩断视频片头广告)
快刀集(1): 一刀斩断视频片头广告
一刀流：用一个简单脚本，秒杀视频片头广告，还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农，平时写代码之余看看电影、补补片，是再正常不过的事。 电影嘛，要沉浸，…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈，并不断增加特征维度持续测试」的做法，体现了一种逐步建模与迭代验证的实验思路，在金融欺诈检测中非常有价值，本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...