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

1、综合案例综合案例1 javascript操作操作CSS样样式特效式特效制作改变按钮背景图片的特效制作改变按钮背景图片的特效-1如何实现如下图所示如何实现如下图所示 ，按钮的图片背景效，按钮的图片背景效果？果？鼠标移入按鼠标移入按钮文字变色钮文字变色动态调用样式动态调用样式Js 操作样式的常用方式：操作样式的常用方式：元素对象元素对象.style.样式属性样式属性=“值值”层的显示层的显示/隐藏特效隐藏特效-1显示属性显示属性display参数值描述block默认值。按块显示，换行显示.用该值为对象之后添加新行none不显示 ，隐藏对象。与visibility属性的hidden值不同，其不为被隐

2、藏对象保留其物理空间。inline按行显示，和其他元素同一行显示。显示属性显示属性display适用于所有适用于所有HTML标签，常用于层标签，常用于层DIV、图片图片Img的显示和隐藏的显示和隐藏层的显示层的显示/隐藏特效隐藏特效-2如何实现如下图所示的页面上广告层的效果？如何实现如下图所示的页面上广告层的效果？显示广显示广告层告层隐藏广隐藏广告层告层练习练习编写如下图所示，图片的显示隐藏编写如下图所示，图片的显示隐藏特效特效练习答案练习答案综合案例综合案例2 广告和图片轮播广告和图片轮播综合案例综合案例3 省市级联功能省市级联功能 实现简单的省市级联功能实现简单的省市级联功能如何实现省市级

