day02

base.js

/**
 * Created by zhouyan on 15/4/26.
 */


//前台调用
var $=function(_this){
    return new Base(_this);
}


//基础库
function Base(_this){

    //创建一个数组，来保存获取的节点和节点数组
    this.elements=[];

    if(_this != undefined){
        this.elements[0]=_this;
    }


    //获取ID节点
    this.getId=function(id){
        this.elements.push(document.getElementById(id));
        return this;
    };

    //获取元素节点
    this.getTagName=function(tagName){
        var tags=document.getElementsByTagName(tagName);
        for(var i=0;i<tags.length;i++){
            this.elements.push(tags[i]);
        }
        return this;
    };

    //获取Class节点
    this.getClass=function(className,idName){
        var node = null;
        if(arguments.length == 2){
            node = document.getElementById(idName);
        }else{
            node = document;
        }
        var all=node.getElementsByTagName('*');
        for(var i=0;i<all.length;i++) {
            if (all[i].className == className) {
                this.elements.push(all[i])
            }
        }
        return this;
    }

}


//设置css
Base.prototype.css=function(attr,value){
    for(var i=0;i<this.elements.length;i++) {
        if(arguments.length == 1){
            return getStyle(this.elements[i],attr);
        }
        this.elements[i].style[attr] = value;
    }
    return this;
}

//设置innerHTML
Base.prototype.html=function(str){
    for(var i=0;i<this.elements.length;i++) {
        if(arguments.length == 0){
            return this.elements[i].innerHTML;
        }
        this.elements[i].innerHTML = str;
    }
    return this;
}

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

//获取某一个节点
Base.prototype.getElement =function(num){
    var element =this.elements[num];
    this.elements = [];
    this.elements[0] =element;
    return this;
}

//添加Class
Base.prototype.addClass = function(className){
    for(var i=0;i<this.elements.length;i++){
        if(!hasClass(this.elements[i],className)) {
            this.elements[i].className += ' '+className;
        }
    }
    return this;
}

//移除Class
Base.prototype.removeClass = function(className){
    for(var i=0;i<this.elements.length;i++){
        if(hasClass(this.elements[i],className)) {
            this.elements[i].className=this.elements[i].className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),'');
        }
    }
    return this;
}

//添加link或style的css规则
Base.prototype.addRule = function(num,selectorText,cssText,pos){
    var sheet = document.styleSheets[num];
    insertRule(sheet,electorText,cssText,pos);
    return this;
}

//移除link或style的css规则
Base.prototype.removeRule = function(num,pos){
    var sheet = document.styleSheets[num];
    deleteRule(sheet,pos);
    return this;
}

//设置鼠标移入移出方法
Base.prototype.hover = function(over,out){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].onmouseover=over;
        this.elements[i].onmouseout=out;
    }
    return this;
}

//设置显示
Base.prototype.show =function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display="block";
    }
    return this;
}

//设置隐藏
Base.prototype.hide =function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display="none";
    }
    return this;
}

//设置物体居中
Base.prototype.center = function(width,height){
    var top = (document.documentElement.clientHeight - height)/2;
    var left = (document.documentElement.clientWidth - width)/2;
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.top=top+'px';
        this.elements[i].style.left=left+'px';
    }
    return this;
}

//触发浏览器窗口事件
Base.prototype.resize = function(fn){
    window.onresize=fn;
    return this;
}

//锁屏功能
Base.prototype.lock = function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display='block';
        this.elements[i].style.width=getInner().width+'px';
        this.elements[i].style.height=getInner().height+'px';
        document.documentElement.style.overflow='hidden';
    }
    return this;
}

//解屏功能
Base.prototype.unlock = function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].style.display='none';
        document.documentElement.style.overflow='auto';
    }
    return this;
}

//拖拽功能
//拖拽流程
//1.先点下去
//2.再点下的物体被选中，进行move移动
//3.抬起鼠标，停止移动
//点击某个物体，用Div即可，move和up是全局区域，也就是整个文档通用，应该用document
Base.prototype.drag= function(){
    for(var i=0;i<this.elements.length;i++){
        this.elements[i].onmousedown = function(e){
            var e=getEvent(e);
            var _this=this;
            var diffX= e.clientX- _this.offsetLeft;
            var diffY= e.clientY- _this.offsetTop;

            document.onmousemove = function(e){
                var e=getEvent(e);
                _this.style.left= e.clientX-diffX+'px';
                _this.style.top= e.clientY-diffY+'px';
            }

            document.onmouseup= function(e){
                this.onmousemove =null;
                this.onmouseup =null;
            }

        }
    }
    return this;
}

　　tool.js

/**
 * Created by zhouyan on 15/4/27.
 */


//跨浏览器获取视口大小
function getInner(){
    if(typeof window.innerWidth != 'undefined'){
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    }else{
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }
}

//跨浏览器获取Style
function getStyle(element,attr){
    if(typeof window.getComputedStyle !="undefined"){//W3C
        return window.getComputedStyle(element,null)[attr];
    }else if(typeof this.elements[i].currentStyle != 'undefined'){//IE
        return element.currentStyle[attr];
    }
}

//判断Class是否存在
function hasClass(element,className){
    element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}

//跨浏览器添加link规则
function insertRule(sheet,selectorText,cssText,pos){
    if(typeof sheet.insertRule != 'undefined'){   //w3c
        sheet.insertRule(selectorText+'{'+cssText+'}',pos);
    }else if(typeof sheet.addRule != 'undefined'){ //Ie
        sheet.addRule(selectorText,cssText,pos);
    }
}

//跨浏览器删除link规则
function deleteRule(sheet,pos){
    if(typeof sheet.deleteRule != 'undefined'){   //w3c
        sheet.deleteRule(pos);
    }else if(typeof sheet.removeRule != 'undefined'){ //Ie
        sheet.removeRule(pos);
    }
}

//获取Event对象
function getEvent(event){
    return event|| window.event;
}