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>

image-20240227091949159

②选择器(直接寻找)

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>

33

<!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>

33

④样式操作

在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>

33

⑥事件

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>

33

当页面框架加载完成之后执行代码：

<!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>

202403011529585

更多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">&times;</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

image-20240301203202909
在这里插入图片描述

  • 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>

image-20240301204932719

image-20240301204950965

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😊）
如果对大家有帮助的话，希望大家能多多点赞+关注！这样我的动力会更足！

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

2024年制造业，智能控制与材料科学国际会议（ICMICMS 2024）

2024年制造业，智能控制与材料科学国际会议（ICMICMS 2024）

全称&#xff1a;2024年制造业&#xff0c;智能控制与材料科学国际会议&#xff08; ICMICMS 2024&#xff09; 会议网址:http://www.icmicms.com会议时间: 2024.03.25截稿时间&#xff1a;2024.03.15会议地点: 昆明投稿邮箱&#xff1a;icmicms_info163.com投稿标题&#xff1…
阅读更多...
vue3的router

vue3的router

需求 路由组件一般放在&#xff0c;pages或views文件夹, 一般组件通常放在component文件夹 路由的2中写法 子路由 其实就是在News组件里面&#xff0c;再定义一个router-view组件 他的子组件&#xff0c;机会渲染在router-view区域 路由传参 <RouterLink :to"/news…
阅读更多...
退休开便利店真的靠谱吗？2024比较赚钱的创业项目排行

退休开便利店真的靠谱吗？2024比较赚钱的创业项目排行

近日多个退休后开便利店赚钱的新闻登上热搜&#xff0c;但是&#xff0c;小编对此有疑问&#xff0c;退休的老年人开便利店真的是一个好选择吗&#xff1f; 第一、便利店最基本的转让费&#xff0c;装修费&#xff0c;进货等等&#xff0c;这笔开支非常大&#xff0c;足以掏空老…
阅读更多...
IDC 中搭建 Serverless 应用平台：通过 ACK One 和 Knative 玩转云资源

IDC 中搭建 Serverless 应用平台：通过 ACK One 和 Knative 玩转云资源

作者&#xff1a;元毅、庄宇 如何打造云上&#xff08;公共云&#xff09;、云下&#xff08;IDC 数据中心&#xff09;统一的云原生 Serverless 应用平台&#xff0c;首先我们来看一下 ChatGPT 4 会给出什么样的答案&#xff1a; 如何打造云上、云下统一的云原生 Serverless…
阅读更多...
Android修行手册-Chaquopy中opencv、numpy的初步应用

Android修行手册-Chaquopy中opencv、numpy的初步应用

Unity3D特效百例案例项目实战源码Android-Unity实战问题汇总游戏脚本-辅助自动化Android控件全解手册再战Android系列Scratch编程案例软考全系列Unity3D学习专栏蓝桥系列ChatGPT和AIGC &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分…
阅读更多...
C/C++ Zlib库调用Minzip来封装MyZip压缩类

C/C++ Zlib库调用Minzip来封装MyZip压缩类

文章目录 1、C/C Zlib库调用Minzip来封装MyZip压缩类1.1、类的功能实现1.1.1、ZIP压缩函数 Compress1.1.2、ZIP解压函数 UnCompress1.1.3、代码如下1.1.4、如何使用类 1、C/C Zlib库调用Minzip来封装MyZip压缩类 Zlib是一个开源的数据压缩库&#xff0c;提供了一种通用的数据压…
阅读更多...
Mybatis | Mybatis的核心配置

Mybatis | Mybatis的核心配置

目录: Mybatis的核心配置 :一、MyBatis的 “核心对象”1.1 SqlSessionFactory1.2 SqlSession :SqlSession对象中的操作数据库的方法 :\<T> T selectOne ( String statement )\<T> T selectOne( String statement , Object parameter )\<E> List\<E> se…
阅读更多...
android程序员面试笔试宝典，Android开发社招面试总结

android程序员面试笔试宝典，Android开发社招面试总结

部分面试常问的面试专题 一、Java篇 1.多线程并发&#xff1b; sleep 和 wait 区别join 的用法线程同步&#xff1a;synchronized 关键字等线程通信线程池手写死锁 2.Java 中的引用方式&#xff0c;及各自的使用场景 3.HashMap 的源码 4.GC(垃圾回收)是什么&#xff1f;如何…
阅读更多...
日本极致产品力|如何利用招牌业务，打造占据63%市场份额的咖喱品牌

日本极致产品力|如何利用招牌业务，打造占据63%市场份额的咖喱品牌

招牌产品是品牌的代表性产品&#xff0c;行业中领先品牌的招牌产品往往可以代表整个品类。在内线产品竞争中&#xff0c;通过在顾客心智中确立一个强势招牌产品形象可以提高品牌势能。好侍能够成为日本调味品头部品牌&#xff0c;通过香辛料招牌业务获取增长是其成功的关键。 从…
阅读更多...
分享6个解决msvcp110.dll丢失的方法,全面解析msvcp110.dll文件

