Javascript經(jīng)典案例

1、1. String2. 3. 4. 目目 錄錄第二講 表單驗(yàn)證及事件String對(duì)象o常用的String對(duì)象n使用 var 語(yǔ)句 var newstr = 這是我的字符串n創(chuàng)建 String 對(duì)象 var newstr = new String(這是我的字符串“)n調(diào)用方法和屬性 字符串對(duì)象.屬性名 字符串對(duì)象.方法名( )String對(duì)象名 稱(chēng)說(shuō) 明屬性length獲取字符串字符的個(gè)數(shù)方法indexOf(“子字符串”，起始位置) 查找子字符串的位置charAt(index)獲取位于指定索引位置的字符substring(index1,index2 )截取兩個(gè)索引位置之間的字符串toLowerC

2、ase( )將字符串轉(zhuǎn)換成小寫(xiě) toUpperCase( )將字符串轉(zhuǎn)換成大寫(xiě) oString對(duì)象常用的屬性和方法語(yǔ)法：語(yǔ)法：indexOf(“查找的子字符串查找的子字符串”，查找的起始位置，查找的起始位置)返回子字符串所在的位置；如果沒(méi)找到，返回返回子字符串所在的位置；如果沒(méi)找到，返回 1例如：例如：var xvar y=“abcdefg”;x=y.indexOf(“c” , 0 ); /返回結(jié)果為返回結(jié)果為2，起始位置是，起始位置是0數(shù)值判斷函數(shù)o數(shù)值判斷函數(shù)數(shù)值判斷函數(shù)o功能：功能：判斷變量的值是否為數(shù)值，判斷變量的值是否為數(shù)值，“NaN”代表代表“Not a Number”，若返回值為

3、，若返回值為true，則表示自變量不是數(shù)值。，則表示自變量不是數(shù)值。o語(yǔ)法：語(yǔ)法：isNaN(測(cè)試值測(cè)試值)數(shù)學(xué)(Math)對(duì)象o數(shù)學(xué)(Math)對(duì)象o方法：o abs() 返回某數(shù)的絕對(duì)值o acos() 返回某數(shù)的反余弦值(以弧度為單位)o asin() 返回某數(shù)的反正弦值(以弧度為單位)o atan() 返回某數(shù)的反正切值(以弧度為單位)o ceil() 返回大于或等于指定數(shù)的最小整數(shù)o floor() 與ceil相反o max() 返回兩數(shù)間的較大值o min() 返回兩數(shù)間的較小值o pow() 返回m的n次方(其中,m為底,n為指數(shù))o random() 返回0和1之間的一個(gè)偽隨機(jī)

4、數(shù)o round() 返回某數(shù)四舍五入之后的整數(shù)日期時(shí)間(Date)對(duì)象o格式：格式：o 對(duì)象名對(duì)象名 = new Date ( 日期參數(shù)日期參數(shù) )o舉例：舉例：o today = new Date () /以當(dāng)日時(shí)間為以當(dāng)日時(shí)間為對(duì)象初值。對(duì)象初值。日期時(shí)間(Date)對(duì)象方法:o getYear()返回年份值返回年份值o getMonth() 返回月份值返回月份值o getDate() 并返回日期并返回日期o getDay() 返回星期幾返回星期幾o(hù) getHours() 返回小時(shí)數(shù)返回小時(shí)數(shù)o getMinutes() 返回分鐘數(shù)返回分鐘數(shù)o getSeconds() 返回秒數(shù)返回秒數(shù)

5、o getTime() 返回完整的時(shí)間返回完整的時(shí)間o setDate() 改變改變Date對(duì)象的日期對(duì)象的日期o setHours() 改變小時(shí)數(shù)改變小時(shí)數(shù)o setMinutes() 改變分鐘數(shù)改變分鐘數(shù)o setMonth() 改變?cè)路莞淖冊(cè)路輔 setSeconds() 改變秒數(shù)改變秒數(shù)o setTime() 改變完整的時(shí)間改變完整的時(shí)間o setYear() 改變年份改變年份o setTimeout 按照間隔時(shí)間按照間隔時(shí)間(毫秒毫秒)來(lái)調(diào)用函數(shù)來(lái)調(diào)用函數(shù)日期時(shí)間(Date)對(duì)象o 月份數(shù)為（月份數(shù)為（0-11）o 日期數(shù)為（日期數(shù)為（1-31）o 星期數(shù)為（星期數(shù)為（0-6）o 小

