资源描述
单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,CSS,样式特效与表单验证,第四章,回顾,详述,getElementById( ),的主要功能,详述,getElementsByName( ),的主要功能,简述制作浮动广告图片的实现思路,简述制作全选,/,反选多个复选框的实现思路,本章目标,会使用,style,样式属性动态改变边框颜色,会使用,className,类名属性动态改变按钮背景图片,会使用表单事件和脚本函数实现表单验证,会使用,String,对象和文本框控件常用属性和方法实现客户端验证,回顾已学的,CSS,样式表,-1,样式规则的语法是什么？用法有哪些？,行内样式,内嵌样式,外部样式表,回顾已学的,CSS,样式表,-2-1,回顾,HTML,中讲过的,CSS,样式表，常见的样式有哪些？,回顾已学的,CSS,样式表,-2-2,文本属性,说 明,font-size,字体大小,font-family,字体类型,font-style,字体样式,color,设置或检索文本的颜色,text-align,文本对齐,背景属性,说 明,background-color,设置背景颜色,background-image,设置背景图像,background-repeat,设置一个指定的图像如何被重复,回顾已学的,CSS,样式表,-2-3,名称,说 明,不带下划线的超连接,A color: blue;,text-decoration: none;,A:hover, color: red; ,细边框样式,.,boxBorder, border-width:1px;,border-,style:solid,; ,图片按钮样式,.,picButton,background-image: url(images/back2.jpg);,border: 0px;,margin: 0px;,padding: 0px;,height: 23px; width: 82px;,font-size: 14px; ,回顾已学的,CSS,样式表,-3,制作如下图所示的,“,回顾样式,.html”,的页面效果,细边框样式,图片按钮样式,超链接样式,制作改变字体大小的样式特效,实现思路,1,、创建改变样式的,JavaScript,代码,this.style.fontSize,=24px,this.style.fontSize,=14px,2,、利用鼠标相关事件调用,JavaScript,代码,onMouseOver,=,this.style.fontSize,=24px“,onMouseOut,=,this.,style,.,fontSize,=14px,使用了,style,属性,样式表：,font-size,脚本代码：,fontSize,课堂练习,请编写如下图所示，实现随鼠标移入改变边框色的效果,练习代码,练习答案,鼠标移入边框颜色变为红色,制作改变按钮背景图片的特效,-1,如何实现如下图所示 ，按钮的图片背景效果？,鼠标移入按钮背景变色,制作改变按钮背景图片的特效,-2,演示示例,8,：,改变样式,backgroundImage,演示,演示：通过改变样式,backImage,能否实现？,onMouseOver=,this.style.backgroundImage,=url(images/back2.jpg);,失败的原因：当鼠标移到按钮上方时，除了图片要换以外，还应保留,border,、,margin,、,padding,等样式。即使用多行代码,onmouseOver,=,this.style.backImage,=url(images/back2.jpg);,this.style.boder,=0;this.style.padding=0.;,解决办法：创建,mouseOver,和,mouseOut,两种类样式，,然后使用,className,类属性进行切换,制作改变按钮背景图片的特效,-3,.,mouseOverStyle,background-image: url(images/back2.jpg);,color:#CC0099;,border:0px;,margin:0px;,padding:0px;,height:23px;width: 82px;,font-size: 14px; ,.,mouseOutStyle,background-image: url(images/back1.jpg);,color:#0000FF; border:0px; margin:0px;,padding:0px;height:23px; width:82px;,font-size: 14px; ,定义样式,制作改变按钮背景图片的特效,-4,利用鼠标相关事件调用样式代码,使用,className,应用类样式,层的显示,/,隐藏特效,显示属性,display,参数值,描述,block,默认值。按块显示，换行显示,.,用该值为对象之后添加新行,none,不显示 ，隐藏对象。与,visibility,属性的,hidden,值不同，其不为被隐藏对象保留其物理空间。,inline,按行显示，和其他元素同一行显示。,显示属性,display,适用于所有,HTML,标签，常用于层,DIV,、图片,Img,的显示和隐藏,课堂练习,编写如下图所示，层的显示隐藏特效,使用函数的参数，传递超链接的内容,修改按钮值：,document.myform.placeButton.value,=place,表单验证,服务器,IE,脚本在客户端执行，减轻服务器端的压力,客户端,用户输入,客户端,用户输入,客户端,用户输入,发送请求,返回响应,发送请求,返回响应,发送请求,返回响应,表单验证的内容,-1,不能为空且不能有数字,不能为空且不能有数字,不能为空，且只能包括字母、数字和下划线字符,密码不能为空并且最少为,6,位，还要求两次输入的密码要一致,表单验证的内容,-2,不能为空且包含字符,和,.,只能二选一,年月日不能为空，且不能超出其要求的范围,表单验证的思路,-1,如何编写脚本验证表单？,1,、获取表单元素的值（,String,类型），然后进行判断,2,、,触发,表单,（,FORM,）,的提交事件,（,onSubmit,）,表单验证的思路,-2,常用的,String,对象,使用,var,语句,var,newstr,= ,这是我的字符串,创建,S,tring,对象,var,newstr,=,new String,(,这是我的字符串,“,),调用方法和属性,字符串对象,.,属性名,字符串对象,.,方法名,( ),表单验证的思路,-3,名 称,说 明,属性,l,ength,获取字符串字符的个数,方法,indexOf(“,子字符串”，起始位置,),查找子字符串的位置,charAt,(index,),获取位于指定索引位置的字符,substring,(,index1,index2,),求子串,toLowerCase(,),将字符串转换成小写,toUpperCase(,),将字符串转换成,大写,String,对象常用的属性和方法,语法：,indexOf(“,查找的子字符串”，查找的起始位置,),返回子字符串所在的位置；如果没找到，返回 ,1,例如：,var x,var y=“,abcdefg,”;,x=,y.indexOf(“c,” , 0 );,/,返回结果为,2,，起始位置是,0,表单验证的思路,-4,查看完整代码,检查电子邮件,email,是否包含“,”,和,”,.”,function,checkEmail,( ) var,strEmail,=,document.myform.txtEmail.value,;,if (,strEmail.length,=0), alert(,电子邮件不能为空,!);,return false; ,if (,strEmail.indexOf(,0)=-1,), alert(,电子邮件格式不正确,n,必须包含,符号！,);,return false; ,if (strEmail.indexOf(.,0)=-1), alert(,电子邮件格式不正确,n,必须包含,.,符号！,);,return false; ,return true; , ,返回结果,-1,表示没找到“,”,字符,获取表单元素的值,表单的提交事件,文本框控件,-1,如何实现如下图所示，完善电子邮件的例子。,用户单击时,邮箱的提示信息自动清除,提示电子邮件格式不对,输入的信息自动被选中并高亮显示,文本框控件,-2,文本框对象的常用属性、方法、事件,使用文本框对象的相关方法，实现选中效果,名 称,说 明,属性,value,设置或获取文本框的值,方法,focus( ),获得焦点,select( ),选中文本内容，突出显示输入区域,事件,onFocus,光标进入某个文本框,脚本运行,onBlur,文本框,失去焦点脚本运行,onKeyPress,当一个键按下并释放时去触发一个事件,文本框控件,-3,.,function clearText( ) ,if (,document.myform.txtEmail.value,=“,请输入真实的电子邮箱，我们将,发送激活密码,) ,document.myform.txtEmail.value,= ;,document.myform.txtEmail.style.color,=red;,*,必填,清空文本框的内容,修改文本框的颜色,文本框获得焦点就调用方法,clearText( ),常见错误,-1,function,validateform,( ),if(sNameCheck,() &,passCheck()&bdaycheck,(),return true;,else,return false;, ,提交按钮,type=submit,清空按钮,type=reset,常见错误,-2,function,validateform,( ),if(sNameCheck,() &,passCheck()&bdaycheck,(),return true;,else,return false;, ,onsubmit,不是提交按钮的事件,总结,请列举常用的样式属性？,请简述样式特效的实现思路？,请回答如何改变按钮背景图片的特效？,请简述层的显示,/,隐藏与图片的显示,/,隐藏特效的异同？,
展开阅读全文