jQuery 插件开发实例（二）

最新推荐文章于 2019-07-02 08:01:43 发布

转载最新推荐文章于 2019-07-02 08:01:43 发布 · 54 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2391658/blog/694917

文章标签：

#javascript #python #ViewUI

本文提供了一个较为完整的jQuery插件开发示例，包括插件定义、私有函数定义及暴露函数定义等内容，并展示了如何使用插件修改DOM元素的样式。

2019独角兽企业重金招聘Python工程师标准>>>

一个比较完整的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);

转载于:https://my.oschina.net/u/2391658/blog/694917