1、validate  $(form).validate({options})
其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置。
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.validate.messages_cn.js"></script>
<script type="text/javascript">
    $(function () {
        $("#frmV").validate(
            {
              /*自定义验证规则*/
              rules: {
                    email:{
                        required:true,
                        email:true
                    }
            },
            /*错误提示位置*/
            errorPlacement: function (error, element) {
                error.appendTo(".tip");
            }
        });
    });
</script>

2、ajaxForm  $(form). ajaxForm ({options})
其中form参数表示表单元素名称;options是一个配置对象,用于在发送ajax请求过程,设置发送时的数据和参数
<script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script>
<script type="text/javascript">
    $(function () {
        var options = {
            url: "http://www.imooc.com/data/form_f.php", 
            target: ".tip"
        }
        $("#frmV").ajaxForm(options);
    });
</script>

3、lightBox  $(linkimage).lightBox({options})
<script type="text/javascript" src="http://www.imooc.com/data/jquery.notesforlightbox.js"></script>
<div id="divtest">
<div class="title">
    <span class="fl">我的相册</span>
</div>
<div class="content">
    <div class="divPics">
        <ul>
            <li><a href="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" title="第1篇风景图片">
                <img src="http://img.mukewang.com/52e489f20001ecfc04480275.jpg" alt="" />
            </a></li>
            <li><a href="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" title="第2篇风景图片">
                <img src="http://img.mukewang.com/52e48a1e0001eec804480275.jpg" alt="" />
            </a></li>
            <li><a href="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" title="第3篇风景图片">
                <img src="http://img.mukewang.com/52e48a4c00015ad204480275.jpg" alt="" />
            </a></li>
        </ul>
    </div>
</div>
</div>

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

4、jqzoom  $(linkimage).jqzoom({options})
其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。
 <script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>
 <div id="divtest">
<div class="title">
    <span class="fl">图片放大镜</span> 
</div>
<div class="content">
    <a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖">
         <img src="http://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/>
    </a>
</div>
</div>

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