js连缀

我们调用多个函数的时候，如果每次是单个调用就不方便，很多时候需要向下面一样连缀调用。
1 $().getId('box').css('color', 'red').click(function() {
    alert('a');
});

这个时候要怎么做呢？其实每次函数的返回值，只需要返回当前构造函数的对象就行了。

var $ = function() {  //通过$()创建构造函数
    return new Base();
};

function Base() {
    //把返回的节点对象保存到Base对象的属性数组里
    this.elenments = [];
};

//得到ID节点对象,如：id:#id
Base.prototype.getId = function(id) {
    this.elenments.push(document.getElementById(id));
    return this; //这样返回的就是Base对象,可以实现连缀调用
};

//获取元素节点数组,如：tag:p标签  //元素标签很多,用数组
Base.prototype.getTagName = function(tag) {
    /*
    alert(this.elenments.length);  //弹出0,由于this.elements 还没有赋值
    for (var i = 0; i < this.elenments.length; i++) {
        this.elenments.push(document.getElementsByTagName(tag));
    }
    */
    var tags = document.getElementsByTagName(tag); //一般元素标签有多个
    for (var i = 0; i < tags.length; i++) {
        this.elenments.push(tags[i]);
    }
    return this;
}

//设置css属性
Base.prototype.css = function(attr, value) {
    for (var i = 0; i < this.elenments.length; i++) {
        this.elenments[i].style[attr] = value;
    }
    return this;
};

//更改html内容
Base.prototype.html = function(str) {
    for (var i = 0; i < this.elenments.length; i++) {
        this.elenments[i].innerHTML = str;
    }
    return this;
};

//点击事件
Base.prototype.click = function(fn) {
    for (var i = 0; i < this.elenments.length; i++) {
        this.elenments[i].onclick = fn;
    }

    return this;
};