- _nosay
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>