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

没有jQuery，你可以做类似

的事情

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 3

我自己找到了答案。

我可以这样练习：

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

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

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

3 个答案: