是否有一个纯Javascript等价于jQuery's $.fn.extend

Is there a pure Javascript equivalent to jQuery's $.fn.extend?

本文关键字：fn extend 有一个 Javascript 等价于 jQuery 是否      更新时间：2023-09-26

在jQuery中我这样做:

$.fn.extend({
   hello: function() {console.log(this + ' says hello world.')}
});

然后

$('div').hello();

我能做到这一点在纯javascript不加载整个jQuery只是为了?

技术上你可以这样做:

function extendingQuerySelector(selector, extension) {
    var el = document.querySelector(selector);
    for(var key in extension) {
        if(extension.hasOwnProperty(key)) {
            el[key] = extension[key];
        }
    }
    return el;
}

虽然扩展基本DOM对象似乎不是一个好主意。这里没有jQuery包装器，当然您可以制作这样一个包装器。

在Javascript中，你也可以通过连接到HTML元素原生函数的原型来扩展选择器函数。例如，我将使用下面的代码来解决您的问题:

HTMLDivElement.prototype.hello = function()
  {
    console.log(this+" says hello world.");
  }
document.querySelector('div').hello()
对于锚元素，我将这样做: 
HTMLAnchorElement.prototype.my_func=function()
  {
    console.log(this.nodeName);
  }
document.querySelector("a").my_func()

以上代码将在浏览器控制台中打印所选锚元素的节点名称。您可以使用纯Javascript探索其他HTML选择器函数。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

相关文章：