极客教程如何使用jQuery创建待办事项列表
本文重点介绍开发一个具有一些基本功能的_待办事项清单，如。
- 添加任务
- 删除任务
- 在已完成的任务上打叉
具有使用HTML、CSS、JS、jQuery和Bootstrap-3进行前端开发的基本知识。
步骤:
1.初始化布局。
– 添加一个带有按钮的输入文本框，将任务添加到主列表。
– 我们将使用一些CSS position fixed属性将包含上述内容的容器设置为固定在按钮处。
– 现在我们将添加添加任务的容器。
以下是代码，以及对上述内容的解释。
<!-- Initialize the layout -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Required CDN's -->
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity=
"sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<style>
.container {
width: 90%;
height: auto;
}
.foot {
position: fixed;
left: 10%;
bottom: 0;
width: 80%;
text-align: center;
}
</style>
</head>
<body>
<center>
<div class="foot">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10">
<!-- Input for tasks -->
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Add Task"
id="text">
<div class="input-group-btn">
<button class="btn btn-success">
<i class="glyphicon glyphicon-plus">
</i></button>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
<!-- Rest of the screen used for Adding Tasks -->
<br>
<h2 class="text text-success">My Tasks:</h2>
<br>
<div class="container">
<!-- For adding tasks to the list -->
</div>
</center>
</body>
</html>
2.添加任务的jQuery脚本。
现在我们将添加jQuery代码，这样我们就可以在待办事项列表中添加任务。这里我们使用Bootstrap alert类来添加任务容器。
* 点击任务右侧的十字按钮，将永久删除该任务。
(alert有这个属性，否则我们也要实现删除的脚本) 。
以下是代码，以及对上述内容的解释：。
“`html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<style>
.container {
width: 80%;
height: auto;
}
.foot {
position: fixed;
left: 10%;
bottom: 0;
width: 80%;
text-align: center;
}
</style>
</head>
<body>
<center>
<div class="foot">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10">
<!– Input for tasks –>
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Add Task"
id="text">
<div class="input-group-btn">
<button class="btn btn-success">
<i class="glyphicon glyphicon-plus">
</i></button>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
<br>
<h2 class="text text-success">My Tasks:</h2>
<br>
<div class="container">
</div>
</center>
<script>
(document).ready(function() {
('.btn-success').click(function() {
// If something is written
if (('#text').val().length != 0) {
//Store previous data
var x =('.container').html();
// Add typed text in alert container
var y =
<code><div class="alert alert-success alert-dismissible fade in">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
</code> + ('#text').val() + <code></div></code>;
//Update
('.container').html(y + x);
//Clear after addition
('#text').val("");
} else alert("Enter some Text!");
});
});
</script>
</body>
</html>
<pre><code class=" line-numbers"><br />3.表示已完成任务的脚本。
最后，我们将添加脚本来实现这样的功能：每当我们点击任务时，它就会被越过，如果已经完成，就会被恢复。
为了跨越这个任务，我们将使用CSS中的_text-decoration-line : line-through_属性。
**最终解决方案:**
“`html
<!– To-Do List implemented using jQuery –>
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<link rel=”stylesheet”
href=
“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<script src=
“https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”>
</script>
<script src=
“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”>
</script>
<script src=”https://code.jquery.com/jquery-3.4.1.js”
integrity=
“sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=”
crossorigin=”anonymous”></script>
<style>
.container {
width: 80%;
height: auto;
}
.foot {
position: fixed;
left: 10%;
bottom: 0;
width: 80%;
text-align: center;
}
</style>
</head>
<body>
<center>
<div class=”foot”>
<div class=”row”>
<div class=”col-sm-1″> </div>
<div class=”col-sm-10″>
<!– Input for tasks –>
<div class=”input-group”>
<input type=”text”
class=”form-control”
placeholder=”Add Task”
id=”text”>
<div class=”input-group-btn”>
<button class=”btn btn-success”>
<i class=”glyphicon glyphicon-plus”>
</i></button>
</div>
</div>
<br>
<br>
</div>
</div>
</div>
<br>
<h2 class=”text text-success”>My Tasks:</h2>
<br>
<div class=”container”>
</div>
</center>
<script>
(document).ready(function() {
(‘.btn-success’).click(function() {
if ((‘#text’).val().length != 0) {
var x = (‘.container’).html();
var y =
`<div class=”alert alert-success alert-dismissible fade in”>
<a href=”#” class=”close” data-dismiss=”alert” aria-label=”close”>×</a>
` +(‘#text’).val() + `</div>`;
(‘.container’).html(y + x);
(‘#text’).val(“”);
} else alert(“Enter some Text!”);
});
// When Task is clicked
(document).on(‘click’, ‘.alert’, function() {
if ((this).css(‘text-decoration-line’) == “none”)
(this).css(‘text-decoration-line’, ‘line-through’);
else
(this).css(‘text-decoration-line’, ‘none’);
});
});
</script>
</body>
</html>
输出:
在添加任务之前：
添加任务后：
