js 模仿jQuer实现添加类名方法

Question

如：var doc=document.getElementById("id");doc.addClass(className);直接可以像jQuery一样可以打点.调用的。

Answer 1

// 顺手写的demo肯定不完善,真要用自己写个addClass函数吧
HTMLElement.prototype.addClass = function(sClass) {
    if (new RegExp(sClass).test(this.className)) return;
    this.className += !this.className.length ? sClass : ' ' + sClass;
}

你要在原生的DOM对象上直接用 . 来调用，可以直接对HTMLElement的原型进行扩展。。当然jQuery不是这么做的，你在使用 $('div').addClass('sClass');这些方法的时候操作的并不是原生的DOM对象，而是通过jQuery包装过的对象，包装后的jQuery对象上就带有了各种各样的jQuery方法，所以你都能直接在那些对象上用 . 来调用

———— 再补充个例子 ————

function $(elem) {
    return new baseObj(elem);
}

function baseObj(elem) {
    this.elem = elem;
}

baseObj.prototype = {
    addClass: function(sClass) {
        this.elem.className += ' ' + sClass;
    }
}

jQuery的包装过程大概类似这样 用$选择器拿到的对象是包装后的jQuery对象，并不是原生的js对象