3、联的效果？如何实现省市级联的效果？页面效果页面效果1、利用省份下拉框的选项改变事件、利用省份下拉框的选项改变事件onChange2、根据用户选择的省份，动态添加城市下拉框的值、根据用户选择的省份，动态添加城市下拉框的值onChange选项选项/内容改变事件内容改变事件动态添加动态添加城市选项城市选项Option实现简单的省市级联功能实现简单的省市级联功能常用属性常用属性lengthvalueoptionsselectedIndex常用事件常用事件onChangeonBluronFocus选项数组选项数组1、每个选项、每个选项Option可以动态创建可以动态创建new Option(”显示内容显

4、示内容”，“值值”)2、动态添加选项、动态添加选项selCity.options.add(newOption1）或者或者selCity.optionsi=newOption1;3、清除选项、清除选项selCity.options.length=0读取或设置被选项的索引号，读取或设置被选项的索引号，第一个为第一个为0，其他类推，其他类推选项改变事件选项改变事件使用数组优化省市级联功能使用数组优化省市级联功能用数组解决省市级联问题：用数组解决省市级联问题： 012一维数组一维数组: cityList数组索引号数组索引号1下拉框索引号下拉框索引号selectedIndex01231、用数组存放每个、

5、用数组存放每个省份包含的城市省份包含的城市 2、根据用户选择的省份索引号，、根据用户选择的省份索引号，找到对应的数组索引号找到对应的数组索引号3、根据对应的数组内、根据对应的数组内容，添加城市选项到容，添加城市选项到城市下拉框中城市下拉框中cityList0cityList1cityList2练习练习用数组优化学期、选修课程的级联。用数组优化学期、选修课程的级联。各学期对应课程各学期对应课程第一学期：第一学期：HTML、SqlServer基础、基础、C#第二学期：第二学期：JavaScript、SqlServer高级、高级、.Net第二学年：第二学年：ASP.NET、Ajax练习答案练习答案综

6、合案例综合案例4 Web前端的表单验证技术前端的表单验证技术为什么要表单验证为什么要表单验证减轻服务器的压力减轻服务器的压力保证输入的数据符合要求保证输入的数据符合要求15/38常用的表单验证常用的表单验证日期格式日期格式表单元素是否为空表单元素是否为空用户名和密码用户名和密码E-mail地址地址身份证号码身份证号码16/38实现验证的思路实现验证的思路 当输入的表单数据不符合要求时，如何编写当输入的表单数据不符合要求时，如何编写脚本来进行提示？脚本来进行提示？1.1. 获得表单元素值获得表单元素值2.2. 使用使用JavaScriptJavaScript的一些方法对数据进行判断的一些方法对数

7、据进行判断3.3. 当表单当表单提交提交时时，触发触发事件事件，对获取的数据进，对获取的数据进行验证行验证问题问题分析分析17/38字符串验证字符串验证3-1非空验证非空验证if (mail = ) alert(Email不能为空); return false;检测检测Email是否为空是否为空长度长度验证验证if(pwd.length6) alert(密码必须等于或大于6个字符); return false;length属性可以获取字符串长度属性可以获取字符串长度18/38字符串验证字符串验证3-2字符串查找字符串查找indexOf()：查找某个指定的字符串值在字符串中查找某个指定的字符串值

8、在字符串中首次出现的位置首次出现的位置var str=this is JavaScript;var selectFirst=str.indexOf(Java);var selectSecond=str.indexOf(Java,12);返回返回8if (mail.indexOf() = -1) alert(Email格式不正确n必须包含); return false;返回返回-1判断是否包含判断是否包含演示演示示例示例1：验证休闲网登录页面：验证休闲网登录页面19/38字符串验证字符串验证3-3判断字符串是否有数字判断字符串是否有数字使用使用for循环和循环和substring()方法依次截断

9、单个字符方法依次截断单个字符，再判断每个字符是否是数字，再判断每个字符是否是数字for (var i = 0; i user.length; i+) var j = user.substring(i, i + 1); if (isNaN(j) = false) alert(姓名中不能包含数字); return false; 截取单个字符截取单个字符演示演示示例示例2：验证休闲网注册页面：验证休闲网注册页面20/38学员操作学员操作验证注册页面中的电子邮箱验证注册页面中的电子邮箱需求说明需求说明电子邮箱不能为空电子邮箱不能为空电子邮箱中必须包含符号电子邮箱中必须包含符号“”和和“.”练习练习完成

10、时间完成时间：20分钟分钟21/38共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技巧22/38表单验证事件表单验证事件表单验证需要综合运用元素的事件表单验证需要综合运用元素的事件类别类别名称名称描述描述事件事件onblur失去焦点，当光标离开某个文本框时触发失去焦点，当光标离开某个文本框时触发onfocus获得焦点，当光标进入某个文本框时触发获得焦点，当光标进入某个文本框时触发演示演示示例示例3：动态改变文本框效果：动态改变文本框效果23/38文本输入提示特效文本输入提示特效实现思路实现思路把错误信息显示在把错误信息显示在div中，使

11、用中，使用javascript的的innerHtml()方法，设置方法，设置和和之间的内容之间的内容编写脚本验证函数编写脚本验证函数鼠标失去焦点时（鼠标失去焦点时（blur事件）调用验证函数事件）调用验证函数演示演示示例示例4：制作文本输入提示特效：制作文本输入提示特效24/38学员操作学员操作验证贵美网站的注册页面验证贵美网站的注册页面需求说明需求说明名字和姓氏均不能为空，并且不能有数字名字和姓氏均不能为空，并且不能有数字密码不能少于密码不能少于6位，两次输入的密码必须相同位，两次输入的密码必须相同电子邮箱不能为空，并且必须包含符号电子邮箱不能为空，并且必须包含符号“”和和“.”练习练习完成

12、时间完成时间：30分钟分钟25/38共性问题集中讲解共性问题集中讲解常见问题及解决办法常见问题及解决办法代码规范问题代码规范问题调试技巧调试技巧26/38正则表达式正则表达式为什么需要正则表达式为什么需要正则表达式简洁的代码简洁的代码严谨的验证文本框中的内容严谨的验证文本框中的内容var reg= /w+w+(.a-zA-Z2,3)1,2$/;if(reg.test(email) =false) document.getElementById(“email”).innerHtml= 电子邮件格式不正确,请重新输入; return false;一个简单的表达式即可验证邮箱一个简单的表达式即可验证

13、邮箱27/38定义正则表达式定义正则表达式普通方式普通方式var reg=/表达式表达式/附加参数附加参数var reg=/white/; /表示表达式中含有指定的内容则返回结果为true 匹配一次 var reg=/white/g; / (全文查找出现的所有匹配字符) 至少一次构造函数构造函数var reg=new RegExp(表达式表达式,附加参数附加参数)var reg=new RegExp(white);var reg=new RegExp(white,g);28/38语法语法表达式的模式表达式的模式简单模式简单模式只能表示具体的匹配只能表示具体的匹配var reg=/china/;

14、var reg=/abc8/;复合模式复合模式可以使用通配符表达更为抽象的规则模式可以使用通配符表达更为抽象的规则模式var reg=/w+$/;var reg=/w+w+.a-zA-Z2,3(.a-zA-Z2,3)?$/;29/38RegExp对象对象RegExp对象的方法对象的方法方法方法描述描述test检索字符串中指定的值，返回检索字符串中指定的值，返回true或或false30/38正则表达式符号正则表达式符号2-1符号符号描述描述/代表一个模式的开始和结束代表一个模式的开始和结束匹配字符串的开始匹配字符串的开始$匹配字符串的结束匹配字符串的结束s任何空白字符任何空白字符S任何非空白字

15、符任何非空白字符d匹配一个数字字符，等价于匹配一个数字字符，等价于0-9D除了数字之外的任何字符，等价于除了数字之外的任何字符，等价于0-9w匹配一个数字、下划线或字母字符，等价于匹配一个数字、下划线或字母字符，等价于A-Za-z0-9_ W任何非单字字符，等价于任何非单字字符，等价于a-zA-z0-9_.除了换行符之外的任意字符除了换行符之外的任意字符31/38var reg=/w+$/;var reg=/w+w+.a-zA-Z2,3(.a-zA-Z2,3)?$/;正则表达式符号正则表达式符号2-2符号符号描述描述n匹配前一项匹配前一项n次次n,匹配前一项匹配前一项n次，或者多次次，或者多次

16、n,m匹配前一项至少匹配前一项至少n次，但是不能超过次，但是不能超过m次次*匹配前一项匹配前一项0次或多次，等价于次或多次，等价于0,+匹配前一项匹配前一项1次或多次，等价于次或多次，等价于1,？匹配前一项匹配前一项0次或次或1次，也就是说前一项是可选的，等价次，也就是说前一项是可选的，等价于于0,132/38var reg=/w+$/;var reg=/w+w+.a-zA-Z2,3(.a-zA-Z2,3)?$/;正则表达式的应用正则表达式的应用用户名、密码、电子邮箱、手机号码、身份用户名、密码、电子邮箱、手机号码、身份证号码、生日、邮政编码、固定电话证号码、生日、邮政编码、固定电话33/38

17、验证邮政编码和手机号码验证邮政编码和手机号码验证邮政编码和手机号码验证邮政编码和手机号码中国的邮政编码都是中国的邮政编码都是6 6位位手机号码都是手机号码都是1111位，并且第位，并且第1 1位都是位都是1 1var regCode=/d6$/;var regMobile=/1d10$/;演示演示示例示例5：验证邮编和手机号码：验证邮编和手机号码34/38验证年龄验证年龄对年龄进行验证，年龄必须在对年龄进行验证，年龄必须在0120之间之间10-99这个范围都是两位数，十位是这个范围都是两位数，十位是1-9，个位是，个位是0-9，正则表达式为，正则表达式为1-9d0-9这个范围是一位，正则表达式

18、为这个范围是一位，正则表达式为d100-119这个范围是三位数，百位是这个范围是三位数，百位是1，十位是，十位是0-1，个位是，个位是0-9，正则表达式为，正则表达式为10-1d所有年龄的个位都是所有年龄的个位都是0-9，当百位是，当百位是1时十位是时十位是0-1，当年龄为两位数时十位是，当年龄为两位数时十位是1-9，因此，因此0-119这个这个范围的正则表达式为范围的正则表达式为(10-1|1-9)?d年龄年龄120是单独的一种情况，需要单独列出来是单独的一种情况，需要单独列出来演示演示示例示例6：验证年龄：验证年龄35/38学员操作学员操作使用正则表达式验证用户注册页面使用正则表达式验证用户注册页面需求说明需求说明用户名只能由英文字母和数字组成，长度为用户名只能由英文字母和数字组成，长度为416个字符，并个字符，并且以英文字母开头且以英文字母开头密码只能由英文字母和数字组成，长度为密码只能由英文字母和数字组成，长度为410个字符个字符生日的年份在生日的年份在19002009之间，生日格式为之间，生日格式为1980-5-12或或1988-05-04的形式的形式练习