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>
