如何利用jQuery做一个简单的插件

 目前市面上存在各种各样的JQuery插件，那么我们如何去做一个自己的插件呢，其实就是扩展一下jQuery的方法。下面来实现一个简单的改变背景颜色的插件。

利用jQuery可以很容实现改变背景颜色的功能，调用jQuery的选择器工具，并调用css()方法就可以实现改变背景颜色的方法。

$.changeBackgrounColor=function (color) {
    $(".cls").css("backgroundColor",color);
};

现在问题就是，如何让你的js可以供大家使用呢？

首先，方法很简单，$.fn.myFunction= function () {} ，这样的jQuery就获得了myFunction的方法。在引用你的js文件后，可以调用$(.test).myFunction(). 下面这个例子就写出了这个过程。

$.fn.changeBackgrounColor对jQuery进行扩展，控制参数color，这样就能改变".cls"这个标签下的背景颜色了,对上面的代码进行改造。

$.fn.changeBackgrounColor=function (color) {
    $(".cls").css("backgroundColor",color);
};

      上述也就短短3行，就可以对jQuery进行扩展了，这样就完成了一个非常简单的jQuery插件。那么如何使用我们插件呢

代码如下:

<link rel="stylesheet" href="changeColor.css">

<script src="jquery-1.12.2.js"></script>

<script src="changeColor.js"></script>

$(function () {
    //点击每个按钮改变每个div的背景颜色
    $("input[type=button]").click(function () {
        $(".cls").changeBackgrounColor($(this).val());
    });
});

html部分：

<input type="button" value="green"/>
<input type="button" value="red"/>
<input type="button" value="blue"/>
<div id="dv">
    <div class="cls"></div>
    <div class="cls"></div>
    <div class="cls"></div>
    <div class="cls"></div>
    <div class="cls"></div>
</div>

在引用自己的css文件，jQuery文件以及自己定义个jQuery后，我们就可以使用它，

也就是$(".cls").changeBackgrounColor($(this).val());

上述就是自定义jQuery的全部过程，重点在于使用$.fn方法来扩展jQuery方法并进行使用。