JQuery/原型/原型2.html

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        高级-原型2,使用prototype写的。
    </title>
    <style>
        .d {
            width: 800px;
            height: 2000px;
            background: #ccc;
            border: 1px solid black;
            margin: 0 auto;
        }

        div {
            width: 100px;
            height: 50px;
            background: red;
            border: 1px solid #222;
            /*position: fixed;*/
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <div class="d">

    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script>
    // $('.d').append('<button>xixi</button>')

    function GoTop() {
        // this.ct=$('.d');
        this.ct = document.getElementsByClassName('d')[0];
        // this.target=$('<div>点我，回顶部</div>');
        this.target = document.createElement("div");
        this.bindEvent();
        this.createNode();
    }
    GoTop.prototype = {
        bindEvent: function () {
            this.target.addEventListener('click', function () {
                window.scrollTo(0, 0);
            }, false)
        },
        createNode: function () {
            document.getElementsByTagName('body')[0].appendChild(this.target);
        }

    }

    function GoTop1() {
        var btn = document.createElement("div");
        ct = document.getElementsByClassName('d');
        // console.dir(ct);
        // $('body').append(btn);
        body = document.getElementsByTagName("body")[0]; //又忘记了document.getElementsByTagName("body")是取到一个集合，但是在使用的时候，要加下标来表示其的使用。
        body.appendChild(btn);
        // ct.appendChild(btn);
        // ct.insertBefore(btn);
        btn.addEventListener('click', function () {
            window.scrollTo(0, 0)
        }, false)
        // this.ct = this.parentElement;
        this.ct = document.getElementsByClassName('d');
        // console.log(this.ct);
        this.target = this.btn;
        // console.log(this.target);
        this.bindEvent = function () {
            document.getElementsByClassName('d')[0].addEventListener('click', function () {
                console.log(1);
            }, false)
        }
        this.createNode = function () {
            var a = document.createElement('div');
            // this.ct.appendChild(a);
            $('body').append(a);
        }
    }
    var gotop = new GoTop();
</script>

</html>