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

綜合案例1javascript操作CSS樣式特效制作改變按鈕背景圖片的特效-1如何實(shí)現(xiàn)如下圖所示，按鈕的圖片背景效果？鼠標(biāo)移入按鈕文字變色動(dòng)態(tài)調(diào)用樣式Js操作樣式的常用方式：元素對(duì)象.style.樣式屬性=“值”層的顯示/隱藏特效-1顯示屬性display參數(shù)值描述block默認(rèn)值。按塊顯示，換行顯示.用該值為對(duì)象之后添加新行none不顯示，隱藏對(duì)象。與visibility屬性的hidden值不同，其不為被隱藏對(duì)象保留其物理空間。inline按行顯示，和其他元素同一行顯示。顯示屬性display適用于所有HTML標(biāo)簽，常用于層DIV、圖片Img的顯示和隱藏層的顯示/隱藏特效-2如何實(shí)現(xiàn)如下圖所示的頁(yè)面上廣告層的效果？顯示廣告層隱藏廣告層練習(xí)編寫如下圖所示，圖片的顯示隱藏特效練習(xí)答案綜合案例2廣告和圖片輪播

綜合案例3省市級(jí)聯(lián)功能

實(shí)現(xiàn)簡(jiǎn)單的省市級(jí)聯(lián)功能如何實(shí)現(xiàn)省市級(jí)聯(lián)的效果？頁(yè)面效果1、利用省份下拉框的選項(xiàng)改變事件onChange2、根據(jù)用戶選擇的省份，動(dòng)態(tài)添加城市下拉框的值onChange選項(xiàng)/內(nèi)容改變事件動(dòng)態(tài)添加城市選項(xiàng)Option實(shí)現(xiàn)簡(jiǎn)單的省市級(jí)聯(lián)功能常用屬性lengthvalueoptionsselectedIndex常用事件onChangeonBluronFocus選項(xiàng)數(shù)組1、每個(gè)選項(xiàng)Option可以動(dòng)態(tài)創(chuàng)建newOption(”顯示內(nèi)容”，“值”)2、動(dòng)態(tài)添加選項(xiàng)selCity.options.add(newOption1）或者selCity.options[i]=newOption1;3、清除選項(xiàng)selCity.options.length=0讀取或設(shè)置被選項(xiàng)的索引號(hào)，第一個(gè)為0，其他類推選項(xiàng)改變事件使用數(shù)組優(yōu)化省市級(jí)聯(lián)功能用數(shù)組解決省市級(jí)聯(lián)問(wèn)題：012一維數(shù)組:cityList數(shù)組索引號(hào)1下拉框索引號(hào)selectedIndex01231、用數(shù)組存放每個(gè)省份包含的城市2、根據(jù)用戶選擇的省份索引號(hào)，找到對(duì)應(yīng)的數(shù)組索引號(hào)3、根據(jù)對(duì)應(yīng)的數(shù)組內(nèi)容，添加城市選項(xiàng)到城市下拉框中cityList[0]cityList[1]cityList[2]練習(xí)用數(shù)組優(yōu)化學(xué)期、選修課程的級(jí)聯(lián)。各學(xué)期對(duì)應(yīng)課程第一學(xué)期：HTML、SqlServer基礎(chǔ)、C#第二學(xué)期：JavaScript、SqlServer高級(jí)、.Net第二學(xué)年：ASP.NET、Ajax練習(xí)答案綜合案例4Web前端的表單驗(yàn)證技術(shù)為什么要表單驗(yàn)證減輕服務(wù)器的壓力保證輸入的數(shù)據(jù)符合要求15/38常用的表單驗(yàn)證日期格式表單元素是否為空用戶名和密碼E-mail地址身份證號(hào)碼16/38實(shí)現(xiàn)驗(yàn)證的思路當(dāng)輸入的表單數(shù)據(jù)不符合要求時(shí)，如何編寫腳本來(lái)進(jìn)行提示？獲得表單元素值使用JavaScript的一些方法對(duì)數(shù)據(jù)進(jìn)行判斷當(dāng)表單提交時(shí)，觸發(fā)事件，對(duì)獲取的數(shù)據(jù)進(jìn)行驗(yàn)證問(wèn)題分析17/38字符串驗(yàn)證3-1非空驗(yàn)證if(mail==""){alert("Email不能為空");returnfalse;}檢測(cè)Email是否為空長(zhǎng)度驗(yàn)證if(pwd.length<6){alert("密碼必須等于或大于6個(gè)字符");returnfalse;}length屬性可以獲取字符串長(zhǎng)度18/38字符串驗(yàn)證3-2字符串查找indexOf()：查找某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置varstr="thisisJavaScript";varselectFirst=str.indexOf("Java");varselectSecond=str.indexOf("Java",12);返回8if(mail.indexOf("@")==-1){alert("Email格式不正確\n必須包含@");returnfalse;}返回-1判斷是否包含@演示示例1：驗(yàn)證休閑網(wǎng)登錄頁(yè)面19/38字符串驗(yàn)證3-3判斷字符串是否有數(shù)字使用for循環(huán)和substring()方法依次截?cái)鄦蝹€(gè)字符，再判斷每個(gè)字符是否是數(shù)字for(vari=0;i<user.length;i++){varj=user.substring(i,i+1);if(isNaN(j)==false){alert("姓名中不能包含數(shù)字");returnfalse;

}}截取單個(gè)字符演示示例2：驗(yàn)證休閑網(wǎng)注冊(cè)頁(yè)面20/38學(xué)員操作—驗(yàn)證注冊(cè)頁(yè)面中的電子郵箱需求說(shuō)明電子郵箱不能為空電子郵箱中必須包含符號(hào)“@”和“.”練習(xí)完成時(shí)間：20分鐘21/38共性問(wèn)題集中講解常見(jiàn)問(wèn)題及解決辦法代碼規(guī)范問(wèn)題調(diào)試技巧共性問(wèn)題集中講解22/38表單驗(yàn)證事件表單驗(yàn)證需要綜合運(yùn)用元素的事件類別名稱描述事件onblur失去焦點(diǎn)，當(dāng)光標(biāo)離開(kāi)某個(gè)文本框時(shí)觸發(fā)onfocus獲得焦點(diǎn)，當(dāng)光標(biāo)進(jìn)入某個(gè)文本框時(shí)觸發(fā)演示示例3：動(dòng)態(tài)改變文本框效果23/38文本輸入提示特效實(shí)現(xiàn)思路把錯(cuò)誤信息顯示在div中，使用javascript的innerHtml()方法，設(shè)置<div>和</div>之間的內(nèi)容編寫腳本驗(yàn)證函數(shù)鼠標(biāo)失去焦點(diǎn)時(shí)（blur事件）調(diào)用驗(yàn)證函數(shù)演示示例4：制作文本輸入提示特效24/38學(xué)員操作—驗(yàn)證貴美網(wǎng)站的注冊(cè)頁(yè)面需求說(shuō)明名字和姓氏均不能為空，并且不能有數(shù)字密碼不能少于6位，兩次輸入的密碼必須相同電子郵箱不能為空，并且必須包含符號(hào)“@”和“.”練習(xí)完成時(shí)間：30分鐘25/38共性問(wèn)題集中講解常見(jiàn)問(wèn)題及解決辦法代碼規(guī)范問(wèn)題調(diào)試技巧共性問(wèn)題集中講解26/38正則表達(dá)式為什么需要正則表達(dá)式簡(jiǎn)潔的代碼嚴(yán)謹(jǐn)?shù)尿?yàn)證文本框中的內(nèi)容varreg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;if(reg.test(email)==false){ document.getElementById(“email”).innerHtml="電子郵件格式不正確,請(qǐng)重新輸入";returnfalse;}一個(gè)簡(jiǎn)單的表達(dá)式即可驗(yàn)證郵箱27/38定義正則表達(dá)式普通方式varreg=/表達(dá)式/附加參數(shù)varreg=/white/;//表示表達(dá)式中含有指定的內(nèi)容則返回結(jié)果為true匹配一次

