jQuery模仿ToDoList實現(xiàn)簡單的待辦事項列表
更新時間：2019年12月30日 10:04:52 作者：By admin
這篇文章主要介紹了jQuery模仿ToDoList實現(xiàn)簡單的待辦事項列表，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
功能：在文本框中輸入待辦事項按下回車后，事項會出現(xiàn)在未完成列表中；點擊未完成事項前邊的復(fù)選框后，該事項會出現(xiàn)在已完成列表中，反之亦然；點擊刪除按鈕會刪除該事項。待辦事項的數(shù)據(jù)是保存到本地存儲的（localStorage），就算關(guān)閉頁面再打開，數(shù)據(jù)還是存在的（前提是要用相同瀏覽器）。
ToDoList鏈接： ToDoList—最簡單的待辦事項列表
先把css樣式以及js文件引入進(jìn)來，jQuery文件要寫在你自己的js文件上邊
<link rel="stylesheet" href="css/index.css" rel="external nofollow" > <script src="js/jquery.min.js"></script> <script src="js/todolist.js"></script>
HTML代碼：
<body>
<header>
<section>
<label for="title">ToDoList</label>
<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
</section>
</header>
<section>
<h2>正在進(jìn)行 <span id="todocount"></span></h2>
<ol id="todolist" class="demo-box">
</ol>
<h2>已經(jīng)完成 <span id="donecount"></span></h2>
<ul id="donelist">
</ul>
</section>
<footer>
Copyright © 2019
</footer>
</body>
body {
margin: 0;
padding: 0;
font-size: 16px;
background: #CDCDCD;
}
header {
height: 50px;
background: #333;
background: rgba(47, 47, 47, 0.98);
}
section {
margin: 0 auto;
}
label {
float: left;
width: 100px;
line-height: 50px;
color: #DDD;
font-size: 24px;
cursor: pointer;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header input {
float: right;
width: 60%;
height: 24px;
margin-top: 12px;
text-indent: 10px;
border-radius: 5px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
border: none
}
input:focus {
outline-width: 0
}
h2 {
position: relative;
}
span {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
padding: 0 5px;
height: 20px;
border-radius: 20px;
background: #E6E6FA;
line-height: 22px;
text-align: center;
color: #666;
font-size: 14px;
}
ol,
ul {
padding: 0;
list-style: none;
}
li input {
position: absolute;
top: 2px;
left: 10px;
width: 22px;
height: 22px;
cursor: pointer;
}
p {
margin: 0;
}
li p input {
top: 3px;
left: 40px;
width: 70%;
height: 20px;
line-height: 14px;
text-indent: 5px;
font-size: 14px;
}
li {
height: 32px;
line-height: 32px;
background: #fff;
position: relative;
margin-bottom: 10px;
padding: 0 45px;
border-radius: 3px;
border-left: 5px solid #629A9C;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
ol li {
cursor: move;
}
ul li {
border-left: 5px solid #999;
opacity: 0.5;
}
li a {
position: absolute;
top: 2px;
right: 5px;
display: inline-block;
width: 14px;
height: 12px;
border-radius: 14px;
border: 6px double #FFF;
background: #CCC;
line-height: 14px;
text-align: center;
color: #FFF;
font-weight: bold;
font-size: 14px;
cursor: pointer;
}
footer {
color: #666;
font-size: 14px;
text-align: center;
}
footer a {
color: #666;
text-decoration: none;
color: #999;
}
@media screen and (max-device-width: 620px) {
section {
width: 96%;
padding: 0 2%;
}
}
@media screen and (min-width: 620px) {
section {
width: 600px;
padding: 0 10px;
}
}
index.css
接下來開始寫我們自己的js代碼
將多次使用的代碼封裝成函數(shù)，方便使用
①獲取本地存儲的數(shù)據(jù)。如果本地有數(shù)據(jù)則直接獲取過來，沒有數(shù)據(jù)的話就返回一個空數(shù)組
function getDate() {
var data = localStorage.getItem("todolist"); // 將獲取到的數(shù)據(jù)賦給data
if(data !== null) { // 如果本地有數(shù)據(jù)，則返回數(shù)據(jù)
return JSON.parse(data); // 本地存儲只能存儲字符串，所以要想獲取里邊的數(shù)據(jù)就必須將字符串轉(zhuǎn)換為數(shù)組形式返回
} else {
return []; // 如果本地沒有數(shù)據(jù)，則返回一個空數(shù)組
}
}
②保存本地存儲數(shù)據(jù)
function saveDate(data) {
// 用JSON.stringify()將數(shù)組轉(zhuǎn)化成字符串保存到本地存儲
localStorage.setItem("todolist", JSON.stringify(data));
}
③渲染頁面 加載數(shù)據(jù)
先將本地存儲數(shù)據(jù)獲取過來；將他們遍歷（遍歷之前先將列表清空），看他們是否已經(jīng)被完成（通過數(shù)組里我們自己添加的done的值為true還是false來判斷），如果已經(jīng)被完成則添加到ul列表，否則添加進(jìn)ol列表里；同時聲明兩個變量來保存已完成和未完成事項的個數(shù)
function load() {
var data = getDate(); // 先獲取本地存儲數(shù)據(jù)
// 遍歷本地存儲數(shù)據(jù) 將他們添加到列表中
$("ol, ul").empty(); // 遍歷之前先清空列表
var doneCount = 0; // 已經(jīng)完成的個數(shù)
var todoCount = 0; // 正在進(jìn)行的個數(shù)
$.each(data, function(i, ele) { // i為索引 ele為遍歷對象
// 如果復(fù)選框被選中（已完成done: true）添加到ul里，未被選中（未完成done: false）添加到ol里
if(ele.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
doneCount++; // 每添加一個li，已完成數(shù)加一
} else {
$("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
todoCount++;
}
})
$("#donecount").text(doneCount);
$("#todocount").text(todoCount);
}
1. 用戶輸入待辦事項按下回車，將事項添加進(jìn)列表
給文本框綁定鍵盤按下事件，通過ASCII值來判斷用戶是否按下了回車（回車的ASCII值為13）；
不能直接在本地存儲里更改數(shù)據(jù)，所以要先獲取數(shù)據(jù)（數(shù)組形式），把數(shù)組進(jìn)行更新數(shù)據(jù)（把最新數(shù)據(jù)追加給數(shù)組），再保存到本地存儲；
然后對頁面進(jìn)行重新渲染 更新數(shù)據(jù)
load(); // 第一步先渲染頁面，不然一開始刷新頁面時列表不顯示
$("#title").on("keydown", function(event) {
if(event.keyCode === 13) {
if($(this).val() !== "") {
var data = getDate(); // 獲取本地存儲數(shù)據(jù)
// 把數(shù)組進(jìn)行更新數(shù)據(jù)，把最新數(shù)據(jù)追加給數(shù)組
data.push({title: $(this).val(), done: false});
saveDate(data); // 保存到本地存儲
load(); // 渲染加載到頁面
$(this).val("");
}
}
})
2. 刪除待辦事項
先獲取本地存儲數(shù)據(jù)；
用attr獲取自定義屬性index（索引）得到用戶點擊的第幾個事項，通過索引刪除數(shù)組里對應(yīng)的那組數(shù)據(jù)；
將更新過的數(shù)組保存到本地存儲 再渲染給頁面
$("ol, ul").on("click", "a", function() {
var data = getDate(); // 獲取本地數(shù)據(jù)（data是局部變量，不用擔(dān)心沖突）
var index = $(this).attr("index"); // 用attr獲取自定義屬性index，得到索引
// splice(index, num)刪除數(shù)組對象 index為開始刪除的位置，num為刪除幾個
data.splice(index, 1);
saveDate(data);
load();
})
3. 用戶點擊復(fù)選框來選擇事項已完成或未完成
獲取本地存儲數(shù)據(jù)；
通過復(fù)選框的兄弟a的index屬性來獲取用戶點擊的事項的索引（index），將第index個數(shù)據(jù)的done屬性值修改為復(fù)選框的值；
將更新過的數(shù)組保存到本地存儲 再渲染給頁面
$("ol, ul").on("click", "input", function() {
var data = getDate();
// 利用a獲取用戶點擊的第幾個復(fù)選框
var index = $(this).siblings("a").attr("index");
// 修改數(shù)據(jù)：data[索引].屬性名 獲取固有屬性用prop
data[index].done = $(this).prop("checked");
saveDate(data);
load();
})
詳細(xì)JS代碼：
$(function() {
load(); // 先渲染頁面，不然一開始刷新頁面時列表不顯示
// 1、綁定鍵盤按下事件
$("#title").on("keydown", function(event) {
if(event.keyCode === 13) { // 是否按下了回車 回車的ASCII值為13
if($(this).val() == "") {
alert("請輸入事項內(nèi)容！")
} else {
// 不能直接在本地存儲里改數(shù)據(jù)，所以要先獲取數(shù)據(jù)，然后改變數(shù)組，再保存到本地
var data = getDate(); // 獲取本地存儲數(shù)據(jù)
// 把數(shù)組進(jìn)行更新數(shù)據(jù)，把最新數(shù)據(jù)追加給數(shù)組
data.push({title: $(this).val(), done: false});
saveDate(data); // 保存到本地存儲
load(); // 渲染加載到頁面
$(this).val("");
}
}
})
//2、刪除待辦事項
$("ol, ul").on("click", "a", function() {
var data = getDate(); // 獲取本地數(shù)據(jù)
var index = $(this).attr("index"); // 用attr獲取自定義屬性，得到索引
// splice(index, num)刪除數(shù)組對象 index為開始刪除的位置，num為刪除幾個
data.splice(index, 1);
saveDate(data); // 刪除后在把data保存到本地存儲
load(); // 重新渲染頁面
})
//3、正在進(jìn)行和已完成
$("ol, ul").on("click", "input", function() {
var data = getDate(); // 獲取數(shù)據(jù)
// 獲取用戶點擊的第幾個按鈕，利用a
var index = $(this).siblings("a").attr("index");
// 修改數(shù)據(jù) data[索引].屬性名 獲取固有屬性用prop
data[index].done = $(this).prop("checked");
saveDate(data); // 保存到本地存儲
load(); // 渲染頁面
})
// 獲取本地存儲數(shù)據(jù)
function getDate() {
var data = localStorage.getItem("todolist");
if(data !== null) { // 如果本地有數(shù)據(jù)，則返回數(shù)據(jù)
return JSON.parse(data); // 本地存儲只能存儲字符串，所以要將字符串轉(zhuǎn)換為數(shù)組形式返回
} else { // 如果本地沒有數(shù)據(jù)，則返回一個空數(shù)組
return [];
}
}
// 保存本地存儲數(shù)據(jù)
function saveDate(data) {
// 用JSON.stringify()將數(shù)組轉(zhuǎn)化成字符串保存到本地存儲
localStorage.setItem("todolist", JSON.stringify(data));
}
// 渲染加載數(shù)據(jù)
function load() {
var data = getDate(); // 先獲取本地存儲數(shù)據(jù)
// 遍歷本地存儲數(shù)據(jù) 將他們添加到列表中
$("ol, ul").empty(); // 遍歷之前先清空列表
var doneCount = 0; // 已經(jīng)完成的個數(shù)
var todoCount = 0; // 正在進(jìn)行的個數(shù)
$.each(data, function(i, ele) { // i是索引 ele為遍歷對象
// 如果復(fù)選框被選中（已完成）添加到ul里，沒被選中（未完成）添加到ol里
if(ele.done) {
$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
doneCount++;
} else {
// 將數(shù)據(jù)添加進(jìn)列表里
$("ol").prepend("<li><input type='checkbox'> <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + "></a></li>");
todoCount++;
}
})
$("#donecount").text(doneCount);
$("#todocount").text(todoCount);
}
})
總結(jié)
以上所述是小編給大家介紹的jQuery模仿ToDoList實現(xiàn)簡單的待辦事項列表，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
jQuery實現(xiàn)動態(tài)添加節(jié)點與遍歷節(jié)點功能示例
這篇文章主要介紹了jQuery實現(xiàn)動態(tài)添加節(jié)點與遍歷節(jié)點功能,結(jié)合實例形式分析了jQuery針對頁面元素節(jié)點元素的動態(tài)添加與遍歷相關(guān)操作技巧,需要的朋友可以參考下2017-11-11
Login頁面應(yīng)該是迅速和簡潔的，于是如果可以不產(chǎn)生回送，則不產(chǎn)生回送是最好的。2009-10-10
jQuery的實現(xiàn)原理的模擬代碼 -4 重要的擴(kuò)展函數(shù) extend
在上兩篇文章中，我們看到每次要通過 jQuery 的原型增加共享方法的時候，都需要通過 jQuery.fn 一個個進(jìn)行擴(kuò)展，非常麻煩.2010-08-08
jQuery.validate.js API說明2010-07-07
這篇文章主要為大家詳細(xì)介紹了jquery分頁插件pagination的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
這篇文章主要介紹了JS JQUERY實現(xiàn)滾動條自動滾到底的方法,需要的朋友可以參考下2015-01-01
本文給大家分享一段基于jQuery簡單實現(xiàn)的網(wǎng)頁選項卡代碼，非常簡單實用，這里推薦給小伙伴們。2014-11-11
這篇文章主要為大家詳細(xì)介紹了JQuery核心函數(shù)是什么，及使用方法介紹，感興趣的小伙伴們可以參考一下2016-05-05
jQuery實現(xiàn)的form轉(zhuǎn)json經(jīng)典示例
這篇文章主要介紹了jQuery實現(xiàn)的form轉(zhuǎn)json功能,結(jié)合完整實例形式分析了jQuery將form表單數(shù)據(jù)封裝成json傳輸?shù)木唧w步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-10-10
jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值
這篇文章主要介紹了jQuery響應(yīng)鼠標(biāo)事件并隱藏與顯示input默認(rèn)值的具體實現(xiàn),需要的朋友可以參考下2014-08-08