Python全栈最全学习之路-WEB前端练习（三）

最新推荐文章于 2020-11-28 15:11:42 发布
最新推荐文章于 2020-11-28 15:11:42 发布
阅读量221 收藏 2
点赞数
分类专栏： python全栈学习 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sdhrs_nn/article/details/108824990
版权

练习（三）

一、JQ练习

在这里插入图片描述
要求：
1、鼠标在照片外的时候，四张照片自动轮播，并隐藏左右箭头
2、鼠标在照片上时，停止轮播，左右箭头并显示出来，点击左右箭头会轮换照片，点击小圆点也会换照片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQ作业</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .box{
            width: 320px;
            height: 400px;
            border: 1px solid grey;
            margin: 100px auto;
            position: relative;
        }
        .box .pic{
            position: absolute;
            top: 0;
            left: 0;
        }
        .box .pic img{
            width: 320px;
            height: 400px;
            /*position: absolute;*/
        }
        .box .pic li{
            position: absolute;
            left: 0;
            top: 0;
        }
        /*.box .pic li{
            display: none;
        }
        .box .pic li.show{
            display: block;
        }*/
        .box .arrows{
            height: 400px;
        }
        .box .arrows li{
            width: 20px;
            height: 20px;
            position: absolute;
            background: grey;
            text-align: center;
            line-height: 20px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .box .arrows li:hover{
            background: white;
        }
        .box .arrows li.left{
            left: 0;
        }
        .box .arrows li.right{
            right: 0;
        }
        .box .dot{
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
        }
        .box .dot li{
            width: 10px;
            height: 10px;
            border: 1px solid grey;
            border-radius: 50%;
            background: grey;
            float: left;
            margin: 3px;
            cursor: pointer;
        }
        .box .dot li:hover{
            border: 1px solid grey;
            background: white;
        }
        .box .dot li.on{
            border: 1px solid grey;
            background: white;
        }
    </style>
</head>
<body>
<div class="box">
    <ul class="pic">
        <li><img src="images/hu1.jpg" alt="图片加载错误"></li>
        <li><img src="images/hu2.jpg" alt="图片加载错误"></li>
        <li><img src="images/hu3.jpg" alt="图片加载错误"></li>
        <li><img src="images/hu4.jpg" alt="图片加载错误"></li>
    </ul>
    <ul class="arrows">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ul>
    <ul class="dot">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script src="JQ/JQ11.js"></script>
<script>
    // 获取元素
    var $pic = $(".box .pic li");  // 图片
    var $arrows = $(".box .arrows li");  // 左右箭头
    var $dot = $(".box .dot li");  // 小圆圈

    var first = 0;  // 初始下标值，通过下标确定图片
    var len = $pic.length;  // 获取图片的总数
    var timer;  // 设置定时器的名称

    // 初始化
    $arrows.hide();  //  左右箭头隐藏
    $pic.hide().eq(0).show();
    $dot.removeAttr("class").eq(0).addClass("on");

    // 变换函数、
    function change(i) {
        $pic.eq(first).fadeOut(1000);  //  将上一张图片淡出页面
        $dot.eq(first).removeClass("on");  //  同时将上一个小圆圈去掉
        first = i;
        $pic.eq(first).fadeIn(1000);  //  将下一张图片淡入页面
        $dot.eq(first).addClass("on")
    }

    //  自动轮播的函数
    function auto(){
        timer = setInterval(function(){
            var num = first;
            num++;
            if(num>(len-1)){
                num = 0;
            }
            change(num);
        },2000)
    }
    auto();

    //  小圆圈的点击事件
    $dot.click(function(){
        var num = $(this).index();
        //  如果当前点击的小圆圈的小标不是当前所轮播的，那就改变图片
        if(num != first){
            change(num);
        }
    });

    //  左右箭头的点击事件
    $arrows.click(function(){
        var num = first;
        //  获取左右箭头的下标，下标值为0或者1
        //  如果为1，则为true，右边的箭头往后轮播
        if($(this).index()){
            // 轮播后面一张图片
            num += 1;
            if(num>(len-1)){
                num = 0;
            }
        }else{  // 如果为0，则为false，左边的箭头往前轮播
            num -= 1;
            if(num < 0){
                num = len -1;
            }
        }
        change(num);
    });

    //  划入左右箭头显示，停止轮播
    //  划出左右箭头隐藏，继续轮播
    $(".box").hover(function(){
        $arrows.show();
        clearInterval(timer);
    },function(){
        $arrows.hide();
        auto();
    });
</script>
</body>
</html>

在这里插入图片描述总结：
1、图片位置、左右箭头、小圆点
2、初始状态
3、如何进行轮播
4、划出与划入状态
5、箭头、小圆点和照片如何一一对应

二、Ajax练习

在这里插入图片描述
要求：
1、建好此页面
2、使用传统表单方法，填好信息后在后台输出填写的信息
3、使用Ajax方法，填好信息后在后天输出填写的信息
方法一：

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax作业-form传统形式</title>
</head>
<body>
<form action="/" method="post">
    <!--文本框-->
    用户名：<input type="text" placeholder="请输入用户名" name="user"><br>
    <!--密码框-->
    密&emsp;码：<input type="password" placeholder="请输入密码" name="pwd"><br>
    <!--单选框-->
    性&emsp;别：<input type="radio" value="male" name="sex" id="male" checked>
                <label for="male">男</label>
                <input type="radio" value="male" name="sex" id="female" checked>
                <label for="female">女</label>
                <input type="radio" value="male" name="sex" id="no" checked>
                <label for="no">保密</label>
    <br>
    <!--多选框-->
    爱&emsp;好：<input type="checkbox" value="play" name="hobby" id="play">
                <label for="play">打游戏</label>
                <input type="checkbox" value="study" name="hobby" id="study">学习
                <input type="checkbox" value="basketball" name="hobby" id="basketball">打球
    <br>
    <!--文件-->
    上传头像：<input type="file" accept="image/*" name="file"><br>
    <!--下拉框-->
    地&emsp;址：<select name="address" id="address" size="1">
                    <!--分组-->
                    <optgroup label="中国">
                        <option value="SX" selected>陕西</option>
                        <option value="BJ">北京</option>
                        <option value="GZ">广州</option>
                        <option value="HN">湖南</option>
                    </optgroup>
                </select>
    <br>
    <!--文本域-->
    个人简介：<textarea name="introduce" id="introduce" cols="30" rows="10"></textarea>
    <br>
    <!--按钮-->
    <input type="submit" value="登录">
    <input type="reset" value="取消">
</form>
</body>
</html>

	后台代码如下：

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render("Task3_2.html")
    def post(self,*args,**kwargs):
        print(self.get_argument("user"))
        print(self.get_argument("pwd"))
        print(self.get_argument("sex"))
        print(self.get_arguments("hobby"))
        print(self.get_argument("file"))
        print(self.get_argument("address"))
        print(self.get_argument("introduce"))
if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),
    ])
    application.listen(8888)
    tornado.ioloop.IOLoop.current().start()

