我想在DOM元素上调用自定义方法
像这样:<div id="MyObject">
<!-- some elements -->
</div>
<script>
function doSomething() {
// do something with input DOM element
}
$("MyObject").doSomething();
</script>
我该如何解决这个问题?是否有必要使用jQuery?
答案 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,你可以做类似
的事情
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;
答案 2 :(得分:0)
我自己找到了答案。
我可以这样练习:
<script>
(function ($) {
$.fn.doSomething = function () {
// do something like this
$(this).append("Hello Object");
}
} (jQuery));
$("#MyDOMElement").doSomething();
</script>