javascript连缀

最新推荐文章于 2024-05-23 23:33:04 发布

HaigLee

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量443

点赞数

分类专栏： JavaScript 文章标签： javascript 连缀代码

本文链接：https://blog.csdn.net/HaigLee/article/details/62419159

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>连缀</title>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>


<div id="box">box</div>


<p>段落</p>
<p>段落</p>
<p>段落</p>


</body>
</html>

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);
    }
};
*/


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;
}

demo.js

/*
    //alert(Base.getId('box'));
    Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
        alert('a');
    }).addClass('a');

    Base是一个基础库的核心对象
    Base.getId('box')返回的是一个divElement，这个对象是没有css方法的
    将Base.getId('box')返回改成Base即可，返回Base对象
    Base.getId('box').css('color','red')返回的也是Base对象
    Base.getId('box').css('color','red').css('backgroundColor', 'black')还是返回的Base对象
    Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox')也是返回的Base对象
    Base.getId('box').css('color','red').css('backgroundColor', 'black').html('pox').click(function () {
        alert('a');
    }); click方法执行完毕之后，还是返回的Base对象


    在Base对象中，添加css方法,html方法,click方法

    var base = new Base();
    base.getId('box').style.color = 'red';
    base.getId('box').style.backgroundColor = 'black';
    base.getId('box').innerHTML = 'pox';
    base.getId('box').onclick = function () {
        alert(this.innerHTML);
    };
*/



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');
};

HaigLee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript连缀

demo.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="C
复制链接

扫一扫