使用jQuery写插件
jQuery一直在用，但是却没有自己写过插件，看了几篇博客，想整理一下。
jQuery编写插件的方式：
接下来分别举例介绍它们：
参考文章
1、类级别的静态开发就是给jQuery添加静态方法。
首先创建classDev.js文件，
//1、直接给jQuery添加全局函数
jQuery.myAlert1 = function(str1){
alert(str1);
};
//2、使用extend方法，jQuery.extend(object)；把两个或更多的对象合并到第一个当中，
// 为扩展jQuery类本身，为自身添加新的方法。
jQuery.extend({
myAlert2: function(str2){
alert(str2);
},
myAlert3: function(){
alert("3333");
}
});
//3、使用命名空间（防止与其它引入的JS库里面的同名方法冲突）
jQuery.test = {
myAlert4: function(str4){
alert(str4);
},
centerWindow: function(obj){
console.log($(window).height());
console.log(obj.height());
obj.css({
'top': ($(window).height() - obj.height())/2,
'left': ($(window).width() - obj.width())/2
});
return obj; //返回对象，才能进行链式调用
}
};其次，创建html文件，引入jQuery源文件以及classDev.js文件。并对classDev.js中的插件函数进行自定义调用：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">script>
<script src="classDev.js">script>
<script>
$(document).ready(function(){
$('#btn').click(function (){
$.myAlert1('我是调用jQuery编写的插件弹出的警告框');
$.myAlert2('我是调用jQuery的extend()方法编写的插件弹出的警告框');
$.myAlert3();
$.test.myAlert4('我是使用命名空间编写的插件弹出的警告框');
});
//使用centerWindow的居中功能，同时进行链式调用设置颜色。
$.test.centerWindow($('#div1')).css('background','red');
});
script>
head>
<body>
<div id="div1" style="position:absolute;width:50px;height:50px;">
<button id="btn" style="width:20px;height:20px;">button>
div>
body>
html>注意：classDev.js文件引用了jQuery的jQuery类，所以必须在其后引入。显示效果：
div已经居中显示，背景为红色，灰色button在div的左上角，点击button，会依次弹出myAlert1、myAlert2、myAlert3、myAlert4的消息。
如你所见，这种方式来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中的任何需要的地方调用它。但这种方法无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好的运用于所选择的元素身上，还是需要使用第二种开发方式。你所见到的或使用的插件也大多是通过此种方式开发。
2、对象级别的插件开发。
.fn中的fn是指prototype，即 . f n 中 的 f n 是 指 p r o t o t y p e ， 即 .fn = .prototype。加在fn上的方法及属性，会对每一个jQuery实例有效。如扩展.fn.abc()，即.fn.abc()是对jQuery扩展了一个abc方法，那么后面你的每一个jQuery实例都可以引用这个方法了。例如： . p r o t o t y p e 。 加 在 f n 上 的 方 法 及 属 性 ， 会 对 每 一 个 j Q u e r y 实 例 有 效 。 如 扩 展 . f n . a b c ( ) ， 即 . f n . a b c ( ) 是 对 j Q u e r y 扩 展 了 一 个 a b c 方 法 ， 那 么 后 面 你 的 每 一 个 j Q u e r y 实 例 都 可 以 引 用 这 个 方 法 了 。 例 如 ： (“#div”).abc()。
比如我们将上面页面中的div转成绿色，则可以将classDev.js改写成：
$.fn.myPlugin = function() {
//this指代jQuery选中的元素返回的集合，要进行链式调用，返回this即可。
this.css('backgroundColor', 'green');
}将html中对div进行操作的script部分变成：
$(function(){
$('#div1').myPlugin();
})可以看见div变成了绿色。但是为了让插件功能更加强大，例如让插件的使用者自己定义显示什么颜色，我们就需要在调用的时候给插件传入参数。并使用jQuery的extend()方法将参数对象合并。同时，如果对象中有同名属性时，合并的时候后面的会覆盖前面的。利用这一点，我们可以在插件里定义一个保存插件参数默认值的对象，同时将接受来的参数对象合并到默认对象上，最后就实现了用户指定了值的参数时使用指定的值，未指定的参数使用插件默认值。
jQuery官方给了一套对象级别开发插件的模板：
;(function ($) {
$.fn.plugin = function (options) {
var defaults = {
//各种参数、各种属性
};
//options合并到defaults上，defaults继承了options上的各种属性和方法，将所有的赋值给endOptions
var endOptions = $.extend(defaults, options);
this.each(function(){
//实现功能的代码；
});
};
})(jQuery);关于模板的几点说明：
* 使用自调用匿名函数包裹了代码，不会污染全局命名空间，同时不会和别的代码起冲突；并且，自调用匿名函数里面的代码会在第一时间执行，页面准备好过后，上面的代码就将插件准备好了，以方便在后面的代码中使用插件。
* 代码前加分号，防止前面别人写的代码没有用分号结尾；
* 将jQuery变量以参数形式传递到插件内部，这样，jQuery在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能提升。
jQuery轮播图插件：
之前自己用js写过原生的轮播图，步骤：
* 把当前索引index的图片显示，导航icon高亮；其余图片隐藏；
* 向左向右按钮以及导航按钮的实现，都是改变索引index，再利用index控制相应css，显示对应图片；
* 利用定时器实现图片的自动导航，就是利用setInterval，隔一段时间，使得index+1。显示改变后index对应得图片；
* 当鼠标放入图片轮播的div时，要清除定时器，停止自动轮播，方便我们操作左右按钮以及导航按钮。
下面记录一个轮播图插件，来源，其中有些许错误，已改正：
//html部分
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>banner图学习中title>
<style type="text/css">
*{margin:0; padding: 0;font-family: 'Microsoft Yahei';}
a{text-decoration: none;}
li{list-style: none;}
img{border:0;}
ul{list-style: outside none none;}
.slider{ width: 500px; height: 485px;border:1px solid #000; margin:0 auto; overflow: hidden; position: relative;text-align: center;}
.slider .slider_main li{ width: 500px; height: 485px;position: absolute;}
.slider .slider_main img{ width: 500px; height: 485px;}
.slider .slider_nav{ width:160px; height:15px;bottom:15px; left: 40%; position: absolute;text-align: center;}
.slider .slider_nav li{ float: left; width: 15px; height: 15px; cursor: pointer; background: #ccc; text-align: center; margin-left:10px;border-radius: 50%;}
.slider .slider_nav li.on{ background: #f73f07; }
.slider .slider_page .slider_pre,.slider .slider_page .slider_next{width: 51px;top:46%; height: 51px; position: absolute; display:inline-block; *display:inline; zoom:1; z-index: 8; font-size: 28px;}
.slider .slider_page .slider_pre{left:10px; }
.slider .slider_page .slider_next{right:10px; }
style>
head>
<body>
<div class="slider" id="sliderBox">
<ul class="slider_main">
<li class=""><a href="#"><img src="./img/nav1.jpg" alt="" />a>li>
<li><a href="#"><img src="./img/nav2.jpg" alt="" />a>li>
<li><a href="#"><img src="./img/nav3.jpg" alt="" />a>li>
<li><a href="#"><img src="./img/nav4.jpg" alt="" />a>li>
<li><a href="#"><img src="./img/nav5.jpeg" alt="" />a>li>
ul>
<ul class="slider_nav">
<li class="slider_item on">li>
<li class="slider_item">li>
<li class="slider_item">li>
<li class="slider_item">li>
<li class="slider_item">li>
ul>
<div class="slider_page">
<a class="slider_pre" href="javascript:;">>
<a class="slider_next" href="javascript:;">>a>
div>
div>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js">script>
<script src="classDev.js">script>
<script type="text/javascript">
$("#sliderBox").jquerySlider ({
auto:true,
times:1000
});
script>
body>
html>jQuery插件classDev.js的部分：
;(function($){
//定义插件名称 jquerySlider
$.fn.jquerySlider = function(options){
//定义默认设置
var defaults = {
auto: true, //是否自动播放
sliderli:'.slider_main li',
pagenvali:'.slider_nav li', //分页按钮集合
active:"on",
prev: '.slider_pre', //上一页
next: '.slider_next', //下一页
actions:"click",
curren:0,
times: 1000, //定时器时间
flag: true //默认从左往右播放
};
//可以被拓展的默认设置(通过使用$.extend)
var options = $.extend({}, defaults, options); //{}这个代表是把defaults 和后面的optinso整合一起返回给你options
this.each(function(){
var _this = $(this),
sliderli = $(options.sliderli,_this),
pagenvali = $(options.pagenvali,_this),
interval = null;//定时器
//分页
pagenvali.on(options.actions, function(event) {
event.preventDefault();
var index = $(this).index(); //jQuery的index()函数，自动获取下标
$(this).addClass(options.active).siblings(pagenvali).removeClass(options.active);
sliderli.eq(index).fadeIn().siblings(sliderli).fadeOut();
});
//上一页，下一页，注意这里因为是上一页和下一页，记得要打逗号 + “ ，”+
$(options.prev+','+options.next).on('click', function(event) {
event.preventDefault();
clearInterval(interval);//清除定时器
$(this).is(options.prev) ? sliderchage(false) : sliderchage(true);
});
//hover
_this.hover(function() {
clearInterval(interval);
}, function() {
autoplay();
});
//切换js
function sliderchage(flag){
console.log("循环播放")
if(flag){
if(options.curren >= sliderli.length-1){
options.curren = 0 ;
}else{
options.curren++;
}
}else{
if(options.curren <= 0){
options.curren = sliderli.length-1;
}else{
options.curren--;
}
}
pagenvali.eq(options.curren).addClass(options.active).siblings().removeClass(options.active);
sliderli.eq(options.curren).fadeIn().siblings(sliderli).fadeOut();
}
//自动播放
function autoplay(){
interval = setInterval(function(){
sliderchage(options.flag);
}, options.times);
}
//是否自动播放
options.auto ? autoplay():''
});
//返回
return this;
}
})(jQuery);3、利用$.widget()
这个功能强大，但是用的较少，暂且不说。参考文章：编写jQueryUI插件(widget)
4、插件在Github的发布 参考文章