溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Python自動(dòng)化開發(fā)學(xué)習(xí)18-Web前端補(bǔ)充內(nèi)容

發(fā)布時(shí)間：2020-07-31 04:44:23 來源：網(wǎng)絡(luò) 閱讀：3655 作者：騎士救兵 欄目：web開發(fā)

JavaScript-補(bǔ)充

js正則表達(dá)式

在使用之前，首先要?jiǎng)?chuàng)建正則表達(dá)式對(duì)象，創(chuàng)建對(duì)象有兩種方式：
/pattern/attributes ：這個(gè)簡(jiǎn)單，推薦用這個(gè)。而且不用寫引號(hào)
new RegExp(pattern, attributes); ：和上面的效果一樣，這里是通過參數(shù)把值傳入的，所以必須寫上引號(hào)。另外還要注意轉(zhuǎn)義字符。
參數(shù) pattern 是一個(gè)字符串，就是正則表達(dá)式。
參數(shù) attributes 是一個(gè)可選的字符串，包含屬性 "g"（全局匹配）、"i"（對(duì)大小寫不敏感） 和 "m"（多行匹配模式）。
分別用上面2中方法創(chuàng)建正則表達(dá)式對(duì)象，忽略可選的 attributes 參數(shù)，兩種方法創(chuàng)建出的結(jié)果完全一樣：

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

然后就是用正則表達(dá)式對(duì)象匹配我們的字符串，這里也學(xué)習(xí)2個(gè)方法：
RegExpObject.test(string) ：檢索字符串是否匹配，返回布爾值（true 或 false）
RegExpObject.exec(string) ：獲取匹配的結(jié)果，匹配不到則返回 null。返回一個(gè)數(shù)組，可以對(duì)返回的結(jié)果再次匹配。這個(gè)方法比較復(fù)雜，后面一步一步展開。

> reg1 = /^\d+$/;  // 匹配純數(shù)字字符串
< [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);  // 只匹配到了第一個(gè)，而且返回的是數(shù)組
< [object Array]: ["JavaScript"]

如果在正則表達(dá)式中使用()把表達(dá)式分組，那么返回的數(shù)組會(huì)有第2個(gè)元素。緊接上面的例子：

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

如果要匹配所有，那么就需要加上 attributes 參數(shù) g ，但是一次只返回一個(gè)結(jié)果。再次執(zhí)行，會(huì)返回下一個(gè)結(jié)果。匹配完了返回 null 。然后可以繼續(xù)再次執(zhí)行，又從頭開始。還是緊接上面的例子：

> 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"]

阻止事件發(fā)生2

自定義事件先執(zhí)行
上節(jié)課講過 a 標(biāo)簽?zāi)J(rèn)有個(gè)事件，我們可以再綁定一個(gè)自定義事件，并且會(huì)先執(zhí)行自定義事件。然后如果事件返回 false，將中斷操作（阻止后面的事件）。submit 是提交表單，也是一樣的，同樣可以通過 return false 來阻止提交表單。大多數(shù)情況都是這種自定義事件先執(zhí)行。
默認(rèn)事件先執(zhí)行
這種情況比較少，比如復(fù)選框（checkbox），測(cè)試一下：

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

之前a標(biāo)簽測(cè)試的時(shí)候，是先彈出alert，點(diǎn)掉之后才會(huì)頁面跳轉(zhuǎn)。而這里是彈出alert的時(shí)候頁面里的復(fù)選框已經(jīng)變化好了。所以是先執(zhí)行默認(rèn)的事件。順便看到 label 也是一般的情況，先執(zhí)行自定義事件。

表單驗(yàn)證

結(jié)合上面的正則表達(dá)式來判斷進(jìn)行驗(yàn)證。然后結(jié)合上面的阻止事件發(fā)生，在驗(yàn)證不通過的時(shí)候，中斷操作。
為什么要進(jìn)行表單驗(yàn)證？可以減少服務(wù)器收到的請(qǐng)求。通過客戶端上的驗(yàn)證，攔截掉一部分不合規(guī)的請(qǐng)求。不過服務(wù)器端不能完全依賴客戶端的驗(yàn)證，因?yàn)榭蛻舳丝梢越胘s，或者修改客戶端，甚至直接通過其他方式把請(qǐng)求發(fā)送到服務(wù)器端，服務(wù)端還是必須有一套完整的驗(yàn)證。這里先學(xué)習(xí)客戶端通過js實(shí)現(xiàn)的驗(yàn)證。
老師的做法：循環(huán)的時(shí)候通過自定義屬性來判斷哪些標(biāo)簽需要驗(yàn)證。還是通過自定義屬性來判斷這個(gè)標(biāo)簽具體要驗(yàn)證什么。并不是寫死的方法。比如
require = true ：判斷這個(gè)標(biāo)簽是否需要做驗(yàn)證
field = ‘string’ ：這個(gè)標(biāo)簽需要填入的是字符串
mobile = tue ：這個(gè)標(biāo)簽需要驗(yàn)證是否是電話號(hào)碼
min-len = 6 ：這個(gè)標(biāo)簽里的內(nèi)容的最小長(zhǎng)度是6
name = ‘pwd’ confirm-to = 'pwd' ：前一個(gè)是注冊(cè)密碼標(biāo)簽里的屬性。后一個(gè)是確認(rèn)密碼標(biāo)簽里的自定義屬性，去找 name 屬性值和它一樣的標(biāo)簽驗(yàn)證內(nèi)容是否一致。
驗(yàn)證的觸發(fā)寫在 submit 標(biāo)簽的 onclick 事件里。如果驗(yàn)證失敗，返回 false，阻止提交表單。
另外還可以做的更加高級(jí)，為每個(gè)需要驗(yàn)證的標(biāo)簽（require = true）添加一個(gè)失去焦點(diǎn)的事件（onblur），觸發(fā)當(dāng)前標(biāo)簽的驗(yàn)證。這里僅需要顯示驗(yàn)證錯(cuò)誤的提示信息即可。
記個(gè)思路，沒有示例。

