day55 Pyhton 前端Jquery07

昨日回顾:

　　表单,点击submit提交以后,服务端受到信息

import socket
import pymysql
from urllib.parse import unquote

def run():
    sock = socket.socket()
    sock.bind(('127.0.0.1', 8081))
    sock.listen(5)
    '''

    'GET /?username=alex&pwd=123 HTTP/1.1
    Host: 127.0.0.1:8081
    Connection: keep-alive
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    Referer: http://localhost:63342/01-lesson/%E9%9D%99%E6%80%81%E7%BD%91%E7%AB%99/index.html?_ijt=726h7dpjc8l6d6gqbjfmee6tor
    Accept-Encoding: gzip, deflate, br
    Accept-Language: zh-CN,zh;q=0.9
    Cookie: csrftoken=B6UX45uX3HeZyEBYfT0RKStoBqOF72qMYTT432aoeAyGK6uUcAbfjmbmkiBXlDxY; sessionid=pqwpjn15zp78cioj0pjfruelqalbhbwh

    '

    b'GET / HTTP/1.1
    Host: 127.0.0.1:8080
    Connection: keep-alive
    Upgrade-Insecure-Requests: 1
    User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
    Accept-Encoding: gzip, deflate, br
    Accept-Language: zh-CN,zh;q=0.9
    Cookie: csrftoken=mgGu1nqxXnaKpGHTzlmFYyqlXl2Rv1SymNNzriypOCIeYylosvpj4jAR1XO0ZuFr; sessionid=zah393kzpbu3aelh039oh9236ynndq98

    '
    '''

    while True:
        conn, addr = sock.accept()  # hang住
        # 有人来链接了
        # 获取用户发送的数据
        data = conn.recv(8096)
        # print(data)
        data = str(data, encoding='utf-8')

        print('======', data)
        headers, bodys = data.split('\r\n\r\n')
        tem_list = headers.split('\r\n')
        # 获取请求方式 url 和协议
        method, url, protocal = tem_list[0].split(' ')
        # 获取路由地址和？之后的内容
        path, query = url.split('?')

        # 获取到用户名和密码
        name = query.split('&')[0].split('=')[1]
        pwd = query.split('&')[1].split('=')[1]

        # 将url编码转义成中文
        name = unquote(name)
        print('---------', name, pwd)

        # 写入数据库
        conn1 = pymysql.connect(
            host='127.0.0.1',
            user='root',
            password="",
            database='d1',
            port=3306,
            charset='utf8'
        )
        cur = conn1.cursor(pymysql.cursors.DictCursor)
        sql = 'insert into user value (%(username)s,%(password)s)'
        cur.execute(sql, {"username": name, 'password': pwd})

        conn1.commit()
        conn.send(b'HTTP/1.1 200 OK\r\n\r\n')

        with open('index.html','rb') as f:
            a = f.read()
            conn.send(a)

        # conn.send(b'112113')

        conn.close()

if __name__ == '__main__':
    run()

今日内容
　　1.BOM

　　　　-window.open(url,target)

　　　　-location

　　　　　　href 跳转的网址

　　　　　　host 主机名,包括端口

　　　　　　hostname 主机名

　　　　　　pathname url 中的路径部分

　　　　　　protocol 协议 一般是http.https

　　　　　　search  查询字符串

　　　　　　reload()  重载页面  全局刷新

　　　     -history

　　　　　　history.go(-1)  后端一步

　　　　-XMLHttpRequest

//两秒之后打开百度
    setTimeout(function () {

        // window.open('http://www.baidu.com','_self');
        /*
        *
        * host 主机名，包括端口

            hostname 主机名

            pathname url中的路径部分

            protocol 协议 一般是http、https

            search 查询字符串
        *
        * */
       console.log(location.host);//localhost:63342
       console.log(location.pathname);///python_qishi/day29/01%20BOM.html
       console.log(location.protocol);//http:
       console.log(location.search);//?_ijt=36ujga8q9f3keptgp6867h102g

       // location.href = 'http://www.baidu.com';//重定向
       // 重载页面 全局刷新   测试
       //  location.reload();//刷新网页

        // history.go(-1);//后退一步
    },2000)

　　2.Jquery介绍

　　　　-核心思想

　　　　　　write less,do more

　　　   - 什么是jquery?

　　　　jQuery是一个快速，小巧，功能丰富的JavaScript库。

　　　　它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。

　　　　通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式

　　3.jquery下载
        　　https://www.bootcdn.cn/jquery/

　　4.jquery的引入
        　　先引入jquery
        　　再写的js脚本

<meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery.js"></script>

　　5.jquery和js区别
        　　js包含jquery。
       　　 jquery只是封装文档遍历和操作，事件处理，动画和Ajax

　　6.jquery的选择器

　　　　css的选择器的作用:命中标签

　　　　jquery的选择器:命中DOM

　　　　　　-基础选择器

　　　　　　-高级选择器

<button>按钮</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
<button>按钮7</button>
<div class="box" id="box">alex</div>

<script>

    //id选择器
    console.log($('#box'))
    //.style.color = 'red'
    $('#box').css('color', 'red');
    $('#box').css({
        "color": 'red',
        "background-color": "green"
    });

    //类选择器
    console.log($('.box').css('color'));

    //标签选择器 jquery 内部遍历
    $('button').click(function () {
        // this 指的jsDOM对象

        //jsDOM对象===》jquery对象
        console.log($(this));
        //jquery对象===》jsDom对象
        console.log($('button').get(1)===this);
        console.log(this);

        // this.style.color = 'red';

        $(this).css('color','darkgreen');

    })

　　7.jquery和js对象的转换

　　　　- //jsDOM对象===> jquery对象

　　　　console.log($(this));

　　　　//jquery对象===>jsDom对象

　　　　console.log($('button').get(0)===this);

// 入口函数
    //window.onload 事件覆盖
    // window.onload = function () {
    //     alert(1)
    // };
    // window.onload = function () {
    //     alert(2)
    // };//弹窗弹出2覆盖了1

        $(document).ready(function () {
            console.log($('#dj'));
        });//在文档加载后激活函数

        $(function () {
        // 后代选择器
            $('#dj~p')
        })

    </script>

</head>
<body>
    <div class="box">
        <p id="dj">
            得劲
        </p>
        <p>
            alex
        </p>
        <p class="box">
            家辉
        </p>
    </div>

</body>

8.jquery动画

　　　　#普通动画

　　　　$('.box').stop().hide(3000);

　　　　#卷帘门效果

　　　　　$('.box').stop().slideDown(1000);

　　　　　$('.box').stop().slideToggle(1000);

　　　　#淡入淡出

　　　　　$('.box').stop().fadeOut(2000);

　　　　　$('.box').stop().fadeToggle(2000)　

<meta charset="UTF-8">
    <title>Title</title>
     <script src="./js/jquery.js"></script>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: red;
            display: block;
        }
    </style>

</head>
<body>
    <button>动画</button>
    <div class="box"></div>
    <script>

        let  ishide = true;
        $('button').mouseenter(function () {
            // if(ishide){
            //     $('.box').stop().hide(3000);
            //     ishide = false;
            // }else{
            //     $('.box').stop().show(1000);
            //     ishide = true;
            // }

            // $('.box').stop().toggle(1000);

            //卷帘门效果
            // // $('.box').stop().slideDown(1000);
            // $('.box').stop().slideToggle(1000);

            //淡入淡出
            $('.box').stop().fadeOut(2000);
            $('.box').stop().fadeToggle(2000);

        })
    </script>