zoukankan      html  css  js  c++  java

  • Flask简易版本、Ajax、DOM操作，表单操作

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>结构关系</title>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>
        <i>列表项</i>
        <b>4</b>
    </li>
    <li>列表项5</li>
    <li>列表项6</li>
    <li>列表项7</li>
</ul>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    $('li').eq(3).click(function () {
        console.log(this);
        $this = $(this);
        console.log($this.prev().get(0));
        console.log($this.prevAll());
        console.log($this.next());
        console.log($this.parent());
        console.log($this.parents());
        console.log($this.children().eq(1));
        console.log($this.siblings());
    })
</script>
</html>
    结构关系

    一：DOM操作

    // sup.append(sub); 在sup的最后方添加sub
// $('body').append($box);

// sub.appendTo(sup); 将sub插入到sup的最后放
// $box.appendTo($('body'));

// sup.prepend(sub); 在sup的最前方添加sub
// $('body').prepend($box);

// 在wrapper后添加box
// $('.wrapper').after($box);

// box插入到wrapper前
// $box.insertBefore($('.wrapper'))

// 所有wrapper被box替换
// $('.wrapper').replaceWith($box)

// 用box把所有的wrapper替换掉
// $box.replaceAll($('.wrapper'))

// $('.wrapper').empty();
// $('.wrapper').html("");

$('.ele').click(function () {
    alert($(this).text())
});

