Python自動化開發學習18-Web前端補充內容

時間 2021-01-19

標籤 css html 前端 jquery git github 正則表達式 bootstrap 數組服務器欄目 Python 简体版

原文原文鏈接

JavaScript-補充

js正則表達式

在使用以前，首先要建立正則表達式對象，建立對象有兩種方式：
/pattern/attributes ：這個簡單，推薦用這個。並且不用寫引號
new RegExp(pattern, attributes); ：和上面的效果同樣，這裏是經過參數把值傳入的，因此必須寫上引號。另外還要注意轉義字符。
參數 pattern 是一個字符串，就是正則表達式。
參數 attributes 是一個可選的字符串，包含屬性 "g"（全局匹配）、"i"（對大小寫不敏感）和 "m"（多行匹配模式）。
分別用上面2中方法建立正則表達式對象，忽略可選的 attributes 參數，兩種方法建立出的結果徹底同樣：css

> reg1 = /^\d$/;
< [regex] /^\d$/: 
> reg2 = new RegExp("^\\d$");  // 注意字符串了的\要轉義
< [regex] /^\d$/:

而後就是用正則表達式對象匹配咱們的字符串，這裏也學習2個方法：
RegExpObject.test(string) ：檢索字符串是否匹配，返回布爾值（true 或 false）
RegExpObject.exec(string) ：獲取匹配的結果，匹配不到則返回 null。返回一個數組，能夠對返回的結果再次匹配。這個方法比較複雜，後面一步一步展開。html

> reg1 = /^\d+$/;  // 匹配純數字字符串
< [regex] /^\d+$/: 
> reg1.test('123')
< true
> reg1.test('1a23')
< false
> reg2 = /\bJava\w*\b/;  // 匹配以Java開頭的單詞
< [regex] /\bJava\w*\b/: 
> text = "JavaScript is more fun than Java or JavaBeans!"
< "JavaScript is more fun than Java or JavaBeans!"
> reg2.exec(text);  // 只匹配到了第一個，並且返回的是數組
< [object Array]: ["JavaScript"]

若是在正則表達式中使用()把表達式分組，那麼返回的數組會有第2個元素。緊接上面的例子：前端

> reg3 = /\b(Ja(va))(\w*)\b/;  // 匹配以Java開頭的單詞，這裏用括號加了3個分組
< [regex] /\b(Ja(va))(\w*)\b/: 
> reg3.exec(text);
< [object Array]: ["JavaScript", "Java", "va", "Script"]

若是要匹配全部，那麼就須要加上 attributes 參數 g ，可是一次只返回一個結果。再次執行，會返回下一個結果。匹配完了返回 null 。而後能夠繼續再次執行，又從頭開始。仍是緊接上面的例子：jquery

> reg4 = /\bJava\w*\b/g;  // 匹配以Java開頭的單詞，最後加了g全局匹配
< [regex] /\bJava\w*\b/g: 
> reg4.exec(text)
< [object Array]: ["JavaScript"]
> reg4.exec(text)
< [object Array]: ["Java"]
> reg4.exec(text)
< [object Array]: ["JavaBeans"]
> reg4.exec(text)
< null
> reg4.exec(text)
< [object Array]: ["JavaScript"]

阻止事件發生2

自定義事件先執行
上節課講過 a 標籤默認有個事件，咱們能夠再綁定一個自定義事件，而且會先執行自定義事件。而後若是事件返回 false，將中斷操做（阻止後面的事件）。submit 是提交表單，也是同樣的，一樣能夠經過 return false 來阻止提交表單。大多數狀況都是這種自定義事件先執行。
默認事件先執行
這種狀況比較少，好比複選框（checkbox），測試一下：git

<body>
<label id="l1" for="i1">測試複選框</label>
<input id="i1" type="checkbox">
<script>
    document.getElementById('l1').onclick = function () {
        alert("我是label")
    };
    document.getElementById('i1').onclick = function () {
        alert("我是input");
    };
</script>
</body>

以前a標籤測試的時候，是先彈出alert，點掉以後纔會頁面跳轉。而這裏是彈出alert的時候頁面裏的複選框已經變化好了。因此是先執行默認的事件。順便看到 label 也是通常的狀況，先執行自定義事件。github

表單驗證

結合上面的正則表達式來判斷進行驗證。而後結合上面的阻止事件發生，在驗證不經過的時候，中斷操做。
爲何要進行表單驗證？能夠減小服務器收到的請求。經過客戶端上的驗證，攔截掉一部分不合規的請求。不過服務器端不能徹底依賴客戶端的驗證，由於客戶端能夠禁用js，或者修改客戶端，甚至直接經過其餘方式把請求發送到服務器端，服務端仍是必須有一套完整的驗證。這裏先學習客戶端經過js實現的驗證。
老師的作法：循環的時候經過自定義屬性來判斷哪些標籤須要驗證。仍是經過自定義屬性來判斷這個標籤具體要驗證什麼。並非寫死的方法。好比
require = true ：判斷這個標籤是否須要作驗證
field = ‘string’ ：這個標籤須要填入的是字符串
mobile = tue ：這個標籤須要驗證是不是電話號碼
min-len = 6 ：這個標籤裏的內容的最小長度是6
name = ‘pwd’ confirm-to = 'pwd' ：前一個是註冊密碼標籤裏的屬性。後一個是確認密碼標籤裏的自定義屬性，去找 name 屬性值和它同樣的標籤驗證內容是否一致。
驗證的觸發寫在 submit 標籤的 onclick 事件裏。若是驗證失敗，返回 false，阻止提交表單。
另外還能夠作的更加高級，爲每一個須要驗證的標籤（require = true）添加一個失去焦點的事件（onblur），觸發當前標籤的驗證。這裏僅須要顯示驗證錯誤的提示信息便可。
記個思路，沒有示例。正則表達式

