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

我知道JavaScript的语法如下：

function myfunction(param){
  //some code
}

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

$('#my_div').myfunction()

---

是的，应用于使用jquery选择的元素的方法称为jquery插件，在jquery文档中有

---

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

是的-您所描述的是一个jquery插件

要编写jQuery插件，您需要在JavaScript中创建一个函数，并将其分配给对象

jQuery.fn

上的属性

例如

在插件函数中，

this

关键字被设置为调用插件的jQuery对象。因此，当您这样做时：

$('#my_div').myfunction()

然后

将
myfunction
中的
设置为
$（'#my_div'）
返回的jQuery对象

请参阅以获取完整信息。
您可以编写自己的jQuery插件（可在选定元素上调用的函数），如下所示：

(function( $ ){
    $.fn.myFunc = function(param1, param2){
        //this - jquery object holds your selected elements
    }
})( jQuery );
（函数（$）{
$.fn.myFunc=函数（param1，param2）{
//这个-jquery对象保存您选择的元素
}
})（jQuery）；


以后再这样称呼它：

$('div').myFunc(1, null);
$（'div'）.myFunc（1，null） 虽然有大量的文档/教程，但您的问题的简单答案是：

// 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
将元素数刷新到控制台

当然，语义学的内容远不止这些（以及最佳实践，以及所有的jazz），所以一定要仔细阅读
 来自：

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

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

那你呢

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

听起来您想通过jQuery对象的原型（aka）来扩展它。这意味着通过调用jQuery函数（
$（selector/DOM元素）
）创建的每个新对象都有这个方法

下面是一个非常简单的例子：

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

要使函数在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
    }
}

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

myFunction($('#my_div'));

这通常被称为一个

示例-
尽管您已经收到了所有答案，但值得注意的是，在函数中使用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
    }
}

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

myFunction($('#my_div'));

请注意，变量名
$param
中的
$
不是必需的。这只是我的一个习惯，让我很容易记住这个变量包含一个jQuery选择器。您也可以使用
param
。
您还可以使用extend（创建jQuery插件的方式）：

用法：

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

在jQuery中生成任何函数的最简单示例是

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

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

创建“着色”方法：

使用它：

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

这个简单的ish示例结合了jQuery文档中的最佳内容，以及来自的答案


A可以改善堆栈跟踪等
返回此
的自定义方法。（谢谢@Potheek。）
您始终可以这样做：

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

@RedEyedMonster——这很有道理。是否使用过类似jQuery datepicker的东西<代码>$（“#myDatePickerfield”）.datePicker（）没有，但谢谢你提醒我：）@RedEyedMonster-你可能使用了
$（“#someElement”）.hide（）
或
.addClass（）
…@RedEyedMonster:OP描述了jQuery插件，这在JavaScript中非常常见。请参阅“jquery方法没有什么特别之处”-是的，有：“jquery方法”适用于jquery对象。（但是是的，jQuery只是JS…）我不认为结束括号和大括号的不匹配是这段代码唯一的问题。请修复。只是添加一些我认为重要的东西：请添加-返回这个；警报后。这将使功能连锁。这里有许多正确答案。jQuery Docu显示了差异：@candide在哪个点
$（'my_div'）.myfunction（）将被删除call@NikhilG$（'my_div'）指的是标记
。您确实需要在那里使用散列符号来引用id
my_div
。这是一个奇怪的示例，因为它对该元素没有任何意义。
$('#my_div').colorize('green');

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