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) "个") …...
)
Java 语言特性(面试系列2)
一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...
shell脚本--常见案例
1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...
在rocky linux 9.5上在线安装 docker
前面是指南，后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
ssc377d修改flash分区大小
1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案，答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年，()预言了电磁波的存在，并指出…...
【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验
系列回顾： 在上一篇中，我们成功地为应用集成了数据库，并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了！但是，如果你仔细审视那些 API，会发现它们还很“粗糙”：有…...
全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...
20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码，而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库，可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画，可以包含在你的网页或应用项目中。 3.An…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
人工智能--安全大模型训练计划：基于Fine-tuning + LLM Agent
安全大模型训练计划：基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标：为安全大模型创建高质量、去偏、符合伦理的训练数据集，涵盖安全相关任务（如有害内容检测、隐私保护、道德推理等）。 1.1 数据收集 描…...