jquery插件制作简单示例说明

  一、先从一个简单的实例,不需要带参数的一个方法开始

  

复制代码 代码如下:

  //创建一个匿名函数

  (function($){

  //给jQuery附加一个新的方法(详细见备注1)

  $.fn.extend({

  //插件的名字

  MyFirstName: function() {

  //迭代当前匹配元素集合

  return this.each(function() {

  var obj = $(this);

  //自己的代码

  });

  }

  });

  )(jQuery);

  备注1:理解$.fn.extend和$.extend的区别,大概的说前者是将MyFirstName这个方法合并到jquery的实例对象中,例如$(“#txtmy”).add(3,4)这样调用方法,后者是将MyFirstName这个方法合并到jquery的全局对象中,例如$.add(3,4); 这样调用方法

  详细区别见(http://www.glzy8.com/article/29590.htm

  二、有参数的

  

复制代码 代码如下:

  //创建一个匿名函数

  (function($){

  //给jQuery附加一个新的方法(详细见备注1)

  $.fn.extend({

  //插件的名字

  MyFirstName: function() {

  //定义默认参数

  Var parms={

  Parms1:1,

  Parms2:2

  }

  //合并用户传的参数和默认参数,返回给options(详细见备注2)

  var options = $.extend(defaults, options);

  //迭代当前匹配元素集合

  return this.each(function() {

  //把合并后的参数赋值给o

  var o= options;

  //迭代当前匹配元素

  var obj = $(this);

  //自己的代码

  });

  }

  });

  )(jQuery);

  备注2:var options = $.extend(defaults, options); 意思是把defaults和options合并,如果后者有和前者名称一样的元素,后者覆盖前者,然后合并给defaults,然后defaults赋值给options,如果是var options = $.extend({},defaults, options);那么是把前者和后者合并给{}这个参数,然后赋值给options,defaluts的结构和值都没有变化

  详细区别见(http://www.glzy8.com/article/29591.htm