第九章.表单验证的高级特效.pptx

《第九章.表单验证的高级特效.pptx》由会员分享，可在线阅读，更多相关《第九章.表单验证的高级特效.pptx（23页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第九章第九章表表单验证单验证的高级特效的高级特效回顾用图片代替提交按钮，应如何实现表单验证？简述制作回车Tab切换特效的大致步骤。简述制作即时提示错误特效的大致步骤。实现内容动态改变有哪两种方法？本章案例制作通用的省市制作通用的省市级联效果效果演示示例1：页面效果学习目标会使用下拉列表框控件实现省市级联功能会使用数组优化省市级联功能一、实现简单的省市级联功能如何实现省市级联的效果？页面效果1、利用省份下拉框的选项改变事件onChange2、根据用户选择的省份，动态添加城市下拉框的值onChange选项/内容改变事件动态添加城市选项Option省份下拉框名称selProvince表单名称myfo

2、rm省份下拉框选项option城市下拉框名称selCity演示实现步骤：2、查看生成的HTML代码.-请选择开户帐号的省份-四川省 山东省 湖北省 .-请选择开户帐号的城市-.多个选项构成选项数组options选项Option城市下拉框暂时没有具体的城市选项演示实现步骤：3、添加动态改变城市选项的changeCity()函数function changeCity()var province=document.myform.selProvince.value;var newOption1,newOption2;switch(province)case 四川省:newOption1=new Opt

3、ion(成都市,chengdu);newOption2=new Option(泸州市,luzhou);break;case 湖北省:document.myform.selCity.options.length=0;document.myform.selCity.options.add(newOption1);document.myform.selCity.options.add(newOption2);2、根据用户选择的省份，动态创建城市下拉框选项1、获取用户选择的省份3、清除原有的选项4、将选项添加到选项数组options查看源代码演示实现步骤：4、选择下拉框的onChange事件，调用事件

