如何创建一个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选定的元素，被称为jQuery插件，并有a good amount of info on authoring jQuery的文档中。

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

Answer 3

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

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

E.g.

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

在你的插件功能，this关键字设置为在其上调用插件的jQuery对象。所以，当你这样做：

$('#my_div').myfunction() 

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

查看http://docs.jquery.com/Plugins/Authoring了解全部内容。

Answer 4

你可以写你自己的jQuery插件（功能，可以对选定的元素被称为）象下面这样：

(function($){ 
    $.fn.myFunc = function(param1, param2){ 
     //this - jquery object holds your selected elements 
    } 
})(jQuery);

后来这样称呼它：

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

Answer 5

虽然有过多的文档/教程的过度，你的问题的简单答案是这样的：

// 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 6

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

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

Answer 7

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

这是一个很简单的例子：

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

Demo

Answer 8

若要使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/

Answer 9

尽管你已经收到的所有答案，但值得注意的是，你并不需要编写一个插件在函数中使用jQuery。当然，如果它是一个简单的，一次性的功能，我相信编写一个插件是矫枉过正的。只需将选择器作为参数传递给函数即可。您的代码会是这个样子：

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

myFunction($('#my_div')); 

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

Answer 10

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

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

    myfunction2: function() 
    { 
    } 
}); 

用法：

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

Answer 11

最简单的例子，在jQuery的做任何功能

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

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

Answer 12

创建“着色”方法：

$.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答案。

• A named function expression可能会改善堆栈轨迹等。
• 返回thismay be chained的自定义方法。 （感谢@Potheek）

Answer 13

你总是可以做到这一点：

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