6、時(shí)數(shù)為（小時(shí)數(shù)為（0-23）o 分鐘數(shù)為（分鐘數(shù)為（0-59）o 秒數(shù)為秒數(shù)為 （0-59）o 毫秒數(shù)為（毫秒數(shù)為（0-999） Date對(duì)象做時(shí)鐘顯示function disptime( ) var now= new Date( ) ; var hour = now.getHours() ; if (hour=0 & hour =12) document.write(上午好上午好!) if (hour12 & hour= 18) document.write(下午好下午好!) ; if (hour18 & hour 24) document.write(晚上好晚上好!

7、) ; document.write(今天日期今天日期:+now.getYear()+年年+(now.getMonth( )+1)+月月+now.getDate()+日日) ; document.write(現(xiàn)在時(shí)間現(xiàn)在時(shí)間:+now.getHours()+點(diǎn)點(diǎn)+now.getMinutes( )+分分) ; 獲得當(dāng)前日期和時(shí)間獲得當(dāng)前日期和時(shí)間獲得小時(shí)，即當(dāng)前是幾點(diǎn)獲得小時(shí)，即當(dāng)前是幾點(diǎn)月份數(shù)字月份數(shù)字011，注意注意1判斷上午、下午還是晚上判斷上午、下午還是晚上Date對(duì)象做時(shí)鐘顯示上一頁(yè)上一頁(yè)P(yáng)PT示例中時(shí)鐘不能動(dòng)態(tài)改變，怎么辦？示例中時(shí)鐘不能動(dòng)態(tài)改變，怎么辦？由于時(shí)間在不停地走，所以應(yīng)

8、該每隔由于時(shí)間在不停地走，所以應(yīng)該每隔1秒調(diào)用顯示時(shí)間秒調(diào)用顯示時(shí)間的方法。如何解決？的方法。如何解決？使用使用setTimeout( )方法方法每隔每隔1秒調(diào)用顯示時(shí)間的方法秒調(diào)用顯示時(shí)間的方法osetTimeout的用法： setTimeout（“調(diào)用的函數(shù)”,”定時(shí)的時(shí)間”） 例：var myTimesetTimeout( “disptime( )”, 1000 ) ;每隔每隔1000毫秒執(zhí)行函毫秒執(zhí)行函數(shù)數(shù)disptime( )一次一次Date對(duì)象做時(shí)鐘顯示function disptime( ) var time = new Date( ); /獲得當(dāng)前時(shí)間獲得當(dāng)前時(shí)間 var ho

9、ur = time.getHours( ); /獲得小時(shí)、分鐘、秒獲得小時(shí)、分鐘、秒 var minute = time.getMinutes( ); var second = time.getSeconds( );document.myform.myclock.value =hour+:+minute+:+second+ ;var myTime = setTimeout(disptime(),1000); 當(dāng)前時(shí)間：當(dāng)前時(shí)間： 設(shè)置文本框的內(nèi)容設(shè)置文本框的內(nèi)容為當(dāng)前時(shí)間為當(dāng)前時(shí)間設(shè)置定時(shí)器每隔設(shè)置定時(shí)器每隔1秒秒(1000毫秒毫秒),調(diào)用函數(shù)調(diào)用函數(shù)disptime()執(zhí)行執(zhí)行小結(jié)2編寫(xiě)如左

10、圖所示，具有在網(wǎng)頁(yè)中指定位置顯示動(dòng)態(tài)時(shí)鐘效果的頁(yè)面。自動(dòng)動(dòng)態(tài)變自動(dòng)動(dòng)態(tài)變化的時(shí)鐘化的時(shí)鐘為什么需要表單驗(yàn)證服務(wù)器IE腳本在客戶(hù)端執(zhí)行，減輕服務(wù)器端的壓力腳本在客戶(hù)端執(zhí)行，減輕服務(wù)器端的壓力客戶(hù)端客戶(hù)端用戶(hù)輸入用戶(hù)輸入客戶(hù)端客戶(hù)端用戶(hù)輸入用戶(hù)輸入客戶(hù)端客戶(hù)端用戶(hù)輸入用戶(hù)輸入發(fā)送請(qǐng)求發(fā)送請(qǐng)求返回響應(yīng)返回響應(yīng)發(fā)送請(qǐng)求發(fā)送請(qǐng)求返回響應(yīng)返回響應(yīng)發(fā)送請(qǐng)求發(fā)送請(qǐng)求返回響應(yīng)返回響應(yīng)表單驗(yàn)證的內(nèi)容-1不能為空且不能為空且不能有數(shù)字不能有數(shù)字不能為空且不能為空且不能有數(shù)字不能有數(shù)字不能為空，且只不能為空，且只能包括字母、數(shù)能包括字母、數(shù)字和下劃線字符字和下劃線字符密碼不能為空并且最密碼不能為空并且最少為少為6位，

