1. 表单验证插件——validate

该插件自带包含必填、数字、URL在内容的验证规则，即时显示异常信息，此外，还允许自定义验证规则，插件调用方法如下：$(form).validate({options})

其中form参数表示表单元素名称，options参数表示调用方法时的配置对象，所有的验证规则和异常信息显示的位置都在该对象中进行设置。

        
     
       			
                  
      
                               
       
                    $(function () {                $("#frmV").validate(                  {                      /*自定义验证规则*/                      rules: {                            email:{                                required: true,                                email: true                                                     }                      },                      /*错误提示位置*/                      errorPlacement: function (error, element) {                          error.appendTo(".tip");                      }                  }                );            });        
       
      
     

2. 表单插件——form

通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：$(form). ajaxForm ({options})

其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。

        
     
                          
                          
      
                               
       
                    $(function () {                var options = {                    url: "http://www.imooc.com/data/form_f.php",                     target: ".tip"                }                $("#frmV").ajaxForm(options);            });        
       
      
     

3. 该插件可以用圆角的方式展示选择中的图片，使用按钮查看上下张图片，在加载图片时自带进度条，还能以自动播放的方式浏览图片，调用格式如下：$(linkp_w_picpath).lightBox({options})

其中linkp_w_picpath参数为包含图片的<a>元素名称，options为插件方法的配置对象。

            
     
                      
      
                           
       
                                
        
         
                                      
                                  
         
                        
        
         
                                      
                                  
         
                        
        
         
                                      
                                  
         
                    
       
                                    
       
                    $(function () {                $("a").lightBox({                    overlayBgColor: "#666", //图片浏览时的背景色                    overlayOpacity: 0.5, //背景色的透明度                    containerResizeSpeed: 600 //图片切换时的速度                });            });        
       
      
     

4. 图片放大镜插件——jqzoom

在调用jqzoom图片放大镜插件时，需要准备一大一小两张一样的图片，在页面中显示小图片，当鼠标在小图片中移动时，调用该插件的jqzoom()方法，显示与小图片相同的大图片区域，从而实现放大镜的效果，调用格式如下：$(linkp_w_picpath).jqzoom({options})

其中linkp_w_picpath参数为包含图片的<a>元素名称，options为插件方法的配置对象。

            
     
                      
      
               	         
                                         
       
                    $(function () {                $("a").jqzoom({ //绑定图片放大插件jqzoom                    zoomWidth: 123, //小图片所选区域的宽                    zoomHeight: 123, //小图片所选区域的高                    zoomType: 'reverse' //设置放大镜的类型                });            });        
       
      
     

5. cookie插件——cookie

使用cookie插件后，可以很方便地通过cookie对象保存、读取、删除用户的信息，还能通过cookie插件保存用户的浏览记录，它的调用格式为：

保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)

其中参数key为保存cookie对象的名称，value为名称对应的cookie值。

 
     
                      
      
       邮箱：
                       
       
                       
       是否保存邮箱                        
       
                    $(function () {                if ($.cookie("email")) {                    $("#email").val($.cookie("email"));                }                $("#btnSet").bind("click", function () {                    if ($("#chksave").is(":checked")) {                        $.cookie("email", $("#email").val(), {                            path: "/", expires: 7                        })                    }                    else {                         $.cookie("email", null, {                            path: "/"                        })                    }                });            });        
       
      
     

6. 搜索插件——autocomplete

搜索插件的功能是通过插件的autocomplete()方法与文本框相绑定，当文本框输入字符时，绑定后的插件将返回与字符相近的字符串提示选择，调用格式如下：

$(textbox).autocomplete(urlData,[options]);

其中，textbox参数为文本框元素名称，urlData为插件返回的相近字符串数据，可选项参数options为调用插件方法时的配置对象。

            
     
                      
      
       用户名
                       
                       
       
                                                
        
                     $(function () {                var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];                $("#txtSearch").autocomplete(arrUserName, {                    minChars: 0, //双击空白文本框时显示全部提示数据                    formatItem: function (data, i, total) {                        return "
         " + data[0] + ""; //改变匹配数据显示的格式                    },                    formatMatch: function (data, i, total) {                        return data[0];                    },                    formatResult: function (data) {                        return data[0];                    }                }).result(SearchCallback);                 function SearchCallback(event, data, formatted) {                    $(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));                }            });