Python自動化開發學習18-Web前端補充內容
js正則表達式
在使用之前，首先要創建正則表達式對象，創建對象有兩種方式：/pattern/attributes ：這個簡單，推薦用這個。而且不用寫引號new RegExp(pattern, attributes); ：和上面的效果一樣，這裏是通過參數把值傳入的，所以必須寫上引號。另外還要註意轉義字符。
參數 pattern 是一個字符串，就是正則表達式。
參數 attributes 是一個可選的字符串，包含屬性 "g"（全局匹配）、"i"（對大小寫不敏感） 和 "m"（多行匹配模式）。
分別用上面2中方法創建正則表達式對象，忽略可選的 attributes 參數，兩種方法創建出的結果完全一樣：
> reg1 = /^\d$/;
< [regex] /^\d$/:
> reg2 = new RegExp("^\\d$"); // 註意字符串了的\要轉義
< [regex] /^\d$/: 然後就是用正則表達式對象匹配我們的字符串，這裏也學習2個方法：RegExpObject.test(string) ：檢索字符串是否匹配，返回布爾值（true 或 false）RegExpObject.exec(string) ：獲取匹配的結果，匹配不到則返回 null。返回一個數組，可以對返回的結果再次匹配。這個方法比較復雜，後面一步一步展開。
> 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 。然後可以繼續再次執行，又從頭開始。還是緊接上面的例子：
> 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），測試一下：
<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 也是一般的情況，先執行自定義事件。
表單驗證
結合上面的正則表達式來判斷進行驗證。然後結合上面的阻止事件發生，在驗證不通過的時候，中斷操作。
為什麽要進行表單驗證？可以減少服務器收到的請求。通過客戶端上的驗證，攔截掉一部分不合規的請求。不過服務器端不能完全依賴客戶端的驗證，因為客戶端可以禁用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，寫上條件。比如在寬度變化的時候來改變一下背景色：
<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>更多的參數設置就去網上查吧。
Python自動化開發學習18-Web前端補充內容