11、還要求兩位，還要求兩次輸入的密碼要一致次輸入的密碼要一致表單驗(yàn)證的內(nèi)容-2不能為空且包含不能為空且包含字符字符和和.只能二選一只能二選一年月日不能年月日不能為空，且不為空，且不能超出其要能超出其要求的范圍求的范圍表單驗(yàn)證的思路 如何編寫(xiě)腳本驗(yàn)證表單？1、獲取表單元素的值（、獲取表單元素的值（String類(lèi)型），然后進(jìn)行判斷類(lèi)型），然后進(jìn)行判斷2、觸發(fā)、觸發(fā)表單表單（FORM）的提交事件的提交事件（onSubmit）表單驗(yàn)證的思路檢查電子郵件檢查電子郵件email是否包含是否包含“”和和”.” function checkEmail( ) var strEmail=document.myform

12、.txtEmail.value; if (strEmail.length=0) alert(電子郵件不能為空電子郵件不能為空!); return false; if (strEmail.indexOf(,0)=-1) alert(電子郵件格式不正確電子郵件格式不正確n必須包含必須包含符號(hào)！符號(hào)！); return false; if (strEmail.indexOf(.,0)=-1) alert(電子郵件格式不正確電子郵件格式不正確n必須包含必須包含.符號(hào)！符號(hào)！); return false; return true; 返回結(jié)果返回結(jié)果-1表示表示沒(méi)找到?jīng)]找到“”字符字符獲取表單元素的值獲

13、取表單元素的值表單的提交事件表單的提交事件表單驗(yàn)證的思路表單驗(yàn)證的思路function checkUserName() /驗(yàn)證用戶(hù)名驗(yàn)證用戶(hù)名 var fname = document.myform.txtUser.value; if(fname.length != 0) for(i=0;ifname.length;i+) var ftext = fname.substring(i,i+1); if(ftext 0) alert(名字中包含數(shù)字名字中包含數(shù)字 n+請(qǐng)刪除名字中的數(shù)字和特殊字符請(qǐng)刪除名字中的數(shù)字和特殊字符); return false else alert(請(qǐng)輸入請(qǐng)輸入“名字名字

14、”文本框文本框); document.myform.txtUser.focus(); return false return true; 驗(yàn)證用戶(hù)名不驗(yàn)證用戶(hù)名不能包含數(shù)字能包含數(shù)字獲取表單元素的值獲取表單元素的值表單驗(yàn)證的思路 function passCheck() /驗(yàn)證密碼驗(yàn)證密碼var userpass = document.myform.txtPassword.value;if(userpass = )alert(未輸入密碼未輸入密碼 n + 請(qǐng)輸入密碼請(qǐng)輸入密碼);document.myform.txtPassword.focus();return false; if(userp

15、ass.length 6)alert(密碼必須多于或等于密碼必須多于或等于 6 個(gè)字符。個(gè)字符。n);return false; return true; 驗(yàn)證密碼不少于驗(yàn)證密碼不少于6位位獲取表單元素的值獲取表單元素的值表單驗(yàn)證的思路 function validateform() if(checkUserName()&passCheck( ) return true; else return false; 同時(shí)調(diào)用驗(yàn)證用戶(hù)同時(shí)調(diào)用驗(yàn)證用戶(hù)名和驗(yàn)證密碼方法名和驗(yàn)證密碼方法表單的提交事件表單的提交事件觸發(fā)表單提交事件觸發(fā)表單提交事件小結(jié) 1編寫(xiě)如下圖所示，實(shí)現(xiàn)登錄表單的驗(yàn)證功能文本框控

16、件如何實(shí)現(xiàn)如下圖所示，完善電子郵件的例子。用戶(hù)單擊時(shí)用戶(hù)單擊時(shí),郵郵箱的提示信息箱的提示信息自動(dòng)清除自動(dòng)清除提示電子郵提示電子郵件格式不對(duì)件格式不對(duì)輸入的信息輸入的信息自動(dòng)被選中自動(dòng)被選中并高亮顯示并高亮顯示文本框控件o文本框?qū)ο蟮某Ｓ脤傩?、方法、事件使用文本框?qū)ο蟮南嚓P(guān)方法，實(shí)現(xiàn)選中效果使用文本框?qū)ο蟮南嚓P(guān)方法，實(shí)現(xiàn)選中效果名 稱(chēng)說(shuō) 明屬性value設(shè)置或獲取文本框的值方法focus( )獲得焦點(diǎn)select( )選中文本內(nèi)容，突出顯示輸入?yún)^(qū)域事件onFocus光標(biāo)進(jìn)入某個(gè)文本框腳本運(yùn)行onBlur文本框失去焦點(diǎn)腳本運(yùn)行onKeyPress當(dāng)一個(gè)鍵按下并釋放時(shí)去觸發(fā)一個(gè)事件文本框控件 . f

