day18 jQuery，JavaScript高級&Django

時間 2019-12-11

標籤 day18 day jquery javascript 高級 django 欄目 JQuery 简体版

原文原文鏈接

回顧：

總體：css

              - HTMLhtml

              - CSSpython

              - JavaScript：基本數據類型；流程控制語句 jquery

              - DOMweb

              - BOM：setInterval()django

              - jQuery瀏覽器

                       - 選擇器服務器

                       - 篩選器app

                       - 內容和屬性:$(‘#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()

1、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>

2、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拓展實例：

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插件

儘可能使用自執行函數來定義：

測試題：

做用域鏈在函數執行以前已經建立，當尋找變量時，要根據最開始建立的做用域鏈查找

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

輸出666

輸出:root

3、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\r\n\r\n")
    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

其餘。。

4、Django

安裝Django

方法一：

      pip3 intsall django

方法二：

       下載源碼包

        解壓，安裝

        添加環境變量

建立項目：

（1）.在終端進入D盤（我的習慣）；而後mkdir project；最後進入project

（2）.建立項目:django-admin startproject mysqite

（3）進入目錄

（4）運行項目python manage.py runserver 127.0.0.1:8000

（5）訪問測試

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