jQuery插件

使用jQuery来封装的一个功能或特效。
jQuery插件的引入必须要放到jQuery库文件的下面，不然jQuery插件无法生效。道理很简单，因为jQuery插件就是使用jQuery的语法来编写的。

文本溢出：dotdotdot.js

想要实现“多行文本”的省略号效果，可以使dotdotdot.js这个jQuery插件来实现。

  <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.dotdotdot.js"></script>
    <script>
        $(function(){
            $("div").dotdotdot();
        })
    </script>

dotdotdot.js的使用方法非常简单：首先为元素定义一个宽度和高度，然后针对该元素使用dotdotdot()这个方法就可以了。当内容超出元素时，就会以省略号的形式来显示。

延迟加载：lazyload.js

lazyload.js这个插件实现图片的延迟加载，也就是只有把滚动条拉到相应的位置，此处的图片才会显示出来，否则不会显示出来。
① 引入jQuery库和lazyload.js，如下所示：

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>

② 图片的src用data-origin代替，如下所示：

<img class="lazy" data-original="img/haizei1.png" alt="">

③ 添加jQuery代码，如下所示：

$().lazyload({
    effect: "fadeIn"
});

例如：

 <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>
    <script>
        $(function(){
            $("img").lazyload({
                effect: "fadeIn"
            });
        })
    </script>
<div></div>
    <img data-original="img/haizei1.png" alt="">
    <img data-original="img/haizei2.png" alt="">

例子中，还没拖动滚动条的时候，图片是没有加载的，因为没有src属性。
当我们拖动滚动条到底部，也就是让图片进入“可视”范围内时，lazyload就会自动为图片添加src属性，此时图片会以渐入的形式显示出来。控制台中img会出现src属性。

复制粘贴：zclip.js

jQuery中，我们可以使用zclip.js插件来实现页面文本的复制粘贴，只需要两步就可以了。
① 引入jQuery库和zclip.js，如下所示：

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.zclip.min.js"></script>

② 添加jQuery代码，如下所示：

<script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.zclip.min.js"></script>
    <script>
        $(function(){
            $("#btn").zclip({
                path: "js/ZeroClipboard.swf",
                copy: function () {
                    return $("#txt").val()
                },
                afterCopy: function () {
                    alert("复制成功")
                }
            })
        })
    </script>

zclip.js插件是借助Flash来实现复制的，因此我们需要使用path参数引入相应的Flash文件地址。此外，zclip.js是依赖于服务器环境的，如果仅仅是使用本地环境，是没有效果的。

表单验证：validate.js

① 引入jQuery库、validate.js以及message_zh.js，如下所示：

<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/jquery.message_zh.min.js"></script>

② 添加jQuery代码，如下所示

<script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/message_zh.min.js"></script>
    <script>
        $(function(){
            $("#myform").validate({
                //自定义验证规则
                rules:{
                    myname:{required:true,maxlength:6},
                    myemail:{required:true,email:true}
                }
            })
        })
    </script>

myname:{required:true,maxlength:6}表示id="myname"这个文本框是一个必填的，并且最大长度为6个字符。
myemail:{required:true,email:true}表示id="myemail"这个文本框是必填的，并且启动email验证规则。
validate.js插件https://plugins.jquery.com/validate/

自定义jQuery插件

（1）方法类插件
（2）函数类插件
（3）选择器插件
对于选择器插件，很少人会去开发使用，因为jQuery内置的选择器已经足够完善了，所以这一节我只会学习方法类插件和函数类插件。

一、方法类插件

可以使用$.fn.extend()方法来定义一个方法类插件。方法类插件，说白了就是：首先你使用了jQuery选择器来获取一个jQuery对象，然后针对你获取的这个jQuery对象添加一个方法。

(function($){
    $.fn.extend({
        "插件名": function(参数){
            ……
        }
    });
})(jQuery);

(function(){})()是JavaScript立即执行函数，这种用法在实际开发中经常用到。

例

(function(){
            $.fn.extend({
                //插件名为“changeColor”，有两个参数：fgcolor、bgcolor
                "changeColor":function(fgcolor,bgcolor){
                    //定义鼠标移入移出效果
                    $(this).mouseover(function () {
                        $(this).css({"color":fgcolor,"background":bgcolor});
                    }).mouseout(function () {  
                        $(this).css({"color":"black","background":"white"});
                    });
                    //返回jQuery对象，以便链式调用
                    return $(this);
                }
            })
        })(jQuery);