4、函数 -请选择开户帐号的省份-四川省 山东省 湖北省当用户选择不同的省份时，将调用函数，改变城市下拉框的选项查看源代码小结下拉框控件SELECT：常用属性lengthvalueoptionsselectedIndex常用事件onChangeonBluronFocus选项数组1、每个选项Option可以动态创建new Option(”显示内容”，“值”)2、动态添加选项selCity.options.add(newOption1）3、清除选项selCity.options.length=0读取或设置被选项的索引号，第一个为0，其他类推选项改变事件小结1实现学期、课程的级联学期第一学期第二学期第二

5、学年 各学期对应课程第一学期：HTML、Java第二学期：Sqlserver、.Net第二学年：Struts、Ajax练习答案每个省实际上有很多城市、并且城市数量不等，有没有更简单、通用的办法？var newOption1,newOption2;switch(province)case 四川省:newOption1=new Option(成都市,chengdu);newOption2=new Option(泸州市,luzhou);break;case 湖北省:newOption1=new Option(武汉市,wuhan);newOption2=new Option(襄樊市,xiangfan)

6、;break;case 山东省:newOption1=new Option(青岛市,qingdao);newOption2=new Option(烟台市,yantai);如果有很多城市，就需要定义很多变量，编写很多重复的代码解决办法：使用数组！使用数组优化省市级联功能JavaScript中的数组用法：var emp=new Array(3);emp0=Ryan Dias;emp1=Graham Browne;emp2=David Greene;emp.sort();document.write(排序结果是：);for(var i in emp)document.write(empi+);1、创

7、建数组对象new Array(大小)2、为数组赋值。数组中可存放任意数据 3、调用数组的方法sort()进行排序 4、循环输出，等同：for(var i=0;iemp.length;i+)查看源代码使用数组优化省市级联功能JavaScript中的数组用法：var cityList=new Array();cityList0=成都,绵阳,德阳,自贡,泸州;cityList1=济南,青岛,威海,日照;cityList2=武汉,宜昌,恩施,潜江;document.write(四川省包括的城市是：);for(var j in cityList0)document.write(cityList0j+);

8、1、创建数组，可以不指定大小 2、为数组赋值。每个单元格可以是数组。JavaScript不支持二维数组 3、循环输出.0-表示四川省的索引号，同理可以换为山东省索引号1查看源代码使用数组优化省市级联功能用数组优化解决省市级联问题：012一维数组:cityList数组索引号1下拉框索引号selectedIndex01231、用数组存放每个省份包含的城市 2、根据用户选择的省份索引号，找到对应的数组索引号3、根据对应的数组内容，添加城市选项到城市下拉框中cityList0cityList1cityList2使用数组优化省市级联功能用数组优化解决省市级联问题：function changeCity(

9、)var cityList=new Array();cityList0=成都,绵阳,德阳,自贡,泸州;cityList1=济南,青岛,日照;cityList2=武汉,宜昌,潜江;var pIndex=document.myform.selProvince.selectedIndex-1;var newOption1;document.myform.selCity.options.length=0;for(var j in cityListpIndex)newOption1=new Option(cityListpIndexj,cityListpIndexj);document.myform.s

10、elCity.options.add(newOption1);1、创建数组，存放各省份对应城市 2、根据用户选择的省份索引号，获取对应数组索引号 4、根据数组内容创建选项，并添加到城市下拉框3、清空原下拉框内容 查看源代码小结2用数组优化学期、选修课程的级联。各学期对应课程第一学期：HTML、Java、SqlServer基础、C#第二学期：JavaScript、SqlServer高级、.Net、JSP第二学年：Struts、ASP.NET、Ajax、Spring、Hibernate练习答案使用文字下标的数组再次优化使用索引号必须要求省份的排列顺序和数组编号相同。cityList0=成都,.泸州

11、;cityList1=济南,日照;cityList2=武汉,潜江;cityList3=合肥,亳州;cityList4=东莞,珠海;cityList5=桂林,贺州;cityList6=贵阳,遵义;四川省 山东省 湖北省 安徽省 广东省 广西省 贵州省 当30多个省份罗列在一起时容易搞错对应关系，有没有更直观的办法?使用文字下标的数组再次优化1、JavaScript中的数组下标可以采用标识符代替。例如：cityList山东省=济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照;2、可以根据用户选择的value值，与数组下标标识 进行比较，从而找出该省包括的城市。用文字下标的数组优化省

12、市级联菜单：使用文字下标的数组再次优化使用文字下标的数组再次优化function changeCity()var cityList=new Array();cityList四川省=成都,绵阳,泸州;cityList山东省=济南,青岛,日照;cityList湖北省=武汉,宜昌,潜江;var pIndex=document.myform.selProvince.value;var newOption1;document.myform.selCity.options.length=0;for(var j in cityListpIndex)newOption1=new Option(cityList

13、pIndexj,cityListpIndexj);document.myform.selCity.options.add(newOption1);数组下标采用文字标识符代替根据省份下拉框的值，获取对应数组的索引标识数组的读取和数字索引方式相同查看源代码常见错误var Bookinfo=new Array(2)(4);Bookinfo00=“6-5333-0575-3”;Bookinfo01=“Ajax高级编程”Bookinfo02=“铁手”Bookinfo03=“人民邮电出版社”Bookinfo10=“6-5333-0575-8”;Bookinfo21=“精通正则表达式”Bookinfo32=“余晟”Bookinfo43=“电子工业出版社”JavaScript中没有二维或二维以上数组小结3数组下标采用文字标识的方式，实现学期、课程的级联。各学期对应课程第一学期：HTML、Java、SqlServer基础、C#第二学期：JavaScript、SqlServer高级、.Net、JSP第二学年：Struts、ASP.NET、Ajax、Spring、Hibernate练习答案总结省市级联特效的实现思路是什么？下拉框常用的属性和事件有哪些？使用数组实现省市级联的思路是什么？在JavaScript中使用数组应注意哪些问题？