javascript 创建并导入自定义库

//先创建一个js格式写入

//创建对象
function $(){
    return new Base();
}

function Base(){
    this.ele=[];//保存节点对象
}

//添加方法
Base.prototype.getID=function(id){
    var o=document.getElementById(id);
    this.ele.push(o);
    return this;
};

Base.prototype.getTagName=function(tagName){
    var os=document.getElementsByTagName(tagName);    
    for(var i =0;i<os.length;i++){
        this.ele.push(os[i]);
    }
    return this;
};

Base.prototype.getClass=function(cls){
    var os=document.getElementsByClassName(cls);
    for(var i=0;i<os.length;i++){

//创建对象
//obj节点对象
function $(obj){
    return new Base(obj);
}

//obj节点对象
function Base(obj){
    this.ele=[];//保存节点对象
    if(obj!=undefined){
        this.ele.push(obj);
    }
    
}

//添加方法
Base.prototype.getID=function(id){
    var o=document.getElementById(id);
    this.ele.push(o);
    return this;
};

Base.prototype.getTagName=function(tagName){
    var os=document.getElementsByTagName(tagName);    
    for(var i =0;i<os.length;i++){
        this.ele.push(os[i]);
    }
    return this;
};

Base.prototype.getClass=function(cls){
    var os=document.getElementsByClassName(cls);
    for(var i=0;i<os.length;i++){
        //遍历节点，保存
        this.ele.push(os[i]);
    }
    return this;//返回当前对象，为了连缀
};

//两个参数：修改样式
//一个参数：获取样式
//一个参数：批量修改样式

Base.prototype.css=function(property,value){
    //两个参数  设置样式
    if(value!=undefined){
        //取出节点对象
        for(var i in this.ele){
            //修改样式
            this.ele[i].style[property]=value;
        }
    }else if(typeof property=='object'){
        //一个参数   批量修改样式   {'width':'100px','height':'100px'}
        //遍历节点
        for(var i=0;i<this.ele.length;i++){            
            //遍历对象   获取属性名和对应的值
            for(var j in property){
                this.ele[i].style[j]=property[j];//取出样式值赋值给对应的样式
            }
        }
    }else{
        //一个参数    获取样式
        var o=this.ele[0];//第一个节点
        var sty=o.style[property];//行内样式
        // if(sty==''){
        //     sty=window.getComputedStyle(o,null)[property];
        // }
        // return sty;//返回样式
        return sty==''?window.getComputedStyle(o,null)[property]:sty;
    }
    
    return this;//返回当前对象，目的为了连缀
};

 

//修改属性
/*
    两个参数：修改属性
    一个参数：获取属性
    一个参数：批量设置属性
*/
Base.prototype.attr=function(property,value){
    if(value!=undefined){
        for(var i=0;i<this.ele.length;i++){
            this.ele[i][property]=value;
        }
    }else if(typeof property=='object'){
        //批量设置
        for(var j=0;j<this.ele.length;j++){
            for(var m in property){
                this.ele[j][m]=property[m];
            }
        }
    }else{
        //获取属性值
        return this.ele[0][property];
    }
    
    return this;
};

//修改内容
/*
    1.有参数：修改内容
    2.无参：获取指定节点的内容
*/
Base.prototype.text=function(value){
    //arguments
    //有参数
    if(value!=undefined){
        //遍历节点
        for(var i=0;i<this.ele.length;i++){
            this.ele[i].innerHTML=value;
        }
        return this;
    }

    return this.ele[0].innerHTML;//返回第一个节点的内容
};

 

//事件
Base.prototype.click=function(fn){
    for(var i=0;i<this.ele.length;i++){
        this.ele[i].οnclick=fn;
    }
};

//hover事件
Base.prototype.hover=function(fn_over,fn_out){
    for(var i=0;i<this.ele.length;i++){
        this.ele[i].οnmοuseοver=fn_over;
        this.ele[i].οnmοuseοut=fn_out;
    }
    return this;
};

//效果类型

//显示
Base.prototype.show=function(){
    for(var i=0;i<this.ele.length;i++){
        this.ele[i].style.display='block';
    }
    return this;
};
//隐藏
Base.prototype.hide=function(){
    for(var i=0;i<this.ele.length;i++){
        this.ele[i].style.display='none';
    }
    return this;
};

//切换
Base.prototype.toggle=function(){
    for(var i=0;i<this.ele.length;i++){
        var o=this.ele[i];
        //获取节点状态
        var sty=o.style.display;
        if(sty==''){
            sty=window.getComputedStyle(o,null).display;
        }

        if(sty=='none'){
            o.style.display='block';
        }else{
            o.style.display='none';
        }

    }
    return this;
};

 

//在创建一个html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src='js/3.js'></script>
</head>
<body>
    <div>嘎哈</div>
    <div id="menu">Hello World</div>
    <div class="one">拉开距离科技</div>
    <div class="one">坎坎坷坷扩</div>

    <script type="text/javascript">
     
        $().getID('menu').css('color','blue');
        $().getClass('one').css('color','red')

//批量修改方法

$().getTagName('div').css({
            'width':'100px',
            'height':'100px',
            'background-color':'red',
            'margin-right':'10px',
            'float':'left',
            'border':'1px solid gray'
        }).text('啊哈哈').css('text-align','center');
    </script>
</body>
</html>