1、第五章第五章 辅助特效与数组辅助特效与数组回顾回顾表单验证一般包括那些内容表单验证一般包括那些内容?表单验证的实现步骤。表单验证的实现步骤。文本框控件有哪些常用的属性、方法、事件？文本框控件有哪些常用的属性、方法、事件？本章任务本章任务演示示例演示示例1：回车切换输入的效果回车切换输入的效果演示示例演示示例2：即时提示错误的输入框即时提示错误的输入框演示示例演示示例3：内容动态显示的层特效内容动态显示的层特效 制作回车切换输入的效果制作回车切换输入的效果制作内容动态显示的层特效制作内容动态显示的层特效制作即时提示错误的输入框制作即时提示错误的输入框会使用图片代替提交按钮会使用图片代替提交按钮会
2、使用会使用onKeyDown事件事件检查用户输入的特殊字符检查用户输入的特殊字符会使用会使用DIV的的innerHTML或或innerText动态显示内容动态显示内容会使用多个会使用多个DIV动态隐藏或显示内容动态隐藏或显示内容本章目标本章目标如何使用图片代替提交按钮如何使用图片代替提交按钮为了美观，现把提交按钮变成图片，但仍然保持为了美观，现把提交按钮变成图片，但仍然保持表单的验证功能？如何实现？表单的验证功能？如何实现？页面效果页面效果使用图片的单击事件。使用图片的单击事件。onClick=checkForm()如何使用图片代替提交按钮如何使用图片代替提交按钮根据上述分析和提供的素材页面来
3、实现表单验证。根据上述分析和提供的素材页面来实现表单验证。素材页面素材页面 function checkForm()if(document.myform.txtUserName.value.length=0)alert(用户名不能为空！用户名不能为空！);document.myform.txtUserName.focus();检验是否为空检验是否为空单击事件，调用单击事件，调用表单验证函数表单验证函数如何使用图片代替提交按钮如何使用图片代替提交按钮能进行表单验证，但即使是正确填写了表单，也能进行表单验证，但即使是正确填写了表单，也不能提交页面（点击不能提交页面（点击“注册注册”没反映）。没反映
4、）。如何使用图片代替提交按钮如何使用图片代替提交按钮因为图片不具备因为图片不具备“提交提交”按钮的提交功能，所以需按钮的提交功能，所以需要人工调用提交方法要人工调用提交方法 submit()。function checkForm()if(document.myform.txtUserName.value.length=0)alert(用户名不能为空！用户名不能为空！);document.myform.txtUserName.focus();else document.myform.submit();查看源代码查看源代码如果表单输入合法，则提交表单如果表单输入合法，则提交表单制作回车切换输入的效
5、果制作回车切换输入的效果输入完毕后回车，默认会提交表单。输入完毕后回车，默认会提交表单。页面效果页面效果如何制作回车如何制作回车Tab切换效果？切换效果？页面效果页面效果制作回车切换输入的效果制作回车切换输入的效果1、使用键盘输入事件使用键盘输入事件onKeyDown事件事件 2、检查输入是否是回车键检查输入是否是回车键ASCII码码13，若是则将，若是则将 输入改为输入改为Tab键键ASCII码码9 function changeFocus()if(event.keyCode=13)event.keyCode=9;查看源代码查看源代码键盘按下，调用实键盘按下，调用实现现Tab效果的函数效果的
6、函数修改回车键为修改回车键为Tab键键Event事件对象包含输入键信息事件对象包含输入键信息制作回车切换输入的效果制作回车切换输入的效果上述注册页面中，需要给每个文本框添加键盘按上述注册页面中，需要给每个文本框添加键盘按下事件，有没有更简单的办法？下事件，有没有更简单的办法？制作回车切换输入的效果制作回车切换输入的效果通过给通过给document对象添加键盘事件。对象添加键盘事件。function changeFocus()if(event.keyCode=13&event.srcElement.type!=button&event.srcElement.type!=submit)event.
7、keyCode=9;document.onKeyDown=changeFocus ;如果按键是回车键，并且控件如果按键是回车键，并且控件类型不是提交、重置按钮等按类型不是提交、重置按钮等按钮，则变为钮，则变为Tab切换切换document对象的对象的onKeyDown事件事件，它将接收，它将接收页面中所有的键盘事件页面中所有的键盘事件查看源代码查看源代码小结小结1根据提供的素材页面，实现游戏中的人物移动效果。根据提供的素材页面，实现游戏中的人物移动效果。提示：提示：1、根据按下的方向键，改变层的、根据按下的方向键，改变层的Left或或Top坐标坐标 document.getElementByI
8、d(man).style.pixelLeft document.getElementById(man).style.pixelTop2、方向键的、方向键的ASCII码：码：向上键向上键38，向下箭向下箭40 向左键向左键37，向右键向右键393、添加键盘事件：添加键盘事件：document.onKeyDown=move;练习答案练习答案 练习素材练习素材制作即时提示错误的特效制作即时提示错误的特效如何制作即时提示错误的特效？如何制作即时提示错误的特效？页面效果页面效果制作即时提示错误的特效制作即时提示错误的特效使用使用DIV层的内容动态改变。层的内容动态改变。在每个输入框后添加一个在每个输入框
9、后添加一个DIV层层,根据用户的输入根据用户的输入,动动态显示错误信息态显示错误信息制作即时提示错误的特效制作即时提示错误的特效演示实现步骤：演示实现步骤：1、在登录文本框后插入、在登录文本框后插入DIV标签标签loginError（即没有样式的（即没有样式的DIV层）层）2、修改源代码，设置、修改源代码，设置DIV的显示方式为的显示方式为inline，即和文本框在同一行，即和文本框在同一行 制作即时提示错误的特效制作即时提示错误的特效演示实现步骤：演示实现步骤：3、添加文本框失去焦点的事件函数、添加文本框失去焦点的事件函数：function checkLogin()var myDiv=doc
10、ument.getElementById(loginError);myDiv.innerHTML=;var strName=document.userfrm.loginName.value;if(strName.length=0)myDiv.innerHTML=用户名不能为空用户名不能为空;return;查看源代码查看源代码如果输入的信息不合法，则利用如果输入的信息不合法，则利用DIV的的innerHTML或或innerText进行错误进行错误提示，提示，innerText只能写文本信息只能写文本信息获取插入的获取插入的DIV对象对象小结小结2完善完善”密码密码“和和”电子邮件电子邮件“的错误
11、提示功能。的错误提示功能。提示：提示：1、密码和电子邮件文本框后各添加一个、密码和电子邮件文本框后各添加一个DIV标签标签2、修改、修改DIV的显示样式为的显示样式为inline3、给各个文本框添加失去焦点、给各个文本框添加失去焦点onBlur的事件函数的事件函数制作内容动态改变的层特效制作内容动态改变的层特效如何制作内容动态改变的特效如何制作内容动态改变的特效(选择不同的计算方式选择不同的计算方式)？页面效果页面效果制作内容动态改变的层特效制作内容动态改变的层特效方法方法1：当动态显示的内容较少时，使用当动态显示的内容较少时，使用 myDiv.innerHTML=“HTML代码代码”；方法方
12、法2：当动态显示的内容较多，并相对固定时，则预先制作好当动态显示的内容较多，并相对固定时，则预先制作好DIV内容，内容，然后使用然后使用 myDiv.style.display=“none/block”；有哪些方法可以实现动态改变页面内容？有哪些方法可以实现动态改变页面内容？制作内容动态改变的层特效制作内容动态改变的层特效演示实现步骤：演示实现步骤：1、预先插入两个、预先插入两个DIV标签，分别放置不同计算方式标签，分别放置不同计算方式显示的内容：显示的内容：DIV1按面积计算按面积计算显示的内容显示的内容DIV2按贷款总额计按贷款总额计算显示的内容算显示的内容演示素材演示素材function
13、 InitDIV()document.getElementById(DIV1).style.display=none;制作内容动态改变的层特效制作内容动态改变的层特效演示实现步骤：演示实现步骤：2、添加函数，初始化、添加函数，初始化DIV1不显示，默认按贷款总额计算：不显示，默认按贷款总额计算：隐藏隐藏DIV1页面加载时调用页面加载时调用查看源代码查看源代码function displayDIV()if(document.myform.methodRadio0.checked=true)document.getElementById(DIV1).style.display=block;docu
14、ment.getElementById(DIV2).style.display=none;else document.getElementById(DIV2).style.display=block;document.getElementById(DIV1).style.display=none;制作内容动态改变的层特效制作内容动态改变的层特效3、添加函数，根据、添加函数，根据“计算方式计算方式”的选择，隐藏的选择，隐藏/显示对应显示对应DIV层：层：根据单选按钮的值，根据单选按钮的值，隐藏隐藏/显示对应的层显示对应的层按钮的单击事件按钮的单击事件实现简单的省市级联功能实现简单的省市级联功能如
15、何实现省市级联的效果？如何实现省市级联的效果？页面效果页面效果1、利用省份下拉框的选项改变事件、利用省份下拉框的选项改变事件onChange2、根据用户选择的省份，动态添加城市下拉框的值、根据用户选择的省份，动态添加城市下拉框的值onChange选项选项/内容改变事件内容改变事件动态添加动态添加城市选项城市选项Option实现简单的省市级联功能实现简单的省市级联功能演示实现步骤：演示实现步骤：1、添加省份、城市下拉框、添加省份、城市下拉框省份下拉框名称省份下拉框名称selProvince表单名称表单名称myform省份下拉框选项省份下拉框选项option城市下拉框名称城市下拉框名称selCit
16、y实现简单的省市级联功能实现简单的省市级联功能演示实现步骤：演示实现步骤：2、查看生成的、查看生成的HTML代码代码.-请选择开户帐号的省份请选择开户帐号的省份-四川省四川省 山东省山东省 湖北省湖北省 .-请选择开户帐号的城市请选择开户帐号的城市-.多个选项构成多个选项构成选项数组选项数组options选项选项Option城市下拉框暂城市下拉框暂时没有具体的时没有具体的城市选项城市选项实现简单的省市级联功能实现简单的省市级联功能演示实现步骤：演示实现步骤：3、添加动态改变城市选项的、添加动态改变城市选项的changeCity()函数函数function changeCity()var pro
17、vince=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.options.add(newOption1);document.myform.selCity.
18、options.add(newOption2);2、根据用户选择的省份，、根据用户选择的省份，动态创建城市下拉框选项动态创建城市下拉框选项1、获取用户选择、获取用户选择的省份的省份3、清除原有的选项、清除原有的选项4、将选项添加到选项数组、将选项添加到选项数组options查看源代码查看源代码实现简单的省市级联功能实现简单的省市级联功能演示实现步骤：演示实现步骤：4、选择下拉框的、选择下拉框的onChange事件，调用事件函数事件，调用事件函数 -请选择开户帐号的省份请选择开户帐号的省份-四川省四川省 山东省山东省 湖北省湖北省当用户选择不同的省份当用户选择不同的省份时，将调用函数，改变时，将
19、调用函数，改变城市下拉框的选项城市下拉框的选项查看源代码查看源代码实现简单的省市级联功能实现简单的省市级联功能小结下拉框控件小结下拉框控件SELECT：常用属性常用属性lengthvalueoptionsselectedIndex常用事件常用事件onChangeonBluronFocus选项数组选项数组1、每个选项、每个选项Option可以动态创建可以动态创建new Option(”显示内容显示内容”，“值值”)2、动态添加选项、动态添加选项selCity.options.add(newOption1）3、清除选项、清除选项selCity.options.length=0读取或设置被选项的索引
20、号，读取或设置被选项的索引号，第一个为第一个为0，其他类推，其他类推选项改变事件选项改变事件使用数组优化省市级联功能使用数组优化省市级联功能每个省实际上有很多城市、并且城市数量不等，每个省实际上有很多城市、并且城市数量不等，有没有更简单、通用的办法？有没有更简单、通用的办法？var newOption1,newOption2;switch(province)case 四川省四川省:newOption1=new Option(成都市成都市,chengdu);newOption2=new Option(泸州市泸州市,luzhou);break;case 湖北省湖北省:newOption1=new
21、Option(武汉市武汉市,wuhan);newOption2=new Option(襄樊市襄樊市,xiangfan);break;case 山东省山东省:newOption1=new Option(青岛市青岛市,qingdao);newOption2=new Option(烟台市烟台市,yantai);如果有很多城市，就需要如果有很多城市，就需要定义很多变量，编写很多定义很多变量，编写很多重复的代码重复的代码使用数组优化省市级联功能使用数组优化省市级联功能JavaScript中的数组用法：中的数组用法：var emp=new Array(3);emp0=Ryan Dias;emp1=Grah
22、am Browne;emp2=David Greene;emp.sort();document.write(排序结果是：排序结果是：);for(var i in emp)document.write(empi+);1、创建数组对象、创建数组对象new Array(大小大小)2、为数组赋值。数组、为数组赋值。数组中可存放任意数据中可存放任意数据 3、调用数组的方法、调用数组的方法sort()进行排序进行排序 4、循环输出，等同：、循环输出，等同：for(var i=0;iemp.length;i+)查看源代码查看源代码使用数组优化省市级联功能使用数组优化省市级联功能JavaScript中的数组用
23、法：中的数组用法：var cityList=new Array();cityList0=成都成都,绵阳绵阳,德阳德阳,自贡自贡,泸州泸州;cityList1=济南济南,青岛青岛,威海威海,日照日照;cityList2=武汉武汉,宜昌宜昌,恩施恩施,潜江潜江;document.write(四川省包括的城市是：四川省包括的城市是：);for(var j in cityList0)document.write(cityList0j+);1、创建数组，可、创建数组，可以不指定大小以不指定大小 2、为数组赋值。每、为数组赋值。每个单元格可以是数个单元格可以是数组。组。JavaScript不不支持二维数组
24、支持二维数组 3、循环输出、循环输出.0-表示四川省的索引号，同理可表示四川省的索引号，同理可以换为山东省索引号以换为山东省索引号1查看源代码查看源代码使用数组优化省市级联功能使用数组优化省市级联功能用数组优化解决省市级联问题：用数组优化解决省市级联问题：012一维数组一维数组:cityList数组索引号数组索引号1下拉框索引号下拉框索引号selectedIndex01231、用数组存放每个用数组存放每个省省份份包含的城市包含的城市 2、根据用户选择根据用户选择的的省份索引号，省份索引号，找到对应的找到对应的数组索引号数组索引号3、根据对应的数组内、根据对应的数组内容，容，添加城市选项到添加城
25、市选项到城市下拉框中城市下拉框中cityList0cityList1cityList2使用数组优化省市级联功能使用数组优化省市级联功能用数组优化解决省市级联问题：用数组优化解决省市级联问题：function changeCity()var cityList=new Array();cityList0=成都成都,绵阳绵阳,德阳德阳,自贡自贡,泸州泸州;cityList1=济南济南,青岛青岛,日照日照;cityList2=武汉武汉,宜昌宜昌,潜江潜江;var pIndex=document.myform.selProvince.selectedIndex-1;var newOption1;docu
26、ment.myform.selCity.options.length=0;for(var j in cityListpIndex)newOption1=new Option(cityListpIndexj,cityListpIndexj);document.myform.selCity.options.add(newOption1);1、创建数组，存放各、创建数组，存放各省份对应城市省份对应城市 2、根据用户选择的省份索引号，、根据用户选择的省份索引号，获取对应数组索引号获取对应数组索引号 4、根据数组内容创建选项，、根据数组内容创建选项，并添加到城市下拉框并添加到城市下拉框3、清空原下拉框内
27、容、清空原下拉框内容 查看源代码查看源代码使用文字下标的数组再次优化使用文字下标的数组再次优化使用索引号必须要求省份的排列顺序和数组编号相同。使用索引号必须要求省份的排列顺序和数组编号相同。cityList0=成都成都,.泸州泸州;cityList1=济南济南,日照日照;cityList2=武汉武汉,潜江潜江;cityList3=合肥合肥,亳州亳州;cityList4=东莞东莞,珠海珠海;cityList5=桂林桂林,贺州贺州;cityList6=贵阳贵阳,遵义遵义;四川省四川省 山东省山东省 湖北省湖北省 安徽省安徽省 广东省广东省 广西省广西省 贵州省贵州省 当当30多个省份罗列在一起时容
28、易搞错多个省份罗列在一起时容易搞错对应关系对应关系，有没有更直观的办法，有没有更直观的办法?使用文字下标的数组再次优化使用文字下标的数组再次优化1、JavaScript中的数组中的数组下标可以采用标识符下标可以采用标识符代替。代替。例如：例如：cityList山东省山东省=济南济南,青岛青岛,淄博淄博,枣庄枣庄,东营东营,烟台烟台,潍坊潍坊,济宁济宁,泰安泰安,威海威海,日照日照;2、可以根据用户选择的、可以根据用户选择的value值值，与数组下标标识，与数组下标标识 进行比较，从而找出该省包括的城市。进行比较，从而找出该省包括的城市。用文字下标的数组优化省市级联菜单：用文字下标的数组优化省市
29、级联菜单：使用文字下标的数组再次优化使用文字下标的数组再次优化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)newO
30、ption1=new Option(cityListpIndexj,cityListpIndexj);document.myform.selCity.options.add(newOption1);数组下标采用文字标数组下标采用文字标识符代替识符代替根据省份下拉框的值，根据省份下拉框的值，获取对应数组的索引获取对应数组的索引标识标识数组的读取和数字索数组的读取和数字索引方式相同引方式相同查看源代码查看源代码常见错误常见错误var Bookinfo=new Array(2)(4);Bookinfo00=“6-5333-0575-3”;Bookinfo01=“Ajax高级编程高级编程”Bookin
31、fo02=“铁手铁手”Bookinfo03=“人民邮电出版社人民邮电出版社”Bookinfo10=“6-5333-0575-8”;Bookinfo21=“精通正则表达式精通正则表达式”Bookinfo32=“余晟余晟”Bookinfo43=“电子工业出版社电子工业出版社”JavaScript中没有二维或中没有二维或二维以上数组二维以上数组总结总结使用图片代替使用图片代替“提交按钮提交按钮”时，如何实现表单验证功能？时，如何实现表单验证功能？制作回车制作回车Tab切换特效的思路是什么？切换特效的思路是什么？制作即时提示错误特效的思路是什么？制作即时提示错误特效的思路是什么？制作内容动态改变的思路是什么？制作内容动态改变的思路是什么？总结总结省市级联特效的实现思路是什么？省市级联特效的实现思路是什么？下拉框常用的属性和事件有哪些？下拉框常用的属性和事件有哪些？使用数组实现省市级联的思路是什么？使用数组实现省市级联的思路是什么？在在JavaScript中使用数组应注意哪些问题？中使用数组应注意哪些问题？
