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

 

 

 

    

 

 

  

  

 

 

 

 

  

 

 

 

 

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/huangtiandi001/p/8279236.html