在 DOM 元素上调用自定义方法

Question

我想在 DOM 元素上调用自定义方法

像这样：

<div id="MyObject">
    <!-- some elements -->
</div>

<script>
    function doSomething() {
        // do something with input DOM element
    }

    $("MyObject").doSomething();
</script>

我该如何开发这个问题？是不是一定要用jQuery？

Answer 1

您不需要使用 jQuery。您可以使用 document.getElementById('MyObject') 获取对 DOM 节点的引用。

为了运行你的 doSomething 函数，你需要向它添加一个节点参数，如下所示：

function doSomething(input) {
  // do something with input DOM element
}

doSomething(document.getElementById('MyObject'));

要链接它，您需要添加到所有 DOM 节点实现的 Element 接口（重读，我的意思是继承自）。如果你这样做，你可以这样做：

Element.prototype.doSomething = function() {
  alert(this);
}

document.getElementById('MyObject').doSomething();

JSFiddle：http://jsfiddle.net/6Lyb4b9p/

MDN：getElementById

Answer 2

我自己找到了答案。

我可以这样练习:

<script>
    (function ($) {
        $.fn.doSomething = function () {
            // do something like this
            $(this).append("Hello Object");
        }
    } (jQuery));

    $("#MyDOMElement").doSomething();
</script>

Answer 3

没有 jQuery，你可以做类似

的事情

if (typeof $ != 'function') {
  //create a function $ which will return the element with said id
  window.$ = function(id) {
    return document.getElementById(id);
  }
}

//Add a method to the Elemen prototype so you can call it on any element object
Element.prototype.doSomething = function() {
  this.innerHTML = 'hi from inner';
}

$('MyObject').doSomething();

<div id="MyObject">
  <!-- some elements -->
</div>

在 DOM 元素上调用自定义方法

Invoke a custom method on a DOM element

javascript

methods

jquery

dom

invoke