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

Posted 2023-02-19

【中文标题】如何创建一个 jQuery 函数（一个新的 jQuery 方法或插件）？

【英文标题】：How to create a jQuery function (a new jQuery method or plugin)?

【发布时间】：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

【参考方案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>