jquery待办事项
时间: 2024-01-11 14:04:50 浏览: 28
以下是使用jQuery实现待办事项的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Todo List</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.completed {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1>Todo List</h1>
<input type="text" id="todoInput" placeholder="Add a new task">
<ul id="todoList">
<!-- Existing tasks will be added dynamically here -->
</ul>
<script>
// Load saved data on page load
$(document).ready(function() {
load();
});
// Add new task when Enter key is pressed
$("#todoInput").on("keydown", function(event) {
if (event.keyCode === 13) {
var task = $(this).val();
addTask(task);
$(this).val("");
}
});
// Add new task to the list
function addTask(task) {
var listItem = $("<li>").text(task);
var checkbox = $("<input>").attr("type", "checkbox");
checkbox.on("click", function() {
$(this).parent().toggleClass("completed");
saveData();
});
listItem.prepend(checkbox);
$("#todoList").append(listItem);
saveData();
}
// Save data to local storage
function saveData() {
var tasks = [];
$("#todoList li").each(function() {
var task = {
text: $(this).text(),
completed: $(this).hasClass("completed")
};
tasks.push(task);
});
localStorage.setItem("todoData", JSON.stringify(tasks));
}
// Load data from local storage
function load() {
var data = localStorage.getItem("todoData");
if (data) {
var tasks = JSON.parse(data);
for (var i = 0; i < tasks.length; i++) {
var listItem = $("<li>").text(tasks[i].text);
if (tasks[i].completed) {
listItem.addClass("completed");
listItem.prepend($("<input>").attr("type", "checkbox").prop("checked", true));
} else {
listItem.prepend($("<input>").attr("type", "checkbox"));
}
$("#todoList").append(listItem);
}
}
}
</script>
</body>
</html>
```
这个示例代码实现了一个简单的待办事项列表。用户可以在输入框中输入新的任务,并按Enter键添加到列表中。每个任务都有一个复选框,用户可以勾选完成任务。已完成的任务会有删除线样式。所有的任务数据都会保存在浏览器的本地存储中,以便在页面重新加载时恢复数据。