Question

我已经创建了这样的JQuery插件：

$.fn.myPlugin = function(className)
{
    if(className) {
        // create new instance of className and return it
    } else {
        $(this).css("background-color","red");
    }
};

当我像这样使用它时：$("div").myPlugin();它工作正常。

我使用$.myPlugin("TestClass")时购买它不起作用。注意：TestClass存在。

Answer 1

如果您想设置$.customFunction，则需要为其指定值：

$.customFunction = function () {
    alert('this works!');
};

根据您的更新，您应该使用两个单独的功能：

$.myPlugin = function (classname) {
    //create new instance of className and return it
}

$.fn.myPlugin = function () {
    this.css('background-color', 'red');
};

Answer 2

使用jQuery extend函数：

jQuery.fn.extend({
    myFunction: function(){
        alert("Hi!");
    }
});

祝你好运！

Answer 3

对于像这样的简单插件（没有this的概念），你可能需要像

这样的东西

$.myPlugin = $.fn.myPlugin = function()
{
    alert("test");
};

$.fn是原型，所以你给每个jQuery实例提供了这个函数（方法，真的）。

直接赋值给$将使其成为全局jQuery对象的静态函数。

要更新我对更新问题的回答，这里有一种方法可以做我认为你想做的事情（将它们全部保存在一个功能中？ - 请注意：我试图在这里阅读你的想法;）：

$.myPlugin = $.fn.myPlugin = function(className) {
    var isInstance = (this instanceof $); // true if invoked on an instance
    if (className) { // whenever a className is given
        className = '.' + className; // turn it into a selector (assumes only one class)
        return isInstance ? $(className, this) : $(className); // returns jQuery object
    } else if (isInstance) { // when invoked on an instance
        return this.css("background-color","red"); // sets color and returns this
    }
};

如果你想根据插件的调用方式想要两种完全不同的行为，那么将它们作为两个独立的函数编写就更清晰，更易于维护：

// returns jQuery object containing element(s) that have a given className
$.myPlugin = function(className) {
    // turn className into selector (assumes only one class name is given)
    var selector = className ? ('.' + className) : '';

    return $(selector);

};

// sets color and returns this
$.fn.myOtherPlugin = function() {
    return this.css('background-color', 'red');
};

您可能还想为插件提供不同的名称，以指示其各自的功能（因此myOtherPlugin）。

如何在jQuery实例和jQuery对象本身上创建一个可调用的单个jquery插件函数？

3 个答案: