標籤：javascript jQuery
JavaScript-補充jsRegex在使用之前，首先要建立Regex對象，建立對象有兩種方式：/pattern/attributes ：這個簡單，推薦用這個。而且不用寫引號new RegExp(pattern, attributes); ：和上面的效果一樣，這裡是通過參數把值傳入的，所以必須寫上引號。另外還要注意逸出字元。
參數 pattern 是一個字串，就是Regex。
參數 attributes 是一個可選的字串，包含屬性 "g"（全域匹配）、"i"（對大小寫不敏感） 和 "m"（多行匹配模式）。
分別用上面2中方法建立Regex對象，忽略可選的 attributes 參數，兩種方法建立出的結果完全一樣：
> reg1 = /^\d$/;< [regex] /^\d$/: > reg2 = new RegExp("^\\d$"); // 注意字串了的\要轉義< [regex] /^\d$/: 然後就是用Regex對象匹配我們的字串，這裡也學習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"]如果在Regex中使用()把運算式分組，那麼返回的數組會有第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"]自訂事件先執行
上節課講過 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 也是一般的情況，先執行自訂事件。
表單驗證結合上面的Regex來判斷進行驗證。然後結合上面的阻止事件發生，在驗證不通過的時候，中斷操作。
為什麼要進行表單驗證？可以減少伺服器收到的請求。通過用戶端上的驗證，攔截掉一部分不合規的請求。不過伺服器端不能完全依賴用戶端的驗證，因為用戶端可以禁用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就可以隱藏掉了。
樣式優先順序2css樣式的優先順序，已經學習過了，一般都是後載入的生效。另外還可以在樣式後面加上 !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範圍。
去Demo裡找你需要的樣式，直接把它的源碼複製過來就可以使用了。樣式上側重於後台管理的情境。
不過頁面裡引用的 css 和 js 檔案的串連還要改一下。去Download裡把EasyUI下載下來，存放到本地。再把頁面中的地址修改成本地檔案的地址。
優點：功能齊全。
缺點：學習代價大，不太容易修改。因為，js代碼中可能會修改html標籤，即你寫的html和你頁面最終顯示的html會不太一樣，被js修改過了。還有，存在很多Ajax操作，這個還沒學，等學習了Ajax之後再來考慮使用這個。
使用起來和上面的EasyUI差不多。先下載下來，看中的樣式你的自己找到源碼複製下來使用。樣式同樣是側重於後台管理的情境。
優點：沒啥優點，各方面看和EasyUI都差不多。相對簡單一下，目前的水平尚能掌握，這個可以先用著。
缺點：功能沒有上面的EasyUI齊全。而且只是js豐富一些，基本沒有css，做的很樸素。
上面2個基本都是針對後台管理頁面的情境，這個組件對於其他情境的樣式也同樣有支援（大概是全部情境），比如你的Web主站。另外，這裡面用有很多響應式布局，包括它自己的頁面裡也是，知道一下。
優點：應用情境更多。
缺點：沒說。總之現在都用它
上面提供的都是各種組件，我們還得自己組合。那麼來試試看模板。
模板可以網上找免費的，當然好的模板也有收費的。
課上示範了 nifty-v2.2.2 這個模板。先去 template 檔案夾裡找你需要的樣本，都是完整的一個頁面。先基於一個模板把頁面畫出來，然後按照實際的需求改成自己需要的。
這裡再介紹一個組件：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前端補充內容
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
