javascript - 单独适用于页面上多个元素的方法

Question

我找不到这方面的好的指南，但我在这里寻找的只是朝着正确方向的插入。

假设我定义了一个新方法

Object.defineProperty(Object.prototype, 'myMethod', {
    enumerable : false,
    configurable: true,
    value : function(args) {
        var _self = this;
        _self.doThis = function () {
            // some functionality
        }

        ....

        return this
});

里面的代码适用于$('#element')，但如果我将该方法应用于$('.elements')，它将仅适用于数组的第一个元素。如何重写该方法以适用于单个元素和元素组？

编辑 ******************************** ****

所以我得到一个提示，当 jQuery 可用时，我会使用 jQuery.fn.extend()，但我担心的是 - 上面的方法是否可以重写，以便它适用于同一个类(class)？

Answer 1

我认为您混淆了两个非常不同但略有相关的概念

• 编写 jquery 插件，可以作用于多个选定元素
• 向现有对象原型(prototype)添加属性/方法

由于您似乎关心 DOM 操作，我将展示如何同时执行这两项操作。

---

jQuery

编写 jQuery 插件的范围很大，但您应该从基本的 guide to authoring plugins 开始。您实质上将方法添加到 $.fn 中，然后它们按照所有其他 jQuery 方法工作。如您所知，jQuery 选择器可以选择许多元素，您可以通过从插件返回 this.each 来处理这种情况

$.fn.myPlugin = function() {

    return this.each(function() {
        // Do something to each element here.
    });

};

用法:$(".myElements").myPlugin();

原版

如果您使用普通 JavaScript 选择多个元素，您可能会使用 getElementsByName 或 querySelector/querySelectorAll 之一。您需要将新方法添加到这些方法的返回类型中 - 即 NodeList - 并且您可以以正常方式在 value 中枚举它

Object.defineProperty(NodeList.prototype, 'myMethod', {
    enumerable : false,
    configurable: true,
    value : function(args) {
        var _self = this;
        console.log(_self.length); // should be the number of elements
        return this
    }
});

用法:document.getElementsByName("something").myMethod(); 或 document.querySelectorAll("a").mymethod();