1、建立基础库

起首建立一个基础库，名字叫做base.js,用于编写最经常运用的代码，然后不停的扩大封装。
在最经常运用的代码中，最经常运用的就是猎取节点的要领。这里我们能够编写代码以下：

//建立base.js
//全部库能够是一个对象
var Base={
    //要领名尽量简短而富有意义
    getId:function(id){
        return document.getElementById(id);
    },
    getName:function(name){
        return document.getElementsByName(name);
    },
    getTagName:function(tag){
        return document.getElementsByTagName(tag);
    }
}
//类要领挪用
window.onload=function(){
    alert(Base.getId('box').innerHTML);
    alert(Base.getName('chk')[0].value);
    alert(Base.getTagName('p')[0].innerHTML);
};

2、完成联缀语法

即能够运用Base.getId(‘box’).css(‘color’,’red’).html(‘题目’).click(function(){alert(‘a’)});相似的语句完成对象要领的一连挪用
须要在步骤1的基础上改写库对象：

//剖析：想要完成联缀语法Base.getId('box').css('color','red').html('题目').click(function(){alert('a')});
//须要在Base类中完成css(),html(),click()要领，且要领都要return一个Base对象
//在Base对象中，平常设置css,innnerHTML,onclick的要领以下
//var base=new Base();    new一个Base类的实例
//base.getId('box').style.color='red';   定义color
//base.getId('box').style.backgroundColor='red';
//base.getId('box').innerHTML='题目';
//base.getId('box').onclick=function(){alert('a')};
//如今须要将上面的设置为Base类的css,html,click要领，

//定义$函数，用于天生多个Base()实例对象，背面须要Base实例时，直接运用$()即可
var $ = function(){
    return new Base();
};
function Base(){
    //运用this关键字建立elements数组，用来保留猎取目的节点和节点数组
    this.elements=[];
    //运用this关键字定义猎取节点的要领
    this.getId=function(id){
        var e=document.getElementById(id);
        this.elements.push(e);
        return this;
    }
    this.getTagName=function(tag){
        var e=document.getElementsByTagName(tag);
        for(var i in e){
            this.elements.push(e[i]);
        }
        return this;
    }
}
//也能够运用prototy增加Base的原型要领
Base.prototype.css=function(attr,value){
    //对指定节点元素设置属性和值
    for(var i in this.elements){
        this.elements[i].style[attr]=value;
    }
    return this;
}
Base.prototype.html=function(str){
    for(var i in this.elements){
        this.elements[i].innerHTML=str;
    }
    return this;
};
//类要领挪用
window.onload=function(){
     //每个$()为一个对象实例，可挪用类中封装好的要领
    $().getId('box').css("color","red").html("title");
    $().getTagName('p').css("color","blue").html("题目");
};

3、CSS的封装

猎取行内款式

以上是经由过程html()要领和css()要领能够设置题目内容和CSS款式，但如今假如想要经由过程这两个要领猎取已将定义好的属性值：相似于:$().getId(‘box’).html(); $().getId(‘box’).css();时是不满足的，如今就须要重写这两个要领。

//剖析：要完成要领既能设置传入的参数值，返回Base对象，又能在传入参数为null的情况下返回当前属性值，那只需推断传过来的参数即可：
//假如没有传参数，则函数返回当前属性值，假如传入参数，则须要设置传入的属性值，并返回Base对象，重写的代码以下：
Base.prototype.css=function(attr,value){
    //对指定节点元素设置属性和值
    for(var i in this.elements){
        //运用arguments数组对象猎取传入的参数，并推断参数的个数
        if(arguments.length==1){
            return this.elements[i].style[attr];
        }
        this.elements[i].style[attr]=value;
    }
    return this;
}
Base.prototype.html=function(str){
    for(var i in this.elements){
        //运用arguments数组对象猎取传入的参数，并推断参数的个数
        if(arguments.length==0){
            return this.elements[i].innerHTML;
        }
        this.elements[i].innerHTML=str;
    }
    return this;
};
//类要领挪用
window.onload=function(){
     //每个$()为一个对象实例，可挪用类中封装好的要领
    $().getId('box').css("color","red").html("title");
    //$().getTagName('p').css("color","blue").html("题目");
    alert($().getId('box').html());
    alert($().getId('box').css("color"));
};

猎取外部CSS款式

以上猎取的css款式，仅是行内的css，假如运用link链接的外部CSS,又该怎样处置惩罚呢？
这里能够运用W3C 的window.getComputedStyle和IE的currentStyle来猎取，变动后的代码以下：

Base.prototype.css=function(attr,value){
    //对指定节点元素设置属性和值
    for(var i in this.elements){
        //运用arguments数组对象猎取传入的参数，并推断参数的个数
        if(arguments.length==1){
            if(typeof window.getComputedStyle != 'undefined'){//W3C
                return window.getComputedStyle(this.elements[i],null)[attr];
            }else if(typeof this.elements[i].currentStyle != 'undefined'){//IE
                return this.elements[i].currentStyle[attr];
            }
        }
        this.elements[i].style[attr]=value;
    }
    return this;
}

以上内容来自李炎恢先生JavaScript课程实战篇笔记整顿