jQuery插件（开发方式）

一、关于编写jQuery插件、需要理解如下几点：

1、闭包的概念

2、变量作用域

3、Function对象的继承

4、匿名函数执行

5、prototype

关于这几个概念的理解、请参与其他文档

二、jQuery插件类型

1、全局插件

使用jQuery或$进行调用、属于jQuery 对象本身的方法 、如：$.ajax/$.parseJSON

2、局部插件

使用jQuery对象进行调用、属于jQuery成员的方法 。如：$("div").css("background","red");

三、定义简单的jQuery插件

1、注意事项

需要避免$变量冲突、所以执行匿名函数、使用闭包的概念

需要使用jQuery实例调用、需要使用$.fn.fname = function(){} 也可以使用$.fn.extend({f1:function(){},f2:function(){},f3:function(){}});

需要定义全局插件、则：$.fname = function() {}    也可以使用 $.extend({f1:function(){},f2:function(){},f3:function(){}});

jQuery 中 、$.fn == jQuery.fn == jQuery.prototype

2、关于extend 实现了对象的原型拷贝、即继承

四、简单的jQuery插件，欢迎指正

(function($) {    //百叶窗    $.fn.according = function(options) {        var settings = $.extend({            header:"span",   //列表名称            body:"li",       //according内容            current:"current",//当前展示的列表的class            color:"#f88"     //according内容的背景颜色        },options||{});        var that = this.find(settings.header);        that.nextAll(settings.body).hide();        that.filter("."+settings.current).nextAll(settings.body).show().css("background",settings.color);        that.click(function(){            var has = $(this).hasClass(settings.current);            if(has) {                $(this).removeClass(settings.current);                $(this).nextAll(settings.body).slideUp();            } else {                that.removeClass(settings.current).nextAll(settings.body).slideUp();                $(this).addClass(settings.current)                       .nextAll(settings.body).slideDown()                       .css("background",settings.color);            }         });        return this;    }    //The drop in advertising 顶部广告展示   $.fn.dropAd = function(options) {var settings = $.extend({top:-300,      //top             timeout:3000,  //展示时间 毫秒            width:"100%",  //宽            height:"300px",//高            position:"absolute", //定位            speed:3        //滚动速度        },options || {});this.css({"top":settings.top,                  "width":settings.width,                  "height":settings.height,                  "position":settings.position});var ttop = settings.top,down = 0,up = 0,that = this;var bodyTop = 0;down = setInterval(down$,1);function down$() {ttop += settings.speed;            bodyTop += settings.speed;that.css("top",ttop+"px");            that.nextAll().css("top",bodyTop+"px");if(ttop >= 0) {clearInterval(down);setTimeout(up$,settings.timeout);}}function up$() {if(ttop >= 0) up = setInterval(up$,1);ttop -= settings.speed;            bodyTop -= settings.speed;that.css("top",ttop+"px");            that.nextAll().css("top",bodyTop+"px");if(ttop <= settings.top) {clearInterval(up);}}        return this;}              //回到顶部    $.fn.returnTop = function(options) {var settings = $.extend({speed:200                 //滚动速度},options||{});var windowWidth = $(window).innerWidth();var windowHeight = $(window).innerHeight();var scrollNum = 0,stop = 0;var button = this;var buttonWidth = button.outerWidth();var buttonHeight = button.outerHeight();button.css({zIndex:999999,left:windowWidth - buttonWidth +"px",    top:windowHeight - buttonHeight + "px"});$(window).scroll(function(){scrollNum = $(window).scrollTop();button.css("top",windowHeight - buttonHeight + scrollNum +"px");});button.click(function(){if(scrollNum <= 0) return;stop = setInterval(topest,1);})function topest() {if(scrollNum <= 0) {                clearInterval(stop)            };var T = scrollNum-settings.speed;if(T < 0) T = 0;$(window).scrollTop(T);}return this;}//抖动效果$.fn.shake = function(options) {var settings = $.extend({time:5000,            //抖动时长 单位毫秒intensity:0.5,        //抖动强度 最大值为1area:10,              //抖动区域 单位为像素  position:"relative"   //抖动定位},options||{});var that = this;var pos = that.position();var left = pos.left,top = pos.top,mark = 0,random = 0,offset,add = 0;that.css("position",settings.position);mark = setInterval(fly,50/settings.intensity);setTimeout(stop,settings.time);function stop() {clearInterval(mark);setCss(pos.top,pos.left);}function setCss(t,l) {that.css({top:t+"px",left:l+"px"});}function fly() {random = Math.random();add = random < 0.25?1:(random < 0.5 ? 2:(random < 0.75 ? 2:1))offset = random*settings.area;if(offset > settings.area) offset = settings.area;if(add == 1) {top -= offset;left -= offset;} else if(add == 2){top += offset;left += offset;}setCss(top,left);}return this;}})(jQuery);