<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>结构关系</title></head><body><ul> ???<li>列表项1</li> ???<li>列表项2</li> ???<li>列表项3</li> ???<li> ???????<i>列表项</i> ???????<b>4</b> ???</li> ???<li>列表项5</li> ???<li>列表项6</li> ???<li>列表项7</li></ul></body><script src="js/jquery-3.3.1.js"></script><script> ???$(‘li‘).eq(3).click(function () { ???????console.log(this); ???????$this = $(this); ???????console.log($this.prev().get(0)); ???????console.log($this.prevAll()); ???????console.log($this.next()); ???????console.log($this.parent()); ???????console.log($this.parents()); ???????console.log($this.children().eq(1)); ???????console.log($this.siblings()); ???})</script></html>一：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();<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>DOM操作</title> ???<style> ???????.wrapper { ???????????width: 450px; ???????????margin: 50px auto; ???????????background-color: pink; ???????} ???????.wrapper:after { ???????????content: ""; ???????????display: block; ???????????clear: both; ???????} ???????.box { ???????????width: 150px; ???????????height: 150px; ???????????background-color: red; ???????????border-radius: 50%; ???????????float: left; ???????} ???</style></head><body> ???<div class="wrapper"> ???????<!--3 x 3的9个圆--> ???????<!--重复来创建 => 循环--> ???????<!--<div class="box"></div>--> ???????<!--<div class="box"></div>--> ???????<!--<div class="box"></div>--> ???????<!--<div class="box"></div>--> ???????<!--<div class="box"></div>--> ???????<!--<div class="box"></div>--> ???????<!--<div class="box"></div>--> ???????<!--<div class="box"></div>--> ???????<!--<div class="box"></div>--> ???</div> ???<!--<div class="wrapper"></div>--> ???<div class="ele">123</div></body><script src="js/jquery-3.3.1.js"></script><script> ???// 1.创建页面元素对象 ???var $box = $(‘<div></div>‘); ???// 2.操作页面元素对象 ???$box.addClass(‘box‘); ???console.log($box); ???// 3.添加到页面的指定位置 ???// $(‘.wrapper‘).append($box); ???// 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(); ???console.log($ele); ???$(‘body‘).append($ele);</script><script> ???// 0.前提: 布局 ???for (var i = 0; i < 9; i++) { ???????// 1.创建 ???????var $box = $(‘<div class="box"></div>‘); ???????// 2.设置 ???????$box.click(function () { ???????????alert($(this).index()) ???????}); ???????// 3.添加 ???????$(‘.wrapper‘).append($box); ???}</script></html><!-- action: 请求的后台链接地址 --><!-- method: 请求方式 get | post --><form action="" method="post"> ???<!--可以提交给后台的数据: 必须有唯一标识, 用name属性来标识--> ???<!--表单元素对象input通过设置type来实现不同的功能--> ???<div> ???????<label for="usr">用户名:</label> ???????<input type="text" id="usr" name="usr" value="000"> ???</div> ???<div> ???????<label for="pwd">密码:</label> ???????<input type="password" id="pwd" name="pwd" placeholder="请输入密码"> ???</div> ???????<!--文本域--> ???<textarea></textarea> ???????<!--列表--> ???<select name="sex"> ???????<option value="male">男</option> ???????<option value="female">女</option> ???????<option value="other">哇塞</option> ???</select> ???<!--单选框, name来关联, checked为默认选中项--> ???<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> ???????<div> ???????<button type="button">普通按钮</button> ???????<button type="reset">重置</button> ???????<button type="submit">提交</button> ???????<input type="submit" value="我也是提交"> ???</div></form>
二：Flask实现简易后台
from flask import Flask, requestfrom 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/indexdef index(): ???return "<h1 style=‘text-align:center;color:red‘>index页面</h1>"@app.route(‘/test‘) # http://127.0.0.1:5000/testdef 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 可以设置端口号
from flask import Flask, requestfrom 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/indexdef index(): ???return "<h1 style=‘text-align:center;color:red‘>index页面</h1>"@app.route(‘/test‘) # http://127.0.0.1:5000/testdef 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 可以设置端口号
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>登录</title></head><body><!--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></body></html>
注意：
form请求后台（会在服务器地址上发生页面跳转，不需要处理跨越问题）
<!--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>
ajax请求后台（数据在两个服务器上传递，需要处理跨越问题）
<h1>登录</h1><form action="" method=""> ???<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><script src="js/jquery-3.3.1.js"></script><script> ???// 取消form表单默认提交数据的事件 ???$(‘form‘).submit(function () { ???????return false; ???}); ???// 用button点击发送ajax请求来完成数据交互 => 局部刷新 ???$(‘button‘).click(function () { ???????console.log("ajax请求..."); ???????// 获取用户输入的账户密码 ???????var usrStr = $(‘#usr‘).val(); ???????var pwdStr = $(‘#pwd‘).val(); ???????// ajax发送前台请求 ???????$.ajax({ ???????????url: "http://127.0.0.1:5000/loginAjax", ?// 请求地址 ???????????data: { ???????????????usr: usrStr, // 把用户数据提交给后台的key ???????????????pwd: pwdStr ???????????}, ???????????success: function (arg) { // 请求成功的回调函数 arg后台返回的数据结果 ???????????????console.log(arg); ???????????????// 局部刷新前台页面内容 ???????????????$(‘h1‘).text(arg); ???????????} ???????}) ???})</script>三：bootstrap入门
用bootstrap规定好的HTML结构来构建HTML结构，再给具体的标签特定的类名（特定的全局属性），就能实现特定的页面样式与功能。
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title>bs入门</title> ???<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ?????????integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> ???<style> ???????#hehe { ???????????color: red; ???????????font-size: 100px; ???????} ???</style></head><body><nav class="navbar navbar-inverse"> ???<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><button type="button" class="btn btn-warning">按钮</button><i class="glyphicon glyphicon-arrow-down"></i><div class="dropdown"> ???<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" ???????????aria-haspopup="true" aria-expanded="true"> ???????Dropdown ???????<span class="caret"></span> ???</button> ???<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> ???????<li class="dropdown-header">我是分组标题</li> ???????<li class="bg-success"><a href="#">123</a></li> ???????<li class="disabled"><a href="#">123</a></li> ???????<li class="dropdown-header">我是分组标题</li> ???????<li><a href="#" id="hehe">123</a></li> ???</ul></div><!--用bs规定好的html结构来构建html结构, 再给具体的标签特定的类名(特定的全局属性)--><!--就能实现特定的页面样式与功能--></body><script src="js/jquery-3.3.1.js"></script><!--注: bs是基于jq框架--><script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script><script> ???$(‘#hehe‘).click(function () { ???????alert("呵呵"); ???????return false; ???})</script></html>Flask简易版本、Ajax、DOM操作，表单操作
原文地址：https://www.cnblogs.com/liuxiaolu/p/10331503.html