版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第十一章使用javascript操作Html元素
理论部分目标使用与以下各项关联的事件处理程序：文本框文本区域
命令按钮复选框单选按钮组合框
编写用于验证表单的JavaScript代码2事件处理程序和表单元素简介2-1
3<INPUTtype=“button”value=“注册"onClick="button_click()">当事件发生时，将执行与之相关的JavaScript代码当发生特定事件时，事件处理程序指定要执行哪些JavaScript代码
4事件处理程序和表单元素简介2-2当用户单击“注册”按钮时，将弹出一条消息。<SCRIPTLANGUAGE="JavaScript">functionbutton_click(){alert(“请向本网站注册);}</SCRIPT><INPUTtype=“button”value=“注册“onClick="button_click()">文本框对象5文本框元素用于在表单中输入字、词或一系列数字可以通过将HTML的INPUT标签中的type设置为“text”，以创建文本框元素<INPUTtype="text"name="t1">文本框对象
–
事件处理程序文本框事件onBlur文本框失去焦点onChange文本框的值被修改onFocus光标进入文本框中方法focus()获得焦点，即获得鼠标光标select()选中文本内容，突出显示输入区域属性readonly只读，文本框中的内容不能修改67文本框对象cardpricenumbertotmyform8文本框对象添加无边框样式9文本框对象-onChange
事件处理程序<SCRIPTlanguage="JavaScript">functionclearText(){if(document.myform.card.value=="输入您的会员帐号")document.myform.card.value="";}functioncheck(){vara=document.myform.card.value;if(a.substr(0,2)!="10"||isNaN(a)){alert("格式错误，请重新输入");document.myform.card.focus();document.myform.card.select();}}functioncompute(){varprice=document.myform.price.value;varnumber=document.myform.number.value;document.myform.tot.value=price*number;}onFocus事件调用的函数clearText（）清空帐号文本框中的内容onBlur事件调用的函数check（）检查输入的帐号是否是“10”打头，并且是数字onChange事件调用的函数compute()用来计算总价文本框对象10<BODY><FORMname="myform">.......<TD>帐号：<INPUTname="card"onFocus="clearText()“onBlur="check()"
type=textvalue="输入您的会员帐号“></TD>.......<TD>单价：<INPUTname="price"type=textvalue="25.00”readonly>￥</TD>.......<TD>数量：<INPUTname="number"onChange="compute()“type=text>个</TD><TD>总价：<INPUTname="tot"type=textvalue="0.00">￥</TD>.......</BODY>帐号文本框添加onFocus和onBlur焦点事件价格只读属性数量文本框添加onChange事件命令按钮对象11命令按钮对象是网页中最常用的元素之一<INPUTtype="submit"name="button1"value="提交"><INPUTtype="reset"name="button2"value="重置"><INPUTtype="button"name="button3"value="计算">“按钮
-事件处理程序表单元素事件处理程序说明命令按钮onSubmit表单提交事件，单击“提交”按钮时产生，此事件属于<FORM>元素，不属于提交按钮onClick按钮单击事件12onSubmit事件处理代码：<FORMonSubmit=”return调用函数名”>…</FORM>如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。13命令按钮事件处理程序userNamepass1pass2type=resettype=submitmyform14命令按钮对象functioncheck(){varuserName=document.myform.userName.value;varpass1=document.myform.pass1.value;varpass2=document.myform.pass2.value;if(pass1==pass2){if(pass1.length!=0){document.write("<H2>恭喜您，注册成功！欢迎
"+userName+"光临！</H2>");returntrue;}else{alert("密码不能为空！\n请输入密码");returnfalse;}}else{alert("确认码必须和输入的密码相同！");returnfalse;}}<BODY><FORMname="myform"onSubmit="returncheck()">onSubmit事件调用的函数：输入数据检查如果输入格式正确，返回true，提交表单信息；如果格式错误，返回false，取消提交，提醒用户重填复选框对象15当用户需要在选项列表中选择多项时，可以使用复选框对象要创建复选框对象，请使用<INPUT>标签请选择您的爱好<INPUTtype=“checkbox”value=“电影”>电影<INPUTtype=“checkbox”value=“电影”>电影复选框-事件处理程序复选框·事件onBlur复选框失去焦点onFocus复选框获得焦点onClick复选框被选定或取消选定属性checked复选框是否被选中，选中为true，未选中为false。您可以使用此属性查看复选框的状态或设置复选框是否被选中value设置或获取复选框的值1617复选框-事件处理程序checkbox1checkbox2checkbox3设置复选框的值checkbox4myform18复选框-事件处理程序<HEAD><SCRIPTlanguage="JavaScript">functionbuy(){vars="";if(document.myform.checkbox1.checked==true)//如果被选中s=s+document.myform.checkbox1.value+“\n”;//累计选中的商品if(document.myform.checkbox2.checked==true)s=s+document.myform.checkbox2.value+"\n";if(document.myform.checkbox3.checked==true)s=s+document.myform.checkbox3.value+"\n";if(document.myform.checkbox4.checked==true)s=s+document.myform.checkbox4.value+"\n";//if(confirm("您定购了以下物品，确定吗？：\n"+s)==true)document.write("您定购了以下物品:<PRE>"+s+"</PRE>");}</SCRIPT>单击”成交“按钮调用的函数：检查每个复选框的选中情况，累计用户选中的商品<PRE>是为了原样显示字符串中的换行”\n”格式<INPUTtype="button"value="成交>>"onClick="buy()“>19复选框-事件处理程序<SCRIPTlanguage="JavaScript">functionbuy(){vars="";for(vari=0;i<document.myform.mybox.length;i++){//判断第i个复选框是否被选中
if(document.myform.mybox[i].checked==true)s=s+document.myform.mybox[i].value+"\n";}if(confirm("您准备购买以下物品，确定吗？：\n"+s)==true)document.write("您购买了以下物品:<PRE>"+s+"</PRE>");}</SCRIPT>//…其他代码略
<INPUTname="mybox"type="checkbox"id="mybox"value="国服魔兽金币">//…其他代码略2.使用数组和for循环大大简化代码1.修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox单选按钮对象20当用户只需要从选项列表中选择一个选项时，可以使用单选按钮对象要创建单选按钮对象，请使用<INPUT>标签<INPUTtype=“radio”value=“M”>男<INPUTtype=“radio”value=“F”>女单选按钮-事件和属性单选按钮·事件onBlur单选按钮失去焦点onFocus单选按钮获得焦点onClick单选按钮被选定或取消选定属性checked单选按钮是否被选中，选中为true，未选中为false。您可以使用此属性查看单选按钮的状态或设置单选按钮是否被选中value设置或获取单选按钮的值2122单选按钮-事件处理程序为了保证单选，两个单选按钮的名称都为myradio，组成了myradio数组23单选按钮－事件处理程序<SCRIPTlanguage="JavaScript">functionbuy(){vars="";for(vari=0;i<document.myform.mybox.length;i++){//判断第i个复选框是否被选中
if(document.myform.mybox[i].checked==true)s=s+document.myform.mybox[i].value+"\n";}//判断买家选项是否选中
if(document.myform.myradio[0].checked==true){if(confirm("您准备买进以下物品，确定吗？：\n"+s)==true)document.write("您买进了以下物品:<PRE>"+s+"</PRE>");}else{if(confirm("您准备卖出下物品，确定吗？：\n"+s)==true)document.write("您卖出了以下物品:<PRE>"+s+"</PRE>");}}根据用户是买家还是卖家，弹出不同的确认信息框判断是否选中第一个单选按钮(买家)下拉列表框24<SELECTname="myselect"><OPTION>--请选择开户帐号的城市--</OPTION><OPTIONvalue="北京市">北京市</OPTION><OPTIONvalue="上海市">上海市</OPTION><OPTIONvalue="重庆市">重庆市</OPTION><OPTIONvalue="天津市">天津市</OPTION><OPTIONvalue="四川省">四川省</OPTION><OPTIONvalue="山东省">山东省</OPTION><OPTIONvalue="湖北省">湖北省</OPTION></SELECT>下拉列表框-事件和属性下拉列表框事件onBlur下拉列表框失去焦点onChange当选项发生改变时产生onFocus下拉列表框获得焦点属性value下拉列表框中，被选选项的值options所有的选项组成一个数组，options表示整个选项数组，第一个选项即为options[0]，第二个即为options[1]，其他以此类推selectedIndex返回被选择的选项的索引号，如果选中第一个返回0，第二个返回1，其他类推25options选项数组options[0]options[1]selectedIndex属性：表示被选中的索引号：3value属性：被选中选项的值26下拉列表框-事件处理程序27下拉列表框-事件处理程序userNamemyselectmycitymyform28下拉列表框-事件处理程序<SCRIPTlanguage="JavaScript">functionmyfun1(){vard=document.myform.myselect.selectedIndex;if(d==1||d==2||d==3||d==4)//北京、上海、重庆、天津
document.myform.city.value=document.myform.myselect.options[d].text;}functionmyfun2(){varuserName=document.myform.userName.value;varprovince=document.myform.myselect.value;varcity=document.myform.city.value;document.write("<bodybgColor=#FFFAEB>");document.write("<H2>您的注册信息如下：</H2>");document.write("<HR>");document.write("<P>姓名："+userName);document.write("<P>帐号开户省份："+province);document.write("<P>帐号开户城市："+city);}</SCRIPT><SELECTname="myselect"onChange="myfun1()">…….<IMGsrc="reg.bmp"onClick="myfun2()">下拉列表框onChange事件调用的函数：判断选择的省份是否是直辖市单击”快速注册“图片时调用的函数myfun2()，显示注册信息表单验证2-129JavaScript最常见的用法之一就是验证表单对于检查用户输入是否存在错误和是否疏漏了必选项，JavaScript是一种十分便捷的方法30表单验证2-2<SCRIPTLANGUAGE="JavaScript">functionvalidate(){varf=document.reg_form;if(f.uname.value==""){alert
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 评估职业道德与法规试题及答案
- 项目七黄瓜拌木耳（教学设计）-四年级劳动上册同步备课系列（人教版）
- 研发项目外部验收管理制度
- 绩效考核数据安全保护管理制度
- 六年级下册心理健康教育表格式教案-第9课男孩 女孩 长春版
- 浙教版信息技术七上 第11课《数据分析报告》教学设计
- 一年级数学(上)计算题专项练习汇编
- 2025至2030年中国软胶囊剂数据监测研究报告
- 关于古代文学史的试题及答案
- 2025至2030年中国电子清纱器数据监测研究报告
- GB/T 13384-2008机电产品包装通用技术条件
- 新教科版五年级下册科学期中测试卷（含答案）
- 员工培训请给我结果课件
- 2022年4月自考质量管理（一）试题及答案含评分标准
- 人教精通版五年级下英语unit 4 Revision优秀课件
- 思修坚定理想信念宣讲教育课件
- 两台37kW三相交流电动机的动力配电柜设计
- 拖欠房租起诉书【5篇】
- 医院临时用药申请表
- 农民合作社财务报表（专业应用）
- T∕CIS 71001-2021 化工安全仪表系统安全要求规格书编制导则
评论
0/150
提交评论