Javascript 如何为自定义jQuery插件创建函数

我正在使用创建一个简单的自定义jQuery插件。现在我想创建一个函数，调用如下

var div1 = $("#div1").changeBackgroundColor({
  color: $('#colorCode').val().trim()
});
div1.getColor();

如何在jquery插件中定义

getColor（）

方法

自定义插件：

;(function($, window, document, undefined) {
var pluginName = "changeBackgroundColor", defaults = {
    color : "black"
};

function Plugin(element, options) {
    this.element = element;
    this.settings = $.extend({}, defaults, options);
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
}

$.extend(Plugin.prototype, {
    init : function() {
        console.log("Hello");
    }
});

$.fn[pluginName] = function(options) {
    this.each(function() {
        if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this,
                    options));
            }
        console.log(options);
        if(options===undefined){
            $(this).css("background-color", defaults.color);
        } else{ 
            $(this).css("background-color", options.color);
        }
    });
    return this;
};

})(jQuery, window, document);

---

谢谢……）

这样定义您的方法

$.fn.getColor = function() { 
     alert('getColor called'); 
}

---

您有点忽略了插件和OOP的全部要点

$.fn[pluginName]

-应该扮演基础架构角色，并将实际工作委托给

插件

实例

插件

实例应该使用元素执行实际工作

如果您想调用

插件

实例上的方法，可以使用

$.fn[pluginName]

来处理

选项

为字符串时的特殊情况<代码>$（选择器）.changeBackgroundColor（'methodToBeCalled'/*rest参数*/）

用法

---

创建如下插件：

$.fn.highlight=function（）{
这个.css（“背景”、“黄色”）.css（“颜色”、“黑色”）；
归还这个；
}
$（“.highlight”）.highlight（）.fadeIn（）

您可以在自定义插件中定义它，或者如果您只打算在html页面中使用它，则可以在该页面中定义它。请参阅以供参考。@bhushan…在

div1.getColor（）上获取错误
->
未定义不是一个函数。如果
div1
未定义或null@bhushan...anything这个代码有错吗<代码>变量div1=$（“#div1”）.changeBackgroundColor（{color:$（'#colorCode'）.val（）.trim（）}）；div1.getColor（）
;(function($, window, document, undefined) {
var pluginName = "changeBackgroundColor", 
    defaults = {
        color : "black"
    },
    //methods to be called via $().changeBackgroundColor(name)
    publicMethods = { 
        getColor: function() {
            return this.settings.color;        
        },
        setColor: function(color) {
            this.settings.color = color;
            this.element.css('background-color', color);            
        }
    },
    privateMethods = { //internal methods
        init : function() {
            console.log('init');
            this.setColor(this.getColor());            
        }
};

function Plugin(element, options) {
    this.element = $(element);
    this.settings = $.extend({}, defaults, options);

    this.init();
}

//copy private and public methods
$.extend(Plugin.prototype, privateMethods, publicMethods); 

$.fn[pluginName] = function(options) {
    var out = [],
        args = [].slice.call(arguments, 1);
    this.each(function() {
        var plugin = $.data(this, pluginName), 
            method;

        if (!plugin) { //create new plugin  
            plugin = new Plugin(this, options)                  
            return $.data(this, pluginName, plugin);            
        }
        //handle method calls
        if(typeof options === 'string' && publicMethods[options]) { 
            out.push(plugin[options].apply(plugin, args));
        }        
    });
    return out.length ? (out.length === 1 ? out[0] : out) : this;
};

})(jQuery, window, document);

$('#a').changeBackgroundColor();
$('#b').changeBackgroundColor({color: 'navy'});
$('#c').changeBackgroundColor({color: 'green'});
console.log($('#b').changeBackgroundColor('getColor'));
console.log($('#b, #c').changeBackgroundColor('getColor'));

$('#a').changeBackgroundColor('setColor', 'red');
console.log($('#a').changeBackgroundColor('getColor'));