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

Question

我知道在JavaScript中语法如下:

function myfunction(param){
  //some code
}

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

$('#my_div').myfunction()

Answer 1

来自Docs:

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

然后你做

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

Answer 2

尽管您已经收到了所有答案,但值得注意的是,您不需要编写插件来在函数中使用jQuery.当然,如果它是一个简单的一次性功能,我相信编写一个插件是过度的.只需将选择器作为参数传递给函数,就可以更轻松地完成它.您的代码看起来像这样:

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

myFunction($('#my_div'));

请注意,$变量名称$param中不需要.我的一个习惯就是容易记住该变量包含一个jQuery选择器.你也可以使用param它.

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.

当然,语义不仅仅是那个(以及最佳实践,还有爵士乐),所以一定要仔细阅读.

Answer 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插件.

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

Answer 5

是的 - 你所描述的是一个jQuery插件.

要编写jQuery插件,可以在JavaScript中创建一个函数,并将其分配给对象上的属性jQuery.fn.

例如

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

在插件函数中,this关键字设置为调用插件的jQuery对象.所以,当你这样做时:

$('#my_div').myfunction()

然后将thisinside myfunction设置为返回的jQuery对象$('#my_div').

有关完整的故事,请参见http://docs.jquery.com/Plugins/Authoring.

Answer 6

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

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

Answer 7

您还可以使用扩展（创建jQuery插件的方式）：

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

    myfunction2: function () 
    {
    }
});

用法：

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

Answer 8

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

（函数（$）{
    $ .fn.myFunc = function（param1，param2）{
        // this-jquery对象保存您选择的元素
    }
}）（jQuery）;

稍后再调用，例如：

$（'div'）。myFunc（1，null）;