TP11綜合案例1javascript操作CSS樣式特效

1、綜合案例綜合案例1 javascript操作操作CSS樣樣式特效式特效制作改變按鈕背景圖片的特效制作改變按鈕背景圖片的特效-1如何實現(xiàn)如下圖所示如何實現(xiàn)如下圖所示 ，按鈕的圖片背景效，按鈕的圖片背景效果？果？鼠標移入按鼠標移入按鈕文字變色鈕文字變色動態(tài)調(diào)用樣式動態(tài)調(diào)用樣式Js 操作樣式的常用方式：操作樣式的常用方式：元素對象元素對象.style.樣式屬性樣式屬性=“值值”層的顯示層的顯示/隱藏特效隱藏特效-1顯示屬性顯示屬性display參數(shù)值描述block默認值。按塊顯示，換行顯示.用該值為對象之后添加新行none不顯示 ，隱藏對象。與visibility屬性的hidden值不同，其不為被隱

2、藏對象保留其物理空間。inline按行顯示，和其他元素同一行顯示。顯示屬性顯示屬性display適用于所有適用于所有HTML標簽，常用于層標簽，常用于層DIV、圖片圖片Img的顯示和隱藏的顯示和隱藏層的顯示層的顯示/隱藏特效隱藏特效-2如何實現(xiàn)如下圖所示的頁面上廣告層的效果？如何實現(xiàn)如下圖所示的頁面上廣告層的效果？顯示廣顯示廣告層告層隱藏廣隱藏廣告層告層練習練習編寫如下圖所示，圖片的顯示隱藏編寫如下圖所示，圖片的顯示隱藏特效特效練習答案練習答案綜合案例綜合案例2 廣告和圖片輪播廣告和圖片輪播綜合案例綜合案例3 省市級聯(lián)功能省市級聯(lián)功能 實現(xiàn)簡單的省市級聯(lián)功能實現(xiàn)簡單的省市級聯(lián)功能如何實現(xiàn)省市級

