【jQuery案例】todolist待办事项清单 jQuery+JS实现_jquery待办
以下是一个使用jQuery和JavaScript实现的简单的todolist待办事项清单的示例代码：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<h1>My TodoList</h1>
<input type="text" id="new-todo-item" placeholder="Add new todo">
</header>
<section>
<ul id="todo-list">
<!-- Todo items will be added here -->
</ul>
</section>
<script src="script.js"></script>
</body>
</html>CSS部分（style.css）:
body {
font-family: Arial, sans-serif;
}
header {
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
#todo-list {
list-style-type: none;
padding: 0;
}
#todo-list li {
margin: 8px;
padding: 8px;
background: #f9f9f9;
border-left: 5px solid #30de88;
font-size: 16px;
}
#new-todo-item {
padding: 8px;
margin: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 4px;
}JavaScript部分（script.js）:
$(document).ready(function(){
$('#new-todo-item').keypress(function(event){
if(event.which === 13){
var todoText = $(this).val();
$('#todo-list').append('<li>' + todoText + ' <button class="delete-item">X</button></li>');
$(this).val('');
}
});
$('#todo-list').on('click', '.delete-item', function(){
$(this).parent().remove();
});
});这个简单的代码实现了一个基本的todolist功能，用户可以通过键盘输入添加待办事项，每一项旁边都有一个删除按钮，点击可以删除对应的事项。这个示例教学了如何使用jQuery处理键盘事件和动态更新DOM，是学习jQuery的一个很好的起点。
评论已关闭