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

2020/10/16 14:41 · javascript ·  · 0评论

我知道JavaScript中的语法如下:

function myfunction(param){
  //some code
}

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

$('#my_div').myfunction()

文档中

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

那你做

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

尽管您已经收到了所有答案,但值得注意的是,您无需编写插件即可在函数中使用jQuery。当然,如果它只是一个简单的一次性函数,我相信编写插件是过分的。只需将选择器作为参数传递给函数,就可以轻松得多您的代码如下所示:

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

myFunction($('#my_div'));

请注意,不需要$变量名$param中的。让我容易记住该变量包含jQuery选择器只是我的一种习惯。您也可以使用param

尽管这里有大量的文档/教程,但您的问题的简单答案是:

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

当然,语义还有很多东西(以及最佳实践和所有爵士乐),因此请确保您已读懂它。

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

是的-您要描述的是一个jQuery插件。

要编写jQuery插件,您可以使用JavaScript创建一个函数,并将其分配给object的一个属性jQuery.fn

例如

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

在您的插件函数中,this关键字设置为在其上调用您的插件的jQuery对象。因此,当您这样做时:

$('#my_div').myfunction()

然后thisinsidemyfunction设置为返回的jQuery对象$('#my_div')

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

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

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

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

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


稍后再调用:

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

您还可以使用扩展(创建jQuery插件的方式):

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

    myfunction2: function () 
    {
    }
});

用法:

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

是的,您应用于使用jquery选择的元素的方法称为jquery插件,并且在jquery文档中大量的创作信息

它值得指出的是jQuery的刚刚的javascript,所以有关于“jQuery的方法,”没有什么特别的。

创建一个“ colorize”方法:

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

用它:

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

这个简单的示例结合了jQuery文档中有关如何创建基本插件优点并提供了@Candide@Michael的答案

您可以随时这样做:

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

听起来您想通过其原型扩展jQuery对象(也称为编写jQuery插件)。这意味着通过调用jQuery函数($(selector/DOM element)创建的每个新对象都将具有此方法。

这是一个非常简单的示例:

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

演示版

在jQuery中实现任何功能的最简单示例是

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

if($(selector).exists()){/*do something here*/}
本文地址:http://javascript.askforanswer.com/ruhechuangjianjqueryhanshuxindejqueryfangfahuochajian.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!