其中，fgcolor是“字体颜色”，bgcolor是“背景颜色”
在插件的最后，我们还需要使用return $(this)返回当前的jQuery对象，从而保持链式调用的功能。

如果参数比较多的话，我们应该定义一个参数对象option，然后把需要传给插件的参数一股脑儿都放在参数对象中就可以了，优化后的代码如下：

(function(){
            $.fn.extend({
                "color":function(options){
                    $(this).mouseover(function () {
                        $(this).css({"color":options.fgcolor,"background":options.bgcolor});
                    }).mouseout(function () {  
                        $(this).css({"color":"black","background":"white"});
                    });
                    return $(this);
                }
            })
        })(jQuery);


//调用插件
 $("h1").color({ fgcolor: "red", bgcolor: "#F1F1F1" });

例：设置参数的默认值

 //定义插件
        (function(){
            $.fn.extend({
                "color":function(options){
                    //设置参数的默认值
                    var defaults = {
                        fgcolor: "hotpink",
                        bgcolor: "lightskyblue"
                    };
                    var options = $.extend(defaults, options);
                    $(this).mouseover(function () {
                        $(this).css({"color":options.fgcolor,"background":options.bgcolor});
                    }).mouseout(function () {  
                        $(this).css({"color":"black","background":"white"});
                    });
                    return $(this);
                }
            })
        })(jQuery);
//调用插件
            $("h1").color();

要设置参数的默认值，我们需要在插件内部另外定义一个选项对象，然后使用.extend()，来将参数对象options和选项对象defaults合并成一个对象。.extend()方法允许你使用一个或多个对象来扩展一个基准对象，扩展的方式是依序将右边的对象合并到基准对象（也就是左边第一个对象）。

封装多个插件

如果想要同时封装多个jQuery插件，我们可以采用以下的语法：

(function($){
    $.fn.extend({
        "插件1": function(参数){
            ……
        },
        "插件2": function(参数){
            ……
        },
        "插件3": function(参数){
            ……
        }
    });
})(jQuery);

二、函数类插件

实际上，“工具函数”跟“函数类插件”说白了就是一个玩意！函数类插件的语法跟方法类插件的差不多，仅仅是把.fn.extend()换成.extend()就可以了。

(function($){
    $.extend({
        "插件名": function(){
            ……
        }
    });
})(jQuery)

 (function($){
            $.extend({
                "maxNum": function(m, n){
                    return (m>n)?m:n;
                }
            });
        })(jQuery)
        $(function () {
            var result=$.maxNum(10, 5)
            console.log("最大值是："+result);
        })

方法类与函数类，两者最大的不同在于：函数类插件是在全局对象下定义一个方法，而方法类插件是在所获取的jQuery对象下定义一个方法。
方法类插件可以使用jQuery中功能强大的选择器，调用方式一般是：

$(选择器).插件名()

而函数类插件不可以使用jQuery选择器，其调用方式一般是：

$.函数名()

在实际开发中，我们所说的jQuery插件一般指的是方法类插件

总结

一下jQuery插件，有以下几点是比较重要的。
• （1）插件的文件命名必须严格按照jquery.[插件名].js或jquery.[插件名].min.js的格式。
• （2）在插件的最后必须使用return $(this)来返回当前jQuery对象，以便保持链式调用的功能。
• （3）无论是哪一种插件，定义的结尾都必须以分号结束，否则文件被压缩后，可能会出现错误。
• （4）方法类插件使用的是$.fn.extend()，而函数类插件使用的是$.extend()。我们常说的jQuery插件，指的都是方法类插件。
• （5）$.extend()是在jQuery全局对象上扩展一个方法，而$.fn.extend()是在选择器上扩展一个方法。因此定义工具函数应该用$.extend()，而定义jQuery插件应该用$.fn.extend()。

问答题

1. 在jQuery中，.extend()与.fn.extend()这两个方法之间有什么区别？
   方法类插件使用的是$.fn.extend()，而函数类插件使用的是$.extend()。
   $.extend()是在jQuery全局对象上扩展一个方法，而$.fn.extend()是在选择器上扩展一个方法。因此定义工具函数应该用$.extend()，而定义jQuery插件应该用$.fn.extend()