开发JQuery插件总结

     所有jquery方法都是在一个jquery对象的环境中调用的，因此this引用的可能是一个包装了一个或多个DOM元素的对象。一般来说，方法应该调用this.each()来迭代匹配的元素，然后依次操作每个元素。

    方法应该返回jquery对象以保持连缀能力。如果匹配对象集合被修改，那么应该通过调用.pushStack()创建一个新的jquery对象，而且应该返回这个新对象。如果返回的值不是jquery对象，必须明确的加以说明。

    如果方法接受一些配置选项，最好使用映射作为参数。这样，每个选项都会有一个标签，而且用户也无需按顺序传递参数。应该为映射定义默认值，且默认值可以在必要时被覆盖。

    方法定义必须以分号结尾，以便代码压缩程序能够正确的解析相应的文件。

 

一、添加新的全局函数( 不推荐，容易引起不同命名空间冲突)

jQuery.globalFunction = function(){

　　alert("hello,world!");

}

调用：

$.globalFunction();或者jQuery.globalFunction();

 

二、添加多个函数

jQuery.extend({
　　functionOne: function(){

　　　　alert("aaaaaaa");

　　},

　　functionTwo:function(){
　　　　alert("bbbbbb");

　　}

});

调用:

$.functionOne();

$.functionTwo();

});//(此方法也不推荐使用，也会面临不同命名空间冲突的风险。)

 

解决办法：把属于一个插件的所有全局函数都封装到一个对象中（推荐使用）

jQuery.myPlugin = {

　　functionOne: function(){

　　　　alert("aaaaaaa");

　　},

　　functionTwo:function(){
　　　　alert("bbbbbb");

　　}

};

调用:

$.myPlugin.functionOne();

$.myPlugin.functionTwo();

 

三、添加jQuery对象方法(扩展的是jQuery.fn对象)(推荐使用)

jQuery.fn.myMethod = function(){

　　alert("cccccccccccc");

};//jQuery.fn对象是jQuery.prototype的别名，这样是处于简洁考虑

调用：

$("#divContent").myMethod();

 

四、可定制默认参数+回调函数（以后可按此模板来编写插件）

<1>js文件中内容:

 jQuery.fn.shadow = function(options){

　　var opts = jQuery.extend({},   jQuery.fn.shadow.defaults,   options);

　　

　　return this.each(function(){

　　　　var $originalElement = jQuery(this);

　　　　for(var i=0; i<opts.slices; i++){
　　　　　　var offset = opts.sliceOffset(i);

　　　　　　$originalElement

　　　　　　　　.clone()

　　　　　　　　.css({

　　　　　　　　　　position: 'absolute',

　　　　　　　　　　left: $originalElement.offset().left + offset.x,

　　　　　　　　　　top: $originalElement.offset().top+ offset.y,

　　　　　　　　　　margion:0,

　　　　　　　　　　zIndex:opts.zIndex,

　　　　　　　　　　opacity:opts.opacity

　　　　　　　　}).appendTo('body');

　　　　}

　　});

};

 

jQuery.fn.shadow.defaults = {

　　slices:5,

　　opacity:0.1,

　　zIndex:-1,

　　sliceOffset:function(i){
　　　　return {x:i,y:i};

　　}

};

 

<2>调用：

$(document).ready(function(){

　　$.fn.shadow.dedaults.slices = 10;

　　$('h1').shadow({

　　　　sliceOffset:function(i){
　　　　　　return {x:-1,y:-1};

　　　　}

　　});

});