17、unction clearText( ) if (document.myform.txtEmail.value=“請(qǐng)輸入真實(shí)的電子郵箱，我們將請(qǐng)輸入真實(shí)的電子郵箱，我們將 發(fā)送激活密碼發(fā)送激活密碼) document.myform.txtEmail.value= ; document.myform.txtEmail.style.color=red; *必填必填清空文本框的內(nèi)容清空文本框的內(nèi)容修改文本框的顏色修改文本框的顏色文本框獲得焦點(diǎn)就調(diào)文本框獲得焦點(diǎn)就調(diào)用方法用方法clearText( )小結(jié) 2編寫(xiě)如下圖所示，實(shí)現(xiàn)注冊(cè)表單的驗(yàn)證功能每個(gè)文本每個(gè)文本框非空框非空密碼和再次輸入密碼和再次輸入

18、的密碼必須相同的密碼必須相同年份必須年份必須是是20打頭打頭日期必須在日期必須在1到到31之間之間常見(jiàn)錯(cuò)誤-1function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else return false; 提交按鈕提交按鈕type=submit清空按鈕清空按鈕type=reset常見(jiàn)錯(cuò)誤-2function validateform( )if(sNameCheck() & passCheck()&bdaycheck() return true; else retu

19、rn false; onsubmit不是登不是登錄按鈕的事件錄按鈕的事件常見(jiàn)的事件事件事件動(dòng)作動(dòng)作事件事件動(dòng)作動(dòng)作Abort中止正在加載的對(duì)象Unload關(guān)閉當(dāng)前網(wǎng)頁(yè)Blur失去焦點(diǎn)MouseDown按下鼠標(biāo)左鍵Focus獲取焦點(diǎn)MouseMove移動(dòng)鼠標(biāo)指針Change改變對(duì)象的值MouseOut鼠標(biāo)指針離開(kāi)某對(duì)象Click在對(duì)象上單擊鼠標(biāo)MouseOver鼠標(biāo)指針懸停于某對(duì)象之上DblClick在對(duì)象上雙擊鼠標(biāo)MouseUp放開(kāi)鼠標(biāo)左鍵DrogDrop拖拽對(duì)象Move窗口被移動(dòng)時(shí)Error加載文件或圖形時(shí)發(fā)生錯(cuò)誤Resize窗口大小被改變KeyDown按下鍵盤(pán)上的任意鍵的瞬間Select選

20、擇某對(duì)象KeyPress按下鍵盤(pán)上的任意鍵時(shí)Submit單擊表單上的Submit按鈕KeyUp某鍵被按下后彈起來(lái)的瞬間Reset單擊表單上的Reset按鈕Load 瀏覽器讀入文件時(shí)如何使用圖片代替提交按鈕為了美觀，現(xiàn)把提交按鈕變成圖片，但仍然保持為了美觀，現(xiàn)把提交按鈕變成圖片，但仍然保持表單的驗(yàn)證功能？如何實(shí)現(xiàn)？表單的驗(yàn)證功能？如何實(shí)現(xiàn)？使用圖片的單擊事件。使用圖片的單擊事件。onClick=checkForm( )如何使用圖片代替提交按鈕根據(jù)上述分析和提供的素材頁(yè)面來(lái)實(shí)現(xiàn)表單驗(yàn)證。根據(jù)上述分析和提供的素材頁(yè)面來(lái)實(shí)現(xiàn)表單驗(yàn)證。素材頁(yè)面素材頁(yè)面 function checkForm( ) if

21、( document.myform.txtUserName.value.length=0) alert(用戶(hù)名不能為空！用戶(hù)名不能為空！); document.myform.txtUserName.focus( ); 檢驗(yàn)是否為空檢驗(yàn)是否為空單擊事件，調(diào)用單擊事件，調(diào)用表單驗(yàn)證函數(shù)表單驗(yàn)證函數(shù)如何使用圖片代替提交按鈕能進(jìn)行表單驗(yàn)證，但即使是正確填寫(xiě)了表單，也能進(jìn)行表單驗(yàn)證，但即使是正確填寫(xiě)了表單，也不能提交頁(yè)面（點(diǎn)擊不能提交頁(yè)面（點(diǎn)擊“注冊(cè)注冊(cè)”沒(méi)反映）。沒(méi)反映）。如何使用圖片代替提交按鈕因?yàn)閳D片不具備因?yàn)閳D片不具備“提交提交”按鈕的提交功能，所以需按鈕的提交功能，所以需要人工調(diào)用提交方法要人

22、工調(diào)用提交方法 submit( ) 。 function checkForm( ) if ( document.myform.txtUserName.value.length=0) alert(用戶(hù)名不能為空！用戶(hù)名不能為空！); document.myform.txtUserName.focus( );else document.myform.submit( ); 查看源代碼查看源代碼如果表單輸入合法，則提交表單如果表單輸入合法，則提交表單制作回車(chē)切換輸入的效果輸入完畢后回車(chē)，默認(rèn)會(huì)提交表單。輸入完畢后回車(chē)，默認(rèn)會(huì)提交表單。 頁(yè)面效果頁(yè)面效果如何制作回車(chē)如何制作回車(chē)Tab切換效果？切換效果？

