jquery - 创建一个新的 jquery 链式方法

Question

如何在 jQuery 中编写新的链式方法？我的 jQuery 有一个非常程序化的风格:

$("#SaveButton").click(function () {
    Foo($("#SubTotal"));
    Foo($("#TaxTotal"));
    Foo($("#Total"));
    Bar($("#SubTotal"));
    Bar($("#TaxTotal"));
    Bar($("#Total"));        
});

如何在 jQuery 中创建 .foo() 方法，以便我可以编写:

$("#SaveButton").click(function () {
    $("#SubTotal,#TaxTotal,#Total").foo().bar();
});

在一个相关的点上 - 有没有一种简单的方法(在 Visual Studio 或 Notepad++ 或其他东西中)来查找并替换所有 Foo($("#selector")); 为 $("#selector").foo();?

Answer 1

您可以通过以下方式定义自定义 jQuery 函数:

$.fn.foo = function(){
    //`this` is a jQuery object, referring to the matched elements (by selector)
    return this.each(function(index, element){
        //`this` inside this function refers to the DOM element
        var $this = $(this); //`this` is wrapped in a jQuery object.
    });
}

在此定义之后，每个 $("...") 对象都会有一个 foo 方法。

如果您不确定 jQuery 对象是否由美元定义，请将您的定义包装在此函数中:

(function($){
    //Within this wrapper, $ is the jQuery namespace
    $.fn.foo = function(){
        //...
    }
})(jQuery);