TP11 综合案例1 javascript操作CSS样式特效

综合案例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