##内容回顾
1.选择器:$('css3语法选择器')
2. js、jq对象转换
_divs = $('.div') _divs[0] => js对象
div = document.querySelector('.div') $(div) => jq对象
3.操作页面的三步骤:选择器、事件、具体操作
$('.div').on('事件名', function() {
// 具体操作
this => js对象
$(this) => jq对象
})
4.内容操作 obj代表jq对象
赋值: obj.text("value") | 取值:obj.text()
obj.html([value])
obj.val([value]):表单元素,有value属性的标签
赋值: obj.attr('属性名', '属性值|可以是函数') | 取值:obj.attr('属性名')
5.样式
obj.css('样式名', 样式值)
obj.css({
样式名1: 样式值1,
// ...
样式名n: 样式值n
})
obj.addClass()
obj.removerClass()
obj.toggleClass()
6.其他
width: obj.width()
height: obj.height()
padding左右+ width:obj.innerWidth()
padding上下+ height:obj.innerHeight()
7.创建标签添加到页面
div = $('<div class="div"></div>')
div.text("内容")
$('body').append(div) 末尾
$('body').prepend(div) 来头
$('p').before(div) 前
$('p').after(div) 后
div.remove() #自己删除自己
8.关系
obj.children()
obj.parent()
obj.next() obj.nextAll()
obj.prev() obj.prevAll()
obj.siblings()
注:关系不强烈,用选择器获取
##原生socket搭建后台
“”“
快速理解:
下面案例是模拟一个原生的socket服务器,后面这些东西都已经封装好了。首先要知道的是:
1、http协议:前台发送请求给后台(请求方式、请求路径、请求内容),后台返回响应给前台(页面、数据)。可通过# print(data.decode('utf-8'))查看详细信息
2、返回响应头,固定写法:client.send(b'HTTP1.1 200 OK\r\nContent-Type: text/html;charset=utf8\r\n\r\n')
3、获取前台发送过来的路径信息进行判断:
先拿到路径:header = request_data.split('\r\n')[0] router = header.split(' ')[1] 然后判断是否等于index
”“”
# 用socket建立一个服务器
import socket
server = socket.socket()
server.bind(('localhost', 8801))
server.listen(5)
print('浏览器访问:http://localhost:8801')
while True:
client, _, = server.accept()
data = client.recv(1024)
# print(data) # 用\r\n作为换行
# print(data.decode('utf-8'))
request_data = data.decode('utf-8') # type: str
# 拿到请求的路径(路由)
header = request_data.split('\r\n')[0]
router = header.split(' ')[1]
print('前台请求路径:', router)
# 返回响应头
client.send(b'HTTP1.1 200 OK\r\nContent-Type: text/html;charset=utf8\r\n\r\n')
# client.send('<h1>后台页面</h1>'.encode('utf-8'))
if router == '/index':
with open('1.请求.html', 'rb') as rf:
client.send(rf.read())
else:
client.send(b'<h1 style="color:red;text-align:center">404</h1>')
client.close()
##ajax前后台交互
#1、 http协议:前台发送请求给后台(请求方式、请求路径、请求内容),后台返回响应给前台(页面、数据)
#2、 ajax完成的是页面中的局部数据请求,不会页面改变
#3、环境
pip3 install flask
pip3 install -i https://pypi.douban.com/simple flask
pip3 install -i https://pypi.douban.com/simple flask-cors
#4、请求响应
// 先有jq环境
// $.ajax() 前台发送请求给后台(可以携带数据),拿到后台响应的数据
$.ajax({
// 请求的后台地址:接口
url: 'http://localhost:6601/get_data',
// 请求的方式 get post
type: 'post',
// 要提交给后台的数据
data: {
username: usr, // 后台取数据的key: 前台要发送的数据
password: pwd
},
// 后台成功的响应
success: function (response) {
console.log(response);
alert(response)
},
// 后台错误的响应
error: function (error) {
console.log(error)
}
})
#5、案例
*****************flask_server.py**********************************
from flask import Flask, request
# 解决跨域问题
from flask_cors import CORS
app = Flask(__name__)
# 指定具体服务app满足跨域通信,supports_credentials参数固定 不提示可直接到源码中查看
CORS(app, supports_credentials=True)
# flask处理路由
# 主页处理
@app.route('/')
@app.route('/index')
def home():
return '<h1>Home Page</h1>'
# 图标处理
@app.route('/favicon.ico')
def icon():
with open('img/favicon.ico', 'rb') as f:
data = f.read()
return data
# 数据响应处理:拿到前台的数据,完成数据的响应
@app.route('/get_data', methods=['GET', 'POST'])
def get_data():
# request模块:可以拿到前台发到后端的数据
print(request.method)
if request.method == 'GET':
# ajax在前端发送过来的data是以字典形式,所以通过request中args接收取值
username = request.args['username']
print(username)
if request.method == 'POST':
# 通过request中form发送数据
username = request.form['username']
password = request.form['password']
if username == 'icon' and password == '123':
return 'login success'
return 'login failed'
return '后台数据'
if __name__ == '__main__':
app.run(host='localhost', port=6601)
**********************2.ajax请求.html***********************
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>ajax请求</h1>
<form action="">
<input type="text" name="username" id="username">
<input type="text" name="password" id="password">
<button id="btn" type="button">登录</button>
</form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
$('#btn').click(function () {
usr = $('#username').val();
pwd = $('#password').val();
if (usr && pwd){//有内容自己用
//前台自己用
// console.log(ctx);
//发送给后台 $.ajax()发给后台
$.ajax({
//请求的后他地址:接口
url:'http://localhost:6601/get_data',
//请求的方式 get/post
type:'post',
//要提交给后台的数据
data:{
//后台要取数据的key:前台要发送的数据
username:usr,
password:pwd
},
//后台成功的响应
success:function (response) {
console.log(response)
alert(response)
},
//后台错误相应
error:function (error) {
console.log(error)
}
})
}
})
</script>
</html>
##Bootstrap框架
#1、什么是bootstrap框架
bootstrap是前端框架 - bs提前帮你写了一套样式(css)、一套逻辑(js)、一套图标库(字体图标)、还可以拓展功能(支持插件)
#2、环境配置
# bs的逻辑(js)是依赖jq环境的,使用使用bs提前要导入jq
# 第一种:官网下载
# 本地导入
https://v3.bootcss.com/getting-started/#download
# 第二种:CDN链接
# https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css
# https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--bs的样式-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<!--自定义样式写在导入之后,可以再修改bs规定好的样式-->
<style></style>
</head>
<body>
</body>
<!--必须提前导入jq-->
<script src="js/jquery-3.4.1.js"></script>
<!--bs的逻辑-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
#3、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.o-btn{
width: 120px;
}
.o-i{
width: 30px;
}
</style>
</head>
<body>
<!-btn-danger为bootstrap的样式,内部都已经封装好了--->
<botton class="btn btn-danger btn-block">按钮</botton>
<hr>
<!--glyphicon glyphicon-music为图标,在bootstrap观望中复制名字过来,就会自动匹配-->
<i class="o-i glyphicon glyphicon-music"></i>
<hr>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="o-btn btn btn-lg btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">菜单一</a></li>
<!-- 下划线 -->
<li role="separator" class="divider"></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>
</div>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
##bootstrap栅格系统
#1、栅格系统介绍:
官网:https://v3.bootcss.com/css/#grid
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
#2、栅格系统布局
1.一共有四种尺寸
超小屏幕 手机、小屏幕 平板、中等屏幕 桌面显示器、大屏幕 大桌面显示器
2.默认将父级等分12分,子级可以选取占多少份(重点*****)
col-xs-超小 | col-sm小屏幕 | col-md中等屏幕 | col-lg大屏幕
3.默认有两种容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的原因,这两种 容器类不能互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
#3、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--bs的样式-->
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<!--自定义样式写在导入之后,可以再修改bs规定好的样式-->
<style>
.box{
/*width: 600px;*/
/*height: 300px;*/
border: 1px solid red;
margin: 0 auto;
/*可以规定父级最小最大宽度,就只需要考虑在允许尺寸中的布局*/
min-width: 500px;
}
.b{
height: 300px;
}
.left{background-color: orange}
.center{background-color: brown}
.right{background-color: cyan}
</style>
</head>
<body>
<!--直接在bootstrap官网拷贝:下面是导航栏功能当浏览器扩大缩小时,显示效果-->
<div class="owen">
<nav class="navbar navbar-default">
<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>
</div>
<div class="box">
<!-- col-md-2:中等屏幕 col-sm-5:小屏幕 col-xs-5:超小屏幕 -->
<div class="b left col-md-2 col-xs-5"></div>
<div class="b center col-md-8 col-xs-2"></div>
<div class="b right col-md-2 col-xs-5"></div>
</div>
<div class="container">
<div class="b left col-md-2 col-xs-5"></div>
<div class="b center col-md-8 col-xs-2"></div>
<div class="b right col-md-2 col-xs-5"></div>
</div>
<div class="container-fluid">
<!-- .row 默认有-15px 会移除两边的padding 15px空白 -->
<div class="row">
<div class="b left col-md-2 col-xs-5"></div>
<div class="b center col-md-8 col-xs-2"></div>
<div class="b right col-md-2 col-xs-5"></div>
</div>
</div>
</body>
<!--必须提前导入jq-->
<script src="js/jquery-3.4.1.js"></script>
<!--bs的逻辑-->
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</html>
##上述知识点综合案例