響應(yīng)式布局

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

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

應(yīng)用場(chǎng)景，比如頂部的菜單一字排開，當(dāng)頁面寬度變小導(dǎo)致寬度不夠的時(shí)候，我們當(dāng)然可以選擇設(shè)置一個(gè)最小寬度，讓底部出現(xiàn)滾動(dòng)條?；蛘咭部梢酝ㄟ^響應(yīng)式布局，讓這部分的樣式變成另外一種。比如原來是一字排開的菜單，現(xiàn)在全部收到一個(gè)下拉列表里，點(diǎn)擊之后可以豎著展開。不夠僅僅只是css樣式的改變貌似實(shí)現(xiàn)不了。其實(shí)就是把兩種菜單都寫好，同時(shí)只顯示其中一個(gè)。設(shè)置另一個(gè)的display的值為none就可以隱藏掉了。

樣式優(yōu)先級(jí)2

css樣式的優(yōu)先級(jí)，已經(jīng)學(xué)習(xí)過了，一般都是后加載的生效。另外還可以在樣式后面加上 !important ，保證這個(gè)樣式一定生效：

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

下面就要講插件，在使用別人的組件的時(shí)候，就有可能需要用到。因?yàn)槟憧赡軣o法保證你的樣式一定是寫在最后的，比如你的插件在js了修改了樣式。這時(shí)候就需要用這個(gè)方法強(qiáng)制使自己的樣式生效，無法被改變。
這個(gè)效果很厲害，所以不能亂用。important只應(yīng)該被允許用來覆蓋掉js添加的樣式，比如那些自己無法控制的js組件加上的樣式，而且使用的時(shí)候必須限定css范圍。

前端組件介紹

EasyUI

去Demo里找你需要的樣式，直接把它的源碼復(fù)制過來就可以使用了。樣式上側(cè)重于后臺(tái)管理的場(chǎng)景。
不過頁面里引用的 css 和 js 文件的連接還要改一下。去Download里把EasyUI下載下來，存放到本地。再把頁面中的地址修改成本地文件的地址。
優(yōu)點(diǎn)：功能齊全。
缺點(diǎn)：學(xué)習(xí)代價(jià)大，不太容易修改。因?yàn)?，js代碼中可能會(huì)修改html標(biāo)簽，即你寫的html和你頁面最終顯示的html會(huì)不太一樣，被js修改過了。還有，存在很多Ajax操作，這個(gè)還沒學(xué)，等學(xué)習(xí)了Ajax之后再來考慮使用這個(gè)。

jQuery UI

使用起來和上面的EasyUI差不多。先下載下來，看中的樣式你的自己找到源碼復(fù)制下來使用。樣式同樣是側(cè)重于后臺(tái)管理的場(chǎng)景。
優(yōu)點(diǎn)：沒啥優(yōu)點(diǎn)，各方面看和EasyUI都差不多。相對(duì)簡(jiǎn)單一下，目前的水平尚能掌握，這個(gè)可以先用著。
缺點(diǎn)：功能沒有上面的EasyUI齊全。而且只是js豐富一些，基本沒有css，做的很樸素。

BootStrap

上面2個(gè)基本都是針對(duì)后臺(tái)管理頁面的場(chǎng)景，這個(gè)組件對(duì)于其他場(chǎng)景的樣式也同樣有支持（大概是全部場(chǎng)景），比如你的Web主站。另外，這里面用有很多響應(yīng)式布局，包括它自己的頁面里也是，知道一下。
優(yōu)點(diǎn)：應(yīng)用場(chǎng)景更多。
缺點(diǎn)：沒說。總之現(xiàn)在都用它

使用模板

上面提供的都是各種組件，我們還得自己組合。那么來試試看模板。
模板可以網(wǎng)上找免費(fèi)的，當(dāng)然好的模板也有收費(fèi)的。
課上演示了 nifty-v2.2.2 這個(gè)模板。先去 template 文件夾里找你需要的示例，都是完整的一個(gè)頁面。先基于一個(gè)模板把頁面畫出來，然后按照實(shí)際的需求改成自己需要的。

示例-輪播圖（bxSlider）

這里再介紹一個(gè)組件：bxSlider。官網(wǎng)：https://bxslider.com/
首先下載插件，存放在本地。
Python自動(dòng)化開發(fā)學(xué)習(xí)18-Web前端補(bǔ)充內(nèi)容

接著在html中引入他的css文件和js文件，還有jQuery。注意jQuery得在js文件之前引入。
然后復(fù)制它的script代碼，再?gòu)?fù)制它的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>

上面只是默認(rèn)的效果，還可以設(shè)置參數(shù)，只需要修改script，在里面加上參數(shù)：

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

更多的參數(shù)設(shè)置就去網(wǎng)上查吧。

補(bǔ)充各種前端插件

這部分內(nèi)容是這個(gè)模塊的學(xué)習(xí)內(nèi)容學(xué)完之后，在之后的項(xiàng)目學(xué)習(xí)甚至是以后自己用過碰到過的全段插件，都補(bǔ)充到下面。

Bootstrap Wizard

文檔：http://vinceg.github.io/twitter-bootstrap-wizard/
是在講CRM項(xiàng)目的時(shí)候，提到過這個(gè)插件。可以做成向?qū)降模ň褪怯猩弦徊?、下一步的）表單提交?/p>

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手