<!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>
jqDOM操作
<!-- 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>
login页面，转跳时要改接口地址
注意：
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>
bs入门
