JavaScript

時間 2019-11-12

原文原文鏈接

JavaScript

javascript 簡稱 JS 與java編程語言沒有什麼關係javascript

JavaScript：
   {核心（ECMAScript）
    文檔對象模型（DOM） Document object model (整合js，css，html)
    瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）}(3部分組成)

是腳本語言。 
是一種輕量級的編程語言。 
是可插入 HTML 頁面的編程代碼。 
插入 HTML 頁面後，可由全部的現代瀏覽器執行。

一、JS 的引入

1. Script標籤內寫代碼（HTML文件中）
<script>
  // 在這裏寫你的JS代碼
</script>

2.引入額外的JS文件
<script src="myscript.js"></script>

二、BOM和DOM　

BOM（Browser Object Model）是指瀏覽器對象模型，它使 JavaScript 有能力與瀏覽器進行「對話」。css

DOM （Document Object Model）是指文檔對象模型，經過它，能夠訪問HTML文檔的全部元素。html

變量和數據類型

1. 變量
        1. var 變量名;   var 變量名 = 值
        2. 變量的命名 字母 數字 下劃線和$組成
        3. 推薦使用駝峯
2. 數據類型
        1. 數字   Number 
            1. NaN
            2. parseInt("111")   --> 把字符串轉成數字
            3. parseFloat("111") --> 把字符串轉成小數
        2. 字符串 String
            1. 字符串的經常使用方法
        3. 布爾值 Boolean
        4.數組  Array
            1. 經常使用方法
        5. null
        6. undefined
3.重點JavaScript中的語句要以分號（;）爲結束符。

ps補充：

//ES6新增了let命令，用於聲明變量。其用法相似於var，可是所聲明的變量只在let命令所在的代碼塊內有效。例如：for循環的計數器就很適合使用let命令。

for (let i=0;i<arr.length;i++){...}



//ES6新增const用來聲明常量。一旦聲明，其值就不能改變。
const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

示例

// 這是單行註釋

/*
這是
多行註釋
*/
一、聲明變量使用 var 變量名; 的格式來進行聲明
var name = "Mogu";
var age = 18;

二、JavaScript擁有動態類型
var x;   此時x是undefined
var x = 1;   此時x是數字
var x = "MoGu"   此時x是字符串
 
三、JavaScript不區分整型和浮點型，就只有一種數字類型。
var a = 12.34;
var b = 20;
var c = 123e5;   12300000
var d = 123e-5;  0.00123

四、還有一種NaN，表示不是一個數字（Not a Number）。

五、字符串(String)
var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 獲得Helloworld

六、字符串經常使用方法
.length            返回長度
.trim()            移除空白
.trimLeft()        移除左邊的空白
.trimRight()       移除右邊的空白
.charAt(n)         返回第n個字符
.concat(value, ...)           拼接
.indexOf(substring, start)    子序列位置
.substring(from, to)          根據索引獲取子序列
.slice(start, end)            切片
.toLowerCase()    小寫
.toUpperCase()    大寫
.split(delimiter, limit)      分割 七、布爾值(Boolean)
var a = true;
var b = false;
""(空字符串)、0、null、undefined、NaN都是false。

八、null和undefined
null表示值是空，通常在須要指定或清空一個變量時纔會使用，如 name=null;
undefined表示當聲明一個變量但未初始化時，該變量的默認值是undefined。還有就是函數無明確的返回值時，返回的也是undefined。
null表示變量的值是空，undefined則表示只聲明瞭變量，但尚未賦值。

數組、流程控制、運算符

一、對象(Object)
JavaScript 中的全部事物都是對象：字符串、數值、數組、函數...此外，JavaScript 容許自定義對象。
JavaScript 提供多個內建對象，好比 String、Date、Array 等等。
對象只是帶有屬性和方法的特殊數據類型。

二、數組(列表)
var a = [123, "ABC"];
console.log(a[1]);   輸出"ABC"