3、聯(lián)的效果？如何實現(xiàn)省市級聯(lián)的效果？頁面效果頁面效果1、利用省份下拉框的選項改變事件、利用省份下拉框的選項改變事件onChange2、根據(jù)用戶選擇的省份，動態(tài)添加城市下拉框的值、根據(jù)用戶選擇的省份，動態(tài)添加城市下拉框的值onChange選項選項/內(nèi)容改變事件內(nèi)容改變事件動態(tài)添加動態(tài)添加城市選項城市選項Option實現(xiàn)簡單的省市級聯(lián)功能實現(xiàn)簡單的省市級聯(lián)功能常用屬性常用屬性lengthvalueoptionsselectedIndex常用事件常用事件onChangeonBluronFocus選項數(shù)組選項數(shù)組1、每個選項、每個選項Option可以動態(tài)創(chuàng)建可以動態(tài)創(chuàng)建new Option(”顯示內(nèi)容顯

4、示內(nèi)容”，“值值”)2、動態(tài)添加選項、動態(tài)添加選項selCity.options.add(newOption1）或者或者selCity.optionsi=newOption1;3、清除選項、清除選項selCity.options.length=0讀取或設(shè)置被選項的索引號，讀取或設(shè)置被選項的索引號，第一個為第一個為0，其他類推，其他類推選項改變事件選項改變事件使用數(shù)組優(yōu)化省市級聯(lián)功能使用數(shù)組優(yōu)化省市級聯(lián)功能用數(shù)組解決省市級聯(lián)問題：用數(shù)組解決省市級聯(lián)問題： 012一維數(shù)組一維數(shù)組: cityList數(shù)組索引號數(shù)組索引號1下拉框索引號下拉框索引號selectedIndex01231、用數(shù)組存放每個、

5、用數(shù)組存放每個省份包含的城市省份包含的城市 2、根據(jù)用戶選擇的省份索引號，、根據(jù)用戶選擇的省份索引號，找到對應(yīng)的數(shù)組索引號找到對應(yīng)的數(shù)組索引號3、根據(jù)對應(yīng)的數(shù)組內(nèi)、根據(jù)對應(yīng)的數(shù)組內(nèi)容，添加城市選項到容，添加城市選項到城市下拉框中城市下拉框中cityList0cityList1cityList2練習練習用數(shù)組優(yōu)化學期、選修課程的級聯(lián)。用數(shù)組優(yōu)化學期、選修課程的級聯(lián)。各學期對應(yīng)課程各學期對應(yīng)課程第一學期：第一學期：HTML、SqlServer基礎(chǔ)、基礎(chǔ)、C#第二學期：第二學期：JavaScript、SqlServer高級、高級、.Net第二學年：第二學年：ASP.NET、Ajax練習答案練習答案綜

6、合案例綜合案例4 Web前端的表單驗證技術(shù)前端的表單驗證技術(shù)為什么要表單驗證為什么要表單驗證減輕服務(wù)器的壓力減輕服務(wù)器的壓力保證輸入的數(shù)據(jù)符合要求保證輸入的數(shù)據(jù)符合要求15/38常用的表單驗證常用的表單驗證日期格式日期格式表單元素是否為空表單元素是否為空用戶名和密碼用戶名和密碼E-mail地址地址身份證號碼身份證號碼16/38實現(xiàn)驗證的思路實現(xiàn)驗證的思路 當輸入的表單數(shù)據(jù)不符合要求時，如何編寫當輸入的表單數(shù)據(jù)不符合要求時，如何編寫腳本來進行提示？腳本來進行提示？1.1. 獲得表單元素值獲得表單元素值2.2. 使用使用JavaScriptJavaScript的一些方法對數(shù)據(jù)進行判斷的一些方法對數(shù)

7、據(jù)進行判斷3.3. 當表單當表單提交提交時時，觸發(fā)觸發(fā)事件事件，對獲取的數(shù)據(jù)進，對獲取的數(shù)據(jù)進行驗證行驗證問題問題分析分析17/38字符串驗證字符串驗證3-1非空驗證非空驗證if (mail = ) alert(Email不能為空); return false;檢測檢測Email是否為空是否為空長度長度驗證驗證if(pwd.length6) alert(密碼必須等于或大于6個字符); return false;length屬性可以獲取字符串長度屬性可以獲取字符串長度18/38字符串驗證字符串驗證3-2字符串查找字符串查找indexOf()：查找某個指定的字符串值在字符串中查找某個指定的字符串值

8、在字符串中首次出現(xiàn)的位置首次出現(xiàn)的位置var str=this is JavaScript;var selectFirst=str.indexOf(Java);var selectSecond=str.indexOf(Java,12);返回返回8if (mail.indexOf() = -1) alert(Email格式不正確n必須包含); return false;返回返回-1判斷是否包含判斷是否包含演示演示示例示例1：驗證休閑網(wǎng)登錄頁面：驗證休閑網(wǎng)登錄頁面19/38字符串驗證字符串驗證3-3判斷字符串是否有數(shù)字判斷字符串是否有數(shù)字使用使用for循環(huán)和循環(huán)和substring()方法依次截斷

9、單個字符方法依次截斷單個字符，再判斷每個字符是否是數(shù)字，再判斷每個字符是否是數(shù)字for (var i = 0; i user.length; i+) var j = user.substring(i, i + 1); if (isNaN(j) = false) alert(姓名中不能包含數(shù)字); return false; 截取單個字符截取單個字符演示演示示例示例2：驗證休閑網(wǎng)注冊頁面：驗證休閑網(wǎng)注冊頁面20/38學員操作學員操作驗證注冊頁面中的電子郵箱驗證注冊頁面中的電子郵箱需求說明需求說明電子郵箱不能為空電子郵箱不能為空電子郵箱中必須包含符號電子郵箱中必須包含符號“”和和“.”練習練習完成

10、時間完成時間：20分鐘分鐘21/38共性問題集中講解共性問題集中講解常見問題及解決辦法常見問題及解決辦法代碼規(guī)范問題代碼規(guī)范問題調(diào)試技巧調(diào)試技巧22/38表單驗證事件表單驗證事件表單驗證需要綜合運用元素的事件表單驗證需要綜合運用元素的事件類別類別名稱名稱描述描述事件事件onblur失去焦點，當光標離開某個文本框時觸發(fā)失去焦點，當光標離開某個文本框時觸發(fā)onfocus獲得焦點，當光標進入某個文本框時觸發(fā)獲得焦點，當光標進入某個文本框時觸發(fā)演示演示示例示例3：動態(tài)改變文本框效果：動態(tài)改變文本框效果23/38文本輸入提示特效文本輸入提示特效實現(xiàn)思路實現(xiàn)思路把錯誤信息顯示在把錯誤信息顯示在div中，使

11、用中，使用javascript的的innerHtml()方法，設(shè)置方法，設(shè)置和和之間的內(nèi)容之間的內(nèi)容編寫腳本驗證函數(shù)編寫腳本驗證函數(shù)鼠標失去焦點時（鼠標失去焦點時（blur事件）調(diào)用驗證函數(shù)事件）調(diào)用驗證函數(shù)演示演示示例示例4：制作文本輸入提示特效：制作文本輸入提示特效24/38學員操作學員操作驗證貴美網(wǎng)站的注冊頁面驗證貴美網(wǎng)站的注冊頁面需求說明需求說明名字和姓氏均不能為空，并且不能有數(shù)字名字和姓氏均不能為空，并且不能有數(shù)字密碼不能少于密碼不能少于6位，兩次輸入的密碼必須相同位，兩次輸入的密碼必須相同電子郵箱不能為空，并且必須包含符號電子郵箱不能為空，并且必須包含符號“”和和“.”練習練習完成

12、時間完成時間：30分鐘分鐘25/38共性問題集中講解共性問題集中講解常見問題及解決辦法常見問題及解決辦法代碼規(guī)范問題代碼規(guī)范問題調(diào)試技巧調(diào)試技巧26/38正則表達式正則表達式為什么需要正則表達式為什么需要正則表達式簡潔的代碼簡潔的代碼嚴謹?shù)尿炞C文本框中的內(nèi)容嚴謹?shù)尿炞C文本框中的內(nèi)容var reg= /w+w+(.a-zA-Z2,3)1,2$/;if(reg.test(email) =false) document.getElementById(“email”).innerHtml= 電子郵件格式不正確,請重新輸入; return false;一個簡單的表達式即可驗證郵箱一個簡單的表達式即可驗證

