昨日回顧
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:樣式值
......
樣式名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() ovj.prevAll()
obj.siblings()
注:關系不強烈,用選擇器獲取
原生socket搭建后台
# 用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('要返回給前台的頁面.html', 'rb') as rf: client.send(rf.read()) else: client.send(b'<h1 style="color:red;text-align:center">404</h1>') client.close()
ajax前后台交互
http協議:前台發送請求給后台(請求方式,請求路徑,請求內容),后台返回響應給前台(頁面,數據)
ajax: 完成頁面中 的 局部數據請求,不會改變頁面
// 先有jq環境
#pip3 install flask
#pip3 install -i https://pypi.douban.com/simple flask
#pip3 install -i https://pypi.douban.com/simple flask-cors
// $.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) } })
Bootstrap
bs:前端框架 -bs提前幫你寫了一套樣式(css),一套邏輯(js),一套圖標庫(字體圖標),還可以擴展功能(支持插件)
# bs的邏輯(js)是依賴jq環境的，使用使用bs提前要導入jq # 第一種：官網下載 # 本地導入 # 第二種：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>
<head>
<meta charset="utf-8">
<title>初識</title>
<!--bs的樣式-->
<link rel="stylesheet" href="bs-3.3.7/css/bootstrap.css">
<!--自定義樣式寫在導入之后，可以再修改bs規定好的樣式-->
<style></style>
</head>
<body>
</body>
<!--必須提前導入jq-->
<script src="js/jquery-3.4.1.js"></script>
<!--bs的邏輯-->
<script src="bs-3.3.7/js/bootstrap.js"></script>
</html>
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="bs-3.3.7/css/bootstrap.css">
<style>
.o-btn {
width: 120px;
}
.o-i {
font-size: 100px;
color: red;
}
</style>
</head>
<body>
<hr>
<button class="btn btn-danger btn-block">按鈕</button>
<hr>
<i class="o-i glyphicon glyphicon-magnet"></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="#">菜單1</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="bs-3.3.7/js/bootstrap.js"></script>
</html>
刪除系統 -布局
http://v3.bootcss.com/css/#grid
1.一共有四種屬性
2.默認將父級等分12 等分,子級可以選取占剁手份
col-xs -等分 col.sm clo-md col.1g
3. 默認有兩種容器