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

我知道在JavaScript中语法是这样的:

function myfunction(param){
  //some code
}

是否有一种方法可以在jQuery中声明一个可以添加到元素中的函数?例如:

$('#my_div').myfunction()

是的，你应用于使用jquery选择的元素的方法，被称为jquery插件，在jquery文档中有大量关于创作的信息。

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

2012-08-23 13:53:06

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

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

E.g.

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

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

$('#my_div').myfunction()

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

详情请见http://docs.jquery.com/Plugins/Authoring。

2012-08-23 13:56:34

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

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

稍后调用它:

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

2012-08-23 13:57:31

虽然有大量的文档/教程，但你的问题的简单答案是:

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

当然，语义方面还有更多的东西(以及最佳实践等)，所以一定要仔细阅读。

2012-08-23 13:57:51

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

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

2012-08-23 13:58:18

来自文档:

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

然后你做了

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

2012-08-23 13:59:26

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

这里有一个非常简单的例子:

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

Demo

2012-08-23 13:59:55

要使一个函数在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/

2012-08-23 14:00:00

尽管你已经收到了这些答案，但值得注意的是，在函数中使用jQuery并不需要编写插件。当然，如果它是一个简单的一次性函数，我认为写一个插件是多余的。只要将选择器作为参数传递给函数，就可以更容易地完成这个任务。你的代码应该是这样的:

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

myFunction($('#my_div'));

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

2012-08-23 14:17:48

你也可以使用extend(创建jQuery插件的方式):

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

    myfunction2: function () 
    {
    }
});

用法:

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

2014-06-27 16:40:15

用jQuery创建函数最简单的例子是

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

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

2016-03-15 11:53:14

创建一个colorize方法:

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

使用它:

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

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

命名函数表达式可以改善堆栈跟踪等。返回此值的自定义方法可能是链式的。(谢谢@Potheek。)

2017-09-26 14:18:05

你可以这样做:

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

2017-11-27 20:11:53

<!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>

2022-01-06 13:36:39

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

推荐文章

最新文章

标签