分享6个解决msvcp110.dll丢失的方法,全面解析msvcp110.dll文件

msvcp110.dll 是一个动态链接库 (DLL) 文件&#xff0c;属于 Microsoft Visual C 库的一部分&#xff0c;具体来说是 Microsoft Visual C 2012 版本的运行时组件。这个 DLL 文件包含了在 Windows 环境下运行用 C 编写的程序所必需的一些函数和资源。当一个应用程序是使用 Visua…
阅读更多...
基于Python3的数据结构与算法 - 07 归并排序

基于Python3的数据结构与算法 - 07 归并排序

一、归并 引入 假设现在的列表分两段有序&#xff0c;如何将其合并成为一个有序列表。 这种操作成为一次归并。 归并的思路 分别对两个列表进行遍历&#xff0c;比较两个列表中的最小值&#xff0c;将更小的取出来。取出后一次进行上操作&#xff0c;直到其中一个列表中的元…
阅读更多...
1分钟学会Python字符串前后缀与编解码

1分钟学会Python字符串前后缀与编解码

1.前缀和后缀 前缀和后缀指的是&#xff1a;字符串是否以指定字符开头和结尾 2.startswith() 判断字符串是否以指定字符开头&#xff0c;若是返回True&#xff0c;若不是返回False str1 "HelloPython"print(str1.startswith("Hello")) # Trueprint…
阅读更多...
【转载】深度学习笔记——详解损失函数

【转载】深度学习笔记——详解损失函数

原文链接: https://blog.csdn.net/weixin_53765658/article/details/136360033 CSDN账号: Purepisces github账号: purepisces 希望大家可以Star Machine Learning Blog https://github.com/purepisces/Wenqing-Machine_Learning_Blog 损失函数 根据您使用的神经网络类型和数…
阅读更多...
力扣SQL50 进店却未进行过交易的顾客 查询

力扣SQL50 进店却未进行过交易的顾客 查询

Problem: 1581. 进店却未进行过交易的顾客 文章目录 思路Code 思路 &#x1f468;‍&#x1f3eb; 山山山林老木 左连接查询筛选 transation_id 为 null 的值group by customer_id Code select v.customer_id ,count(customer_id) count_no_trans from Visits v left jo…
阅读更多...
java找工作之JavaWeb（一）

java找工作之JavaWeb（一）

JavaWeb 一个web应用有多部份组成&#xff08;静态web&#xff0c;动态web&#xff09; html&#xff0c;css&#xff0c;jsjsp&#xff0c;servletjava程序jar包配置文件(Properties) web应用程序编写完毕后&#xff0c;若想提供给外界访问&#xff0c;需要一个服务器来统一…
阅读更多...
3694-51-7，3,5-Dinitro-1,2-phenylenediamine，合成其他化合物的重要中间体

3694-51-7，3,5-Dinitro-1,2-phenylenediamine，合成其他化合物的重要中间体

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;3694-51-7&#xff0c;3,5-Dinitro-1,2-phenylenediamine&#xff0c;3,5-二硝基-1,2-苯二胺;3,5-二硝基苯-1,2-二胺 一、基本信息 【产品简介】&#xff1a;3,5-Dinitro-1,2-phenylenediamine, with the molecular…
阅读更多...
一台工控机的能量

一台工控机的能量

使用Docker搭建EPICS的IOC记录 Zstack EPICS Archiver在小课题组的使用经验 以前电子枪调试&#xff0c;用一台工控机跑起束测后台&#xff0c;这次新光源用的电子枪加工回来又是测试&#xff0c;又是用一台工控机做起重复的事&#xff0c;不过生命在于折腾&#xff0c;重复的…
阅读更多...
openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划

openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划

文章目录 openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划 openGauss学习笔记-232 openGauss性能调优-系统调优-资源负载管理-资源管理准备-资源规划 完成资源负载管理功能配置前&#xff0c;需要先根据业务模型完成租户资源的规划。业…
阅读更多...
【白嫖8k买的机构vip教程】Appium自动化(3)：Appium-Desktop界面介绍

【白嫖8k买的机构vip教程】Appium自动化(3)：Appium-Desktop界面介绍

Appium-Desktop主界面包含三个菜单Simple、Advanced、Presets Simple界面&#xff1a; Host设置Appium server的ip地址&#xff0c;本地调试可以将ip地址修改为127.0.0.1&#xff1b;Port设置端口号&#xff0c;默认是4723不用修改Start Server 启动 Appium serverEdit Confi…
阅读更多...
[SUCTF 2019]EasyWeb --不会编程的崽

[SUCTF 2019]EasyWeb --不会编程的崽

个人认为&#xff0c;这题还算有些东西。先来看源码 <?php function get_the_flag(){// webadmin will remove your upload file every 20 min!!!! $userdir "upload/tmp_".md5($_SERVER[REMOTE_ADDR]);if(!file_exists($userdir)){mkdir($userdir);}if(!empty…
阅读更多...
最新文章

Copyright @ 2022~2023