jQuery插件：jQuery不可能包含所有的功能，那么就可以通过插件扩展jQuery的功能，jQuery有丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

使用jQuery插件的步骤：

第一步：引入jQuery文件；

第二步：引入插件文件（如果有用到css的话，需要引入css文件）；

第三步：使用插件。

常用的jQuery插件：

1、jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>

<!--1、引入jquery的js文件-->
<script src="jquery/jquery-3.3.1.js"></script>
<!--2、引入插件的js文件-->
<script src="jquery/jquery.color.js"></script>
<script>
    $(document).ready(function(){
        //3、直接使用即可
        $(".box").animate({
            backgroundColor:"#64FF48",
            width:"400px",
            height:"400px"
        },3000,function(){
            alert("改变了样式");
        });
    });
</script>
</body>
</html>

注意：jQuery不支持颜色的渐变，有的颜色的单词，jQuery不识别，例如pink，所以颜色最好用16进制。

2、jquery.lazyload.js

懒加载插件官网下载地址：http://plugins.jquery.com/lazyload/

详细介绍：jQuery延迟加载(懒加载)插件 – jquery.lazyload.js

懒加载插件可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置.。

使用jquery.lazyload.js延迟加载图片，必须改变图片的标签。图像的地址必须放在data-original属性上。即：img标签的src属性改为data-original属性。

可给懒加载图像一个特定的class（例如:lazy）。这样就可以很容易地进行图像插件捆绑。

<img class="lazy" data-original="images/1.jpg" alt=""/>

方法使用：

    $(document).ready(function(){
        $(".lazy").lazyload();
    });

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            height: 2000px;
        }
        .lazy{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<div class="box"></div>
<img class="lazy" data-original="images/1.jpg" alt=""/>
<img class="lazy" data-original="images/2.jpg" alt=""/>
<img class="lazy" data-original="images/1.jpg" alt=""/>
<img class="lazy" data-original="images/2.jpg" alt=""/>
<img class="lazy" data-original="images/1.jpg" alt=""/>
<img class="lazy" data-original="images/2.jpg" alt=""/>
<img class="lazy" data-original="images/1.jpg" alt=""/>
<img class="lazy" data-original="images/2.jpg" alt=""/>

<script src="jquery/jquery-3.3.1.js"></script>
<script src="jquery/jquery.lazyload.js"></script>
<script>
    $(document).ready(function(){
        $(".lazy").lazyload();
    });
</script>
</body>
</html>

让所有class="lazy"的图像延迟加载。

使用了data-original就不要写src了，要不然没有效果

在没有完全获取到图片的资源前，是得不到图片的宽高的，所以预先设置宽高，让它提前有个占位

3、jquery.ui.js

使用方法：

第一步：引入jQueryUI的样式文件

第二步：引入jQuery

第三步：引入jQueryUI的js文件

第四步：使用jQueryUI功能

制作jQuery插件

原理：jQuery插件的实质，其实就是给jQuery原型对象增加一个新的方法，让jQuery对象拥有某一个功能。

通常通过给$.fn添加方法就能够扩展jQuery对象。

$是jQuery的简写，fn是prototype的简写。

$.fn就相当于jQuery.prototype

语法：$.fn.方法名 = function(){};

第一步：创建一个js文件，文件名：jquery.插件名.js ；注意不要与jQuery官网现有插件重名。

例如：命名 jquery.myColor.js 作用：改变背景颜色

第二步：书写代码，给jQuery原型对象添加一个与插件名相同的方法。

$.fn.myColor = function(color){
    //this指当前操作这个方法的jQuery对象
    this.css("background-color",color);
    //为了实现链式编程
    return this;
};

第三步：验证插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: #ff151a;
        }
    </style>
</head>
<body>
<div class="box"></div>

<!--引入jQuery文件-->
<script src="jquery/jquery-3.3.1.js"></script>
<!--引入自己制作的插件文件-->
<script src="jquery/jquery.myColor.js"></script>
<!--验证插件作用-->
<script>
    $(document).ready(function(){

        $(".box").myColor("#64FF2D").width("400px");

    });
</script>
</body>
</html>

验证结果：可以改变元素背景颜色。

这样一个简单的jQuery插件就制作完成了

jQuery插件的简单使用及制作