jQuery插件扩展实例

Mike

1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery插件扩展实例</title>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>  </head>
<body>
<p>徐同保</p>
<script>
  //闭包限定命名空间
  (function ($) {
    //默认参数
    var defaluts = {
      foreground: 'red',
      background: 'yellow'
    };
    $.fn.extend({
      "highLight": function (options) {
        //检测用户传进来的参数是否合法
        if (!isValid(options)) {
          return this;
        }
        //使用jQuery.extend 覆盖插件默认参数
        var opts = $.extend({}, defaluts, options);
        //这里的this 就是 jQuery对象。这里return 为了支持链式调用
        //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
        return this.each(function () {
          //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
          var $this = $(this);
          //根据参数来设置 dom的样式
          $this.css({
            backgroundColor: opts.background,
            color: opts.foreground
          });
          //格式化高亮文本
          var markup = $this.html();
          markup = $.fn.highLight.format(markup);
          $this.html(markup);
        });
      }
    });
    //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
    $.fn.highLight.format = function (str) {
      return "<strong>" + str + "</strong>";
    };
    //私有方法，检测参数是否合法
    function isValid(options) {
      return !options || (options && typeof options === "object") ? true : false;
    }
  })(window.jQuery);
  //调用
  //调用者覆盖 插件暴露的共公方法
  $.fn.highLight.format = function (txt) {
    return "<em>" + txt + "</em>"
  };
  $(function () {
    $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
  });
</script>
</body>
</html>

2.运行结果

[jQuery] jQuery插件扩展实例

Mike LV4