《实验五插件应用（给学生）》.doc

下载文档 降价啦

33
0
约2.82千字
约 4页
2016-09-25 发布于河南
举报
版权申诉
保障服务

《实验五插件应用（给学生）》.doc

1、本文档共4页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

《实验五插件应用（给学生）》.doc

实验五插件应用【实验目的】 1、掌握 jQuery 的插件机制； 2、掌握 jQuery 中插件的参数定义； 3、能够创建 jQuery 插件。 4、掌握 jQuery UI 的 Datepicker 插件； 5、掌握 jQuery validation 表单验证插件； 6、能够使用插件进行表单设计。【实验准备】 1、复习教材相关内容； 2、预习本次实验；【实验内容】 1、利用插件机制实现表格的隔行变色，当鼠标悬停时突出显示某行的效果。 2、利用插件机制实现网页选项卡。 3、利用 jQuery ui Datepicker 插件实现日历，效果如图5-1 所示。图 5-1 代码如下： datepicker.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第二题</title> <link rel="stylesheet" href="css/jquery.ui.all.css"/> <script src="js/jquery-1.7.1.js" type="text/javascript"></script> <script src="js/jquery.ui.core.js" type="text/javascript"></script> <script src="js/jquery.ui.widget.js" type="text/javascript"></script> <script src="js/jquery.ui.datepicker.js" type="text/javascript"></script> <script src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></script> <link rel="stylesheet" href="css/demos.css"/> <link rel="stylesheet" href="css/pack_datepicker.css"/> <script type="text/javascript"> </script> </head> <body> <div class="demo"> <p>请输入日期: <input type="text" id="datepicker"/></p> </div> </body> </html> 4、利用 jQuery Validation 插件设计用户注册表单的校验，效果如图5-2 所示。图 5-2 代码如下： validate.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第二题</title> <script src="js/jquery-1.4.2.js" type="text/javascript"></script> <script src="js/jquery.validate.js" type="text/javascript"></script> <script src="js/jquery.metadata.js" type="text/javascript"></script> <script src="js/messages_cn.js" type="text/javascript"></script> <script type="text/javascript"> </script> <style type="text/css"> #commentForm { width: 800px; } #commentForm label { width: 250px; } #commentForm label.error, #commentForm input.submit { margin-left:

您可能关注的文档

文档评论（0）

wgvi + 关注: 实名认证

内容提供者

该用户很懒，什么也没介绍

咨询Ta 进入空间

1亿VIP精品文档

更多 >

《实验五插件应用（给学生）》.doc