23、 頁(yè)面效果頁(yè)面效果keyCode代碼代碼說(shuō)明代碼說(shuō)明8BackSpace34Next9Tab35End12Clear36Home13Enter37Left16Shift_L38Up17Control_L39Right18Alt_L40Down20Caps_Lock46Delete33Prior65a A48090z Z制作回車(chē)切換輸入的效果1、 使用鍵盤(pán)輸入事件使用鍵盤(pán)輸入事件onKeyDown事件事件 2、 檢查輸入是否是回車(chē)鍵檢查輸入是否是回車(chē)鍵ASCII碼碼13，若是則將，若是則將 輸入改為輸入改為T(mén)ab鍵鍵ASCII碼碼9 function changeFocus( ) if (eve

24、nt.keyCode=13) event.keyCode=9; 鍵盤(pán)按下，調(diào)用實(shí)鍵盤(pán)按下，調(diào)用實(shí)現(xiàn)現(xiàn)Tab效果的函數(shù)效果的函數(shù)修改回車(chē)鍵為修改回車(chē)鍵為T(mén)ab鍵鍵Event事件對(duì)象包含輸入鍵信息事件對(duì)象包含輸入鍵信息制作回車(chē)切換輸入的效果上述注冊(cè)頁(yè)面中，需要給每個(gè)文本框添加鍵盤(pán)按上述注冊(cè)頁(yè)面中，需要給每個(gè)文本框添加鍵盤(pán)按下事件，有沒(méi)有更簡(jiǎn)單的辦法？下事件，有沒(méi)有更簡(jiǎn)單的辦法？ okeyCode：得到在鍵盤(pán)上按下的鍵osrcElement： .type 得到標(biāo)簽類(lèi)型 .tagname 得到標(biāo)簽名稱(chēng)event對(duì)象制作回車(chē)切換輸入的效果通過(guò)給通過(guò)給document對(duì)象添加鍵盤(pán)事件。對(duì)象添加鍵盤(pán)事件。

25、function changeFocus( ) if (event.keyCode=13 & event.srcElement.type!=button & event.srcElement.type!=submit ) event.keyCode=9; /調(diào)用表單的調(diào)用表單的onKeyDown事件事件如果按鍵是回車(chē)鍵，并且控件如果按鍵是回車(chē)鍵，并且控件類(lèi)型不是提交、重置按鈕等按類(lèi)型不是提交、重置按鈕等按鈕，則變?yōu)殁o，則變?yōu)門(mén)ab切換切換document對(duì)象的對(duì)象的onKeyDown事件事件，它將接收，它將接收頁(yè)面中所有的鍵盤(pán)事件頁(yè)面中所有的鍵盤(pán)事件數(shù)組與級(jí)聯(lián)列表框預(yù)習(xí)檢查o什

26、么是省市級(jí)聯(lián)特效？o在JavaScript中，如何定義一維數(shù)組Array？o在JavaScript中，是否支持二維數(shù)組？本章任務(wù)演示示例演示示例1 1：頁(yè)面效果頁(yè)面效果演示示例演示示例2 2：頁(yè)面效果頁(yè)面效果 制作通用的省市級(jí)聯(lián)效果制作通用的省市級(jí)聯(lián)效果 制作學(xué)期、課程級(jí)聯(lián)效果制作學(xué)期、課程級(jí)聯(lián)效果o會(huì)使用下拉列表框控件實(shí)現(xiàn)省市級(jí)聯(lián)功能o會(huì)使用數(shù)組優(yōu)化省市級(jí)聯(lián)功能本章目標(biāo)下拉列表框o得到選擇項(xiàng)的索引（從0開(kāi)始） 表單名.列表名.selectedIndex;o清空列表項(xiàng) 表單名.列表名.options.length=0;o創(chuàng)建選項(xiàng) Option1= new Option(選項(xiàng)名,選項(xiàng)值);o增加

27、選項(xiàng) 表單名.列表名.options.add(Option1);實(shí)現(xiàn)簡(jiǎn)單的省市級(jí)聯(lián)功能如何實(shí)現(xiàn)省市級(jí)聯(lián)的效果？如何實(shí)現(xiàn)省市級(jí)聯(lián)的效果？頁(yè)面效果頁(yè)面效果1、利用省份下拉框的選項(xiàng)改變事件、利用省份下拉框的選項(xiàng)改變事件onChange2、根據(jù)用戶(hù)選擇的省份，動(dòng)態(tài)添加城市下拉框的值、根據(jù)用戶(hù)選擇的省份，動(dòng)態(tài)添加城市下拉框的值onChange選項(xiàng)選項(xiàng)/內(nèi)容改變事件內(nèi)容改變事件動(dòng)態(tài)添加動(dòng)態(tài)添加城市選項(xiàng)城市選項(xiàng)Option實(shí)現(xiàn)簡(jiǎn)單的省市級(jí)聯(lián)功能演示實(shí)現(xiàn)步驟：演示實(shí)現(xiàn)步驟： 1、添加省份、城市下拉框（、添加省份、城市下拉框（演示素材演示素材）省份下拉框名稱(chēng)省份下拉框名稱(chēng)selProvince表單名稱(chēng)表單名稱(chēng)m