在这里插入图片描述
方法二：

	HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax作业</title>
</head>
<body>
<form action="/" method="post">
    <!--文本框-->
    用户名：<input type="text" placeholder="请输入用户名" name="user"><br>
    <!--密码框-->
    密&emsp;码：<input type="password" placeholder="请输入密码" name="pwd"><br>
    <!--单选框-->
    性&emsp;别：<input type="radio" value="male" name="sex" id="male" checked>
                <label for="male">男</label>
                <input type="radio" value="male" name="sex" id="female" checked>
                <label for="female">女</label>
                <input type="radio" value="male" name="sex" id="no" checked>
                <label for="no">保密</label>
    <br>
    <!--多选框-->
    爱&emsp;好：<input type="checkbox" value="play" name="hobby" id="play">
                <label for="play">打游戏</label>
                <input type="checkbox" value="study" name="hobby" id="study">学习
                <input type="checkbox" value="basketball" name="hobby" id="basketball">打球
    <br>
    <!--文件-->
    上传头像：<input type="file" accept="image/*" name="file"><br>
    <!--下拉框-->
    地&emsp;址：<select name="address" id="address" size="1">
                    <!--分组-->
                    <optgroup label="中国">
                        <option value="SX" selected>陕西</option>
                        <option value="BJ">北京</option>
                        <option value="GZ">广州</option>
                        <option value="HN">湖南</option>
                    </optgroup>
                </select>
    <br>
    <!--文本域-->
    个人简介：<textarea name="introduce" id="introduce" cols="30" rows="10"></textarea>
    <br>
    <!--按钮-->
    <input type="button" value="登录" id="btn">
    <input type="button" value="取消">
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    var $btn = $("#btn");
    $btn.click(function(){
         // 获取值
        var $user = $("input[name='user']").val();
        var $pwd = $("input[name='pwd']").val();
        var $sex = $("input[name='sex']:checked").val();
        var $hobbies = $("input[name='hobby']:checked").map(function(){
            return $(this).val();
        }).get().join(",");
        var $file = $("input[name='file']").val();
        var $add = $("select").val();
        var $intro = $("textarea").val();
        // 通过Ajax把数据传到后台
        $.ajax({
            "type": "post",
            "url": "/",
            "data": {
                "user": $user,
                "pwd": $pwd,
                "sex": $sex,
                "hobbies": $hobbies,
                "file": $file,
                "add": $add,
                "intro": $intro
            },
            "success": function(){
                document.write("提交成功!");
            }
        })
    });
