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

【问题标题】：How to create a jQuery function (a new jQuery method or plugin)?如何创建一个 jQuery 函数（一个新的 jQuery 方法或插件）？
【发布时间】：2012-08-19 01:28:07
【问题描述】：

我知道在 JavaScript 中的语法如下：

function myfunction(param){
  //some code
}

有没有办法在 jQuery 中声明一个可以添加到元素的函数？例如：

$('#my_div').myfunction()

【问题讨论】：

@RedEyedMonster - 这很有意义。曾经使用过 jQuery datepicker 之类的东西吗？ $('#myDatePickerfield').datePicker();
不，我没有，但感谢您提醒我：)
@RedEyedMonster - 你可能用过$("#someElement").hide() 或.addClass()...
@RedEyedMonster：OP 正在描述 jQuery 插件，这在 JavaScript 中实际上很常见。见docs.jquery.com/Plugins/Authoring

标签： javascript jquery function

【解决方案1】：

来自Docs：

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

那你就做吧

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

【讨论】：

只是添加一些我认为重要的内容：请添加 - 退回这个；警报后。它将使函数链化。
这里有很多正确的答案。 jQuery-Docu 显示了差异：learn.jquery.com/plugins/basic-plugin-creation
@candide 此时将调用$('my_div').myfunction();
@NikhilG $('my_div') 指的是标签<my_div></my_div>。您确实需要那里的井号来引用 ID my_div。
这是一个奇怪的例子，因为它对那个元素没有任何意义。

【解决方案2】：

尽管您已经收到了所有答案，但值得注意的是，您无需编写插件即可在函数中使用 jQuery。当然，如果它是一个简单的一次性功能，我认为编写一个插件是矫枉过正的。只需将选择器作为参数传递给函数，就可以更容易地做到这一点。您的代码将如下所示：

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

myFunction($('#my_div'));

请注意，变量名称 $param 中的 $ 不是必需的。我的一个习惯是让我很容易记住该变量包含一个 jQuery 选择器。你也可以使用param。

【讨论】：

【解决方案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 的元素数量刷新到控制台。

当然，语义还有比这更多的内容（以及最佳实践和所有爵士乐），因此请务必阅读它。

【讨论】：

【解决方案4】：

要使函数在 jQuery 对象上可用，您可以将其添加到 jQuery 原型中（fn 是 jQuery 中原型的快捷方式），如下所示：

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 plugin。

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

【讨论】：

【解决方案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 了解全文。

【讨论】：

【解决方案6】：

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

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

【讨论】：

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

【解决方案7】：

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

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

    myfunction2: function () 
    {
    }
});

用法：

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

【讨论】：

【解决方案8】：

您可以编写自己的 jQuery 插件（可以在选定元素上调用的函数），如下所示：

(函数($){
    $.fn.myFunc = 函数（参数 1，参数 2）{
        //this - jquery 对象保存您选择的元素
    }
})( jQuery );

稍后调用它：

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

【讨论】：

【解决方案9】：

是的，您应用于使用 jquery 选择的元素的方法称为 jquery 插件，并且 jquery 文档中有 a good amount of info on authoring。

值得注意的是jquery是只是javascript，所以“jquery方法”没有什么特别的。

【讨论】：

'“jquery 方法”没有什么特别之处' - 是的：“jQuery 方法”适用于 jQuery 对象。（但是是的，jQuery is 只是 JS...）

【解决方案10】：

创建一个“着色”方法：

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

使用它：

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

这个简单的示例结合了 jQuery 文档中 How to Create a Basic Plugin 的精华，以及来自 @Candide、@Michael 的答案。

named function expression 可以改进堆栈跟踪等。
返回thismay be chained的自定义方法。（感谢@Potheek。）

【讨论】：

【解决方案11】：

你总是可以这样做：

jQuery.fn.extend({
   myfunction: function(param){
       // code here
   },
});
OR
jQuery.extend({
   myfunction: function(param){
       // code here
   },
});
$(element).myfunction(param);

【讨论】：

【解决方案12】：

听起来你想通过它的原型（又名write a jQuery plugin）扩展 jQuery 对象。这意味着通过调用 jQuery 函数 ($(selector/DOM element)) 创建的每个新对象都会有这个方法。

这是一个非常简单的例子：

$.fn.myFunction = function () {
    alert('it works');
};

Demo

【讨论】：

【解决方案13】：

在 jQuery 中创建任何函数的最简单示例是

jQuery.fn.extend({
    exists: function() { return this.length }
});

if($(selector).exists()){/*do something here*/}

【讨论】：

【解决方案14】：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Define a function in jQuery</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
    $.fn.myFunction = function() { 
        alert('You have successfully defined your function!'); 
    }
    $(".call-btn").click(function(){
        $.fn.myFunction();
    });
});
</script> 
</head>
<body>
    <button type="button" class="call-btn">Click Here</button>
</body>
</html>

【讨论】：