jQuery插件的使用和写法

插件也称为扩展，是一种遵循一定规范的应用程序接口编写出来的程序，最新最全的插件可以从jQuery官方网站的插件版块中获取，网站地址为：http://plugins.jquery.com/。

一.jQuery表单验证插件—Validation

1.Validation简介

作为一个标准的验证方法库，Validation拥有如下特点：

内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则。

自定义验证规则：可以很方便地自定义验证规则。

简单 强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能。

实时验证：可以通过keyup或blur事件触发验证，而不仅仅在表单提交的时候验证。

2.下载地址

jQuery Validation插件的下载地址：

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

3.快速上手

进行以下操作就可以将一个普通的表单改造为可以进行Validation验证的表单：

引入jQuery库和Validation插件

<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.validation.js" type="text/javascript"></script>

确定哪个表单需要验证

$("#commentForm").validate();

针对不同的字段，进行验证规则编码，设置字段相应的属性

class=”required”为必须填写，minlength=”2”为最小长度为2.

<input id="cusername" name="username" size="25" class="required" minlength="2"/>

class=”required email”为必须填写和内容需要符合E-mail格式。

class=”url”为url格式验证。

4.不同的验证写法

在上例中，开发者必须把required、url和email写到class属性里，要把minlength属性值设置为2，才能完成验证，很麻烦，Validation充分考虑到这一点，可以将所有验证有关的信息写到class属性中方便管理。

引入一个新的jQuery插件—jquery.metadata.js

<script src="lib/jquery.metadata.js" type="text/javascript"></script>

改变调用的验证方法

$("#commentForm").validate({meta:"validate"});

将验证规则全部写到class属性中

<input id="cusername" name="username" size="25" class="{validate:{required:true,minlength:2}}"/>

在上例中，验证行为和HTML结构并没有完全脱钩，下面介绍一种行为和结构分离的方法，通过name属性关联字段和验证规则的验证手法：

$(document).ready(function(){
$("#commentForm").validate({
rules:{
username:{required:true, minlength:2},
email:{required:true, email:true},
url:"url",
comment:"required"
}
});
});

5.验证信息

国际化

将验证信息改为中文，只需引入Validation提供的中文验证信息库即可：

<script src="lib/jquery.validate.messages_cn.js" type="text/javascript"></script>

自定义验证信息

class="{validate:{required:true,minlength:2,
messages:{required:'请输入姓名',minlength:'请至少输入两个字符'}}}"

自定义验证信息并美化

我们也需要为验证提示信息加些漂亮的图片，例如验证成功后的对勾，对于Validation插件来说很简单，在jquery代码中增加如下代码：

errorElement:"em",   //用来创建错误提示信息标签
success:function(label){ //验证成功后执行的回调函数，label指向上面那个错误提示信息标签em
label.text(" ")  //清空错误提示消息
.addclass("success");  //加上自定义的success类
}

在CSS代码中增加如下代码，以便和errorElement相关联

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:16px;
}

6.自定义验证规则（包括验证码等）

7.API

Validation插件的官方API地址为：

http://docs.jquery.com/Plugins/Validation.

二.jQuery表单插件—Form

1.Form插件简介

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入的升级HTML表单以支持Ajax。jQuery Form有两个核心方法—ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进程的功能。

2.下载地址

http://jquery.malsup.com/form#download

3.快速上手

在HTML页面上添加一个form表单，然后引入jQuery库和Form插件，并编写Ajax提交jQuery代码。

4.核心方法—ajaxForm()和ajaxSubmit()

可以通过核心方法ajaxForm()很容易将表单升级为Ajax提交方式：

$('#myForm').ajaxForm(function(){
$('#output1').html("提交成功！欢迎下次再来！").show();
});

还有一个核心方法ajaxSubmit(),也能完成同样功能：

$('#myForm').submit(function(){
$(this).ajaxSubmit(function(){
$('#output1').html("提交成功！欢迎下次再来！").show();
});
return false;  //阻止表单默认提交
});

5.ajaxForm()和ajaxSubmit()方法的参数

