jQuery插件扩展实例

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.运行结果