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

这可能吗？

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

Answer 2

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

Answer 3

当您想稍后检索元素时，问题就出现了。 也许你可以将扩展存储为元素的数据，如：

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

然后稍后调用函数，你会做类似的事情：

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

并将div作为参数传递。

Answer 4

您也可以将其作为插件执行：

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')

Answer 5

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