以上两种方法都能接受0个或者1个参数，当是一个参数时，既可以是一个回调函数，也可以是一个options对象，上面的例子就是回调函数，下面说options对象，首先定义一个对象options，然后在对象里设置参数：

var options={
target:'#output1',  //把服务器返回的内容放入id为output1的元素中
beforeSubmit:showRequest,  //提交前的回调函数
success:showResponse,  //提交后的回调函数
url:url,  //默认是form的action，如果申明，则会覆盖
type:type,   //默认是form的method（‘get’or‘post’），如果申明，则会覆盖
dataType:null,  //‘xml’，‘script’，or‘json’（接受服务端返回的类型）
clearForm:true,  //成功提交后，清除所有表单元素的值
resetForm:true,   //成功提交后，重置所有表单元素的值
timeout:3000  //限制请求的时间，当请求大于3秒后，跳出请求
};

6.表单提交之前验证表单

大多数情况下，表单提交之前都会对表单进行验证，如果不符合验证规则，则阻止表单提交，beforeSubmit会在表单提交前被调用，定义一个回调函数validate：

beforeSubmit:validate

编写validate函数，有三个参数：

function validate(formData,jqForm,options){
//若不符合验证，则返回false阻止提交，直至符合规则
var queryString=$.param(formDate);  //组装数据
return true;
}

Form插件获取表单数据的方式有多种，其中有下面三种方式：

利用参数formDate：这是一个数组对象，由于是数组，因此可以根据循环来获取每个元素的值，然后判断是否符合验证。

利用参数jqForm：参数jqForm是一个jQuery对象，封装了表单元素，可以把它转为DOM对象来访问，然后通过form.name.value和form.address.value来获取值。

fieldValue()方法会把匹配元素的值插入到数组中，然后返回这个数组。

三.模态窗口插件—SimpleModal

1.SimpleModal插件简介

它是一个轻量级的jQuery插件，为模态窗口的开发提供了一个强有力的接口，可以把它当做模态窗口的框架。

2.下载地址

http://www.ericmmartin.com/projects/simplemodal/

3.快速上手

它提供了两种简单方法来调用模态窗口：

第一种是作为一个链式的jQuery函数，可以在一个用jQuery获取的元素上调用modal()函数，之后用这个元素的内容来显示一个模态窗口：

$("#element-id").modal();

第二种方法是作为一个单独函数使用，通过传递一个jQuery对象，DOM元素或纯文本来创建一个模态窗口：

$.modal("<div><h1>SimpleModal</h1></div>",{options});

上面的例子只是创建非常基本的没有样式模态窗口，我们也可以通过外部CSS，选项对象或两个一起来应用样式。SimpleModal在内部定义了如下CSS类：simplemodal-overlay，simplemodal-container，simplemodal-wrap和simplemodal-data。

4.关闭模态窗口

SimpleModal自动为模态窗口内class是“simplemodal-close”的元素绑定了关闭函数。

四.管理Cookie的插件—Cookie

1.Cookie插件简介

Cookie是网站设计者放置在客户端的小文本文件，Cookie能为用户提供很多的便利，例如购物网站存储用户曾经浏览过的产品列表，或者门户网站记住用户喜欢选择浏览哪类新闻。在用户允许的情况下，还可以存储用户的登录信息，使得用户在访问网站时不必每次都键入这些信息。

2.下载地址

https://github.com/carhartl/jquery-cookie

3.Cookie API

写入Cookie

$.cookie('the_cookie','the_value');  //the_cookie为待写入的Cookie名，the_value为待写入的值

读取Cookie

$.cookie('the_cookie');  //待读取的Cookie名

删除Cookie

$.cookie('the_cookie',null);  //必须使用与之前设置时相同的路径（path）和域名（domain）。

其他可选参数

$.cookie('the_cookie','the_value',{
expires:7,  //有效期
path:'/',  //cookie的路径属性
damain:'jquery.com',  //cookie的域名属性
secure:true  //若为true，此cookie的传输会要求一个安全协议，例如HTTPS。
});