最近有个项目需要提供个js插件给第三方使用，于是便想到了jquery的插件，然后上网查询了jquery插件的写法，由于本站长有jquery相关经验，所以上手很快，至于插件的好处以及理论在这里不多说了，实现插件步骤如下：
一、下载jquery的依赖库
下载地址http://jquery.com/ ，刚访问了下，jquery已经到3.x版本了，还真快啊
本案例基于jquery2.x版本。
二，新建demo.html 和myplugin.js
myplugin.js是我们的插件文件
一）、jQuery插件开发方式
1、通过$.extend()来扩展jQuery
2、通过$.fn 向jQuery添加新的方法
3、通过$.widget()应用jQuery UI的部件工厂方式创建
本案例采用$.fn方式插件开发
语法：
$.fn.pluginName = function() {
//your code here
}说明
基本上就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。
简单实例
将页面上所有链接颜色转成红色，则可以这样写这个插件
myplugin.js代码
$.fn.myPlugin = function() {
//在这里面,this指的是用jQuery选中的元素
//example :$('a'),则this=$('a')
this.css('color', 'red');
}1)、在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。
(2)、如果通过调用jQuery的.each()方法处理集合中的每个元素时要注意的是，在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下。
demo.html使用myplugin.js插件
<ul>
<li>
<a href="#">aaa</a>
</li>
<li>
<a href="#">bbb</a>
</li>
<li>
<a href="#">ccc</a>
</li>
</ul>
<p>这是p标签不是a标签，我不会受影响</p>
<script src="jquery-2.0.3.min.js"></script>
<script src="myplugin.js"></script>
<script type="text/javascript">
$(function(){
$('a').myPlugin();
})
</script>效果如下
全部源码
demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>V型知识库--www.vxzsk.com原创</title>
</head>
<script src="jquery-2.0.3.min.js"></script>
<script src="myplugin.js"></script>
<body>
<ul>
<li>
<a href="#">aaa</a>
</li>
<li>
<a href="#">bbb</a>
</li>
<li>
<a href="#">ccc</a>
</li>
</ul>
<p>这是p标签不是a标签，我不会受影响</p>
</body>
<script>
jQuery(document).ready(function(){
$(function(){
$('a').myPlugin('1');
})
});
</script>
</html>myplugin.js
(function ($) {
$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({}, defaults, options);
alert(options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}
$.fn.myPlugin2 = function(options) {
var defaults = {
'color': '#000',
'fontSize': '32px'
};
var settings = $.extend({}, defaults, options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}
})(jQuery);感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程