从零开始的jQuery插件封装

jQuery插件简易封装方法。

jQuery插件机制

• jQuery.extend( [deep ], target, object1 [, objectN ] )

  Description: Merge the contents of two or more objects together into the first object.

  描述：将两个或更多对象的合并到第一个对象中。
  详情：jQuery-API-$.extend

• jQuery.fn.extend()

  Description: Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.

  描述：将对象内容合并到jQuery原型中以提供新的方法。
  详情：jQuery-API-$.fn.extend

插件结构

利用上述两个API我们可以方便地扩展jquery的方法。

(function ($) {
    $.fn.extend({
        "pluginName": function (options) {
            var opts = $.extend({}, defaluts, options); //合并默认参数与自定义参数
            return this.each(function () {
                var $this = $(this); //当前被jQuery包装的dom对象
                //操作dom ...
                //...
            });
        }
    });
    //默认参数
    var defaluts = {
        //...
    };
})(jQuery);

//调用
$('div').pluginName({});

完整示例

• 代码

  
  
  
  
      
      
      
      
      
      
      
  
  
  
      
  DEFALUT
      
  CUSTOM
  
  
  
  
  
  
  
  
  
  

• 效果

  
  
  插件调用效果

参考

• jQuery-API-$.extend
• jQuery-API-$.fn.extend
• 什么？你还不会写JQuery 插件