javascript - 使用 jQuery 添加函数到 DOM 元素集？

Question

我的前端至少在基础水平以上的旅程仍在继续，最近我偶然发现了一个很大的问题。

我可以选择 DOM 元素，例如

var element=document.getElementById("elementid")

然后添加一些功能，就像这样

function testFunction() {
    alert(this.getAttribute('data-self'));
}
element.customFunction=testFunction;

但是有没有办法使用 jQuery 来做到这一点？

尝试过attr()、prop()、data()，但在这方面没有任何运气。 data() 是一个接近的函数，因为它允许我使用 $('#my-element-id').data('customFunction')(); 例如，但仍然不能解决我的问题，因为所选按钮的这个新属性无法通过任何其他方式访问。

总结一下:以像任何其他属性一样可访问的方式向 DOM 元素集合添加通用函数(如示例)的最简单方法是什么？

Answer 1

出于多种原因，直接向 DOM 元素添加函数并不被认为是一个好的做法。

我建议一个非常简单的 jQuery 插件方法:

jQuery.fn.myMethod = function() {
    // iterate all items in the jQuery collection and apply any logic you want
    return this.each(function() {
        // `this` will be the DOM element so you can carry out your operation here
        // for example, to flip a background color
        if (this.tagName === "INPUT") {
            this.style.backgroundColor = "red";
        } else {
            this.style.backgroundColor = "blue";
        } 
    });
}

// usage of jQuery plugin method:
$("#elementid").myMethod();
$(".boxes, .ovals, .containers").myMethod();

您还可以将参数传递给 jQuery 插件方法，并在自定义方法的实现中使用这些参数。