《实验五 插件应用（给学生）》.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!-- End demo -- /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: 10px; } em.error { background:url(images/unchecked.gif) no-repeat 0px 0px; padding-left: 16px; } em.success {background:url(images/checked.gif) no-repeat 0px 0px; padding-left