如何在javascript中定义dom对象的函数_Javascript_Jquery_Html

如何在javascript中定义dom对象的函数

javascript jquery html

如何在javascript中定义dom对象的函数,javascript,jquery,html,Javascript,Jquery,Html,这是一个更复杂的问题的一部分。它的关注度越来越低，所以请允许我问一下我唯一不能自己实现的部分。如何为dom对象注册类似jquery的javascript函数？假设我有以下html页面： <html><body> <div id = "table"/> <div id = "chart"/> </body></html> 并且希望能够调用$（'#table'）.update（）和$（'#chart'）.updat

这是一个更复杂的问题的一部分。它的关注度越来越低，所以请允许我问一下我唯一不能自己实现的部分。如何为dom对象注册类似jquery的javascript函数？假设我有以下html页面：

<html><body>
  <div id = "table"/>
  <div id = "chart"/>
</body></html>

并且希望能够调用

$（'#table'）.update（）

和

$（'#chart'）.update（）

？我需要这些更新函数包含不同的逻辑和局部变量，例如加载数据的不同url。对不起，我可能是诺布

更新

如果我理解正确的话，插件是一个全局命名空间中的函数，可以处理任何对象。我宁愿将不同的函数与不同的元素相关联。这是因为我认为将不同的

update

函数与不同的对象相关联要比编写一个更新函数更容易，因为每个对象都必须研究它是否适用，如果适用，如何适用。

您所追求的是：

然后，只需在jQuery对象上调用

.update（）

，即可执行该函数：

$('myElement').update();

例如，如果我们想记录元素的

id

，我们可以将

update（）

函数定义为：

$.fn.extend({
    update: function() {
        console.log("ID = " + this.id);
    }
});

然后打电话：

$('#table').update();

这将记录：

ID=表格

这不需要jQuery。DOM元素是对象，因此可以为它们提供所需的任何方法：

var table = document.getElementById('table');
table.update = function() {
  this.innerHTML += 'table updated ';
}.bind(table);

var chart = document.getElementById('chart');
chart.update = function() {
  this.innerHTML += 'chart updated ';
}.bind(chart);


document.getElementById('table').update();
document.querySelector('#chart').update();

示例：

您可以通过DOM对象的原型向其添加新方法

/* extend existing prototype */
HTMLTable.prototype.update = function() {
    console.log( this );
}

/* call new method */
document.querySelector( 'table' ).update();

是您编写的插件吗？你可以在包含不同数据的元素上使用

data-*

变量，并在你的

update（）

方法中处理它们的逻辑。你是在问怎么做吗？我不知道插件是否是解决方案，并相应地更新了我的问题“类似jquery的dom对象javascript函数”你不是在调用dom对象方法，但是示例中的jQuery函数：

$（'#table'）.update（）

。要调用DOM对象方法，您需要首先访问DOM对象：

$（“#表”）[0]。update（）

或

$（“#表”）。项（0）。update（）

。参见：jQuery插件函数可以使用@James Donnelly建议的

extend

函数创建/附加；要添加DOM方法，您必须将其设置为对象原型。谢谢@feela我认为您的评论值得作为一个答案，它澄清了为什么我的一些尝试在您的答案中出现了小错误；应更新上载内容；）看来我错过了这个

.bind

东西！“thisbindthing”用于确保函数在其上定义的对象的上下文中运行。很高兴能帮上忙。

/* extend existing prototype */
HTMLTable.prototype.update = function() {
    console.log( this );
}

/* call new method */
document.querySelector( 'table' ).update();