// 自删: remove()不保留事件  detach()保留事件
// var $ele = $('.ele').remove();
var $ele = $('.ele').detach();
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOM操作</title>
    <style>
        .wrapper {
            width: 450px;
            margin: 50px auto;
            background-color: pink;
        }
        .wrapper:after {
            content: "";
            display: block;
            clear: both;
        }
        .box {
            width: 150px;
            height: 150px;
            background-color: red;
            border-radius: 50%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <!--3 x 3的9个圆-->
        <!--重复来创建 => 循环-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
        <!--<div class="box"></div>-->
    </div>
    <!--<div class="wrapper"></div>-->

    <div class="ele">123</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 1.创建页面元素对象
    var $box = $('<div></div>');

    // 2.操作页面元素对象
    $box.addClass('box');
    console.log($box);

    // 3.添加到页面的指定位置
    // $('.wrapper').append($box);

    // sup.append(sub); 在sup的最后方添加sub
    // $('body').append($box);

    // sub.appendTo(sup); 将sub插入到sup的最后放
    // $box.appendTo($('body'));

    // sup.prepend(sub); 在sup的最前方添加sub
    // $('body').prepend($box);

    // 在wrapper后添加box
    // $('.wrapper').after($box);

    // box插入到wrapper前
    // $box.insertBefore($('.wrapper'))

    // 所有wrapper被box替换
    // $('.wrapper').replaceWith($box)

    // 用box把所有的wrapper替换掉
    // $box.replaceAll($('.wrapper'))

    // $('.wrapper').empty();
    // $('.wrapper').html("");

    $('.ele').click(function () {
        alert($(this).text())
    });

    // 自删: remove()不保留事件  detach()保留事件
    // var $ele = $('.ele').remove();
    var $ele = $('.ele').detach();

    console.log($ele);
    $('body').append($ele);


</script>

<script>
    // 0.前提: 布局
    for (var i = 0; i < 9; i++) {
        // 1.创建
        var $box = $('<div class="box"></div>');
        // 2.设置
        $box.click(function () {
            alert($(this).index())
        });
        // 3.添加
        $('.wrapper').append($box);
    }
</script>
</html>
    jqDOM操作
    <!-- action: 请求的后台链接地址 -->
<!-- method: 请求方式 get | post -->
<form action="" method="post">
    <!--可以提交给后台的数据: 必须有唯一标识, 用name属性来标识-->

    <!--表单元素对象input通过设置type来实现不同的功能-->
    <div>
        <label for="usr">用户名:</label>
        <input type="text" id="usr" name="usr" value="000">
    </div>
    <div>
        <label for="pwd">密码:</label>
        <input type="password" id="pwd" name="pwd" placeholder="请输入密码">
    </div>
    
    <!--文本域-->
    <textarea></textarea>
    
    <!--列表-->
    <select name="sex">
        <option value="male">男</option>
        <option value="female">女</option>
        <option value="other">哇塞</option>
    </select>

    <!--单选框, name来关联, checked为默认选中项-->
    <div>
        男<input type="radio" name="gender">
        女<input type="radio" name="gender" checked>
    </div>

    <!--复选框, name来关联-->
    <div>
        爱好:
        男<input type="checkbox" name="like" value="male">
        女<input type="checkbox" name="like" value="female" checked>
    </div>
    
    <div>
        <button type="button">普通按钮</button>
        <button type="reset">重置</button>
        <button type="submit">提交</button>
        <input type="submit" value="我也是提交">
    </div>
</form>
    表单操作注释

    二：Flask实现简易后台

    from flask import Flask, request
from flask_cors import CORS

# 创建服务器对象
app = Flask(__name__)
# 解决跨越, 数据在两个服务器之间传输
CORS(app, supports_credentials=True)

# 将请求路径与逻辑函数形成一一对应关系
@app.route('/') # http://127.0.0.1:5000/
def home():
    return "<h1>主页</h1>"

@app.route('/index') # http://127.0.0.1:5000/index
def index():
    return "<h1 style='text-align:center;color:red'>index页面</h1>"

@app.route('/test') # http://127.0.0.1:5000/test
def test():
    # print(request)
    # print(type(request))
    a = request.args['a'] # 通过request对象的args拿到前台数据
    b = request.args['b']
    return a + b

# 为form表单登录请求提供处理逻辑 => 前端一定会出现页面转跳
@app.route('/login')
def login():
    usr = request.args['usr']
    pwd = request.args['pwd']

    if usr == 'abc' and pwd == '123':
        return "登录成功页面"
    return "登录失败页面"


@app.route('/loginAjax')
def login_ajax():
    usr = request.args['usr']
    pwd = request.args['pwd']

    if usr == 'abc' and pwd == '123':
        return "登录成功"
    return "登录失败"

# 自启文件, 启动falsk服务器
if __name__ == "__main__":
    app.run()  # port=6666 可以设置端口号
    from flask import Flask, request
from flask_cors import CORS

# 创建服务器对象
app = Flask(__name__)
# 解决跨越, 数据在两个服务器之间传输
CORS(app, supports_credentials=True)

# 将请求路径与逻辑函数形成一一对应关系
@app.route('/') # http://127.0.0.1:5000/
def home():
    return "<h1>主页</h1>"

@app.route('/index') # http://127.0.0.1:5000/index
def index():
    return "<h1 style='text-align:center;color:red'>index页面</h1>"

@app.route('/test') # http://127.0.0.1:5000/test
def test():
    # print(request)
    # print(type(request))
    a = request.args['a'] # 通过request对象的args拿到前台数据
    b = request.args['b']
    return a + b

# 为form表单登录请求提供处理逻辑 => 前端一定会出现页面转跳
@app.route('/login')
def login():
    usr = request.args['usr']
    pwd = request.args['pwd']

    if usr == 'abc' and pwd == '123':
        return "登录成功页面"
    return "登录失败页面"


@app.route('/loginAjax')
def login_ajax():
    usr = request.args['usr']
    pwd = request.args['pwd']

    if usr == 'abc' and pwd == '123':
        return "登录成功"
    return "登录失败"

# 自启文件, 启动falsk服务器
if __name__ == "__main__":
    app.run()  # port=6666 可以设置端口号
    服务器
    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录</title>
</head>
<body>
<!--action: 请求的链接地址 -->
<form action="http://127.0.0.1:5000/login" method="get">
    <div class="row">
        <label for="usr">用户名:</label>
        <input id="usr" name="usr" type="text" placeholder="请输入用户名">
    </div>
    <div class="row">
        <label for="pwd">密码:</label>
        <input id="pwd" name="pwd" type="password" placeholder="请输入密码">
    </div>
    <div class="row">
        <button type="submit">登录</button>
    </div>
</form>
</body>
</html>
    login页面，转跳时要改接口地址

    注意：

    form请求后台（会在服务器地址上发生页面跳转，不需要处理跨越问题）

    <!--action: 请求的链接地址 -->
<form action="http://127.0.0.1:5000/login" method="get">
    <div class="row">
        <label for="usr">用户名:</label>
        <input id="usr" name="usr" type="text" placeholder="请输入用户名">
    </div>
    <div class="row">
        <label for="pwd">密码:</label>
        <input id="pwd" name="pwd" type="password" placeholder="请输入密码">
    </div>
    <div class="row">
        <button type="submit">登录</button>
    </div>
</form>

    ajax请求后台（数据在两个服务器上传递，需要处理跨越问题）

    <h1>登录</h1>
<form action="" method="">
    <div class="row">
        <label for="usr">用户名:</label>
        <input id="usr" name="usr" type="text" placeholder="请输入用户名">
    </div>
    <div class="row">
        <label for="pwd">密码:</label>
        <input id="pwd" name="pwd" type="password" placeholder="请输入密码">
    </div>
    <div class="row">
        <button type="submit">登录</button>
    </div>
</form>

<script src="js/jquery-3.3.1.js"></script>
<script>
    // 取消form表单默认提交数据的事件
    $('form').submit(function () {
        return false;
    });

    // 用button点击发送ajax请求来完成数据交互 => 局部刷新
    $('button').click(function () {
        console.log("ajax请求...");
        // 获取用户输入的账户密码
        var usrStr = $('#usr').val();
        var pwdStr = $('#pwd').val();

        // ajax发送前台请求
        $.ajax({
            url: "http://127.0.0.1:5000/loginAjax",  // 请求地址
            data: {
                usr: usrStr, // 把用户数据提交给后台的key
                pwd: pwdStr
            },
            success: function (arg) { // 请求成功的回调函数 arg后台返回的数据结果
                console.log(arg);
                // 局部刷新前台页面内容
                $('h1').text(arg);
            }
        })
    })

</script>

    三：bootstrap入门

    用bootstrap规定好的HTML结构来构建HTML结构，再给具体的标签特定的类名（特定的全局属性），就能实现特定的页面样式与功能。

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>bs入门</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <style>
        #hehe {
            color: red;
            font-size: 100px;
        }
    </style>
