如何开发一个jQuery插件_jQuery插件开发流程与实例详解

(function($) {
    $.fn.myPlugin = function(options) {
        // 默认配置
        var defaults = {
            color: 'red',
            fontSize: '14px'
        };
        var settings = $.extend({}, defaults, options);

        // 遍历匹配的元素
        return this.each(function() {
            var $this = $(this);
            // 插件逻辑
            $this.css({
                'color': settings.color,
                'font-size': settings.fontSize
            });
        });
    };
})(jQuery);

(function($) {
    var privateMethod = function(element) {
        console.log('私有方法处理:', element);
    };

    $.fn.advancedPlugin = function(options) {
        var settings = $.extend({
            text: 'Hello',
            action: 'show'
        }, options);

        return this.each(function() {
            var $elem = $(this);

            if (settings.action === 'show') {
                $elem.text(settings.text).show();
            } else if (settings.action === 'hide') {
                $elem.hide();
            }

            privateMethod($elem);
        });
    };
})(jQuery);

$('#box').advancedPlugin({
    text: 'Hi there!',
    action: 'show'
});

(function($) {
    $.fn.highlight = function(options) {
        var defaults = {
            bgColor: 'yellow',
            textColor: 'black',
            speed: 0
        };
        var config = $.extend(defaults, options);

        return this.each(function() {
            var $elem = $(this);
            var style = {
                'background-color': config.bgColor,
                'color': config.textColor
            };

            if (config.speed > 0) {
                $elem.animate(style, config.speed);
            } else {
                $elem.css(style);
            }
        });
    };
})(jQuery);

<p class="demo">这是一段需要高亮的文字</p>

$('.demo').highlight({
    bgColor: 'orange',
    textColor: 'white',
    speed: 800
});

if (!$.fn.highlight) {
    $.fn.highlight = function(options) { ... }
}