響應式佈局

針對不一樣的媒體類型定義不一樣的樣式。把你的css樣式連同選擇器一塊兒，外面再包一層@media，寫上條件。好比在寬度變化的時候來改變一下背景色：bootstrap

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 80px;
            background-color: red;
        }
        /*下面的樣式生效的要求是，寬度最小是800px*/
        @media (min-width: 800px){
            .c1{
                background-color: yellow;
            }
        }
    </style>
</head>
<body>
<div class="c1"></div>
</body>

應用場景，好比頂部的菜單一字排開，當頁面寬度變小致使寬度不夠的時候，咱們固然能夠選擇設置一個最小寬度，讓底部出現滾動條。或者也能夠經過響應式佈局，讓這部分的樣式變成另一種。好比原來是一字排開的菜單，如今所有收到一個下拉列表裏，點擊以後能夠豎着展開。不夠僅僅只是css樣式的改變貌似實現不了。其實就是把兩種菜單都寫好，同時只顯示其中一個。設置另外一個的display的值爲none就能夠隱藏掉了。數組

樣式優先級2

css樣式的優先級，已經學習過了，通常都是後加載的生效。另外還能夠在樣式後面加上 !important ，保證這個樣式必定生效：服務器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red !important;  /*這個樣式下面改不掉*/
            height: 80px;
            border: 1px solid green;  /*這個樣式會被覆蓋*/
        }
    </style>
</head>
<body>
<div class="c1" style="background-color: yellow;border: 8px solid blue;"></div>
</body>

下面就要講插件，在使用別人的組件的時候，就有可能須要用到。由於你可能沒法保證你的樣式必定是寫在最後的，好比你的插件在js了修改了樣式。這時候就須要用這個方法強制使本身的樣式生效，沒法被改變。
這個效果很厲害，因此不能亂用。important只應該被容許用來覆蓋掉js添加的樣式，好比那些本身沒法控制的js組件加上的樣式，並且使用的時候必須限定css範圍。

前端組件介紹

EasyUI

去Demo裏找你須要的樣式，直接把它的源碼複製過來就可使用了。樣式上側重於後臺管理的場景。
不過頁面裏引用的 css 和 js 文件的鏈接還要改一下。去Download裏把EasyUI下載下來，存放到本地。再把頁面中的地址修改爲本地文件的地址。
優勢：功能齊全。
缺點：學習代價大，不太容易修改。由於，js代碼中可能會修改html標籤，即你寫的html和你頁面最終顯示的html會不太同樣，被js修改過了。還有，存在不少Ajax操做，這個還沒學，等學習了Ajax以後再來考慮使用這個。

jQuery UI

使用起來和上面的EasyUI差很少。先下載下來，看中的樣式你的本身找到源碼複製下來使用。樣式一樣是側重於後臺管理的場景。
優勢：沒啥優勢，各方面看和EasyUI都差很少。相對簡單一下，目前的水平尚能掌握，這個能夠先用着。
缺點：功能沒有上面的EasyUI齊全。並且只是js豐富一些，基本沒有css，作的很樸素。

BootStrap

上面2個基本都是針對後臺管理頁面的場景，這個組件對於其餘場景的樣式也一樣有支持（大概是所有場景），好比你的Web主站。另外，這裏面用有不少響應式佈局，包括它本身的頁面裏也是，知道一下。
優勢：應用場景更多。
缺點：沒說。總之如今都用它

使用模板

上面提供的都是各類組件，咱們還得本身組合。那麼來試試看模板。
模板能夠網上找免費的，固然好的模板也有收費的。
課上演示了 nifty-v2.2.2 這個模板。先去 template 文件夾裏找你須要的示例，都是完整的一個頁面。先基於一個模板把頁面畫出來，而後按照實際的需求改爲本身須要的。

示例-輪播圖（bxSlider）

這裏再介紹一個組件：bxSlider。官網：https://bxslider.com/
首先下載插件，存放在本地。

接着在html中引入他的css文件和js文件，還有jQuery。注意jQuery得在js文件以前引入。
而後複製它的script代碼，再複製它的body裏的代碼。
最後填入你的圖片就行了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="bxslider-4-4.2.12/dist/jquery.bxslider.min.css">
    <script src="bxslider-4-4.2.12/dist/jquery.bxslider.min.js"></script>
    <script>
        $(document).ready(function(){
            $('.slider').bxSlider();
        });
    </script>
</head>
<body>
<div class="slider">
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo1.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo2.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo3.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo4.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo5.jpeg" /></div>
  <div><img src="bxslider-4-4.2.12/docs_src/assets/img/photo6.jpeg" /></div>
</div>
</body>
</html>

上面只是默認的效果，還能夠設置參數，只須要修改script，在裏面加上參數：

<script>
        $(document).ready(function(){
            $('.slider').bxSlider({
                mode: 'fade',  // 切換模式設爲淡出
                auto: true,  // 自動切換
                pause: 2000  // 自動切換間隔（ms）
            });
        });
    </script>

更多的參數設置就去網上查吧。