JavaScript+jQuery网页特效设计实例教程 陈承欢 单元5 设计表单控件类网页特效新.pptVIP

图5-11　输出列表框中被选项的文本内容 任务5-9 JavaScript实现利用列表框切换网页 【任务描述】 同一个文件夹中有多个网页文档，如left01.html、left02.html和left03.html，在网页的列表框中选择一个列表项，即可实现切换网页的功能，如图5-12所示。 图5-12　在列表框中选择列表项切换网页 任务5-10 jQuery实现验证页面页码 【任务描述】 网页0510.html中的页面导航栏如图5-13所示，单击数字按钮或【上一页】或【下一页】按钮可以切换到相应的页面。 在输入框中输入数字，然后单击【确定】 按钮也可以切换到相应的页面。 在输入框中输入数字或者输入数字后单 击【确定】按钮时都要调用自定义函数verify ListPages()验证页码是否为数字。 图5-13　网页0510.html中的页面导航栏 在线教务辅导网： 更多课程配套课件资源请访问在线教务辅导网 单元5 设计表单控件类网页特效 任务5-1 实现注册表单中的网页特效 网页0501.html中的注册表单如图5-1所示。 图5-1　网页0501.html中的注册表单 任务5-2 实现反馈意见表单中的网页特效 在网页0502.html中单击超链接“我要说两句”，如图5-2所示，将显示输入反馈意见的文本框和两个按钮，如图5-3所示。 图5-2　单击超链接“我要说两句” 图5-3　显示输入反馈意见的文本框和两个按钮 在文本框中输入文本内容后，单击【提交】按钮即可将相关内容发送到服务器中。 【知识必备】 5.1　JavaScript的事件 JavaScript是一种基于对象的语言，基于对象语言的基本特征是采用事件驱动机制。 事件驱动是指由于某种原因（单击鼠标或按键操作等）触发某项事先定义的事件，从而执行处理程序。 JavaScript通过对事件进行响应来获得与用户的交互。 例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能。 例如，单击按钮弹出对话框，鼠标移动到文本上后文本改变颜色等。 事件就是用户与Web页面交互时产生的操作，当用户进行单击按钮等操作时，即产生了一个事件，需要浏览器进行处理，浏览器响应事件并进行处理的过程称为事件处理。 Web页面触发事件的原因主要如下。 （1）页面之间跳转。 （2）网页的下载、表单提交。 （3）网页内部对象的交互，包括界面对象的选定、离开、改变等。 1．鼠标事件 2．键盘事件 3．页面事件（Window对象的事件） 4．表单及表单控件事件 5．编辑事件 6．event对象 7．DOM事件的使用比较 （1）onload和onunload事件。 （2）onchange事件。 （3）onmouseover和onmouseout事件。 （4）onmousedown、onmouseup以及onclick事件。 （5）onfocus事件。 5.2　JavaScript的事件方法 5.3　jQuery的事件方法 1．jQuery常用的事件方法 2．事件绑定 3．事件对象属性和方法 （1）把所有jQuery代码置于事件处理函数中。 （2）把所有事件处理函数置于文档就绪事件处理器ready()中。 （3）把jQuery代码置于单独的JS文件中。 （4）如果存在名称冲突，则重命名jQuery库。 【引导训练】 任务5-3 JavaScript实现邮箱自动导航 【任务描述】 在如图5-4所示的网页列表框中选择一个邮箱地址，单击【Go】按钮打开对应的邮箱登录页面，实现邮箱自动导航功能。 图5-4　在列表框中选择一个邮箱地址 任务5-4 JavaScript实现从自定义列表框中选择商品类型 【任务描述】 网页0504.html的自定义列表框如图5-5所示。 图5-5　网页0504.html的自定义列表框 在下拉列表中单击选择一个列表项，如“手机通讯”，将在span/span标签内显示该商品类型名称，同时在右侧输入框中显示该类型对应的编号，如图5-6所示。 图5-6　在下拉列表中选择一个列表项 另外，左侧的输入框中初始状态显示了文本“春茶”，单击时原有的文本“春茶”会自动隐藏。 任务5-5 JavaScript实现获取表单控件的设置值 【任务描述】 网页0505.html中表单及表单控件的外观效果如图5-7所示。 在上方的“手机价格搜索”区域直接单击已有的价格区间或者在