单元5--设计表单控件类网页特效.ppt

单元单元5 5 设计表单控件类网页特效设计表单控件类网页特效任务任务5-1 实现注册表单中的网页特效实现注册表单中的网页特效 网页网页0501.html中的注册表单如图中的注册表单如图5-1所示。所示。图图5-1网页网页0501.html中的注册表单中的注册表单任务任务5-2 实现反馈意见表单中的网页特效实现反馈意见表单中的网页特效 在网页在网页0502.html中单击超链接中单击超链接“我我要说两句要说两句”，如图，如图5-2所示，将显示输入所示，将显示输入反馈意见的文本框和两个按钮，如图反馈意见的文本框和两个按钮，如图5-3所示。所示。图图5-2单击超链接单击超链接“我要说两句我要说两句”图图5-3显示输入反馈意见的文本框和两个按钮显示输入反馈意见的文本框和两个按钮 在文本框中输入文本内容后，单击在文本框中输入文本内容后，单击【提交】按钮即可将相关内容发送到服【提交】按钮即可将相关内容发送到服务器中。务器中。【知识必备】【知识必备】5.15.1JavaScriptJavaScript的事件的事件 JavaScript是一种基于对象的语言，是一种基于对象的语言，基于对象语言的基本特征是采用事件驱基于对象语言的基本特征是采用事件驱动机制。动机制。事件驱动是指由于某种原因（单击事件驱动是指由于某种原因（单击鼠标或按键操作等）触发某项事先定义鼠标或按键操作等）触发某项事先定义的事件，从而执行处理程序。的事件，从而执行处理程序。JavaScript通过对事件进行响应来获通过对事件进行响应来获得与用户的交互。得与用户的交互。例如，当用户单击一个按钮或者在某例如，当用户单击一个按钮或者在某段文字上移动鼠标时，就触发了一个单击段文字上移动鼠标时，就触发了一个单击事件或鼠标移动事件，通过对这些事件的事件或鼠标移动事件，通过对这些事件的响应，可以完成特定的功能。响应，可以完成特定的功能。例如，单击按钮弹出对话框，鼠标例如，单击按钮弹出对话框，鼠标移动到文本上后文本改变颜色等。移动到文本上后文本改变颜色等。事件就是用户与事件就是用户与Web页面交互时产页面交互时产生的操作，当用户进行单击按钮等操作生的操作，当用户进行单击按钮等操作时，即产生了一个事件，需要浏览器进时，即产生了一个事件，需要浏览器进行处理，浏览器响应事件并进行处理的行处理，浏览器响应事件并进行处理的过程称为事件处理。过程称为事件处理。Web页面触发事件的原因主要如下。页面触发事件的原因主要如下。（1）页面之间跳转。）页面之间跳转。（2）网页的下载、表单提交。）网页的下载、表单提交。（3）网页内部对象的交互，包括界面对象）网页内部对象的交互，包括界面对象的选定、离开、改变等。的选定、离开、改变等。1鼠标事件鼠标事件2键盘事件键盘事件3页面事件（页面事件（Window对象的事件）对象的事件）4表单及表单控件事件表单及表单控件事件5编辑事件编辑事件6event对象对象7DOM事件的使用比较事件的使用比较（1）onload和和onunload事件。事件。（2）onchange事件。事件。（3）onmouseover和和onmouseout事件。事件。（4）onmousedown、onmouseup以及以及onclick事件。事件。（5）onfocus事件。事件。5.25.2JavaScriptJavaScript的事件方法的事件方法5.35.3jQueryjQuery的事件方法的事件方法1jQuery常用的事件方法常用的事件方法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的自定义列表框的自定义列表框 在下拉列表中单击选择一个列表项，在下拉列表中单击选择一个列表项，如如“手机通讯手机通讯”，将在，将在标标签内显示该商品类型名称，同时在右侧输签内显示该商品类型名称，同时在右侧输入框中显示该类型对应的编号，如图入框中显示该类型对应的编号，如图5-6所所示。示。图图5-6在下拉列表中选择一个列表项在下拉列表中选择一个列表项 另外，左侧的输入框中初始状态显另外，左侧的输入框中初始状态显示了文本示了文本“春茶春茶”，单击时原有的文本，单击时原有的文本“春茶春茶”会自动隐藏。会自动隐藏。任务任务5-5 JavaScript实现获取表单实现获取表单控件的设置值控件的设置值【任务描述】【任务描述】网页网页0505.html中表单及表单控件的中表单及表单控件的外观效果如图外观效果如图5-7所示。所示。在上方的在上方的“手机价格搜索手机价格搜索”区域直区域直接单击已有的价格区间或者在输入框中接单击已有的价格区间或者在输入框中输入价格区间数据，然后单击【立即搜输入价格区间数据，然后单击【立即搜索】按钮即可实现价格搜索功能。索】按钮即可实现价格搜索功能。在下方的在下方的“手机功能搜索手机功能搜索”区域选区域选择择“外观外观”对应的单选按钮和对应的单选按钮和“功能功能”对应的复选框，然后单击【立即搜索】对应的复选框，然后单击【立即搜索】按钮即可实现功能搜索功能。按钮即可实现功能搜索功能。图图5-7网页网页0505.html中表单及表单控中表单及表单控件的外观效果件的外观效果任务任务5-6 jQuery实现自定义列表框实现自定义列表框与单击清空输入框内容与单击清空输入框内容【任务描述】【任务描述】在网页在网页0506.html中自定义一个列表中自定义一个列表框，其列表项如图框，其列表项如图5-8所示。所示。当选中一个列表项时，该列表项会当选中一个列表项时，该列表项会自动出现在上方自动出现在上方div区域中，单击输入框区域中，单击输入框时，会自动清空输入框原有的内容，如时，会自动清空输入框原有的内容，如图图5-9所示。所示。图图5-8网页网页0506.html中的自定义列表框中的自定义列表框图图5-9在网页在网页0506.html的自定义列表框中选择的自定义列表框中选择列表框与自动清空输入框中的内容列表框与自动清空输入框中的内容任务任务5-7 jQuery实现动态改变购买数量实现动态改变购买数量【任务描述】【任务描述】经常需要在购物网站的购物车页面经常需要在购物网站的购物车页面输入购买数量，如图输入购买数量，如图5-10所示，单击所示，单击 按按钮时动态增加购买数量，单击钮时动态增加购买数量，单击 按钮按钮时动态减少购买数量。时动态减少购买数量。图图5-10在购物车中动态改变购买数量在购物车中动态改变购买数量【同步训练】【同步训练】任务任务5-8 JavaScript实现输出列实现输出列表框中被选项的文本内容表框中被选项的文本内容【任务描述】【任务描述】在网页在网页0508.html中输出列表框中被中输出列表框中被选项的文本内容，如图选项的文本内容，如图5-11所示。所示。图图5-11输出列表框中被选项的文本内容输出列表框中被选项的文本内容任务任务5-9 JavaScript实现利用列表实现利用列表框切换网页框切换网页 【任务描述】【任务描述】同一个文件夹中有多个网页文档，如同一个文件夹中有多个网页文档，如left01.html、left02.html和和left03.html，在网，在网页的列表框中选择一个列表项，即可实现页的列表框中选择一个列表项，即可实现切换网页的功能，如图切换网页的功能，如图5-12所示。所示。图图5-12在列表框中选择列表项切换网页在列表框中选择列表项切换网页任务任务5-10 jQuery实现验证页面页码实现验证页面页码【任务描述】【任务描述】网页网页0510.html中的页面导航栏如图中的页面导航栏如图5-13所示，单击数字按钮或【上一页】或所示，单击数字按钮或【上一页】或【下一页】按钮可以切换到相应的页面。【下一页】按钮可以切换到相应的页面。在输入框中输入数字，然后单击【确定】在输入框中输入数字，然后单击【确定】按钮也可以切换到相应的页面。按钮也可以切换到相应的页面。在输入框中输入数字或者输入数字后单在输入框中输入数字或者输入数字后单 击【确定】按钮时都要调用自定义函数击【确定】按钮时都要调用自定义函数verifyListPages()验证页码是否为数字。验证页码是否为数字。图图5-13网页网页0510.html中的页面导航栏中的页面导航栏