核心提示：todolist（jQuery实现）index-jQuery.html!DOCTYPE htmlhtml lang=enheadmeta charset=utf-8titletodo list/tit...
todolist（jQuery实现）
index-jQuery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>todo list</title>
<link href="static/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p class="container">
<p class="row">
<p class="col-md-5">
<form action="" id="todoForm">
<label for="">将下面输入的文字放入todo list中！</label>
<input type="text" id="todoInput" class="form-control">
</form>
<p id="todoCount"></p>
<ol id="todoList"></ol>
</p>
</p>
</p>
<script src="static/jquery-3.2.1.min.js"></script>
<script src="static/example-jQuery.js"></script>
</body>
</html>
example-jQuery.js
(function() {
var $todoForm = $('#todoForm');
var $todoInput = $('#todoInput');
var $todoList = $('#todoList');
var $todoCount= $('#todoCount');
function count(){
var len=$todoList.children().length;
$todoCount.html(len>0?'现有'+len+'项todo list' : '');
}
$todoForm.submit(function(e){
var input_value=$todoInput.val();
$todoList.append('<li>'+input_value+' <a href="#" class="todoDelete">X</a></li>');
$todoInput.val('');
count();
});
$todoList.on('click','.todoDelete',function(e){
$(this).parent().remove();
count();
});
})();
效果：
