使用jQuery扩展DOM元素

时间:2009-07-23 22:26:57

标签: javascript jquery

我想扩展DOM元素而不扩展所有元素。也就是说,我想要一个具有自己的方法和属性的自定义类,但也能够将其视为div。 E.g。

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

这可能吗?

5 个答案:

答案 0 :(得分:6)

您可以使您的类成为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');

答案 1 :(得分:1)

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

答案 2 :(得分:1)

以后想要检索元素时会出现问题。也许您可以将扩展名存储为元素的数据,如:

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

然后稍后调用这些函数,你会做类似的事情:

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

并将div作为参数传递。

答案 3 :(得分:1)

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

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

答案 4 :(得分:0)

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