JavaScript学习-封装基础库2

读取CSS和innerHTML

上一节基础库实现了获取ID节点、元素节点以及设置CSS、设置innerHTML、和触发点击事件的功能，这一节，首先来看读取CSS和innerHTML的功能。

添加读取功能之后的css()方法：

Base.prototype.css = function(attr,value){
    for(var i = 0; i < this.elements.length; i++){
        // 参数个数为1时为读取
        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;
}

添加读取功能之后html()方法：

Base.prototype.html = function(str){
    for(var i = 0; i < this.elements.length; i++){
        // 参数个数为0时，为读取
        if(arguments.length == 0){
            return this.elements[i].innerHTML;
        }
        this.elements[i].innerHTML = str;
    }
    return this;
}

获取class节点

HTML:

<p class='red'>段落</p>
<p class='red'>段落</p>
<p class='red'>段落</p>

demo.js:

$().getClass('red').css('color','red');

base.js:

// 获取CLASS节点数组
Base.prototype.getClass = function(className){
    var all = document.getElementsByTagName('*');
    for(var i= 0; i < all.length; i++){
        if(all[i].className==className){
            this.elements.push(all[i]);
        }
    }
    return this;
}

获取某一个节点

base.js:

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

demo.js:

$().getClass('red').css('color','red').getElement(2).css('color','green');

CLASS被区域分隔

HTML：

<div id='aaa'>
        <p class='red'>段落</p>
        <p class='red'>段落</p>
        <p class='red'>段落</p>
</div>
<div id='bbb'>
        <p class='red'>段落</p>
        <p class='red'>段落</p>
        <p class='red'>段落</p>
</div>

demo.js:

$().getClass('red','bbb').css('color','red').getElement(2).css('color','green');

base.js:

// 获取CLASS节点数组
Base.prototype.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;
}

base.js完整代码

// 前台调用
var $ = function(){
    return new Base();
}
// 基础库
function Base(){
    // 创建一个数组来保存获取的节点和节点数组
    this.elements = [];
}
// 获取ID节点
Base.prototype.getId = function(id){
    this.elements.push(document.getElementById(id));
    return this;
}
// 获取元素节点数组
Base.prototype.getTagName = function(tag){
    var tags = document.getElementsByTagName(tag);
    for(var i = 0; i < tags.length; i++){
        this.elements.push(tags[i]);
    }
    return this;
}
// 获取CLASS节点数组
Base.prototype.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;
}
// 获取某一个节点
Base.prototype.getElement = function(num){
    var element = this.elements[num];
    this.elements = [];
    this.elements[0] = element;
    return this;
}
// 设置CSS
Base.prototype.css = function(attr,value){
    for(var i = 0; i < this.elements.length; i++){
        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;
}
// 设置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;
}