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

綜合案例3省市級聯功能

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

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

varreg=/white/g;//

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