28、yform省份下拉框選項(xiàng)省份下拉框選項(xiàng)option城市下拉框名稱(chēng)城市下拉框名稱(chēng)selCity實(shí)現(xiàn)簡(jiǎn)單的省市級(jí)聯(lián)功能演示實(shí)現(xiàn)步驟：演示實(shí)現(xiàn)步驟： 2、查看生成的、查看生成的HTML代碼代碼. -請(qǐng)選擇開(kāi)戶(hù)帳號(hào)的省份請(qǐng)選擇開(kāi)戶(hù)帳號(hào)的省份- 四川省四川省 山東省山東省 湖北省湖北省 . -請(qǐng)選擇開(kāi)戶(hù)帳號(hào)的城市請(qǐng)選擇開(kāi)戶(hù)帳號(hào)的城市- .多個(gè)選項(xiàng)構(gòu)成多個(gè)選項(xiàng)構(gòu)成選項(xiàng)數(shù)組選項(xiàng)數(shù)組options選項(xiàng)選項(xiàng)Option城市下拉框暫城市下拉框暫時(shí)沒(méi)有具體的時(shí)沒(méi)有具體的城市選項(xiàng)城市選項(xiàng)實(shí)現(xiàn)簡(jiǎn)單的省市級(jí)聯(lián)功能演示實(shí)現(xiàn)步驟：演示實(shí)現(xiàn)步驟： 3、添加動(dòng)態(tài)改變城市選項(xiàng)的、添加動(dòng)態(tài)改變城市選項(xiàng)的changeCity( )函數(shù)

29、函數(shù)function changeCity( ) var province=document.myform.selProvince.value; var newOption1,newOption2; switch(province) case 四川省四川省 : newOption1= new Option(成都市成都市,chengdu); newOption2= new Option(瀘州市瀘州市,luzhou); break; case 湖北省湖北省 : document.myform.selCity.options.length=0; document.myform.selCity.opt

30、ions.add(newOption1); document.myform.selCity.options.add(newOption2); 2、根據(jù)用戶(hù)選擇的省份，、根據(jù)用戶(hù)選擇的省份，動(dòng)態(tài)創(chuàng)建城市下拉框選項(xiàng)動(dòng)態(tài)創(chuàng)建城市下拉框選項(xiàng)1、獲取用戶(hù)選擇、獲取用戶(hù)選擇的省份的省份3、清除原有的選項(xiàng)、清除原有的選項(xiàng)4、將選項(xiàng)添加到選項(xiàng)數(shù)組、將選項(xiàng)添加到選項(xiàng)數(shù)組options查看源代碼查看源代碼實(shí)現(xiàn)簡(jiǎn)單的省市級(jí)聯(lián)功能演示實(shí)現(xiàn)步驟：演示實(shí)現(xiàn)步驟： 4、選擇下拉框的、選擇下拉框的onChange事件，調(diào)用事件函數(shù)事件，調(diào)用事件函數(shù) -請(qǐng)選擇開(kāi)戶(hù)帳號(hào)的省份請(qǐng)選擇開(kāi)戶(hù)帳號(hào)的省份- 四川省四川省 山東省山東省 湖

