使用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

这很相似。 jQuery 只是返回一个对象，因此您可以向它添加函数。

var myElement = $('#elementid');
function testFunction() {
    alert($(this).attr('data-self'));
}
myElement.customFunction=testFunction;

myElement.customFunction();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="elementid" data-self="some value"></div>

Answer 2

出于多种原因，将函数直接添加到 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 插件方法，并在您的自定义方法的实现中使用这些参数。