.length            數組的大小
.push(ele)         尾部追加元素
.pop()             獲取尾部的元素
.unshift(ele)      頭部插入元素
.shift()           頭部移除元素
.slice(start, end) 切片
.reverse()         反轉
.join(seq)         將數組元素鏈接成字符串
.concat(val, ...)  鏈接數組
.sort()            排序
.forEach()         將數組的每一個元素傳遞給回調函數
.splice(index,1,newdata)  刪除元素，並向數組添加新元素。
.map()             返回一個數組元素調用函數處理後的值的新數組

三、類型查詢
typeof "abc"   "string"
typeof null    "object"
typeof true    "boolean"
typeof 123     "number"

四、1. 條件判斷
    1. if else
    2. if; else if; else;
    3. switch (值){
         case 1:
         console.log(...);
         break;
         case 2:
         ...
         default:
         console.log(上面case都不知足就執行這一句);}
四、2. 循環
    1. for循環
        for (var i=0;i<值;i++){
          console.log(i);
        }
    2. while循環
        var i = 5;
        while (i>0){
            console.log(i);
            i--;
        }
四、3. 運算符
    1. 算數運算符
        + - * / % ++ --
    2. 比較運算符
        == != > < >= <= 
        注意!!! 強等於 ===  !==
    3. 邏輯運算符
        ||(或) &&(與)  !(非)
    4. 賦值運算符
        = += -= *= /= */

關於sort()須要注意：

若是調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（若有必要），以便進行比較。

若是想按照其餘標準進行排序，就須要提供比較函數，該函數要比較兩個值，而後返回一個用於說明這兩個值的相對順序的數字。比較函數應該具備兩個參數 a 和 b，其返回值以下：

若 a 小於 b，在排序後的數組中 a 應該出如今 b 以前，則返回一個小於 0 的值。
若 a 等於 b，則返回 0。
若 a 大於 b，則返回一個大於 0 的值。

示例：

function sortNumber(a,b){
    return a - b
}
var arr1 = [11, 100, 22, 55, 33, 44]
arr1.sort(sortNumber)

sort()使用

遍歷數組中的元素，可使用下面的方式：前端

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}

三元運算與Python對比

一、JS中
var a = 1;
var b = 2;
var c = a > b ? a : b

二、python中
a=1
b=2
res = a if a > b else b

函數和內置對象

函數

// 普通函數定義
function f1() {
  console.log("Hello world!");
}

// 帶參數的函數
function f2(a, b) {
  console.log(arguments);  // 內置的arguments對象
  console.log(arguments.length);
  console.log(a, b);
}

// 帶返回值的函數
function sum(a, b){
  return a + b;
}
sum(1, 2);  // 調用函數

// 匿名函數方式
var sum = function(a, b){
  return a + b;
}
sum(1, 2);

// 當即執行函數
(function(a, b){
  return a + b;
})(1, 2);

ps補充箭頭函數

ES6中容許使用「箭頭」（=>）定義函數。

var f = v => v;
// 等同於
var f = function(v){
  return v;
}
若是箭頭函數不須要參數或須要多個參數，就是用圓括號表明參數部分：
var f = () => 5;
// 等同於
var f = function(){return 5};

var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2){
  return num1 + num2;
}

對象與方法

//1. 自定義對象 （即python中的字典）
/*JavaScript的對象（Object）本質上是鍵值對的集合（Hash結構），可是隻能用字符串做爲鍵。*/

var a = {"name": "Mogu", "age": 18};
console.log(a.name);
console.log(a["age"]);

