day16 django开始

day16 django开始

老师博客地址：

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>
 PPP
 </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">

 用户名<input type="text" name="user"><span class="error"></span>
 密码<input type="text" name="pwd"><span class="error"></span>
 <input type="submit" value="提交">

</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">
 <input type="text" name="user">
 <input type="password" name="pwd">
 <input type="submit">
</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)
相关阅读:
类的加载
 java经典面试题（转）
I/O NIO 2
【转】Impala和Hive的关系
 【转】工作站和服务器的区别
 JAVA之线程
 【转】Linux中vim的粘贴复制快捷键的使用
 【转】Zookeeper集群为什么要是单数
 【转】Impala常见错误
 hadoop命令工作常用
原文地址：https://www.cnblogs.com/huangtiandi001/p/8279236.html