Python Web开发记录 Day5:jQuery(JavaScript库)

名人说:莫道桑榆晚,为霞尚满天。------刘禹锡(刘梦得,诗豪)
创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊)

目录

五、jQuery

jQuery 是一个快速、小巧、功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件处理、动画和Ajax等Web开发中常见任务变得更加简单。通过简化HTML与JavaScript之间的交互,jQuery帮助开发者通过更少的代码实现更多的功能。jQuery可以看作是一个JavaScript第三方模块(第三方类库)。

  • 基于jQuery,自己开发一个功能。
  • 现成的工具依赖jQuery,例如:BootStrap的动态效果。
1、jQuery-选择器和菜单案例
①快速上手
  • 下载jQuery

https://jquery.com/

  • 应用jQuery
html 复制代码
<!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选择器
html 复制代码
<h1 id="txt">中国联通</h1>
<h1>中国联通</h1>
<h1>中国联通</h1>
js 复制代码
$("#txt")
  • 选择器
html 复制代码
<h1 class="c1">
    中国联通1
</h1>
<h1 class="c2">
    中国联通2
</h1>
<h1 class="c3">
    中国联通1
</h1>
js 复制代码
$(".c1")
  • 标签选择器
html 复制代码
<h1 class = "c1">
    中国联通1
</h1>
<div class = "c1">
    中国联通2
</div>
<h1 class="c2">
    中国联通3
</h1>
js 复制代码
$("h1")
  • 层级选择器
html 复制代码
<h1 class = "c1">
    中国联通1
</h1>
<h1 class = "c1">
	<div class = "c2">
    	<span></span>
        <a></a>
	</div>
</h1>
<h1 class="c2">
    中国联通3
</h1>
js 复制代码
$(".c1 .c2 a")
  • 多元素选择器
html 复制代码
<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>
js 复制代码
$("#c3,#c2,li")

$("#c3,#c2,li") 在jQuery中属于多元素选择器 。这种选择器允许你通过使用逗号分隔每个选择器,一次选择多个元素 。对于这个例子,它会选择ID为c3的元素、ID为c2的元素,以及页面上所有的<li>元素。

  • 属性选择器
html 复制代码
<input type="text" name="n1"/>
<input type="text" name="n1"/>
<input type="text" name="n2"/>
js 复制代码
$("input[name='n1']")
③间接寻找
  • 找兄弟
html 复制代码
<div>
    <div>北京</div>
    <div id='c1'>上海</div>
    <div>广州</div>
    <div>深圳</div>
</div>
js 复制代码
$("#c1").prev()  		//上一个 北京
$("#c1") 		 	 	//上海
$("#c1").next()	 		//下一个 广州
$("#c1").next().next()  //下一个的下一个 深圳

$("#c1").siblings()		//所有的兄弟姐妹,北(上)广深
  • 找父子
html 复制代码
<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>
js 复制代码
$("#c1").parent()			//父亲
$("#c1").parent().parent()	//父亲、父亲

$("#c1").children()			//所有的孩子
$("#c1").children(".p10")	//所有的儿子中寻找class=p10

$("#c1").find(".p10")		//去所有子孙中寻找class=p10
$("#c1").find("div")		//去所有子孙中寻找div标签

案例:菜单的切换

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;
        }
        .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>
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中,addClassremoveClasshasClass都是用于操作元素类的方法。

  • 1️⃣addClass
    addClass方法用于向选定的元素添加一个或多个类。这个方法可以接受一个或多个类名作为参数,如果传入多个类名,类名之间用空格分隔。

    javascript 复制代码
    // 向ID为"example"的元素添加"myClass"类
    $("#example").addClass("myClass");
    
    // 向所有<p>元素添加"myClass"和"anotherClass"类
    $("p").addClass("myClass anotherClass");
  • 2️⃣removeClass
    removeClass方法 用于从选定的元素中删除一个或多个类。和addClass方法一样,这个方法可以接受一个或多个类名作为参数,如果传入多个类名,类名之间用空格分隔。如果没有指定类名,则会删除元素的所有类。

    javascript 复制代码
    // 从ID为"example"的元素中删除"myClass"类
    $("#example").removeClass("myClass");
    
    // 从所有<p>元素中删除"myClass"和"anotherClass"类
    $("p").removeClass("myClass anotherClass");
  • 3️⃣hasClass

    hasClass方法 用于检查当前的元素是否含有特定的类,如果元素含有该类,则返回true;否则返回false。这个方法对于条件判断和实现特定的逻辑非常有用。

    javascript 复制代码
    // 检查ID为"example"的元素是否含有"myClass"类
    if ($("#example").hasClass("myClass")) {
      console.log("元素有myClass类");
    } else {
      console.log("元素没有myClass类");
    }

这些方法的出现使得在使用jQuery时对元素的类进行操作非常方便,提高了开发效率和代码的可读性。

⑤值的操作
html 复制代码
<div id='c1'>内容</div>
js 复制代码
$("#c1").text()		//获取文本内容
$("#c1").text("休息")		//设置文本内容
html 复制代码
<input type="text" id='c2'/>
js 复制代码
$("#c2").val()			//获取用户的值
$("#c2").val("娃哈哈")	  //设置用户的值	

案例1:动态创建数据

html 复制代码
<!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提供了简便的方法来处理用户交互,如点击、悬停、键盘输入等事件。这使得在元素上绑定事件监听器和定义事件处理函数变得简单起来,例如获取信息、删除信息等。

html 复制代码
<input type="button" value="提交" onclick="getInfo()"/>

<script>
	function getInfo(){
        
    }
</script>
html 复制代码
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>

<script>
	$("li").click(function(){
        //点击li标签时,自动执行这个函数;
        //$(this) 当前你点击的是那个标签。
        
   });
</script>

在jQuery中可以删除某个标签。

html 复制代码
<div id='c1'>内容</div>

$("#c1").remove();

案例1:删除元素

html 复制代码
<!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>

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

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:表格操作
html 复制代码
<!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)。
html 复制代码
<!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"><span
                            aria-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)


  • 2.应用插件
html 复制代码
<!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
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
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😊)
如果对大家有帮助的话,希望大家能多多点赞+关注!这样我的动力会更足!

相关推荐
你挚爱的强哥27 分钟前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
湫ccc1 小时前
《Python基础》之字符串格式化输出
开发语言·python
mqiqe2 小时前
Python MySQL通过Binlog 获取变更记录 恢复数据
开发语言·python·mysql
AttackingLin2 小时前
2024强网杯--babyheap house of apple2解法
linux·开发语言·python
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
哭泣的眼泪4082 小时前
解析粗糙度仪在工业制造及材料科学和建筑工程领域的重要性
python·算法·django·virtualenv·pygame
湫ccc3 小时前
《Python基础》之基本数据类型
开发语言·python