jquery插件开发快速入门

1、添加jQuery对象方法
添加jQuery对象方法：jQuery.prototype.myMethod。

在jQuery源码中有一句：jQuery.fn = jQuery.prototype，也就是给jQuery的prototype对象取了个别名，

所以 jQuery.prototype.myMethod 等价于 jQuery.fn.myMethod 等价于 $.fn.myMethod。

添加全局函数需要用新方法扩展jQuery对象——$.fn:

$.fn.myMethod = function(){}

调用：$('div').myMethod();

2、方法环境
this引用的是当前的jQuery对象。注意不是DOM对象。

$.fn.myMethod = function(){  
    this.hasClass(class_name);  
}

这样定义置灰检查最先匹配的元素。要是有多个元素，应该用“隐式迭代”。

$.fn.myMethod = function(){  
  this.each(function(){  
    this.hasClass(class_name); // 报错  
    $(this).hasClass(class_name); //注意each方法内this引用的是一个DOM元素。  
  })  
}

3、连缀

$.fn.myMethod = function(){  
  return this.each(function(){} // 返回jQuery对象  
}

4、方法参数
4.1 简单参数

$.fn.myMethod = function(hash_obj){ // 参数通常是hash类型  
  return this.each(function(){}  
}

4.2 默认参数

$.fn.myMethod = function(opts){ // 参数通常是hash类型  
  var defaults = {  
    zIndex:10  
    ,opacity: 0.8  
  }  
  var options = $.extend(defaults, opts); // opts 会覆盖defaults的项，defaults的值改变  
  return this.each(function(){}  
}

5、回调函数

$.fn.myMethod = function(opts){ // 参数通常是hash类型  
  var defaults = {  
    zIndex:10  
    ,opacity: 0.8  
    ,slice_offset: function(){  
       return { x:i, y:2*i }  
     }  
  }  
  var options = $.extend(defaults, opts); // opts 会覆盖defaults的项，defaults的值改变  
  return this.each(function(){}  
}

jquery插件开发快速入门

相关推荐