JS连缀语法

html部分：

<div id="box">id</div>
<input type="radio" name="sex" value="男" />
<p>标签</p><p>标签</p><p>标签</p><p>标签</p>

js连缀写法：

window.onload = function() {
    $().getId('box').css('color','red').css('background','green');
    $().getTagName('p').css('color','green').html('已修改').click(function() { alert('a')});
}

这里，使用了连缀的方式来获取元素，然后修改css，修改html内容，添加点击事件并且可以无限制的这样添加下去，那么这里就可以看出，在每个.xxx()的方法中肯定都会返回这个函数的本身，这样才可以无限制的.xxx(),因为你不可能getTagName()里面包含css(),然后css()里面包含css和html的方法，这是不可能的，所以只有返回这个初次调出的函数才对。

然后我们就开始写吧，一步步来：

function Base() {
  this.getId = function(id) {
    return document,getElementById(id);    //这里返回对应的id元素
  }
}

//由于后面我们还要修改css，所以我们要将这个对应的id元素保存在一个数组里，方便调用

function Base() {
  this.elemrnts = [];
  this.getId = function(id) {
    this.elements.push(document,getElementById(id));  //将元素通过栈方法传入数组中
    return this;    //这里我们之前说了，在每个.xxx()的方法中肯定都会返回这个函数的本身，所以我们return出this。
  }
  this.css = function(attr,value) {
    this.elements[0].style[attr] = value;    //由于没有.attr的方法，不存在，原本style.color的写法要改成键对值的形式。
    return this;
  }
}

//这样我们可以模拟出两步了，getId('box').css('color','red')；下面还要获取元素节点的集合，p元素节点，由于p元素获取是通过getElementsByTagName，他包含了很多个节点，为此我们还需要将他们的节点一个个出入elements中去，方便调用，那么既然elements中有多个节点，所以就不能用死的数组来修改css，一样也要一个个都修改，于是：

function Base() {
  this.elemrnts = [];
  this.getTagName = function(tag) {
    var tags = doucment.getElementsByTagName(tag);
    for(var i = 0;i<tags.length,i++){
      this.elements.push(tags[i]);    //将tags内的元素通过栈方法传入数组中
    }
    return this;   
  }
  this.css = function(attr,value) {
    for(var i = 0;i<this.elements.length;i++){
      this.elements[i].style[attr] = value;
    }
    return this;
  }
}

//这样p元素也是可以模拟出两步，于是我们开始调用一下：

window.onload = function() {
    var base = new Base();
    base.getId('box').css('color','red').css('background','green');
    base.getTagName('p').css('color','green');
}

//然后你会发现color=green会覆盖color=red；原因是因为我们共用了一个构造函数中的数组，我们之前写的时候是将数组里的所有元素节点都做修改，所以我们还要改动一下，让他们不共用数组，那么就分别各运行一次new Base()，这样都分别创建了实例化对象了。

var $ = function() {
  return new Base();
}

window.onload = function() {
    //var base = new Base();  //不需要了
    $().getId('box').css('color','red').css('background','green');
    $().getTagName('p').css('color','green');
}

//剩下就很简单得了，只需要将对于的方法写入构造函数中，数组有多个元素，就用for语句循环，然后再一个个添加就行了，然后事情还没有结束，我们要考虑到如果有很多的地方都要调用.css的方法，我们分别new出来的实例化对象都会自带一个css方法，但是这样就很冗余了，因为.css方法是一样的，没必要个个都自带，可以共用啊，所以这里还要用到构造函数中的原型。

//于是改造如下：

function Base() {
    this.arr = [];
    this.getId = function(id) {
        this.arr.push(document.getElementById(id));
        return this;
    }
    this.getTagName = function(tag) {
        var tags = document.getElementsByTagName(tag);
        for(var i = 0;i<tags.length;i++){
            this.arr.push(tags[i]);
        }
        return this;
    }
    
    
}

Base.prototype.css = function(attr,value) {
    for(var i = 0;i<this.arr.length;i++){
        this.arr[i].style[attr] = value;
    }
    return this;
}
Base.prototype.html = function(str) {
    for(var i = 0;i<this.arr.length;i++){
        this.arr[i].innerHTML = str;
    }
    return this;
}
Base.prototype.click = function(fn) {
    for(var i = 0;i<this.arr.length;i++){
        this.arr[i].onclick = fn;
    }
    return this
}

//通过共有的原型来调用相同的方法，节省资源，于是，连缀方法大概就介绍到这里了。