jQuery插件的简单使用及制作

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

使用jQuery插件的步骤：

第一步：引入jQuery文件；

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

第三步：使用插件。

常用的jQuery插件：

1、jquery.color.js

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

注意：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）。这样就可以很容易地进行图像插件捆绑。

方法使用：

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

完整代码如下：

让所有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;
};

第三步：验证插件

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

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