Jquery插件制作小知识

首先要理解基础的知识点：
1.(function(){ })(jQuery);的理解

(function(){ })(jQuery);

执行()(para)匿名方法,只不过是传递了jQuery对象，类似于

function aa($){} 
aa(jQuery)

是初始化jquery对象的惯用方法。
在页面DOM加载完成后（不包括图片下载完成）执行你需要的代码，由于不包括图片下载，所以比window.onload效率高。
不过这个东西,有的时候会使页面跳动,很多JQUERY插件都是在加载完成后,才改变样式的,页面会有跳动或闪动的感觉.
用于存放开发插件的代码，执行其中代码时DOM不一定存在，所以直接自动执行DOM操作的代码请小心使用。
2.$.fn的的用法
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。 如在插件里有一个方法$.fn.test(),即$.fn.test()是对jquery扩展了一个test方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么在利用插件的地方使用：$(“#div”).test();

jQuery为开发插件提拱了两个方法，分别是：

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
3.defaults是默认的参数
也就是你往这个插件里面不传参数直接调用的话，插件用的就是默认里面的数值

开发插件的格式如下：

(function ($) {
        $.fn.test = function () {
            alert('test')
        }
    })(jQuery);

调用插件的方法

$("#elementid").test();

实例：

链接:http://caibaojian.com/279.html
来源:http://caibaojian.com

// 创建一个闭包
(function($) {
  // 插件的定义
  $.fn.hilight = function(options) {
    debug(this);
    // build main options before element iteration(迭代)
    var opts = $.extend({}, $.fn.hilight.defaults, options);
    // iterate and reformat（重定格式） each matched（匹配的） element
    return this.each(function() {
      $this = $(this);
      // build element specific options
      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
      // update element styles
      $this.css({
        backgroundColor: o.background,
        color: o.foreground
      });
      var markup = $this.html();
      // call our format（格式） function
      markup = $.fn.hilight.format(markup);
      $this.html(markup);
    });
  };
  // 私有函数：debugging
  function debug($obj) {
    if (window.console && window.console.log)
      window.console.log('hilight selection count: ' + $obj.size());
  };
  // 定义暴露format函数
  $.fn.hilight.format = function(txt) {
    return '<strong>' + txt + '</strong>';
  };
  // 插件的defaults
  $.fn.hilight.defaults = {
    foreground: 'red',
    background: 'yellow'
  };
// 闭包结束
})(jQuery);