當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例

發布時間：2024/7/5 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

day03 - jQuery

學習目標：

能夠說出4種常見的注冊事件
能夠說出 on 綁定事件的優勢
能夠說出 jQuery 事件委派的優點以及方式
能夠說出綁定事件與解綁事件
能夠說出 jQuery 對象的拷貝方法
能夠說出 jQuery 多庫共存的2種方法
能夠使用 jQuery 插件

1.1. jQuery 事件注冊

? jQuery 為我們提供了方便的事件注冊機制，是開發人員抑郁操作優缺點如下：

優點: 操作簡單，且不用擔心事件覆蓋等問題。
缺點: 普通的事件注冊不能做事件委托，且無法實現事件解綁，需要借助其他方法。

語法

演示代碼

<body><div></div><script>$(function() {// 1. 單個事件注冊$("div").click(function() {$(this).css("background", "purple");});$("div").mouseenter(function() {$(this).css("background", "skyblue");});})</script> </body>

1.2. jQuery 事件處理

? 因為普通注冊事件方法的不足，jQuery又開發了多個處理方法，重點講解如下：

on(): 用于事件綁定，目前最好用的事件綁定方法
off(): 事件解綁
trigger() / triggerHandler(): 事件觸發

1.2.1 事件處理 on() 綁定事件

? 因為普通注冊事件方法的不足，jQuery又創建了多個新的事件綁定方法bind() / live() / delegate() / on()等，其中最好用的是: on()

語法

演示代碼

<body><div></div><ul><li>我們都是好孩子</li><li>我們都是好孩子</li><li>我們都是好孩子</li></ul><ol></ol><script>$(function() {// (1) on可以綁定1個或者多個事件處理程序// $("div").on({// mouseenter: function() {// $(this).css("background", "skyblue");// },// click: function() {// $(this).css("background", "purple");// }// });$("div").on("mouseenter mouseleave", function() {$(this).toggleClass("current");});// (2) on可以實現事件委托（委派）// click 是綁定在ul 身上的，但是觸發的對象是 ul 里面的小li// $("ul li").click();$("ul").on("click", "li", function() {alert(11);});// (3) on可以給未來動態創建的元素綁定事件$("ol").on("click", "li", function() {alert(11);})var li = $("<li>我是后來創建的</li>");$("ol").append(li);})</script> </body>

1.2.2. 案例：發布微博案例

1.點擊發布按鈕，動態創建一個小li，放入文本框的內容和刪除按鈕，并且添加到ul 中。
2.點擊的刪除按鈕，可以刪除當前的微博留言。

? 代碼實現略。(詳情參考源代碼)

1.2.3. 事件處理 off() 解綁事件

? 當某個事件上面的邏輯，在特定需求下不需要的時候，可以把該事件上的邏輯移除，這個過程我們稱為事件解綁。jQuery 為我們提供了多種事件解綁方法：die() / undelegate() / off() 等，甚至還有只觸發一次的事件綁定方法 one()，在這里我們重點講解一下 off() ;

語法

演示代碼

<body><div></div><ul><li>我們都是好孩子</li><li>我們都是好孩子</li><li>我們都是好孩子</li></ul><p>我是一個P標簽</p><script>$(function() {// 事件綁定$("div").on({click: function() {console.log("我點擊了");},mouseover: function() {console.log('我鼠標經過了');}});$("ul").on("click", "li", function() {alert(11);});// 1. 事件解綁 off // $("div").off(); // 這個是解除了div身上的所有事件$("div").off("click"); // 這個是解除了div身上的點擊事件$("ul").off("click", "li");// 2. one() 但是它只能觸發事件一次$("p").one("click", function() {alert(11);})})</script> </body>

1.2.4. 事件處理 trigger() 自動觸發事件

? 有些時候，在某些特定的條件下，我們希望某些事件能夠自動觸發, 比如輪播圖自動播放功能跟點擊右側按鈕一致?？梢岳枚〞r器自動觸發右側按鈕點擊事件，不必鼠標點擊觸發。由此 jQuery 為我們提供了兩個自動觸發事件 trigger() 和 triggerHandler() ;

語法

演示代碼

<body><div></div><input type="text"><script>$(function() {// 綁定事件$("div").on("click", function() {alert(11);});// 自動觸發事件// 1. 元素.事件()// $("div").click();會觸發元素的默認行為// 2. 元素.trigger("事件")// $("div").trigger("click");會觸發元素的默認行為$("input").trigger("focus");// 3. 元素.triggerHandler("事件") 就是不會觸發元素的默認行為$("input").on("focus", function() {$(this).val("你好嗎");});// 一個會獲取焦點，一個不會$("div").triggerHandler("click");// $("input").triggerHandler("focus");});</script> </body>

1.3. jQuery 事件對象

? jQuery 對DOM中的事件對象 event 進行了封裝，兼容性更好，獲取更方便，使用變化不大。事件被觸發，就會有事件對象的產生。

語法

演示代碼

<body><div></div><script>$(function() {$(document).on("click", function() {console.log("點擊了document");})$("div").on("click", function(event) {// console.log(event);console.log("點擊了div");event.stopPropagation();})})</script> </body>

注意：jQuery中的 event 對象使用，可以借鑒 API 和 DOM 中的 event 。

1.4. jQuery 拷貝對象

? jQuery中分別為我們提供了兩套快速獲取和設置元素尺寸和位置的API，方便易用，內容如下。

語法

演示代碼

1.5. jQuery 多庫共存

? 實際開發中，很多項目連續開發十多年，jQuery版本不斷更新，最初的 jQuery 版本無法滿足需求，這時就需要保證在舊有版本正常運行的情況下，新的功能使用新的jQuery版本實現，這種情況被稱為，jQuery 多庫共存。

語法

演示代碼

1.6. jQuery 插件

補充：
1.自定義jQuery插件：

$ .extend（）拓展工具方法，可以通過$.xxx（) $.yyy（）來調用
$ .fn.extend（）拓展j0uery方法，可以通過$().xxx() $().yyy()來調用

j0uery插件方法，如果我們想要給J0新增函數，通過上述兩個插件方法拓展函數庫。

$.extend({aaa:function() {alert("這是一個工具方法");}})$.fn.extend({aaa:function() {alert("這是一個jQuery方法");}

案例：自定義drag()插件方法，實現鼠標拖拽元素

<!DOCTYPE html> <html><head><meta charset="utf-8"><script src="./js/jquery-3.5.0.js"></script><title></title><style type="text/css">div {width: 100px;height: 100px;background-color: orange;position: absolute;}p,h1 {position: absolute;}</style><script type="text/javascript">$.extend({aaa:function() {alert("這是一個工具方法");}})$.fn.extend({aaa:function() {alert("這是一個jQuery方法");},drag:function() {// this 誰調用this，this就指向誰// this = $("div")// 鼠標按下事件mousedown$(this).mousedown(function(e) {var offsetX = e.clientX - $(this).offset().left;var offsetY = e.clientY - $(this).offset().top;var _this = this;// 用_this變量來暫時保存this// 添加鼠標移動事件$(document).mousemove(function(e) {$(_this).css({left:e.clientX - offsetX,top:e.clientY - offsetY})}) })// 鼠標松開時，取消鼠標移動事件$(document).mouseup(function() {$(document).off("mousemove");})return this;// 加上這句話就可以實現鏈式調用了}})$(function() {// $("div").aaa();// $.aaa();$('div,p,h1').drag().css("background-color",'pink').mouseover(function() {//鼠標移入時變成黃色$(this).css("background-color","yellow");});})</script></head><body><div></div><div></div><div></div><p>1111</p><h1>2222</h1></body> </html>

2. JS自執行函數：

(function(){//這里為調用的其它代碼 })();

Jquery立即執行函數：

$(function(){//這里為要調用的其它代碼 })

區別：第一個(JS自執行函數)為順序執行，即如果要調用其它的js方法，則需要置于代碼末尾。否則無法調用。

第二個(Jquery立即執行函數)可以為全部代碼加載后再執行，因此，如果第一個放在代碼末尾，兩者功能一樣。

案例2：自定義bgColor插件
bgColor插件.html文件:

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="js/jquery-3.5.0.js"></script><script src="js/bgColor.js"></script><script src="js/jQuery-add.js"></script><script type="text/javascript">$(function() {// $('div').width(100).height(100).css('background-color','red');// 自己封裝一個bgColor方法// $('div').width(100).height(100).bgColor('red');$('div').bgColor('green').width(100).height(100);// 1. 如何自己封裝插件：// 1.1 給jQuery的原型添加方法// 1.2 給jQuery直接添加方法console.log($.add(10,20));})</script></head><body><div></div><p></p></body> </html>

bgColor.js文件:

// (function ($){ // // 需要給jQuery的原型添加方法 // $.fn.bgColor = function(yanse) { // console.log(this); // this是調用這個bgColor方法的jQuery對象 // this.css('background-color',yanse);// // 返回調用這個方法的jQuery本身 // return this; // } // })(jQuery);$(function() {// 需要給jQuery的原型添加方法$.fn.bgColor = function(yanse) {console.log(this); // this是調用這個bgColor方法的jQuery對象this.css('background-color', yanse);// 返回調用這個方法的jQuery本身return this;} })

jQuery-add.js文件:

// $(function() { // // 直接給$添加方法 // $.add = function(num1,num2) { // return num1 + num2; // } // })(function($) {// 直接給$添加方法$.add = function(num1,num2) {return num1 + num2;} })(jQuery)

案例3 自定義表格插件table.js：

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>table 插件</title><style type="text/css">#c {height: 500px;}table{text-align: center;border-collapse: collapse;}th {background-color: deepskyblue;color: #fff;}#c table td,#c table th {width: 100px;border: 1px solid black;}</style><script src="js/jquery-3.5.0.js"></script><script src="js/jQuery-table.js"></script><script type="text/javascript">$(function() {$('#c').table(['序號','姓名','年齡','工資'],[{name:"zep",age:30,salary:4000},{name:"Tom",age:22,salary:2000},{name:"Lily",age:18,salary:8000}])}) </script></head><body><div id="c"></div></body> </html> (function($) {// 給$的原型添加方法// arrTableHead 生成表頭的數組// arrTableBody 生成表格主體部分的數組$.fn.table = function(arrTableHead,arrTableBody) {// console.log(this); // 這里的this是一個jQuery對象，是調用這個table方法的jQuery對象var list = [];list.push('<table>');// 生成表頭list.push('<thead>');list.push('<tr>');for(var i=0;i<arrTableHead.length;i++) {list.push('<th>');list.push(arrTableHead[i]);list.push('</th>');}list.push('</tr>');list.push('</thead>');// 生成表格主體部分for(var j=0;j<arrTableBody.length;j++) {list.push('<tr>');//生成一個序號tdlist.push('<td>'+(j+1)+ '</td>');// 遍歷arrTableBody的一個個對象for(var key in arrTableBody[j] ) {list.push('<td>');list.push(arrTableBody[j][key]);list.push('</td>');}list.push('</tr>');}list.push('</table>');console.log(list.join("")); //join方法可以用符不同的分隔符來構建這個字串。join方法值接受一個參數，即用作分隔符的字符串，然后返回所有數組項的字符串。this.html(list.join(""));} })(window.jQuery)

? jQuery 功能比較有限，想要更復雜的特效效果，可以借助于 jQuery 插件完成。這些插件也是依賴于jQuery來完成的，所以必須要先引入jQuery文件，因此也稱為 jQuery 插件。

? jQuery 插件常用的網站：

jQuery 插件庫 http://www.jq22.com/

jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步驟：

引入相關文件。（jQuery 文件和插件文件）

復制相關html、css、js (調用插件)。

1.4.1. 瀑布流插件（重點講解）

? 我們學習的第一個插件是jQuery之家的開源插件，瀑布流。我們將重點詳細講解，從找到插件所在網頁，然后點擊下載代碼，到插件的使用等，后面的插件使用可參考瀑布流插件的使用。

下載位置

代碼演示

? 插件的使用三點： 1. 引入css. 2.引入JS 3.引入html。（有的簡單插件只需引入html和js，甚至有的只需引入js）

1.引入css.

2.引入js.

<script src="js/jquery-1.11.0.min.js"></script> <script src="js/pinterest_grid.js"></script>  <script type="text/javascript">$(function() {$("#gallery-wrapper").pinterest_grid({no_columns: 5,padding_x: 15,padding_y: 10,margin_bottom: 50,single_column_breakpoint: 700});}); </script>

3.引入html.

<section id="gallery-wrapper"><article class="white-panel"><img src="images/P_000.jpg" class="thumb"><h1><a href="#">我是輪播圖片1</a></h1><p>里面很精彩哦</p></article><article class="white-panel"><img src="images/P_005.jpg" class="thumb"><h1><a href="#">我是輪播圖片1</a></h1><p>里面很精彩哦</p></article><article class="white-panel"><img src="images/P_006.jpg" class="thumb"><h1><a href="#">我是輪播圖片1</a></h1><p>里面很精彩哦</p></article><article class="white-panel"><img src="images/P_007.jpg" class="thumb"><h1><a href="#">我是輪播圖片1</a></h1><p>里面很精彩哦</p></article></section>

總結：jQuery插件就是引入別人寫好的：html 、css、js （有時也可以只引入一部分，讀懂后也可以修改部分內容）

1.4.2. 圖片懶加載插件

? 圖片的懶加載就是：當頁面滑動到有圖片的位置，圖片才進行加載，用以提升頁面打開的速度及用戶體驗。（下載略）

代碼演示

? 懶加載只需引入html 和 js操作即可，此插件不涉及css。

1.引入js

2.引入html

1.4.3. 全屏滾動插件

? 全屏滾動插件比較大，所以，一般大型插件都會有幫助文檔，或者網站。全屏滾動插件介紹比較詳細的網站為：

http://www.dowebok.com/demo/2014/77/

代碼演示

? 全屏滾動因為有多重形式，所以不一樣的風格html和css也不一樣，但是 js 變化不大。所以下面只演示js的引入，html和css引入根據自己實際

項目需要使用哪種風格引入對應的HTML和CSS。

注意：實際開發，一般復制文件，然后在文件中進行修改和添加功能。

1.4.4. bootstrap組件

? Bootstrap是 Twitter 公司設計的基于HTML、CSS、JavaScript開發的簡潔、直觀、強悍的前端開發框架，他依靠jQuery實現，且支持響應式

布局，使得 Web 開發更加方便快捷。

? 凡是在軟件開發中用到了軟件的復用，被復用的部分都可以稱為組件，凡是在應用程序中已經預留接口的組件就是插件。Bootstrap組件使

用非常方便: 1.引入bootstrap相關css和js 2.去官網復制html

代碼演示

引入bootstrap相關css和js

去官網復制html的功能模塊

<div class="container"><div class="btn-group"><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div></div>

1.4.5. bootstrap插件（JS）

? bootstrap中的js插件其實也是組件的一部分，只不過是需要js調用功能的組件，所以一般bootstrap的js插件一般會伴隨著js代碼（有的也可以

省略js，用屬性實現）。

? 步驟： 1.引入bootstrap相關css和js 2.去官網復制html 3.復制js代碼，啟動js插件。

模態框的用法：

代碼演示

引入bootstrap相關css和js

去官網復制html的功能模塊

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"><div class="modal-dialog modal-lg" role="document"><div class="modal-content">里面就是模態框</div></div> </div>

復制js代碼，啟動js插件。

完整代碼演示：

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="./js/jquery-3.5.0.js"></script><script src="./bootstrap/js/bootstrap.min.js"></script><title>js插件的使用</title><style type="text/css"></style></head><body><div class="container"><div class="btn-group"><button type="button" class="btn btn-danger">Action</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></div><nav class="navbar navbar-default"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">Brand</a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">首頁 <span class="sr-only">(current)</span></a></li><li><a href="#">公司簡介</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li><li role="separator" class="divider"></li><li><a href="#">One more separated link</a></li></ul></li></ul><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">搜索</button></form><ul class="nav navbar-nav navbar-right"><li><a href="#">Link</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Action</a></li><li><a href="#">Another action</a></li><li><a href="#">Something else here</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li></ul></div></div></nav><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button><div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"><div class="modal-dialog modal-lg" role="document"><div class="modal-content">大模態框</div></div></div><button data-toggle="modal" data-target="#myModal">點擊顯示模態框(通過data屬性調用)</button><div class="modal fade" tabindex="-1" role="dialog" id="myModal"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">Modal title</h4></div><div class="modal-body"><p>One fine body…</p></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div><button type="button" class="myBtn">點擊顯示模態框(通過JavaScript調用)</button><div><ul class="nav nav-tabs" role="tablist"><li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">手機</a></li><li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">電視</a></li></ul><div class="tab-content"><div role="tabpanel" class="tab-pane active" id="home">手機相關的內容</div><div role="tabpanel" class="tab-pane" id="profile">電視相關的內容</div></div></div><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img src="..." alt="..."><div class="carousel-caption">...</div></div><div class="item"><img src="..." alt="..."><div class="carousel-caption">...</div></div>...</div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div></div><script type="text/javascript">// 當我們點擊了自己定義的按鈕，就彈出模態框$('.myBtn').on("click", function() {// alert(111);$('#myModal').modal();})</script></body> </html>

1.4.6. bootstrap案例-阿里百秀

1.通過調用組件實現導航欄
2.通過調用插件實現登錄
3.通過調用插件標簽頁實現 tab 欄

? 代碼實現略。(詳情參考源代碼)

1.7. 綜合案例: toDoList案例分析（代碼略）

1.7.1 案例：案例介紹

// 1. 文本框里面輸入內容，按下回車，就可以生成待辦事項。 // 2. 點擊待辦事項復選框，就可以把當前數據添加到已完成事項里面。 // 3. 點擊已完成事項復選框，就可以把當前數據添加到待辦事項里面。 // 4. 但是本頁面內容刷新頁面不會丟失。

1.7.2 案例：toDoList 分析

// 1. 刷新頁面不會丟失數據，因此需要用到本地存儲 localStorage // 2. 核心思路：不管按下回車，還是點擊復選框，都是把本地存儲的數據加載到頁面中，這樣保證刷新關閉頁面不會丟失數據 // 3. 存儲的數據格式：var todolist = [{ title : ‘xxx’, done: false}] // 4. 注意點1：本地存儲 localStorage 里面只能存儲字符串格式，因此需要把對象轉換為字符串 JSON.stringify(data)。 // 5. 注意點2：獲取本地存儲數據，需要把里面的字符串轉換為對象格式JSON.parse() 我們才能使用里面的數據。

1.7.3 案例：toDoList 按下回車把新數據添加到本地存儲里面

// 1.切記：頁面中的數據，都要從本地存儲里面獲取，這樣刷新頁面不會丟失數據，所以先要把數據保存到本地存儲里面。 // 2.利用事件對象.keyCode判斷用戶按下回車鍵（13）。 // 3.聲明一個數組，保存數據。 // 4.先要讀取本地存儲原來的數據（聲明函數 getData()），放到這個數組里面。 // 5.之后把最新從表單獲取過來的數據，追加到數組里面。 // 6.最后把數組存儲給本地存儲 (聲明函數 savaDate())

1.7.4 案例：toDoList 本地存儲數據渲染加載到頁面

// 1.因為后面也會經常渲染加載操作，所以聲明一個函數 load，方便后面調用 // 2.先要讀取本地存儲數據。（數據不要忘記轉換為對象格式） // 3.之后遍歷這個數據（$.each()），有幾條數據，就生成幾個小li 添加到 ol 里面。 // 4.每次渲染之前，先把原先里面 ol 的內容清空，然后渲染加載最新的數據。

1.7.5 案例：toDoList 刪除操作

// 1.點擊里面的a鏈接，不是刪除的li，而是刪除本地存儲對應的數據。 // 2.核心原理：先獲取本地存儲數據，刪除對應的數據，保存給本地存儲，重新渲染列表li // 3.我們可以給鏈接自定義屬性記錄當前的索引號 // 4.根據這個索引號刪除相關的數據----數組的splice(i, 1)方法 // 5.存儲修改后的數據，然后存儲給本地存儲 // 6.重新渲染加載數據列表 // 7.因為a是動態創建的，我們使用on方法綁定事件

1.7.6 案例：toDoList 正在進行和已完成選項操作

// 1.當我們點擊了小的復選框，修改本地存儲數據，再重新渲染數據列表。 // 2.點擊之后，獲取本地存儲數據。 // 3.修改對應數據屬性 done 為當前復選框的checked狀態。 // 4.之后保存數據到本地存儲 // 5.重新渲染加載數據列表 // 6.load 加載函數里面，新增一個條件,如果當前數據的done為true 就是已經完成的，就把列表渲染加載到 ul 里面 // 7.如果當前數據的done 為false，則是待辦事項，就把列表渲染加載到 ol 里面

1.7.7 案例：toDoList 統計正在進行個數和已經完成個數

// 1.在我們load 函數里面操作 // 2.聲明2個變量：todoCount 待辦個數 doneCount 已完成個數 // 3.當進行遍歷本地存儲數據的時候，如果數據done為 false，則 todoCount++, 否則 doneCount++ // 4.最后修改相應的元素 text()

1.8. 今日總結

總結

以上是生活随笔為你收集整理的jQuery学习笔记系列（三）——事件注册、事件处理、事件对象、拷贝对象、多库共存、jQuery插件、toDoList综合案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： 1+X web中级 Laravel学习笔
下一篇：基于JWT的身份认证学习笔记