引言：
工欲善其事必先利其器——论语。学会使用工具，提高的不仅仅是效率，还节省你的时间去做更多的事情。
概述：
本篇博客，小编为大家简单介绍几种使用频繁的jQuery插件。先说说什么插件，插件是一种遵循一定规范的应用程序接口。由于jQuery的开发性和易扩展性，所以赋予其大量的插件。本次介绍的插件，一共四种，分别是表单、验证、右键菜单、图片弹窗四种插件。接下来，为大家分别介绍一下。
内容：
一 表单插件
jQuery表单插件指的就是jQuery Form插件，Form是一个优秀的Ajax表单插件。jQuery Form包括俩大核心方法——ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素到提交表单的功能。除此之外，jQuery Form还有如下方法：formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearFrom()、chearFields()、resetFrom()等，不过这些方法并不常用，所以只供了解即可。我们通过Form表单的俩个核心方法可以在不修改表单HTML代码结构的情况下，轻易地将表单的提交方式升级为Ajax提交方式。
Form俩个核心方法都可以接收0个或1个参数，当接收一个参数时，该参数既可以是回调函数，也可以是一个options对象，利用options对象做参数，可以对表单拥有更多的控制权。下面就这俩种方式，展示俩个小例子为大家：
1 参数为回调函数：
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
//DOM加载完毕后执行
$(document).ready(function(){
//绑定‘myForm’并定义一个简单的回调函数
$('#myForm').ajaxForm(function(){
alert("评论提交完成");
});
});
</script>
</head>
<body>
<form id="myForm" action="" method="post">
姓名：<input type="text" name="name" id="name"/>
评论：<textarea name="comment" id="comment"></textarea>
<input type="submit" value="提交评论"/>
</form>
</body>
</html>
2 参数为options对象：
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
//页面载入事件
$(function(){
//定义表单提交前与提交后的处理方法及请求的超时时间
var options ={
beforeSubmit: showRequest,
success : showResponse,
timeout:3000
};
$("#myForm").submit(function(){
$(this).ajaxSubmit(options); //表单提交
//返回false阻止浏览器默认的提交
return false;
});
});
//定义提交前的方法
function showRequest(formData,jqForm,options){
return true;
}
//定义提交后的方法
function showResponse(responseText,statusText,xhr,$form)
{
alert("提交完成");
}
</script>
</head>
<body>
<form id="myForm" action="" method="post">
姓名：<input type="text" name="name" id="name"/>
评论：<textarea name="comment" id="comment"></textarea>
<input id="input" type="submit" value="提交评论" />
</form>
</body>
</html>
二：验证插件
在web应用程序中，注册登录页面离不开信息验证，验证分俩次进行，一次是在浏览器页面，一次是在服务器端，这个在SSH中已经很清楚的接触过。
由于JavaScript在页面中一个最主要的应用场合就是表单验证，jQuery提供了一个表单验证插件Validation，该插件简单地实现了客户端信息验证，过滤不符合要求的信息。该插件不仅可以验证表单子元素是否为空，同时也可以为子元素创建各自的自定义格式验证规则，还可以利用插件中jQuery.validator.addMethod()方法来定义新的验证规则。
实现原理：利用页面中的表单元素调用jQuery Validation插件的validate()方法即可，需要注意的是要下载jquery.validate.js，且引入到你的HTML页面的head标签里面。
下面为大家简单展示一个例子，jQuery Validation插件定义新的验证规则：
<html>
<head>
<style type="text/css">
.error{
color:red;
margin-left:8px;
}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
//页面载入事件
$(function(){
//字符验证
jQuery.validator.addMethod("stringCheck",function(value,element){
return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
},"只能包括中文、英文字母、数字和下划线");
$("#submitForm").validate({
/**//*设置验证规则*/
rules:{
username:{
required :true,
stringCheck:true
},
messages:{
required:"请填写用户名",
stringCheck: "用户名只能包括中文、英文字母、数字和下划线"
}
}
});
});
</script>
</head>
<body>
<form class="submitForm" id="submitForm" action="" method="get">
<p>
<label for="username">用户名</label>
<em>*</em><input id="username" name="username" size="20"/>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</form>
</body>
</html>
三 ：右键菜单插件
jQuery右键菜单插件（ContextMenu）可以在页面的特点区域弹出右键菜单，可以通过参数配置和指定ID项俩种方式添加右键菜单，这俩种方式都支持回调函数。
基本语法：$(elements).contextMenu(string menu_id [,object setting])，参数menu_id表示在<div>标签中定义的id属性值，可以为一个或者多个标签绑定同一个菜单，如$("table td").contextMenu("myMenu")将会给所有的<td>标签添加id是myMenu的菜单；参数setting是可选的，用于改变菜单的样式和为菜单项绑定回调函数。
我们都用过其他右键菜单的插件，其实都是通过这种方式封装而成的，所以打好基础我们自己也能封装插件。
四：图片弹窗插件
Lightbox是一款优秀的jQuery弹窗插件，能够为图片提供弹出缩放特效。
首先要在页面添加如下俩句引用JS文件的语句：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <a href="image/image-1.jpg" class="lightbox" title="my frame">image my</a>总结：
jQuery的插件都是一些程序员在jQuery不能满足需求的情况下，封装的一些jQuery代码。这么说来，我们自己也可以封装一些jQuery插件，但是前提我们要有扎实的基础，把jQuery自带的插件研究个遍，这样才能封装出easyUI等高大上的页面插件。
4414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
