目前市面上存在各种各样的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方法并进行使用。