</head>
<body>

<nav 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-1" 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="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></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="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</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>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <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="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<button type="button" class="btn btn-warning">按钮</button>
<i class="glyphicon glyphicon-arrow-down"></i>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">我是分组标题</li>
        <li class="bg-success"><a href="#">123</a></li>
        <li class="disabled"><a href="#">123</a></li>
        <li class="dropdown-header">我是分组标题</li>
        <li><a href="#" id="hehe">123</a></li>
    </ul>
</div>

<!--用bs规定好的html结构来构建html结构, 再给具体的标签特定的类名(特定的全局属性)-->
<!--就能实现特定的页面样式与功能-->
</body>
<script src="js/jquery-3.3.1.js"></script>
<!--注: bs是基于jq框架-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>

    $('#hehe').click(function () {

        alert("呵呵");
        return false;
    })
</script>

</html>
    bs入门
  • 相关阅读:
    如何让nacos中服务注册的ip是自定义的网段ip ( docker swarm )
    docker swarm集群节点打标签
    mysql 8 设置大小写不敏感
    mysql 8 安装&账户权限控制
    I/O(输入/输出)---序列化与反序列化
    I/O(输入/输出)---字节流与字符流
    I/O(输入/输出)---File类
    转发与重定向的区别
    application的使用（实现计数器）
    HTML的相关路径与绝对路径的问题---通过网络搜索整理
  • 原文地址：https://www.cnblogs.com/liuxiaolu/p/10331503.html
Copyright © 2011-2022 走看看