溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在使用之前，首先要創建正則表達式對象，創建對象有兩種方式：/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"]自定義事件先執行
上節課講過 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就可以隱藏掉了。
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" ></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>更多的參數設置就去網上查吧。
這部分內容是這個模塊的學習內容學完之后，在之后的項目學習甚至是以后自己用過碰到過的全段插件，都補充到下面。
文檔：http://vinceg.github.io/twitter-bootstrap-wizard/
是在講CRM項目的時候，提到過這個插件。可以做成向導式的（就是有上一步、下一步的）表單提交。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
