Jquery 实现todoList demo

2018-05-17 10:39:57

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <div>
        <input id="input" type="text" />
        <button id="btn">提交</button>
        <ul id="list"></ul>
    </div>

    <script>
        function Page()
        {

        }

        $.extend(Page.prototype, {
            init: function()
            {
                this.bindEvents();
            },
            bindEvents: function()
            {
                var btn = $('#btn');
                btn.on('click', $.proxy(this.handleBtnClick, this))
            },
            handleBtnClick: function()
            {
                var inputElem = $('#input');
                var inputValue = inputElem.val();
                var ulElem = $("#list");
                ulElem.append('<li>'+ inputValue +'</li>');
                inputElem.val('');
            }
        });

        var page = new Page();
        page.init();
    </script>
</body>
</html>