13、郵箱27/38定義正則表達式定義正則表達式普通方式普通方式var reg=/表達式表達式/附加參數(shù)附加參數(shù)var reg=/white/; /表示表達式中含有指定的內(nèi)容則返回結(jié)果為true 匹配一次 var reg=/white/g; / (全文查找出現(xiàn)的所有匹配字符) 至少一次構(gòu)造函數(shù)構(gòu)造函數(shù)var reg=new RegExp(表達式表達式,附加參數(shù)附加參數(shù))var reg=new RegExp(white);var reg=new RegExp(white,g);28/38語法語法表達式的模式表達式的模式簡單模式簡單模式只能表示具體的匹配只能表示具體的匹配var reg=/china/;

14、var reg=/abc8/;復(fù)合模式復(fù)合模式可以使用通配符表達更為抽象的規(guī)則模式可以使用通配符表達更為抽象的規(guī)則模式var reg=/w+$/;var reg=/w+w+.a-zA-Z2,3(.a-zA-Z2,3)?$/;29/38RegExp對象對象RegExp對象的方法對象的方法方法方法描述描述test檢索字符串中指定的值，返回檢索字符串中指定的值，返回true或或false30/38正則表達式符號正則表達式符號2-1符號符號描述描述/代表一個模式的開始和結(jié)束代表一個模式的開始和結(jié)束匹配字符串的開始匹配字符串的開始$匹配字符串的結(jié)束匹配字符串的結(jié)束s任何空白字符任何空白字符S任何非空白字