//遍歷對象中的內容
var a = {"name": "Mogu", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

//建立對象
var person=new Object();  // 建立一個person對象
person.name="Mogu";  // person對象的name屬性
person.age=18;  // person對象的age屬性

Date對象

//1.Date對象
//方法1：不指定參數
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：參數爲日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：參數爲毫秒數
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
//方法4：參數爲年月日小時分鐘秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒並不直接顯示

//方法
var d = new Date(); 
//getDate()                 獲取日
//getDay ()                 獲取星期
//getMonth ()               獲取月（0-11）
//getFullYear ()            獲取完全年份
//getHours ()               獲取小時
//getMinutes ()             獲取分鐘
//getSeconds ()             獲取秒
//getMilliseconds ()        獲取毫秒
//getTime ()                返回累計毫秒數(從1970/1/1午夜)

JSON對象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串轉換成對象
var obj = JSON.parse(str1); 
// 對象轉換成JSON字符串
var str = JSON.stringify(obj1);

Math對象

abs(x)      返回數的絕對值。
exp(x)      返回 e 的指數。
floor(x)    對數進行下舍入。
log(x)      返回數的天然對數（底爲e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)      返回數的正弦。
sqrt(x)     返回數的平方根。
tan(x)      返回角的正切。

RegExp正則對象

/*1. 兩種定義方式:
    1. new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")
    2. /new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$")/
2. 匹配模式
    1. g 全局
    2. i 忽略大小寫
3. 坑
    1. 正則表達式中間不能加空格
    2. .test() --> .test(undefined) --> .test("undefined")
    3. 全局模式下會有一個lastIndex屬性*/

三、BOM和DOM

JS的BOM和DOMjava

四、jQuery

jQuery是一個輕量級的、兼容多瀏覽器的JavaScript庫。
jQuery使用戶可以更方便地處理HTML Document、Events、實現動畫效果、方便地進行Ajax交互，可以極大地簡化JavaScript編程。它的宗旨就是：「Write less, do more.「

jQuery快速入門python

bootstrap框架和 layui

Bootstrap是Twitter開源的基於HTML、CSS、JavaScript的前端框架jquery

它是爲實現快速開發Web應用程序而設計的一套前端工具包。ajax

它支持響應式佈局，而且在V3版本以後堅持移動設備優先。正則表達式

前端框架：layui編程

利用bootstrap快速搭建前端頁面

基於bootstrap搭建的頁面1

登陸頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陸</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
    body {
        background-color: #eeeeee;
    }
    .login-form {
      max-width: 330px;
      margin: 150px auto 0;
    }
  </style>
</head>
<body>

<div class="container">

    <form class="form-signin login-form" action="/login/" method="post">
        <h2 class="form-signin-heading">後臺管理登陸</h2>

        <div class="input-group margin-bottom-sm">
            <span class="input-group-addon"><i class=" fa fa-user fa-fw "></i></span>
            <input class="form-control" id="username" name="username" type="text" placeholder="帳戶名">
        </div>
        <div class="input-group" style="margin-top: 10px">
            <span class="input-group-addon"><i class="fa fa-lock fa-fw "></i></span>
            <input class="form-control" id="password" name="password" type="password" placeholder="密碼">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="remember-me"> 記住我
            </label>
        </div>
        <button class="btn btn-lg btn-primary btn-block" id="ajax_submit" type="submit">登陸</button>

    </form>

</div> <!-- /container -->
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
<script>
    $('#ajax_submit').click(function () {
        $.ajax({
            url: '/login/',
            type: 'POST',
            data: {'username': $('#username').val(), 'password': $('#password').val()},
            success: function (args) {
                res = JSON.parse(args);
                if (res['code'] === 10001) {
                    location.reload();
                    alert(res['msg'])
                }
            }
        })
    })
</script>
</html>

View Code

後臺頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>後臺管理界面</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-tabs nav-justified">
  <li role="presentation" class="active"><a href="#">後臺管理</a></li>
  <li role="presentation"><a href="/classes/">xx管理</a></li>
  <li role="presentation"><a href="/student/">xx管理</a></li>
  <li role="presentation"><a href="/teacher/">xx管理</a></li>
</ul>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="/static/images/banner_1.jpg" alt="...">
      <div class="carousel-caption">
        放飛自我！
      </div>
    </div>
    <div class="item">
      <img src="/static/images/banner_2.jpg" alt="...">
      <div class="carousel-caption">
       放飛夢想！
      </div>
    </div>
    <div class="item">
      <img src="/static/images/banner_3.jpg" alt="...">
      <div class="carousel-caption">
          放飛但願！
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>classes</title>
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-tabs nav-justified">
  <li role="presentation" class="active"><a href="#">班級管理</a></li>
  <li role="presentation"><a href="/houtai/">後臺管理</a></li>
  <li role="presentation"><a href="/student/">學生管理</a></li>
  <li role="presentation"><a href="/teacher/">老師管理</a></li>
