day18 jQuery，JavaScript高级&Django

回顾：

         整体：

              - HTML

              - CSS

              - JavaScript：基本数据类型；流程控制语句

              - DOM

              - BOM：setInterval()

              - jQuery

                       - 选择器

                       - 筛选器

                       - 内容和属性:$(‘#i1’).val()…….text()……..html()……..attr()………prop()

                       - css : $(‘#i1’).css(‘color’,’red’)

                                  $(‘#i1’).removeClass()

                                  $(‘#i1’).addClass()

                                  $(‘#i1’).scrollTop()

                        - 文档操作：

                                  $(‘#i1’).append()

                                  $(‘#i1’).after()

                                  $(‘#i1’).prepend()

                                  $(‘#i1’).before()

一、jQuery

  - DOM事件绑定：

       * 直接在标签上绑定

       * 通过找到标签在绑定

  - jQuery事件绑定:

       (1) $(‘.title’).click(function(){

                    action…..

                   })

        (2) $(‘.title’).bind(‘click’,function(){

                      action..

                 })

         (3) $(‘.c1’).delegete(‘tittle’,’click’,function(){

                     action…..

                })

          (4) $(‘.c1’).on(‘click’,’ctittle’,function(){

                     action…..

                })

事件绑定小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="inp"/><input type="submit" value="添加" id="btn"/>
    <ul>
        <li>内容</li>
        <li>内容</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#btn').click(function (){
            var v = $('#inp').val();
            var temp = document.createElement('li');
            temp.innerHTML = v;
            $(temp).click(function(){
                var v = $(this).text();
                v = v + "+1";
                $(this).text(v)  //设置
            })
            $('ul').append(temp);
        });
        $('li').click(function(){
            var v = $(this).text();
            v = v + "+1";
            $(this).text(v)  //设置
        })
    </script>
</body>
</html>

delegate委托小例子，结果和上述一致 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="inp"/><input type="submit" value="添加" id="btn"/>
    <ul>
        <li>内容</li>
        <li>内容</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#btn').click(function(){
            var v = $('#inp').val();
            var li = document.createElement('li');
            li.innerHTML = v;
            $('ul').append(li);
        });
        //$('ul').delegate('li','click',function(){
        $('ul').on('click','li',function(){
              var v = $(this).text();
            v = v + '+1';
            $(this).text(v);

        })
    </script>
</body>
</html>

页面加载事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>sdadssasd</h1>
<script src="jquery-1.12.4.js"></script>
<script>
    //页面加载完成之后加载
    alert(123)
    $(function(){
        //页面框架加载完成之后加载
      alert(123);
    })
</script>
</body>
</html>

jQuery阻止默认事件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a id="bd" href="http://www.baidu.com">百度 </a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $('bd').click(function(){
                var v = $(this).text();
                alert(v);
                return false;
            })
        })
    </script>
</body>
</html>

表单验证实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form id='f1' action="http://www.baidu.com" method="GET">
     <!--//require="true表示必填信息-->
    <p><input type="text" name="username" require="true"/></p>
    <p><input type="text" name="password" require="true" min-len="6" max-len="18"/></p>
    <p><input type="text" name="phone" phone="true"></p>
    <input type="submit" value="提交">
</form>

<script src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        checkValidate();
    });
    function checkValidate(){
        $('#f1').find(':submit').click(function(){
            $('#f1').find('span').remove()
            var flag = true;
            $('#f1').find(':text,:password').each(function(){
                var value = $(this).val()
                var require = $(this).attr('require');
                if(require){
                    if(value.length == 0){
                        var n = $(this).attr('name')
                        var errTag = document.createElement('span')
                        errTag.innerHTML = n + "输入不能为空";
                        $(this).after(errTag)
                        flag = false;
                        return false;
                    }
                }
                var minLen = $(this).attr('min-len')
                if(minLen){
                    var valueLen = value.length;
                    var minLen = parseInt(minLen)
                    if(valueLen < minLen){
                        var n = $(this).attr('name');
                        var errTag = document.createElement('span');
                        errTag.innerHTML = n + "输入不能为空";
                        flag = false;
                        return true;

                    }
                }
                var phone = $(this).attr('phone');
                if(phone){
                    var re = /^d+$/;
                    if(!re.test(value)){
                        var n = $(this).attr('name')
                        var errTag = document.createElement('span')
                        errTag.innerHTML = n + "格式错误！！";
                        $(this).after(errTag)
                        flag = false;
                        return false;
                    }
                }
            });
          return flag
        })
    }
</script>
</body>
</html>

二、JavaScript高级

两种循环方法：

第一种：$('#i1').each(function(){
     事件        
    })
第二种：$.each({'k1':'v1','k2':'v2'},function(k,v){
     事件   
    })

jQuery拓展

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>222</li>
    <li>222</li>
    <li>222dsa</li>
    <li>222dsasd</li>
    <li>222dsasddssd</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
    $('#i1').each(function(){

    })
    $.each([11,22,33,44],function(k,v){
        
    })
    $.each({'k1':'v1','k2':'v2'},function(){

    })
//    直接执行
    $.extend({
        'sss':function(){
            console.log('sddd')
        }
    })
    $.sss()
//    选中执行
    $.fn.extend({
        'ddd':function(){
            console.log('fgfgfgf')
        }        
    })
    $('li').ddd()  
</script>
</body>
</html>

jQuery拓展实例：

image

1. Extend_js.js

/**
 * Created by wanghui on 2017/3/18.
 */

function tttt(){
    function commons(){
        console.log('extend_js')
    }
 $.extend({
//            这是功能区代码
             'test':function(name){
                     console.log('hahahha')
                     }
         });
    }
//千万要执行最外层函数，否则会调用不成功
tttt()

2. 7-1 自定义函数拓展.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>jQuery拓展</h1>
    <h3>
        测试jQuery开源拓展模块
    </h3>
    <script src="jquery-1.12.4.js"></script>
    <script src="Extend_a.js"></script>
    <script>
        $.test('xxoo');
    </script>
</body>
</html>

- jQuery拓展的形式如下：

- $.extend({})                              $.xx

- $.fn.extend({})                          $().x

- 自定义jQuery插件

尽量使用自执行函数来定义：

image

测试题：

作用域链在函数执行之前已经创建，当寻找变量时，要根据最开始创建的作用域链查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script>

//        function func(){
//            if(1==1) {
//                var v = 123;
//            }
//            console.log(v);
//        }
//        func()

//        xo = 'root1';
//        function func(){
//            var xo = 'root2';
//            function inner(){
//                console.log(xo);
//            }
//            inner()
//        }
//        func();

//        xo = 'root1';
//        function func(){
//            var xo = 'root2';
//            function inner(){
//                console.log(xo);
//            }
//            return inner
//        }
//        result = func();
//        result()

//        xo = 'root1';
//        function func(){
//            var xo = 'root2';
//            function inner(){
//                console.log(xo);
//            }
//            xo = 'root3';
//            return inner;
//        }
//        result = func();
//        result()
//
//        function func(){
//            console.log(xo);
//            var xo = 123;
//        }
//        func()
        function fun(num){
            console.log(num);
            num = 18;
            console.log(num)
            function num(){
            }
              console.log(num)
        }
        func(666)

    </script>
</body>
</html>

第六个例子要经过：

a.预编译AO

    先编译参数

    在编译变量

    最后编译函数

b.执行

- 函数和面向对象相关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
    function func(arg){
        console.log(this,arg)
    }
    func(18)   //全局传值（window）
    func.call(18,20)   //调用结果就是上述的
    func.apply(18,[30])

     //在函数被执行时，默认的this代指window对象
    (function(arg){
        console.log(this,arg)
    })(123)

    function func(){
//        nn = 'root';
        window.nn='root';
    }
    func()
    console.log(nn)
</script>
</body>
</html>

在函数内部，默认都有this变量，默认情况下，执行函数时this=window

使用函数名.call 或者函数名.apply可以对函数中的this主动设置值

- 在js中没有字典类型，只有对象伪造成字典的形式

var dict = {

name=’bsb’,

age = 10}

等价于：

var dict = new object();

dict.name = ‘bsb’

dict.age = 10

面向对象:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
    function Foo(name) {
        this.Name = name;
    }
    var obj = new Foo('root1');
    console.log(obj.Name)
    var obj1 = new Foo('root2')
    console.log(obj1.Name)
</script>
</body>
</html>

总结:

//    当做函数
    Foo('root1')
    window.Name
    window.Func()
//    当做类
    obj = new Foo('root2')
    obj.Name
    obj.Func()
//    直接对象
    dict = {
        Name:'root3',
        Func:function(){
            console.log('this.Name')
        }
    }
    dict = new Object()
    dict.Name = 'root3'
    dict.Func = function(){
        console.log(this.Name)
    }
    dict.Func()

谁调用函数,this就是谁;函数执行时,默认是window.函数()

每一个函数里都有一个this

image

输出666

image

输出:root

image

三、Web框架本质

本质介绍:

浏览器:socket客户端

服务器:socket服务端

所有的web应用就是一个socket服务端

博客参考:http://www.cnblogs.com/wupeiqi/articles/5237672.html

第一种方式:socket服务端

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import socket

def handle_request(client):
    buf = client.recv(1024)
    client.send(b"HTTP/1.1 200 OK

")
    client.send(b"Hello, black")

def main():
    sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
    sock.bind(('localhost',8000))
    sock.listen(5)

    while True:
        connection, address = sock.accept()
        handle_request(connection)
        connection.close()

if __name__ == '__main__':
    main()

第二种方式:次之

python标准库提供的独立WSGI服务器称为wsgiref

WSGI（Web Server Gateway Interface）是一种规范，它定义了使用python编写的web app与web server之间接口格式，实现web app与web server间的解耦。

常用的网关模块接口

server_names = {
    'cgi': CGIServer,
    'flup': FlupFCGIServer,
    'wsgiref': WSGIRefServer,
    'waitress': WaitressServer,
    'cherrypy': CherryPyServer,
    'paste': PasteServer,
    'fapws3': FapwsServer,
    'tornado': TornadoServer,
    'gae': AppEngineServer,
    'twisted': TwistedServer,
    'diesel': DieselServer,
    'meinheld': MeinheldServer,
    'gunicorn': GunicornServer,
    'eventlet': EventletServer,
    'gevent': GeventServer,
    'geventSocketIO':GeventSocketIOServer,
    'rocket': RocketServer,
    'bjoern' : BjoernServer,
    'auto': AutoServer,
}

web框架基础代码

#!/usr/bin/env python
# -*- coding:utf-8 -*-
from wsgiref.simple_server import make_server


def RunServer(environ, start_response):
    #envirment :用户请求相关信息
    #start_responce:服务端响应相关信息
    start_response('200 OK', [('Content-Type', 'text/html')])
    return [bytes('<h1>Hello, web!</h1>', encoding='utf-8'), ]


if __name__ == '__main__':
    httpd = make_server('127.0.0.1', 8000, RunServer)
    print("Serving HTTP on port 8000...")
    httpd.serve_forever()

现成的web框架：Bottle，Flask，Tornado，Django

web框架的分类：

django

其他。。

四、Django

安装Django

方法一：

      pip3 intsall django

方法二：

       下载源码包

        解压 ，安装

        添加环境变量

创建项目：

（1）.在终端进入D盘（个人习惯）；然后mkdir project；最后进入project

image

（2）.创建项目:django-admin startproject mysqite
image

（3）进入目录

image

（4）运行项目python manage.py runserver 127.0.0.1:8000

image

（5）访问测试

image

（6）创建app：python manage.py startapp cmdb

image

目录介绍：

image

项目配置：

- 路由：

image

- views：

image

启动项目测试：

image

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