首页 > Web开发 > 详细

js的封装库css

时间:2015-07-01 18:06:51      阅读:308      评论:0      收藏:0      [点我收藏+]
var $ = function () {
    return new Base();
}

function Base() {

    //创建一个数组,来保存获取的节点和节点数组
    this.elements = [];
    
    //获取ID节点
    this.getId = function (id) {
        this.elements.push(document.getElementById(id));
        return this;
    };
    
    //获取元素节点
    this.getTagName = function (tag) {
        var tags = document.getElementsByTagName(tag);
        for (var i = 0; i < tags.length; i ++) {
            this.elements.push(tags[i]);
        }
        return this;
    };
    
}


Base.prototype.css = function (attr, value) {
    for (var i = 0; i < this.elements.length; i ++) {
        this.elements[i].style[attr] = value;
    }
    return this;
}

Base.prototype.html = function (str) {
    for (var i = 0; i < this.elements.length; i ++) {
        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;
}

引用的js如下

window.onload = function () {
    //alert(base.getId(‘box‘).elements.length);
    $().getId(‘box‘).css(‘color‘, ‘red‘).css(‘backgroundColor‘, ‘black‘);
    //alert(base.getTagName(‘p‘).elements.length);
    $().getTagName(‘p‘).css(‘color‘, ‘green‘).html(‘标题‘).click(function () {
        alert(‘a‘);
    }).css(‘backgroundColor‘, ‘pink‘);
};

html结构
<div id="box">box</div>

<p>01</p>
<p>02</p>
<p>03</p>

js的封装库css

原文:http://www.cnblogs.com/wangjb/p/4613749.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!