Question

在jQuery中我这样做：

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

然后

$('div').hello();

我可以在纯JavaScript中执行此操作而不加载整个jQuery吗？

Answer 1

嗯，从技术上讲，你可以这样做：

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包装器，尽管你当然可以制作这样的包装器。

Answer 2

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

HTMLDivElement.prototype.hello = function()
  {
    console.log(this+" says hello world.");
  }
document.querySelector('div').hello()

对于Anchor元素，我可以这样做：

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

是否有一个纯javascript等同于jQuery＆＃39; $ .fn.extend？

2 个答案: