Jquery插件-笔记

一 jquery类级别插件开发

1、

jQuery.extend({      

foo: function() {      

alert('This is a test. This is only a test.');      

},      

bar: function(param) {      

alert('This function takes a parameter, which is "' + param +'".');      

}     

}); 

 

----------------

 

2、使用命名空间定义自己的jquery插件：

 

jQuery.myPlugin = {          

foo:function() {          

alert('This is a test. This is only a test.');          

},          

bar:function(param) {          

alert('This function takes a parameter, which is "' + param + '".');    

}         

};  

采用命名空间的函数仍然是全局函数，调用时采用的方法：  

$.myPlugin.foo();         

$.myPlugin.bar('baz');   

 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

二 jquery对象级别插件开发

 

// plugin definition    

$.fn.hilight = function(options) {    

  // Extend our default options with those provided.    

  // Note that the first arg to extend is an empty object -    

  // this is to keep from overriding our "defaults" object.    

  var opts = $.extend({}, $.fn.hilight.defaults, options);    

  // Our plugin implementation code goes here.    

};    

// plugin defaults - added as a property on our plugin function    

$.fn.hilight.defaults = {    

  foreground: 'red',    

  background: 'yellow'    

};     

现在使用者可以包含像这样的一行在他们的脚本里：  

//这个只需要调用一次，且不一定要在ready块中调用  

$.fn.hilight.defaults.foreground = 'blue';    

接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：  

$('#myDiv').hilight(); 

 

 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

结论：

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性，方法

$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。

 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

// 创建一个闭包    

(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);