</ul>
<h2 style="margin-left: 10px">班級列表</h2>
<button type="button" style="margin-right: 30px;margin-bottom: 5px" class="btn btn-primary btn-sm pull-right"
        data-toggle="modal" data-target="#add_Modal">添加班級
</button>
<table class="table table-bordered">
    <tr>
        <th>班級ID</th>
        <th>班級名稱</th>
        <th>操做列表</th>
    </tr>
    {% for item in class_list %}
        <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.classname }}</td>
            <td>
                {#                <a href="/del_classes/?cid={{ item.id }}" onclick="return queren()">刪除</a>#}
                <button type="button" class="btn btn-danger btn-xs del_cid">
                    刪除
                </button>
                {#                <a href="/update_classes/?cid={{ item.id }}">更新</a>#}
                <button type="button" class="btn btn-success btn-xs update_classes " data-toggle="modal"
                        data-target="#update_Modal">
                    編輯
                </button>
            </td>
        </tr>
    {% endfor %}
</table>

<!--添加班級模態框-->
<div id="add_Modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: none">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加班級</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="add_classname" placeholder="班級名稱">
                        </div>
                    </div>
                    <div class="modal-footer" style="border-top: none">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="ajax_add_classes">提交</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--修改班級模態框-->
<div id="update_Modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: none">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">編輯班級</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-12">
                            <input type="text" class="form-control" id="update_classname" placeholder="班級名稱">
                            <input type="hidden" class="form-control" id="update_id" placeholder="班級ID">
                        </div>
                    </div>
                    <div class="modal-footer" style="border-top: none">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary " id="ajax_update_classes">提交</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
<script>
    //添加班級JS代碼
    $('#ajax_add_classes').click(function () {
        $.ajax({
            url: '/add_classes/',
            type: 'POST',
            data: {"classname": $("#add_classname").val()},
            success: function (args) {
                res = JSON.parse(args);
                if (res['code'] === 10000) {
                    location.reload();
                } else {
                    console.log(res['msg']);
                    $('#my_message_add').text(args)
                }
            }
        })
    });

    //刪除班級JS代碼
    $('.del_cid').click(function () {
        res = window.confirm("是否確認刪除？");
        if (res) {
            const datas = $(this).parent().prevAll();
            const cid = $(datas[1]).text();
            $.ajax({
                url: '/del_classes/',
                type: 'POST',
                data: {'cid': cid},
                success: function (args) {
                    res = JSON.parse(args);
                    if (res['code'] === 10000) {
                        location.reload();
                    }
                }
            })
        } else {
            return false
        }
    });

    //修改班級JS代碼
    $('.update_classes').click(function () {
        const datas = $(this).parent().prevAll();
        $('#update_classname').val($(datas[0]).text());
        $('#update_id').val($(datas[1]).text())
    });
    $('#ajax_update_classes').click(function () {
        const classname = $('#update_classname');
        const cid = $('#update_id').val();
        $.ajax({
            url: '/update_classes/',
            type: 'POST',
            data: {'classname': classname.val(), 'cid': cid},
            success: function (args) {
                res = JSON.parse(args);
                if (res['code'] === 10000) {
                    location.reload();
                } else {
                    console.log(res['msg']);
                    $('#my_message_add').text(args)
                }
            }
        })
    });
</script>
</html>

class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>student</title>
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-tabs nav-justified">
  <li role="presentation" class="active"><a href="#">學生管理</a></li>
  <li role="presentation"><a href="/houtai/">後臺管理</a></li>
  <li role="presentation"><a href="/classes/">班級管理</a></li>
  <li role="presentation"><a href="/teacher/">老師管理</a></li>
</ul>
<h2 style="margin-left: 10px">學生列表</h2>
<button type="button" style="margin-right: 30px;margin-bottom: 5px" class="btn btn-primary btn-sm pull-right"
        data-toggle="modal" data-target="#add_Modal">添加學生
</button>
<table class="table table-bordered">
    <tr>
        <th>學生ID</th>
        <th>學生名稱</th>
        <th>班級名稱</th>
        <th>操做列表</th>
    </tr>
    {% for item in student_list %}
        <tr>
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td clsid="{{ item.classId }}">{{ item.classname }}</td>
            <td>
                {#                <a href="/del_classes/?cid={{ item.id }}" onclick="return queren()">刪除</a>#}
                <button type="button" class="btn btn-danger btn-xs del_cid">
                    刪除
                </button>
                {#                <a href="/update_classes/?cid={{ item.id }}">更新</a>#}
                <button type="button" class="btn btn-success btn-xs update_student " data-toggle="modal"
                        data-target="#update_Modal">
                    編輯
                </button>
            </td>
        </tr>
    {% endfor %}
</table>

<!--添加學生模態框-->
<div id="add_Modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: none">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加學生</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="add_stuname" value="" placeholder="學生名稱">
                        </div>
                        <div class="form-group col-sm-3">
                            <select id="add_classId" class="form-control">
                                {% for item in classes_list %}
                                    <option value="{{ item.id }}">{{ item.classname }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer" style="border-top: none">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="ajax_add_stu">提交</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--修改學生模態框-->
<div id="update_Modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: none">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">編輯學生信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="update_stuname" value="" placeholder="學生名稱">
                            <input type="hidden" class="form-control" id="update_id" value="" placeholder="學生ID">
                        </div>
                        <div class="form-group col-sm-3">
                            <!--SELECT 下拉菜單示例：id值value 是item.id值-->
                            <select id="update_classId" class="form-control">
                                {% for item in classes_list %}
                                    <option value="{{ item.id }}">{{ item.classname }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer" style="border-top: none">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary " id="ajax_update_student">提交</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
<script>
    //添加學生JS代碼
    $('#ajax_add_stu').click(function () {
        const stuname = $('#add_stuname').val();
        const cid = $('#add_classId').val();
        $.ajax({
            url: '/add_student/',
            type: 'POST',
            data: {"stuname": stuname, 'cid': cid},
            success: function (args) {
                res = JSON.parse(args);
                if (res['code'] === 10000) {
                    location.reload();
                } else {
                    console.log(res['msg']);
                    confirm(res['msg'])
                }
            }
        })
    });
    //編輯學生信息JS代碼
    $('.update_student').click(function () {
        const ret = $(this).parent().prevAll();
        const sid = $('#update_id');
        const stuname = $('#update_stuname');
        const clsid = $('#update_classId');
        sid.val($(ret[2]).text());
        stuname.val($(ret[1]).text());
        clsid.val($(ret[0]).attr('clsid'));//selcect下拉框的值可經過 attr(屬性名稱) 設置
    });
    $('#ajax_update_student').click(function () {
        $.ajax({
            url: '/update_student/',
            type: 'POST',
            data: {'sid': $('#update_id').val(), 'stuname': $('#update_stuname').val(), 'clsid': $('#update_classId').val()},
            success: function (args) {
                res = JSON.parse(args);
                if (res['code'] === 10000) {
                    location.reload();
                } else {
                    console.log(res['msg']);
                    confirm(res['msg'])
                }
            }
        })
    })
</script>
</html>

stu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>teacher</title>
    <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul class="nav nav-tabs nav-justified">
    <li role="presentation" class="active"><a href="#">老師管理</a></li>
    <li role="presentation"><a href="/houtai/">後臺管理</a></li>
    <li role="presentation"><a href="/classes/">班級管理</a></li>
    <li role="presentation"><a href="/student/">學生管理</a></li>
</ul>
<h2 style="margin-left: 10px">老師列表</h2>
<button type="button" style="margin-right: 30px;margin-bottom: 5px" class="btn btn-primary btn-sm pull-right"
        data-toggle="modal" data-target="#add_Modal">添加老師
</button>
<table class="table table-bordered">
    <tr>
        <th>老師ID</th>
        <th>老師名稱</th>
        <th>代課班級</th>
        <th>操做列表</th>
    </tr>
    {% for item in teacher_list %}
        <tr>
            <td>{{ item.tid }}</td>
            <td>{{ item.name }}</td>
            <td clsmsg="{{ item.classnames }}">
                {% for i in  item.classnames %}
                    {{ i }}&nbsp;
                {% endfor %}
            </td>
            <td>
                {#                <a href="/del_classes/?cid={{ item.id }}" onclick="return queren()">刪除</a>#}
                <button type="button" class="btn btn-danger btn-xs del_cid">
                    刪除
                </button>
                {#                <a href="/update_classes/?cid={{ item.id }}">更新</a>#}
                <button type="button" class="btn btn-success btn-xs update_teacher " data-toggle="modal"
                        data-target="#update_Modal">
                    編輯
                </button>
            </td>
        </tr>
    {% endfor %}
</table>

<!--添加老師模態框-->
<div id="add_Modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: none">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加老師</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="add_teaname" value="" placeholder="老師姓名">
                        </div>
                        <div class="form-group col-sm-3">
                            <select id="add_classId" class="form-control" multiple>
                                {% for item in class_list %}
                                    <option value="{{ item.id }}">{{ item.classname }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer" style="border-top: none">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="ajax_add_tea">提交</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--修改老師模態框-->
<div id="update_Modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" style="border-bottom: none">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">編輯老師信息</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-9">
                            <input type="text" class="form-control" id="update_teaname" value="" placeholder="老師姓名">
                            <input type="hidden" class="form-control " id="update_id" value="" placeholder="老師ID">
                            <input type="text" style="margin-top: 15px" class="form-control " id="update_tea_class"
                                   value="" readonly>
                        </div>
                        <div class="form-group col-sm-3">
                            <!--SELECT 下拉菜單示例：id值value 是item.id值  multiple爲多選的意思-->
                            <select id="update_classId" class="form-control" multiple>
                                {% for item in class_list %}
                                    <option value="{{ item.id }}">{{ item.classname }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer" style="border-top: none">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary " id="ajax_update_student">提交</button>
                    </div>
                </form>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
<script>
    //添加老師JS代碼
    $('#ajax_add_tea').click(function () {
        const teaname = $('#add_teaname').val();
        const cid = $('#add_classId').val();
        $.ajax({
            url: '/add_teacher/',
            type: 'POST',
            data: {"teaname": teaname, 'cid': cid},
            traditional: true,
            success: function (args) {
                res = JSON.parse(args);
                if (res['code'] === 10000) {
                    location.reload();
                    alert(res['msg']);
                } else {
                    alert(res['msg'])
                }
            }
        })
    });
    //編輯教師信息JS代碼，未寫完ajax提交數據
    $('.update_teacher').click(function () {
        const ret = $(this).parent().prevAll();
        const tid = $('#update_id');
        const teaname = $('#update_teaname');
        const clssname = $('#update_tea_class');
        tid.val($(ret[2]).text());
        teaname.val($(ret[1]).text());
        clssname.val($(ret[0]).attr('clsmsg')) //利用找到的 td 中新增的clsmsg 屬性值 去賦值到input框中
    });
</script>
</html>

tea

基於BS的模態框輸入邀請碼測試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <style>
        .iptCodeTip{
            color: #000;
            font-size: 14px;
            line-height: 40px;
            text-align: center
        }
        .checkedCode{
            padding: 0 48px;
            overflow: hidden
        }

        .checkedCode input{
            font-size: 30px;
            padding: 0;
            margin:10px 0;
            width:29%;
            margin-right: 5.6%;
            text-align: center;
            display: block;
            float: left;
            height: 70px;
            border: solid 1px #898989;
            border-radius: 0;
        }
        .checkedCode input:last-child{
            margin-right: 0
        }

    </style>
</head>
<body>


<!-- Button trigger modal -->
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">登陸</button>
<div class="container">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">模態框測試</h4>
                </div>
                <div class="modal-body">
                    <div class="checkedCode">
                        <input type="text" maxlength="3" id="iptCode">
                        <input type="text" maxlength="3" name="code" pattern="[0-9]*" />
                        <input type="text" maxlength="4" name="code" pattern="[0-9]*"/>
                    </div>
                    <!--<div class="checkedCode">-->
                        <!--<input type="text" maxlength="3" id="iptCode">-->
                        <!--<div class="getCodeMsg">-->
                            <!--<input type="tel" maxlength="3" name="code" pattern="[0-9]*" />-->
                            <!--<input type="tel" maxlength="3" name="code" pattern="[0-9]*"/>-->
                            <!--<input type="tel" maxlength="3" name="code" pattern="[0-9]*"/>-->
                            <!--<a id="countLast" style="display: none"><label>60</label>秒後從新發送</a>-->
                        <!--</div>-->
                    <!--</div>-->
                </div>
                <div class="modal-footer"><!--.modal-footer--text-align: center;--->
                    <button type="button" class="btn btn-primary">登陸</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->


<script type="text/javascript" src="static/JS/jquery-3.3.1.js"></script>
<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $('#myModal').on('shown.bs.modal', function () {
        $('#myInput').focus()
    });
    $('.getCodeMsg input').keyup(function (event) {
        // 刪除往前 添加日後
        if($(this).index()<6) {
            if(event.keyCode==46 || event.keyCode==8) {
                $(this).prev('input').focus();
            }else {
                $(this).next('input').focus();
            }
        }
    })
</script>
</body>
</html>

View Code

基於bootstrap搭建的頁面首頁

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BootStrap</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    a{
      text-decoration: none;
    }
    .my-center {
      float: none;
      display: inline-block;
      vertical-align: middle;
      margin-right: -4px;
    }

    .my-nav {
      border-radius: 0;
      margin-bottom: 0;
    }

    .navbar-inverse .navbar-brand {
      color: #ffffff;
      background-color: transparent;
    }

    .my-banner-title {
      font-size: 36px;
    }

    @media screen and (max-width: 768px) {
      .my-banner-title {
        font-size: 24px;
      }
    }

    .my-space {
      height: 10px;
      width: 100%;
    }

    @media screen and (min-width: 768px) {
      .my-space {
        height: 40px;
        width: 100%;
      }
    }

    .my-line {
      display: inline-block;
      width: 70px;
      height: 1px;
      border-top: 1px solid #bbb;
      margin: auto;
    }

    .my-padding {
      padding: 10px 0;
    }

    @media screen and (min-width: 768px) {
      .my-padding {
        padding: 40px 0;
      }
    }

    .my-dark {
      background-color: #f5f5f5;
    }

    .center-heading {
      text-align: center;
      margin-bottom: 40px;
    }

    .footer {
      background: #111;
      font-size: 0.9em;
      position: relative;
      clear: both;
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse my-nav">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><strong>測 試</strong></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">百 度<span class="sr-only">(current)</span></a></li>
        <li><a href="#">騰 訊</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">好好學習</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
             aria-expanded="false">聯繫咱們<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">寫信</a></li>
            <li><a href="#">郵件</a></li>
            <li><a href="#">電話</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">都聯繫不到</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<header class="header-index">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="./banner_1.jpg" alt="...">
        <div class="carousel-caption">
          <div class="h1 my-banner-title"><strong>Bs真好</strong></div>
        </div>
      </div>
      <div class="item">
        <img src="./banner_2.jpg" alt="...">
        <div class="carousel-caption">
          <div class="h1 my-banner-title">Bs牛皮</div>
        </div>
      </div>
      <div class="item">
        <img src="./banner_3.jpg" alt="...">
        <div class="carousel-caption">
          <div class="h1 my-banner-title">Bs再見</div>
        </div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</header>

<div class="my-dark">
  <div class="container my-padding">
    <div class="row">
      <div class="col-md-12 text-center">
        <h1><strong>Bootstrap能作什麼？</strong></h1>
        <span class="my-line"></span>
        <p>網站首頁、網站後臺、手機頁面</p>
      </div>
    </div>
  </div>
</div>

<div class="my-space"></div>

<div>
  <div class="container my-padding">
    <div class="row">
      <div class="col-md-6 col-sm-6">
        <div class="thumbnail"><img src="./Bootstrap_d1.png" alt=""></div>
      </div>
      <div class="col-md-6 col-sm-6 text-center">
        <h2>使用<strong>Bootstrap</strong>搭建的</h2>
        <h2>登錄頁面</h2>
        <span class="my-line"></span>
        <p class="lead">
          使用表單、按鈕組件搭建
        </p>
      </div>
    </div>
  </div>
</div>

<div class="my-dark">
  <div class="container my-padding">
    <div class="row">
      <div class="col-md-6 col-sm-6 text-center">
        <h2>使用Bootstrap搭建的</h2>
        <h2>信息採集單</h2>
        <span class="my-line"></span>
        <p class="lead">
          使用表單、頁頭、面板組件、進度條等組件搭建
        </p>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="thumbnail"><img src="./Bootstrap_d2.png" alt=""></div>
      </div>
    </div>
  </div>
</div>

<div>
  <div class="container my-padding">
    <div class="row">
      <div class="col-md-6 col-sm-6">
        <div class="thumbnail"><img src="./Bootstrap_d3.png" alt=""></div>
      </div>
      <div class="col-md-6 col-sm-6 text-center">
        <h2>使用<strong>Bootstrap</strong>搭建的</h2>
        <h2>管理後臺</h2>
        <span class="my-line"></span>
        <p class="lead">
          使用導航條、表格、面板、分頁等組件搭建
        </p>
      </div>
    </div>
  </div>
</div>

<div class="my-dark">
  <div class="container my-padding">
    <div class="row">
      <div class="col-md-6 col-sm-6 text-center">
        <h2>使用<strong>Bootstrap</strong>搭建的</h2>
        <h2>博客頁面</h2>
        <span class="my-line"></span>
        <p class="lead">
          使用自定義導航、自定義分欄和分頁等組件搭建
        </p>
      </div>
      <div class="col-md-6 col-sm-6">
        <div class="thumbnail"><img src="./Bootstrap_d4.png" alt=""></div>
      </div>
    </div>
  </div>
</div>

<div>
  <div class="container my-padding">
    <div class="row">
      <div class="col-md-12">
        <div class="center-heading">
          <h2>心路歷程</h2>
          <span class="my-line"></span>
          <p>學習真開心，兩天都在學習，就寫了一個頁面</p>
          <p>時間都去哪兒了？時間都浪費在找我前女朋友的照片了。。。</p>
        </div>
      </div>
    </div>
    <hr>
    <div class="row">
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="./Bootstrap_i1.png" alt="...">
        </a>
      </div>
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="./Bootstrap_i2.png" alt="...">
        </a>
      </div>
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="./Bootstrap_i3.png" alt="...">
        </a>
      </div>
      <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
          <img src="./Bootstrap_i4.png" alt="...">
        </a>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 text-center">對，這些都是我前女朋友</div>
    </div>
  </div>
</div>
<div class="my-space"></div>

<div class="my-dark my-padding">
  <div class="container">
    <div class="col-sm-8 my-center">
      <h4>因此說</h4>
      <p>學習很重要，學習很重要，學習很重要，重要的事情說三遍！</p>
    </div>
    <div class="col-sm-4 my-center">
      <a class="btn-success btn-lg btn-success-outline" href="http://v3.bootcss.com/">我知道了</a>
    </div>
  </div>
</div>

<div class="footer">
  <div class="row">
    <div class="col-md-12 text-center">
      <span style="color:#fff">©2019 前端</span>
    </div>
  </div>
</div>


<script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>