zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    vue 开发系列 企业微信整合
    MongoDB基础3
    MongoDB基础2
    MongoDB基础1
    SpringBoot MongoDB
    UWSGI
    Nginx
    编译python源码
    Flask部署
    Django个人工作总结
  • 原文地址：https://www.cnblogs.com/wanghui1991/p/6552555.html
Copyright © 2011-2022 走看看