1.表单验证插件之validate
该插件自带包含必填，数字，URL在内的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：
$(form).validate({options})
其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。
例如：当点击表单中的“提交”按钮时，调用validate插件验证用户名输入是否符合规则，并将异常信息显示在页面中，如下所示：
<body>
<form id="frmV" method="get" action="#">
<div id="test">
<div class="title">
<span class="fl">表单验证插件</span>
<span class="fr">
<input id="btn" type="submit" value="提交"/>
</span>
</div>
<div class="content">
<span class="fl">邮箱：</span><br/>
<input id="email" name="email" type="text"/><br/>
<span class="tip"></span>
</div>
</div>
</form>
<script type="text/javascript">
$(function(){
$("#frmV").validate(
{
/*自定义验证规则*/
rules:{
email:{
required:true,
email:true
}
},
/*错误提示位置*/
errorPlacement:function(error,element){
error.appendTo(".tip")
}
}
);
});
</script>
</body>
在浏览器中显示的效果：
从图中可以看出，在页面中导入了validate插件，当用户在输入框中录入用户名时，自动根据规则进行验证，并显示提示信息，验证成功后，表单才能提交。
2.表单插件之form
通过表单form插件，调用 ajaxaform() 方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：
$(form).ajaxForm({options})
其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
例如：在页面中点击“提交”按钮，调用form插件的 ajaxForm() 方法向服务器发送录入的用户名和密码数据，服务器接收后返回并显示在页面中，如下所示：
<body>
<form id="frmV" method="post" action="#">
<div id="test">
<div class="title">
<span class="fl">用户登录页</span>
<span class="fr">
<input id="btn" type="submit" value="提交"/>
</span>
</div>
<div class="content">
<span class="fl">用户名：</span><br/>
<input id="user" name="user" type="text"/><br/>
<span class="fr">密码：</span><br/>
<input id="pass" name="pass" type="password"/>
<div class="tip"></div>
</div>
</div>
</form>
<script type="text/javascript">
$(function(){
var options = {
url:"Date/form.php",
target:".tip"
}
$("#frmV").ajaxForm(options);
});
</script>
</body>
在浏览器中显示效果：
从图中可以看出，当点击“提交”按钮时，调用form表单插件中的ajaxForm()方法向指定的服务器以ajax方式发送数据，服务器接收后返回并将数据显示。
3.图片灯箱插件之lightBox
该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：
$(linkimage).lightBox({options})
其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
例如：以列表的方式在页面中展示全部的图片，当用户单击其中某张图片时，通过引入的图片插件，采用“灯箱”的方式显示所选的图片，如下所示：
<body>
<div id="test">
<div class="title">
<span class="fl">我的相册</span>
</div>
<div class="content">
<div class="pics">
<ul>
<li><a href="Pics/img01.jpg" title="第1篇风景图片"><img src="Pics/img01.jpg"></a></li>
<li><a href="Pics/img02.jpg" title="第2篇风景图片"><img src="Pics/img02.jpg"></a></li>
<li><a href="Pics/img03.jpg" title="第3篇风景图片"><img src="Pics/img03.jpg"></a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".pics a").lightBox({
overlayBgColor:"#666",//图片浏览时的背景色
overlayOpacity:0.5,//背景色的透明度
containerResizeSpeed:600//图片切换时的速度
});
});
</script>
</body>
在浏览器中显示的效果：
从图中可以看出，当用户点击“我的相册”中某一张图片时，则采用“灯箱”的方式显示选中图片，在显示图片时，还可以切换上下张和自动播放及关闭图片
4.图片放大镜插件之jqzoom
在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的 jqzoom() 方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：
$(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称，options为插件方法的配置对象。
例如：在页面中，添加一个被<a>元素包含的图片元素，当在图片元素中移动鼠标时，在图片的右边，将显示放大后的所选区域效果，如下所示：
<body>
<div id="test">
<div class="title">
<span class="fl">图片放大镜</span>
</div>
<div class="content">
<div class="pics">
<a href="Images/bag.jpg" id="jqzoom" title="我的背包"><img src="Images/bagsmall.jpg"></a>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$("#jqzoom").jqzoom({//绑定图片放大镜插件jqzoom
zoomWidth:230,//小图片所选区域的宽
zoomHeight:230,//小图片所选区域的高
zoomType:"reverse"//设置放大镜的类型
});
});
</script>
</body>
在浏览器中显示的效果：
从图中可以看出，当在小图片中移动鼠标时，将调用放大镜插件的 jqzoom() 方法，在图片的右侧显示与小图片所选区域相同的放大区域，实现放大镜的效果。