</script>
</body>
</html>

	后台代码如下：

import tornado.ioloop
import tornado.web

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        # self.write("Hello, world")
        self.render("Task_JQ3_2.html")
    def post(self,*args,**kwargs):
        print(self.get_argument("user"))
        print(self.get_argument("pwd"))
        print(self.get_argument("sex"))
        print(self.get_arguments("hobbies"))
        print(self.get_argument("file"))
        print(self.get_argument("add"))
        print(self.get_argument("intro"))
if __name__ == "__main__":
    application = tornado.web.Application([
        (r"/", MainHandler),
    ])
    application.listen(8888)
    tornado.ioloop.IOLoop.current().start()

在这里插入图片描述
总结：
1、如何获取到值
2、如何获取到多个值

Fresh_anyu
关注
专栏目录
Python从0到100（四十）：Web开发简介-从前端到后端（文末免费送书）
Hello大家好，我是Dream，如果帮得到你，那我深感荣幸！交流学习、商务合作：https://bbs.csdn.net/topics/614347534
07-15 4万+
AI短视频生成与剪辑实战108招 ： ChatGPT 剪映》通过12个专题内容、108个实用技巧、170多分钟的教学视频，讲解了AI短视频的生成与剪辑全流程，并随书附赠了108集同步教学视频、210多个素材效果、70多个书中案例关键词、5200多个绘画关键词等。具体内容按以下两条线展开。一是技能线：详细讲解了ChatGPT、文心一格、Midjourney的使用方法，以及3种AI短视频生成方法—文本生视频、图片生视频和视频生视频。
Python全栈（九）Web前端基础之6.JQuery的基本使用
CUFEECR的博客
08-21 1552
JQuery是一个高效、精简、功能丰富的JS工具库，包括压缩版和未压缩版，可以下载本地导入或使用CDN，比原生JS简洁。JQuery选择器规则与CSS相同，包括对id、类、标签等的选择；还有has、not、eq等过滤器；包括prev、next等选择器转移；可以根据长度判断是否找到元素。常见属性包括val、prop、attr等；操作样式类名包括添加类、移除类、切换类。事件包括得失焦点、鼠标事件和DOM事件等。JQuery可以实现淡入淡出、显示隐藏、展开卷起等特殊效果；调用animate方法实现动画效果。
python-web-习题
刘望的博客
05-06 286
1．简单描述 webbrowser、requests、BeautifulSoup 和 selenium 模块之间的不同 webbrowser模块有一个 open() 方法，它启动 web 浏览器，打开指定的 URL，就 这样。 Requests 模块可以从网上下载文件和页面。 BeautifulSoup 模块解析 HTML。 最后，selenium 模块可以启动并控制浏览器  ...
web前端学习笔记(python)（一）
weixin_30276935的博客
07-25 182
瞎JB搞】感觉自己全栈了，又要把数据库里面的内容，以web形式展示出来，并支持数据操作。占了好多坑。。。。。慢慢填（主要参考廖雪峰的官网，不懂的再百度） 一、web概念 　　Client/Server模式简称CS架构，就是本地需要下载一个客户端的。随着互联网的兴起CS架构不适合Web，最大的原因是Web应用程序的修改和升级非常迅速，而CS架构需要每个客户端逐个升级桌面App，因此Browser...
Python全栈最全学习之路-WEB前端（三）
Sdhrs_nn的博客
09-12 159
CSS提升 一、盒子模型 1、盒子模型简介 盒子模型（Box Model） 所有HTML元素可以看做盒子，在CSS中，“box model”这一术语是用来设计和布局时使用。 盒子模型包含内容 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容 各部分解释 Margin（外边距）：清除边框外的区域，外边距是透明的。 Border（边框）：围绕在内边距和内容外的边框。 Padding（内边框）：清除内容周围的区域，内边距是透明的。 Content（内容）：盒子的内容，显示
Python全栈最全学习之路-WEB前端练习（一）
Sdhrs_nn的博客
09-22 220
练习（一） 一、HTML练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML作业</title> </head> <body> <div> <h2>请注册</h2> <p> <span>已有账号？<
如何学好前端？Python？小白看过来！内含学习资料！！
web1299的博客
07-17 350
Web前端的火热，不仅仅是因为招聘市场需求量大，还有一个重要的原因就是，入行门槛低，入门简单。真的是这样吗？0基础的小白也能转行学Web前端吗？很多同学都有这样的疑虑，认为没那么简单。下面Web前端老师总结了一些关于Web前端入门的东西，希望对大家有所帮助。 1、Web前端入行门槛低吗？ 对于这个问题，应该辩证地看。相对于IT技术类的其他岗位，Web前端绝对算是门槛较低的，当然对应的起点也低。如果是小白入行或转行到IT技术的话，Web前端老师建议选择Web前端。 它的门槛低主要体现在两个方面： （1） W
LNH-Python全栈3期视频教程
11-11
根据提供的信息，“LNH-Python全栈3期视频教程”是一套完整的Python编程学习资源，旨在帮助初学者和有一定基础的学习者全面掌握Python语言及其在Web开发中的应用。该课程为期104天，通过视频教程、配套课件代码和...
基于python flask web框架的全栈项目, 前端重新设计, 写博客功能完全支持M-flask-blog.zip
01-31
本项目是基于Python Flask构建的一个全栈Web应用，特别强化了前端设计和博客写作功能。 **全栈项目概述** 全栈开发是指从后端服务器、数据库到前端界面的完整开发流程。在这个项目中，我们将利用Flask提供的强大...
Python全栈（九）Web前端基础之3.CSS常见样式和选择器
CUFEECR的博客
08-16 3143
CSS常见文本样式包括颜色、大小、字体等，颜色有4种表示形式；列表常见样式包括类型、图片和位置等；背景样式包括颜色、图片、重复方式、位置；浮动主要为了脱离文档流的垂直排列、变为行内元素，存在高度塌陷问题，有3种解决办法。元素选择器是已经存在的标签的元素名称；使用id选择器给某一唯一元素设置格式；给某一类标签设置同一个样式使用类选择器；匹配所有元素使用通配选择器；群组选择器可以抽离相同样式；包含选择器给某元素的子元素设置样式；伪类选择器可以向超链接添加特殊效果；选择器优先级行内样式最高，通配选择器最低。
想学软件编程，前端和python选哪个比较好？
热门推荐
Q2605894893的博客
07-17 1万+
个人建议你学习Python，首先Python对小白比较友好，你在学习的过程中也可以看看自己喜不喜欢编程，如果不适合可以及早抽身，如果喜欢，以后的工作也是这个，何乐而不为呢?其次Python的未来前景也很好，它能为你带来一些优势。 现在的前端不能和以前比，不是以前前端会个HTML/CSS/JS/JQ 就能找到工作的时候，现在前端如果说不会框架，不会webpack等打包工具，真的很难找到一份比较满意...
Python全栈最全学习之路-WEB前端（一）
Sdhrs_nn的博客
09-07 406
HTML简介 一、HTML介绍 1、HTML 1-1、HyperText Marked Language 超文本标记语言，是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。 1-2、标签 HTML标签页可以成为元素，不同的标签有不同的功能解释，用来表示不同的功能，每个标签都是由一对尖括号包裹的单词组成。一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签，开始和结束标签也称为开放标签和闭合标签。 1-3、W
[ python ] 练习作业 - 3
weixin_30444105的博客
10-19 361
1. 写出Python查找一个变量的顺序 提示：4中作用域的顺序 本地作用域(local) --> 当前作用域被嵌入的本地作用域(enclsing locals) --> 全局/模块作用域(Global) --> 内置作用域(build-in) 2. Python里的拷贝，打印结果并解释。 https://www.cnblogs.com/hukey/p/9...
Java、Python、Go 哪个后端编程语言适合web前端工程师学习？
weixin_34357436的博客
02-21 5163
不知道作为web前端工程师的大家有没有相似的经历：很多时候我们想深入学习node，立志向web全栈方向发展，但是却十分遗憾的发现很多node教程基本都是helloworld级别的。如果真想搞后端开发，node还是不稳定，于是乎我们有了想接触更多后端语言的想法。那么node之外还想掌握一门后端语言，Java、Python、Go 哪个更适合web前端工程师呢？关于这个问题，我来说...
python前端开发学什么专业_女生学web前端好点还是Python 好点？
weixin_39634884的博客
11-28 245
作为一名IT领域的科研教育工作者，我来回答一下这个问题。首先，当前学习Web开发和Python编程都是不错的选择，具体选择学习哪个方向，要取决于两方面因素，其一是初学者自身的知识结构和能力特点，其二是取决于初学者的发展规划。另外，初学者所处的环境，对于学习方向也有一定的影响。Web技术体系经过多年的发展已经趋于成熟了，而且Web开发领域不仅人才需求量比较大，人才需求的类型也比较多元化，所以不同知识...
大牛推荐的30本经典编程书籍，从Python到前端都有！
weixin_44568612的博客
01-24 2536
我是一名从事了5年前端的程序员，辞职目前在做讲师，今年年初整理了一份适合2019年学习的web前端干货，从最基础的HTML+CSS+JS到移动端HTML5到各种框架都有整理，免费送给每一位前端小伙伴，这里是小白聚集地，欢迎初学和进阶中的小伙伴。" 加QQ群：585843909（招募中） Python 系列 如果你之前一点编程经验都没有，先看如下几本： 34.《简明 Python 教程》(A Byt...
Python全栈最全学习之路-Python基础（十一）
Sdhrs_nn的博客
07-16 2912
练习习题 这节课主要是一些编程题，代码仅供参考，有不好的地方可以留言指点，感谢！！！ 一、上节课作业 1、检查用户名是否是由字母数字下划线组成(字母或下划线开头 import re st = input('请输入你的用户名：') a = re.findall('^[a-zA-Z_]\w+$',st) print(a) 2、检查用户输入的邮箱号是否符合规范 import re st = input('请输入你的邮箱号：') a = re.findall(r'^[A-z0-9]+@[0-9A-z]+\.
Python全栈最全学习之路-Python基础（七）
Sdhrs_nn的博客
06-18 757
面向对象初级 一、面向对象介绍 思考一：在之前学习的基础上，已经能够处理实现很多功能，比如我们可以定义一个关于人相关的内容，但是如果要表示很多人该怎么办呢？ 加粗样式面向对象介绍 name = '不动' # 定义姓名 age = 18 name1 = '如山' age1 = 18 def play1(name): print('%s 正在玩游戏---' % name) def search1(name): print('%s 正在查资料---' % name) 描述一个人的信息和行为很容易，但
Python全栈最全学习之路-Python基础（八）
Sdhrs_nn的博客
06-25 595
面向对象高级 一、常用内置函数 思考一：上节课掌握了类的定义和基本使用，可以通过点操作符去访问属性和方法，但是如果属性不存在会怎么办呢？ 思考二：不希望因为属性不存在而出现报错，如何避免这个问题呢？ class Person: def __init__(self,name,age,sex): self.name = name self.age = age self.sex = sex def run(self): print(f'{self.name}今年{self.age}岁')
Python全栈学习路线
最新发布
08-03
Python全栈学习路线通常包括以下几个阶段： 1. **基础知识**：首先，你需要掌握Python语言的基础，包括变量、数据类型、控制流（如if语句、for循环）、函数等。通过官方文档或入门教程如《Python Crash Course》来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值