使用jQuery扩展DOM元素

Question

我希望可以仅仅扩展一个DOM元素而不是所有的元素。也就是说，我想要一个具有自己方法和属性的自定义类，但同时也能够将其视为div元素。例如：

 MyClass = function(){
    this.foo = "waaa";
 }
 MyClass.prototype.changeText = function(newtext){
    // if this extended $(document.createElement("div")) something
    // like this might be possible
    this.html(newtext);
 }
 MyClass.prototype.alertFoo = function(){
    alert(this.foo);
 }

 var m = new MyClass();
 $("body").append(m);
 m.changetext();

这是可能的吗？

- pondermatic

Answer 1

你可以将你的类作为jquery生成的DIV元素的子类：

function MyClass (){
    this.foo = "waaa";
}
MyClass.prototype = $('<div/>');
MyClass.prototype.changeText = function(newtext){
    this.html(newtext);
}
MyClass.prototype.alertFoo = function(){
    alert(this.foo);
}

var m = new MyClass();
$("body").append(m);
m.changeText('appletree');

- user478779

---

这对于扩展插件非常有用，可以覆盖函数，使得this.hide实际上是this.fadeOut。我在类内部使用__proto__，并将其传递给基本的jquery对象，如下所示：link - Shanimal

Answer 2

问题将在您想稍后检索元素时出现。也许您可以将扩展名仅存储为元素的数据，如下所示：

var new_div = $('<div id="new_div" />');
new_div.data('m', new MyClass());

然后稍后调用这些函数，您可以执行以下操作：

new_div.data('m').changetext(new_div)

并将 div 作为参数传递。

- Augustus

---

是的，我意识到这样的事情是可能的，但绝对不够优雅。尽管有很多关于JavaScript如何伟大的炒作，但事实上，我无法让我的自定义类像jQuery一样灵活使用，真是有点遗憾。 - pondermatic

Answer 3

你也可以将其作为插件来实现：

jQuery.fn.myKindOfElement = function(msg) {
    var foo = msg; // foo is basically a private member
    this.alertFoo = function() {
        alert(foo);
    };
    this.setFoo = function(msg) {
        foo = msg;
    };
    this.changeText = function(text) {
        // doesn't make sense because html already exists here
        this.html(text);
    };
};

然后对于任何元素：

var myKind = $('<div/>').myKindOfElement('bar');
$('body').append(myKind);
myKind.alertFoo(); // alerts 'bar'
myKind.changeText('blah'); // same as myKind.html('blah')

- Prestaul

Answer 4

你可以创建自己的对象，就像你正在做的一样。然后，你可以使用jQuery的extend方法来扩展该元素。

- geowa4

---

这段代码不能正常工作:function more(){ this.myname = "more!" } more.prototype.alert = function(){ alert('alert!') } var div = $(document.createElement("div")); div.html("this is s"); $.extend(true, div, more); $(document).ready(function(){ $("body").append(div); div.alert(); alert(div.myname); }); - pondermatic

正确的做法是需要一个对象，而不是函数才能使用extend方法。请将相应的行替换为以下内容：$.extend(true, div, new more); - geowa4

Answer 5

当您将m传递给追加行时，jQuery将无法理解它，因为它只接受字符串和元素。您的 MyClass 可能会有一个特定的键来保存元素本身（例如，this.el = document.createElement("div");），但是 jQuery 将无法自行找到它。

- Salty

---

明白了，上面只是我想要做的事情的一个例子。本质上，我正在寻找类似于以下内容的东西：MyClass：document.createElement（“div”）也就是说，我不想告诉jquery查找特定的键，而是让jquery认为对象本身就是元素，即我的对象扩展了该元素。 - pondermatic