varreg=/white/g;//

(全文查找出現(xiàn)的所有匹配字符)至少一次構(gòu)造函數(shù)varreg=newRegExp("表達(dá)式","附加參數(shù)")varreg=newRegExp("white");varreg=newRegExp("white","g");28/38語(yǔ)法表達(dá)式的模式簡(jiǎn)單模式只能表示具體的匹配varreg=/china/;varreg=/abc8/;復(fù)合模式可以使用通配符表達(dá)更為抽象的規(guī)則模式varreg=/^\w+$/;varreg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;29/38RegExp對(duì)象RegExp對(duì)象的方法方法描述test檢索字符串中指定的值，返回true或false30/38正則表達(dá)式符號(hào)2-1符號(hào)描述/…/代表一個(gè)模式的開(kāi)始和結(jié)束^匹配字符串的開(kāi)始$匹配字符串的結(jié)束\s任何空白字符\S任何非空白字符\d匹配一個(gè)數(shù)字字符，等價(jià)于[0-9]\D除了數(shù)字之外的任何字符，等價(jià)于[^0-9]\w匹配一個(gè)數(shù)字、下劃線或字母字符，等價(jià)于[A-Za-z0-9_]\W任何非單字字符，等價(jià)于[^a-zA-z0-9_].除了換行符之外的任意字符31/38varreg=/^\w+$/;varreg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;正則表達(dá)式符號(hào)2-2符號(hào)描述{n}匹配前一項(xiàng)n次{n,}匹配前一項(xiàng)n次，或者多次{n,m}匹配前一項(xiàng)至少n次，但是不能超過(guò)m次*匹配前一項(xiàng)0次或多次，等價(jià)于{0,}+匹配前一項(xiàng)1次或多次，等價(jià)于{1,}？匹配前一項(xiàng)0次或1次，也就是說(shuō)前一項(xiàng)是可選的，等價(jià)于{0,1}32/38varreg=/^\w+$/;varreg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;正則表達(dá)式的應(yīng)用用戶名、密碼、電子郵箱、手機(jī)號(hào)碼、身份證號(hào)碼、生日、郵政編碼、固定電話33/38驗(yàn)證郵政編碼和手機(jī)號(hào)碼驗(yàn)證郵政編碼和手機(jī)號(hào)碼中國(guó)的郵政編碼都是6位手機(jī)號(hào)碼都是11位，并且第1位都是1varregCode=/^\d{6}$/;varregMobile=/^1\d{10}$/;演示示例5：驗(yàn)證郵編和手機(jī)號(hào)碼34/38驗(yàn)證年齡對(duì)年齡進(jìn)行驗(yàn)證，年齡必須在0－120之間10-99這個(gè)范圍都是兩位數(shù)，十位是1-9，個(gè)位是0-9，正則表達(dá)式為[1-9]\d0-9這個(gè)范圍是一位，正則表達(dá)式為\d100-119這個(gè)范圍是三位數(shù)，百位是1，十位是0-1，個(gè)位是0-9，正則表達(dá)式為1[0-1]\d所有年齡的個(gè)位都是0-9，當(dāng)百位是1時(shí)十位是0-1，當(dāng)年齡為兩位數(shù)時(shí)十位是1-9，因此0-119這個(gè)范圍的正則表達(dá)式為(1[0-1]|[1-9])?\d年齡120是單獨(dú)的一種情況，需要單獨(dú)列出來(lái)演示示例6：驗(yàn)證年齡35/38學(xué)員操作—使用正則表達(dá)式驗(yàn)證用戶注冊(cè)頁(yè)面需求說(shuō)明用戶名只能由英文字母和數(shù)字組成，長(zhǎng)度為4～16個(gè)字符，并且以英文字母開(kāi)頭密碼只能由英文字母和數(shù)字組成，長(zhǎng)度為4～10個(gè)字符生日的年份在1900～2009之間，生日格式為1980-5-12