老师博客地址：
http://www.cnblogs.com/yuanchenqi/category/1050267.html
一jquery回顾之选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="outer">
<div>
<p class="item" egon="9999">PPP</p>
</div>
</div>
<div class="outer">
<span class="item">SPAN</span>
</div>
<div id="i1">ID</div>
<span>123</span>
<input type="text">
<script>
// 选择器
// $(".outer .item").css("color","red");
// $(".outer>.item").css("color","red");
//
// $("[egon='9999']").css("color","green");
//
// $("[id='i1']").css("color","yellow");
// $("#i1").css("color","yellow");
//
// // 只针对表单控件
// // $("[type='text']").css("border","1px solid red")
// $(":text").css("border","1px solid green")
//
// // 筛选器
// console.log($("div"));
// $("div").eq(3);
// 导航查找
// $(".outer").find(".item").css("color","blue");
// $(".outer").children(".item").css("color","blue");
// $(".outer").eq(1).nextAll(":text").css("border","1px solid red")
</script>
</body>
</html>
二 jquer回顾之操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="c1" alex="123">DIV</div>
<div class="c2">
<span>123</span>
</div>
<select name="" id="s1">
<option value="1">111</option>
<option value="2">222</option>
<option value="3">333</option>
</select>
<script>
// （1）文本操作
// 取值操作
// console.log($(".c1").html());
// console.log($(".c1").text());
//
// console.log($(".c2").html());
// console.log($(".c2").text());
// 赋值操作
//$(".c2").html("文本赋值");
//$(".c2").text("文本赋值");
// $(".c2").text("<a>click</a>");
// $(".c2").html("<a href=''>click</a>");
// （2）属性操作
// $('.c1').attr("alex");
// $('.c1').attr("alex",456)
// class操作
// $(".c1").addClass("c2");
// $(".c1").removeClass("c1");
// value操作
// console.log($("#s1").val());
// 节点操作
// 创建节点对象
var $img=$("<img>");
$img.attr("src","egg.jpg");
console.log($img[0]);
//添加节点
// $('.c2').append($img);
// $('.c2').prepend($img);
// $('.c2').after($img)
// 删除节点：
// $("#s1").remove()
// 替换节点
// $('.c2').replaceWith($img);
</script>
</body>
</html>
三事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.min.js"></script>
<script>
// $(document).ready(function () {
//
// });
$(function () {
$("#i1").css("color","red");
// 双击事件
$("#i1").dblclick(function () {
alert(123)
});
// 获取焦点，失去焦点事件
$("#inp").focus(function () {
console.log("获取焦点")
});
$("#inp").blur(function () {
console.log("失去焦点");
});
// mouse事件
$(".c1").mouseover(function () {
console.log("悬浮DIV")
});
$(".c1").mouseleave(function () {
console.log("离开DIV")
});
// select事件
$("#inp").select(function () {
console.log("......")
});
// change事件
$("#pro").change(function () {
});
// submit事件：
$("#form").submit(function () {
//alert(123);
var val=$("[name='user']").val();
if (val.length<5){
// alert("长度不够！");
$("[name='user']").next().html("长度不够");
return false; // 终止后续事件
}
})
})
</script>
</head>
<body>
<div id="i1">DIV</div>
<input type="text" id="inp">
<div class="c1" style="width: 100px;height: 100px;background-color: gray"></div>
<hr>
<form action="" id="form">
<p>用户名<input type="text" name="user"><span class="error"></span></p>
<p>密码<input type="text" name="pwd"><span class="error"></span></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>
四 二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="pro">
<option value="">请选择省份</option>
<option value="hebei">河北省</option>
<option value="henan">河南省</option>
<option value="hunan">湖南省</option>
</select>
<select name="" id="city">
<option value="">请选择城市</option>
</select>
<script src="jquery-3.2.1.min.js"></script>
<script>
var data={"hebei":["石家庄","保定","廊坊"],"henan":["郑州","信阳","开封"],"hunan":["长沙","湘潭","张家界"]};
$("#pro").change(function () {
// console.log($(this).val());
var citys=data[$(this).val()];
//console.log(citys);
// 清空操作
console.log($("#city")[0].options.length);
$("#city")[0].options.length=1;
$.each(citys,function (i,j) {
//console.log(i,j);
var $option=$("<option>");
$option.html(j);
$("#city").append($option)
})
})
</script>
</body>
</html>
五5 http协议
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" method="post">
<p><input type="text" name="user"></p>
<p><input type="password" name="pwd"></p>
<p><input type="submit"></p>
</form>
</body>
</html>
六 jquery
事件
URL：https://www.jd.com/
协议://域名/path/?a=1&b=2
2 http协议（请求协议，响应协议）：
客户端（浏览器）-------- 服务器
http协议基于请求（reqeust）--响应协议（response）
http协议无连接
http协议无状态 -----------------------------》 COOKIE SESSION
Content-Type
HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。
请求协议 （浏览器 -------->服务器）：
协议格式：
请求首行 GET(请求方式) path(请求路径) 协议版本
请求头信息
空行
请求体
url:http://www.jd.com/car.20123.html?a=1
'''
GET /car.20123.html http 1.1
accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
accept-encoding:gzip, deflate,
accept-language:zh-CN,zh;q=0.9
cache-control:max-age=0
cookie:o2-webp=true; __jdu=685614337; user-key=49d75adf-5e4f-4e1b-870b-9c13b410e0c6; cn=0; o2Control=lastvisit=24; __jdc=122270672; __jdv=122270672|direct|-|none|-|1515294935041; PCSYCityID=1; __jda=122270672.685614337.1513475159.1515294935.1515308739.8; __jdb=122270672.13.685614337|8.1515308739
upgrade-insecure-requests:1
user-agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36
Content-Type:"application/x-www-form-urlencoded"
user=yuan&pwd=123
'''
enctype="application/x-www-form-urlencoded"："user=yuan&pwd=123"
GET 和 POST方式：
get请求的数据会放在url后面：http://www.jd.com/car.20123.html?a=1
post请求的数据会放在请求体
GET 和 POST的区别
哪些是GET请求：
1、浏览器地址输入url get
2、form --- get
3、form ----post
响应协议：（服务器-------->浏览器）
协议格式：
响应首行
响应头信息
空行
响应体
‘’‘
http 1.1 200 OK
age:13
cache-control:max-age=30
content-encoding:gzip
content-length:29892
content-type:text/html; charset=utf-8
date:Sun, 07 Jan 2018 08:38:57 GMT
expires:Sun, 07 Jan 2018 08:38:50 GMT
ser:130.28
server:JDWS/2.0
status:200
strict-transport-security:max-age=360
vary:Accept-Encoding
via:BJ-M-YZ-NX-76(HIT), http/1.1 BJ-CM-1-JCS-108 ( [cRs f ])
"<html><body><h1>Yuan<h1/></body></html>"
’‘’
3 Django
Django是一个web应用框架
基于MTV模型：
M：model 与数据库打交道的
T：template 渲染数据
V：view 逻辑处理
4 下载Django
1、创建django项目：
django-admin.py startproject mysite
2、创建一个具体应用
python manage.py startapp app01
url：http://127.0.0.1:8000/login
作业1：
登录验证
作业2:
登录验证的流程
第一次请求：
请求的URL：http://127.0.0.1:8000/login/ GET 无数据
/login/ -----
url(r'^login/', views.log_in) ---- 执行 log_in(request)