如何向一些jQuery对象添加函数，而不是向其他对象添加函数

How to add functions to some jQuery objects, but not others?

本文关键字：函数 添加 对象 其他 jQuery      更新时间：2023-09-26

假设我有一个<ul>列表:

<ul class="products">
    ...
</ul>

我想用jQuery选择它，然后添加一些函数到该对象。例如，我想添加一个addProduct(productData)函数和一个deleteProduct(productId)函数。但是，我希望函数只添加到由选择器返回的对象中。例如，像这样:

var productList = $.extend($('ul.products'), {
    addProduct: function(productData) {
        // add a new li item
    },
    deleteProduct: function(productId) {
        // delete li with id
    }
});

我如何使用jQuery做到这一点?这里的关键点是，我只想将函数添加到jQuery选择器返回的实例中。换句话说，我不想修改jQuery的原型或创建插件，因为这会使函数在所有地方都可用，而我只想将函数添加到一个特定的实例中。

如果你只希望addProduct和deleteProduct方法的特点，单一的 jQuery对象，那么你得到的将工作良好;但是你必须保持对jQuery对象的引用/只使用它一次，以保留addProduct和deleteProduct方法的存在。

然而，这些addProduct和deleteProduct方法对于特定的jQuery对象是唯一的;这些方法不会存在于您创建的任何其他jQuery对象上;

var productList = $.extend($('ul.products'), {
    addProduct: function(productData) {
        // add a new li item
    },
    deleteProduct: function(productId) {
        // delete li with id
    }
});
// Using this particular jQuery object (productList) will work fine.
productList.addProduct();
productList.removeProduct();
// However, addProduct() does not exist on new jQuery objects, even if they use
// the same selector.
$('ul.products').addProduct(); // error; [object Object] has no method 'addProduct'
要做到这一点，最好的方法是回到基础并定义单独的addProduct和deleteProduct函数，它们接受jQuery对象。如果您想将这些函数限制为它们只在ul.products选择器上工作，您可以执行; 
function addProduct(obj) {
    obj = obj.filter('ul.products');
    // do something with `obj` (its a jQuery object)
}

建议使用这种方法，因为它保持了jQuery.fn API的一致性;否则，您将addProduct和removeProduct添加到一些 jQuery.fn实例中，而不是其他实例，或者使它们在其他实例中使用冗余。使用这种方法，addProduct和removeProduct总是在那里，但是如果他们不想使用它们，不要妨碍任何人。

<标题> 历史笔记

这个答案最初写于2011年11月，当时jQuery 1.7刚刚发布。从那时起，API发生了很大的变化。以上答案与当前 2.0.0版本的jQuery有关。

在1.9之前，有一个很少使用的方法叫做jQuery.sub，它是与你想做的事情相关的(但是除非你改变你的方法，否则它不会帮助你)。这将创建一个新的jQuery构造函数，因此您可以执行;

var newjQuery = jQuery.sub();
newjQuery.fn.addProduct = function () {
    // blah blah
};
newjQuery.fn.deleteProduct = function () {
    // blah blah
};
var foo = newjQuery('ul.products');
foo.deleteProduct();
foo.addProduct();
var bar = jQuery('ul.products');
bar.deleteProduct(); // error
bar.addProduct(); // error

要小心，$方法别名将引用旧的jQuery对象，而不是newjQuery实例。

jQuery.sub在1.9中被从jQuery中移除。

您可以创建自己的jQuery方法，如下所示:

$.fn.addProduct = function(){
  var myObject = $(this);
  // do something
}
// Call it like:
$("ul.products").addProduct();

这有点棘手，因为你正在制作非常特定于列表的方法。因此，为了确保这一点，您至少应该添加一些对对象类型的检查，并正确处理代码，如果当前对象是，比如输入元素。

另一种方法是创建一个普通的Javascript方法，接收列表作为参数。这样，您可以创建一个更特定于列表的方法。

我认为你想给那个DOM对象添加一个函数。

$(function(){
    // [0] gets the first object in array, which is your selected element, you can also use .get(0) in jQuery
    $("#test")[0].addProduct = function(info){
        alert("ID: " + this.id + " - Param: " + info);
    };

    $("#test")[0].addProduct("productid");
});

上面的脚本会提示"ID: test - Param: productid"

一个实例:http://jsfiddle.net/jJ65A/1/

或普通javascript

$(function(){
    document.getElementById("test").addProduct = function(info){
        alert(info);
    };
});

我想可能只是在jQuery中使用委托:

$(".parentclass").delegate("childclass","eventname",function(){});
相关文章：