15、符任何非空白字符d匹配一個數(shù)字字符，等價于匹配一個數(shù)字字符，等價于0-9D除了數(shù)字之外的任何字符，等價于除了數(shù)字之外的任何字符，等價于0-9w匹配一個數(shù)字、下劃線或字母字符，等價于匹配一個數(shù)字、下劃線或字母字符，等價于A-Za-z0-9_ W任何非單字字符，等價于任何非單字字符，等價于a-zA-z0-9_.除了換行符之外的任意字符除了換行符之外的任意字符31/38var reg=/w+$/;var reg=/w+w+.a-zA-Z2,3(.a-zA-Z2,3)?$/;正則表達式符號正則表達式符號2-2符號符號描述描述n匹配前一項匹配前一項n次次n,匹配前一項匹配前一項n次，或者多次次，或者多次

16、n,m匹配前一項至少匹配前一項至少n次，但是不能超過次，但是不能超過m次次*匹配前一項匹配前一項0次或多次，等價于次或多次，等價于0,+匹配前一項匹配前一項1次或多次，等價于次或多次，等價于1,？匹配前一項匹配前一項0次或次或1次，也就是說前一項是可選的，等價次，也就是說前一項是可選的，等價于于0,132/38var reg=/w+$/;var reg=/w+w+.a-zA-Z2,3(.a-zA-Z2,3)?$/;正則表達式的應(yīng)用正則表達式的應(yīng)用用戶名、密碼、電子郵箱、手機號碼、身份用戶名、密碼、電子郵箱、手機號碼、身份證號碼、生日、郵政編碼、固定電話證號碼、生日、郵政編碼、固定電話33/38

17、驗證郵政編碼和手機號碼驗證郵政編碼和手機號碼驗證郵政編碼和手機號碼驗證郵政編碼和手機號碼中國的郵政編碼都是中國的郵政編碼都是6 6位位手機號碼都是手機號碼都是1111位，并且第位，并且第1 1位都是位都是1 1var regCode=/d6$/;var regMobile=/1d10$/;演示演示示例示例5：驗證郵編和手機號碼：驗證郵編和手機號碼34/38驗證年齡驗證年齡對年齡進行驗證，年齡必須在對年齡進行驗證，年齡必須在0120之間之間10-99這個范圍都是兩位數(shù)，十位是這個范圍都是兩位數(shù)，十位是1-9，個位是，個位是0-9，正則表達式為，正則表達式為1-9d0-9這個范圍是一位，正則表達式

18、為這個范圍是一位，正則表達式為d100-119這個范圍是三位數(shù)，百位是這個范圍是三位數(shù)，百位是1，十位是，十位是0-1，個位是，個位是0-9，正則表達式為，正則表達式為10-1d所有年齡的個位都是所有年齡的個位都是0-9，當百位是，當百位是1時十位是時十位是0-1，當年齡為兩位數(shù)時十位是，當年齡為兩位數(shù)時十位是1-9，因此，因此0-119這個這個范圍的正則表達式為范圍的正則表達式為(10-1|1-9)?d年齡年齡120是單獨的一種情況，需要單獨列出來是單獨的一種情況，需要單獨列出來演示演示示例示例6：驗證年齡：驗證年齡35/38學員操作學員操作使用正則表達式驗證用戶注冊頁面使用正則表達式驗證用戶注冊頁面需求說明需求說明用戶名只能由英文字母和數(shù)字組成，長度為用戶名只能由英文字母和數(shù)字組成，長度為416個字符，并個字符，并且以英文字母開頭且以英文字母開頭密碼只能由英文字母和數(shù)字組成，長度為密碼只能由英文字母和數(shù)字組成，長度為410個字符個字符生日的年份在生日的年份在19002009之間，生日格式為之間，生日格式為1980-5-12或或1988-05-04的形式的形式練習