31、北省湖北省當(dāng)用戶(hù)選擇不同的省份當(dāng)用戶(hù)選擇不同的省份時(shí)，將調(diào)用函數(shù)，改變時(shí)，將調(diào)用函數(shù)，改變城市下拉框的選項(xiàng)城市下拉框的選項(xiàng)查看源代碼查看源代碼實(shí)現(xiàn)簡(jiǎn)單的省市級(jí)聯(lián)功能小結(jié)下拉框控件SELECT：o常用屬性nlengthnvaluenoptionsnselectedIndexo常用事件nonChangenonBlurnonFocus選項(xiàng)數(shù)組選項(xiàng)數(shù)組1、每個(gè)選項(xiàng)、每個(gè)選項(xiàng)Option可以動(dòng)態(tài)創(chuàng)建可以動(dòng)態(tài)創(chuàng)建new Option(”顯示內(nèi)容顯示內(nèi)容”，“值值”)2、動(dòng)態(tài)添加選項(xiàng)、動(dòng)態(tài)添加選項(xiàng)selCity.options.add(newOption1）3、清除選項(xiàng)、清除選項(xiàng)selCity.option

32、s.length=0讀取或設(shè)置被選項(xiàng)的索引號(hào)，讀取或設(shè)置被選項(xiàng)的索引號(hào)，第一個(gè)為第一個(gè)為0，其他類(lèi)推，其他類(lèi)推選項(xiàng)改變事件選項(xiàng)改變事件小結(jié)1實(shí)現(xiàn)學(xué)期、課程的級(jí)聯(lián)實(shí)現(xiàn)學(xué)期、課程的級(jí)聯(lián)學(xué)期學(xué)期第一學(xué)期第一學(xué)期第二學(xué)期第二學(xué)期第二學(xué)年第二學(xué)年 各學(xué)期對(duì)應(yīng)課程各學(xué)期對(duì)應(yīng)課程第一學(xué)期：第一學(xué)期：HTML、C#基礎(chǔ)基礎(chǔ)第二學(xué)期：第二學(xué)期：Sqlserver、Ado.Net第二學(xué)年：第二學(xué)年：A、XML數(shù)組對(duì)象o格式：對(duì)象名對(duì)象名 = new Array(元素個(gè)數(shù)元素個(gè)數(shù))o 或或 對(duì)象名對(duì)象名 = new Array(值值1,值值2,)o例如：fruit=new Array(2) 聲明了有聲明了有2個(gè)元素

33、的數(shù)組個(gè)元素的數(shù)組 fruit=new Array(“蘋(píng)果蘋(píng)果”,”橘子橘子”) 聲明了有聲明了有2 個(gè)數(shù)組元素的數(shù)組，并賦值。個(gè)數(shù)組元素的數(shù)組，并賦值。o屬性：index：數(shù)組元素的索引值：數(shù)組元素的索引值 length：數(shù)組長(zhǎng)度：數(shù)組長(zhǎng)度(數(shù)組元素個(gè)數(shù)數(shù)組元素個(gè)數(shù))。o方法：join()：將數(shù)組內(nèi)的所有值組合成一個(gè)字符串，：將數(shù)組內(nèi)的所有值組合成一個(gè)字符串， 并用特定符號(hào)分開(kāi)。并用特定符號(hào)分開(kāi)。 toString()：以字符串來(lái)表示數(shù)組和數(shù)組值。：以字符串來(lái)表示數(shù)組和數(shù)組值。 reverse()：將數(shù)組內(nèi)元素的索引次序翻轉(zhuǎn)過(guò)來(lái)：將數(shù)組內(nèi)元素的索引次序翻轉(zhuǎn)過(guò)來(lái)使用數(shù)組優(yōu)化省市級(jí)聯(lián)功能每個(gè)省實(shí)

34、際上有很多城市、并且城市數(shù)量不等，每個(gè)省實(shí)際上有很多城市、并且城市數(shù)量不等，有沒(méi)有更簡(jiǎn)單、通用的辦法？有沒(méi)有更簡(jiǎn)單、通用的辦法？var newOption1,newOption2; switch(province) case 四川省四川省 :newOption1= new Option(成都市成都市,chengdu);newOption2= new Option(瀘州市瀘州市,luzhou);break; case 湖北省湖北省 : newOption1= new Option(武漢市武漢市,wuhan);newOption2= new Option(襄樊市襄樊市,xiangfan);brea

35、k; case 山東省山東省 : newOption1= new Option(青島市青島市,qingdao);newOption2= new Option(煙臺(tái)市煙臺(tái)市,yantai); 如果有很多城市，就需要如果有很多城市，就需要定義很多變量，編寫(xiě)很多定義很多變量，編寫(xiě)很多重復(fù)的代碼重復(fù)的代碼解決辦法：解決辦法：使用數(shù)組！使用數(shù)組！使用數(shù)組優(yōu)化省市級(jí)聯(lián)功能JavaScript中的數(shù)組用法：中的數(shù)組用法： var emp = new Array(3);emp0 = Ryan Dias;emp1 = Graham Browne;emp2 = David Greene;emp.sort( );d

36、ocument.write(排序結(jié)果是：排序結(jié)果是：);for (var i in emp) document.write(empi+);1、創(chuàng)建數(shù)組對(duì)象、創(chuàng)建數(shù)組對(duì)象new Array(大小大小)2、為數(shù)組賦值。數(shù)組、為數(shù)組賦值。數(shù)組中可存放任意數(shù)據(jù)中可存放任意數(shù)據(jù) 3、調(diào)用數(shù)組的方法、調(diào)用數(shù)組的方法sort( )進(jìn)行排序進(jìn)行排序 4、循環(huán)輸出，等同：、循環(huán)輸出，等同：for(var i=0;iemp.length;i+)使用數(shù)組優(yōu)化省市級(jí)聯(lián)功能JavaScript中的數(shù)組用法：中的數(shù)組用法： var cityList = new Array( );cityList0=成都成都, 綿陽(yáng)綿陽(yáng),

37、 德陽(yáng)德陽(yáng), 自貢自貢, , 瀘州瀘州;cityList1=濟(jì)南濟(jì)南, 青島青島, 威海威海, 日照日照;cityList2 = 武漢武漢, 宜昌宜昌, 恩施恩施, 潛江潛江;document.write(四川省包括的城市是：四川省包括的城市是：); for (var j in cityList0) document.write(cityList0j +);1、創(chuàng)建數(shù)組，可、創(chuàng)建數(shù)組，可以不指定大小以不指定大小 2、為數(shù)組賦值。每、為數(shù)組賦值。每個(gè)單元格可以是數(shù)個(gè)單元格可以是數(shù)組。組。JavaScript不不支持二維數(shù)組支持二維數(shù)組 3、循環(huán)輸出、循環(huán)輸出.0-表示四川省的索引號(hào)，同理可表示四

38、川省的索引號(hào)，同理可以換為山東省索引號(hào)以換為山東省索引號(hào)1使用數(shù)組優(yōu)化省市級(jí)聯(lián)功能用數(shù)組優(yōu)化解決省市級(jí)聯(lián)問(wèn)題：用數(shù)組優(yōu)化解決省市級(jí)聯(lián)問(wèn)題： 012一維數(shù)組一維數(shù)組: cityList數(shù)組索引號(hào)數(shù)組索引號(hào)1下拉框索引號(hào)下拉框索引號(hào)selectedIndex01231、用數(shù)組存放每個(gè)用數(shù)組存放每個(gè)省省份份包含的城市包含的城市 2、根據(jù)用戶(hù)選擇根據(jù)用戶(hù)選擇的的省份索引號(hào)，省份索引號(hào)，找到對(duì)應(yīng)的找到對(duì)應(yīng)的數(shù)組索引號(hào)數(shù)組索引號(hào)3、根據(jù)對(duì)應(yīng)的數(shù)組內(nèi)、根據(jù)對(duì)應(yīng)的數(shù)組內(nèi)容，容，添加城市選項(xiàng)到添加城市選項(xiàng)到城市下拉框中城市下拉框中cityList0cityList1cityList2使用數(shù)組優(yōu)化省市級(jí)聯(lián)功能用數(shù)

39、組優(yōu)化解決省市級(jí)聯(lián)問(wèn)題：用數(shù)組優(yōu)化解決省市級(jí)聯(lián)問(wèn)題： function changeCity( ) var cityList = new Array( ); cityList0=成都成都, 綿陽(yáng)綿陽(yáng), 德陽(yáng)德陽(yáng), 自貢自貢, 瀘州瀘州; cityList1=濟(jì)南濟(jì)南, 青島青島, 日照日照; cityList2 = 武漢武漢, 宜昌宜昌, 潛江潛江; var pIndex=document.myform.selProvince.selectedIndex-1; var newOption1; document.myform.selCity.options.length=0; for (var

40、j in cityListpIndex) newOption1=new Option(cityListpIndexj, cityListpIndexj); document.myform.selCity.options.add(newOption1); 1、創(chuàng)建數(shù)組，存放各、創(chuàng)建數(shù)組，存放各省份對(duì)應(yīng)城市省份對(duì)應(yīng)城市 2、根據(jù)用戶(hù)選擇的省份索引號(hào)，、根據(jù)用戶(hù)選擇的省份索引號(hào)，獲取對(duì)應(yīng)數(shù)組索引號(hào)獲取對(duì)應(yīng)數(shù)組索引號(hào) 4、根據(jù)數(shù)組內(nèi)容創(chuàng)建選項(xiàng)，、根據(jù)數(shù)組內(nèi)容創(chuàng)建選項(xiàng)，并添加到城市下拉框并添加到城市下拉框3、清空原下拉框內(nèi)容、清空原下拉框內(nèi)容 小結(jié)2用數(shù)組優(yōu)化學(xué)期、選修課程的級(jí)聯(lián)。用數(shù)組優(yōu)化學(xué)期、選修課程的級(jí)聯(lián)。各學(xué)期對(duì)應(yīng)課程各學(xué)期對(duì)應(yīng)課程第一學(xué)期：第一學(xué)期：HTML、Java、SqlServer基礎(chǔ)、基礎(chǔ)、C#第二學(xué)期：第二學(xué)期：JavaScript、SqlServer高級(jí)、高級(jí)、ASP.Net第二學(xué)年：劉德華、李宇春、曾軼可第二學(xué)年：劉德華、李宇春、曾軼可使用文字下標(biāo)的數(shù)組再次優(yōu)化使用索引號(hào)必須要求省份的排列順序和數(shù)組編號(hào)相同。使用索引號(hào)必須要求省份的排列順序和數(shù)組編號(hào)相同。cityList0=成都成都, . 瀘州瀘州;cityList1=濟(jì)南濟(jì)南, 日照日照;cityList2=武漢武漢, 潛江潛江;cityList3=合肥合肥, 亳州亳州; ci