如何创建一个jQuery函数（新的jQuery方法或插件）？

Question

我知道在JavaScript中语法如下：

function myfunction(param){
  //some code
}

有没有一种在jQuery中声明函数的方法，可以将其添加到元素中？例如：

$('#my_div').myfunction()

- multimediaxp

---

“@RedEyedMonster - 它非常有意义。你曾经使用过类似 jQuery datepicker 的东西吗？ $('#myDatePickerfield').datePicker();” - Jamiec

没有，但是谢谢你提醒我 :) - Nigel B

@RedEyedMonster - 你可能使用过 $("#someElement").hide() 或 .addClass()... - nnnnnn

@RedEyedMonster：OP正在描述jQuery插件，这在JavaScript中实际上非常普遍。请参阅http://docs.jquery.com/Plugins/Authoring。 - Paul D. Waite

Answer 1

来自文档：

(function( $ ){
   $.fn.myfunction = function() {
      alert('hello world');
      return this;
   }; 
})( jQuery );

那么你需要执行

$('#my_div').myfunction();

- Candide

---

请允许我翻译以下内容：只是想补充一些我认为很重要的东西：在警告后面添加“return this;”会使函数可链式调用。 - Potheek

这里有许多正确的答案。jQuery-Docu 显示了差异: https://learn.jquery.com/plugins/basic-plugin-creation/ - Andy Tschiersch

@NikhilG $('my_div') 是指标签 <my_div></my_div>。你需要在那里加上井号来引用 id my_div。 - Candide

这是一个奇怪的例子，因为它实际上对那个元素没有任何影响。 - sheriffderek

感谢提供文档链接。但是从我在这份文档中看到的内容来看，应该是：(function( $ ){ ... }( jQuery ));而不是(function( $ ){ ... })( jQuery ); - fpierrat

Answer 2

尽管您已经收到了所有答案，但值得注意的是，在函数中使用jQuery不需要编写插件。如果只是一个简单的一次性函数，我认为编写插件就有点过度设计了。可以更轻松地通过将选择器作为参数传递给函数来完成。您的代码将如下所示：

function myFunction($param) {
   $param.hide();  // or whatever you want to do
   ...
}

myFunction($('#my_div'));

请注意，变量名$param中的美元符号$并不是必须的。这只是我的习惯，让我更容易记住该变量包含一个jQuery选择器。您也可以使用param。

- Pevara

Answer 3

虽然有大量的文档/教程，但是对于你的问题简单的答案是这样的:

// to create a jQuery function, you basically just extend the jQuery prototype
// (using the fn alias)

$.fn.myfunction = function () {
    // blah
};

在这个函数内部，this 变量对应于你调用函数的 jQuery 封装集合。因此类似这样的内容：

$.fn.myfunction = function () {
    console.log(this.length);
};

$('.foo').myfunction();

此代码将在控制台中输出类名为foo的元素数量。

当然，语义化还有更多细节(包括最佳实践等)，因此请确保阅读相关文献。

- Richard Neil Ilagan

Answer 4

为了使一个函数在jQuery对象上可用，你需要将它添加到jQuery原型中（在jQuery中，fn是prototype的简写），代码如下：

jQuery.fn.myFunction = function() {
    // Usually iterate over the items and return for chainability
    // 'this' is the elements returns by the selector
    return this.each(function() { 
         // do something to each item matching the selector
    }
}

通常这被称为jQuery插件。

示例 - http://jsfiddle.net/VwPrm/

- Richard Dalton

Answer 5

没错 - 你所描述的是一个jQuery插件。

为了编写一个jQuery插件，你需要在JavaScript中创建一个函数，并将其分配给对象 jQuery.fn上的属性。

例如：

jQuery.fn.myfunction = function(param) {
    // Some code
}

在您的插件函数内，this 关键字设置为调用您的插件的 jQuery 对象。因此，当您执行以下操作时：

$('#my_div').myfunction()

然后在myfunction内部，this将被设置为$('#my_div')返回的jQuery对象。

请查看http://docs.jquery.com/Plugins/Authoring获取完整信息。

- Paul D. Waite

Answer 6

$(function () {
    //declare function 
    $.fn.myfunction = function () {
        return true;
    };
});

$(document).ready(function () {
    //call function
    $("#my_div").myfunction();
});

- user1619962

---

我认为括号和大括号不匹配并不是这段代码唯一的问题。请修复。 - Christoffer Lette

Answer 7

你也可以使用 extend（创建 jQuery 插件的方式）：

$.fn.extend(
{
    myfunction: function () 
    {
    },

    myfunction2: function () 
    {
    }
});

使用方法：

$('#my_div').myfunction();

- Novasol

Answer 8

您可以像下面这样编写自己的jQuery插件（可以在选定的元素上调用的函数）：

(function( $ ){
    $.fn.myFunc = function(param1, param2){
        //this - jquery对象保存您选择的元素
    }
})( jQuery );

稍后可以像这样调用它：

$('div').myFunc(1, null);

- Michael

Answer 9

创建一个“colorize”方法：

$.fn.colorize = function custom_colorize(some_color) {
    this.css('color', some_color);
    return this;
}

使用它：

$('#my_div').colorize('green');

这个相对简单的例子将如何创建基本插件（jQuery官方文档）与@Candide、@Michael提供的答案结合在了一起。

• 命名函数表达式可以改善调用栈等。
• 自定义方法返回this，可以被链接使用。（感谢@Potheek。）

- Bob Stein

Answer 10

是的，使用jquery选择的元素所应用的方法被称为jquery插件，在jquery文档中有关于撰写插件的大量信息。

值得注意的是，jquery实际上就是javascript，因此“jquery方法”并没有什么特殊之处。

- Jamiec

---

“jQuery方法”并没有什么特别之处 - 是的，有：一个“jQuery方法”可以在jQuery对象上运行。 （但是，是的，jQuery只是JS...） - nnnnnn