按鈕

<button type=‘buttton‘></button>不提交觸發點擊事件

<button type="reset"></button>重置觸發點擊事件

<button type="submit"></button>提交

<input type="submit" value="我也是提交">提交不觸發點擊事件

輸入欄

<div>
<label for="usr">用戶名:</label>點擊顯示
<input type="text" id="usr" name="usr" value="000"> value默認值
</div>
<div>
<label for="pwd">密碼:</label>
<input type="password" id="pwd" name="pwd" placeholder="請輸入密碼">灰字提示
</div>

列表

<select name="sex">
<option value="male">男</option>
<option value="female">女</option>
<option value="other">哇塞</option>
</select>

<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>

### flask實現簡易後臺

```python
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 可以設置端口號
```

### form請求後臺(會在服務器地址上發送頁面轉跳, 不需要處理跨越問題)

```html
<!--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>
```

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();

前後臺交互， 按鈕， 輸入欄，列表，選項 ,dom