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

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

function myfunction(param){ //some code } 

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

 $('#my_div').myfunction() 

Answer 1

从文档 ：

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

那你呢

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

Answer 2

尽pipe你已经收到了所有的答案，但值得注意的是，你不需要编写一个插件来在函数中使用jQuery。 当然，如果这是一个简单的，一次性的function，我相信编写一个插件是矫枉过正的。 只需将select器作为parameter passing给函数 ，就可以轻松完成。 你的代码看起来像这样：

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

请注意，variables名$param中的$param不是必需的。 这只是我的一个习惯，使它容易记住，该variables包含一个jQueryselect器。 你也可以使用param 。

Answer 3

尽pipe这里有大量的文档/教程，但您的问题的简单答案是：

 // to create a jQuery function, you basically just extend the jQuery prototype // (using the fn alias) $.fn.myfunction = function () { // blah }; 

在这个函数里面， thisvariables对应于你调用你的函数的jQuery包装集合。 所以像这样：

 $.fn.myfunction = function () { console.log(this.length); }; $('.foo').myfunction(); 

…将向控制台刷新foo类的元素数量。

当然，还有更多的语义（比如最佳实践以及爵士乐），所以一定要仔细阅读。

Answer 4

为了在jQuery对象上创build一个函数，可以将它添加到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中创build一个函数，并将其分配给对象jQuery.fn上的一个属性。

例如

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

在你的插件函数中， this关键字被设置为你的插件被调用的jQuery对象。 所以，当你这样做的时候：

 $('#my_div').myfunction() 

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

详情请参阅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

是的，您应用于使用jqueryselect的元素的方法称为jquery插件，并且在jquery文档中有大量关于创作的信息 。

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

Answer 8

你也可以使用extend （你创buildjQuery插件的方式）：

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

用法：

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

Answer 9

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

  （function（$）{
     $ .fn.myFunc = function（param1，param2）{
         / /这个 -  jquery对象保存您select的元素
     }
 }）（jQuery）; 

稍后调用它：

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

Answer 10

这听起来像你想通过它的原型扩展jQuery对象（也就是写一个jQuery插件 ）。 这将意味着通过调用jQuery函数（ $(selector/DOM element) ）创build的每个新对象都将具有此方法。

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

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

演示

Answer 11

使jQuery中的任何function最简单的例子是

 jQuery.fn.extend({ exists: function() { return this.length } }); if($(selector).exists()){/*do something here*/} 

Answer 12

创build一个“着色”方法：

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

用它：

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

这个简单的例子结合了如何在jQuery文档中创build一个基本插件 ，以及来自@Candide ， @Michael的答案。

• 命名函数expression式可以改善堆栈跟踪等
• 返回this自定义方法可能被链接 。 （谢谢@Potheek。）