Python Web开发记录 Day5：jQuery（JavaScript库）
名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪）
创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）目录
- 五、jQuery
- 1、jQuery-选择器和菜单案例
- ①快速上手
- ②选择器(直接寻找)
- ③间接寻找
- ④样式操作
- ⑤值的操作
- ⑥事件
- 2、jQuery-表格和页面整合
- ①案例1：表格操作
- ②案例2：前端整合
- ③案例3：添加数据页面
- 3、综合案例：网页端音乐播放器
- ①index.html
- ②script.js
- ③效果展示
五、jQuery
jQuery是一个快速、小巧、功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件处理、动画和Ajax等Web开发中常见任务变得更加简单。通过简化HTML与JavaScript之间的交互，jQuery帮助开发者通过更少的代码实现更多的功能。jQuery可以看作是一个JavaScript第三方模块（第三方类库）。
- 基于jQuery，自己开发一个功能。
- 现成的工具依赖jQuery，例如：BootStrap的动态效果。
1、jQuery-选择器和菜单案例
①快速上手
- 下载jQuery
https://jquery.com/
- 应用jQuery
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<h1 id="txt">中国联通</h1><script src="static/jquery.min.js"></script><script type="text/javascript">// 利用jQuery中的功能实现某些效果// 1.找到id=txt的标签 2.内容修改// document.getElementById('txt').innerText="河南联通"; //DOM实现$("#txt").text("河南联通") //jQuery实现</script>
</body>
</html>
②选择器(直接寻找)
jQuery的选择器允许开发者根据元素的ID、类、类型、属性等选择HTML元素。这些选择器基本上是基于CSS选择器，使得选取DOM元素变得非常灵活和强大。
- ID选择器
<h1 id="txt">中国联通</h1>
<h1>中国联通</h1>
<h1>中国联通</h1>
$("#txt")
- 类选择器
<h1 class="c1">中国联通1
</h1>
<h1 class="c2">中国联通2
</h1>
<h1 class="c3">中国联通1
</h1>
$(".c1")
- 标签选择器
<h1 class = "c1">中国联通1
</h1>
<div class = "c1">中国联通2
</div>
<h1 class="c2">中国联通3
</h1>
$("h1")
- 层级选择器
<h1 class = "c1">中国联通1
</h1>
<h1 class = "c1"><div class = "c2"><span></span><a></a></div>
</h1>
<h1 class="c2">中国联通3
</h1>
$(".c1 .c2 a")
- 多元素选择器
<h1 class = "c1">中国联通1
</h1>
<h1 class = "c1"><div class = "c3"><span></span><a></a></div>
</h1>
<h1 class="c2">中国联通3
</h1>
<ul><li>xxx</li><li>xxx</li>
</ul>
$("#c3,#c2,li")
$("#c3,#c2,li") 在jQuery中属于多元素选择器。这种选择器允许你通过使用逗号分隔每个选择器，一次选择多个元素。对于这个例子，它会选择ID为c3的元素、ID为c2的元素，以及页面上所有的<li>元素。
- 属性选择器
<input type="text" name="n1"/>
<input type="text" name="n1"/>
<input type="text" name="n2"/>
$("input[name='n1']")
③间接寻找
- 找兄弟
<div><div>北京</div><div id='c1'>上海</div><div>广州</div><div>深圳</div>
</div>
$("#c1").prev() //上一个 北京
$("#c1") //上海
$("#c1").next() //下一个 广州
$("#c1").next().next() //下一个的下一个 深圳$("#c1").siblings() //所有的兄弟姐妹，北(上)广深
- 找父子
<div><div>北京</div><div id='c1'><div>青浦区</div><div class="p10">宝山区</div><div>浦东新区</div></div><div>广州</div><div>深圳</div>
</div>
<div><div>陕西</div> <div>山西</div><div>河南</div><div>河北</div>
</div>
$("#c1").parent() //父亲
$("#c1").parent().parent() //父亲、父亲$("#c1").children() //所有的孩子
$("#c1").children(".p10") //所有的儿子中寻找class=p10$("#c1").find(".p10") //去所有子孙中寻找class=p10
$("#c1").find("div") //去所有子孙中寻找div标签
案例：菜单的切换
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.menus{width: 200px;height: 800px;border: 1px solid red;}.menus .header{background-color: gold;padding: 10px 5px;border-bottom: 1px solid #dddddd;}.menus .content a{display: block;padding: 5px 5px;border-bottom: 1px dotted #dddddd;}.hide{display: none;}</style>
</head>
<body><div class="menus"><div class="item"><div class="header" onclick="clickMe(this);">上海</div><div class="content hide"><a>宝山区</a><a>浦东新区</a><a>青浦区</a><a>普陀区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">北京</div><div class="content hide"><a>海淀区</a><a>朝阳区</a><a>大兴区</a><a>昌平区</a></div></div></div><script src="static/jquery.min.js"></script><script>function clickMe(self){//$(self) --->表示当前点击的那个标签。//$(self).next() 下一个标签//$(self).next().removeClass("hide"); 删除样式$(self).next().removeClass("hide");}</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.menus{width: 200px;height: 800px;border: 1px solid red;}.menus .header{background-color: gold;padding: 10px 5px;border-bottom: 1px solid #dddddd;cursor: pointer;}.menus .content a{display: block;padding: 5px 5px;border-bottom: 1px dotted #dddddd;}.hide{display: none;}</style>
</head>
<body><div class="menus"><div class="item"><div class="header" onclick="clickMe(this);">上海</div><div class="content"><a>宝山区</a><a>浦东新区</a><a>青浦区</a><a>普陀区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">北京</div><div class="content hide"><a>海淀区</a><a>朝阳区</a><a>大兴区</a><a>昌平区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">上海2</div><div class="content hide"><a>宝山区</a><a>浦东新区</a><a>青浦区</a><a>普陀区</a></div></div><div class="item"><div class="header" onclick="clickMe(this);">北京2</div><div class="content hide"><a>海淀区</a><a>朝阳区</a><a>大兴区</a><a>昌平区</a></div></div></div><script src="static/jquery.min.js"></script><script>function clickMe(self){// 让自己下面的功能展示出来$(self).next().removeClass("hide");//找父亲，父亲的所有兄弟姐妹，再去每个兄弟的子孙中寻找class=content，添加hide样式$(self).parent().siblings().find(".content").addClass("hide");}</script>
</body>
</html>
④样式操作
在jQuery中，addClass、removeClass和hasClass都是用于操作元素类的方法。
-
1️⃣addClass
addClass方法用于向选定的元素添加一个或多个类。这个方法可以接受一个或多个类名作为参数，如果传入多个类名，类名之间用空格分隔。// 向ID为"example"的元素添加"myClass"类 $("#example").addClass("myClass");// 向所有<p>元素添加"myClass"和"anotherClass"类 $("p").addClass("myClass anotherClass"); -
2️⃣removeClass
removeClass方法用于从选定的元素中删除一个或多个类。和addClass方法一样，这个方法可以接受一个或多个类名作为参数，如果传入多个类名，类名之间用空格分隔。如果没有指定类名，则会删除元素的所有类。// 从ID为"example"的元素中删除"myClass"类 $("#example").removeClass("myClass");// 从所有<p>元素中删除"myClass"和"anotherClass"类 $("p").removeClass("myClass anotherClass"); -
3️⃣hasClass
hasClass方法用于检查当前的元素是否含有特定的类，如果元素含有该类，则返回
true；否则返回false。这个方法对于条件判断和实现特定的逻辑非常有用。// 检查ID为"example"的元素是否含有"myClass"类 if ($("#example").hasClass("myClass")) {console.log("元素有myClass类"); } else {console.log("元素没有myClass类"); }
这些方法的出现使得在使用jQuery时对元素的类进行操作非常方便，提高了开发效率和代码的可读性。
⑤值的操作
<div id='c1'>内容</div>
$("#c1").text() //获取文本内容
$("#c1").text("休息") //设置文本内容
<input type="text" id='c2'/>
$("#c2").val() //获取用户的值
$("#c2").val("娃哈哈") //设置用户的值
案例1：动态创建数据
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例：输入内容</title>
</head>
<body><input type="text" id="txtUser" placeholder="用户名"><input type="text" id="txtEmail" placeholder="邮箱"><input type="button" value="提交" onclick="getInfo()"/><ul id="view"></ul><script src="static/jquery.min.js"></script><script>function getInfo(){// 1.获取用户输入的用户名和密码var username = $("#txtUser").val();var email = $("#txtEmail").val();var dataString = username + " - " + email;// 2.创建li标签，在li的内部写入内容var newLi = $("<li>").text(dataString);// 3.把新创建的li标签添加到ul里面。$("#view").append(newLi);}</script>
</body>
</html>
⑥事件
jQuery提供了简便的方法来处理用户交互，如点击、悬停、键盘输入等事件。这使得在元素上绑定事件监听器和定义事件处理函数变得简单起来，例如获取信息、删除信息等。
<input type="button" value="提交" onclick="getInfo()"/><script>function getInfo(){}
</script>
<ul><li>百度</li><li>谷歌</li><li>搜狗</li>
</ul><script>$("li").click(function(){//点击li标签时，自动执行这个函数；//$(this) 当前你点击的是那个标签。});
</script>
在jQuery中可以删除某个标签。
<div id='c1'>内容</div>$("#c1").remove();
案例1：删除元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例：删除元素</title>
</head>
<body><ul><li>百度</li><li>谷歌</li><li>搜狗</li></ul><script src="static/jquery.min.js"></script><script>$("li").click(function (){// var text = $(this).text();// console.log(text);$(this).remove();});</script>
</body>
</html>
当页面框架加载完成之后执行代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul><li>百度</li><li>谷歌</li><li>搜狗</li></ul><script src="static/jquery.min.js"></script><script>$(function (){// 当页面的框架加载完成之后，自动执行。$("li").click(function (){// 移除被点击的<li>元素$(this).remove();});});</script>
</body>
</html>
这段代码中的注释表示的是当页面的DOM结构（框架）加载完成后，自动执行包裹在$(function(){ ... })内的代码，用于确保页面加载完毕后再执行脚本，保证DOM元素已经完全加载，从而可以安全地进行DOM操作。
通过这段代码，用户可以通过点击来移除不需要的项。使用$(this)关键字，目的是触发当前事件的元素，也就是这段代码中的<li>元素，remove()方法则是用来移除选定的元素。
2、jQuery-表格和页面整合
①案例1：表格操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table border="1"><thead><tr><th>ID</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>张三</td><td><input type="button" value="删除" class="delete-button"></td></tr><tr><td>1</td><td>张三</td><td><input type="button" value="删除" class="delete-button"></td></tr><tr><td>1</td><td>张三</td><td><input type="button" value="删除" class="delete-button"></td></tr><tr><td>1</td><td>张三</td><td><input type="button" value="删除" class="delete-button"></td></tr><tr><td>1</td><td>张三</td><td><input type="button" value="删除" class="delete-button"></td></tr></tbody></table><script src="static/jquery.min.js"></script><script>$(function () {// 找到所有class-delete的标签，绑定事件$(".delete-button").click(function (){// 删除当前行的数据$(this).parent().parent().remove();});})</script>
</body>
</html>
更多jQuery的使用可以查看手册，在用到的时候查询使用。
https://www.runoob.com/manual/jquery/
②案例2：前端整合
- HTML
- CSS
- JavaScript、jQuery
- Bootstrap（动态效果依赖jQuery）。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css"><style>.navbar {border-radius: 0;}</style>
</head>
<body>
<div class="navbar navbar-inverse"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-9" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">职工薪资系统</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9"><ul class="nav navbar-nav"><li class="active"><a href="#">Home</a></li><li><a href="#">Link</a></li><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false"> Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">个人资料</a></li><li><a href="#">我的账户</a></li><li><a href="#">修改密码</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#">登录</a></li><li><a href="#">注册</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false"> 用户 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">个人资料</a></li><li><a href="#">我的账户</a></li><li><a href="#">修改密码</a></li><li role="separator" class="divider"></li><li><a href="#">注销</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid -->
</div><div><!-- Button trigger modal --><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button><!-- Modal --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><spanaria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div><div><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left"title="Tooltip on left">Tooltip on left</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"title="Tooltip on bottom">Tooltip on bottom</button><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right"title="Tooltip on right">Tooltip on right</button></div><div><button id="element" type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="我是标题"data-content="此处是内容区域">点我弹出/隐藏弹出框</button></div><div style="width: 700px"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1" class=""></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide [900x500]"src="static/img/w1.png"data-holder-rendered="true"></div><div class="item"><img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide [900x500]"src="static/img/w3.png"data-holder-rendered="true"></div></div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div>
</div><!-- 此处先引入jQuery再引入bootstrap-->
<script src="static/js/jquery.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script>$(function () {// 找到data-toggle="tooltip"使用tooltip功能$('[data-toggle="tooltip"]').tooltip();$('#element').popover({trigger: "click", placement: "bottom"});$('.carousel').carousel({interval: 5000})})
</script>
</body>
</html>
③案例3：添加数据页面
人员信息录功能，需要提供用户信息：
- 用户名、年龄、薪资、部门、入职时间等(*)
对于时间的选择：不通过输入；通过点击选择，可以使用插件（datetimepicker）。
-
1.下载插件
https://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
- 2.应用插件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css"><link rel="stylesheet" href="static/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
</head>
<body><div class="container" style="margin-top: 20px"><form class="form-horizontal"><div class="row clearfix"><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">姓名</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="姓名"></div></div></div><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">年龄</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="年龄"></div></div></div></div><div class="row clearfix"><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">薪资</label><div class="col-sm-10"><input type="text" class="form-control" placeholder="薪资"></div></div></div><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">部门</label><div class="col-sm-10"><select class="form-control"><option>研发部门</option><option>销售部门</option><option>运营部门</option></select></div></div></div></div><div class="row clearfix"><div class="col-xs-6"><div class="form-group"><label class="col-sm-2 control-label">入职日期</label><div class="col-sm-10"><input type="text" id="dt" class="form-control" placeholder="入职日期"></div></div></div></div><div class="row clearfix"><div class="col-xs-6"><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-primary">提交</button></div></div></div></div></form>
</div><script src="static/js/jquery.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script>
<script src="static/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="static/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script><script>$(function () {$("#dt").datetimepicker({format: "yyyy-mm-dd",startDate:'0',language:"zh-CN",autoclose: true,});})</script>
</body>
</html>
3、综合案例：网页端音乐播放器
①index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Music Player</title><link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"><style>.container {padding-top: 20px;}audio {width: 100%;}</style>
</head>
<body><div class="container"><h2>我的音乐播放器</h2><input type="file" id="file-input" accept="audio/*"/><br><br><audio id="audio-player" controls>你的浏览器不支持该音频文件。</audio><!-- 在audio标签下方添加 --><img id="cover-image" src="" alt="Cover Image" class="img-thumbnail"style="display: none; width: 200px; height: 200px;"><br><button class="btn btn-primary" onclick="playMusic()">播放</button><button class="btn btn-secondary" onclick="pauseMusic()">暂停</button><button class="btn btn-info" onclick="nextMusic()">下一首</button><br><br><label for="volume-control">音量:</label><input type="range" style="width: 200px" id="volume-control" min="0" max="100" value="100">
</div><div style="width: 1000px;margin:auto;display: block;text-align: center; margin-top: 20px;"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1" class=""></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img data-src="holder.js/900x500/auto/#777:#555/text:First slide" alt="First slide [900x500]"src="static/img/w1.png"data-holder-rendered="true"></div><div class="item"><img data-src="holder.js/900x500/auto/#666:#444/text:Second slide" alt="Second slide [900x500]"src="static/img/w3.png"data-holder-rendered="true"></div></div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>
</div><script src="static/js/jquery.min.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script src="static/plugins/jsmediatags/dist/jsmediatags.min.js"></script>
<script src="script.js"></script>
</body>
</html>②script.js
let audioPlayer = document.getElementById('audio-player');
let fileInput = document.getElementById('file-input');
let volumeControl = document.getElementById('volume-control');
let currentFile = 0;
let files = [];// 播放音乐
function playMusic() {if (!audioPlayer.src || audioPlayer.src !== window.URL.createObjectURL(files[currentFile])) {loadMusic(files[currentFile]);}audioPlayer.play();
}// 暂停音乐
function pauseMusic() {audioPlayer.pause();
}// 加载音乐文件
function loadMusic(file) {let src = window.URL.createObjectURL(file);audioPlayer.src = src;
}// 下一首歌曲
function nextMusic() {if (files.length > 0) {currentFile = (currentFile + 1) % files.length; // 循环播放loadMusic(files[currentFile]);playMusic();}
}// 调节音量
volumeControl.addEventListener('input', function() {audioPlayer.volume = this.value / 100;
});// 选择文件
fileInput.addEventListener('change', function() {files = this.files;currentFile = 0; // 重置到第一个文件loadMusic(files[0]);
});
③效果展示
简要总结
1.了解HTML标签、标签结构，基于它可以实现简单的页面。
2.CSS，了解基本样式；在别人模板的基础修改就可以。
3.JavaScript、jQuery，了解基本使用。
- 事件绑定 / 寻找标签 / 操作标签
- 导入现成插件
后续开发过程中，对于前端一些样式，可以在BootStrap的基础上进行修改，这样可以提升你的开发效率。
在学习前端三大组件，以及BootStrap、jQuery之后，接下来将会接着学习MySQL，为后续进行Web开发网站做准备。
很感谢你能看到这里，如有相关疑问，还请下方评论留言。
Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊）
如果对大家有帮助的话，希望大家能多多点赞+关注！这样我的动力会更足！
相关文章：
Python Web开发记录 Day5：jQuery（JavaScript库）
名人说：莫道桑榆晚，为霞尚满天。——刘禹锡（刘梦得，诗豪） 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录 五、jQuery1、jQuery-选择器和菜单案例①快速上…...
前端-Vue3递归组件自定义Tree
需求 PS：写在前面，需求想要一个Tree 形结构展示当前的组织机构，最末层节点可以选择，层级明确。第一选择网上npm官网或者github 找找成型的东西 element-ui Tree 没有组织结构线js-tree 好看，但是适配Vue3 有点费劲&a…...
《TCP/IP详解 卷一》第12章 TCP初步介绍
目录 12.1 引言 12.1.1 ARQ和重传 12.1.2 滑动窗口 12.1.3 变量窗口：流量控制和拥塞控制 12.1.4 设置重传的超时值 12.2 TCP的引入 12.2.1 TCP服务模型 12.2.2 TCP可靠性 12.3 TCP头部和封装 12.4 总结 12.1 引言 关于TCP详细内容，原书有5个章…...
作业1-224——P1015 [NOIP1999 普及组] 回文数
题目描述 思路 首先此题为一道高精度题，然后本题按照题目意思模拟即可。我们可以开两个数组来记录高精度数字，这样方便我们处理。判断“该数组是否回文”、“c翻转存入d再做cd”可以写成两个单独的函数。然后主程序组织一下他们即可。注意好退出循环的…...
后端知识（理解背诵）
文章目录 🍺 来源🍺 C🍻 new 和 malloc 的区别？2🍻 delete 和 delete[] 的区别？0🍻 内存泄漏是什么？如何避免？1 🍺 计算机网络🍻 URL 输入后发生了…...
构造pop链
反序列化视频笔记 第一步：找到目标触发echo调用$flag 第二步：触发_invoke函数调用appeng函数$varflag.php（把对象当成函数） 第三步：给$p赋值为对象，即function成为对象Modifier却被当成函数调用ÿ…...
JAVA设计模式——创建型模式
JAVA设计模式——创建型模式 一、创建型模式1.单例模式（Singleton Pattern）1.1 饿汉式1.2 懒汉式1.3 双重检验锁(double check lock)(DCL)1.4 静态内部类1.5 枚举1.6 破坏单例的几种方式与解决方法1.6.1 反序列化1.6.2 反射 1.7 容器式单例1.8 ThreadLoc…...
队列的结构概念和实现
文章目录 一、队列的结构和概念二、队列的实现三、队列的实现函数四、队列的思维导图 一、队列的结构和概念 什么是队列？ 队列就是只允许在一端进行插入数据操作，在另一端进行删除数据操作的特殊线性表，队列具有先进先出 如上图所示&#x…...
Linux系统上使用C语言创建线程
文章目录 一、使用C代码创建线程示例API 二、线程的相关知识2.1 线程 与 进程 的关系2.2 使用线程的理由 一、使用C代码创建线程 使用pthread_create函数创建线程。 示例 示例：创建一个线程，其作用就是打印线程ID和传入参数。 //demo1 #include <…...
pc端如何做自适应呢？
<!-- 默认html的font-size的大小是16px 1rem 16px --> <!-- 想要实现自适应的前提条件是 当浏览器的窗口发生变化的时候， html的font-size将会跟着发生改变 --> <!-- 实现的步骤如下 --> <!-- 1 借助flexble.js文件 --> <!-- 2 将fle…...
c语言经典测试题8
在c语言经典测试题6的第一题，大家是否想过可不可以将递归参数改为s呢？或许有的人已经试过了，但是发现好像不会有结果，其实是因为s为后置，先试用后加1，然而我们这个是在s出了函数之后才会运行加1操作&#x…...
解决GitHub无法访问的问题：手动修改hosts文件与使用SwitchHosts工具
✨✨ 欢迎大家来访Srlua的博文（づ￣3￣）づ╭❤～✨✨ 🌟🌟 欢迎各位亲爱的读者，感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua，在这里我会分享我的知识和经验。&#x…...
ETL数据仓库的使用方式
一、ETL的过程 在 ETL 过程中，数据从源系统中抽取（Extract），经过各种转换（Transform）操作，最后加载（Load）到目标数据仓库中。以下是 ETL 数仓流程的基本步骤：…...
POST参数里加号+变成空格的问题处理
今天遇到个这样的问题，从前端传到后端的加密报文，里面包含了号，但在后端日志输出看出，变成空格。这个是由于经过RSA加密后引起的 解决办法： 1.前端转码：使用encodeURIComponent对参数进行转码 2.后端解码…...
【华为面试基础题】检查是否存在满足条件的数字组合
描述 给定一个正整数数组检查数组中是否存在满足规则的数组组合 规则： AB2C 输入描述： 第一行输出数组的元素个数，接下来一行输出所有数组元素，用空格隔开 输出描述： 如果存在满足要求的数 在同一行里依次输出 规则…...
亚信安慧AntDB数据并行加载工具的实现（一）
1.概述 数据加载速度是评判数据库性能的重要指标，能否提高数据加载速度，对文件数据进行并行解析，直接影响数据库运维管理效率。基于此，AntDB分布式数据库提供了两种数据加载方式： 一是类似于PostgreSQL的Copy命令&am…...
面经 | Java创建线程的三种方式
利用JUC包创建线程的三种方式： 通过继承Thread类创建线程类实现Runnable接口创建线程类通过Callable和Future接口创建线程 继承Thread类创建线程 class Thread1 extends Thread {Overridepublic void run() {System.out.println("启动线程1");} }实现R…...
【计算机网络】五种IO模型与IO多路转接之select
文章目录 一、五种IO模型二、非阻塞IO1.fcntl2.实现函数SetNoBlock3.轮询方式读取标准输入 三、I/O多路转接之select1.初识select2.select函数原型3.socket就绪条件4.select的特点5.select缺点6.select使用案例--只读取数据的server服务器1.err.hpp2.log.hpp3.sock.hpp4.select…...
通过一篇文章让你了解数据结构和算法的重要性
通过一篇文章让你了解数据结构和算法的重要性 前言一、 什么是数据结构？二、什么是算法？三、数据结构和算法的重要性在校园招聘的笔试中：在校园招聘的面试中：在未来的工作中： 四、如何学好数据结构和算法4.1 死磕代码&…...
python代码优化学习
代码优化对比： 优化前： # 登录系统 xxljob_login() start_time time.time() # 循环处理需要补数的数据 for item in authId_lists: preSettleInfoHandler(item) count 1 print("运行了第" str(count) "个") …...
未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？
编辑：陈萍萍的公主一点人工一点智能 未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用
文章目录 问题现象问题原因解决办法 问题现象 macOS启动台（Launchpad）多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显，都是Google家的办公全家桶。这些应用并不是通过独立安装的…...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板，就像一个模具，里面可以将不同类型的材料做成一个形状，其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式：templa…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
Java毕业设计：WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发，实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构，服务器端使用Java Servlet处理请求，数据库采用MySQL存储信息࿰…...