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

时间:2015-06-18 03:56:41

标签: javascript jquery dom methods invoke

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

像这样:

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

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

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

我该如何解决这个问题?是否有必要使用jQuery?

3 个答案:

答案 0 :(得分:4)

您不需要使用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

答案 1 :(得分:2)

没有jQuery,你可以做类似

的事情

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

我自己找到了答案。

我可以这样练习:

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

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